Dana Vrajitoru
I310 Multimedia Arts and Technology
I310 Lab 10
Date: Tuesday, November 8, 2016. Due date: Tuesday,
November 15, 2016.
Ex. 1. In this exercise we will create a key-frame animation
where the shape of objects is interpolated.
Open Flash CS6 and create a new ActionScript 3.0 project (first option
at the top). Save it as bird.fla.
Bird
Change the workspace type to Animator (top right corner of the
window, like for Illustrator).
The Stage is the area where your movie is going
to be drawn, shown as a big white rectangle in the middle of the
window.
Click on the Stage and in the properties panel (top
right) you'll see a property marked with a white rectangle with the
label Stage. Click on it to change the background color for
the stage to light blue.
Here is a snapshot of what we'll try to achieve in the
first frame:
Insert a new layer: from the Timeline are, below the
list of layers, there is a button to create a new layer.
We will use this layer to create a reference that we can
use to draw the bird.
Using the Brush tool in the drawing toolbar above the
stage, mark a point somewhere in the center with a little smudge. Then
using the Line tool, draw two vertical lines on the two sides
of the center mark, approximately equally distanced and close to the
border of the image.
The center point will be the center of the bird, and the
two vertical lines will mark the end of the wings. This way, the wings
movement will follow the vertical lines.
Assuming that the new layer is called Layer 2, go back
to Layer 1. Switch to the Brush tool. Draw the
outline of a flying bird with the wings pointing down using - like two
parenthesis upside-down (see image above). Use the marks in Layer
2 to start the center of the bird in the center you marked and to
make the wings span left and right towards the two vertical lines that
you've drawn.
We have the first key-frame. Let's create the second
one.
Go to frame 30 in the timeline, right-click under it on the first
layer, and do Insert Blank Keyframe. Draw a bird
approximately of the same size but with the wings now pointing up -
like a rotated '}'.
Use the reference layer to start the wings approximately
at the same point in the center and the wings span towards the same
vertical lines. If you cannot see it, right-click on it in the first
frame, do Copy Frames, then right-click in the place in Frame
30, and do Paste Frames
Here is an example of what this frame might look like
when we're done:
Right-click on frame 1 in Layer 1 and do Copy
Frames. Then click on 60 , right-click on Layer 1, and
paste the frame. Once you are done with the 3 key frames, delete the
reference layer (Layer 2).
We have the key-frames for the bird, let's create the
intermediate ones.
Right-click in the timeline somewhere in between the first frame
and the 30th one and do Create Shape Tween. Repeat the
operation for the frames 30 to 60. Click on the Play button
below the Timeline to test the movie.
Sun
Add a new layer to the stage.
For this, you can use the New Layer button
under the list of layers to the left of the timeline. Using
the Oval tool (option for the Rectangle), create a
sun either on the right hand side or on the left. Change the color of
the sun to a shade of yellow. Select the whole sun object and copy
it.
We're going to create two more frames containing the sun
in a different position and color.
Go to frame number 30 and right-click in this new layer. Insert a
blank keyframe, then paste the sun object into it. Move it somewhere
toward the center of the scene, slightly below its original vertical
position. Then change its color to a shade of orange.
You can also copy the frame to position 30 and then move
the sun object.
Repeat the operation to create another copy of the sun object in
the last frame, place it on the opposite side of the window from where
it started, even further down vertically, and change its color to a
shade of red.
The change in color of the sun is because we're creating
a sunset.
Right-click in between the frame in the second layer and create a
shape tween for each segment. Test
the movie to see the effect.
Alternatively, simply creating the frame 60 and
interpolating in between would also have had the same effect.
If the sun appears to be on top of the bird, grab the layer
containing the sun (2 or 3) in the list of layers and move it
down.
Cloud
Add a new layer and click on it to make it active. Move it
between the first two layers if it's not there already.
The sun layer should be at the bottom, the cloud on top
of it, and the bird at the top. This decides order in which the
objects are drawn to the screen.
Switch to the Brush tool and change the stroke and fill
colors to white. Using the Brush tool, create an vague white
fluffy shape.
It doesn't matter much what it looks like as long as
it's a closed shape.
Switch to the Paint Bucket tool in the drawing toolbar
and click inside the cloud to fill it with the same color
uniformly. Move the cloud to the bottom of the window and on the opposite
side of the sun.
You can use the Eraser to smooth out any
outstanding bits.
Insert a blank keyframe at the point 30 in the timeline. Repeat
the operation to create a cloud of a slightly different shape in the
middle of the stage, still in the lower half (see image linked
above). Then repeat it again to create another cloud in the frame 60
on the other side of the stage from where you started.
You must finish any edits to the cloud shapes before
creating the animation.
Right-click in the timeline on the third layer to create the shape
tweens for the two sets of frames. Test the movie to see the
effect. Here is an example of the final result form this
lab:
bird.swf.
We are not simply copying the cloud so that its shape
itself can change during the animation.
Save your file and test it.
Flash saves the project with the extension .fla
and creates movie files that can be played in a browser or in a
stand-alone Flash Player with the extension .swf. Normally as
soon as you test a project, this file is created. You will need to
upload the two files for the homework: the .fla and the .swf.
Ex. 2 In this exercise we will create another key-frame
animation.
Create a new project of the same type and save it under the name
cube.fla.
We will try to create a 3D-like animation of a
cube. Here is an example of the result.
Set the stage color to whatever you want. Set the color of the
Stroke to something contrasting with it. Set the color of the Fill to
None (a small white square with a red stroke over it). Using the
Rectangle tool, create a square in the middle of the
stage.
Holding the Shift while you create the rectangle should
create a perfect square.
Using the selection tool, select the entire rectangle, then from
the Modify menu, choose Convert to Symbol. You can
give it a class name such as SquareFace.
Certain types of animations work better with objects
converted to symbols.
Add a new layer (Layer 2). In this layer add 3 lines to
create the top face of the cube as we look at it in perspective. For
this, start the first line from the top left corner of the square
going up and to the right at some angle. Then with the selection tool,
select the line, copy it, and paste it, then move the pasted line to
start from the top right corner of the square. Then add a horizontal
line to complete the face.
Flash has a snap to grid or to existing points feature
that should help creating a perfect cube. Here is an example of the
result:
Switch back to Layer 1 (important), then select the
square object and copy it with Ctrl-c. Go to frame 30 and
insert a new blank keyframe. Paste the square into it, then align it
so that the top edge matches the top line in Layer 2 (the top
face).
If you can't see the top face of the cube, copy the
frame from Layer 2, frame 1, into frame 30.
Then right-click between these frames in Layer 1 and do
Create Classic Tweening. Play the clip now. The square should
be moving smoothly between its first position and the second one,
while the lines in Layer 2 should not be moving.
The Classic Tween animation requires the object
to be converted to a symbol first.
If you haven't done this, right-click on the first frame in Layer
2 and choose Copy Frames. Then right-click on frame 29 in Layer 2 (to
the left of 30) and choose Paste Frames.
This should create a key frame from the one you have
copied. You should see the top line of the top face just a little
above the top edge of the square in this one.
Change the zoom to 400 or 800. From the toolbar click on the Free
Transformation tool. Move the bottom points of the two parallel lines
in Layer 2 over the corresponding top corners of the cube, so that the
whole thing looks like a solid surface. Then you can move the zoom
back to 100. Right-click on the timeline between the frames 1 and 29
in Layer 2 and create a shape tween. Play the movie now.
It should look like the top face is disappearing
smoothly.
Create a third layer. Using a similar technique, create a face of
the cube on the right and also make it disappear through
tweening.
When applying the Free Transformation Tool, make sure
that only one line at a time is selected.
If you have time in class, or on your own at home if not, create
bottom and left faces that appear instead of disappearing. You will
need 3 more layers for these 3 animations.
Alternatively, you can create a hexagon for the outer
border of the whole object that is fixed through the entire animation,
and only animate the two diagonal lines that change during the
animation.
Upload to Canvas: The two files in .fla format and the two
files in .swf format and 2 more files for the homework (6 total).