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


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.


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.


P a g e 4 | 39

Lesson 02: Introduction to the Flash Interface

How to Start Flash?

In Windows 8,

- start screen/flash


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.


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.


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.


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


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.


P a g e 10 | 39


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.


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


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.


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.


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


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


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


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.


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.


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


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


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.


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.


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


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.


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.


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.


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.


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.


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


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


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.


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


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.


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.


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


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.


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


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

flash professional cs6 - sahalsoftware€¦ · flash professional cs6 p a g e 6 | 39 we can also...

Documents