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.
   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.

Figure 1.2. Merge Drawing Model

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

• It merges shapes that are drawn on top of one another if they are drawn on the same layer.
• Using layers can prevent "merging".
• Allows you to Draw raw ungrouped shapes, which are needed for shape tweening.
• It can assist in drawing interesting shapes.
• If you have used Object Drawing Model previously you will have to ensure it is turned off.
• Fills and strokes are separate objects.

Object Drawing Model

Object 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:

• You must select the Object Drawing Model icon prior to drawing your object.
• It prevents objects from "merging"
• Objects are grouped. To edit objects after they are drawn you must double click. Fills and strokes are still separate objects, however, because the object is grouped you must double click to edit.
• Grouped objects drawn may be motion tweened, not shape tweened.

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:

• It supports animation, however, animation is dependant of the main timeline. What does this mean? Well, if you were to animate for fifty frames inside a graphic symbol you would have to allocate fifty frames on the main timeline. If you do not it will cut off your animation at the number of frames on the main timeline. The nice thing is that you could see your animation playing on the main timeline, despite the fact that you have animated inside of the graphic symbol. Generally you should keep graphic symbols to single framed graphics so that you may animate them in another timeline.
• It does not support video or sound.
• It does not support targeting within a graphics symbol's timeline with actionscript.

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:

• It supports animation. Animations are independent of the main timeline. What does this mean? Well, if you were to animate fifty frames in a movie clip symbol you are able to place that symbol on just one frame of the main timeline and as long as the timeline is set up properly it will play correctly. The downside of movie clips is that you cannot view the animation from the main timeline, you must double click on the symbol to view any animations.
• It supports video and sound.
• It supports targeting within the symbol's timeline with actionscript.

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:

• There are four states to a button symbol:
  Up. This is the normal state of the button.
  Over. This is the "hover" state of the button which appears when the button is rolled over.
  Down. This is the state of the button that appears as the user is clicking the button.
  Hit. This state is the "hittable area" of the button. It never displays on screen - it is just where the user can "hit" the button.
• You can't animate inside of a button symbol or add actionscript. However, you can create a movie clip and add it to one of the four states of a button.
• You can add sound, sound added should be short for buttons.

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".
   
   
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.

• You start from scratch and then create graphics inside the symbol once it's created.
• It creates a new symbol that is stored in the library.
• When you create a new symbol it does not display the boundaries of the stage, therefore it's easy to misjudge how much space you have to work with which.
• The symbol created is not instantly placed on the stage, it must be dragged from the library to the stage.

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.

• You start with an object that is on the stage. It may be on the main timeline or another symbol's timeline.
• It creates a new symbol that is stored in the library.
• You remain on the main timeline once the symbol is created. You must double click the symbol to edit.
• When you enter symbol editing mode you can still see the stage boundaries which makes it easier to judge sizing objects and animation.

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.
   
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.
   
   
   
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).
   
   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.
   
   
7. Now 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();
   
   This 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:

• You must use raw shapes which are ungrouped to shape tween. Make sure you aren't using object drawing model if you intend to shape tween. If you try to shape tween a bitmap, symbol or grouped object you will see a dotted line in your timeline to let you know you've animated incorrectly.
• You will have two keyframes with two different shapes.
• The shape tween appears green with an arrow in your timeline.
• You can only shape tween one object at a time on a layer.
• Using complex shapes could cause unexpected results, shape hints can help with shape tweening more advanced shapes.

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. 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.

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:

• You must use symbols or grouped objects. Flash will often compensate for a developer's inability to convert to a symbol prior by creating a symbol it will name "tween 1", "tween 2", etc. You should always get in the habit of creating symbols before you motion tween because you likely will get lost trying to figure out what each tween is. Do you really think you're going to remember what "tween 47" is? Neglecting to create symbols first could come back to haunt you later so keep this in mind.
• You will have two keyframes with two of the same symbol or grouped object. You cannot motion tween to different symbols. You can, however, create this illusion by using layers an overlapping your motion tweens.
• The shape tween appears blue with an arrow in your timeline.
• You can only motion tween one object at a time on a layer.

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. Choose 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.
   
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 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.
   
   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: