Web Gallery Using Flash

Title: Web Gallery Using Flash

By: Ali Akbary
 Chapter 7 Types of Animation
Learning Outcome

Objectives of this chapter are: -

➢ Document setting
➢ Animation types
❖ Frame-by-frame animation
❖ Shape tween Animation
❖ Classic tween animation

CREATING NEW PROJECT

The first step with any project using Animate is to create a new document. So, we want
our project to be HD. The HD size is 1280 X 720.
All right the document's now set up. It's again, a 1280 by 720 HD file at 30 frames per
second.
So, let's choose file and save. Let's go ahead and name this one animation.FLA,
because this is going to be an animation of our own creation. Whereas starter used pre-
made assets. Make sure you choose FLA for your document type and hit save.

Figure 1 Creating new FLA document

Go to view – Snapping – edit snapping – tick all.
Creating Sky, sun and ground
➢ With our project document created and saved, will now begin exploring some of
the drawing tools and animate, to create some representative shapes for the
beginnings of a landscape design.
➢ The first thing we'll do is create the sky. Let's go ahead and rename layer one to
Sky, just double click on the layer name and type in sky.
➢ We're going to use the rectangle tool to create our sky, so choose the rectangle
tool. And then inside of the properties panel, you'll notice where we've seen
document properties and object properties before, we now have access to tool
properties for the rectangle tool.
➢ This option right here allows us to create a drawing object and that doesn't
matter so much in this case, but later on for different shapes it may, creating
something as a drawing object encapsulated in a container so it's not destructive
against other shaped data.
➢ I'm going to turn it on, we can now choose our fill and stroke colors. So, I'm
going to choose my fill and I already have a color I want to use, 0066CC, that's
going to be this nice, rich blue sky.
➢ For a stroke, I don't actually want a stroke at all so, if you don't want fill or
stroke, you can always choose this little swatch here, it's a white square with a
red slash through it. And that's going to disable that stroke. So as soon as I
choose that, all of my stroke options get disabled as well. With that done, let's
go ahead and draw out our sky, it's going to be a rectangle the same size as the
stage.
➢ So, starting in the upper left, we can click and drag. And it's not exactly the
same size, so I was off a little bit. However, I can always select this object, and
we were 1280 for our stage, so let's pop in 1280 for width, and for height is
going to be 720. We were just a little bit off. For X&Y right now, that's a value of
10. So, X is the amount of space from the side, let's change that to “0” and Y is
the amount of space from the top, which we also want to be “0”. With those
changes made, we have a rectangle the exact size of the stage to represent our
sky.
➢ Let’s create sun. So, we want to choose the oval tool, because we want to draw
out a Sun shape. Let's go ahead and insert a new layer and rename this, Sun.
➢ With that done, we can go over to our tool properties once again, and let's
change our fill. So, the fill color I want to use this time is FFCC66, that's this nice
golden yellow color right here.
➢ And we want the Sun to be about 270 by 270. So, we want it to be a complete
circle. Now if I just click and drag with the oval tool, it's going to create an oval
for us.
➢ However, if I hold down the shift key when I drag, it will constrain everything
one to one, and I'll get a nice disc, perfect circle. Let's make sure that I've
created this the correct size, and it could be a little bigger.
➢ Now I could change both the width and the height to 270 which is what I'm
shooting for here or I can click this little lock button, this is going to lock both
the width and the height. And then if I enter 270 for one, that change will be
reflected on the other as well.

Figure 2 creating 3 layers

➢ Let's lock down the sun layer and insert our final layer which is going to be our
ground. So, rename this to ground, there we go and once again, long press on
the rectangle tool, to select the rectangle. Here we'll just draw a little bit of
ground here in front of the sun.
➢ So, what we're going to do is, change our fill color in our tool properties once
again. This time, I'm going to actually choose this dark gray color here, so,
333333, and then just starting down from the bottom, click and drag until I have
a nice ground plane to work with.
➢ I want the height of this to be about 180 so let's select and have a look, so
almost there. I'm going to change that height to 180, and let's change the Y
position to 540.
➢ However, you can see it spilling over there, we could always also use our align
panel and just align to the bottom of the stage and that's going to do the same
thing for us.
➢ So, there are always a number of different ways of achieving the same results in
animate. All right, let's lock that down too and there we go. It doesn't really look
 like much yet, but some adjustments to our chosen colors are going to go a long
