Exercise 1: Flash Basics

Written by Amanda Kern

Part 1: Basic Properties & Drawing Modes

Now it's time to jump right into Flash and begin learning some of the main features that will be crucial in creating awesome Flash projects!

  1. Create a New Folder on your computer named LastName-EX1
  2. Let's start with opening a new document. Choose File > New or CMD + N.
  3. Save your file. File > Save As. Name your file lastname-part1.
  4. Let's change a few properties before we continue on. If the properties inspector is not currently open, you should open it (Windows > Properties > Properties or F3). The properties inspector will change depending upon what you have selected in Flash. At any time if you select the stage or the working space just outside of the stage you will have the ability to change document properties such as document size, frame rate, Flash Player version, and background color. properties inspector
    Figure 1.1. Properties Inspector

    Let's change a few properties as follows:
    Document Size: 600px wide x 300px high
    Background color: #ececec

Merge Drawing Model vs. Object Drawing Model

Since the release of Flash 8 there have been two drawing models available for use in Flash Project: Merge Drawing Model and Object Drawing Model. It's important that we clear up the differences because they will make a difference when it comes time to animate.

Merge Drawing Model

Merge Drawing Model is the original drawing mode in Flash, and unless changed it is the default. Basically Merge Drawing Model "merges" shapes that are drawn on top of one another. For instance If you were to draw a circle on top of a square the area where they intersect will merge so that only the shape on top is still there. This effect is often referred to as the cookie cutter effect. The only way to prevent this from occurring is to use layers or Object Drawing Model.

merge drawing model
Figure 1.2. Merge Drawing Model

Here are a few important things to note about Merge Drawing Model:

Object Drawing Model

object drawing modelObject Drawing Model enables you to draw shapes that are grouped so that they do not "merge" when drawing shapes on top of one another. To use Object Drawing Model you must have a drawing tool selected. You will then see the Object Drawing Model icon available in the tool panel which should be selected prior to drawing any objects. You should always pay close attention to this icon when drawing in Flash. It's easy to forget whether it is activated or deactivated. So how does it know not to merge the objects? Object Drawing Model basically groups the object drawn which prevents shapes or objects from merging with one another.

Here are a few important things to note about Object Drawing Model:

Now it's your turn: Merge Drawing Model

It's time to practice. Follow these steps to better understand the difference in the two drawing models, we're going to start with Merge Drawing Model.

  1. With the same file open, create two layers. Name one "object" and the other "merge".
  2. Lock the "object" layer, we're going to work on the "merge" layer to start. You'll know you have the "merge" layer active because it'll have a pencil next to it.
  3. Select the rectangle tool, then ensure that Object Drawing Model is deactivated.
  4. Draw a blue rectangle with no stroke.
  5. Select the circle tool and draw a red circle with no stroke that overlaps the blue rectangle.
  6. Select the circle (by clicking once) and separate the circle from the rectangle. Notice that the shapes merged where they overlapped.

    What if they did not merge? It's likely you had Object Drawing Model Activated, backtrack and ensure that the "Object Drawing Model" is deactivated. Also ensure the shapes were overlapping.

Now it's your turn: Object Drawing Model

  1. Let's unlock the "object" layer, and lock the "merge" layer.
  2. Select the rectangle tool, and now let's ensure the Object Drawing Model is activated.
  3. Draw a blue rectangle with no stroke
  4. Select the circle tool and draw a red circle with no stroke that overlaps the blue rectangle.
  5. Select the circle (by clicking once) and separate the circle from the rectangle. Notice the shapes remained intact as drawn. There is also a thin blue border around the object to signify that the objects are grouped.

    What if the shapes merged? You did not have Object Drawing Model activated if the shapes merged.

    What if I need to edit the shape I drew? Double click on the object drawn and it will enter the grouped objects timeline.

    What if I drew an object with Object Drawing Model and then I realized I meant to use Merge Drawing Model? Luckily you can "ungroup" the shapes by selecting the shape and then choosing Modify > Ungroup.

Testing your First Movie

