Flash Professional CS6 - Sahalsoftware€¦ · Flash Professional CS6 P a g e 6 | 39 We can also...
Transcript of Flash Professional CS6 - Sahalsoftware€¦ · Flash Professional CS6 P a g e 6 | 39 We can also...
Flash Professional CS6
P a g e 1 | 39
Content:
- Lesson 01: What is Flash?
- Lesson 02: Introduction to the Flash Interface
- Lesson 03: Getting to know the Flash interface
- Lesson 04: Working with panels and workspaces
- Lesson 05: Understanding document orientation and guides
- Lesson 06: Importing Graphics
- Lesson 07: Understanding and importing bitmaps
- Lesson 08: Understanding and importing vector files
- Lesson 09. Structuring a Flash Document
- Lesson 10: Organizing layers
- Lesson 11: Defining frames and keyframes
- Lesson 12: Previewing a project
- Lesson 13: Motion Tweens
- Lesson 14: Test
Flash Professional CS6
P a g e 2 | 39
Lesson 01: What is Flash?
Adobe Flash Professional is an application used by:
1. web designers,
2. developers,
3. Animators to create rich content for screen and web environments.
Web designers use Flash for creating interactive and animated content for web
sites and mobile applications, working with and converting video using Adobe
Media Encoder.
Developers use Flash for creating and editing ActionScript using the built-in
coding tools, developing cross- platform mobile applications using Adobe
AIR, debugging and testing applications on AIR-enabled mobile devices, and
building applications which can be distributed across various device app store
ecosystems.
Animators use Flash for animating characters and objects using sophisticated
motion tweens, adding visual effects with various filters and blurs, and
creating lifelike environments using the various drawing tools.
Flash Professionals allows you to create engaging artwork, applications, and
animations like the ones you see in this tutorials. As a member of the creative suite,
Flash Pro integrates with several other Adobe applications, like Photoshop for
bitmap editing and Illustrator for vector symbol manipulation.
No matter if you are a web designer, developer, or animator, Flash Professional
provides you with an array of tools to help you create rich and engaging content for
the web, screen, or mobile devices.
Flash Professional CS6
P a g e 3 | 39
Welcome
Welcome to Flash Professional CS6 Essential Training. In this course, I'll start by
showing you how to navigate around in Flash and utilize parts of the interface like
the stage, library, and the timeline. Then I'll show you how to import artwork into
Flash, as well as create and manipulate some of your own using the Drawing tools.
We will see how to create simple animation using motion, shape, and IK tweening.
I'll also show you how to incorporate audio and video into Flash, as well as
interactive controls such as buttons and simple ActionScript.
Finally, I'll demonstrate publishing your files for browser, desktop, or mobile
deployment. Throughout the course you will see a series of animals drawn by one of
the art students and a solar-powered house outfitted by the energy company. We will
be covering all the aforementioned features, plus plenty of techniques and best
practices, so you can create your own interactive compelling content in Flash. So
let's get started with Flash Professional CS6 Essential Training.
Flash Professional CS6
P a g e 4 | 39
Lesson 02: Introduction to the Flash Interface
How to Start Flash?
In Windows 8,
- start screen/flash
Flash Professional CS6
P a g e 5 | 39
Choosing the type of document to work with
When you first launch Flash, the first thing you should see is the Start screen. Right
here in the center of the screen is where we create new blank Flash files.
It might look kind of confusing at first because you're presented with what looks like
a lot of different kinds of files to choose from, but really they are not that different
at all. For most of the options, you are going to end up with a new blank unnamed
source.fla document. The only real difference between these choices is having Flash
set up some options about the final output for you.
Let's check that out by choosing the first option at the top that says ActionScript
3.0. Our new document is created and the file name is untitled .fla.
You know it's an FLA if you go to File and then Save As, .fla. I am not going to save
this, so for now.
Let’s just look on the right side of the screen at what's called the Properties panel.
The Properties panel is the spot to set all the settings for our Flash document. Here
in the area marked Target, you can see better output will target Flash Player 11.2, so
we know that our output from Flash is going to be a SWF file that's going to play in
a web browser.
Flash Professional CS6
P a g e 6 | 39
We can also see that our SWF will be using ActionScript 3.0. You can open up the
Target dropdown to see the other options. You could target your SWF to play on
older version of the Flash Player if you wanted. If you want your project ultimately
to deploy as an Adobe AIR for desktop, you can choose AIR 3.2 for Desktop, and
when you publish your file, a .air file will be created. Likewise of course, you could
see that you can choose AIR 3.2 for Android or AIR 3.2 for iOS, if you want to
target one of those platforms. And when you publish, the appropriate files for
deployment to Android or iOS will be created.
Flash Lite is an older Flash Player for mobile devices. You probably won't use this.
I am going to leave this at Flash Player 11.2 since I want to develop a Flash piece
for the web to be viewed from a desktop computer. If you pull open the Script
dropdown, you can see that you could specify that your SWF is going use
ActionScript 1, 2, or 3. Even if you never write a single line of ActionScript code in
your project, you still have to tell Flash which version of ActionScript you want to
target. Now I am going to close out of this document to return to the start page.
This time I am going to click on ActionScript 2.0 to open a blank document. Again,
we get our blank unnamed FLA document and over in the Property inspector we see
that our published SWF file is going to target Flash Player 11.2 but this time use
ActionScript 2.0 instead of 3.0, and really, that's the only difference between this
blank file and the one we created just a moment ago. Flash is just setting these
options in the dropdowns for you ahead of time. The combination we see here is
probably not when you would use.
Flash Professional CS6
P a g e 7 | 39
As you can infer, ActionScript 3.0 is the most recent and robust version. ActionScript
2.0 and 3.0 can talk to each other, but they're different in some significant ways, and
it's not exactly easy. So unless you have a specific reason to use an older version of
ActionScript, stick with 3.0. One thing to note is that to use ActionScript 3.0, you
have to target Flash Player 9 or higher. Well, Flash player 9 came out in 2006 and
as we discussed earlier in the course, new versions are adopted pretty quickly over
time, so you should be safe choosing a more recent version of the player.
Lesson 03: Getting to know the Flash interface
Let's start getting familiar with the workspace in Flash. So from the Start page, I am
going to click ActionScript 3.0 to open up a New FLA file in Flash. The first thing
you probably notice on your screen is the big blank rectangle in the middle. In
Flash, this is known as the Stage and is where you'll place all your content for your
Flash movie. You can place content on the screen but off the Stage if you wish. The
gray area around the Stage is known as the pasteboard. And for an example, I am
going to select my Rectangle tool and quickly draw a rectangle half on and half off
the Stage.
Flash Professional CS6
P a g e 8 | 39
Now I am going to press Ctrl+Enter on my keyboard, to publish the SWF File and
preview what it looks like as the finished product. As you can see, only half of the
rectangle is visible. So, while it's okay to put things on to the pasteboard, if you
want it to appear in the final finished SWF file, it has to be on the Stage. Having
items start offstage and then animate in later, or vice versa, is a common technique
for having visual elements enter and exit the user's field of view.
All right, let's close our SWF file, and know that the pasteboard is also really useful
for deselecting things. If I switch to my Arrow tool to select my rectangle but later
need to deselect, clicking on the pasteboard is a good way to do that. While building
Flash projects, you'll probably have a lot of other content on the Stage, but not so
much on the pasteboard. So it'll allow you to deselect something without accidentally
selecting something else. I'll select my rectangle again really quickly and point out
Flash Professional CS6
P a g e 9 | 39
that another choice for deselecting is hitting Ctrl+Shift+A on the keyboard for
Windows.
Above the Stage, across the top of the screen, are all the menus for Flash. The File
menu has some pretty standard items for software, like New to create a New
Document, Open, Save, Save As, and so on. If you Choose File > Publish Preview
> Flash, the SWF file will be created just like it did when we pressed Ctrl+Enter a
moment ago. We'll explore the rest of the menus as we need throughout the course.
At the top of the screen near the menus is this handy zoom dropdown to adjust the
view of content on the Stage.
You can play with this a little bit if you want, but since we don't have much on our
screen right now, it doesn't really show much. So we'll explore all the ways to zoom
in and out with precision later on.
Now if all your Flash settings are like mine--and I'm just using the default setup from
when Flash is installed-- below the Stage you'll find the Timeline. Anything that's
going to appear on our Stage is also going to appear in the Timeline. A Flash Movie
plays in a linear fashion, and the Timeline helps you control at what point in linear
time your items will appear, and for how long.
It also organizes content into layers. We will practice using the Timeline in detail in
a separate Lessons, but for now, know that the Timeline will be an integral part of
the setup of all your Flash movies. Finally, Flash uses panels, like the Property
inspector here on the Right, the Library panel, and the toolbar, where all our
drawing tools are. These are the where all the controls for you as the developer are,
and we'll look at that in depth soon. For now, these are the main elements that you'll
interact with while developing in Flash.
Flash Professional CS6
P a g e 11 | 39
Lesson 04: Working with panels and workspaces
Flash uses panels to display controls for you as the developer. To better demonstrate
some of the most commonly used panels, I'm going to start a new blank
ActionScript 3.0 FLA.
Flash Professional CS6
P a g e 12 | 39
Now I'm going to choose my Rectangle tool and quickly draw three rectangles on
my Stage. So I'll draw one here and a second one here and a third here. Panels are
displayed in the Windows surrounding the pasteboard and the Stage, and you can
see that a number of panels are visible by default.
Know that if you can't find a panel, or you want to turn on one that's not on by default,
you can open up the Window menu and all the panels available to you are listed
here. Now, if I choose the Arrow tool and click on the Stage--or the pasteboard is
okay too--look to the right and you'll see the Properties panel that we mentioned
earlier. The Properties panel displays information about whatever you've selected.
Since we clicked on the Stage, the Properties panel is displaying information about
our FLA. So we can see that we're targeting Flash Player 11.2 and ActionScript 3.0.
Our document has a background color of white, and a Stage dimension of 550 x 400.
If I double-click one of the rectangles, notice that the Properties panel changes to
tell us information about the rectangle. For instance, the Width of this rectangle is
141.95 and the Height is 65. The X position is 101 and the Y is 39. I can also type
in new values if I wish. So for instance, I'll change the Width of this rectangle to
100.
So I'll click on the pasteboard to deselect, and notice that there's a whole bunch of
other panels here, such as the Color panel, which allows you to precisely control
color of objects on the Stage, and the Swatches panel, which can help you create a
custom palette for use in your movies. Notice at the upper-right of each panel, if
you click on this little arrow, a flyout menu appears … which offers you options
pertinent to that panel. So here's the one for the Swatches panel, and here's the flyout
Flash Professional CS6
P a g e 13 | 39
menu for the Color panel. So the Library panel is a place where you can keep copies
of the items that you're using in your Flash project, like bitmaps, images, and
sounds.
It's a pretty important panel, and we'll cover it in depth a little later on in the course.
Down at the bottom of the screen is the Timeline, which is where you can control
when and for how long content appears on the Stage, as well as create animation.
The Motion Editor allows you to fine-tune animations, and since we don't have any
animations, right now nothing shows up. Other panels that may appear here in this
area are the Output panel, which I'll open up for you, and the Compiler Errors
panel. This is where Flash can give you messages about any errors or problems
with your movie when you test.
For now, I'm going to move my mouse right over to the Toolbar panel, which is
where all the drawing tools are kept. I'm going to choose the Rectangle tool again,
and when I do, you'll notice that two places on the screen change:
- First of all is the Properties panel, and it shows you the different
settings that you can set for a rectangle that you're about to draw, for
instance the fill and the stroke, the width of the stroke, the style, and
so on and so forth.
Also notice there's some settings below the Drawing tools, such as the fill and the
outline color again. If I click on several other of the tools in the toolbar, like the Text
tool, the Line tool or the Pencil tool, you'll see that the Properties panel and the area
below the toolbar change depending on what options are available for that particular
tool.
Flash Professional CS6
P a g e 14 | 39
Another really useful tool is the Align panel. Let's say I want to align my three
rectangles on the Stage. So I'm going to grab my Arrow tool from the Tools panel
and now click and drag around all three rectangles to select all of them.
To open the Align panel, I'm going to go to the Window menu and then Align.
Notice that the menu also tells you what the keyboard shortcut is for the Align panel.
It's Ctrl+K for the PC. So looking at the options here, we could align our rectangles
on the left edge, horizontal center, or on the right edge. Of course you could align
them on the top edge, vertical center, or along the bottom edge. I'm going to align
them to the left. Notice in the second row there are some options for distributing
them so there's an equal amount of space between them, like distribute top edge,
vertical center, or bottom edge.
Flash Professional CS6
P a g e 15 | 39
Lesson 05: Understanding document orientation and guides
Let's take a look at the coordinate system in Flash used for determining position. To
demonstrate, I've opened up the file called position.fla in the local disk for this
lesson, and you can see that we have a logo for the Roux Academy of Art, Media,
and Design. To better visualize the units of measurement, you might want to turn on
the rulers. To do this, go to the View menu and choose Rulers. The default
increment of measurement on the rulers is pixels. You can also see that the origin
point for the Stage is measured from the upper left-hand corner.
In Flash, the X axis goes horizontally, starting at 0 at the upper left-hand corner and
going across the top. The Y axis also starts at 0 at the upper left-hand corner and gets
bigger as you go down the left-hand side of the Stage. So if I use my Arrow tool to
click on the logo, a little black cross appears on the upper-left of the logo that
indicates its registration point, or what point on the logo its position is measured
from. You can look at the logo's registration point relative to the rulers to figure out
its position, or you could just look in the Property inspector.
We can see that the X position is 100 and the Y position is 100 as well. I'm going to
type in 250 for the X position, and when I do, you can see that the logo moves over
150 pixels on the X axis to the right. To further help you line things up on the Stage,
you might like to use guides. To create a guide line, first click on the pasteboard
somewhere to make sure you've deselected the rectangle. Now click and hold on
either one of the rulers and drag a guide out.
You can create as many guides as you wish, and you can also reposition them by
simply clicking and dragging them to a new location with your mouse. You could
also double-click on a guide and type in the location you want it to have. So I will
double-click on this bottom one and tell it that I want it to be at 250 pixels. Guides
are only a tool for you as the developer. If I publish my movie, you will see that the
guides don't appear in published SWF.
So back in Flash, if you want to lock your guides in place so you don't accidentally
move them, you can go to the View menu, then Guides and then Lock Guides. And
Flash Professional CS6
P a g e 16 | 39
you can see now I can't select and move them around anymore. If it's helpful for you
to change the color of the guides, you can go to the View menu, then Guides, and
then Edit Guides. I am going to click on the little color chip to change my guides
from cyan to a magenta color. You also have the option to turn the visibility of your
guides on and off by ticking Show guides, and you can also lock or unlock your
guides from here as well.
I'll unlock mine. Snap to Guides allows you to make objects on the Stage line
themselves up with the guidelines, and you can choose in the dropdown how
responsive this is going to be. I will stick with Normal and click OK, and you'll see
that as I drag my logo around, the spot in the center lines itself up with the guidelines.
It snaps right to them. To get rid of a guide, you can simply drag the guide back up
onto the ruler, or as you may have noticed, you can go to the View menu, then
Guides, and then Clear Guides.
ZOOM: you can also use a upper corner ZOOM or View menu/Magnification or
Hand Tool
Flash Professional CS6
P a g e 17 | 39
Lesson 06: Importing Graphics
Navigating in the library
The library is the place in Flash where you can keep copies of and organize all your
reusable assets from your movies. To work with libraries, I've opened up animals.fla
and welcome.fla from your local disk for this Lesson. Now first off, if you don't see
the library, you can always open it up by going to Window and then choosing
Library. So in my animals library you can see I have several different items here,
and if you click on them, you'll see a preview in the Preview area.
You can click on the Name header to organize your library items by name. If you
expand the library out horizontally, you'll see that you can organize them by Use
Count as well. All of mine are used only once, so that doesn't do much right now.
You can also organize them by the date modified. So I'll shrink my library back
down again. You can also create different folders to help organize your assets. So
I'll click on the New Folder icon and give it the name of animals. In the library
bottom
Flash Professional CS6
P a g e 18 | 39
Now I can drag and drop each of my animals into the folder, and then you can expand
or collapse your folder to see what's in it. Notice that you can also double-click on
the name of anything in the library and rename it. So I'll rename my folder to
jungleanimals. A good best practice to keep in mind is to make sure that the names
of your items and folders are something intuitive and descriptive. This may not seem
that important for a file with just a few items in the library, but trust me, libraries can
get big quickly, and you can waste huge amounts of time trying to figure out what's
what if you have 50 different items and they're all named something nondescriptive
like image 1, image 2, and image 3.
So if you click on an item in the library and click the little Info icon at the bottom,
you can get more information about that particular library item. Go ahead and cancel
out of that. If you want to delete something out of the library, you simply click on it
and then click the icon of the trashcan at the bottom.
Notice that I also have another FLA open here, welcome.fla. There's nothing on the
Stage of this FLA, but notice that there's a single item in the library, with the name
of welcome, and it says, "Welcome to the Jungle!" If I want to get this item from
one library into the animals library, I could just right-click on the welcome item and
choose Copy. Then I could flip back to my animals.fla and in the library, right-click
and choose Paste. You notice that I dropped my welcome item into the jungleanimals
folder, and I don't want it there, so I'm just going to drag it up and out.
Actually, I'm going to delete that welcome item, because they're several other ways
to access items in a different library. So I'm going to run through those quickly here.
So one method would be here in animals.fla, I'm going to change the dropdown at
the top of the Library panel to welcome. Notice that I'm still working in my
animals.fla file, but I'm looking at the library of welcome.fla.
I'm going to change the dropdown back to animals.fla so we're looking at this
movie's own library. Now notice as I toggle back and forth on the tabs between
animals and welcome, the corresponding library appears in the Library panel. So
I'm going to flip over to welcome.fla and then click the Pin Current Library icon.
Flash Professional CS6
P a g e 19 | 39
It looks like a little pin right here. Now, when I flip
back
and forth between my FLA files, I see the library for a welcome all the time,
regardless of which FLA file I'm looking at.
So I'll just go back to welcome.fla and unpin the library, and now when we toggle
back and forth, each FLA displays its own library again. Back in animals.fla, there's
another trick you can use to have the assets from two libraries open at once. I'm
going to click the New library panel icon up here on the right. Now I have a second
Library panel open, and notice in the dropdown that I can choose between animals
and welcome. So I'll choose welcome.
So I have a library of both FLAs open at the same time. If I had 6 different FLA files
open, I could choose from all 6 of their libraries here in the dropdown.
So I'm going to close that second Library panel, and
now I'll also close welcome.fla. I'm not going to save any changes. And the final way
to have the assets of multiple libraries open is to go to the File menu, and then
Import, and then Open External Library. Even though it says Open Extra
Library, I'm going to navigate to my welcome.fla file (In my local Disk) and choose
Open, and you see here that it opens it up as an external library.
So after all of that, finally, I'll drag and drop the welcome sign into animals.fla. It
appears on the Stage and also, of course, in the library for animals.fla, right there.
So the library is a place to store all you reusable assets, organize, and sort them. And
as you've seen, there's about a million different ways to access the assets in other
libraries as well, so you can combine assets from different FLA files easily.
Flash Professional CS6
P a g e 20 | 39
Lesson 07: Understanding and importing bitmaps
While Flash provides you a number of drawing tools, using imagery that's been
created outside of Flash is likely going to be something you'll want to do often. So
I've started a new blank ActionScript 3.0 file, and I've saved it into the in my local
disk for this lesson as bitmapImport.fla. In the Property inspector, notice that the
default document settings have the Stage dimensions as 550x400 and a white
background color. Now for bitmap images, Flash can import the common web file
types like JPEG, GIF and PNG, although it's not limited to just those three.
If you need to import an image that has transparency, that transparency will be
preserved with PNG files. So there's two ways to import bitmaps into Flash, which
are similar:
1. I'll start by going to the File menu and choosing Import, then Import to
Library. In the local disk, I'll choose the file called
jungle_background_550x400, and then click Open to import. Flash thinks
about it for a minute and then the import process is done. Nothing's on the
Stage, but if I open my library, you'll see the jungle_background image
there, and you can click on it to get a little preview of it in the Library.
From here, I can drag and drop the image from the library onto the Stage. I'm going
to undo that and actually, I'm going to delete the jungle_background out of the library
so we can look at the other way to import bitmaps.
2. So now I'll go to the File menu and choose Import, and then Import to
Stage. I'll select that same jungle_background image from my local disk and
Flash Professional CS6
P a g e 21 | 39
click Open, and this time the image is placed automatically onto the Stage, as
well as in the library. So the difference between Import to Library and
Import to Stage (CTRL+R) is really just that the Import to Stage places a
copy of the image on the Stage for you.
So I'm going to click on the image on the Stage to make sure it's selected, and now
in the Property inspector, I'm going to notice that the Width of our image is 550
and the Height is 400. Well, that's great that the image is already at the same size as
our Stage, because it's a bitmap. Bitmap images don't scale up and down easily. You
can think of image information for bitmaps kind of like a grid. For instance, in our
image, one pixel is green, then the pixel next to it is a lighter green, and then the
pixel next to it is brown, and so on, and so on.
If you need to scale a bitmap image up so it's bigger, your image program has to
guess what color to use to fill in the extra space you've added to the grid. Likewise,
scaling a bitmap image down also require some guesswork as to what color to make
each pixel, since you're essentially making the area of the grid smaller. You can see
this behavior by clicking on the image to make sure it's selected and then over in the
toolbar, selecting the Free Transform tool. It's the third one from the top.
Transformation handles appear on the image, and you can then resize the image.
We'll talk more about the Transformation tool in a different lessons, but for now, if
I approach the upper right-hand corner of the image, a double-headed arrow
appears. This allows me to change the width and height of the image at the same
time. So I'm going to zoom out a little bit, and then I'm going to make my image
really, really, really big. See how the image quality of it has degraded as the image
got bigger? The trees, leaves, and other items on the image start looking blocky or
pixelated, and that's because as the bitmap scales, there's not defined information to
fill in the extra pixels that I'm asking the image to include.
It's just guessing. Pictures you take with the camera are a great example of imagery
captured as a bitmap. You would use a program like Adobe Photoshop to be able to
resize bitmaps without getting this kind of pixelation. So the conclusion to take away
about bitmap images is that it's best to have them sized at the correct dimension you
Flash Professional CS6
P a g e 22 | 39
need before importing them into Flash. So now that we've sufficiently messed up our
image, I'll change back to the arrow Selection tool. I'm going to click on image to
make sure it's still selected. In the Property inspector, I'm going to make sure that
this little Lock width and height values together icon looks like a broken chain, as
opposed to a whole chain.
This is going to allow me to change the Width and Height dimensions separately
from each other. So I'm going to change the Width back to 550, and the Height back
to 400. Remember that Flash measures the origin point from the upper left-hand of
the screen, and the position of items on the Stage, by default, is measured from the
upper left-hand corner as well. So I'm going to put 0 for the X and 0 for the Y so that
our image looks centered directly on the Stage. So now our image is placed correctly
and the pixelation that we saw when we stretched the image out has gone away.
I'll zoom back in, just so we can see that. So you've seen that importing bitmap
imagery into Flash only requires the simple steps of going to File and then Import,
and then choosing if you want to import to the library or to the Stage. Remember
that as a best practice, have your bitmap sized correctly before bringing them into
Flash.
Flash Professional CS6
P a g e 23 | 39
Lesson 08: Understanding and importing vector files
Flash allows you to import files with vector artwork to use in your Flash projects.
The import process is similar to that for bitmaps, but you have a few more options.
To import vector artwork, go to the File menu, scroll down to Import, and select
Import to Library.
You could Import to Stage and get a similar result, but we will choose Import to
Library for this demonstration. So I will navigate to the Start folder for this lessons
my local files and choose the file called giraffe.ai and click Open. So we're presented
with some options before we import our file. Down the left-hand side you can select
or deselect which layers from the Illustrator file you want to include in your import.
This Illustrator file is actually somewhat complex. I am going to cancel out of this
and open up the Illustrator file so we can take a closer look at it. You can see that in
layer 1 there is actually four different groups. I will turn the visibility of all four of
them off and then turn them on again one by one. And you can see that each one is
the giraffe in a different position as he walks. I think the one I like best is the second
from the bottom. So I will turn the other ones off. And just notice that he's got a lot
of different layers, even for just this position.
So I'll close the Illustrator file and then go back in to Flash. I will go back to File,
and then Import, and then Import to Library, choose giraffe, and now I'll deselect
the checkbox next to each layer except for the one second to the bottom, called
layer 2, since that's the one that's got the position of the giraffe that I want. Now I'll
click on pos.2 title and you'll see some more options for the import show up on the
right-hand side. Basically, from here, the default settings that are selected should be
okay, click OK.
Flash Professional CS6
P a g e 24 | 39
It doesn't look like much has happened because we imported the image into the
library, not to the Stage, but in the library, indeed, there is giraffe.ai and if I click
on him, we see a little preview. He is in here as a graphic symbol, and we will cover
symbols in detail later.
So I am going to drag a copy of the giraffe out of the library and drop it onto the
Stage. It's a little too big, so I'll head over to the toolbar and grab the Free Transform
tool, you can change the horizontal or vertical dimension by dragging the transform
handles. Notice that you can change the dimensions as much as you want and the
image always stays looking sharp and non-pixelated. The giraffe might look a little
stretched, but he is non-pixelated.
And that's because this is a vector graphic. Instead of storing information about the
image like a grid, like bitmaps, vectors instead use mathematical equations to
describe the shapes and curves. As you change the image, the shape of the image is
simply recalculated so it always appears crisp. So I am going to delete my giraffe
because he is all stretched out, and now I will just drag and drop another copy of
him to the Stage. The Free Transform handles are still there, so I'm going to hold
down the Shift key of my keyboard and then click and drag on the upper right-hand
corner of the giraffe.
Dragging at the corner allows you to resize both the width and height at the same
time, and holding down the Shift key allows you to constrain the dimensions of the
giraffe so he scales down proportionally. About here is a good size, and I will just
move him into a good spot so he's having a nice stroll through the jungle. It's a good
idea to have your vector imagery already sized correctly before you import it into
Flash Professional CS6
P a g e 25 | 39
Flash. That way your FLA is not carrying around the extra file size of a giraffe the
size of Godzilla that you'll need to end up scaling down anyway.
However, if you're not exactly sure the dimensions you need, you can see that
adjusting the dimensions after the fact works just fine, in terms of image quality.
With the Arrow tool, now I am going to double-click on the image of the giraffe.
You will notice that the screen changes. The top-left of the screen says Scene 1 and
then giraffe.ai, and the background image is grayed out. What we've done is stepped
into the giraffe image itself. I will double-click again and keep double-clicking until
I have drilled down all the way through the various layers, until I get to the most
broken-down piece of the giraffe's leg.
Notice how the other areas of the giraffe are grayed out, since we have stepped in
several levels to the shape that makes up the giraffe's leg. Notice also how the
upperleft of the screen says Scene 1 giraffe.ai and then several more levels.
What we're seeing here is all the individual layers from
the
original Illustrator file that have been preserved. This proves very useful when you
want to manipulate or animate individual parts of an image. For now, I'll click on
Scene 1 on the upper-left to step back up out of the giraffe image and return to the
main Timeline.
So importing vector imagery into Flash is as simple as going to File and then Import,
and then choosing if you when import to the library or to the Stage. Vector imagery
looks good whether you scale it up or down, but remember, as a best practice, to
have your image resized as closely to the actual size you needed at before bringing
it into Flash.
Flash Professional CS6
P a g e 26 | 39
Lesson 09. Structuring a Flash Document
Adjusting document settings
Let's create a blank ActionScript 3.0 FLA file and look at how to adjust a few
important document settings before adding to any Flash project. So first, I am going
to save my file to my computer as test.fla, and to the desktop is fine. To set the
properties for your document, like background color and size, simply click on the
Stage and look in the Properties panel. The Properties panel tells you information
about whatever thing you've clicked on, and in this case, it's the Stage, so the
document itself.
Before we go further, I am going to grab my Rectangle tool and quickly draw a
shape on the Stage to demonstrate something else in just a moment. So I'll just draw
my rectangle, and then use my Arrow tool and click on the rectangle. We can see in
the Property inspector that the width is 125 and the height is 72. So I will click on
the pasteboard to deselect the rectangle. In the Property inspector, we see the
properties about the FLA document again. Here in the Properties area, I'll click on
the icon of the wrench to edit document properties.
Flash Professional CS6
P a g e 27 | 39
We can see that the current dimensions of our Stage are 550 x 400 and you can
change this by typing in new dimensions. For example, I will put 640 x 480. You
can adjust the 3D Perspective Angle if you want, which will make sense a little later
on in the course. You can also choose to scale content with the Stage. What that
means is any content on the Stage will scale relative to the new size of the Stage
once we click OK. Let's check this, and we'll expect to see our rectangle get a little
bit bigger once we click OK, since we just made our Stage dimensions a little bit
bigger as well.
Here in the Ruler units is where you can also change the units of rulers to Inches,
Centimeters, or other choices. With this radio button, you can make your document
match your default settings in Flash; or content, if you've imported a bunch of things
to the Stage; or you can have it match your printer settings. I am just going to leave
it at Default for now. You can also set the Background color of your document here.
I will just leave it at white. Here is where we can change the frame rate, and you
can see it's currently set to 24.
Flash Professional CS6
P a g e 28 | 39
This affects how fast or slow your Flash movie is going to play. We'll go into a more
detailed discussion of this in the next few movies, but for now, know that setting this
to something between 12 and 30 is generally considered acceptable, and the default
of 24 is just fine. You can also choose to turn on Auto- Save and specify how many
minutes should go by before Flash auto-saves your document for you. That seems
like a good idea, so I'll check this and type in 1 minute. Now, if the settings you have
put here are what you want all new Flash documents to use, you could click Make
Default.
I'm not going to do that though. So I'm about to click OK and look for two things:
first is that the size of the Stage adjusts to the value of 640x480, and the second thing
is that the rectangle should scale up too, since we checked Scale content with Stage.
And indeed, the Stage gets bigger and the rectangle has too. If I click on it with the
Arrow tool, you will see that the width has increased from 125 pixels before to 150
pixels. So I will click on the pasteboard to deselect the rectangle, and you'll notice
that a few of the settings we just saw are available in the Property inspector as well,
specifically Frames Per Second, the Stage dimensions and the Background color.
It makes no difference if you change these here or in the Edit Document Properties
dialog box that we just saw. So notice that there's also a little asterisk next to the
name of my FLA file. This indicates that changes have been made to the FLA since
the last time it was saved. I could hit Save right now, but if we wait for one minute,
as we specified in the Auto-Save area, Flash will save the file on its own. And there
it is. The asterisk is gone, indicating that Flash auto-saved the document for me.
Now, there is another setting you might find useful regarding saving your files, and
that's Auto-Recovery.
Flash Professional CS6
P a g e 29 | 39
Lesson 10: Organizing layers
One good way to organize all your visual assets on your Stage is by using layers.
Layers allow you to control the stacking order of your visual content. If you've
used layers before in programs like Adobe Photoshop or Illustrator, the concept
should transfer easily for you. In Flash, layers are controlled from the Timeline. I've
opened a file called layers.fla from my local disk for this Lesson. Look at the
bottom-left of your screen next to the Timeline, and you'll see that we currently have
one layer in our Flash movie.
It contains the background jungle image and the three animals. You can see that
the monkey's arm looks like it's more in the foreground than the elephant's trunk.
So let's say I want to swap the monkey and the elephant so that the monkey's arm
appears behind the elephant. With the Arrow tool, I can click once on the monkey
and then from the Modify menu, choose Arrange and then Send Backwards. Now
the monkey looks like he is standing behind or further away than the elephant.
You can access those same Arrange commands by right-clicking. So I'll right-click
the monkey, choose Arrange, and then Send to Back. He totally disappears because
he went to the very back of the stacking order, behind the background image. So I'm
going to undo that change by pressing Ctrl+Z on my keyboard; So I'm going to
rightclick the monkey one more time and under Arrange, choose Bring Forward.
So he looks like he is standing closer to the viewer again, and I'm going to move him
to overlap the elephant just a little bit more.
Best practice while working in Flash is to have each visual item on the Stage be on
its own layer. That way you can work with one individual asset at a time and not
accidentally affect other items. As we progress further into Flash and start working
with animation, you have to have individual assets on their own layers to set up an
animation, so organizing your movie layers is a good habit to get into early.
Flash Professional CS6
P a g e 30 | 39
You can have Flash separate out items on one layer into separate layers for you. To
try this, hit Ctrl+A on your keyboard to select all the items on our layer. You can
see that all the animals and the background images have a thin blue line around
them to show that they're selected.
Now, right-click somewhere on the selected items and choose Distribute to Layers
from the context menu. You could alternatively go to Modify menu, then Timeline,
then Distribute to Layers.
We now have five layers. You can turn the visibility of layers on and off as an easy
way to see what's on each layer. So on the layer where it says giraffe, I'm going to
click on the little dot in the column under the icon of the eye. The giraffe
disappears, so that's his layer. I'll click again to turn the layer on and now I'll click
on the dot next to the background layer and the monkey and the elephant layers so
that we can see what's on those layers. You can click on the eye icon itself to affect
the visibility of all the layers at once.
So the original layer that the background and the animals were on is now empty.
You can tell the layer is empty in two ways. First, turning the visibility of the layer
on and off doesn't do anything, since there's nothing on the layer. Also, notice how
the animal and background layers have, in the first frame, the Timeline filled in with
a gray background and a black dot. Having that color indicates that there's something
on the layer. The layer 1 layer has a white background with a dot that's not filled in.
Not having the shading indicates that the layer is empty. Since we're not using that
layer anymore, I'll click on it and then click the icon of the trashcan at the bottom.
So another best practice is to name your layer something intuitive. With only four
items on the Stage, this may not seem that important. But when you have Flash
Flash Professional CS6
P a g e 31 | 39
projects with tens or even hundreds of layers, you'll appreciate layer names that
make sense, as opposed to layer 1, layer 2, layer 3, and so on. Flash did a pretty good
job of naming the layers for us, but to change a layer name, simply double- click on
the name and type in a new one.
I'll rename the bottom layer to junglebg. So to avoid moving things around on the
Stage by accident when you've got them positioned just right, you can lock your
layers. Just like the eye, you can click on the lock to toggle all layers between locked
and unlocked. I'm going to try selecting anywhere on the Stage and you'll see that
it's working. Everything is locked and I can't grab anything. I'm going to leave the
background layer locked, since it isn't going anywhere anytime soon, but I'm going
to unlock the animal layers so we can move them around.
So I'll click on the little icon of the lock on each one of those layers. The column
underneath the little rectangle to the right of the lock icon allows you to view some
or all of the layers as outlines. This can come in handy at times, for instance, if you're
trying to line up one item precisely behind another. You can easily change the
stacking order of your layers by dragging and dropping a layer up or down on the
stack. I'm going to drag the junglebg layer above the elephant and you'll notice the
dark black line that appears to indicate where the layer is going to be placed when
I release the mouse.
When I release, you can see that the elephant disappears because it's now behind
the background image. I'm going to undo that change so we can see the elephant
again. So if you need more layers, simply click on the icon that looks like a little
piece of paper. New layers are added above whatever layer you currently have
selected, so I'm going to select my giraffe layer and add a single new layer above it.
I'm going to rename it welcome. If you open the library, you'll see that there's an
object called welcome that's already been prepared for us.
I want to put that on the new welcome layer. So notice that if I try to drag and drop
it onto the Timeline, Flash doesn't let me. What you have to do is click the layer in
Flash Professional CS6
P a g e 32 | 39
the layer stack so Flash knows which one you want to use and then drag and drop
the item out from the library onto the Stage. Notice now that on the welcome layer,
the dot in the first frame is now filled in and the background is gray, to indicate that
there's something on the layer. It can be really easy to accidentally put something on
the wrong layer.
For instance, I'll undo that last change so the Welcome message is gone, and now
I'm going to click my elephant like I'm going to move him around or do something
else to him. Since I clicked him, notice the background behind the word elephant in
the layer stack is now highlighted-- its blue--to indicate that this is the selected layer.
If I drag and drop the welcome message now, it ends up on the elephant layer and I
can tell when I turn the visibility of the layer on and off. So the thing to do is to click
the layer name you want a new visual object to appear on before placing it, so it ends
up on the correct layer.
So now, since the welcome message is on the wrong layer, I want to move it from
elephant back up to the welcome layer, but the positioning on the screen is perfect
and I want to preserve that. So one way to do this is to select the welcome message
and then hit Ctrl+X on your keyboard to cut it. Then I'll click once on the welcome
layer to select it and then use the keyboard shortcut Ctrl+Shift+V to paste in place.
You could also go to the Edit menu and choose Paste in Place.
No matter how you get there, the "Welcome to the Jungle!" message is now on its
own layer. You can also further organize your layers by creating and using folders.
Click on the folder icon at the bottom of your layers to create a new one. You can
drag and drop folders just like you can layers, so I'm going to drag the folder just
above the giraffe layer. I'll put all three of the animal layers into the folder. To do
this, I'm going to click and drag each layer up and slightly to the right. You can see
the black line that appears to indicate where the layer is going to go, and when I
release, you can see the layer is now indented under the folder to indicate that it's
inside the folder.
Flash Professional CS6
P a g e 33 | 39
You can also rename folders by double- clicking on the name and typing a new
name. So I'll call this folder animals. Clicking on the little arrow to the left of the
folder name allows you to expand and contract the contents of the folder. So
arranging the stacking order of items within a layer and layers and layer folders are
all quick and easy ways to organize your Flash movies. Getting into the habit early
of having each visual asset on the Stage be in its own layer and then renaming each
of your layer something intuitive will ensure that even your most complex Flash
pieces remain easy to navigate, both for you and for colleagues you may pass your work on to.
Lesson 11: Defining frames and keyframes
Being able to create and manipulate frames and keyframes in the Timeline is key
to controlling the flow of your Flash animations. If you open the file called
framesAndKeyframesPreview.swf from the start file in your local PC for this
lesson, you'll see what we're building towards in this tutorials. So the elephant shows
up first, then the monkey, and then the giraffe. The whole thing lasts four seconds
and then starts over. The staggered pace of appearance is through the use of frames
and keyframes, so let's take a look. I'll close the preview SWF and then open up the
file called framesAndKeyframes.fla in the start folder your local PC, and then I'll
save a copy of it right away into the another folder.
You can see that we've got four layers here: the background layer, which already
has our familiar jungle background, and then an elephant, monkey, and giraffe
layers, which don't have anything on them yet. In the Property inspector, you see
that we're at a frame rate of 24 frames per second, and in the library we have our
animals ready to use. Our movie currently only has one frame, so to have a movie
Flash Professional CS6
P a g e 34 | 39
that's four seconds long, we need to extend our Timeline out to 120 frames, since 5
seconds multiplied by 24 frames per second equals 120.
So I'll click on frame 1 in the background layer. You can add frames right-click and
choose Insert Frame. Adding frames one at a time is pretty tedious, so I'm going to
grab the slider bar that appears under the Timeline and slide over to frame 120. I'll
click once on frame 120 to select it, and you can tell it's selected because it turns
blue. Now I'll right-click on the frame and choose Insert Frame.
Alternatively, you could have selected frame 120 and then pressed the hot key of F5.
So you can see that our background layer now has 120 frames. So notice the different
kinds of frames that we have here. I'm going to scrub my Timeline all the way back
to frame 1. Notice how frame 1 has a gray background with a black dot in it, but all
the other frames are just gray. Frame 1 is a keyframe. One way that may be helpful
to think of keyframes is to think about stop frame animation.
Keyframes are the equivalent of this. Each keyframe shows the specific starting
position, size, and other attributes of artwork on the screen in that layer. When you
need new positioning, you need a new keyframe. Keyframes in Flash are indicated
by that circle, and you'll notice that all our layers have a keyframe on frame 1.
However, background is the only layer that actually has anything on the keyframe,
and you can tell because the circle is filled in and the background is gray. A
nonfilled-in circle and a white background indicates a blank keyframe.
A blank keyframe is just a keyframe with no artwork in it. So notice how all the
frames after the keyframe on the background layer are gray.
Gray indicates that these frames aren't empty; there's something on the Stage for
these frames. Since they don't have circles in them, they're just regular frames, not
keyframes. And a frame just copies the information from the most previous
keyframe. And you can see that this is what these frames are doing if you scrub the
playhead. The Stage looks the same no matter what frame we're on, since each frame
just repeats what was in the keyframe on frame 1, the background jungle image.
Flash Professional CS6
P a g e 35 | 39
Notice on frame 120 that there's a gray background with a white rectangle. The white
rectangle doesn't really do anything; it's just an indicator that that frame is the last
regular frame in the sequence. So back on frame 1, I'm going to lock the background
layer. Now you can see that all the other layers have a blank keyframe on frame 1.
They have the white background with just the outline of the circle within them. It's
really a keyframe. There's just no artwork in it. So now let's extend the next three
layers out to frame 120 as well.
I'll scroll over to frame 120 and click on frame 120 on the elephant layer. Remember
that you can look at the current frame underneath the Timeline. It says 120, so I know
I've got the correct frame selected. So I'm going to right-click and choose Insert
Frame, but remember. Instead of extending the other layers out individually, you can
multiple-select by holding down the Shift key on your keyboard and selecting frame
120 for the monkey and giraffe layers. So frame 120 on both layers are blue,
indicating that they're selected, so I'll insert my frames.
So notice that all three of these layers have frames with a white background instead
of gray. Remember that frames simply repeat whatever is happening on the most
previous keyframe. Since the keyframes on frame 1 are blank, these are all just blank
frames. So our little project here is meant to have a succession of images appear one
at a time. So let's add the elephant to the first animal in the sequence. We want him
to appear one second after the movie starts. Since we're at 24 frames per second,
I'll click once on frame 24 to select it, being very careful that I select frame 24 in the
elephant layer.
Since I want to define the artwork for this frame, I need to add in a keyframe here.
You can do this by going to the Insert menu, then Timeline, then Keyframe. Notice
it doesn't show a keyboard shortcut for this, but there is one; it's F6 and you'll
probably be using it a lot, so you might want to memorize it. You could also
rightclick on the frame and choose Insert Keyframe that way. Now I'll open up the
library and drag and drop the elephant to the Stage. You'll notice I can't drop it onto
the Timeline itself; you can only drop him onto the Stage.
Flash Professional CS6
P a g e 36 | 39
So frames 1 through 23 stay empty, the keyframe now has a gray background and a
black dot, and all the subsequent frames turn gray because they're copying what's in
the keyframe. Let's go ahead and lock our elephant layer--we're done with that--and
do this again for the monkey layer at two seconds into the movie. So I'll select frame
48 on the monkey layer and insert a keyframe. From the library, I'll drag and drop
the monkey onto the Stage. He is obviously huge, so I'll select them with my Arrow
tool and then select the Free Transform tool out of the toolbar.
We'll cover the Free Transform tool in detail later, but for now, I'm going to hold
down my Shift key and click and drag the corner of the image and scale the monkey
down. That looks better, and so now with the Arrow tool, I'll just move him into
place. I'm going to scrub the Timeline now to see the effect. Note that all the frames
updated automatically with the sized-down monkey. They are just frames that copy
what the keyframe on frame 48 does, so the monkey is the correct size all the way
across the Timeline. When I test the movie by pressing Ctrl+Enter, our succession
of images is shaping up nicely.
The elephant appears and then the monkey. So I'm going to lock the monkey layer
and add in our third image at three seconds into the movie, which is frame 72. So I'll
right-click and choose Insert Keyframe and now drag and drop the giraffe to the
Stage. Now you might be wondering if you could have chosen Insert Blank
Keyframe instead--that also appears in the dropdown menu. The answer in this
instance is yes. The difference between inserting a keyframe and inserting a blank
keyframe is this.
I'm going to demonstrate using frame 90 on the giraffe layer. When you choose to
insert a new keyframe, you're getting a new keyframe with a copy of the information
from the most previous keyframe. Notice when I scrub over the new keyframe, it
looks just like the previous frames and keyframe. But since it's a keyframe, I can
now drag my giraffe on frame 90 to a new location. So now when we look at frames
72 to 89, we see the giraffe in one position, but in the new position when we hit
frame 90.
If you insert a blank keyframe, like I'll do here on frame 95, you get just that, a blank
keyframe with nothing in it. Notice how the giraffe is gone when I scrub over the
Flash Professional CS6
P a g e 37 | 39
blank keyframe. Also notice that the last frame with anything in it, frame 94, has the
white rectangle in it. All that's doing is indicating it's the last regular keyframe in the
sequence before the playhead hits the blank keyframe. Since these keyframes were
just for demonstration, let's get rid of them by selecting, right-clicking, and choosing
Clear Keyframe.
You could also go to Modify > Timeline and then Clear Keyframe. Now the frames
are restored back to the giraffe starting at frame 72 and going on until the end. So
the question was, when you're inserting a new keyframe, does it matter if you choose
Insert Keyframe or Insert Blank Keyframe? It depends on what you're trying to do.
Remember that inserting a keyframe gives you a new keyframe with a copy of the
information from the most previous keyframe. If you're starting with a blank frame
in the first place, like you are way over here at the beginning of the movie, it doesn't
really matter if you choose to insert a keyframe or a blank keyframe; you end up
with the same thing, a blank keyframe, like so.
I'll undo that change. So let's lock the giraffe layer and test our movie. It takes a total
of four seconds and the images appear in succession. So keyframes define how an
item should look on the Stage. There are blank keyframes, which are frames with a
white background and the outline of a circle in them. Keyframes that have content
in them are indicated in the Timeline by a frame with a gray background and a black
dot. Frames just copy the contents of the most previous keyframe.
So blank frames appear after a blank keyframe and regular frames appear after a
keyframe, and contain the same content as the keyframe.
Flash Professional CS6
P a g e 38 | 39
Lesson 12: Previewing a project
There are multiple ways to preview your work in Flash. Of course we've already
worked with the keyboard shortcut of Ctrl+Enter for testing your movie. This
publishes a SWF file that you can preview and then close quickly so you can go on
to make more changes to your movie. Note that this is the same as going to the:
- File menu, then
- Publish Preview, and then
- Flash. I think the name Publish Preview is a little misleading.
You are previewing your work in a sense, but you end up looking at a published
SWF file. Ctrl+Enter and Publish Preview Flash are a little different than the choice
of Publish that you may have notice under the File menu.
If I choose Publish, it doesn't look like anything happened. Flash does publish the
SWF file, but it doesn't open it for you to look at.
If you are using the default settings of Flash, it also creates an HTML that embeds
the SWF file within it. I will hop over to my file explorer and you'll see the SWF
and the HTML file there.
What files Flash publishes for you are controlled by the settings you can find if you
go to File and then Publish Settings. In the Publish Settings dialog box, you can
see that SWF and HTML Wrapper are checked. From here, you can click Publish,
which publishes the files, but again Flash doesn't open up for you; it just creates
them, and then you can go find them in your File Explorer. You can click OK, which
saves your choices but doesn't publish, or just cancel.
So, after all that, the fastest way to test your movies as you're developing and see
how they are going to look in the Flash Player is what we've been doing all along:
Ctrl+Enter. In another movie, we talked about scrubbing the Timeline with your
playhead to see how your content looks, like this. Note that you can also press Enter
on your keyboard and the playhead will start playing from whatever position it's at
Flash Professional CS6
P a g e 39 | 39
and then stop at the end. Pressing Enter again starts it over at frame 1. You can stop
it before it gets to the end by pressing Enter again.
There is also these Timeline controls underneath the Timeline. You can toggle
between play and pause. You can also step back one frame or you can go to the first
frame. You can also step forward one frame or go to the last frame. You can also
choose this icon that looks like a curvy arrow to loop your content. Notice these
control handles appear above the Timeline, and I can move them around to define
what particular keyframes I want to focus on.
Now, when I press Enter on my keyboard, the playhead loops repeatedly through
the frames I've identified. We'll talk more about the other icons below the Timeline
in a different movie, so for now, I'll just turn Loop off. So you have multiple ways
to view your content in Flash as you're working. The method you will probably use
most is Control+Enter.
Lesson 13: Motion Tweens
- Import to Library
- Drag to Stage
- Convert to the symbol
- Give name
- Insert Frame to the timeline (24)
- Select the end point of your object (20) then
- Create motion tweens
- CTRL+Enter
Lesson 14: Test
END