Using Text and Graphics in Flash Movies

Using Text and Graphics in
Flash Movies

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

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
scenes.
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
"scene."
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
"Panels" and then selecting "scene."
In the "scenes" panel, you can add and
delete 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"
scenes.
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 this
"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,
and words.
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
loading time

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 to play.
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 the
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 will
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 "transform"
and then select "edit center."
Now drag the "center point" of each of the limbs to
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 sure
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
disappear.
You can animate text by first creating a block of
text that selecting it and and then breaking it
apart.
After breaking the text block apart, then make it a
symbol.
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 effect animation.
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:

1. textmorph1

2.textmorph2

3. textmorph3

5. Expanding the Fill to make Text look bigger and
more rounded Rotating

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

Shockwave.com
QuickTime--Streaming Audio and Video
Macromedia Flash Showcase
FlashAnimation.net
Hillmancurtis.com
Xiaoxiao.com
Thinkmango.com
Paul Ingram Web Design