It's important to understand that your FLA file is your source file where you create your animations and actionscript. You must create an SWF file so your users can view your movie. Here are a few different ways to create an SWF.

  1. Control > Test Movie or CMD + Return will create an SWF file in the same directory as your original FLA file. The publish settings will be what has been previously defined in "publish settings". It will open up the SWF file automatically once the SWF file has been created.
  2. File > Export Movie. Using this setting will allow you to choose a different directory to save the SWF file, which is helpful when working on more complex projects. It also prompts you with optimization settings.
  3. File > Publish will do the same as the Test Movie feature, but it does not automatically open the SWF file.
  4. File > Publish Settings will enable you to change publish settings and then "publish" the movie.

Test your movie. Create an SWF file of your movie, it should have the same name as your FLA file. Okay, so your first movie isn't that impressive, just shapes. It's time to continue on so we can learn to animate. Close your movie.

Part 2: Creating Symbols

It's imperative that we have a good foothold of how symbols can impact our movie. So you may be asking, why create a symbol when we can just draw objects or import bitmap or vector graphics? Well, remember, when we use Flash we should always think of file size: the smaller file size the more likely it is that more users will be able to view or interact with your movie. Well, symbols are perfect for helping keep your file size minimal because once a symbol is created it can be used as many times as you like and it won't add to your file size after it's been added more than once. That's right - add one instance of a symbol or one hundred instances of the same symbol and it does not increase your file size. Remember each symbol will have it's own timeline, which makes Flash a bit more complex to understand. In Flash we have three main symbols we can create: graphic, movie clip, and button. Let's introduce each so that we have a better understanding of symbols.

Graphic Symbol. As we begin to learn animation you'll find that certain types of animations require the object you are animating to be a symbol or grouped. A graphic symbol is the most basic form of a symbol. Here are a few points to remember about graphic symbols:

Movie Clip Symbol. This is the most diverse type of symbol, of the symbols available it certainly has the most capabilities. Here are a few points to remember about movie clips:

Button Symbol. The button symbols is very unique, it has a very different timeline that consists of just four frames: up, over, down, and hit states. Here are a few points we should be familiar with:

Word of Caution about symbols. If you double click on a symbol and edit it in any way it will change every instance of that symbol in your movie. If however, you change color options in the properties inspector, rotate, or resize the entire symbol it will not affect all other instances.

New Symbol vs. Convert to Symbol

So you're probably wondering, "How do I create a symbol?" Well, there are two main ways: New Symbol and Convert Symbol. When you start learning Flash this can be a pretty confusing time understanding the difference so let's see if we can clarify the differences.

Insert > New Symbol. When creating a symbol the Insert > New Symbol method will enable you to create any type of symbol from scratch. Let's point out a few things to consider prior to using this method. It might help to follow along, so let's create a new symbol with this method:

  1. Open a New File. Name it lastname-part2. Rename layer 1 "graphic".
  2. Choose Insert > New Symbol. Select "graphic", name it "square". Notice above the timeline the symbol name appears to let you know you are now inside of the symbol's timeline. This is commonly referred to as the "breadcrumb trail".
    breadcrumb trail
  3. Rename layer 1 "square" and draw a blue square in the center of the symbol.
  4. Now lets navigate back to main timeline of the movie. Select "scene 1" located in the breadcrumb trail.
  5. Oh, wait - where's our symbol? It's not on scene 1. Well, when we create a new symbol using this method we have to drag it from the library to the stage. Depending upon what size you originally drew the square it may be too large or small.
  6. Save your file, we'll come back to it in a moment.

Facts about using Insert > New Symbol

So, let's take a moment to clear up what happens when we create a symbol using Insert > New Symbol.

Converting to a Symbol

Converting to a Symbol seems to be a bit more user friendly for a designer. Basically you start with an object on the stage or timeline you are working on and then Convert the object to a symbol. Let's follow along to get a better understanding:

  1. With the same File open create a new layer and name it "movie clip". For now let's lock the "graphics" layer.
  2. Remember, when converting to a symbol we must start with something so let's draw a red circle with no stroke.
  3. Select the circle and choose Modify > Convert to Symbol. The symbol is created by you remain on scene 1. To edit the symbol we would double click the symbol.
  4. Save your file. Close your file, no SWF file needed for Part 2.

