Flash animation quick guide

theory topics

 

Step by step instructions on how to make Flash Animations.

 

cuf30107 Certificate III in Media

 

In this guide you will learn the steps to using Flash for drawing and making animations for the November examination in VCE VET IDM. Follow the steps to learn all the content for VET IDM practical work on Create 2d Animations unit.

 

Index

  1. Flash Workspace
  2. Introduction/ revision of vector and bitmap images
  3. Image making
  4. Principles of Animation
  5. Animation techniques
  6. Sound in Flash
  7. Advanced Flash controls

Back to top

 

1. flash workspace

 

Assess technical requirements

 

Before we make a Flash animation or any media product we must ensure that we have a clear understanding of technical requirements of the destination platform.

 

Variables of technical requirements

Each of these settings can be adjusted in the Properties panel of Flash after a new file has been created but are difficult or impossible to change after an animation has progressed much.

 

Back to top

 

opening a new flash file

 

Once you have determined the technical requirements of your audience and destination platform you are ready to begin. Follow this simple process;

  1. Open Flash. (Best practice is to keep it in the Dock).
  2. Go past the 'Welcome Screen' disable it for future use.
  3. If opening Flash;
    1. Select Create New; Action Script 3.0,
    2. Then adjust technical requirements in Properties panel.
  4. If Press Flash is already open;
    1. Press File/ New Action Script 3.0 and adjust technical requirements, Press OK

set up your work space

 

There are a few things that need to be set up to work efficiently in Flash. Make sure you enable the following:

  1. Window/ Workspace/ Designer (for drawing and animating)
  2. Window/
    1. Tools,
    2. Properties,
    3. Library,
    4. Timeline,
    5. Transform
  3. View/
    1. Rulers
    2. Guides

If you loose things just reselect them from Window or View.

 

Back to top

 

2. vector and bitmap image modes

 

bitmap and vector image types

 

A Bitmap image (JPEG, TIFF, etc) is a map of bits describing pixels. It is resolution dependent.
A Vector image is a display of a mathematical formular. It is not resolution dependent.

 

Flash is a Vector drawing and animation program. Vector images are considered 'light weight' as they have a small file size. In addition, they are not resolution dependent so they can be scaled to any size without loss in clarity.

 

Click here for a full explanation of image types.

 

Back to top

 

 

3 Image making

 

Drawing with shape, pen, brush tools

 

Flash is a powerful program for drawing. However, there a few steps you need to master to avoid frustration. There are two different drawing modes in Flash. It is essential to know and understand the difference between them.

 

Do not move onto animation until you know how to draw in each of these methods in Flash.

shape tools

 

Rectangle and oval shape tools

 

Merge and object modes

 

Merge mode

 

