Fun Flash Animation

One way to add some dynamic objects to your web site is by using Flash animation. Essentially, Flash is just a digital version of a flip book, all compiled into one stream of continuous motion. Originally, the majority of animation on the web was created using Adobe Flash. Web sites like HomeStarRunner used vector graphics and Flash to animate entire web shows, which accounted for the majority of their online content.

To begin creating your own animation, the first step is to sketch an overall motion plan for the scene. For the animation to look smooth, you’ll have to create a frame for every small change your object makes. I’ve decided to animate a stick figure man. In my scene, he will kick once, crouch and then leap up and fly away. Start by selecting the brush tool from the tools menu bar on the right and draw your object. This tool is most useful for free form drawing, as it auto smoothes your stroke to make it look more natural (no jagged edges from unsteady hands).

Selecting the Brush Tool

Next, we’ll create a new frame by pressing F6. The newly selected frame contains an exact copy of your first frame, allowing for easy editing and assuring that your object is stationary. One useful tool for building a scene frame by frame is the onion skin tool. It creates a darkened area that corresponds to the previous frame. The rest is fairly straight forward. Continue appending frames until you have a full scene, bearing in mind that the swf file will loop upon completion.

Onion Skin for Preceding Frames

To preview the entire scene (as it will appear in your browser), use the shortcut Ctrl+Enter. This will render the scene and save a copy as an swf file, which can be embedded directly into your HTML code. You can see the entire scene on my personal website.

Advertisements


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s