way into adding additional aspects to this project.
Managing colors
➢ While managing color in Animate may seem a fairly straightforward at first
glance, there are some things to know which can help with color workflows,
which may not be so obvious. We'll now improve the look of our drawn assets
using some of these color management tools.
➢ So, the first thing I want to do, is add some linear gradients to some of these
aspects, like the sky and the ground.
➢ So, let's go ahead and choose the sky first. I'll unlock that Sky layer, and then
with the Selection tool, click on the sky. In our stack of panels, over to the edge
of the UI here, we find the Color panel.
➢ Let's open that up and notice that we have this blue color as a solid color right
now. I'm going to go ahead and copy this hex color that we presently have using
Control or command C. And instead of a solid color, we want to choose a linear
gradient for our sky. Notice immediately, it's gone and made a linear gradient
that goes from black to white.
➢ What I want to do, is change black and white to different shades of blue. So, to
do this, I'm going to select that black right there and then just pop in that color
that I saved from our original solid color. 0066CC. And there we go. We've got
our blue back.
➢ However, we need to change our white as well. So, let's double click on that
white and instead of the same color, we of course need to change it a little bit.
So, I'm going to use 002E5C to make a darker blue. There we are, a nice rich
gradient sky result.
➢ Now let's go ahead and actually add this to our Swatches. You can see right
below here, add selected color to Swatches. What this is going to do, is make
this color available in our Swatches panel. And if we go to the swatches panel,
we can see our default swatches here. And down below, I have the special
swatches including the one that we just created.
➢ Let's make some adjustments to our ground layer as well. So, I'm going to
unlock the ground layer and select the object on the stage that represents our
ground. This is a drawing object, and from here, I'm going to go into my color
panel once again and instead of solid color, once again, going to choose linear
gradient, and I don't want it to be the same as the sky, let's go ahead and
double click on that little key right there and use 333333. And then for this one, I
want it to be black. So, that's going to be all 000000. Or you can just pick a black
swatch. Let's add this to our swatches as well.
➢ All right, at this point, we have our colors defined, however, it doesn't look all
that great. These shouldn't be going side by side; the sky doesn't work that way.
 It goes up and down, right? So, let's go ahead and go out, maybe 50%, and click
on the sky.

Figure 3 Adjusting gradian color of sky and ground

➢ And if we look over on the side here, this is the free transform tool, however, we
want something that's nested within here. So long press on that tool, and you'll
find the gradient transform tool. With this tool selected, and let's pop out at
maybe 30%. So, we have a lot of room to work. What we're going to do is rotate
and resize our gradient sky. You can also reposition the gradient. So maybe I'll
have it, something like this, where it's darker towards the bottom, lighter
towards the top. We're going to do a similar thing with our ground plane right
here, except we're going to have that start lighter at the bottom and be darker
towards the top. So again, we're going to rotate that, and then resize it. Let's fit
in window, see how that looks. Alright. Even simple color adjustments like this go
far in imparting a certain style to our scene.
Drawing with pen tools
➢ The pen tool is available in some form within just about every Adobe design
application. Animate is no exception to this. Let's use the pen tool to draw out a
ragged chain of mountains across the horizon.
➢ Now I want the mountains to be behind our ground layer. So, let's add a new
layer right above the sun layer and we'll name it mountains.
➢ Select the pen tool and use it to draw out the mountains. So, you don't have to
be really good with the pen tool to do this. However, the way this works is you
just click to create an initial point and then the next place you click is going to
 create a line. Then so on and so forth, you'll just create the little jagged lines
here and there to build out some mountains for your horizon. We'll make some
that are small hills here, gradually climbing back into a mountainous perspective.
➢ So, what we're going to have to do is close this path, so make sure to continue
going along behind the ground here. And then finally, towards the end, notice
our initial point that we created. If we hover over that with the pen tool, it shows
us a close circle. This indicates that we're going to close our path if we click on
that, which is exactly what we want to do.
➢ There we go, we have a closed path for our mountain range. Now, the next
thing we want to do is fill in the mountain range because right now it's just a
simple stroke and we can see right through the mountains, which doesn't make a
lot of sense. So, let's locate the paint bucket tool, which is right here. The paint
bucket tool allows us to fill in a closed path with a particular color. So, I want it
to fill this in as black. I'm going to choose black from my tool properties and click
anywhere within this closed path in order to fill it.

Figure 4 Adding Mountain