Facts about using Modify > Convert to Symbol

So, let's take a moment to clear up what happens when we create a symbol using Convert to Symbol.

Part 3. Animation in Flash

Now that we have a better understanding of symbols it's time to learn how to animate. There are three main types of animation in Flash: Frame by Frame, Shape Tween, and Motion tween. Let's take a closer look at each:

Frame by Frame Animation

Frame by Frame Animation is the most tedious type of animation. It is much like what traditional animators are accustomed to, basically animating objects frame by frame. Let's create a frame by frame animation.

  1. Create a New File. Save as lastname-part3.
  2. For this frame by frame animation we're going to create a type writer effect with your own name. Choose the type tool and type your own name.
  3. We're going to now save a bit of time using a few features in Flash. The first of which is "break apart". With your name selected choose Modify > Break apart. Breaking apart text twice makes it a raw shape. In this instance we only need to break apart the text once.
    break apart
  4. Another nice feature we have in Flash is "distribute to layers". Basically using distribute to layers will distribute each object to it's own layer. With all letters still selected choose
    Modify > Timeline > distribute to layers.
    distribute layers

  5. Now let's animate frame by frame so that each letter appears one at a time. We'll start with the first letter of your name and end with the last letter. To start select the keyframe for the second letter and move it to frame 2. Select the key frame for the third letter and move it to frame 3. Continue on with this process until you have moved each letter (See figure 3.1).
    frame by frame
    Figure 3.1. Frame by Frame animation
  6. The biggest challenge to frame by frame animation is trying to figure out what is on each frame. For that Flash has the Onion Skin Mode. The Onion Skin Mode enables you to see what is on multiple frames.
    onion skin
  7. fbf timelineNow it's time to add frames so we can see this animation in it's entirety. Select the final frame of each frame, with exception of the very last letter. Right click or Control click and choose "New Frame" to insert new frames to this portion of the timeline. You can preview your animation from inside Flash by hitting "return".
  8. Let's Save the movie and test movie. Notice that by default the movie loops. Let's go back and add our first bit of actionscript. Rename layer 1 "actions". Insert a new keyframe (Insert > Timeline > Keyframe) in the final frame of the layer.
  9. With that frame selected open the actions panel (Window > Actions). And let's add our first script:

    stop();

    actionsThis script will tell our movie to stop once it reaches the final frame of the movie. You will know you have added actionscript to a frame because it will have a lowercase "a" displaying in the keyframe.
  10. Save again and test movie. Once your done close your file.

Shape Tweening

Shape Tweening consists of animating two raw shapes in Flash. Shape tween's usually create a "morph" effect of one shape animating to a different shape. The shape could be organic or linear. Here are few key points to remember when shape tweening:

Shape Tween - Example 1 - "morphing a shape"

  1. Create a New file. Save as lastname-part3a.
  2. Rename layer 1 "shape". On frame 1 draw a red circle with no stroke on the left side of the stage.
  3. Add a blank keyframe (Insert > timeline > new blank keyframe) on frame 15. Select the blank keyframe and then draw a blue square with no stroke on the right side of the stage.
  4. tween optionsOn the timeline select anywhere in between the two keyframes and then choose "shape tween" from the tween options in the properties inspector.
  5. To preview your movie from within Flash press return. Notice the circle morphs into the square.
  6. Test your movie. Close your file.

Shape Tween - Example 2 - "Animating a line"

  1. Create a New file. Save as lastname-part3b.
  2. Rename layer 1 "shape2". On frame 1 draw a line slightly off the stage that is about 10px wide. The line should be gray, 1px, and solid.
  3. Create a new keyframe (Insert > timeline > keyframe) on frame 15. Remember, a keyframe basically copies what was on the previous keyframe, so notice our line is still there. Ensure you are on frame 15 and transform the line so that it spans across the entire stage.
  4. On the timeline select anywhere in between the two keyframes and then choose "shape tween" from the tween options in the properties inspector.
  5. To preview your movie from within Flash press return. Notice the circle morphs into the square.
  6. Test your movie. Close your file.

