Adding Animation

From MCTCWiki

Jump to: navigation, search

Contents

Topic summary: In this topic you will learn how to create Flash Animations, how to work with the timeline, creating simple frame-by-frame and motion tweening animations, and how to use ActionScript to add animation to your Game Demo file.


Topic Assignments

In the Mini Game Project, you animated movie clips to move on their own. Now you will learn more about different ways to create basic animation in Flash.

Creating and Using Symbols in Your Library

Learn how the Flash symbols can help you create animations:

See how the Flash Library can help you manage all your game assets:

Frame by Frame Animation

Watch the following video about traditional frame-by-frame animation:
The player will show in this paragraph

Learn How to Create a Tween

Watch this video clip to learn how to make movement animation with Motion Tweening:
The player will show in this paragraph

  • FYI: CS4 and CS5 users would refer to this as "Classic Motion Tweening."

Read more about making your game objects move by adding Motion Tweening: Motion Tweening & Easing.

  • FYI: CS4 and CS5 users would refer to this as "Classic Motion Tweening."

Introduction to ActionScript Animation

onEnterFrame

  • ...is a function that tells Flash to start all the ActionScript commands as soon as the frame/scene enters the stage (hence "onEnterFrame" - it's when the object enters the frame, or stage).
  • ...is run every time Flash refreshes the scene, it checks and follows all applicable actionscript commands for as long as it is on that frame.
  • ...will help you organize simple animations, character movement, character interaction, keeping score, and game controls.

Watch this video tutorial to learn more about using onEnterFrame.
The player will show in this paragraph

Use this practice file to make three instances of the bee move across the stage (and into the hive) at different speeds.

Adding Animation to Your Game Demo

Add Animation to Your Game Demo File

  • Open your Game Demo file.
  • Insert a new layer above the other layers in your timeline and name it "Animations."
  • Create a movie clip symbol on the first frame of this layer, one that represents something a player would see in your game.
  • Give the movie clip an instance name that refers to its frame. ex. Hero1
  • Add the onEnterFrame code to the first frame of your ACTIONS layer, replacing "Mclip1" with the instance name for your movie clip. (see the example below)
  • Test your movie and see the movie clip scroll across your first frame.
  • Adjust the numbers for where the movie clip starts (Mclip1._x = & Mclip1._y =) and how fast and in which direction it moves (+=10) You can use similar code to cause movement up and down the screen, just change Mclip1._x += to Mclip1._y += to try that.
  • Save and Publish the newest version of your Game Demo file as "YouUserName_demo4."


EXAMPLE CODE FOR FRAME 1 OF YOUR TIMELINE

stop();
NEXTBtn1.onRelease = function() {
       gotoAndPlay("TeamIntro");
}
//tells the game to go forward 

Mclip1._x = -10;
Mclip1._y = 50;
//setting up the movie clip's starting position 

onEnterFrame = function() {
   if (Mclip1._x < 500 
      Mclip1._x += 10;
   }
   if (Mclip1._x >= 500 {
      Mclip1._x = -10;
   }
}
//Flash checks the scene, if "Mclip1" is less than 500, Flash will move the "Mclip1" right by 10.
//If the movie clip's x is greater than or equal to 500, "Mclip1" returns to its starting x 


Update the Wiki

1. Save your new Flash file using the following naming scheme "YourUserName_demo4"

2. Publish your .fla file to create an .swf version of it.

3. Upload BOTH the .fla and .swf file to the wiki.

4. Embed both the files on your "My Projects" page or Team page.


Update the Blog

Suggested Post Ideas

  • Share a link, video or picture of an animation you like that relates to your game topic. What makes this animation stand out to you?

Comment on the blog of another Globaloria student in your Knowledge Community!

After you finish these assignments, continue to the Adding Input I: Keyboard topic.

Related Links and Tutorials


Search the Web for more information

Here are some search results on Flash Animation techniques:


Personal tools