Note: This lesson is adapted from lessons shared by Mr. Lister. He’s a good man.

Symbols & Instances

I think we can all agree that it is annoying to have a layer for each individual piece of each object on the main timeline. In addition to this, what happens if you want to use this same object again? To make things easier on us, Flash has introduced symbols.

If you draw or import a graphic or image into Flash, you create an object. Usually, objects are made up of a number of individual elements. For instance, if you draw a rectangle, an oval and a line on the same frame, they become an object together.

Once you are finished editing an object, you should convert it to a symbol. This will automatically save the object to your library. Symbols are useful because they can be easily animated and copied from project to project. There are three types of symbols you can create:

Movie Clip	A symbol can be a complete animation
Button	You have the possibility of assigning actions to a symbol. This way, the viewer can later interact with the movie or the Web site.
Graphic	The type of symbol most often used: zooming, rotating, and fading a graphic in and out is easy.

The process has its advantages. Symbols allow you to create content that can be used over and over again. They help to make your animations smaller because each symbol is loaded only once and then re-used. So if you use the same character or object 80 times (each time is what we call an instance) in your movie it will still only take up the file size of the image being used once.

For example, if you created a symbol of a snowflake and added 50 instances of the snowflake to your timeline to create a snowfall effect, your file size would be much smaller than if you drew 50 separate snowflakes on your main timeline.

Start by creating a new Flash file and in the property inspector, leave the size as 550 x 400 and the canvas colour white. Save this file as leaf.fla in your DropBox or Drive folder.

To Create a Symbol

1. Choose Insert > New Symbol

This will bring up the New Symbol Dialog seen below.

2. Choose “Graphic Symbol”

We will learn about the other types of symbols in the future.

3. Name the symbol leaf (see naming conventions below)

***Note*** It is important that you follow the following rules when naming your symbols

a) No Spaces – If you have multiple words separate them using and underscore (i.e. red_ball)

b) No Special Characters – Special characters have specific meaning in Action Script (Flash’s programming language), which can cause confusion for the program.

c) No Forward Slashes – Will be confused as a pathname

d) All Lowercase – Action script treats lowercase letters differently than uppercase. It may cause confusion it you use uppercase in one area and lowercase in another. To avoid confusion always use lowercase.

e) No Dots – Dots are reserved for Action Script Commands

f) Use Descriptive Name – By default flash will name it “Symbol#”. This is not helpful when you need to locate the symbol at a later date. Make sure you name your symbol something descriptive and useful.

4. Choose Ok

By looking at the Edit Bar, you will see that you are now no longer on the main timeline. Instead, you are now working inside of the symbol that you created so that you can design your symbol.

5. Using the drawing tools we’ve been practicing, draw a leaf on the center of the stage.

You can find the center by locating the cross hair 

Notice that everything you created was drawn on the same layer. If you wanted to separate each object onto a separate layer for ease of drawing, this could be done on the symbol timeline.

****Note**** The circle on your object is called the “Registration Point”. Flash uses the registration point to know where the center of your shape is. This is very important because when you are animating using rotation, the rotation will occur around this point. For now, make sure the registration point is in the middle of the leaf.

6. When you have finished drawing, you can choose “Scene 1” from the edit bar to return to your main timeline.

Congratulations, you’ve just created your first symbol! But where did your leaf go? The leaf is not automatically placed on your stage. Instead, it is stored in your Library.To access your symbol, you must use the library. We will discuss using the library in the next lesson.

Save this flash animation as leaf.fla and move on to the next lesson.

 

Please create a file like my sample (with one addition)

One tween where the text appears a letter at a time

One tween where the text appears to be shaking (hint: onion skin)

One tween where the text moves from one spot to another

One tween where the text morphs into different text (as in the last example of today’s tutorial)

Hint: I needed to make my stage bigger.

Hint: I needed to slow mine down quite a bit

