Thursday, July 10, 2008

Tutorial on File/Image Uploading with Flash

File Upload with Flash tutorial


Holy junk! This latest lesson took me forever to create. I started researching this around June 1, finished part 1 around June 10, and now here it is July 10, and I just uploaded parts 2 and 3. But in a weird way, delays are for the better, because usually they indicate a major change in terms of what I planned to teach vs. what actually got taught. And it's always the case that what actually got taught is double or triple what I planned on doing, because midway through I think "well sheesh, it would be great to ALSO show people this".

So anyway, this lesson is now in the can. And lets talk a bit about it. Part 1 of the tutorial teaches how to simply upload a file from a Flash interface (that is, browse your computer for an image file and upload to the server) and then that image gets displayed in Flash. The file doesn't necessary need to be an image file, but if its not a PNG, GIF or JPG then you can't do all the cool stuff to follow.

So Part 2 and 3 of the lesson cover these scenarios for what you MIGHT want to do with this application....

Scenario #1: Upload an image into Flash, and then the image becomes drag-n-droppable AND dressup-able. So the library can hold different items you might want to dress up the image with. The example file just uses a hat, but you can extend this to tons of different images. And once you dress up the image, the user can print out the final composition.

Scenario #2: Upload an image into Flash and a looping motion tween is applied. So the image kind of hovers. Again you can drag and drop the image, but this time a bullseye target appears and if you drag the image over top, a hitTestObject command will call a function to do whatever. In the example file the image kind of shrinks and "sticks" to the bullseye, and calls a URL to open.

Scenario #3: Upload an image into Flash and set a mask for it. So both the mask and image are moveable for fine-tuning, and you can then set / unset a mask for it. The mask can be any shaped-design.

Scenario #4. This time the user can upload two images from Flash which get used in an animation ( jibjab.com has the best examples of these animation ) And instead of using preset masks like the previous example, you can adjust handles (or control points) on the mask to get a better masking effect. And of course one image could be a head, the other could be a mouth, and then you can animate those however. The end example basically leaves you with everything you need to start keyframing a lengthy lipsynced animation. But keep in mind, the jibjab reference is just one possible thing you could do. You could just simply create a canned animation using someone's logo or whatever. Fade in, fade out, whatever.

So thats the tutorial. There's also a demo video on the File Upload with Flash sales page.