Motion Tweening

Motion tweening offers you the most features when animating. It may be used for a variety of animation techniques to include animating objects on a linear path, transforming objects, or fading graphics in. Let's point out a few of factors for motion tweening:

Motion Tween - Example 1 - "Fading in"

  1. Create a New file. Save as lastname-part3c.
  2. Name layer 1 "motion".
  3. You have been provided "example-image.png". Import this file into your file. Drag the file from your library to the stage, relocate it to the bottom part of the stage.
  4. With the image selected choose Modify > Convert to Symbol. Choose to convert the bitmap to a symbol. You must leave this bitmap image in your library, deleting it from your file will eliminate the image anywhere it has been used.
  5. Add a new keyframe on frame 10.
  6. Select frame 1, now select the symbol. In the properties inspector you will see color options. Choose Alpha and reduce alpha to 0. With symbols you have a variety of color options, here is a brief overview of the three that will help you in animating:

    Brightness. This changes how light or dark a symbol gets.
    Tint. This changes the color tint of the symbol.
    Alpha. This changes the opacity or transparency of a symbol.
  7. Now select anywhere in between the two keyframes and choose "motion tween" from the tween options in the properties inspector. Alternatively you can access motion tween when right-clicking or control clicking.
  8. Add a stop action on the last frame of the movie.
  9. Preview your animation in Flash. Test your movie. If everything looks Save your file as lastname-part3d. We'll use this file in the next step.

Motion tween - Example 2 - "Easing"

Easing is a way of creating acceleration or deceleration in flash. It works much like gravity. Easing options and custom easing is available in the properties inspector once a tween has been set.

  1. Using the file we ended with in the last section let's select the symbol that is on frame one and drag it off bottom of the stage.
  2. easingChoose a frame anywhere between the two keyframes and change the easing from 0 to -100. This will cause the animation to start slow and end fast.
  3. Preview your animation and test your movie. Close your file.

Part 4 - Motion Guides

To animate objects on a non-linear path you would create a motion guide. Imagine you have a butterfly that you want to have a fluid flying effect, a motion guide would be useful for such an effect. Let's create a motion guide.

  1. Create a New File. Save as lastname-part4.
  2. Rename layer 1 "circle". On Frame 1 create a circle and convert it to a graphic symbol.
  3. There are two ways to create a motion guide. Right click on the circle layer and choose "motion guide" OR choose the motion guide icon below the layers.
    motion guide
  4. Once you have added a motion guide you must create the "guide" on the "motion guide" layer. Use the pencil tool to draw a non-linear path. You should not use object drawing model to draw the path. The motion guide will not work if the path is not a raw shape path.
  5. Now let's increase the timeline of the motion guide layer to 15 frames by inserting a frame.
  6. Insert a keyframe on the "circle" layer on frame 15.
  7. Move the instance of the symbol on frame 1 to one side of the path. Ensure the registration mark (the circle) overlaps the path.
  8. Move the instance of the symbol on frame 15 to the opposite side of the path. Again, ensure the object snaps to the path.
  9. Motion tween the circle. Once the motion tween is set the circle should follow the path. If it does not it's likely that the object is not "snapped" to the path or you might have used object drawing model to draw the path (see step 4 regarding drawing the path).
  10. Add a stop action to the last keyframe on a new layer named actions.
  11. Preview and test your movie. Close this file.

Part 5: Animated Masks

