Friday, June 6, 2008

Video: Top Drawer (Parts II & III)

Adobe TV has posted the second and third installments of the Top Drawer videos that we made, showing how we turn mouse events (Part II) into graphical shapes (Part III). Be sure to also check out my original Top Drawer postings (here, here, here, and here) that link to the source code for the project.


ISLAM BOOK1 said...

are you planning on adding more features to your app like text and the ability to rotate the drawn objects and transforming of the objects.

Kind of like bringing photoshop to flex.

Also, how hard would it be to save the final drawing into a PDF, or even a JPG.

I'll be checking back to see your updates.

Great work,

holla2040 said...

Thanks for the videos. I particularly enjoyed that you tailored your presentation to midlevel+ flex developers. (I don't have the time to watch someone type.) Quick and to the point, excellent work! I'm going to check back often to see what you're up to.

Chet Haase said...

Islam Book1: I wasn't planning on making this application a real app; it's more a tutorial on various Flex features than an attempt to rewrite an application that's been done and redone many times since I first saw it on the Mac in 1985.

But I could see possibly adding more features to it if that's the best way to show off some particular item I'd like to cover. For example, saving it as a JPG wouldn't be difficult if it were an AIR application (more local-access and file I/O APIs). But I'd only add items to it if i could do so in a way that's clear to demonstrate; I don't want to make the source base so huge that it becomes unwieldly to anyone that hasn't followed the full saga of Top Drawer to date...

Anyway, thanks for watching. Check back later for more videos/blogs/code on vairous graphics-related topics.

pbohny said...

Thanks for this great series.

Do you know this ObjectHandles Class?

How could this be simply added to Topdrawer?

aaronmurz said...

Chet, I noticed someone mentioned that the clear button wasn't functioning correctly after the first use - maybe i got some non-updated code but while it works fine multiple times, it seems that if you draw a line and exit your mouse off the canvas, the clear button doesn't clear that bit. I think what's happening is that your shape never gets put into the shape stack (as there was no mouseup event) and therefore cannot be cleared. Because UIComponent doesn't have a removeAllChildren method and you are doing it in a loop, that's my best guess without close examination. Is there a fix for this? If not I will explore bounding the mouse movement or at least maintaining state when it leaves the canvas

thanks, nice tutorial

Chet Haase said...

aaronmurz: Your guess was correct - I fixed the bug with Clearing the list and posted the new code in place of the old.
As to the other problem you mentioned, there are a couple of ways to attack that. In a real version of the application, or at least a more complete one (which I always intended to get to and somehow never have), I would handle mouse events globally and not just inside the container. you can track mouse events on the Stage overall or in the SystemManager, to make sure that if the user unclicks off the stage you'll actually get that notification. This is what we do in Flex itself for our components (can't ship a robust Button that doesn't know how to handle this situation). It's just one of those niceties that I didn't get to for this tutorial application.
Maybe adding smaller things like this piecemeal would make for good future blog entries. Maybe when I get past these darn deadlines I can think about that....