Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Frame by Frame Animation

You will need this font to complete this tutorial. Download, unzip, and install in your font directory.

1. Create a new movie by click file=> new.  Set the movie properties in the properties inspector to the following:

  • Width = 260
  • Height = 60 pixels
  • Background color = white
  • Frame rate = 12
  • Ruler units = pixels


2. Select your type tool. Set the type tool properties to

  • Static text
  • font = Swifty
  • Size = 60
  • Color = black
  • bold
  • Character Spacing = -6(horizontal spacing)

3. Type in the letters asdfghjkl;' on your keyboard. This represents the row for the a key typed in all lower case in order from left to right.

4. Use your move tool to center this on your stage.

5. Select the text box with one click of the arrow took.

  • Click Modify=> break apart.
  • While still highlighted, click modify=> distribute to layers.
  • While still selected, repeat by clicking modify=> break apart.

This will remove the issue of having to embed the font.  Each figure will move to its own layer and each layer will be called the letter of the font.

6. Use the move tool to grab the key frame starting with the s layer and move the contents to frame 2.

Move the contents of layer d to frame 3.

Move the contents of layer f to frame4  and so forth, until you have all the frames moved out one more frame from the last.


7. Click File=> save. Then click file=> publish.  Since each frame is a different drawing of the runner, you have completed a frame by frame animation.

 

 



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2024 All Rights Reserved
Privacy and Legal