Moving the Blog!

Hey all, I'm going to move the blog over to Wordpress. And also update it more often (not just lesson releases)

Hope you check it out! Click Here to Jump!

Tutorial on File/Image Uploading with Flash

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.

Caricatures Mega Course

Blender Basics 3

Character Design using Adobe Illustrator.

This lesson has two first's. A new instructor has stepped up to the mic: Mike MacNerland, AND this is CartoonSmart's first lesson with Adobe Illustrator (more to follow, I'm sure).

Here's the official "sales page" write up which will describe the lesson better than my rambling blog-speak....

This tutorial teaches character design using sweeping curves, unique angles, minimal shapes, and highly stylized, sometimes abstract forms. Cartoons like the Jetsons, and Flinstones are reference points for what this popular modern style grew out of. Ffor example look at the swooping continous line of Wilma Flinstone's hair, Fred and Barney's simple no-necked egg-shaped bodies, or the background art of the Jetson's signature curvilinear universe. A modern reference for this style would be shows like Dexter's Lab or Power Puff Girls that minimalized the classic Hannah Barbera look to the extreme. One major benefit of this simplified design style is that animation can be done much quicker than a more complicated realistic character. Guest instructor Mike Macnerland was brought into teach this lesson because of his background in the animation / illustration industry and his portfolio of character designs embody this re-invention of that classic 1960's cartoon look. The tutorial covers sketching characters for 30 minutes (with paper and pencil or on the computer with a Wacom), then tracing over his designs in Adobe Illustrator. This portion of the tutorial covers some of the basics of drawing with vector art in Illustrator. Mike also shares some personal tips to developing a career as a professional artist.

The total course time is 4 hours. Quicktime or Real Player will play the tutorial movies.


Still here? And interesting in buying. Please click here then.

Flash Components Lesson for Actionscript 3 !

Well this has been a heavily requested lesson, and one that I actually learned quite a bit from by teaching it...

"All About Components" (apt title right) It of course covers all of Flash CS3's User Interface Components. Which includes...

- CS3 Button Component - simple clickable button. This part also teaches how to change the text style of this component (and all others)
- CS3 CheckBox Component - simple checkbox, turns a value on or off
- CS3 ColorPicker Component -gives users a pallette to choose colors from. This part demos how to tint objects / text to that color
- CS3 ComboBox Component -basic pulldown menu
- CS3 DataGrid Component - displays tabular type data, This includes loading an XML file into a data grid (example file included)
- CS3 Label Component -simple label, often used with another component to describe it
- CS3 List Component -scrollable list
- CS3 NumericStepper Component - For clicking to step up or down a number at specified intervals
-CS3 ProgressBar Component - used for showing the loading progress of the current file or externally loaded content (examples for each)
-CS3 RadioButton Component - great for a multiple choice type quiz (includes an example quiz file, great for teachers)
-CS3 ScrollPane Component - scrollable container for content (images, movieclips, swfs, etc)
-CS3 Slider Component - simple slider device, could be used for moving objects onstages or changing values
-CS3 TextArea Component - used for a scrolling dynamic text
-CS3 TextInput Component - used for capturing user input
-CS3 TileList Component - perfect for loading a thumbnail gallery, or any series of full size images. Could be set as a grid or rows/columns
-CS3 UILoader Component - used for loading external image files (includes other swfs)
-CS3 UIScrollBar Component - used for a scrolling dynamic text, the example includes loading text from a .txt file online

During the lesson and in each example file we've demonstrated code for the most common uses of each component.
Trace statements in each file are used to output different example values that could be useful in your project. Of course watching the tutorial videos are your best learning source, but if you're in a hurry for a quick example of each component, these example files will be a handy reference and stepping stone for exploring each component's full uses.

Example files include a component already onstage and a runtime-created version of the component.

All code is written in Actionscript 3

Interested? Check out the sales page here.... All About Components

Awesome XML and Actionscript 3 Image / Swf Gallery

Learn to Progam an Actionscript 3 XML Gallery Compatible with Flash CS3

This 2 hour Quicktime tutorial for Flash will teach you the Actionscript 3 Code to load an XML File, which will bring thumbnails into a scrollable pane. Thumbnails then link to corresponding images or swfs which load into the main area of the Flash file.

Cool Features...

In the XML file you can easily change thumbnail paths, pictures paths, picture titles and descriptions using XML.

You can also swap thumbnail layouts. The example on the site uses a single vertical column and single horizontal row of thumbnails to free up more screen real estate for the main images. You can also create thumbnail areas of any number of rows / columns.

Add links to open other XML files which can load up alternate galleries.

Code taught includes...

Functions
Enter Frame Listeners
Mouse Event Listeners
Scripted Motion Tweens
Tween Finish Listeners
Object Dragging and Release
Scoring and Math logic
If Statements
While Loops
Variables
Positioning and Scaling
General Button Code
ScrollPane Components

Grab it here...XML and Actionscript 3 Image / Swf Gallery