2. Tutorial 1 – MOTION TWEEN
The animation I wanted to design was an animation on Terminal Velocity.
My idea for the animation required motion and movement a lot of the time,
so I thought preparing and practising using a motion tween would be helpful.
A ‘Motion Tween’is a the creation of a series of frames showing the gradual
movement or change in the scene and then moving through these frames
quickly to create the illusion of movement. In Flash, the frames created flow
together smoothly, making animating sliding movements of objects more
effective.
The website tutorial I used was:
http://www.republicofcode.com/tutorials/flash/motion_tweening/
3. Process of Motion Tween Tutorial
Firstly, I made a shape: a circle, and converted it into
a ‘symbol' in order to start using it effectively in Flash
to create an animation.
Then, I clicked further along the ‘Timeline' to frame
20. I right-clicked and chose the button ‘Insert
Keyframe’.
Next, whilst still based on Frame 20, I moved my shape to
another spot on the ‘stage’(as it is called).
After, right in the middle of the blue highlighted Timeline, I
right-clicked and selected the button ‘Create Classic
Tween’.
As a result, my shape should move smoothly from its
first position as shown above to the next position which
is near the right corner as shown in the picture on the
right.
4. Process of Motion Tween Tutorial (Continued)
Additionally, by following the same
process as mentioned in the previous
slide involving inserting a key frame on a
later frame, such as frame 45, and
moving the shape, I also tried to change
it up by making the circle turn into
another shape.
I did this by following the previous steps,
up to the point where I moved the circle
to the top of the stage. I then deleted the
circle, and used the shape tool to draw a
rectangle. Then, within the highlighted
blue timeline, I right-clicked and pressed
the ‘Create Class Tween’ button.
5. Tutorial 2 – SHAPE TWEEN
Besides having motion tweens, I thought that I could use ‘Shape Tweens’ in
my animation. This was because Shape Tweens usually create morphing
animations, and I thought by using a shape tween on text or pictures might
give a funky, creative twist to the animation.
The tutorial I used to practise this tween was:
http://www.republicofcode.com/tutorials/flash/morphing_bc/
6. Process of Shape Tween Tutorial
Firstly, I used the idea of
making a banner advert to
work with when using this
tutorial. I started with the
drawing of an apple and text.
Then, on the layer of the text, I went to the ‘Modify’ tab and
clicked ‘Break Apart’. This first separated the text into separate
text boxes. I then did this for a second time, and this showed
the text to be in one single text box, meaning I was able to use
the shape tween effect.
7. Process of Shape Tween Tutorial
(Continued)
Next, I selected frame 25 and inserted a ‘key-frame’. I then moved the text box to the
right-side of the stage, but I deleted the text box, and typed in another text box.
Then in between the highlighted timeline (from frame 1 to frame 25) I right-clicked and
selected the ‘Create Shape Tween’ effect.
The result of this effect was that the text moved smoothly from one message to the next,
but with swirling morph transition as seen below.
8. ANIMATION
Since my topic was Forces, I thought it would be good to
make an animation based on an aspect of the topic that
would really benefit from visual enhancement. Therefore I
chose to make an animation explaining the process of
‘TERMINAL VELOCITY’
Terminal Velocity is the gradual balance of two opposite
forces acting on a skydiver whilst he/she falls downwards.
My animation also described the slow balance of the two
opposite forces acting on the parachutist after he/she has
opened his/her parachute, and the impact it first has on the
forces when it is opened.
10. ANIMATION PROCESS
First of all, I created 2 layers: 1 with a skydiver in it and one
with the background. To start it off, I made blue stripes . Then,
by using the technique of ‘frame-by-frame’ which involved
inserting key frames, I kept pasting the background of the blue
stripes onto each key frame and with each time I moved it
upwards a little as well as downwards a little so that when the
animation played, it showed the downward movement through
the sky.
After, I used the photo of a skydiver in the beginning of the
animation to be the main focus. I started off by placing the
skydiver above the stage so that it wasn’t seen and did the
same frame-by-frame technique so that each time I moved the
skydiver a little lower until he reached the middle of the
background.
The resulting animation so far showed the skydiver falling
smoothly downward with the help of the idealistic effect of the
background.
11. ANIMATION PROCESS
(Continued)
Next, following the guidelines of my storyboard, I started to
add an arrow to describe the force I wanted to show After, I started to add text which would appear after the
viewers that the skydiver was experiencing. As you can arrow’s gradual appearance. This was done by first making a
see from the circled bit, I again used frame-by-frame new layer and calling it ‘TEXT 1’(as I planned on having more
editing. I started with the arrow being very faded and with text boxes later). Then, I inserted a key frame from frame 50
each consecutive key frame I decreased the opacity to frame 74, with the arrow edit and fade in in between (as
(lowering the ‘Alpha' scale, so that when the animation seen from the red circle).
played, the arrow would appear to be slowly and smoothly I made the text seem to appear gradually by using skills from
appearing rather than just suddenly appearing. This also my MOTION TWEEN tutorial. So, in frame 50, I made the text
flowed well with the swift downwards fall of the skydiver. barely visible by increasing its ‘Alpha’ scale (opacity) then in
frame 74 I lowered the opacity, and right clicked in between to
‘create motion tween’.
12. ANIMATION PROCESS
(Continued)
After, once the text appeared fully, I wanted to add another arrow in another position as well as another text box, so I created two more
layers, one called ‘Accel’to show the arrow (green as shown in the photo above) and ‘TEXT 2’.
For the ‘Accel’layer, I had to do frame-by-frame editing just as I did for the brown arrow as I wanted to again create the gradual fade in
effect. The ‘TEXT 2’layer was done exactly the same as ‘TEXT 1’, so key frame 1 was in frame 50 and the second key frame was in
frame 74, with the arrow frame-by-frame key frames in-between. So what I did to make it easier was copy the frames from the layer of
‘TEXT 1’ and paste it onto the layer of ‘TEXT 2’. Within the ‘TEXT 2’ layer, I again used a motion tween (just like for ‘TEXT 1’) so in
frame 50 it was barely visible as the opacity level (Alpha) was increased and in frame 74 it was lowered, so that in between, I right-
clicked and selected the button ‘Create Classic Tween’ so it created the effect of text appearing gradually.
13. ANIMATION PROCESS
(Continued)
Next, the next arrow needed in the stage was ‘Air
Resistance’which was made by adding yet another
layer ‘Text 3’. The arrow face upwards and started off
small in size. This would later increase in size and this
was shown to have a gradual effect on the skydiver as
the acceleration text‘Text 2’layer) was changing: the
acceleration figure was getting smaller. This was done As you can see on the left
again by frame-by-frame editing, by inserting a number picture, the acceleration
of consecutive key frames, and changing the number shows 0, and the size and
in each one. This is shown in the pictures on the right. proportion of the yellow arrow
showing air resistance is equal
is force with the weight arrow.
14. ANIMATION PROCESS
(Continued)
As shown in the previous slide, once the acceleration was shown to say ‘0m/s2’, and the arrows were both the same length and width,
showing that this process has resulted in both forces (upwards AIR RESISTANCE and downwards WEIGHT) has balanced. The
process’name is TERMINAL VELOCITY. I therefore made this label known after all the arrows had appeared, including the final size
of the Air Resistance arrow and so finally made a new layer called ‘Terminal Vel’where on the last key frame of the appearance of all
the arrows I inserted a text box saying ‘Terminal Velocity’.
Label of the process.
For this text appearance, I chose not to use
the effect of frame-by-frame editing, so it did
not fade in and fade out like the other arrows
as I felt it was the most important part of the
concept, so it had to be made clear, and this
was done by its immediate appearance. A
fade out was unnecessary as the arrows
showed the gradual occurrence of the
changing forces within the process, so I
thought it was more effective when used for
the text and arrows than on the label.
Frame-by-frame editing
key frames for the text
layers
On ‘Terminal Vel’layer, text is written and appears one key frame after all the
other key frames on the separate text layers have appeared. The point of this is
to allow this label to be seen with the other text and arrows at the same time, so
the whole process is showed clearly.
15. ANIMATION PROCESS
(Continued)
For the skydiver, since I did frame-by-frame
editing to make it seem as if he was falling
gradually, I decided to use the same
method but to move him upwards a little in
each key frame, so when the animation
After the appearance of all 3 texts and their arrows, I wanted played it seemed as if he was still falling,
a smooth fade out of them all. Therefore, for the text layers but he was no longer seen in the stage.
(‘TEXT 1’, ‘TEXT 2’and ‘TEXT 3’) I relied on motion tweening
them, but this time I did the opposite by allowing them to be
fully visible in one key frame then lowering their opacity in
the next key frame, and in between right-clicking and
creating a motion tween.
16. ANIMATION PROCESS
(Continued)
This allowed for me to move onto the next part of my animation as seen below,
when the skydiver initially opens his parachute.
After, I kept the background, and since at the beginning frame-by-frame editing
was used to move the blue stripes a little to enhance the visual impact
resembling the skydiver falling downwards, I double-clicked on the background
later: ‘Sky’so that it took me to its own movie timeline. Here, I inputted key frame
required for the frame-by-frame editing, but in between each key frame I
inserted a frame. This decreased the speed of the background passing the
skydiver, which was essential in visually delivering the idea that once the
parachute opens, the speed at which the parachutist falls slows down. Also, I
added the image of the parachutist falling by using frame-by-frame editing by
moving him lower in the stage with each key frame, as seen in the circled area
to the left.
Once I was happy with the position of the parachutist in the
stage, I decided to copy the frames used before of all 3 text
layers and arrow layers that were used before when they were
first fading in. I inserted a frame right after the ‘Parachute’layer
and inserted the copied layers in between there. This enabled
me to use the same effects of fading in as I did in previous
frames, saving me time and effort, and these effects occurred
right after the parachutist was set in the right position. However,
I then decided that I did not need to use the ‘Accel’layer along
with its text, I simply deleted it, so that the main idea was
presented using just the two arrows: ‘Air Resist’and ‘Gravity’as
well as their texts: ‘TEXT 1’and ‘TEXT 2’.
17. ANIMATION PROCESS
(Continued)
After deleting the later ‘TEXT 3’which showed the green arrow for acceleration and its text, I copied the ‘Terminal Vel’layer,
deleted the original frames, put in a key frame after the frame-by-frame appearance of the other text and arrow layers,
and changed the text. The text had previously said ‘Terminal Velocity’, acting as a label for the process, but this time I
changed it to ‘New slower Terminal Velocity’to show the difference after the progression of the animation and the forces
acting on the parachutist. By using the same layer as before, I was able to use the same effects, so the label layer would
not fade in and fade out, but appear immediately.
This was the end of my animation, as it showed the overall conclusion of the process if this event were to occur in real life
(e.g. skydiving then opening the parachute: the real forces that would act upon your body).
18. CONCLUSION & EVALUATION
By spending time practising using the program Adobe Flash, I feel I gained
valuable experience and learned many new skills such as the use and
effect of tools, and the importance of separating symbols and text into
layers
By following website tutorials, I think it helped me get started, but soon, I
started to get the hang of it and was able to develop and use tricks of my
own.
Additionally, the tutorials I used were key and extremely useful elements of
my animation, so I think practising them really helped.
My animation is now available on my revision website:
www.physicsforfanatics.weebly.com