Adding detail to our landscape Using Paint brush tools
We'll now add some details to our landscape using the various paint brush tools
available in Animate. I'll paint in some small stones along the ground and a little pond
as well to provide more detail and life to our scene.
➢ So, let's go ahead and lock down all the existing layers. And at the top of our
layer stack, we'll add a new layer and rename that to "Detail."
 ➢ we just start drawing something out. We can draw stones, lake and some
shimmer for animation and shown below.
➢ We can start animate shimmer for this we need to add frame. Our animation will
be 6” (six seconds) we move on timeline to find 6” marks and click and drag all
layer to selected. Click either F5 or right click and choose insert frame.

Figure 5 Drawing detail, shimmer and adding frame

What is Frame?
Inserting Frame means copy the previous frame. Frames are at the core of any
animation, dictating each segment of time and movement. The total number of frames
in your movie, and the speed at which they're played back, together determine your
movie's overall length.
A keyframe and the span of regular frames that follow it are known as a keyframe
sequence. The timeline can contain any number of keyframe sequences. If the
keyframe in a sequence contains graphical content that is visible on the stage, the
regular frames that follow it will appear gray. If the keyframe in a sequence contains no
graphical content, the regular frames that follow it appear white.
 Figure 6 Frame Span
Frames per second
The frame rate (the speed at which the animation in Adobe Animate is played is
measured by the number of frames per second (FPS). A frame rate that is too slow,
makes the animation appear to stutter (stop and start), while a frame rate that is too
fast blurs the details of the animation. A frame rate of 24 fps is the default setting for
new Animate documents and usually gives the best results on the web. (The standard
rate for motion pictures is also 24 fps.)
The complexity of the animation and the speed of the computer playing the animation
affect the playback's smoothness. To determine optimum frame rates, test your
animations on a variety of computers with different processing capabilities. Because you
specify only one frame rate for the entire Animate document, be sure to set the desired
frame rate before creating your animations. The frame rate essentially determines the
rate at which the playhead moves across the Timeline.
 Figure 7 Frame Per Second (FPS)
About frame rates
➢ The frame rate, the speed the animation is played at, is measured in number of
frames per second (fps). A frame rate that’s too slow, makes the animation
appear to stop and start; a frame rate that’s too fast blurs the details of the
animation. A frame rate of 24 fps is the default for new Animate documents and
usually gives the best results on the web. The standard motion-picture rate is
also 24 fps.
➢ The complexity of the animation and the speed of the computer playing the
animation affect the smoothness of the playback. To determine optimum frame
rates, test your animations on a variety of computers.
➢ Because you specify only one frame rate for the entire Animate document, set
this rate before you begin creating animation.
Keyframes
➢ Like films, Adobe Animate documents divide lengths of time into frames. In the
Timeline, you work with these frames to organize and control the content of your
document. You place frames in the Timeline in the order you want the objects in
the frames to appear in your finished content.
 ➢ A keyframe is a frame in Adobe Animate where a new symbol instance appears
in the Timeline. A keyframe can also be a frame that includes ActionScript code
to control some aspect of your document.
➢ You can also add a blank keyframe to the Timeline as a placeholder for symbols
you plan to add later or to explicitly leave the frame blank. A black dot in the
Timeline indicates a single keyframe. Light gray frames after a single keyframe
contain the same content with no changes.
➢ These frames have a vertical black line and a hollow rectangle at the last frame
of the span. A black dot at the beginning keyframe with a black arrow and blue
background indicates a classic tween.
➢ Do not confuse keyframes with property keyframes; the Timeline icon for a
property keyframe is a solid diamond, whereas a standard keyframe icon is an
empty or filled circle.

Figure 8 properties Keyframes

Frame-by-frame animation
This animation technique lets you specify different art for each frame in the Timeline.
Use this technique to create an effect that is like the frames of a film being played in
rapid succession. This technique is useful for complex animation where the graphic
elements of each frame must be different.
Now we can do the frame-by-frame animation to our project for Shimmer: -
➢ For any animation, we need to have more than one frame. As we already added
frames previously until 6”.
➢ For animating shimmer, we zoom-in a bit, let's go to 200%, because I do want
to focus on this lake, and the little ripples within it. What we're going to be using
 here is frame-by-frame animation, which means we'll insert keyframes, which are
going to contain visual information, that changes the properties of the different
elements, in this layer across time with each new keyframe, when we play that
back, it's going to give the illusion of animation.
➢ If you want to move around the stage area, just press space bar, the mouse
pointer will change to hands tool. And you can click and more around. Do this
until you get focus on late.
➢ We are going to want to insert keyframes, let's move our playhead to 5 second
mark, and we want to insert a new keyframe. We do this by right click on frame
and choose insert keyframe or just press shortcut “F6”. On this new keyframe,
we can use our selection tool, to simply select portions of our content, and just
shift them a little bit, we don't want to make it too abrupt, because we're trying
to create an illusion here.
➢ Now if we take the playhead and go back and forth, between these two frames,
we can see they just shift a little bit those ripples. Let's go over again for it, we
to frame seven or so. We can always insert new keyframes and change the
location or change other properties of the shape. This will create illusion of
animation.
➢ After we did few keyframes and changed their properties. This is the basics of
animation using the frame-by-frame technique.
➢ This process is going to be the same, so, now what we're going to do here, is
actually copy and paste this region of keyframes, because we want it to repeat
over and over again.
➢ So, let's go ahead and select all these different Frames, select all those Frames,
and if we right-click on that Frame selection, we can choose to copy these
frames.
 Figure 9 Frame-by-frame animation of shimmer
➢ Now moving our playhead to any of these other frames, is going to allow us to
insert and overwrite, the Frames that we copied, so we can copy and paste this
data wherever we want, so I'm going to right-click, and here I'm going to choose
to Paste and Overwrite Frames.
➢ If we simply choose Paste Frames, it's going to take our frame span past that
six-second mark, that we initially defined. So, we just want to click right-click,
Paste and Overwrite, click right-click, Paste and Overwrite, and just keep doing
this until we fill up the entire number of frames that we have.
➢ If we want to loop this whole thing, to see how it looks, there we go. Frame-by-
frame animation can be very precise and detailed, but it's also, as mentioned,
very tedious. We'll next look at additional animation options for our project.
Shape tweens Animation
In shape tweening, you draw a shape at one specific frame in the Timeline, and change
that shape or draw another shape at another specific frame. Animate then interpolates
the intermediate shapes for the frames in between, creating the animation of one shape
morphing into another.
Now we can apply shape tweens to sun in our project: -
➢ We want the sun to move slowly behind the mountains and eventually disappear.
This would take a lot of effort using frame by frame animation, and also wouldn't
be very smooth. We will leverage one of the many twinning mechanisms within
anime to accomplish this in a more efficient way.
➢ We will go ahead and unlock the sun layer. We want the sun disappear at 4”
marks, we move our playhead to 4”. Press F6 to insert keyframe and select sun
in the stage and move to down.
➢ And also, we want to animate the sun’s color. When the sunset occurs, the sun
changes the color from yellow to red. While we are in 4” we open the color for
the shape and change from yellow to reddish.
➢ And also, we want to change the scale, from 270 to 290. While we are in 4”, we
change the size in the property panel to 290.
➢ After all changes done, right click between two keyframes in sun layer and
choose create shape tween. The term tween means is that kind of filling in
automatically all the different frames that are between two existing key frames.
➢ Now you can move playhead forward and backward to see the animation we
created.
➢ However, if you notice it's very linear right now it moves from its initial point to
its resting point using the same exact timing, where when the sun actually
moves, if you ever watch it does kind of speed up towards the end of its setting
as it approaches the horizon.
➢ When the sun is setting, it goes by pretty fast. So, let's change that and make
the motion more organic. To change any tween settings, you simply select any of
the frames that make up that tween and change tween properties in the
property panel.
➢ We move playhead to 2” and click on effect in tweening property in the property
panel. Select ease in and choose “Cubic”. Now, move playhead to 3” and click on
frame and go to tweening property in the property panel, change ease in and
select Quad.
 Figure 10 Shape tween animation of sun
Easing
Easing is a technique for modifying the way that Adobe Animate calculates the property
values in between property keyframes in a tween. Without easing set, Animate moves
tweened objects at the same speed on each frame of the animation. With easing, you
can adjust the speed of tweened objects to make movements appear more natural and
to create complex animations. An ease is a mathematical curve that is applied to the
property values of a tween.
The final effect of the tween is the result of the combination of the range of property
values in the tween and the ease curve that makes the tweened objects start slow and
speed up, start fast and slow down, or some combination of these effects.
For example, if you animate a picture of a car across the Stage, the motion is more
realistic if the car starts slowly from a stopped position and gradually gains speed as the
acceleration builds momentum. Eases applied in the Property inspector affect all of the
properties that are included in a tween. Eases applied in the Motion Editor can affect a
single property, a group of properties, or all of the properties of a tween.
 Figure 11 Linear, Ease in, and Ease out
Mask layer
Mask layers contain objects used as masks to hide selected portions of layers below
them. Only the portion of the mask layer not covered by the mask is visible.
Now we are going to implement mask layer in or project: -
➢ Click on sky layer and click to insert new layer above the sky layer. Rename it
star.
➢ While all other layers are locked, and star layer selected, we choose bush tools
and choose white color, change the size to appropriate size and add some stars
on the sky. Even we can add stars behind the sun.
➢ Now, we click new layer above the star layer, rename it starmask layer. While
the layer is selected, select rectangle tools from tools panel, choose color (Mask
can be any color), and draw a rectangle on the stage the size (1280 X 1), the
position (X=0, Y = 0).
➢ We are going to animate such a way that the mask grow as animation goes on
until covers whole stage area.
➢ We move to about 3” in the starmask layer and click on frame and insert a
keyframe by pressing either F6 or right click and insert keyframe, we want start
to be visible from this point onward.
➢ Now move to 5” marks and click on frame and insert another keyframe.
 ➢ Click between two keyframe and choose shape tween.
➢ Click middle of the two keyframes and insert ease in cubic too.
➢ The final step is, right click on starmask layer and choose mask.

Figure 12 Mask layer

➢ Our shapes are complete and now we can group them into one folder for
convenient works on layer panel. Click new folder and rename it beginning and
move all item into that folder.
Classic tweens Animation
Classic tweens are like motion tweens, but are more complex to create. Classic tweens
allow for some specific animated effects not possible with span-based tweens.
Inverse Kinematics poses (deprecated with Animate)
Inverse kinematic poses allow you to stretch and bend shape objects and link groups of
symbol instances to make them move together in naturalistic ways. Once you have
added bones to a shape or a group of symbols, you can change the position of the
bones or symbols in different keyframes. Animate interpolates the positions in the in-
between frames.
Now we are going to implement classic tween in our project: -
➢ Click on the top layer and click new layer and rename it message. Move playhead
into 10” mark. Drag and select all layers and press F5 or right click and choose
insert frame. So, our animation extends from 6” to 10”.
➢ While message layer is selected, move playhead to 5” marks and right click on
frame and insert keyframe.
➢ While 5” marks selected, select Type tools from tools panel, choose color, size,
and the font from property panel and click on stage and type “Nighttime
thoughts”. Adjust the text the location you want.
➢ Text can not be animated by itself; we need to convert them into symbols. While
text is selected right click and choose convert to symbol or press shortcut “F8”.
Name it “Messagetext”, for type choose Graphic, and registration choose center
and click ok.

Figure 13 Converting text into symbol

➢ Move the palyhead into 6”, 7”, 9” and insert keyframe.
➢ While our playhead on 5” mark, select text on stage, go to property panel and
change the color effect – Alpha – change to “0”.
➢ Now move to 6” mark, and change Alpha to “100”.
➢ Right click between 5” and 6” and choose classic tween.
➢ Move to 7” and select text on stage and change color effect to Alpha and “100”.
➢ Move to 9” mark and select text on stage and change color effect to Alpha and
change to “0”.
➢ Now right click in between 7” and 9” and choose classic tween to insert tween in
between.
➢ As we learn previously, we can add ease in or ease out into our text.
 Figure 14 classic tween
Designing nested animation
➢ Double click on Messagetext on stage to open in symbol timeline.

Figure 15 Using Asset Wrap Tool

➢ Now in order to do this we need to convert them into shape. For this go to
Modify – Break Apart or click shortcut “Ctrl + B”. now text is break Apart but still
text. We need to do this one more time to convert them into shape.
➢ Go to object property and select create object.
➢ Select Asset Warp Tool from tool panel. Click some parts of the object on the
stage.
➢ Go to 1” mark in the timeline and insert keyframe. And insert another keyframe
on 3” mark.
➢ Go to 1st frame and just click and nudge the pins we inserted with Asset Warp
tool.
➢ Now move to 3” mark and do the nudge again.
➢ Click and select both side of the frames and right click and choose classic tween.
➢ We can add ease in or ease out to make our animation smoothly.