Flash workshop session 1 22nd February 2010

The first part of this tutorial will look at Motion Tweening to change an objects position, size, colour
and alter filters.

Motion tweens require a symbol instance, Flash will automatically ask to convert your object if not
already a symbol. It will also automatically seperate motion tweens on their own layers. There can
only be one motion tween per layer.

Note. you may already know this but tween comes from traditional animation where animators would draw the in
between frames of the beginning and end frames.

1 Launch the Flash programme and open the animating_tween_poster.fla file. Most of the images
that will be used in this excersice have already been imported, converted to symbols and placed
on the timeline. Look in the library on the right to familiarise youself with what images have been
imported and how they are named. Look at the timeline opening the folders to see how the
symbols have been used and grouped.

Note. if you cant see all the timeline you can reduce the size by clicking on the symbol on the right of the
timeline to reduce or increase the size.

2 Lock all the existing layers clicking on the lock symbol above the layers
to ensure you don’t modify them

Then create a new layer using the page symbol (or Ctrl click
on timeline to bring up the contextual menu)

Rename this skyline and drag it above the footer layer. Drag the skyline.jpg
from the library to the stage. In the property inspector position the X value to
0 and Y to 90. Right click on the skyline image on the stage, choose Create
Motion Tween, select Yes when promted to convert to a symbol.

This is now a Tween layer, the icon changes infront of the layer name and the frames change to
blue. You cannot draw on a Tween layer.

3 Move the playhead to frame 190, select the instance of skyline on the stage. Hold shift to lock in
a right angle and move up to the top of the stage. (or use the property panel to put X value to 0)

Flash automatically creates a keyframe at points where you move instances on the stage. A small
black triangle appears on the timeline at frame 190. Hide all the other layers by clicking the eye
above the layers to see just the skyline (click the eye on for just the layer you want to see).
Press Enter to play the tween.

[email protected]
4 To change the speed of the animation you can increase the lenght of the frames or shorten
them. Move the curser to the end frame of the skyline, when it changes to a double headed arrow
you can increase or decrease the length of the layer. Move it back to frame 60 and the beginning
frame to number 10.
The skyline moves much quicker as the length of the Tween is shorter.

5 The static last frame needs to continue until the end of the animation. To continue this frame add
frames holding Shift and drag to the end of the animation. The keyframe at 60 should still be in
the same position (cmd click to select an individual frame and press f5 to add frames or shift f5 to
remove them)

To move individual key frames cmd click to selct the frame, a box appears next to the mouse
indicating you can move the frame. Move the keyframe from 60 to 40 to make it quicker.

Transparency
6 Add transparency to the first key frame of the skyline. Move the playhead
to the first frame (10) and click on the image on the stage to select it. In the
property inspector open the Color Effect and set the Alpha to 0%.
Move to the keyframe (40) and put the Alpha back to 100%.

Animating filters
7 Turn on the eye for the actors. Lock all the layers apart from the woman.
Move the playhead to frame 23. Select the instance on the stage, this has
an Alpha value of 0% so it is not visible.

In the property inspector open the Filters panel, click the New Filter icon at the
bottom and choose blur. Set to 20px.

Move the playhead to frame 160, Ctrl click and

select Insert Frame > Filter. A keyframe is now
added for filters on the timeline. Move to frame
160, select the image of the woman on the
stage.
In the Property Inspector change the Blur to X-
0 and Y- 0.

Scale and rotation

8 Lock all the layers, insert a new layer inside the Cars folder. Double
click to rename it left_car. Put a new keyframe at 75.
Drag carLeft from the library to the stage and select the Free
Transform tool. Hold shift to constrain the
proportions and reduce to about 400px width.
You can also use the Transform panel (cmd t) to
set the scale to 29%. Move the car to X- 710 and Y-
490. Put the Alpha value to 0%

Ctrl click to add Create Motion Tween to the left_car layer. Move to frame 100 select the instance
on the stage and change the Alpha value to 100%. A new keyframe is automatically added.

[email protected]
 Using the Property Inspector increase the size to width 1380
height 468 and position X- 607 and Y- 545

The tween changes the position and the transparency.

Drag the layer inbetween the Middle_car and Right_car layers turn
on the eye to view them and press Enter to play. Save your file.

You can save tweens to apply them again. If you needed to add the
same motion tween a few times it is useful to save it as a preset.
Open Window > Motion Preset. Select the first frame of a tween in the
timeline or instance and click Save selection as preset button.

Name it to save it to the list. To apply it to an instance select on the

stage, choose a preset and click apply.

Using the Motion Editor

This can be used to edit and

manage all the properties of a
motion tween. It can be opened
frem a tab behind the timeline or
Window > Motion Editor.

The lines and curves on the right show how the properties change.
To see all your frames click and drag on the viewable frames icon at the bottom of the panel.

Click and drag on the Graph Size icon to change the vertical height.
Do the same for Expanded Graph size to change the vertical height of
each selected property. Open one of the properties to see how this is
altered (click on x under basic motion).

1 Open the alien.fla from the session_1 folder, select the alien on the stage. Open the Motion
Editor panel and increase the height of it so you can see it better. Close all the properties that
are open clicking on the triangles. Drag the Viewable Frames to maximum to see them all and
increase the veritcal height using the Graph Size icon.

2 Click the Plus icon in the Color Effect property and choose Alpha.
The black dotted line shows the opacity of the alien for the duration
of the motion tween. Select the black square at the start, this is the
first keyframe, drag it down to 0%. You can also input the value next
to Alpha amount %.

3 Move the playhead to frame 20 press the diamond icon to add a keyframe or ctrl click on the
graph and Insert Keyframe. Drag the keyframe up to
100%. Ctrl click to remove keyframes or use the minus
button to remove the Alpha property.

[email protected]
Easing
This can add faster or slower momentum to a tween. An ease in on the graph would be curved
near the start indicating a slower start. The opposite would be for an ease out effect.

4 Ctrl click the second keyframe in the Alpha property, choose

Smooth point. The Alpha eases out before it reaches 100%
opacity.

note. You can also add ese in the Propert Inspector. This applies
it to all properties for the entire motion tween. Using the Motion
Editor you have more control over setting ease for individual
properties. between keyframes.

5 Delete the layer jsut created from your movie. In the Library double click the carLeft symbol.
Flash open the editing mode for the Movie clip symbol. There are two layers, lock the top light
layer. Ctrl click on the car on the stage, choose Create Motion Tween to be able to animate the
instance.

Move the playhead to the end of the timeline. Move the car down 5 pixles.

Open the Motion Editor, click on the Plus button on the Ease property to select
Random.

Input 15 for the Random number, the graan line shows the random increases in
value.

In the Basic Motion change the Ease dropdown from

No Ease to Random.

This randomly changes the position of the car. Save

and preview the movie.