(Ref; http://helpx.adobe.com/flash/using/drawing-flash.html 17 December 2014).

 

Merge drawing mode is the default drawing mode for Flash. In this mode a shape that overlaps another will cut out the shape beneath. Shapes drawn in the Merge mode have a separate 'Fill' and 'Stroke'.

 

To draw a shape in Merge mode;

  1. Begin a new file,
  2. Select a shape tool; (rectange or oval),
  3. Once a shape tool is selected the Merge/ Object drawing mode button will appear. It is in the 'Options' category of your Tool bar and looks like a small circle in a square at the bottom of your Tool bar. It is light grey if Merge mode is on,
  4. Click on Stroke to select a Stroke colour,
  5. Click on Fill to select a Fill colour,
  6. Pull a rectange,
  7. Choose the 'Selection tool', Select the shape: One click; move it, only the Fill moves. Double click; the Fill and Stroke move together!
  8. Select another shape tool; (rectange or oval),
  9. Click on Stroke to select a Stroke colour,
  10. Click on Fill to select a different Fill colour,
  11. Pull another shape - but remember to overlap your first shape,
  12. Choose the 'Selection tool',
  13. Select the second shape you drew and move it, notice how it has cut your first shape.
Selecting in Merge mode, amazing!
  1. Choose the 'Selection tool',
  2. Click inside the object once; moves only the Fill,
  3. Double click inside the object; moves Stroke and Fill,
  4. Drag the selection tool across part of the shape, selects an area and cuts it from the shape when moved,
  5. Hold your mouse on the the corner of the Stroke; pull just that corner,
  6. Hold your mouse on a straight part of the Stroke; pull it and bend the line,
  7. Click on one bit of the stroke; move only that part of the line. Everything is disconnected!
Amazing merging shapes!
  1. Draw two separate rectanges on the stage next to each other but not touching. They must have no Stroke and a Fill of the same colour.
  2. Move one onto the other, so they overlap,
  3. Select them both. They merge and become one. Pull a corner, bend an edge!
  4. Now select a bit of it and delete it.
Object mode

 

Shapes drawin in the Object mode are known as 'drawing objects'. They are separate drawn objects. Drawing objects do not have a separate Stroke and Fill (they are together in the shape) and when selected they are identified with a rectangular 'Bounding box' (similar to Vector shapes in Illustrator).

 

To draw a shape in Object mode;

  1. Begin a new file,
  2. Select a shape tool; (rectange or oval),
  3. Once a shape tool is selected the Merge/ Object drawing mode button will appear. It is in the 'Options' category of your Tool bar and looks like a small circle in a square at the bottom of your Tool bar. You have to enable Object drawing mode by pressing it. It is dark grey when Object mode is on,
  4. Click on Stroke to select a Stroke colour,
  5. Click on Fill to select a Fill colour,
  6. Pull a rectange,
  7. Choose the 'Selection tool', Select the shape: One click; move it, the Fill and Stroke move together!
  8. Select another shape tool; (rectange or oval),
  9. Click on Stroke to select a Stroke colour,
  10. Click on Fill to select a different Fill colour,
  11. Pull another shape - but remember to overlap your first shape,
  12. Choose the 'Selection tool',
  13. Select the second shape you drew and move it, notice how it did not cut the first shape.
Convert Merged mode drawn shape into Object mode
  1. Choose the 'Selection tool',
  2. Select the shape (remember to select it twice to select Stroke and Fill),
  3.  Press Modify > Combine Objects > Union. 
  4. To combine two or more shapes, select them all before Modify > Combine Objects > Union. 

Back to top

 

primative shape tools

 

Primatives are shape tools that let you adjust the characteristics of the shape at any time. There are two primatives; rectangle primitive and oval primative. They are located in the shapes tools area of the Tool bar.

 

rectangle primative
  1. Begin a new file,
  2. Choose the Rectangle primative,
  3. (Merge or Object modes do not appear when primatives are used),
  4. Pull a rectangle.
  5. Choose the selection tool, select the rectangle (single click), position the tool at the corner,
  6. Push the corner in, the radius on rounded corners changes.
  7. For a different kind of control over the rounded corners, refer to;
  8. Rectangle Options in the Properties panel. Drag the slider to see the rectangle corners come to life!
  9. But how can we make the rectangle bigger?
  10. Now choose the 'Free Transform Tool',
  11. Use this tool to stretch or contract the rectangle.
oval primative
  1. Choose the Oval primative,
  2. (Merge or Object modes do not appear when primatives are used),
  3. Pull an oval.
  4. Choose the selection tool, select the oval (single click), note the dot on the right,
  5. Move the dot up, note it becomes a 'C' shape.
  6. Now click and pull the centre point to the right,
  7. It opens the 'C' shape up, thinner.
To make a donut shape
  1. Choose the Oval primative again,
  2. (Merge or Object modes do not appear when primatives are used),
  3. Pull an oval. (You will have to 'reset' oval. It remembers the 'C' shape you made!),
  4. Pull the oval again,
  5. Choose the selection tool, select the oval (single click),
  6. Now click and pull the centre point to the right,
  7. It becomes a donut.

Back to top

 

other drawing methods

 

pen tool

 

The Pen tool is a fast and accurate way to generate curved or straight outline vector shapes. It can be used in the same manner as in Illustrator.

 

Merge mode
  1. Choose Pen tool,
  2. Click, move, click for straight lines,
  3. Click, move, hold, drag for curved lines,
  4. In Merge mode all elements of the shape remain independent.
  5. Choose Select tool. Place your mouse on a corner, pull a corner. Place it midway along a line, bend the line.
Object mode
  1. Choose Pen tool,
  2. Click, move, click for straight lines,
  3. Click, move, hold, drag for curved lines,
  4. In Object mode all elements of the shape are connected, as one.
  5. Choose Select tool. Place your mouse on a corner, pull a corner. Place it midway along a line, bend the line.

Back to top

 

pencil tool

 

(Ref; http://www.quepublishing.com/articles/article.aspx?p=729513&seqNum=4. 18 December 2014)

 

The Pencil tool is an easy way to generate freehand outline shapes.

 

Pencil mode

 

Before you draw with the Pencil tool, select from 3 different 'smoothing' modes;

  1. Straighten = straightens lines to straight lines
  2. Smooth = smooths wavyness out of curves
  3. Ink = remains wavy

Control the amount of mode correction in the Properties panel.

 

Merge mode
  1. Choose Pencil tool,
  2. Draw a shape,
  3. In Merge mode all elements of the shape remain independent.
  4. Choose Select tool. Place your mouse on a corner, pull a corner. Place it midway along a line, bend the line.
Object mode
  1. Choose Pencil tool,
  2. Draw a shape,
  3. In Object mode all elements of the shape are connected, as one.
  4. Choose Select tool. Place your mouse on a corner, pull a corner. Place it midway along a line, bend the line.

Back to top

 

Brush tool

 

(Ref; http://www.quepublishing.com/articles/article.aspx?p=729513&seqNum=23. 18 December 2014)

 

The Brush tool is an easy way to generate freehand outline shapes.

 
Brush mode

 

Before you paint with the Brush tool, select from different painting modes. (These are really effective in painting different areas);

  1. Paint Normal = Regular painting over everything

  2. Paint Fills. Paints inside strokes

  3. Paint Behind. Paints behind strokes

  4. Paint Selection. Select areas and paint will remain within that selection

  5. Paint Inside. Paints inside the lines of strokes for accurate 'colouring in'.

Merge mode
  1. Choose Brush tool,
  2. Paint a shape,
  3. In Merge mode all elements of the shape remain independent.
  4. Choose Select tool. Place your mouse on a corner, pull a corner. Place it midway along a line, bend the line.
Object mode
  1. Choose brush tool,
  2. Paint a shape,
  3. In Object mode all elements of the shape are connected, as one.
  4. Choose Select tool. Place your mouse on a corner, pull a corner. Place it midway along a line, bend the line.

Back to top

 

Adding and adjusting colour

 

Stroke

 

Stroke is the name given to the outline of your objects. To change the Stroke colour;

  1. Choose the Select tool, select your object,
  2. Click the Stroke colour selector in the Tool bar or,
  3. Click the Stroke colour selector in the Properties panel,
  4. Choose a colour,
  5. To change the thickness of the Stroke, use the slider in the Properties panel.
Fill

 

Fill is the name given to the colour inside your objects. To change the Fill colour;

  1. Choose the Select tool, select your object,
  2. Click the Fill colour selector in the Tool bar or,
  3. Click the Fill colour selector in the Properties panel,
  4. Choose a colour,

Back to top

 

group, arrange, align objects

 

To deal with multiples of shaped objects we need to learn how to Group, arrange and align them.

 

Group objects
  1. Draw a variety of shapes on the stage,
  2. Choose the selection tool, select the range of shapes by dragging the selection tool across them all,
  3. Press Modify > Group.
  4. (To break them apart; Press Modify > Ungroup.
Arrange objects
  1. Draw a variety of shapes on the stage,
  2. Choose the selection tool, select the range of shapes by dragging the selection tool across them all,
  3. Press Modify > Arrange > (select the option you want; Bring to front, Send to back, etc.).
  4. Note: when we work in different Layers, this option will only Arrange objects relative to each other on the same Layer.
Align objects
  1. Draw a variety of shapes on the stage,
  2. Choose the selection tool, select the range of shapes by dragging the selection tool across them all,
  3. Press Modify > Align > (select the option you want; there are many to experiment with).

Back to top

 

Importing images to Flash

 

When we are making animations we don't always want to draw each element of the sequence. Often we need to use pictures. Pictures in our computer, coming from programs such as Adobe Photoshop are Bitmap images. Using a Bitmap is known as importing an image. In addition, we might want pictures to look like we have drawn them, perhaps to suit the rest of an animation. Read on to find out how to convert Bitmaps to Vector images.

 

Import image to Stage or Library

 

Flash will handle all image types used for Web including; PNG, JPEG, GIF. Like all publishing work it is best practice to consider your destination output size in Pixels and image resolution before adding them to a Flash file. Use Photshop to pre-process all images before they are imported. If you want images to act on their own without a background, open them in Photoshop, delete the background then save them as a PNG. Ensure that you don't scale Bitmap images up in Flash as they will loose clarity.

 

An animation based on a bitmap imported to library

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

A 60 second animation of a watch ticking. Read below for steps to make it.

 

Download these files. don't worry they are bigger

 

The original watch image.
The image with hands removed. This is saved as a .PNG so it has a transparent background.
A transparent image of the watch face saved as a .PNG.

 

(Ref: picutre of TW Steel watch found at; http://www.watchshop.com/mens-tw-steel-ceo-50mm-watch-ce1022-p99931773.html. 23 January 2015).

 

The flash workspace

 

Look carefully at the order of the layers, Frame rate and the use of Frame by Frame animation.
  1. Prepare your images in Photoshop.
    You can use mine by right clicking on them and saving them, or if you want to be more original, choose another watch picture.
  2. Make a new Flash file
  3. Change your Frame rate to 1 Frame Per Second! You will find out why later...
  4. Name it "watch.fla"
  5. Import all your images to the Library. You can import them "to Stage" but you want them for future use. Use File/ Import/ Import to Library...
  6. Name Layer 1 "watch".
  7. Slide one instance of the watch image in, convert to a Graphic Symbol.
  8. Position the watch symbol and lock the layer.
  9. Create a new layer and name it "hourhand".
  10. Choose View/ Rulers. Drag Guides to mark the centre of the face (see image above) at the dot I put in when I removed the watch's hands!
  11. Choose the Line tool. Locate Fill and Stroke in the Properties panel and choose Colour: White, Stroke: 10px thick, end Cap: Square.
  12. Draw the hour hand.
  13. Lock the layer.
  14. Create a new layer, name it "minutedhand".
  15. Choose the Line tool. Locate Fill and Locate in the Properties panel choose Colour: White, Stroke: 8px thick, end Cap: Square.
  16. Lock the layer.
  17. Create a new layer, name it "seconddhand".
  18. Choose the Pen tool. Set the Stroke to 1px and draw the outline of the hand as best you can.
    I drew mine away from its actual position and horizontal using Guides to set up the size and proportions. I then rotated it into position.
  19. Select the second hand you made and Right Click it. Choose Convert to Graphic Symbol. Name it "seconddhand".
  20. Create a new layer, name it "centre".
  21. Choose the Oval tool and make a centre point in grey. Resize and position if needed. Use the Guides to help.
  22. Time to animate the second hand.
  23. We want the Second Hand to go right around the watch continuously. So that's 60 seconds at 1 fps. It's 60 frames. But wait, we don't want the last frame to repeat so we use just 59 frames.
  24. To make the watch and the hour and minite hands visible for the whole animation insert Key frames at Frame 59 on each layer except the Second hand.
  25. You are going to use the Frame by Frame animation technique.
  26. Now, select the "secondhand" layer.
  27. Press F6 to add a Key Frame to Frame 2.
  28. Choose the Free Transform tool, select the Second hand. Move the Rotation point to the centre of the face. This will mean that when you rotate the hand in each frame, the centre will always stay at the centre of the watch face.
  29. Rotate the hand one second.
  30. Press F6 (Insert new Key Frame),
  31. Rotate hand one second,
  32. Press F6 (Insert new Key Frame),
  33. Rotate hand one second,
  34. Continue this process until you reach Frame 59.
  35. Preview the animation by pressing Command + Enter.
  36. Adjust mistakes by inserting another frame or deleting one.
  37. The finishing touch is to add the glass to give it a bit more realism.
  38. Create a new layer, name it "glass".
  39. Drag out one instance of the glass.png. Convert it to a Graphic Symbol. Name it "glass".
  40. Insert another Key frame at Frame 59 on the Glass layer to ensure we can see the glass all the way to the end of the animation.

Back to top

 

Convert bitmap images to vector images

 

Often we want images derived from (Bitmap) images to match the simple Vector style of our artwork in drawn for an animation if Flash. Flash allows us to import Bitmap images then convert them to Vector images. As you will know, Vector images are made from flat areas of colour. How then can we convert tonal graduations to flat areas sucessfully? Flash lets us decide how many tonal or colour steps to use and how many pixels to allow each corner to simplify. Remember pictures will look different as Vector images from their original. The big advantate is the colours in a Vector image are editable and accurate when rescaled. Don't try to keep them the same - that's why were converting them.

 

Converting bitmaps to vector images.

 

An original Bitmap (.JPEG) shot of Venice I took on a school trip in 2010.
A screen shot of the same image after converting to a Vector image. I have also move some sections apart for efffect.

 

Steps to convert Bitmaps to Vectors.
  1. Use Photoshop to prepare a Bitmap (.JPEG, .PNG) image to import and convert to a Vector in Flash. Save it to about 400 pixels wide at 72 or 96 ppi.
  2. Open a new Flash file, save it as "vector.fla".
  3. Press File/ Import/ Import to Stage, then select your image and press OK.
  4. Select the image on the Stage. Then press Modify/ Bitmap/ Trace Bitmap.
  5. Experiment with the colour and corners settings that will suit your needs best.
  6. The best thing about a Vector image is you can then break apart the image and use it as a drawn image.
  7. Have fun with it!

 

Back to top

 

4. Principles of animation

 

 

You will be familiar with most of these terms as you work through the exercises in making animations. Each of them is explained below:

 

Timeline

 

This is the chronological display of frames, usually located at the bottom of the screen in Flash. It is where frames, layers, groups and tweens are located and displayed.

 

Layers

 

A Layer in Flash is like an individual drawing 'picture' plane on which artwork, symbols, sounds or objects are positioned so they can be seen (or hidden) in relation to other artwork or objects. Typically each separate component, even of complex animated characters, has its own layer. Layers can be named and moved up or down in relation to other layers.

 

Rotation Point

 

A Rotation Point in Flash refers to a point on an artwork, symbol or object around which rotation is made. It is the point that remains in the one position while the objects rotates. Understanding Rotation Points is essential in Frame by Frame animation where an object needs to be rotated slightly at one end but remain in a constant position at the other end (like a leg or arm). A rotation point can be moved when it is selected with the Free Transform tool.

 

Point of View

 

Point of View can refer to two things:

 

  1. The height or position that a spectator is located when viewing a scene or sequence of movement. For example; a scene can be a 'low shot' or a 'high shot'.
  2. A shot that is (or could be) as seen from a particular person or character (within the narrative). For example; a fight could be shown from the main character's (first person) point of view, or from an observer (third person) point of view. Difference in Point of View can lead to different ways action could be depicted and consequently interpreted.
Perspective

 

Perspective can refer to two things;

  1. Angled lines or shapes that create depth in a scene. Designers usually use 1 Point or 2 Point perspective system to create an illustion of depth. In VET IDM we use the term perspective when discussing drawings, animations and photographs.
  2. A particular Point of View (see #2 above). For example; a fight may be shown from the 'big guy's' perspective.

Back to top

 

5. animation techniques

 

There are many techniques for creating animation. Learn how to create each one quickly and efficiently to enter the exam with conficence.

 

Flash is an extremely powerful tool when it comes to animation. As you can guess, there are many different ways and techniques to use to make objects move. I will show you enough ways to ensure that you are confident in animating with Flash, when it comes to your examination.

 

Frames

 

A Frame is one picture shown at one given time in an animation. There are two names for different kinds of frames.

 

Early last century (in the great age of 'cell' animation - like Disney's 'Snow White' 1937), the process used to create a sequence of action involved artists drawing and painting hundreds (and thousands) of pictures that were ordered into a sequence to create the illusion of movement. These pictures are know as 'cells'. The artists who drew and painted the 'animation' were divided into many categories according to their skill level, experience and consquently their cost to the studio who employed them.

 

The best, most talented artists painted the most important cells (frames). These frames defined the look of the characters in two main parts of each sequence of action: the start and the end of sequence. These talented artists were used to paint the 'key' frames. (Frames that include important information for the beginning and end of a sequence of movement. Then came the laborious task of painting in all the frames that are needed in between the key frames. This was a very repeditive job, often involving changing only small parts of each picture in each cell. Less experienced and consequently cheaper artists were employed to paint these frames. These artists were known as 'tweeners'. And so the name 'tween' was made to describe the frames that are between key frames.

 

In Flash you will use these two words in similar ways:

Let's learn how to animate...

 

Back to top

 

Symbols

 

The first thing we need to know about animations in Flash is how and why we always use Symbols instead of shapes in our movement sequences.

 

File size

 

Shapes in Flash are Vector images. They are very small files. However, animations are made from many many shapes. The file size begins to build up. When shapes are Grouped then converted to a Symbol, they cease to be combinations of shapes and colours but become one intergrated image. One image = a reduced file size and easier processing.

Editing symbols

 

Symbols are amazing when changes need to be made. If a symbol is edited after it is placed, the edit will apply to every instance of the symbol!

  1. Simply double click a symbol where it displays in the Library to enter the symbol in the Stage,
  2. Edit the shape, colour, etc,
  3. Exit the symbol, back to the main stage to see the effect.
Kinds of symbols

 

There are three kinds of symbols you can use in Flash:

 

Graphic symbol

 

The Graphic symbol is a simple amalgamation of Vector shapes. Use a Graphic symbol everytime you animate a shape.

 

Movie Clip Symbol

 

The Movie Clip Symbol is so named because this kind of symbol can contain animation in itself! Image you want to attach a spinning wheel to a car, that then moves across the stage. You need to animate the turning of the wheel before it is added to the car. Use a Movie Clip symbol when you want movement to repeat within a symbol.

 

Button Symbol

 

The Button Symbol is an interactive symbol. It can be used when you want a user to click a button that will both change its state (shape, colour, etc) and begin another action (move to a different scene, page, site, etc). Controlling Button Symbols is through Action Script. We don't have to learn AS in VET Interactive Digital Media, so we don't use Button Symbols.

 

Back to top

 

FRAME BY FRAME ANIMATION

 

An animation is just a sequence of pictures with adjustments of shape or placement of objects in a sequence. The digital technique that most closely resembles traditional cell animation is 'frame by frame' animation. In this technique you will make an object move by moving it in newly created frames. Each frame in this technique is called a 'key' frame.

bouncing ball

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

(Ref: http://www.adobe.com/devnet/flash/learning_guide/animation/part04.html#articlecontentAdobe_numberedheader_0. 20 January 2015)

  1. Begin a new file. Use the default size, background colour but change the frame rate to 12 FPS.
  2. Rename 'Layer 1' to Background,
  3. Select the Rectangle tool, Object Drawing Mode, a sky blue and draw the sky. Change the colour to green and make the grass.
  4. Select both shapes and Group them. (Command + G),
  5. Right click (Control Click) the Group and choose convert to Symbol. Choose Grapic Symbol.
  6. Create a new layer, name it Ball.
  7. Select the Oval tool, shoose a colour, press Shift as you pull a circle for the ball.
  8. Right click the ball and convert to Graphic symbol, name it Ball.
  9. Move the Ball out of the Stage area at the top left of the Stage. Now we will begin animation.
  10. First we have to specify the length of the animation. Select the Background layer then insert a Key Frame at frame 60. This will ensure that the background is visible all the way through the animation.
  11. Now select the Ball layer.
  12. Make sure the Time line is on Frame 1 and insert a Key Frame. The two ways to do this are;
    • Press F6 or Right Click the frame and select Insert Key Frame.
  13. Turn on Onion Skin (Button at the bottom of Stage area). This will allow you to see the previous frame position of the object.
  14. Move the ball into the stage area about half the width of the ball across to the right and down.
  15. Insert a new Key Frame - move the ball,
  16. Repeat the sequence (over and over) untill the ball is at the bottom of its fall.
  17. To create a Squash and Stretch effect;
    • Insert new Key Frame, Select Free Transform Tool, select the Ball, Move the Registration point to the bottom, then squash the ball slighlty.
    • Insert new Key Frame and squash again, repeat sequence.
    • To stretch the ball before take off, repeat the sequence in reverse.
  18. Stretch the ball then animate it as it bounces up again.
  19. Repeat the sequence to create a path for the ball up and out of the Stage.
  20. Press Command + Enter to see a preview. Note the preview automatically saves a .SWF file in the same folder as your original animation. This .SWF file is the file that is then used on a website.

Frame By Frame animation screen shot

 

Here is a screen shot of a frame by frame animation. Note the way key frames have been asigned to each frame.

 

Back to top

 

AUTOMATED TWEENS

 

Classic tween

 

The Classic Tween is the motion tween that was created for Adobe Flash CS3.

Back to top

 

Motion tween

 

Shape tween

(see Below)

drawing the background and plane
  1. Begin a new file. Use the default size, background colour but change the frame rate to 12 FPS.
  2. Rename 'Layer 1' to Background,
  3. Select the Rectangle tool, Object Drawing Mode, a sky blue and draw tha sky.
  4. Create a new layer, name it Plane.
  5. Reselect the Rectangle tool, Change the drawing mode to Merge Mode, Choose a contrasting colour, draw a rectangle,
  6. Choose the Select tool, place it on one corner of the rectangle and move it in to form a triangle like a paper plane wing.
  7. Repeat the process to create the other wing.
  8. Select both shapes and Group them. (Command + G),
  9. Right click (Control Click) the Group and choose convert to Symbol. Choose Grapic Symbol.
  10. Ensure the Plane is at the left of the stage area.
Animating the plane

 

Motion tween

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Here is the simplest Motion Tween. Follow the steps below to make it.
  1. Choose a duration for your animation. I am choosing 4 seconds. So calculate 4 x 12 fps = 48 frames.
  2. Select the Background layer, move the Playhead to frame 48 in the timeline.
  3. Press F6 to insert an Key Frame at frame 48. This ensures the sky will be visible for the duration of the animation.
  4. Move the Playhead back to frame one, select the Plane layer, select the Plane symbol at the left of the stage.
  5. Right Click the plane, Choose Create Motion Tween. You may be prompted to convert the symbol to a Movie Clip. If so, accept. (The Motion Tween sets a default length of 25 frames). The Playhead automatically moves to Frame 25.
  6. Move the plane to the right side and outside the stage area. Note a Motion path appears across the screen.
  7. There is a black Diamond in the place of Frame 1 and 25 in the Time Line. This indicates a Motion Tween. (Not an arrow as used in a Classic Tween)
  8. Preview the animation by pressing Command + Enter.
To change the length of the tween
  1. Position your mouse over the Key frame at the end of the Tween. (It changes to a slide arrow). Drag the Tween left to shorten, right to extend the Tween.
  2. Preview the animation by pressing Command + Enter.
  3. Note: shorter Tweens make the action go faster, longer Tweens make the action go slower. Can you answer why?

Motion tween screen shot

 

Here is a screen shot of a Motion Tween. Note the straight path. Next we learn to bend it. Note the difference in the Time line from the frame by frame animation.
 
To bend the path

 

Bending a motion path screen shot

 

Here is a screen shot of bending a Motion Path.
  1. Simply bring your mouse up to the Motion Path with the Selection tool. Grab a point and drag.
  2. Preview the animation by pressing Command + Enter.
To draw a new (custom) path

 

Creating a custom path

 

Here is a screen shot of bending a Motion Path.

 

(Ref: http://www.adobe.com/devnet/flash/learning_guide/animation/part07.html. 22 January 2015)

  1. Convert your Symbol to a Movie Clip symbol or create a new Movie Clip symbol in the Library and on the stage ready to animate.
  2. Right Click the plane, Choose Create Motion Tween.
  3. Move the plane to the right side and outside the stage area. Note a Motion path appears across the screen.
  4. Select the Motion Path on the stage and press Delete. The path is removed from the stage and no longer animates.
  5. Create a new Layer.
  6. Use the Pencil tool to draw a new path across the stage. You may want to choose Smooth Drawing Mode and loop the path.
  7. Choose the Select tool, double click the path you drew to select it, Choose Edit/ Copy,
  8. Select the Motion Tween Span in the Timeline, then choose Edit/ Paste in Place to copy the path into the tween.
  9. Preview the animation by pressing Command + Enter.
To orient to path

 

making an object follow a path

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Orient to Path in action.

Use the same file as you created above.

  1. Choose the Select tool.
  2. Select the tween span in the Timeline,
  3. Make sure the Properties Inspector panel is open on your screen,
  4. In Rotation in the Properties Inspector, Check Orient to Path.
  5. Preview the animation by pressing Command + Enter.
  6. If the path you drew is visible, double click it to select it, choose Stroke in your Tools Panel, choose no stroke visible in the Colours and the line will disapear but not delete.
  7. Preview the animation again by pressing Command + Enter.
Acceration, Decelaration; Easing

 

making the plane slow down and fall...

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

I have added easing to two motion paths.

Working from the Plane file, firstly I reduce the length of the Motion path so the plane does not reach the right side of the stage

 

shorten the motion path

 

Firstly, shorten the motion path before following the steps below.
  1. Bend the Motion path a bit for realism before you start.
  2. Ensure the Motion Editor is selected ( It sits beside the Timeline Tab).
  3. Select a Tween span in the layer of the moving symbol,
  4. Select Motion Editor (if not already done),
  5. Slide the Viewable Frames slider at the bottom to show all the frames in the movement sequence.
  6. Scroll up and down in the Motion Editor, note the sections that are open for viewing. Slide down until you reach Eases.
  7. Click the + sign to reveal all the Eases you can use.
  8. I chose Simple (Fastest).
  9. Now scroll up to the Basic Motion category. On the drop down at the right choose 2 Simple (Fastest). This applies the Ease.
  10. Notice in the motion path how the frames (diamonds) have been spread out differently? They are widest at the beginning and narrower at the end of the motion sequence.
  11. Preview the animation again by pressing Command + Enter. You will notice the plane speeds in and slowly stops.
Completing the animation, dropping the plane
  1. On the plane layer, shorten the motion path back to where the plane stops.
  2. Insert a new layer. Select Onion Skin (to see a preceding frame).
  3. Move the play head to the frame directly after the plane stops. Select the new layer. Place a new instance of the plane symbol at that frame.
  4. Right Click and select Create Motion Tween,
  5. Move the plane instance off the bottom of the stage.
  6. Preview the animation again by pressing Command + Enter.
Applying an Ease to the plane falling:

 

Applying the second movement and ease

 

I have created a second layer for the second action and applied another ease.
  1. Select the Motion Tween in the Plane falling layer of the Timeline.
  2. Select the Motion Editor tab.
  3. Locate Easing in the Motion Editor. Click the + sign to reveal all the Eases you can use.
  4. I chose Stop and Start (Fast).
  5. Now scroll up to the Basic Motion category. On the drop down at the right chooseStop and Start (Fast). This applies the Ease.
  6. Preview the animation again by pressing Command + Enter.

Back to top

 

Modifying Colour Effects of objects

 

In this section you will learn how to use the Properties panel to set Colour Effects

 

create a simple motion tween file to experiment with effects shwon below.

 

Set this file up first to complete the exercises below.
  1. Make a new file.
  2. Choose the Rectangle tool, select a fill colour (turn off stroke). Draw a square.
  3. Select the square. Right click it and choose Convert to Symbol. Choose Graphic Symbol.
  4. Move the square to the left of the frame.
  5. Right click Frame 1 in the square's layer, choose Create Motion Tween.
  6. Extend the Motion Tween to frame 40.
  7. Shorten the Motion Path so the square is visible at the start and end of the motion.
  8. Save the file as "coloureffects.fla".

Back to top

 

Changing Brightness

 

moving from dark to light

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Follow the steps below to create this effect.
  1. Work from the file you began above.
  2. Move the playhead to Frame 1.
  3. Select the square symbol. In the Properties Panel locate the Colour Effects category. Choose Brightness. Move the slider to 0%.
  4. Move the playhead to Frame 40.
  5. Select the square symbol. In the Properties Panel locate the Colour Effects category. Choose Brightness. Move the slider to 100%.
  6. Preview the animation by pressing Command + Enter.
  7. Re-name the .SWF file "brightness.swf"
  8. Revert back to the original file by pressing Colour Effects/ None at Frame 1 and Frame 40.

Back to top

 

Changing tint
 

changing a hue

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Follow the steps below to create this effect..
  1. Work from the file you began above.
  2. Move the playhead to Frame 1.
  3. Select the square symbol. In the Properties Panel locate the Colour Effects category. Choose Tint. Move the Tint slider to 0% for full strength Red.
  4. Move the playhead to Frame 40.
  5. Select the square symbol. In the Properties Panel locate the Colour Effects category. Choose Tint again. Move the Tint slider to 100% for full strength colour, then move the RGB sliders until the square is Green 255.
  6. Preview the animation by pressing Command + Enter.
  7. Re-name the .SWF file "tint.swf"
  8. Revert back to the original file by pressing Colour Effects/ None at Frame 1 and Frame 40.

Back to top

 

Changing Alpha (transparency)

 

making it appear/ disappear

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Follow the steps below to create this effect.
  1. Work from the file you began above.
  2. Move the playhead to Frame 1.
  3. Select the square symbol. In the Properties Panel locate the Colour Effects category. Choose Alpha. Move the Alpha slider to 0% for full transparency.
  4. Move the playhead to Frame 40.
  5. Select the square symbol. In the Properties Panel locate the Colour Effects category. Choose Alpha again. Move the Alpha slider to 100% for full strength opacity.
  6. Preview the animation by pressing Command + Enter.
  7. Re-name the .SWF file "alpha.swf"
  8. Revert back to the original file by pressing Colour Effects/ None at Frame 1 and Frame 40.

Back to top

 

Changing Brightness, tint and Alpha (advanced)
 

more controls

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Follow the steps below to create this effect.
  1. Work from the file you began above.
  2. Move the playhead to Frame 1.
  3. Select the square symbol. In the Properties Panel locate the Colour Effects category. Choose Advanced. Move each slider to set transparency brightness in more controllable ways.
  4. Move the playhead to Frame 40.
  5. Select the square symbol. In the Properties Panel locate the Colour Effects category. Choose Alpha again. Move the Alpha slider to 100% for full strength opacity.
  6. Preview the animation by pressing Command + Enter.

Back to top

 

movie clip symbols

 

Make a car drive up and down a hill

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Follow these steps to master Movie Clips and Easing.

 

In this exercise we are going to make a wacky car that crosses the stage. Follow these steps;

Making the wheel movie clip

 

Draw a wheel

 

Make a wheel something like this.
  1. Open a new file
  2. Select Layer 1,
  3. Press Insert/ New Symbol, Choose Movie Clip, Click OK. (Note: In the bar at the top you have entered "Symbol 1" - not "Scene 1").
  4. Using the Oval tool, Line tool, Stroke and Fill draw yourself a wheel like the one shown above.
  5. Select all of the elements and Group them.
Make the wheel turn
  1. Right Click Frame 1 on Layer 1, Select Create Motion Tween. (You will be prompted to resave it as a Movie Clip, accept).
  2. We need the wheel to rotate once every half second so move the end of the Tween back to frame 6.
  3. Now, with the Playhead on Frame 6, select the Wheel on the Stage, Open the Transform Pallete (Window/ Transform), Type in -180 degrees in the Rotation category.
  4. Jump back to Scene 1 by pressing the link in the bar at the top of the screen. The stage is empty.
  5. Re open Library if it is not open. Drag one instance of the wheel symbol to the Stage. (Check you have the right symbol).
  6. Preview the animation again by pressing Command + Enter.
  7. Rename the symbol "Wheel".
Making the shaking car

 

Make a simple car

 

Draw a simple car bodyshape.
  1. Create a new Layer. Lock Layer 1. Hide Layer 1.
  2. Using the Rectangle tool, Line tool, Stroke and Fill draw yourself a car like the one shown above. Use your imagination.
  3. Select all of the elements and Group them.
  4. Now, Right Click and choose Convert to Symbol. Convert to Movie Clip Symbol. Notice it enters the Libarary.
Make the car shake
  1. Double click the Symbol in the Library to enter the Car Symbol for editing. (Check you are in the symbol).
  2. Right Click Frame 1, Select Create Motion Tween. (If prompted to resave it as a Movie Clip, accept).
  3. We need the car to shake once every half second so move the end of the Tween back to frame 6.
  4. Now, with the Playhead on Frame 3, select the Car on the Stage, Open the Transform Pallete (Window/ Transform), Type in 15 degrees in the Rotation category.
  5. With the Playhead on Frame 6, select the Car on the Stage, Open the Transform Pallete (Window/ Transform), Type in 0degrees in the Rotation category.
  6. Jump back to Scene 1 by pressing the link in the bar at the top of the screen. The stage is empty.
  7. Drag one instance of the car symbol to the Stage. (Check you have the right symbol).
  8. Preview the animation again by pressing Command + Enter.
  9. Rename the symbol "Car".
Making the smoke

 

Applying the second movement and ease

 

I have created a second layer for the second action and applied another ease.
  1. Create a new Layer. Lock Layer 1+2. Hide Layer 1+2.
  2. Using the Oval tool, and Fill draw yourself some smoke like the stuff shown above.
  3. Select all of the elements and Group them.
  4. Now, Right Click and choose Convert to Symbol. Convert to Movie Clip Symbol. Notice it enters the Libarary.
Make the smoke disapear
  1. Double click the Symbol in the Library to enter the Smoke Symbol for editing. (Chek you are in the symbol).
  2. Right Click Frame 1 on Layer 3 (Smoke layer), Select Create Motion Tween. (If prompted to resave it as a Movie Clip, accept).
  3. We need the smoke to emerge small, get bigger then disapear once every second so move the end of the Tween back to frame 12.
  4. Now, with the Playhead on Frame 1, select the Smoke on the Stage, Choose the Free Transform tool and make it smaller.
  5. With the Playhead on Frame 6, select the Smoke on the Stage, Use Free Transform tool to make it bigger. Then move it to the Left a bit.
  6. With the Playhead on Frame 12, select the Smoke on the Stage, Use Free Transform tool to make it bigger again. Then move it to the Left a bit more. Then in the Properties panel Choose Colour Effect and select Alpha from the drop down. Push the Alpha slider to 0%.
  7. This Alph setting makes the smoke disapear evenly from Frame 1. We don't want this. So,
  8. Jump back to put the Playhead on Frame 6, select Alpha from the drop down agin and push the Alpha slider back to 100%.
  9. Jump back to Scene 1 by pressing the link in the bar at the top of the screen. The stage is empty.
  10. Drag one instance of the car symbol to the Stage. (Check you have the right symbol).
  11. Preview the animation again by pressing Command + Enter.
  12. Rename the symbol "Smoke".

Putting it together

 

Put the bits together

 

Bring the car, wheels and smoke together and make a new symbol.
  1. Create a new Layer. Lock Layer 1+2+3. Hide Layer 1+2+3
  2. Drag one instance of Fullcar symbol onto the Stage.
  3. Choose the Free Transform tool and make is smaller and place it at the left side, outside the stage frame.
  4. Drag another instance of Wheel symbol onto the Stage.
  5. Drag one instance of Smoke symbol onto the Stage.
  6. Select all the elements and Group them.
  7. Now, Right Click and choose Convert to Symbol. Convert to Movie Clip Symbol. Name it "fullcar". Notice it enters the Libarary.
Animating the car
  1. Create a new Layer. Lock Layer 1+2+3+4. Hide Layer 1+2+3+4
  2. Drag one instance of Car symbol onto the Stage.
  3. Select Frame 1 of Layer 5, Right Click and choose Create Motion Tween.
  4. We want the whole action to take 5 seconds so at 12 fps, move the end of the Motion Tween out to Frame 60.
  5. With the Playhead on Frame 60 move the car all the way right 'till it leaves the Stage.
  6. Preview the animation again by pressing Command + Enter.
  7. Now to make the hill, bend the Motion path upwards in the centre.
  8. Then, using the steps shown above select the Motion Path and add some Easing to the Basic Motion in the Motion Editor. I used "Stop and Start (Slow)". This makes the car change speeds as it goes over the hill.
  9. Delete all the layers used in the construction leaving the full car layer.
Finishing off with a background

 

Then give it a landscape

 

Draw your sky and hill on new layers.
  1. Create a new Layer. Lock the Full car layer.
  2. Draw a sky.
  3. Create a new Layer, draw a hill.
  4. Move the layers into position with the car on top.
  5. Preview the animation again by pressing Command + Enter.
  6. You're done!

Back to top

 

Working with text

 

Text can be set and manipulated in a similar way to text in Illustrator. We use the Properties panel to set fonts, size, spacing (tracking) and colour.

 

animating text for a web ad

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

A simple animation with effects to the Text.

 

styling text in the properties panel

 

Control your text in the Properties panel.

 

Making and animating Text
  1. Create a new File.
  2. Make a background with a single colour on Layer 1. Lock this layer. Name it "background".
  3. Insert a new layer. Name it "text". Select the Text tool. Write the name of a shop. Style the text; set a font, size and colour.
  4. Next, to animate and use effects we need to convert the text to a symbol.
  5. Select the text. Right click and select Convert to Symbol. Choose Graphic. Name the symbol.
  6. Select Frame 1 of the Text Layer, Right Click and choose Create Motion Tween.
  7. We want the whole action to take 3 seconds so at 12 fps, move the end of the Motion Tween out to Frame 36.
  8. With the Playhead on Frame 1 move the text to a position above and outside the stage.
  9. Resize the text with the Free Transform tool. Don't forget to press Shift when you resize it to maintain the proportions.
  10. With the Playhead on Frame 36 move the text to a new position at the centre of the stage. Resize it to a good size.
Set animation effects
  1. With the Playhead on Frame 1, select the text, choose Alpha in Colour Effects in the Properties Panel. Move the slider to 0% to make it transparent.
  2. With the Playhead on Frame 36, select the text, choose Alpha in Colour Effects in the Properties Panel. Move the slider to 100% to make it opaque again.
  3. With the Playhead on Frame 24. Set the rotation to 360 degrees in Rotate in the Transform pallete. Bring the Alpha back to 100% at this point too for more impact.
  4. Select the Background Layer. Insert a Keyframe at Frame 36 so the background is visible during the whole animation.
  5. Preview the animation again by pressing Command + Enter.

Back to top

 

using a mask

 

using a stationary mask as a 'window'

 

(Ref: http://www.dummies.com/how-to/content/use-mask-layers-in-flash-cs5.html. 23 January 2015)

 

a stationary mask reveals moving text

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Here is a simple use of a circular mask to reveal moving text behind.

 

creating a simple mask animation

 

The mask layer is made by right clicking the name of the layer and choosing 'Mask' from the menu.
  1. Create a new File.
  2. Make a background with a single colour on Layer 1. Lock this layer. Name it "background".
  3. Insert a new layer. Name it "text". Select the Text tool. Write the name of a shop. Style the text; set a font, size and colour.
  4. Next, to animate and use effects we need to convert the text to a symbol.
  5. Select the text. Right click and select Convert to Symbol. Choose Graphic. Name the symbol.
  6. Now, we need to animate the text.
  7. Select Frame 1 of the Text Layer, Right Click and choose Create Motion Tween.
  8. We want the whole action to take 3 seconds so at 12 fps, move the end of the Motion Tween out to Frame 36.
  9. With the Playhead on Frame 1 move the text a position on the left and outside the stage.
  10. With the Playhead on Frame 36 move the text to a new position on the left and outside the stage.
  11. Insert a new layer above the text layer. Name it "mask". Using the Oval Tool and selecting a different colour fill, draw a circle in the middle of the stage.
  12. Now to make this circle into the mask, select the Mask layer by clicking the name "mask". Right click above the name and choose Mask from the menu. The circle disapears as it becomes the mask. You will notice that both the mask and the text layer become locked. Layers have to be locked for a mask to work.
  13. Preview the animation again by pressing Command + Enter.
  14. To edit the mask, unlock the mask layer and it will become visible again. Edit with the free transform tool.

Back to top

 

Making an animated mask to reveal text

 

an animated mask reveals stationary text

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Here I made the negative shape of a plane as a mask to reveal the text beneath.

 

the mask in place

 

This shows the mask in place and animated by a Motion Tween.
  1. Create a new File.
  2. Make a background with a single colour on Layer 1. Lock this layer. Name it "background".
  3. Insert a new layer. Name it "text". Select the Text tool. Write a caption. Style the text; set a font, size and colour.
    I also changed line height in the Transform pallet.
  4. Next to save file space, select the text. Right click and select Convert to Symbol. Choose Graphic. Name the symbol.
  5. Next we will make the Plane mask.
  6. Insert a new layer. Name it "mask". On this layer draw a shape of a plane.
    However, this is tricky. You have to remember whatever you draw will become what the viewer sees so you have to draw the negative space around the plane, not the plane itself!
  7. Give the plane mask a fill and remove the stroke.
  8. Select the plane. Right click and select Convert to Symbol. Choose Graphic. Name the "plane".
  9. Now to make this plane shape into the mask, select the Mask layer by clicking the name "mask". Right click above the name and choose Mask from the menu. The plane disapears as it becomes the mask. You will notice that both the mask and the text layer become locked. Layers have to be locked for a mask to work.
  10. Let's animate the plane mask:
  11. Select Frame 1 of the Mask Layer, Right Click and choose Create Motion Tween.
  12. We want the whole action to take 4 seconds so at 12 fps, move the end of the Motion Tween out to Frame 48.
  13. With the Playhead on Frame 1 move the plane to a position below the stage.
  14. With the Playhead on Frame 48 move the plane to a new position at the top of the stage. .
  15. Preview the animation again by pressing Command + Enter.
  16. To edit the mask, unlock the mask layer and it will become visible again. Edit with the free transform tool.

Back to top

 

Shape tweens

 

Shape Tween 1; Morphing two simple shapes

 

This is a simple Shape Tween where one shape will morph into another.

 

A shape tween from polygon to rectangle.

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

This is the simplest kind of Shape Tween. Try it for yourself.

 

Shape tween workspace.

 

The Shape Tween is shown by a light green background for the for the frames and an arrow in the Timeline.

 

Steps to create a Shape Tween.

  1. Create a new File.
  2. Select Frame 1 of the first Layer. Draw a shape like the polygon I did. You can include stroke and fill.
  3. Save your file "shapetween".fla
  4. I wanted the whole animation to take 2 seconds so at 12 fps, so select on Frame 24.
  5. Right click and select Insert Blank Keyframe.
    It has to be a 'blank' key frame because we don't want the picture in Frame 1 to carry over to this position.
  6. In Frame 24 draw a different shape. I did a long rectangle.
  7. Now jump back and select Frame 1. Right click and select Create Shape Tween. That's it. Watch the magic!
  8. Preview the animation by pressing Command + Enter.
  9. If you want you can also set Colour Effects to change along with the shape.

Back to top

 

Shape tween 2; Shape Tweening embedded in a Movie Clip

 

In this animation a Shape Tween of a rolling sea has been nested within a movie clip, which is then embedded within the animation. Creating the waves Shape Tween as a movie clip ensures that the sea will keep on rolling on a short cycle while the ship crosses the stage. Follow the steps below to make your own.

 

an animated ocean with a ship moving past. shape tweens and movie clip symbols.

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Here I embedded Movie Clip symbols within Shape Tweens.

 

Using the pen tool

 

Use the Pen tool to create editable Bezier curves.

 

Make the wave movie clip

 

The first part of the animation it to produce a waving sea. This is done by creating a three stage Movie Clip symbol with two Shape Tweens.

  1. Open a new file
  2. Save it and name it "shapetween2.fla"
  3. Select Layer 1,
  4. Press Insert/ New Symbol, Choose Movie Clip, Click OK.
    (Note: In the bar at the top you have entered "Symbol 1" - not "Scene 1" - Ensure you are inside the movie clip before you start working!).
  5. Select Frame 1.
  6. Using the Pen tool, draw yourself a wave shape like the one shown above. Complete the shape by joining it up at the bottom and sides. I used the Merge drawing mode and I chose to use Rulers (View/ Rulers) to help draw the waves neatly.
  7. Select the whole shape and fill it with a green colour. Remove the stroke.
  8. Select the wave shape again and copy it. Use Command + C or Edit/ Copy.
  9. Next we have to paste it into a new frame. I wanted this small movie clip to take only 2 seconds so at 12 fps, so select on Frame 24.
  10. Right click and select Insert Blank Keyframe.
    It has to be a 'blank' key frame because we don't want the picture in Frame 1 to carry over to this position.
  11. Now in Frame 24 paste the wave shape. But wait! Don't press Command + V or Edit/ Paste. Press Edit/ Paste in Place to have it paste in exaclty the same position.
  12. Now we have two identical wave forms. One in Frame 1 and one in Frame 24. But we need a different one to create the waving effect.
  13. Jump back and select Frame 12. You are going to copy the same wave form into this frame. Press Edit/ Paste in Place to have it paste in exaclty the same position.
  14. Now we have to modify the wave form. Choose the Direct Selection tool and click on the Bezier points of the wave form. Move them slightly to reshape each wave.
  15. Now select Frame 1. Right click and select Create Shape Tween. Then...
  16. Select Frame 12. Right click and select Create Shape Tween again.
  17. Click back to Scene 1 to exit the Movie Clip symbol.
  18. Preview the animation by pressing Command + Enter.
Make the ship movie clip

 

Refer back to making the 'car' in the Car on Hill animation above.

  1. Create a new Layer. Lock Layer 1. Hide Layer 1.
  2. Using the any tool, Line tool, Stroke and Fill draw yourself a ship like the one shown above. Use your imagination. I used the Brush tool.
  3. Fill and add details as you wish.
  4. Select all of the elements and Group them.
  5. Now, Right Click and choose Convert to Symbol. Convert to Movie Clip Symbol. Notice it enters the Libarary.
Make the ship pitch
  1. Double click the Symbol in the Library to enter the Ship Symbol for editing. (Check you are inside the symbol).
  2. Right Click Frame 1, Select Create Motion Tween. (If prompted to resave it as a Movie Clip, accept).
  3. We need the ship to pitch once every second so move the end of the Tween back to frame 12.
  4. Now, with the Playhead on Frame 6, select the ship on the Stage, Open the Transform Pallete (Window/ Transform), Type in 10 degrees in the Rotation category.
  5. Then with the Playhead on Frame 12, select the ship on the Stage, Open the Transform Pallete (Window/ Transform), Type in 0 degrees in the Rotation category.
  6. Jump back to Scene 1 by pressing the link in the bar at the top of the screen. The stage is empty.
  7. Drag one instance of the ship symbol to the Stage. (Check you have the right symbol).
  8. Preview the animation again by pressing Command + Enter.
  9. Rename the symbol "ship".
puting it together

 

arrange in layers to complete the animation

 

I added a background layer to block out some white that showed through the waves after I changed their shapes.
  1. Select or create the Background layer. I used this to provide another green field where there were bits of white showing.
  2. We want the whole action to take 5 seconds so at 12 fps, insert a Key Frame at Frame 48.
  3. Select or create the waveclip layer.
  4. Place one instance of the wave movie clip symbol on it. Insert another Key Frame at Frame 48 to ensure that it continues to pulse to the end of the animation.
  5. Select or create the Ship layer. Place one instance of the ship movie clip symbol on it.
  6. Choose the Free Transform tool and make is smaller if needed, and place it at the left side, outside the stage frame.
  7. Select Frame 1 of the Ship layer. Right Click and choose Create Motion Tween.
  8. Drag the Motion Tween out to Frame 48.
  9. With the Playhead on Frame 48 move the ship all the way right 'till it leaves the Stage.
  10. Preview the animation by pressing Command + Enter.

Back to top

 

Hinges and Pivots; the Bone tool

 

Animation of characters with moving limbs has been made simpler in Flash with the addition of the Bone Tool. This tool links shapes together with 'hinges' and 'pivots' to make a kind of skeleton. When one component is rotated it is linked with each other. This makes Frame by Frame animation easier and more accurate.

 

Click here for a full explanation from Adobe technical.

 

Creating an armature linking components

 

This image is taken from this webpage on 'the Bone tool. http://www.adobe.com/devnet/flash/
articles/character_animation_ik.html

 

Back to top

 

9 slice scaling

 

As many Flash animations can be interactive they often use buttons. We don't have to produce interactive Flash animations in VET IDM, but we do need to understand 9 Slice Scaling. It is examinable.

 

the benifit of 9 slice scaling.

 

The red buttons are rectangles with rounded corners simply scaled. The blue buttons have been converted into Movie Clip symobols with 9 Slice Scaling enabled. Note the difference in the corners after the button is scaled.

 

One of the inherent problems with making and using buttons is that when we want a consistent look to our work we want round corner buttons with the same radius on each button. No problem with that one. However, we often need these buttons to be of different sizes to accomodate different words on them. Each button might be the same height but a different length. If we begin with one button and get the rounded corners how we like them, what do you think will happen to the rounded corners if we want to make the button longer?

 

To find out how to create and edit Movie Clip symbols with 9 Slice Scaling click here to visit a Layers Magazine page.

 

Back to top

 

Motion 'Blur'

 

As you know, when things move they seem to blur. Particularly when photographed. To enhance the effect of movment artists, designers and animators add Speed or Motion Blur to objects. Read the two kinds of blur referred to in VET interactive Digital Media.

 

Speed Blur

 

Speed Blur is created by adding a series of straight, ruled, paralell horizontal or vertical lines from one side of an object. One artist famous for this effect is was the Pop Artist Roy Lichtenstein. His painting "In the Car" from 1963 clearly shows the effect of motion created by 'speed lines'.

 

Visit the site for this painting in Wikipedia by clicking here.

 

Motion Blur

 

Motion Blur refers to softening and extending pixels away from an object on one side. This is a more realistic version of blur like the effect that happens when something moves in a photograph.

 

To find out how to create Blur in Flash click here to visit a Layers Magazine page.

 

Back to top

 

6. sound in Flash

 

Animations are made more realistic and certainly more engaging for audiences if they contain sound. (However, sounds that load and play automatically can be a bit annoying when used on websites!)

 

In VET IDM we need to know how to work with sounds in both our practical work and for theroy questions for the November exam. Please take the time to learn how to work with sounds in your Flash animations.

 

(Compatible files and importing sounds;

ref: http://www.dummies.com/how-to/content/how-to-import-sounds-in-flash-cs5.html. 25 January 2015,

 

Placing sounds on the timeline;

ref: http://www.dummies.com/how-to/content/how-to-place-sounds-on-the-flash-cs5-timeline.html. 25 January 2015,

 

Editing sounds;

ref: http://www.dummies.com/how-to/content/how-to-edit-sounds-in-flash-cs5.html. 25 January 2015).

 

Compatible sound formats

 

Flash will only accept a few sound file formats without additional plugins. These are;

 

We will work with MP3 files. If you have M4A files in iTunes then copy the file to your desktop, download a free file converter and convert it to MP3. Then you will be ready to start adding it to Flash.

 

Importing sounds to Flash

 

The first step to adding sounds it to import the file. The way to do this is;

 

  1. Press File/ Import/ Import to Library.
  2. Choose the sound file, Click OK
  3. Your file will be available for you to use in the Library panel (along with your other symbols). It is shown with a speaker icon.

Back to top

 

Placing sounds in Flash

Next we add the sound at the appropriate place in the animation.

  1. Create a new layer for your sound. Each sound is treated like a separate object in Flash so needs its own separate layer. Name it "yoursound".
  2. Move the playhead to the location on the Time line where you want your sound to begin. Select the frame on the sound layer and right click. Choose Insert Blank Key Frame.
  3. To insert the sound correctly, simply locate the 'sound' category in the Properties panel and choose the file you want in the 'name' category. The sound will embed in the key frame you inserted.
  4. To loop or repeat the sound select the other categories in the Sound field of the Properties panel.

Back to top

 

Editing sounds

 

The edit envelope

 

Access the 'Edit Envelope' by pressing the Pencil icon in the Sound field of the Properties panel.

 

To edit your sounds in Flash
  1. Select the Key frame on the layer where your sound is located,
  2. Enter the sound Edit Envelope by pressing the Pencil icon in the Sound field of the Properties panel.
  3. Edit the 'in' and 'points' with the bounding box around the sound,
  4. Edit the volume by dragging the horizontal lines across the sound down.
  5. Alternate between time and frames view with the buttons at the bottom.
  6. The upper and lower fields indicate Left and Right chanel for the sound.
  7. When finished, click OK.

Back to top

 

7. Advanced controls for Flash

 

Setting a 'stop' point

 

To control Flash in more ways requires some knowledge of 'Action Script 3' language. From 2010 VET Interactive Digital Media deleted Action Script as part of the course content. However, some students still want to learn how to control their animations in more advanced ways.

If you would like to begin to learn more advanced controls visit this web page: How to Use gotoAndPlay() and gotoAndStop() in Flash CS5 ActionScript by clicking here.

 

Back to top