Masks are a way of revealing only a portion of a movie. They are a powerful technique when animated. It's time to create your first animated mask.

  1. Create a New file. Name the file lastname-part5.
  2. Rename the first layer as "name". Again, type your full name. Extend this layer's frames to that there are 15 frames.
  3. Create a new layer above the "name" layer. Draw a thin rectangle that is 2 pixels high on the left center side of your name, it should not overlap your name. Don't worry about the width of the rectangle for this starting position. Make sure the rectangle does NOT have a stroke
  4. Create a new keyframe on frame 5. Move this rectangle across so that it intersects the middle of your name. For this step you must transform the rectangle if necessary so that it covers the width of your name. It should still be 2 pixels high. Create a shape tween.
  5. Create a new keyframe on frame 15. Transform the rectangle on frame 15, changing the height so that it overlaps your entire name. Create a shape tween.
  6. Right click or control click on the "mask" layer and choose the "mask" option. You should notice a few things when you've created a mask:

    A mask is created. The mask will reveal only what it is covering on the layer(s) below.
    Layers are locked. Both the mask and the masked layers are locked. You can unlock the layers, however, your mask won't be visible again in Flash until the layers are locked again.
    Masked layers nested. Any layer that is being masked is nested under the mask layer.
  7. Add a stop action on the last keyframe of a new layer you should name "actions".
  8. Preview your mask. Test your movie. Close your file.

Warnings about masks. Try to ensure you do not use strokes when creating the "mask", it has proven to cause problems and could cause your mask to not work properly or not view at all.

Part 6: Putting it all together & Controlling your Movie

Now it's time to put it all together. To prepare you for future projects we will need to learn to add a bit of interactivity so basically we'll include a stop action at the beginning so our movie doesn't start playing, a play button, an animation, and a play again button.

  1. You need to first stop your movie so it doesn't play initially. Select frame 1 of your actions layer and add a stop(); action.
  2. Add a frame label named "animation" to frame 2 of the labels layer. We'll use the frame label when we script our Play button & our play again button at the end of the movie. To add a frame label we must select a keyframe and then add the frame label in the properties inspector. You will notice a red flag with the frame label name in the timeline.


    frame label
    Frame labels can be used to identify a frame but they can also become target in actionscript. Here are a few key point to remember when creating frame labels:

    • Keep naming consistent. If you use upper and lowercase make sure you refer to it the same when you write your actionscript.
    • Don't use spaces.
    • No special characters such as ?, /, or *
    • Don't name the same as keywords used by actionscript such as null, void, delete, or else.
    • You can comment in the timeline by adding two forward slashes (//) followed by your comments.
  3. On frame 1 of a new layer named "button" Create a Play button that will play your animation. Make sure you create all four states of the button, don't forget the hit state!
  4. Select your button and open your actions panel.
    actionscript
    With your button selected you will add the following script, remember the script is case sensitive:

    on(release) {
    this.gotoAndPlay("animation");
    }

  5. From frame 2 on create an animation using the techniques you have learned in this exercise. You do not have to use every single technique you have learned, however, it should demonstrate an understanding of the animation you are creating. The animation should at a minimum between 5-10 seconds.
  6. Where the animation ends, create a new keyframe on the actions layer. Add a stop action.
  7. On the button layer the Play button should only appear on Frame 1. Add a blank keyframe on frame 2 so that it is no longer visible after Frame 1. On the final frame add a keyframe. Create a Play again button. Apply the same actionscript you used in step four which will enable the user to Play the movie again.
  8. When you are complete test your movie.

WARNING: If your button doesn't work after following these directions, double check your actionscript to ensure you don't have typos and then be sure you applied your actionscript to the button and not to the frame.

Grading Criteria

Name:   Date:
Part 1: Basic Properties & Drawing Modes (5 pts)    

Change Document Settings
Create objects/shapes as instructed
Use Object Drawing Model & Merge Drawing Model as instructed

     
 
Part 2: Symbols (5 pts)    
Create Symbols as instructed      
 
Part 3: Animation (30 pts)    
Complete part 3, 3a, 3b, 3c, and 3d as instructed      
 
Part 4: Motion Guide (10 pts)    
Complete Motion guide as instructed      
 
Part 5: Animated Mask (10 pts)    
Complete Animated Mask as instructed      
 
Part 6: Putting it all together & Controlling your movie (30 pts)    
Complete part 6 as instructed
Create and script Play and Play again buttons
Create a 5-10 second animation using techniques learned
     
 
Additional Technical Considerations (10 pts)    

Name all files as directed
Export SWF files where instructed
Place all files in a folder named as directed.
Zip file and submit via webCT to "exercise 1 submissions".

     
 
Total: (100 pts)    
Notes: