Text and Graphics in
Assignment: Create a simple flash movie using
motion and shape tweening, simple buttons,
and sound. Publish this flash site and place
a link to it on your Portfolio website. (40 points)
Due Monday, April 17, after 5:00 p.m.
1.Students' Favorite Flash websites
the Mars Rover
2. For creating a simple Flash banner ad, use
this file and its enclosed Flash library: sewflash2.fla
3. See sewflash2.html
3. Creating and Using Scenes in Flash
You can break up Flash movies into separate
One of the reasons to use multiple scenes in a
Flash movie is to avoid having too many
complicated layers in one scene.
Break down your Flash movies into scenes
when the action shifts from one background
and animated event to another.
When you create a Flash movie, Flash
automatically creates scene 1.
You can add additional scenes to a Flash
movie by selecting "Insert" and selecting
Notice that you can remove various scenes
from a Flash movie by selecting "Insert" and
selecting "remove scene."
When working with multiple scenes, you
want to open up the "scenes" panel. You
do this by selecting "Window" and then
then selecting "scene."
In the "scenes" panel, you can add and
scenes, rearrange the order of your
scenes, and name each scene.
If you are going to use multiple scenes,
it is a good
idea to name them.
In many Flash movies, there are "pre-loader,"
"introduction," "main movie," and "concluding"
Because each scene will continue to play
and loop when
the other scenes are playing,
when using scenes you must include a "stop"
action at the end of each scene. You put
"stop" action on the last frame of a scene.
Using stop actions will ensure that each
scene will play and then stop before the
next scene plays.
2. See a Photo
Tour of Sewall to get images for
this Shape Tween
- Shape Tweening using both shapes, images,
- sewhall.html and sewhall.fla and
texteffect.html and texteffect.fla
- To shape tween text, you need to
"Break Apart" twice.
- To shape tween images, you need to
"Break Apart" once .
- You can't shape tween symbols and images.
- You can turn a shape or "Broken Apart" object
into a symbol, and then you can motion tween it.
2. Limiting the size of Flash movies to reduce
One of the central problems for web designers is to create websites that quickly load and display their information.
Many advanced Flash movies take a long time to load. Many of these advanced Flash movies include "pre-loader" scenes that tell the reader when the Flash movie will begin
You can reduce the size of Flash movies by using vector graphics and images. Jpeg graphics and images require bigger image files and increase loading time.
Many really advanced Flash movies require a longer download time because they use a lot of different images and animated graphic tricks.
When using Flash, some designers create complex,
artistic websites that take a longtime to download
(especially with a phone modem), but they do so
in order to create a complex, visual experience.
So if you include a "pre-loader" scene and give
reader visual and graphic clues that your site is
a complex, artsy site, many viewers will wait the
extra time to view your site.
If you want to create an "information" or "resource"
site with Flash, you can use vector graphics and small image files to make your Flash website download in about the same time as a normal "html" website.
3. Creating Flash animations: Moving Stickman animations
See the "xiaoxiaomove.com" websites for one of
the best examples of advanced animation on the web.
One of the tricks the "xiaoxiao.com" Flash movies
use is to make the background move relative to the moving stickman characters to magnify their movement, making it appear that the stickman are moving faster than they actually are.
Let's create a "stickman" animation of our own.
See stickman.fla and stickman.html
The first thing you need to do is increase the size
of your stroke to give the stickman added dimension. I increase the stroke to 10.
The first thing we are going to do is create all the limbs and the head for our stickman.
Each of these limbs is going to be its own symbol.
Because we want to be able to rotate each of these limbs independently
from the other limb.
After creating each of these limbs and making them
symbols, we now want to go in and change the
"pivot points" of these limbs so that the limbs
appear to be moving from the top of the legs and
the top of the arms.
First select the symbol whose pivot point you want
to change, then select "Modify" and
and then select "edit center."
Now drag the "center point" of each of the limbs
exactly where you want them to pivot from.
Now we are going to animate the stickman by creating small motions frame by frame, making
the limbs move from the "pivot" point of the stickman's body.
Remember that each symbol must be on its own layer.
You will motion tween each of these symbols in
order to create a life-like motion effect.
With advanced versions of the stickman you can use "easing" to speed-up and slow-down the action to make it look more life-like.
See my example of a simple stickman. Note that
I haven't using easing on this example.
a) Non-looping stickman
b) Looping stickman
Remember that you can edit the entire symbol and
change every instance of that symbol, or you can
just edit one "instance" of a symbol. Make
when you edit the entire symbol that is what you want to do.
4. Rotating and Moving Text and graphics
Just as you can create animated motion for a stickman, so too can you create animated motion for text and graphics.
You can make text and graphics move in and out
of a scence, rotate on the stage, and appear and
You can animate text by first creating a block of
text that selecting it and and then breaking it
After breaking the text block apart, then make it a
Using motion tweening and various effects such as
alpha, rotation, and easing we can make the text
move on and off the page.
See my simple example of such a text
One of the more common graphic effects used
with text requires you to make each letter its own symbol and then move the letters of a word on and off the stage in a slow-motion sequence.
Remember, you can also use shape tweening to have shapes turn into letters or vice-versa.
Each of these text and graphic effects requires careful synchronizing with other effects. Try
not to make these effects too fast to too slow.
Remember to vary the action of your motion
tween by using tweening to speed-up and
slow-down the motion.
- See these examples:
5. Expanding the Fill to make Text look bigger and
- In the Properties Box, the text size bar will only make text up to + 96. In order to make bigger text, you have to type in a bigger number.
- You can make text look even bigger by first
making it a shape, by breaking it apart twice.
- Having made the text a shape, now go to "Modify"
and select "Expand Fill." Be careful not to make
this number to high or the text will be unreadable.
- See textmorph4 as example.
6. Distributing Text to layers in order to work with Text
- Create text and then "Break Apart" once.
- Now go to "Modify" and select "Timeline" and
now select "Distribute to Layers." This will put
each text character on its own layer.
- See an example of Text distributed to layers.
- See textmorph5
- Macromedia Flash Support Center
- Flash Bible.com
- Flash Tools and Software
- Flash Jester: Flash Tools
- Action Script.com: Flash Tools
- A Photo Tour of Sewall