Beginning Flash Part 1 - Cody Tolmasoff – Web Developer

Flash MX
Part 1
Offered by
Learn iT!
2
Learn iT! Flash MX
What is Learn iT!'s Flash MX Course Series?
Macromedia Flash is the solution for producing high-impact, vector-based animation and
interactivity for Web sites. Flash has attracted an army of graphic artists and Web developers
who create dazzling animations and interfaces for the Web, adding sound, motion, and
interactivity to engage Web viewers with the kind of experience that builds brand loyalty for
publishers and culture for Web sites.
Flash animations are small, fast, and color-safe for the Web. Flash smoothes artwork and resizes
graphics and animations to fit the viewer’s screen, providing full-screen viewing experiences for
all browsers. This Macromedia-authorized training course introduces you to Flash through a
series of hands-on exercises. You will see how to create artwork using the Flash drawing and
editing tools, or work with images imported from other graphics programs. You will create
animations, buttons, and interface elements, as well as combine sound with interactivity.
Flash 1: Introduction to Flash
•
•
•
•
Understand what is going on when you view a Flash file, where Flash
works now, where it is going
Set up your movie, and your project.
Import and editing artwork from other applications
Understand and use Flash drawing tools
Flash 2: Basic Animation Techniques
• Traditional (keyframe) animation within the Flash environment
• Frames vs. keyframes
• Motion tweening
• Layers within Flash
• Onion Skinning
• Path Animation
• Color effects
Flash 3: Animation and Interactivity
• Shape Tweening
• Masking
• Buttons
• Interactivity
• Sound
Flash 4: Publishing and Complex Content Creation
• Practice Project (bringing it all together)
• Publishing
• Forms and variables
• Load movie (layering Flash files at runtime)
All Materials Contained within are written expressly for Learn iT! and may only be
used with the permission of Learn iT! or the author.
Written by Cody Tolmasoff
Flash Developer & Trainer
4
Table Of Contents
7
8
8
9
10
11
13
14
17
21
22
23
24
27
29
30
31
36
37
38
40
41
42
43
45
46
50
52
53
54
55
56
58
60
Introduction
Technology Flash uses
• Plug-In
• Streaming
• Vector & Bitmap
• File Format
Setting up your movie
• Settings
Importing Artwork
Editing Imported Artwork
• Black Arrow tool
• Undo’s
• Lasso tool
• Eraser tool
Trace Bitmap
• Symbols & Instances
• Tracing your Bitmap
Tools in Flash MX
• Properties Panel
• Pencil tool
• Arrow tool
• Vector Clay
• Line tool
• Oval tool
• Rectangle tool
• Brush tool
• Paint tool
• Fill Transform tool
• Ink Bottle tool
• Eye Dropper tool
• Zoom tool
• Free Transform tool
• Sub-selection tool
• Pen tool
Introduction
Welcome to Macromedia Flash MX. Flash MX is the 6th version of flash since the
applications inception in 1995. Flash began as an animation tool for the web, and
quickly gained popularity with its small file sizes and its ability to add interactivity
with its scripting language ActionScript. Now Flash MX is a powerful multimedia
tool for creating content for the web, as well as your computer, Flash can run on
many platforms. From a pocket PC, to the Xbox and Playstation 2, to some select
mobile phones, and set top TV boxes. Flash currently handles most everything
you are looking to put into a website. Flash can give your audience a unique
individual experience every time they visit your project; you can show your
audience video, or play audio files for them, allow them to print high resolution
documents, display (and interact with) information from a database, and set up
e-commerce. All this can happen within your flash movie, not having to rely upon
other technologies to do this for you.
In this course at Learn iT!, over the next two days, we will learn the basics of
how flash production works to build basic projects. In the first day of class we
will understand how the Flash interface functions, how all the tools work, to
create basic animated content, work with the timeline, and see how flash deals
with content created outside of Flash, as well as the principles driving our flash
content. In the second day of class we will expand out knowledge of animation,
bring in the ideas of interactivity and sound (to make a multimedia project), talk
about publishing our projects, and finally enhance our projects with forms, and
make our projects more modular with loading one flash movie on top of another.
Now in two days we can’t talk about how everything in Flash MX works, but we
can, give you a good idea of how the program functions, how to function within
Flash, and what the possibilities are using Flash for development. Give yourself
time for practice. The idea of how things work in Flash is usually not too hard to
grasp. However without practicing what you are learning here, your memory of
how to do even the easiest of tasks will escape you shortly.
Also over the next couple of days we will be giving you a series of resources,
from books to websites and conferences. Please use them. There is always a lot
happening in the flash community; things are always changing and evolving. If
you are not changing and keeping up with the times, it is very easy to be left
behind.
What is Flash, how does it work, and where is it going?
Flash is interactive animation for the web (and other devices). Flash utilizes a
number of different technologies to bring you streaming content with small file
size. We discuss these below.
Plug-in
A plug-in is a small program that allows a browser (i.e. Internet Explorer,
Netscape Navigator) to display specialized content, usually created with a
program from a company who does not build your browser. Plug-ins you may be
familiar with now are:
• Real Player
• Windows Media Player
• QuickTime
• Adobe Acrobat (PDF documents)
• Shockwave
• Flash (which is not the same as shockwave)
• And many more…
Basically a plug-in allows you to see content the creators of HTML never
imagined or intended; like video, audio, and animation.
A number of plug-ins already come built into your browser, however the
programs that create content for your plug-in are continually being updated and
enhanced by the companies who make them. This allows you to enjoy better
content as the web evolves. So from time to time a new plug-in is released,
which requires you to download (or update) a new plug-in.
Flash keeps your project file size small by utilizing this plug-in. Imagine the web
as a cookbook, and you go to a specific page in your cookbook (a web page
using Flash) and the cookbook has a list of ingredients and instruction on how to
assemble them. That is what the flash file you view looks like when it comes
down to your computer, and then the Flash plug-in takes over and assembles the
flash file and displays it in your browser. So all the work is done on the client
side (client is a term describing the computer viewing a web project). The
program ships quickly across your Internet connection, and the brunt of the work
is done on the computer viewing the Flash project.
Note: Macromedia has two major plug-ins that are very similar; there is a
Shockwave and a Flash plug-in. They might seem like the same thing, but they
are different. The shockwave plug-in is for displaying content from Flash’s sister
program, Director. Director was originally designed for CD-ROM publishing, but
does make some wonderful products for the web also now. The Flash plug-in is
what we use to display Flash content in our browsers.
8
Streaming
Streaming is the idea of playing content you are loading. In the not so distant
past if you wanted to watch a 1-megabyte video on the Internet, you would have
to wait for the entire file to download before you could watch it. If you have a
DSL or cable connection, this might not seem like too big of a deal, but most of
the world is still using a dial-up connection. Streaming allows you to download
part of the file before you can see it, and it keeps downloading and playing the
file at the same time until it’s done. The process of streaming keeps a buffer
between the part of the file you are playing and the part of the file your are
loading as long as this buffer is there, your file will play back quickly and
seamlessly. You may have noticed this using Real Player; occasionally when
using Real Player you might notice the file you are streaming might pause. Down
at the bottom of the Real Player window you might see the word buffering.
Beginning
Ending
ÎFig 1-0 Buffering Media
Most content you see on the web that utilizes a timeline (content that has a
specific beginning and ending) like video, audio, or animation wants to stream,
and Flash is no exception.
9
Vectors vs. Bitmap:
ÎFig 1-1 Vector vs. Bitmap
These are the two basic types of pictures or graphics you will encounter in other
programs, in Flash, and up on the web.
Bitmap pictures and images (also known as a raster image) are what we see
most commonly. Bitmaps work with the pixels on your screen. Basically they
break an image up into a grid, and fill the boxes in the grid with a different color.
Photographs (that are on your screen) are typically bitmap images. If you zoom
really close into one of these images you can see all the little dots making up
your image. A simple example of this is the images on your cell phone; look
closely at your cell phone screen at one of the images there. You will see all the
pixels that make up your image.
Vectors on the other hand utilize math. Instead of drawing a series of dots on a
screen, vectors define an image by its outline shapes. A vector will draw an
outline of a shape and fill it with a specific color or gradient. The way a vector
image defines an outline shape is through the use of points and some math
(don’t stress over this, the computer does all the math for you). Vectors break a
shape up into smaller parts (usually where a significant change has happened); a
beginning and an ending point define each of the parts. In each of these points
are contained a mathematical formula to redraw the line between the two points
(as well as the color of the line, and the fill of the shape the line is making).
Vectors tend to be used to draw clean graphics (like logos), are usually smaller in
file size, and can scale to any size without looking bad. Bitmaps tend to be for
photographs and more complex images. These images look really bad when you
scale them, and they tend to be larger in file size. Flash will work with both of
these types of images, but it wants to be a vector program whenever possible.
File Formats
There are two major file formats you should be aware of in Flash, .fla and .swf.
Whenever you do a file > save in a Flash movie, you save a .fla file (this is short
for “Flash”, and its pronounced “flaw”); this is your editable file you can open
within Flash and change things. For you the developer, the .fla file is the most
important file for you. From here you can export any file type you need to,
anytime.
On the other hand, the .fla file is not what goes up on the web (unless you are
sharing your source file for your project). Flash exports a .swf file (which stand
for “Small Web Format”, and is pronounced “swiff”), and that is what you view
on a web page. Usually you want to embed your .swf file inside a HTML file to
control how it shows up on your web page, and we will talk about publishing in
more detail later on. If you are curious about this, go take a look in
Help > Using Flash > Publishing.
.fla and .swf file icons
HTML and Flash
A .swf file can play directly in your browser, but if you want to have any control
over how your .swf file appears, you want to embed the .swf file using some
HTML. Here is the basic HTML code used to display a .swf file. We will talk about
this in more detail in the day 2 class.
<HTML><HEAD>
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<TITLE>File Name</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<!-- URL's used in the movie--><!-- text used in the movie-->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6
,0,0,0" WIDTH="550" HEIGHT="400" id="fileName" ALIGN="">
<PARAM NAME=movie VALUE="fileName.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="fileName.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="filename" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT></BODY></HTML>
Look for the embed src tag; this is what allows your .swf file to show up.
Everything else here controls how your .swf file shows up. For details about this
consult Help > Using Flash > Publishing. We will talk about some of this in the
second day of class.
Student Notes
12
Setting up your Movie…and your Project.
Goals:
1. To set up your file for creating Flash projects
One of the absolute first things you need to do in your project is to make some
decisions. Because once you start developing, making these changes later is just
a headache.
Choose modify > document from the main menu along the top.
ÎFig 1-2 Document properties dialogue box
ÎFig 1-2a Properties Panel Default selection.
These are the default settings Flash gives us in the Document Settings dialogue
box. Lets discuss what they mean.
Settings:
• Stage: the area on your screen where you create animation.
• Dimensions: the stage area of your Flash movie. Typically this is
measured in pixels. If you change your ruler units, you movie will be
measured in any unit you choose there. Width is the Horizontal aspect of
your file. Height is the Vertical aspect.
Choose your settings wisely now, this can cause great headaches later if
you have to change this after you start developing.
• Match:
o Printer: will match your stage size to be equal to your (default)
printer output print area.
o Contents: will change your stage size to fit the contents on your
screen. However it will use your upper left hand corner for a center
reference, which means your stage will get larger or smaller from
the upper left hand corner. Be careful of this.
o Default: resets your stage to its default size, either the values you
see above, or whatever default you have set instead.
• Background Color: Sets the background color for your entire movie, and
anything else you publish with your project, for example the HTML page
you might publish from Flash.
• Frame Rate: this is how many Frames Per Second (fps) your animation
will attempt to play. Typically most web animation runs from 10-15 fps,
there are however many exceptions to this rule. Flash will default to 12
fps unless it is told to do otherwise. This frame rate is not guaranteed, the
playback frame rate primarily depends on the processor on the computer
the animation is being viewed on. The best thing to do to decide upon a
frame rate is testing different rates and seeing the affect on your
animation and your file size.
• Ruler Units: What do you want to measure your project in? Typically most
projects for the web are measured in pixels, however for projects with
different scopes, you have the option of choosing units of inches, inches
decimal, points, centimeters, and millimeters. If you choose to view your
rulers in your project, this will be the measurement you see.
• Help: launches Flash’s built in help files to a mage talking about these
settings.
• Make Default: will take the settings you choose and make them your
default setting for whenever you create a new Flash project. For example,
if you are always making banner ads, you can set your dimensions to be
that of your ad, and your frame rate, so that every time you open a new
file, you are ready to work.
When we are learning all of these things, it can be easier to use a frame rate of
10 (instead of 12) frames per second. Its not to big of a deal, but imagine you
are about to make an eight second long animation, how many frames should you
be using running your animation at 12 fps (quick multiply 8 x 12). Now what if
you are doing the same 8 second long animation running at 10 fps. Well
multiplying 10 x 8 is much easier, and we have better things to think about right
now. We suggest setting your animation to 10 fps and making that your default
setting.
Suggested Settings while you are learning Flash:
• Change your Frame Rate to 10 fps.
• Click on the save default option.
All of your Flash movies will open with these settings now. You can always change
this in the future as well.
Student Notes
16
Technique: Using other Media within Flash MX
Importing Artwork
Goals:
1. To be able to bring in artwork and media from other applications.
2. To get an idea of what types of media Flash MX can accept.
If you want to bring in media from other applications, you need to import it into
the Flash authoring environment. To import, go to the main menu and select
file > import.
ÎFig 1-3 Import dialogue box
These are just a few of the file formats flash can import. Flash can take media
from nearly any source. However if you can’t take a file directly from another
application, look for an export setting from that application that might match an
import setting that flash accepts. Sometimes when you are moving file from one
operating system to another (i.e. from a PC to a Mac) you need to choose “all
files” from the drop down menu.
Jpeg’s and Gif’s
Jpeg’s and Gif’s are two of the most prevalent file formats we find on the web.
PNG files are a close third (this is the native file format for Macromedia
Fireworks). A lot of times a client will only be able to provide these types of
images for you to work with. They are both bitmap images and for this example
we can treat them as the same thing. If you want to try this example again,
open any web page and save one of the Gif pictures on the page (for example
yahoo.com’s logo)
ÎFig 1-4 roadroc
•
•
•
•
•
Download the file roadroc.jpg.
Note: if you are not familiar with grabbing an image of the internet, simply
right click (or on the Mac, control click) on the image you want to save, then
choose the option to save picture as…
Import the file roadroc.jpg into Flash, File > Import.
Note: for some reason, graphics imported into Flash are scaled down to
approximately 50% of the original. You can select your image with the Black
Arrow tool, open your transform panel, and scale your image up to 100%.
Change the background color of your movie.
(Note: you can do this as described in setting up your movie and project; or
you can click once on the stage with the black arrow tool, and use the
property inspector panel).
•
Notice that the background of Roadroc is still visible.
Using media like Jpeg’s and GIF’s means you have a picture contained within
rectangular border. Anything that is not the subject is filled with a background
color. This includes transparent GIF images (typically they import with a black
background). PNG files can support an alpha transparency, and flash can utilize
PNG files, however alpha transparencies like this can be taxing on the users
processor, which will affect the playback of your movie. There are always
exceptions to these guidelines; the best thing you can do is test anything you
think is a possibility.
We need to be able to use Flash’s editing tools to remove the background of this
picture. Flash however has only a few tools to do this, so we usually have to pay
a lot of attention to detail, and use several tools to accomplish this. If using
Flash’s tools for this makes you wonder why you can’t do this in PhotoShop, be
aware there are much better tools for this. PhotoShop can accomplish editing
18
bitmaps better, however you have to be able to save your PhotoShop file to
version 2.5 or 3, and Flash does not support everything for those file formats.
Also these older versions of PhotoShop don’t support everything you are used to
in version 5 or 6 (i.e. layers are not available in PhotoShop 2). Read the software
note below about Adobe Live Motion if you are serious about integrating
PhotoShop and Illustrator files into Flash.
Software Note: Adobe has a program called Live Motion, which is Adobe’s
answer to Flash. It utilizes a scripting language based out of the same ECMA 262
Library that ActionScript and JavaScript are based out of, and it works much
better with Adobe’s proprietary tools (Photoshop, Illustrator, After Effects, etc…).
The best way to look at this is as a tool to supplement your Flash work. Live
motion can export a .swf file, which is the same file format Flash exports to the
http://www.adobe.com/products/livemotion/main.html.
Important Update: Media Lab has come up with an application to export from
PhotoShop (version 4-7) to a .fla file you can open up and edit from Flash MX,
similar to how Live Motion works. You can find more information here:
http://www.medialab.com/psd2fla/.
19
Student Notes
20
Exercise: Editing our Image
Goals:
1. To edit and utilize external bitmap images for a project
•
Select your Eraser tool (on the tool panel on the left hand side of your
screen) and try to erase some of the white background of Roadroc.
Notice that nothing erased. When you import a picture into Flash, it comes in
protected by a border.
•
Select your black Arrow tool and click one time on the graphic.
(figure 1-5 below)
Notice the gray border around your graphic. This is much like a grouping in other
programs; it protects the graphic from accidental editing.
•
With your graphic selected, find the Modify menu at the top of your screen.
Modify > Break Apart.
Notice your selection of your graphic has changed. The graphic is selected with
white dots. This makes seeing your selection of the white background a bit
harder, but it is easy to see your selection everywhere else.
Note: if you are working with an image similar to this (with a white background),
first bring your image into a bitmap-editing program like PhotoShop to edit your
background color to whatever the background color of your movie will be. If your
file will have a white background, try changing the background color to a light
gray tone. Bitmap programs will be better at editing large areas of color like this.
Then it is easier to edit the graphic in Flash.
What you need to do at this point is make selections of the white background
and remove it (delete it) using at least one editing tool, but more likely you will
use two or more tools.
ÎFig 1-5 Black arrow tool
Black Arrow Tool
• Select the black Arrow tool in the upper left corner of the tool panel.
• Starting from outside of your image click, hold, and drag a magic
rectangle around a section of the white background of the graphic.
• Let go once the selection is made.
• It is hard to see your selection, hit the delete key on the keyboard.
This is the basic process in order to remove the background from our picture. We
will make a selection (with better tools) and delete the selection.
•
Undo once so you go back to before you deleted your selection.
Undo’s
Flash, like any other application, gives you an undo: the ability to go back before
your last change in case of a mistake. And like many other applications, Flash
gives you multiple undo levels; in fact it is set to 100 undo’s by default. This
means that you have 100 undo levels in any Flash file you may have open at the
time. Unfortunately Flash does not have something like the History Panel in
PhotoShop, which allows you to view a list of your last changes, a guide to your
undo’s.
Now Imagine undoing 100 times, what is 100 undo’s like? By the time you get to
100 undo’s, you might as well do a File > Revert to go back to a previously
saved version of your Flash file. We suggest setting your undo levels down to
somewhere around 20 or 25, which is more than enough for the average person,
and you won’t have to worry about crashing your system due to so many undo’s
in each of your open Flash files. To change your undo levels:
Edit > Preferences
ÎFig 1-6: Flash gives you between 2-300 levels of undo. We suggest you set this to 20-25 in order to not
tax your system.
Lasso Tool
ÎFigure 1-7 lasso tool
The Lasso tool is much more flexible than the black arrow tool. With the Lasso
tool we can navigate our selection more precisely, and we also have options to
make fairly precise selections using the Polygon and Magic Wand options.
• Select the Lasso tool from your tool panel.
Note: be sure your image is still broken apart, and Does Not have a bounding
box.
•
•
•
Starting outside of your image click, hold, and drag your lasso around part
of the white background of the image you want to select to remove.
Once you have finished your selection, move your mouse to near where you
started your selection, and let go.
It might be a bit hard to see, but your selection is made (in white dots). Hit
the Delete button on the Keyboard.
Now this is probably not the best selection we can make, but the process of
editing out the background of a bitmap image is to make a selection, then delete
it. Flash does not make the best selections, but again the applications outside of
Flash that have better selection tools often times need to export as a Jpeg or GIF
so that Flash can import the image.
The regular lasso tool is good for selecting something the Black Arrow tool
cannot select with a magic rectangle, but for an image like this, its very tricky to
use this tool. So now we look at the options included with the Lasso tool. With
the Lasso tool selected, look at the bottom of your tool panel; there are some
options we can use there.
Polygon Mode
ÎFig 1-8 Polygon Mode
Polygon mode for the lasso tool allows you to set anchor points for your selection
as you are making your selection. This offers you tighter control over your
selection.
Note: be sure your image is still broken apart, and Does Not have a bounding
box.
•
•
Select the Polygon mode option from the bottom of your tool panel
(note: you can only select this option if the Lasso tool is selected).
Starting outside of your image, click and let go of your mouse.
24
Notice that as you move your mouse away from where you clicked there is an
anchor point set down for you.
•
•
•
Now click and let go someplace else to set another anchor point.
Set a series of these anchor points around the selection you want to make.
To finish off your selection bring your mouse someplace close to where you
started your selection from originally and double-click. This will finish your
selection, so you can now delete.
We use this tool a lot to make precise selections. It is also a huge help to zoom
into the area where you are making you selection.
Magic Wand
ÎFig 1-9 Magic Wand
The Magic Wand tool is similar to what you might see in PhotoShop, except not
quite as sophisticated. By using this on a bitmap, you can select large areas of
similar color, much like the white background in our image. Basically it makes a
selection of the pixel you click on, and any pixel touching that pixel with close
color values. So in our example, if you click on one of the white background
pixels in our image, it will select that pixel and any similar white pixel touching
that one.
•
You may want to undo a few times; we have done a lot to our image so far.
•
Deselect your Polygon mode button, and select your magic wand option.
Note: be sure your image is still broken apart, and doesn’t have a bounding box.
•
•
Click one time somewhere on the white background of our image.
Hit the Delete on the keyboard.
We just made a broad selection of most of the white background and removed it
with one click and a stroke of the delete key. However this is not as good of a
selection as it can be, and we can change a couple of the settings of the magic
wand tool to make our selections come out better. However, you won’t find all of
the options available in other applications using similar tools.
•
•
Undo till just before your selection with the Magic Wand tool.
Click one time on the Magic Wand Properties button
ÎFig 1-10 Magic Wand Properties button
25
ÎFig 1-11 Magic Wand Settings dialogue box
We have two options for our Magic Wand Properties, Threshold and
Smoothing.
Threshold
The Threshold setting allows us to set the tolerance for how close the pixel color
values touching the selected pixel must be in order for the Magic Wand tool to
see them as part of the selection. Basically the larger the number, the more
pixels you will grab; the smaller the number, the fewer number of pixels you will
grab in your selection. It is important to note that even though all the
background pixels appear to be the same white color, there are spots (especially
near the edge of the car) where the background color blends into the color of
the car. This is in order to allow the image to appear smooth at its edges.
•
•
Try a larger number here for this image, for example 30 or 50.
Every image is different; every part of an image is different. You will want to
try a lot of different values on different images.
Smoothing
The Smoothing value gives you four options from a drop-down menu; pixels,
rough, normal, and smooth. Smoothing allows us to smooth the selection
border between what you select and what is left behind. The option that
probably sounds best to your ears is Smooth. It might be tempting to smooth
the line between your selection and what you didn’t select. However, smoothing
might not be your best choice. Your image is made of pixels, so choosing smooth
as an option may not give you the tightest selection possible. Often pixels is the
best option, however every image is different.
26
Eraser tool
Î Fig 1-12 Eraser Tool
The Eraser tool is pretty self-explanatory. You click, hold, and drag the Eraser
over an area you want to erase. However there are some differences between
the Eraser tool in Flash, and the Eraser tool in other programs.
•
•
•
•
•
•
•
Select the Eraser tool from the Tool panel.
At the bottom of the Tool panel, select the smallest eraser tip from the drop
down menu of eraser tips.
Erase part of the bitmap picture, just a simple eraser stroke for now.
Select the magnify glass on the Tool panel.
Using the Zoom tool, zoom in as far as you can go on your eraser mark.
Select the Eraser tool again.
With the same size brush, make another eraser mark nearby your original.
Notice the difference between the two eraser marks made with same size Eraser
Tip. Flash does not give us the ability to customize our brush or eraser tips,
however the tip remains the same size on our screen no matter what our
magnification is on our screen. This is our workaround to customizing our brush
tips sizes.
Exercise:
• Edit your image with any tools you need to, so that most of the white
background is removed.
• Save your file to your desktop, we will use this image again later.
File > Save : Desktop.
• Don’t forget to give your file a name (i.e. car.fla) so it’s easy to find later.
Practice:
Take a few minutes to create some samples in other programs your familiar with,
and bring them into Flash. See how Flash handles importing that media (or if it
can import it), or what has to happen for Flash to import the media. We have
some samples on-line for you to practice with also. Ask yourself what graphic file
formats do you work with most often and work with those. This would be a good
point to try using that type of file in Flash, and if you have any problems, you
can ask your instructor for advice.
Note: don’t forget to check the export file types from the graphic program you
are using, and compare those file types to the import file types in Flash. You may
also consider using another program as your bridge to flash. For example: export
your file from Photoshop to Illustrator, and then bring it into Flash.
27
Student Notes
28
Trace Bitmap
Goals:
1. Understand the concept of the Library within your Flash file.
2. To be able take an imported bitmap image, and convert it to a vector.
Library
One of the ways Flash keeps its final file size low is the use of the Library. The
Library offers us a way to load an item once, then just reference that item over
and over again as necessary throughout your project, instead of having to reload
that image every time you want to use it. It keeps a catalog of every object you
use in your movie.
Imagine how GIF animation works. GIF animation is how most banner ads are
built (although Flash is taking that over), and how most animation on the web
was before Flash was so prevalent. A GIF animation would have to load every
page (or frame) of the animation in order for you to see the animation as a
whole.
Now imagine you have a 25k image on each frame of your GIF animation, and
your animation is 10 frames long. To get the total file size of that GIF animation,
we multiply 10 x 25, for a total of 250k. Now Flash in that same situation will
hold that 25k image in its Library, load it one time, and reuse the same image
whenever it can. So in Flash that same animation would be around 26k, if not
less (25k for the image, and less than 1k worth of information to move that
image around). Which will download faster?
•
In the file we were just working on, open your Library
Window > Library (F11)
Note: If you are using OS 9 on the Mac, your Function keys might be set up to
launch applications rather than perform shortcuts for applications. You will need
to turn this functionality off in order to use the (many) Function key shortcuts in
Flash.
Symbol vs. Instance:
Whenever Flash imports media, it wants to automatically help you out and place
a reference copy of that media in your library. You should see the name of your
image in your Library, with a tree icon next to it. This image is the original
import, not the copy you edited on the Flash Stage. There are two terms we
should know at this point, Instance and Symbol.
Symbol: The base object contained within your Library.
Instance: The copy of your symbol on the stage.
Î Fig 1-13 Library, Stage, Symbol, Instance Relationship
Each Flash movie has its own distinct Library, each with its own catalog of
objects. If you want another copy of an object in your Library on your stage, just
drag that image from your Library to your stage. Flash movies can share assets
from one file to another, or you can quickly import an object into a Flash movie
by dragging an object from a Library in one Flash movie to another Flash movie’s
stage.
•
•
•
•
With the Library of your current file open, open a new file in Flash
File > New.
Drag your original bitmap from the library of your previous file to the stage of
your new file.
Open the Library of your new file (Window > Library or F11). Is the image
in your Library?
Note: to navigate between your two open files, look at the very bottom of
your Window menu, you should see a list of all of your files open in Flash.
This is basically how you do a quick import from your previous Flash file to your
current one. Flash knows that when you drag a symbol onto the stage (which
then becomes an instance), it should have that symbol to reference in its current
Library; and if that symbol is not in the Library, Flash will put it there for you.
Trace Bitmap
• At this point you should have a new file with an un-edited version of Roadroc
(or some bitmap image) on the stage, and it should not be broken apart.
• If you are not sure if you have the original version of the bitmap, select the
Arrow tool and click on the image once to select roadroc. If you see the
rough gray border, you have the original image.
The Trace Bitmap function will take an original Bitmap image and convert it into
Vectors. We know that our Bitmap editing tools can be very imprecise, however
we might also know that our vector tools are incredibly precise for editing.
Vectors are defined by specific outlines for shapes, and it is easy to select a
shape (i.e. the white background of our image) and delete it. So possibly it may
be easier overall to deal with a vectorized version of our bitmap image for editing
purposes. Lets see how Flash can do this.
•
•
Select your image on the Stage (you should see a rough gray border around
the bitmap).
Modify > Trace Bitmap…
Î Fig 1-14 Trace Bitmap Dialogue box with original settings.
•
Make sure your settings read the same as in Fig. 1-14 above and press OK.
How does your image look compared to the original? Are the previous bitmap
and this new vectorized version identical? Maybe you should click on the Magnify
tool and zoom in a bit on this image. This Trace Bitmap should look quite
different from the original Bitmap. Flash made a very quick, very loose
interpretation of the original image. However the file size of the new vector
image is just a fraction of the original file size.
31
Î Fig 1-15 Bitmap image and vector image with file sizes
•
To see the outlines of your vector image, click on square column in your layer
in the timeline.
Î Fig 1-16 vector option in the layer on the timeline
Now lets try some different settings and understand what those settings mean.
•
•
•
Either undo until you are back to the original bitmap image with the gray
bounding box, or drag a new copy of your bitmap from the Library to the
Stage.
Select your image and choose Trace Bitmap again
Modify > Trace Bitmap…
This time, lets try these settings:
Î Fig 1-17 Trace Bitmap dialogue box with precise settings.
•
Click OK.
32
Notice this time your image took longer to process. Does this tell you anything
about the complexity of this image interpretation compared to last time? Would
this increase the file size?
•
•
Deselect you image by selecting the black arrow selection tool, and clicking
away from the image.
Note: unlike other applications where you can use the keyboard shortcut
ctrl + d to deselect an image, in flash you will duplicate your selection.
Notice how long it took to deselect you image, the computer has to think about
all the different parts of your image and what they would look like deselected in
order to process that information. This means that there is a lot more
information in your image, which will increase your file size, and make the
computers processor work harder to use this vector image in a project.
•
As before, view the outlines of your new image. It should look a lot more
complex.
Î Fig 1-18 Bitmap image and new vector image with file sizes
Notice the file sizes in the above figure 1-17. The new vector image is almost 3
times the original size of the original Jpeg. However it looks almost
indistinguishable from the original. Lets talk about the settings in the Trace
Bitmap dialogue box and what we just did.
Color Threshold: a value from 1-500. When two pixels are compared, if the
difference in the RGB color values is less than the color threshold, the two pixels
are considered the same color. As you increase the threshold value, you
decrease the number of colors. Basically, what this means is that the larger the
value, the bigger the selections of color area get; and you get an image that is a
loose interpretation of the original. This is similar to the Threshold option in the
Magic Wand tool.
Minimum Area: a value from 1-1000. It sets the number of surrounding pixels to
consider when assigning a color to a pixel. Basically the smaller the number, the
more precise your image interpretation gets.
Curve Fit: values of pixels, very tight, tight, normal, smooth, very smooth.
Basically this is how smooth you want outlines for shapes to be drawn. This is
similar to the Smoothing option of the Magic Wand tool.
Corner Threshold: values of many corners, normal, and few corners. This will
determine whether sharp edges are retained or smoothed out. Sharp edges are
good for tightly selecting pixel areas, however it does make the image much
more complex.
In the above two examples we saw a very loose interpretation an image, and a
very precise interpretation of an image. What we did was basically on both ends
of the spectrum for Trace Bitmap. These setting will vary from image to image,
and you will typically find some in between setting for your image, however this
gives you a good idea of how to handle the Trace Bitmap Function.
Student Notes
Tools in Flash MX
Goals:
1. To get a feel for how the tools work in Flash MX
2. To understand the differences between Flash’s tools, and those of other
image creation applications (i.e. PhotoShop, Fireworks, Illustrator, etc…)
Î Fig 1-19 Tool panel with names of each tool
So far we have played with a few tools. We have used the black arrow selection
tool, lasso tool, eraser tool, and the zoom tool for some editing. Most of these
tools also have options once you select the tool (you see these options if they
are available at the bottom of the tool panel). You also probably see that some
of these tools have their own unique properties and traits, so that even though
they seem very similar to other applications out there, our tools here in Flash are
a little different. So our goal here is to get a feel for all of the tools at our
disposal.
Properties Panel
Î Fig 1-20 Properties Panel
One of the new User Interface elements in Flash MX is the introduction of the
Properties Panel, a wonderful interface on permanent loan from Dreamweaver.
In the previous versions of Flash we had dozens of separate panels floating
around the right hand side of our screen, each doing one separate task. Now,
most of these functions have been combined into the Properties Panel (usually
located at the bottom of your screen). Selecting a tool in Flash MX may offer you
a number of options in the Properties panel; sometimes these properties are
duplicated under Colors and Options in the Tool panel. The Properties panel will
give you some options for whatever you have currently selected.
For each tool we discuss and select, take a look at the Properties panel to see if
there are any options you can choose.
For most of the tools in Flash MX, the options you will find in the Properties
panel will be related to the outline or fill attributes (i.e. line thickness, like style,
line color, fill color, etc…). The Test tool is the only exception to this guideline.
Pencil Tool
Î Fig 1-21 Pencil tool (Y)
The Pencil tool does pretty much what you would expect; you click, hold, and
drag and it draws something on your screen. However there is a funny setting
we are given initially while using the pencil tool:
•
•
Select the Pencil tool.
Draw (click, hold, and drag your mouse) a circle and a square on your screen.
Are you all of a sudden a fantastic artist? Do you have the steadiest hand in the
world? What you have on your screen (very possibly) is a perfect
square/rectangle shape, and a perfect circle/oval shape, or something close to
that. Its not exactly what you were drawing, because Flash interpreted what you
were doing and converted it to what it thought you were trying to draw. Also it is
not just trying to help you be an artist, but it is trying to make the smallest and
simplest file possible.
What happens is that as you click and hold the mouse to draw on the screen,
you are filling in pixels on your screen. But Flash wants to be a vector program;
it doesn’t want to deal with pixels if it can be avoided. So after your finish
drawing your line (let go of your mouse), it automatically does something like a
trace bitmap function on your line and converts it to a vector. Basically Flash is
interpreting what you draw inside of the authoring environment and forces it to
be a vector; there is no way to change the fact Flash will convert this to a vector,
however we can change the strength of how hard Flash will convert what you
draw.
Most every time we use a tool in Flash, we are offered options for that tool (if
there are any options). To find the options for the tool you are using, look at the
bottom of the tool panel once you have your tool selected. For the Pencil tool we
are offered one option, the Pencil Mode. The Pencil Mode gives us a drop down
with three options: Straighten, Smooth, and Ink.
Î Fig 1-22 Pencil Mode
Straighten is the default setting we get with the Pencil tool. This is the
strongest setting Flash gives us. Drawing with the Straighten Mode means you
will get smaller file sizes (because of the simpler in shape), however you are
sacrificing detail in your line. Flash will do the strongest interpretation of your
drawing with this setting.
Smooth is the next setting down. The smooth setting is not as harsh as
Straighten, but it’s not great to draw with either. Select this setting and try to
draw the circle and the square again. Notice there is still a change, this time
however it is not so drastic. This gives us more of a gentile smoothing action, but
most of the time this interpretation is still too drastic.
Ink is the Pencil Mode that gives us a drawing that looks most like what you
intended to draw in the first place, again however this will be the most complex
drawing, so you file size can get bigger because of this. If you try and draw the
square and the circle again, you will notice the least amount of change in your
drawing once you release the mouse.
Line Style
The pencil tool is an outline tool, which basically draws lines instead of fills.
When you use a line tool you can choose the thickness of a line (0.25 - 10
points) and the line style (solid, dashed, dotted, ragged, stipple, and hatched).
Be aware that you should use line styles sparingly, they can quickly tax your
processor and slow your animation down. Most outline tools have these options.
Arrow Tool
Î Fig 1-23 Arrow tool (V)
The Black Arrow selection tool is the most generic way we have to select
something, in any application. You click, hold, and drag the mouse to get the
magic rectangle, which you draw around something on the stage to select it. The
selection with this tool is pretty elementary and we have discussed it before. At
this point it’s the options for this tool that are of interest to us.
Î Fig 1-24 Straighten and Smooth
•
Draw a couple of wavy line with the Pencil tool (with the Pencil tool in the Ink
mode).
Î Fig 1-25 Wavy Lines
•
•
•
Select one of the lines you just drew with the Arrow tool.
Click one time on the Smooth option (this will only appear if you have the
Arrow tool selected).
Now click multiple times on the Smooth option. Notice your line keeps getting
smoother and smoother.
The big difference between this and using the Smooth option as a Pencil mode is
that this is undoable, using the pencil like this means you’re stuck. This is often
times a more preferred way to draw inside of Flash. You get the sensitivity of the
line, and if you want to add smoothing later, you can select either your entire
line, or just a part of it. Then if you go to far, just undo…and you are back to
where you were before.
•
•
Select part of your other line, not the entire thing this time.
Now lets try the Straighten option this time.
Usually it’s easier to work with Flash by adding the Straightening and Smoothing
after the fact, instead of when we draw initially.
40
Î Fig 1-26 Snap to Objects
The Snap to Object option does different tasks for different tools. Notice (at least
on the PC) up on the tool bar at the top of the screen that there is also an option
to turn on and off this Snap to Objects option as well. If you don’t see the
toolbar at the top of your screen
Window > Toolbars > Main
Î Fig 1-27 Main Tool Bar (Not available in the Mac OS).
We will explore the options of this tool throughout the next exercises with the
rest of the Flash tools. For now, just know where to turn this function on and off.
Sometimes this is a huge help in what we are working on, and sometimes it is a
huge interference.
Vector Clay
One of the editing techniques in Flash is known as Vector Clay. It is the process
of editing vector shapes with the Arrow tool.
•
•
•
•
•
•
Select your Pencil tool, choose the straighten mode.
Draw a straight line on your stage.
Select your Arrow tool.
Roll the tip of your arrow tool over the middle of the line (you should see a
happy face next to the arrow).
Once you see the happy face, click hold and drag with the mouse to make
your own happy face.
Try this same technique over the end of the line, but this time look for a right
angle next to the arrow.
This is Vector Clay. Vector Clay is available to you while using the Arrow tool on
any deselected shape. If the shape your are trying to edit is selected, you will
see a 4 directional move arrow next to your mouse, and you will not be able to
edit your shape. Vector Clay is a good quick editing tool for vector shapes, but
only about two-thirds as good as using the Subselection and Pen tools for
drawing and editing shapes.
41
Line Tool
Î Fig 1-28 Line Tool (N)
The Line tool is another fairly straightforward tool we see in other programs.
Once you select the line tool, move your cursor to the stage, and then you click,
hold, and drag the length and location of your line segment. Once you let go,
your line segment is drawn. There are no options directly associated with the line
tool, however we have the option of using Snap to Objects in conjunction with
the line tool.
•
Turn on the Snap to Objects option either as one of the options for the Arrow
tool, or on the Main Toolbar at the top (if you are on a PC). Remember that
this tool looks like a horseshoe magnet.
•
•
•
Select your Line tool from your Tool panel.
Click, hold, and drag a line on your stage.
Before you let go of your mouse, notice that your line will easily snap to
horizontal and vertical with little effort.
Note: if you are used to using the shift key to accomplish this, that option still
works, plus it will give you 45-degree angle increments as well.
•
•
•
Now draw another line to intersect the line you have already drawn. Notice
how easily the lines intersect.
For the last step Draw a triangle with the two lines you already have. Notice
how the Snap to Objects option allows not only the end to snap, but also the
beginning of the line as well.
You may also want to try this with the Snap to Objects option off, just to see
the difference.
Î Fig 1-29 Using Line Intersection to draw a Paper Airplane.
42
Oval Tool
Î Fig 1-30 Oval Tool (O)
The Oval tool is another fairly straightforward tool, this tool draws circles and
ovals much like the line tool draws lines. Click, hold, and drag to draw a circle or
oval on the stage. Here are a couple of quick things you should know about.
•
•
•
Turn on the Snap to Objects option.
Select the Oval tool.
Draw a circle on the stage. Try to make it as round as possible.
Notice Flash snapped your oval into a perfect circle. Again the shift key will
force the circle into being perfect, so you can choose whatever you feel most
comfortable with.
The circle you just drew is actually made up of two things: an outline and a fill.
Lets take a close look at the selection difference of these two things.
• Click once on the circle (with the Arrow tool).
• Notice the selection of the circle.
• Now double click on the circle to select the whole thing.
• Notice the selection of the outline.
Flash tries to make this distinct selection weather you are selecting a hairline, or
a 10-point line.
Color Selections
Î Fig 1-31 Color options
When you draw a circle on the stage, one of the options you get is what colors
you want the outline and the fill to be. The color that sits next to the pencil is the
outline color, and the color that sits next to the paint bucket is the fill color. In
fact any tool you choose that draws on the stage for us is typically either an
outline or fill tool, sometimes both (like circles). The Pencil and the Line tools are
both outline tools in Flash, and to select the color you want to draw with those
tools, you choose the color next to the pencil here. Note there are also options
here for default colors (black and white), no color, and swap colors. Roll over the
options and look for the tool tips.
43
If you accidentally separate the fill of the circle from the outline, just simply undo
(ctrl + z), don’t panic click. There is no way you are steady enough with the
mouse to put your fill back exactly where it was.
Another funny tendency of Flash is how much it wants to help you keep the
smallest file size possible. One of the ways Flash helps us is when we have two
overlapping objects on the same layer.
•
•
•
Draw another circle overlapping your first circle.
Now choose your Arrow tool to select the circle (both outline and fill) to move
your new circle away from your previous circle.
Notice that where the circles overlapped has been erased.
Since both of these circles were on the same layer, Flash figures that we no
longer need the part of the first circle we overlapped, so to save a little file space
and processor power, it was erased for us. Occasionally this can be a bit
troublesome with things we are drawing, but on the other hand, we can make
some really cool erasers.
44
Rectangle Tool
Î Fig 1-32 Rectangle Tool (R)
Like the Oval tool, the Rectangle tool draws (square and rectangle) objects that
are comprised of an outline and a fill. The Snap to Objects and Shift key options
do similar tasks here, so refer back to the Oval tool for reference if necessary.
The one biggest difference between the Oval and Rectangle tools (aside from the
fact that one draws circles, and the other draws squares) is the Rectangle tool
comes with one option. This option is know as Rounded Rectangle Radius. You
will find this option at the bottom of your tool panel when the Rectangle tool is
active.
Rounded Rectangle Radius
Î Fig 1-33 Rounded Rectangle Radius
This option allows us to draw rectangles and squares with rounded corners,
much like you see on Flash sites that offer you navigational menus. When you
click this option, you are presented with a dialogue box that asks you how big
your Corner Radius is (in points). Basically 0 will give you a square, and the
larger the number you input will give you larger rounded corners. You can enter
a value between 0-999.
Î Fig 1-34 Rounded Rectangle Radius dialogue box
•
•
Enter a number for the Corner Radius and draw some shapes on the stage.
Try a new number and draw some more shapes.
Note: Flash wont reset this number for you until you re-launch the application.
This option is an easy one to forget you have set. Try to get into the habit of
setting this back to zero once you have finished. A number of settings in Flash
are like this. We use a tool, customize some of its settings or options, go off and
do something else, and when we come back to the tool it may not work the way
we expect it to. A large number of these problems can be solved simply by
saving your work, closing the Flash application, taking that well deserved 5
minute break, coming back to the computer, and launching Flash again, and
opening your file. You would be surprised how many problems this will solve
working in Flash.
Brush Tool
Î Fig 1-35 Brush Tool (B)
The Brush tool paints Fill colors on the stage. Again basically we click, hold, and
drag to make some color here on the stage. This is very similar to other
applications out there. However the brush tool gives us some interesting options.
Take a look at the bottom of the tool panel.
Î Fig 1-36 Brush tool options
Brush mode
Î Fig 1-37 Brush mode options
Brush mode is a drop down menu that gives us several options. Paint: Normal,
Fills, Behind, Selection, and Inside. In the next few steps, we will experience
what these options can do for us.
•
Draw a circle or a square on the stage with a thick stroke.
46
Î Fig 1-38 Circle with a thick Stroke
•
Choose a new Fill color, and use your Brush to paint over the circle.
This is the default Paint Normal option. It paints over everything.
•
•
•
Undo your Brush stroke(s) so you see the original shape again.
Select Paint Fills from the options menu for the Brush.
Paint over your shape again. Notice the difference here.
The Paint Fills options typically won’t affect the outline shapes we have drawn on
the stage, at least not much. This tool option will paint on the stage, which is
technically considered a non-fillable object.
•
•
•
Undo your Brush stroke(s) so you see the original shape again.
Select Paint Behind from the options menu for the Brush.
Paint over your shape again. Notice the difference here.
Whatever you paint with the Paint Behind option will go behind everything else
on that same layer. Remember that two objects overlapping themselves on the
same layer will erase one another.
•
•
•
Undo your Brush stroke(s) so you see the original shape again.
Select Paint Selection from the options menu for the Brush.
Paint over your shape again. Notice nothing got painted.
47
For the Paint Selection option to work, you need to have a selection made. This
is much like using a stencil to constrain what you want to paint in traditional art
media.
•
•
Choose one of your selection tools (Arrow or Lasso tools) and make a large
selection of your shape.
Now go back to the Brush tool and try the paint selection option again, over
your selection.
You can paint your entire selection, or any part of it without having to worry
about overlapping color outside of your selection.
•
Select the paint inside option.
The paint inside option will only allow you to paint inside the vector shape you
began to paint from initially.
•
•
Choose a different fill color to paint with.
Paint, starting from the area you just painted in the last step.
Notice you only painted in the area you started from.
Use Pressure
Î Fig 1-39 Use Pressure option
This option is only available to you is there is a wacom tablet driver installed on
your computer. A wacom tablet (http://www.wacom.com) is a pressure sensitive
drawing tablet that uses a special pen that senses how hard you press. The
harder you press, the thicker the line you are drawing can get. Lighter pressure
will give you a thinner line. However you have to press this button first to get the
pressure sensitivity turned on in the Flash application. This can be fantastic for
creating original artwork in Flash, or tracing over line drawings scanned in. This
is also associated with the brush tip option. If you choose a small brush tip and
have the use pressure option turned on, you will not get a larger brush tip than
the size you have selected.
48
Brush Size
Î Fig 1-40 Brush Tips
This is a drop down menu of the 10 different brush tip sizes you can use in
Flash. This is not a lot of selection, however it is similar to how the Eraser tool
functions. You can use the Zoom tool to change your magnification, and your
brush tip will stay the same size on the screen. So if you are looking for a smaller
brush tip, you can choose the smallest tip available, then use the Zoom tool to
make the drawing area larger on your screen.
Brush Shape
Î Fig 1-41 Brush Tips
This is a drop down menu of the 9 different brush tip shapes you can use in
Flash.
Paint Bucket Tool
Î Fig 1-42 Paint Bucket Tool (K)
The Paint Bucket tool in flash fills large areas with color. It will not fill the stage
area. If you need to change the stage color, look at the Modify > Document
dialogue box. Pretty much you click with this tool inside an enclosed area and it
fills it with whatever selected fill color you chose. There are some interesting
options for this tool. Lets take a look.
•
•
Download the file PaintBucketTool.fla from the Flash practice files.
Open this file in Flash.
Î Fig 1-43 PaintBucketTool.fla
You initially notice a series of circles; some will have gaps.
•
•
•
•
•
•
•
Select the Paint Bucket tool.
Select a fill color.
Try and fill the big gap circle.
Try and fill the large gap circle.
Try and fill the medium gap circle.
Try and fill the small gap circle.
Try and fill the no gap circle.
Notice that the only two circles that filled up were the no gap circle and the small
gap circle. To see the small gap, select your zoom tool and zoom in as close as
you can get. The gap is an easy thing to miss, and in other applications you
would have filled not only the object, but the surrounding area as well. Flash was
able to ignore the gap, and it can ignore some other size gaps as well. This
example is designed to demonstrate what those gap sizes look like. Note: this
example is sensitive to other zoom factors. For everything to work correctly,
make sure that you are at 100%.
50
Î Fig 1-44 Gap Size option
Locate the gap size option drop down in the options for the paint bucket. Notice
that by default Close Small Gaps is the option selected.
•
•
•
Select the Close Medium Gap option.
Select a new fill color.
Try and fill all the circles again.
Notice that Close Medium gaps option ignores the medium gap and anything
smaller.
•
•
•
Select the Close Large Gap option.
Select a new fill color.
Try and fill all the circles again.
The large gap circle was filled this time, but the big gap circle was left alone. To
fill the big gap circle you have to temporarily bandage the gap with an outline
tool, fill the circle, select your bandage, and delete it. This is one of many
workarounds for this problem.
Î Fig 1-45 Lock Fill Tool
There is one more option available in the options for the Paint Bucket; it was also
available in the Brush tool as well. The option is called Lock Fill. This will only
affect gradient fills, blends of color.
•
•
•
•
Select a gradient fill.
Fill one of the shapes in the center of the stage.
Select the lock fill option.
Fill the other shapes on the stage.
Notice the other shapes don’t really have a gradient fill, but it looks like the
edges of the gradient are filling the surrounding objects.
51
Fill Transform Tool
Î Fig 1-46 Fill Transform Tool (F)
With the fill transform tool you can adjust how the gradient fills a shape.
•
•
•
Select the Fill Transform tool.
Click once in the gradient fill on the stage.
Now you can use the handlers you see around your fill to adjust the gradient.
Î Fig 1-47 Fill Transform Tool Handlers Linear & Radial Gradient
Flash gives us two types of gradient fills, Linear and Radial. Linear gradients
blend colors that are lined up one after another. Radial gradients start from a
central point and radiate outward in a circle. See figure 1-44 above.
•
Fill all your shapes with a solid color again.
52
Ink Bottle Tool
Î Fig 1-48 Ink Bottle Tool (S)
What is the one thing (aside from the text) about these circles that has not
changed since the beginning? The outline of the circles is unchanged. In other
programs the paint bucket tool can also fill the outline of a circle with color. If
you try to do that in Flash and nothing happens. Flash gives us a special fill tool
just for outlines. The Ink Bottle only affects outlines of objects.
•
•
•
Select the Ink Bottle tool.
Select a color, Stroke height, and Line style in the properties panel.
Click on one of the circles on the stage.
53
Eyedropper Tool
Î Fig 1-49 Eyedropper Tool (I)
Simply put the Eyedropper tool samples color, then it automatically switches you
to the most common fill or outline tools (depending on what you sample).
Sample a Fill color, and you are thrown into the Paint Bucket tool. Sample an
outline, and you are thrown into the Ink Bottle tool.
•
•
•
Select the Eyedropper tool.
Place the Eyedropper over a fill color.
Place the Eyedropper over an outline.
Notice that a paintbrush or a pencil appears next to the eyedropper when you
roll over one of these items on the stage. Flash, however, forces you into a tool
once you use the eyedropper. It does not cross sample a fill color to an outline,
at least not without a keyboard shortcut.
•
•
Place the eyedropper over a solid fill color, or an outline.
Hit the Shift key on the keyboard.
Notice that it’s not a pencil or a paintbrush next to the eyedropper…who knows
what that is. However, when you shift and click with the eyedropper and you will
cross sample color to both outline and fill options. Note: gradients cannot be the
color of an outline, so gradients will not cross sample.
Hand Tool
Î Fig 1-50 Hand Tool (H)
The hand tool is pretty simple. Once you select it, you can click on the stage and
scroll it around, instead of using the scroll bars at the edge of the stage.
However, we usually don’t select the hand tool directly. Typically we use a
keyboard shortcut. This is the largest key on the keyboard, so this makes it an
easy keyboard shortcut to remember, the Space Bar.
•
•
•
•
•
•
•
Select any other tool in the tool bar.
Place your cursor over the stage someplace.
Press the Spacebar.
Look at your cursor; it should be the hand tool.
Use the Hand tool with the Spacebar still depressed.
Let go of the mouse, let go of the Spacebar.
You should see the original tool you had selected before.
54
Zoom Tool
Î Fig 1-51 Zoom Tool (M, Z)
Like in any other application, this is the magnify tool, used to zoom in or out of
whatever you see on the stage. You can use the Zoom tool to change
magnification of the stage or there is a quick drop down menu located at the
bottom right of the Timeline you can use for this as well. It gives you options for
25%-800%, show frame, or show all. You can type in your own values as well.
This also tells you what your current magnification is. The show
frame option will zoom in or zoom out to show you the entire stage
on your screen, no matter what panels are open currently. The
show all function will zoom in or zoom out to show your all of your
objects on the stage.
Î Fig 1-52 Zoom Drop Down menu
Text Tool
Î Fig 1-53 Text Tool (T)
The Text tool is basically a simple word processor built into Flash. There are
three main modes for the Text tool: Static Text, Input Text, and Dynamic
Text. Primarily for now we will be using the Static Text option. Static Text allows
us to create basic text content in our projects. A little later on we will talk about
how the input and dynamic text options work, once we discuss the idea of
Variables in Flash.
All of our Static Text options are available in the Properties Panel. From here we
can select any font (available in the Operating System), Font size, Color, kerning,
bold, italic, alignment, and many other typical text formatting options.
•
•
•
•
•
•
•
Select your Text tool.
Click once on the stage and type a word or two.
Select the Arrow tool.
Break your text apart (Modify > Break Apart).
Notice your text is broken into separate editable text fields.
Modify > Distribute to Layers.
Notice now that each of your letters is on a separate layer.
Free Transform Tool
Î Fig 1-54 Free Transform Tool (Q)
The Free Transform tool gives us the basic scale, rotational, and skew options.
Now in Flash MX we also get Distort and Envelope options as well to give us the
ability to freely transform our object.
•
•
•
Draw a square on the stage.
Select your square.
Select the Free Transform tool from the Tool panel.
Initially you are in a scale mode, even without the scale option being selected.
You will see a series of handlers on each of the sides of your square, and the
corners. Changing the scale from the corners will scale your square
(proportionally if you are using the Shift key), using one of the handlers on the
sides will allow you to adjust the scale in just that one aspect. The scale mode
option is slightly different from this. Try also using the control key here as well,
you also get some free transform options.
Scale
Î Fig 1-55 Scale Option
•
•
•
•
Select your square
Select the scale option from the bottom of the tool panel.
Grab one of the corner handlers; this will scale your object proportionately.
There is no need to hold down the shift key to accomplish this.
Grab one of the side handlers; this will scale only one aspect of the object at
a time.
Rotate and Skew
Î Fig 1-56 Rotate & Skew Option
•
•
•
•
•
•
•
•
Select your square.
Select the Free Transform tool.
Select the Rotate and Skew option at the bottom of the Tool panel.
Click and Drag one of the corners, this will rotate around the center point.
Move the center point and try the rotate tool again.
Undo so your square comes back to normal.
Try one of the side handlers now. This is skew. It gives you a trapezoidal
transformation of your shape.
Undo so your square comes back to normal.
Distort
Î Fig 1-57 Distort Option
Distort allows you to change the rough shape of your object
• Select your square.
• Select the Free Transform tool.
• Select the Distort option from the bottom of the Tool panel.
• Grab one of side handlers and move it. This gives you a simple single aspect
scale.
• Now try the same while holding down the ctrl key. This gives you skew.
• Undo so your square comes back to normal.
• Grab one of the corner handlers and move it. This allows you to distort your
object.
• Undo so your square comes back to normal.
• Grab one of the corner handlers, hold down the shift key, and move it. This
allows you to distort two corners evenly, depending on which direction you
move the mouse. A type of perspective distortion.
• Undo so your square comes back to normal.
Envelope
Î Fig 1-58 Envelope Option
Envelope gives you total freedom to transform your object however you like.
• Select your square.
• Select the Free Transform tool.
• Select the Envelope option from the bottom of the Tool panel.
• You will still see 4 (square) side and corner handlers; you will also see a
number of circle handlers as well.
• The square handlers control corners of your shape, the circle handlers are at
either end of the square handler and control the curve leading to the square
corner handler.
• Grab one of the square handlers and move it away from the object on stage,
you should see the two circle handlers connected at either end of the square
handler.
• The circle handlers act like a kind of sea-saw around the square handler, grab
one and move it about.
• Grab the other one and move it now.
Note: The Free Transform tool cannot transform symbols, bitmaps, video
objects, sounds, gradients, object groups, or text. If a multiple selection contains
any of these, only the shape objects are distorted. To transform text, first
convert the characters to shape objects.
57
Pen and Subselection Tools
Î Fig 1-59 Pen (P) & Subselection (A) Tools
The Pen and Subselection tools are similar to the tools you would see in
illustrator, tools that create and edit Bezier Curves. This is one of the most
precise drawing tools you can use; it can also be one of the hardest to learn as
well. For the purposes of this exercise we will focus more on using this as an
editing tool rather than using it for creating original art, although we will look at
both aspects of using the pen and subselection tools.
•
•
•
Draw a circle on your stage.
Select the subselection arrow tool.
Click on the outline of the circle.
Î Fig 1-60 Circle Anchors
Notice you see a series of 8 points around the circle. These 8 points are the
anchors for the separate curves making up this circle. Each Anchor has two
handlers.
•
Use the Subselection tool to click on one of the Anchors
Î Fig 1-61 Anchor Selection
Your selected anchor turns white, and it displays the curve handlers on either
side of the anchor, as well as the curve handlers attached to the adjacent
anchors.
58
•
Move your selected anchor (with the sub selection tool).
Î Fig 1-62 Moving an Anchor with the Subselection tool.
•
Move some of the curve handlers around now.
Î Fig 1-63 Moving the Curve handlers
The Subselection tool is one of the tools we have to edit vector objects; it is a
very precise tool and takes some practice to get used to using it. Even if you
have practice using similar tools in Adobe Illustrator, your experience here in
Flash will be somewhat different. We suggest using your black arrow tool first to
do your basic editing with Vector Clay, then if you need more precise editing,
move on to the Subselection tool.
Pen Tool
The Pen tool draws the anchor points you were editing above. This can be a
tricky tool to learn. Some of us can get a handle on it in a few hours, some in a
few days or weeks, and some of us just never quite get it. If you remember our
talk about vector objects this earlier, a vector is a mathematical interpretation of
a line or a curve. The anchor points that the pen tool draws are the points on a
curve where it changes direction.
Drawing with the Pen tool is not usually like drawing with the Pencil tool. You
have to have some idea of what the shape looks like that you want to draw.
Some artists scan in a sketch and trace it precisely with the pen tool; others will
have a diagram of their drawing next to them as they draw.
•
•
•
•
Select your Pen tool.
Click someplace on your stage, release your mouse button and move the
mouse.
Draw a rectangle using the same method from above, set three more anchor
points.
When you set the last anchor point, make sure you finish it off by clicking on
your first anchor point to finish off your shape.
Î Fig 1-64 Drawing a rectangle with the Pen tool.
Drawing an Oval with the Pen tool
To draw curves with the pen tool it is a little bit different. You have to drag the
curve out while you set the anchor point.
•
With the Pen tool Click an anchor point on the screen, but move your mouse
down before you let go of the button.
Î Fig 1-65 First Anchor Point
•
Move your cursor across (horizontally) from your original anchor point, click
down with the mouse and move your mouse up before letting go of the
button.
Î Fig 1-66 Second Anchor Point
•
With your cursor click on your original anchor point, and move the mouse
down before letting go of the button.
Î Fig 1-68 through 1-69 Finishing the Oval
Student Notes