Drop this off to me with your last name and TextTweens (eg: robsonj_TextTweens.fla)

 

 

As we start to do more animation, you’ll have to create more of your own elements and scenes. We will look at some more of the drawing tools which will make our artwork look a little better. Using some of these tools will help you to create more interesting images and will save you a LOT of freehand drawing.

Watch the tutorial video “drawingtools.mov” this will go over the tools listed below, and more. 

To show off your abilities, please create a new flash file. You will need to fit a few things on your stage, so make your stage at least twice as big as the default size (that’s your bonus math question of the day.)

Using different colours and sizes, draw the following:

Dotted/Dashed line
perfect circle
straightened line
modified brush ( change the brush width, angle, pressure, etc.
rounded rectangle
Simple shapes (ones where the stroke and fill break apart)
Object drawing
Modified shape (eg: take a rectangle and stretch out parts)
gradient fills

Save this masterpiece into your Drive or DropBox folder with your last name and drawing tools, for me to look at.

Your first priority today is to finish and drop off your first animation. Please give me the .fla file AND a published .swf file. You can view the previously finished and shared animations by clicking here. Hopefully more will be added to this post today…

Once that’s done you should view the new drawing tools videos in the Robson213Files folder. Practice with these and consider starting to draw some characters and scenes for your upcoming animations.

Create a scene that incorporates these new tools and ideas, and show that to me.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/Isaac.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Jordan:

Malcolm:

Tyler:

Mariel:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/oberezm_A1.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Devon:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/Devon.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

What is a Timeline?

The timeline is the key to creating animation. Remember when we talked about cel animation, we said that numerous cels would be created and photographed in sequence. Then the playback of these sequenced images would allow for the eye to perceive motion. The same could be said about stop motion animation, wherein we have an object, take a picture, move the object, and take another picture.

The timeline represents the passing of time in the animation or the steps taken from beginning to end.

Note that there are different ways of viewing the timeline, as represented above by “Frame View.” Clicking that box reveals some options which may make your timeline easier for you to read/work with.

You can decide which you prefer. To better illustrate here, I’ll use Large, but I also like Preview  in Context, because it shows me a visual reminder of the object and position I’m working with.

Flash makes the animation process easier by allowing you to create the cels on the stage area. Instead of having to photograph each cel, Flash allows you to simply playback the cells in the sequence you created them by using they playhead. Instead of calling each drawing a cel, however, we will now refer to them as frames.

Frames

Each box on the timeline is what we call a “frameholder”. They remain empty until they are filled with a frame.

Clicking on the first frame, the stage will reveal what is on that frame.

In this example, I have 3 blank layers and one with an image on it. The layers with nothing on it contain an empty circle, to indicate that there is a frame there, but nothing has filled it yet.

The bottom layer, “background” has a black circle, because I’ve placed that on to the stage, so something happened. Whenever something happens/changes, the frame will have a black circle.

Those black circles are called KEY FRAMES, and they signify that something has moved/changed/happened. As I add elements to my animation, each will have a start and end point, (and probably some motions along the way), and these will all be represented by that black circle.

Key Frames

Keyframes are what we use to signify a change in motion. If you want an object to change from one frame to the next, you must insert a Key frame.

To Insert a Keyframe

If you drop an item onto the stage, a keyframe will be created for you, since something happened. If you want to add another position/motion/change, you can right click on a frame and “Insert KeyFrame” or press F6.

HANDY SHORTCUT: F6 adds a key frame!

You will notice that each time you create a keyframe, it reproduces the previous frame as a starting point. You can then make the change on the new keyframe.

Alternately, if you wanted to start a new action without the previous object, you can insert a BLANK KEYFRAME, which starts you from nothing (so the previous object/motion disappears)

Removing Frames & Keyframes

Sometimes you create a frame or keyframe that you do not want. In this case you can not simply click the frame and press the delete key or you will delete only the object on the frame.

To Remove Frames and Keyframes, right click and Clear.

Keyframes can also be moved very easily by dragging and dropping them into a new position on the timeline.

Putting Animations Together

Often animations involve more than one simple motion. Often an object will move, pause, change direction, move, pause, etc. To do this requires a combination of Keyframes and regular frames.

To Combine key frames with regular frames

You can combine different movements by adding new keyframes. If you want an object to stay in one spot for 10 frames, add a keyframe and leave the object in the same spot.

Flash File Format

When you create a Flash file and save it, .fla is the file extension that will be used. This means that when you open the file it will have your timeline and objects just the way you left them. You can still work on the file and make changes.

When you are finished working and you want to share your animation with others, you must export your work into an animation file. This means that a file will be created that allows users to watch your animation but not change or control any of your work. Flash exports an .swf file for this purpose.

To Save Your Flash Work

Choose File > Save and save your animation

Once the working file is saved, you choose Control > Test Movie

to make sure that the animation works the way you want it to. If you’re happy with your animation, you can choose Publish. This will export the file into .swf format.

**Note** When you test a movie, a .swf file will automatically be exported to the same folder as the .fla file.

You can (and should) look at your publish preferences to see/make sure that your animation is published in the format you want.

You can also preview your animation in different ways, by choosing Publish Preview

As you work on creating your own animation, here are a few things you need to remember.

HAVE A GOOD IDEA. Come up with some kind of story that you’re going to tell or something you’re going to explain or some purpose you’re going to achieve. Nothing ruins an animation more than having it just be random, pointless motion. Our previous exercise was random and pointless, just to practice the tools. Now, you’re applying those tools and creating something worthwhile! It doesn’t have to be super long or complicated, just something that makes sense and is interesting.

The larger your stage, the bigger the file.
The more frames you have per second, the bigger the file.
If you use bitmap/raster images, instead of vector images, your file will be bigger.
So?….
A bigger file will load slower on the internet, and nobody likes a slow, laggy file.
So….
Keep your files small if you can, but don’t sacrifice quality in the name of speed. (make it good and not really tiny.)

When you work on your Flash file, the file format will be .fla – these are the editable files
When you PUBLISH your Flash file, the file format will be .swf – these are the ones that can be read by a browser on the internet.

Your animation can work in different directions, with pauses, changes to something new, etc. All we did in our last exercise was to move the ball from one side to the other, but we could have had it pause, change direction, or we could have added a new symbol to replace the ball at some point.

Now that you have used some of the basic tools in Flash, it’s your turn to create your own animation. Here’s what you’ll need to do/include:

Make it action script 3. The size is up to you. Make sure it’s saved in the right location with the right name.

Use some of the basic drawing shapes & tools to draw objects that you can animate. Try to make this one make sense (ie, there’s some sort of story or logic to it.)

You may also import objects to use. I’ve given you a file called LibraryAssets.fla, which you can use to copy items from that library, into your project’s library.

Add motion tweens. Include at least 3 different kinds of motions (eg: alpha, ease, rotate, modified path, etc.)

In order to do all of that, you’ll need to extend your timeline. Make it a MINIMUM of 10 seconds, but the more you’ve got going on, the longer it will need to be.

Use the same action scripts that we used in exercise 2, so that your animation doesn’t loop, but does have a replay button (remember to call it replay_btn)

Publish your flash to a .swf, so you can show this off to people who don’t necessarily have access to Flash professional. Put the file in your DropBox or Drive folder. When it’s DONE, drop it into the folder that you’ve shared with me. Once it’s in there, SHARE a link to your .swf file, and paste that into a comment below this post.

This time you’re getting marked on a few things:

You need to know and demonstrate how to use Flash properly (/20)
You need to design something that’s appealing and makes sense (/10)
You need to try to solve problems and think for yourself, or look for answers somewhere other than from Mr. Robson. (/5)

Take your time and do a good job!

 

You can download these instructions if you wish: (right click and “Save Link As”) Flash Exercise 2

CODE SNIPPETS (explained later):

At the end of your animation: (below)

stop();

At the beginning of your animation:  (below)

import flash.events.MouseEvent; function onClick(event:MouseEvent):void {  gotoAndPlay(1); } replay_btn.addEventListener(MouseEvent.CLICK, onClick);

<Instance Name>: replay_btn

Exercise 2 Instructions:

Create a new file, Action Script 3, 650 x 500
Save it in your Drive or DropBox folder with your lastnamefirstinitial_ex2

Change stage colour
Choose the Oval tool. Choose a stroke and fill colour that is different from the default. Make the stroke bigger. Draw a PERFECT CIRCLE (hold shift).

Choose the text tool. Use an interesting, lively font and an appropriate size and colour.
Write your initials inside of the circle.

Group the text and the shape together.

Use the Align panel to position your shape in the bottom left corner.

Change the drawing into a symbol

Right click on the object and choose Create Motion Tween

Place the playhead on frame 24
Move the symbol so that it is aligned in the bottom right corner

Place the playhead on frame 12

Move the symbol so that it is aligned in the middle of the stage and against the top

Go to the Control menu and choose Test Movie

To stop the animation from looping:

Create a new layer. Call this Action.

Choose frame 24 on the action layer.
Open the Action panel

Insert a Key Frame

Enter the text: stop();

Go to the control menu and test movie

To replay the animation:

Create a new layer. Call it Button.

Open the Components panel.

Under User Interface, drag a button onto the screen.

Make sure the button is selected on the stage. Open the Properties panel. Change the name of this to replay_btn

Still in Properties, look for Component Parameters. Change the label to “Replay” (or other text.)

On the Actions layer, put the playhead in frame 1.

Go to Actions panel. Paste in this code snippet:

import flash.events.MouseEvent; function onClick(event:MouseEvent):void {  gotoAndPlay(1); } replay_btn.addEventListener(MouseEvent.CLICK, onClick);

Go to control and test movie.

Go to File menu and look at Publish settings.
Make sure that Flash and HTML are turned on, the rest off

Publish animation.

To view, open the HTML file in your browser

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Ex. 2 (http://www.adobe.com/devnet/flash/articles/flash_cs5_createfla.edu.html)

Create a new file, Action Script 2, 650 x 500
Change stage colour
Choose the Elipse tool. Choose a stroke and fill colour that is different from the default. Make the stroke bigger.
Choose the text tool. Use an interesting, lively font and an appropriate size and colour.
Write your initials inside of the circle.
Use the Align panel to position your shape in the bottom left corner.
Change the drawing into a symbol

Right click on the object and choose Create Motion Tween

Place the playhead on frame 24
Move the symbol so that it is aligned in the bottom right corner
Place the playhead on frame 12
Move the symbol so that it is aligned in the middle of the stage and against the top
Go to the Control menu and choose Test Movie

To stop the animation from looping:
Create a new layer. Call this Action.
Choose frame 24 on the action layer.
Open the Action panel
Enter the text: stop();
Go to the control menu and test movie

To replay the animation:
Create a new layer. Call it Button.
Open the Components panel. Under User Interface, drag a button onto the screen.
Make sure the button is selected on the stage. Open the Properties panel. Change the name of this to replay_btn
Still in Properties, look for Component Parameters. Change the label to “Replay” (or other text.
On the Actions layer, put the playhead in frame 1.
Go to Actions panel. Paste in this code snippet:

import flash.events.MouseEvent; function onClick(event:MouseEvent):void {  gotoAndPlay(1); } replay_btn.addEventListener(MouseEvent.CLICK, onClick);

Go to control and test movie.

Go to File menu and look at Publish settings.
Make sure that Flash and HTML are turned on, the rest off

Publish animation.

To view, open the HTML file in your browser