Adobe Flash ProfessionalWhat is Flash?| 00:00 |
Adobe Flash Professional is an
application used by web designers, developers, and
| | 00:05 |
animators to create rich content
for screen and web environments.
| | 00:09 |
Web designers use Flash for creating
interactive and animated content for
| | 00:13 |
web sites and mobile applications,
working with and converting video using
| | 00:17 |
Adobe Media Encoder.
| | 00:19 |
Developers use Flash for creating and
editing ActionScript using the built-in
| | 00:23 |
coding tools, developing cross-
platform mobile applications using Adobe AIR,
| | 00:28 |
debugging and testing applications
on AIR-enabled mobile devices, and
| | 00:33 |
building applications which can be
distributed across various device app
| | 00:36 |
store ecosystems.
| | 00:38 |
Animators use Flash for animating
characters and objects using sophisticated
| | 00:42 |
motion tweens, adding visual effects
with various filters and blurs, and creating
| | 00:47 |
lifelike environments using
the various drawing tools.
| | 00:51 |
Flash Professionals allows you to
create engaging artwork, applications, and
| | 00:55 |
animations like the ones you see here.
| | 00:57 |
As a member of the creative suite,
Flash Pro integrates with several other Adobe
| | 01:01 |
applications, like Photoshop for
bitmap editing and Illustrator for vector
| | 01:06 |
symbol manipulation.
| | 01:07 |
No matter if you are a web designer,
developer, or animator, Flash Professional
| | 01:12 |
provides you with an array of tools to
help you create rich and engaging content
| | 01:16 |
for the web, screen, or mobile devices.
| | 01:20 |
| | Collapse this transcript |
|
|
IntroductionWelcome| 00:04 |
Hi! I am Anastasia McCune and welcome to
Flash Professional CS6 Essential Training.
| | 00:10 |
In this course, I'll start by showing
you how to navigate around in Flash and
| | 00:13 |
utilize parts of the interface like
the stage, library, and the timeline.
| | 00:18 |
Then I'll show you how to import
artwork into Flash, as well as create and
| | 00:22 |
manipulate some of your
own using the Drawing tools.
| | 00:25 |
We will see how to create simple
animation using motion, shape, and IK tweening.
| | 00:30 |
I'll also show you how to incorporate
audio and video into Flash, as well as
| | 00:34 |
interactive controls such as
buttons and simple ActionScript.
| | 00:38 |
Finally, I'll demonstrate publishing
your files for browser, desktop, or
| | 00:43 |
mobile deployment.
| | 00:44 |
Throughout the course you will see a
series of animals drawn by one of the art
| | 00:47 |
students and a solar-powered
house outfitted by the energy company.
| | 00:51 |
We will be covering all the
aforementioned features, plus plenty of techniques
| | 00:55 |
and best practices, so you can create
your own interactive compelling content in Flash.
| | 01:00 |
So let's get started with Flash
Professional CS6 Essential Training.
| | 01:05 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
If you are a Premium member of the
lynda.com Online Training Library or if
| | 00:05 |
you're watching this tutorial on a
DVD-ROM, you have access to the exercise
| | 00:09 |
files used throughout this title.
| | 00:11 |
There is a folder for each unit of the
course where there are activities for you
| | 00:14 |
to follow along with.
| | 00:16 |
For most tutorials, there is
a start and an end folder.
| | 00:19 |
The start folder shows what the
files look like at the beginning of the
| | 00:22 |
tutorial, as well as providing any
additional files that you may need.
| | 00:26 |
The end folder shows what an exercise
looks like at the end if you follow all
| | 00:30 |
the steps that I demonstrate.
| | 00:32 |
If you're a Monthly member or Annual
member of lynda.com, you don't have
| | 00:36 |
access to the exercise files, but you can
follow along from scratch with your own assets.
| | 00:41 |
So sit back, relax, and get ready for some fun.
| | 00:44 |
| | Collapse this transcript |
| Setting up local file permissions| 00:00 |
When using the exercise files for this
course, or developing and testing your
| | 00:04 |
own projects, you may run into
some issues with Flash security.
| | 00:08 |
Flash doesn't like it when files
on your local hard drive try to
| | 00:11 |
communicate with the Internet.
| | 00:12 |
While this helps prevent personal
data from your computer being transmitted
| | 00:17 |
without your consent,
| | 00:18 |
it can really get in the way when you're
trying to test your Flash applications.
| | 00:22 |
The best way to get around this is to
specifically tell your Flash Player which
| | 00:26 |
files on your local computer you trust.
| | 00:28 |
This is done in the Flash Player
Settings Manager, which you can access whenever
| | 00:32 |
the Flash Player sees a local file
trying to communicate with the Internet.
| | 00:36 |
To adjust the settings for this course,
I'm going to double-click the file
| | 00:40 |
called settings.swf in the
exercise files for this chapter.
| | 00:45 |
When I click on the blue button that's
meant to open up the lynda.com web site
| | 00:49 |
in a browser, nothing happens.
| | 00:51 |
I'm working with Flash Player 11.1.
| | 00:54 |
Depending on what version of the Flash
Player you have, you might get a gray box
| | 00:57 |
that tells you that Flash Player has
stopped a potentially unsafe operation.
| | 01:02 |
In either case, what we need to do is
add the location of our exercise files to
| | 01:07 |
our list of trusted locations.
| | 01:09 |
This will tell Flash Player that these
files are okay, and it'll allow us to
| | 01:13 |
test without giving a security
error or giving unexpected behavior.
| | 01:17 |
So if you have the gray box telling
you that Flash Player has stopped a
| | 01:20 |
potentially unsafe operation, there should
be a button marked Settings at the bottom.
| | 01:25 |
Click that. I'm going to do something a little
different that will get me to the same spot.
| | 01:29 |
I'm going to right-click on my SWF file
while it's open and choose Global Settings.
| | 01:34 |
If you don't have the exercise files
for this course, you could double-click to
| | 01:38 |
open and then right-click on any SWF
file that you have on your computer to
| | 01:42 |
access the Global Settings.
| | 01:44 |
If you don't have a SWF file on your computer,
you could just find a SWF file on the Internet--
| | 01:49 |
any video on YouTube would work--and
right-click on it and choose Global Settings.
| | 01:53 |
However you get there, we want to end
up in the Flash Player Settings Manager.
| | 01:58 |
I'm using Flash Player 11.1, and the
interface for the process here on out might
| | 02:03 |
look a little different if you're
using an older version of the player.
| | 02:06 |
But if you follow along with this
tutorial, you'll see what we're trying to
| | 02:09 |
accomplish, and we'll likely be able to
figure it out for your version of the player.
| | 02:13 |
In the Flash Player Settings Manager,
I'm going to click on the Advanced tab and
| | 02:17 |
then click the Trusted Location
Settings button at the bottom.
| | 02:21 |
On the resulting screen we'll choose
Add and we'll choose Add Folder, since we
| | 02:26 |
want to add all the
exercise files for this course.
| | 02:28 |
Adding the whole folder will tell
Flash Player that we trust all of the
| | 02:32 |
files inside the folder.
| | 02:34 |
So, browse to the location where
you've downloaded your exercise files--
| | 02:37 |
I have mine here on my Desktop--
| | 02:40 |
select the folder and then click
OK, and now I'll click Confirm.
| | 02:44 |
As you can see, the file has
been added to our Trusted Locations.
| | 02:48 |
I'll close out of all the
dialog boxes and also close the SWF.
| | 02:52 |
Now you'll be able to test the
exercise files locally, without running
| | 02:56 |
into security errors.
| | 02:57 |
Just to check, now I'll double-click
on the SWF in my File Explorer again,
| | 03:01 |
settings.swf, and now when I click on the
blue Click me to go to lynda.com button,
| | 03:07 |
it works just fine.
| | 03:08 |
Our Flash Security Settings are all set to go.
| | 03:11 |
| | Collapse this transcript |
|
|
1. How Flash Professional Fits InFlash for desktop web browsers| 00:00 |
Flash was first created as an animation tool.
| | 00:03 |
Over time its capabilities grew and
now it's all over, from your desktop
| | 00:07 |
browser to your smartphone.
| | 00:09 |
It's the industry standard for
creating and delivering rich media content.
| | 00:12 |
In this movie, we're going to be talking
specifically about Flash content on the
| | 00:16 |
web being viewed from your
desktop or laptop web browser.
| | 00:20 |
Flash's reach on the desktop is enormous.
| | 00:23 |
For instance, most major web sites that
deliver video content, such as YouTube
| | 00:27 |
or the New York Times, use
Flash as the delivery platform.
| | 00:31 |
You've probably seen things like
photo slideshows that include music and
| | 00:34 |
interactivity, or played online games,
or interacted with banner advertisements
| | 00:39 |
that were all created with Flash.
| | 00:40 |
There are some important distinctions to
understand between Flash the authoring
| | 00:44 |
tool, and the end products
for the web that it can create.
| | 00:47 |
So let's take a look at that now.
| | 00:49 |
Let's first talk about
Flash, the authoring tool.
| | 00:52 |
This is of course a piece of software
that you purchase and install on your
| | 00:55 |
computer, and is what you're
watching this course to learn how to use.
| | 00:58 |
Here on my screen, I've already got
the Flash software open, and it's showing
| | 01:02 |
what's called the Start page.
| | 01:03 |
I'm going to create a new Flash document,
as if I was going to build a project,
| | 01:07 |
by clicking on ActionScript 3.0, and
Flash opens up a new blank document.
| | 01:13 |
So this will be our source Flash file where
we'll author all of our content and animation.
| | 01:18 |
If you go to File and then Save As, you
can save your document, and notice that
| | 01:23 |
the file extension for a Flash document is .fla.
| | 01:27 |
So let's say we've added all our
fantastic content here and it's as impressive
| | 01:31 |
as Santa's Frequent Flyer Mile account on
Christmas Day and we want to test it out.
| | 01:35 |
If you hit Command+Enter or Ctrl+Enter
on your keyboard, Flash publishes your
| | 01:39 |
FLA file into a format ready for the world.
| | 01:42 |
Of course, there's not much to see in our
blank file, but at least we have our published file.
| | 01:47 |
The file type for this is a .swf or SWF.
| | 01:52 |
You can publish your SWF file as much
as you want, as you develop your project
| | 01:55 |
for testing and preview purposes.
| | 01:57 |
When you're ready to deploy it to a web
site, the final SWF file is the actual
| | 02:02 |
thing you would upload onto your web server.
| | 02:04 |
We'll talk more about how you actually
embed your SWF file into your HTML in the
| | 02:08 |
section about publishing.
| | 02:09 |
But for now, conceptually, we've
jumped from Flash the authoring tool, to
| | 02:13 |
Flash the SWF file, which is what you
would deploy onto the web or into the
| | 02:17 |
world for users to look at.
| | 02:19 |
So say your SWF file is up on your web site.
| | 02:22 |
For someone to actually be able to view
your SWF content on their computer, in
| | 02:26 |
a browser, on the web, their browser has
to have the Flash Player plug-in installed.
| | 02:32 |
The SWF file won't play in a
browser unless the plug-in is installed.
| | 02:36 |
One reason Flash is so successful on
the web is that most people already have
| | 02:40 |
some version of the Flash Player installed.
| | 02:42 |
Let's take a look at this page on the
Adobe web site, which talks about the
| | 02:46 |
adoption of Flash Player,
separated out by version.
| | 02:49 |
You can take some time to look over
these charts, but the thing I want to point
| | 02:52 |
out quickly here is how Flash Player
10, as of June 2011, was on 98.7% of
| | 03:00 |
computers in mature markets.
| | 03:02 |
You can also see how new versions of the
player are adopted pretty quickly over time.
| | 03:06 |
For instance, I'm going to scroll down
a little bit, and you can see that Flash
| | 03:10 |
Player 10.2, which was released in
February 2011, by March, had 45.8% adoption
| | 03:18 |
rate on computers in mature markets.
| | 03:21 |
Scrolling back up, we can see by June,
| | 03:23 |
it had a 77.8% adoption.
| | 03:26 |
The wide adoption rate of the Flash
Player is a big advantage, since you know
| | 03:30 |
that your content is going to be able
to be viewed by vast numbers of people.
| | 03:34 |
You as the developer can and should
research your audience and choose which
| | 03:38 |
version of the Flash
Player is appropriate to target.
| | 03:41 |
If your audience is, say, a group
within a corporation that has a tightly
| | 03:46 |
controlled IT environment,
you might not want to choose the very latest
| | 03:50 |
version of the player.
| | 03:51 |
You should choose whatever
version the company is using.
| | 03:53 |
There's nothing wrong with targeting a
slightly older version of the player if
| | 03:57 |
it's the appropriate choice.
| | 03:59 |
Another reason Flash is a good choice
for delivering content on the web is that
| | 04:03 |
Flash content looks the
same across all browsers.
| | 04:06 |
Have you ever built something in HTML,
tested it in Internet Explorer, FireFox,
| | 04:10 |
and then Safari, and noticed that it
looks different across the three browsers?
| | 04:15 |
That doesn't happen with Flash.
| | 04:17 |
You aren't targeting a browser with your SWF;
| | 04:19 |
you're targeting the player. And as
long as someone has the Flash Player
| | 04:22 |
installed, your content is
going to look consistent.
| | 04:25 |
This is one reason the Flash platform
is used in so many places across the web.
| | 04:29 |
I mentioned earlier how Flash is used
on many major video content sites, and if
| | 04:34 |
you go to YouTube, pick any video, and
right-click on the video, you'll see right
| | 04:38 |
here, you have the option to learn
about the Adobe Flash Player 11.1. You might
| | 04:44 |
have a different version
of the player installed.
| | 04:46 |
Content in the Flash player, when you
right-click on it, at the minimum always
| | 04:50 |
has the Settings, Global Settings,
and About Adobe Flash Player options.
| | 04:55 |
So it's an easy way to tell that
you're looking at content created in Flash.
| | 04:59 |
So using Flash to create content for
the web allows you to create compelling,
| | 05:04 |
interactive, rich media content, and you
can feel confident in the fact that the
| | 05:08 |
vast majority of desktop users are
already going to have the Flash Player
| | 05:11 |
necessary to view the content.
| | 05:14 |
| | Collapse this transcript |
| Flash for desktop apps| 00:00 |
We buy and install software
programs for our computers all the time.
| | 00:04 |
For instance, when it's tax time, I go
out and buy a tax preparation program and
| | 00:09 |
install it on my computer--though using
it correctly is another matter. But the
| | 00:13 |
point is that installing programs
onto one's computer is a common thing.
| | 00:18 |
Now imagine how cool it would be to
take the skills that you have in Flash and
| | 00:22 |
be able to use them to create
your own desktop applications.
| | 00:25 |
Adobe AIR, or Adobe Integrated
Runtime, allows you to do this.
| | 00:29 |
Here is how it works.
| | 00:31 |
Instead of starting with an FLA file
and publishing a SWF that's viewed through
| | 00:35 |
the Flash Player in a browser, AIR
packages up the Flash content and makes it
| | 00:39 |
something you install onto your desktop.
| | 00:42 |
The published project is .air file and
it contains your Flash content that can
| | 00:47 |
be installed on your computer
just like any other program.
| | 00:51 |
The great thing is it's cross-platform as well;
| | 00:53 |
it works on both Windows and Mac just fine.
| | 00:56 |
There are lots of programs out
there that are built using Adobe AIR.
| | 00:59 |
For instance, I'm going to go to this page
in the Developer Connection area of adobe.com.
| | 01:05 |
You can see that there are a lot of
different applications here that have
| | 01:08 |
been built with AIR.
| | 01:09 |
I'm going to download and
install this one called PixelPerfect.
| | 01:12 |
So I'll click to download and save the
file, and I'll just double-click to install.
| | 01:25 |
Once it's installed, it starts up
automatically, and you can see that it's this
| | 01:29 |
little window that I can drag
around on my screen to measure things.
| | 01:32 |
I can drag the edges of the window in
and out to resize the window, and it also
| | 01:36 |
tells me how big the window is.
| | 01:38 |
So this could be a useful little
application if you're doing some kind of
| | 01:42 |
graphic design development project
and need a quick way to measure things.
| | 01:46 |
Notice I have also got an icon for
PixelPerfect down here in my System Tray.
| | 01:50 |
It shows up what the other programs
that I've got running at the moment:
| | 01:53 |
Flash, Firefox, and then my file explorer.
| | 01:56 |
So you can see that PixelPerfect
behaves just like any other software program,
| | 02:01 |
because that's essentially what it is.
| | 02:03 |
So PixelPerfect is a simple example
of what kinds of applications can be
| | 02:07 |
built with Adobe AIR.
| | 02:09 |
The types and complexities of
applications you can find built with AIR range
| | 02:13 |
from simple to complex.
| | 02:15 |
There's AIR apps that share files
between computers, RSS aggregators,
| | 02:19 |
greeting card builders.
| | 02:20 |
If you can build it in Flash, you can
deploy it as an AIR project and make it an
| | 02:24 |
installable applications for the desktop.
| | 02:26 |
We'll look more in depth at how AIR
works and how to deploy your Flash project
| | 02:31 |
as AIR later on in the section about publishing.
| | 02:34 |
There are also other courses in the
lynda.com Online Training Library that focus
| | 02:38 |
specifically on AIR if you wish
to delve further into this topic.
| | 02:42 |
For now, the skills you'll learned in
this course will be a good foundation for
| | 02:46 |
authoring applications,
regardless of their end destination.
| | 02:50 |
| | Collapse this transcript |
| Flash for mobile apps| 00:00 |
So far, we've discussed how you can
publish from a Flash FLA file to a SWF for a
| | 00:06 |
browser on a desktop.
| | 00:08 |
We've also discussed publishing an FLA
file as a .air file, an application that
| | 00:13 |
can be installed on the desktop.
| | 00:14 |
So what about Flash for mobile devices?
| | 00:17 |
If you have something like an iPhone,
you've probably noticed that Flash content
| | 00:21 |
doesn't play through a web browser.
| | 00:23 |
This is more of a policy decision than
a technological limitation, but the fact
| | 00:28 |
remains that SWF files and
iDevices aren't compatible.
| | 00:31 |
This isn't true for Android phones.
| | 00:33 |
Flash content can be viewed
through a browser on mobile.
| | 00:37 |
However, in late 2011 Adobe
announced that they weren't going to continue
| | 00:42 |
updating and maintaining the
Flash Player for mobile web.
| | 00:45 |
Instead, they, along with other members
of the community, will be supporting the
| | 00:50 |
development of HTML5.
| | 00:52 |
Now just because the Flash Player
for mobile is not going to be actively
| | 00:56 |
updated anymore doesn't mean it's suddenly
disappears off devices that already had it.
| | 01:01 |
Your Android phone will still play Flash
files just as it did before, as long as
| | 01:05 |
your Flash Player from before is still
installed. But going forward, if you want
| | 01:09 |
to build for users purely on a mobile
web platform, you should consider that and
| | 01:14 |
maybe even use something else besides Flash.
| | 01:17 |
Adobe has provided a way to convert
your content authored in Flash to HTML5.
| | 01:22 |
Since it's HTML, it can be
viewed on a mobile device.
| | 01:25 |
The tool for this came out at the
same time as Flash Professional CS6,
| | 01:29 |
so to learn more about it, find the
toolkit for Create JS Extension on adobe.com.
| | 01:36 |
But of course there is more to
mobile than just browsing the web.
| | 01:39 |
One major area of development for mobile
devices is the creation of apps, and you
| | 01:44 |
can publish your projects from Flash
into applications that can be downloaded
| | 01:48 |
from places like Google Play or
the Apple App Store just fine.
| | 01:52 |
Apps are not SWFs that are
viewed through a web browser;
| | 01:55 |
they're Flash content that's
published through the Adobe AIR platform.
| | 01:59 |
We talked about how Adobe AIR
works in the previous movie.
| | 02:02 |
Remember that instead of creating a
SWF that's viewed through the Flash
| | 02:05 |
Player in a browser, AIR packages up the
Flash content and makes it something you install.
| | 02:11 |
You buy an app in the Apple Store or in Google
Play and then install it on your phone, right?
| | 02:16 |
Well, that's what Adobe AIR does.
| | 02:18 |
You author it in Flash, the
authoring program, but when you publish, you
| | 02:22 |
publish an AIR project.
| | 02:24 |
The AIR project packages up your
Flash content in a format that can be
| | 02:28 |
understood and installed on your mobile device.
| | 02:31 |
You get a different end file depending
on if you're publishing to iDevices or
| | 02:34 |
Android devices, and then you
deploy that end file to the appropriate
| | 02:39 |
distribution point, like the
Apple App Store or Google Play.
| | 02:43 |
The point is that creating apps for mobile in
Flash is definitely something that you can do.
| | 02:48 |
There are other courses in the
lynda.com online training library that
| | 02:52 |
focuses specifically on AIR and
developing Flash for mobile in particular, to
| | 02:56 |
help you with those topics.
| | 02:58 |
Those courses assume a basic level of
understanding in how to create content
| | 03:02 |
with Flash to start with.
| | 03:03 |
So for now, this course is
still a good place to begin.
| | 03:07 |
| | Collapse this transcript |
| Understanding how ActionScript fits into Flash| 00:00 |
ActionScript is Flash's
native programming language.
| | 00:04 |
It allows you to add interactivity, logic,
and advanced functionality to your Flash pieces.
| | 00:09 |
You don't need to know ActionScript to
be able to create compelling animation
| | 00:13 |
and basic functional Flash pieces;
| | 00:15 |
however, it won't take long until you get to
the point where you do need to know a few things.
| | 00:19 |
We'll cover some very basic
ActionScript in this course, so let's take a quick
| | 00:24 |
look at some common places where
ActionScript is used, to get an idea of how it
| | 00:28 |
will fit into our learning.
| | 00:30 |
Animation doesn't require ActionScript.
| | 00:32 |
From the exercise files for
this chapter, I'm going to open
| | 00:35 |
lynda_biker_banner.swf.
| | 00:38 |
The animation in this piece is somewhat
complex and nice, with the motion of the
| | 00:42 |
biker's legs, her hair blowing in the
wind, and the changing perspective of the
| | 00:46 |
bridge and landscape as she rides.
| | 00:48 |
None of this is ActionScript-based;
it's all just well-drawn graphics animated
| | 00:53 |
on what's called the Timeline in Flash.
| | 00:55 |
needsActionScript.swf shows some common
things that need ActionScript to work.
| | 01:00 |
So I'm going to open it up.
And for instance, a button responding
| | 01:04 |
requires ActionScript.
| | 01:06 |
The button can be seen on the screen,
but without ActionScript, nothing
| | 01:09 |
happens when you click it.
| | 01:11 |
We have some ActionScript here, so
when I click it we get our monkey.
| | 01:15 |
So ActionScript is listening
for the button to be pushed.
| | 01:17 |
The monkey appears and disappears in
response to your clicking on the buttons.
| | 01:23 |
Opening a new window in response to
user interaction needs the ActionScript,
| | 01:26 |
just like this button that opens
up amazon.com when I click on it.
| | 01:31 |
Counting and math needs ActionScript.
You can see that the left box on the
| | 01:36 |
bottom is perpetually counting upward
and the right box is perpetually adding
| | 01:40 |
one to the value from the left box.
| | 01:43 |
The perpetual math calculation, as well
as actually outputting those numerical
| | 01:48 |
values to the screen, requires ActionScript.
| | 01:51 |
So taking in user input, like a person's
name or email address or phone number or
| | 01:56 |
making logical decisions based on
user input, is another common usage that
| | 02:00 |
requires ActionScript.
| | 02:01 |
So you can see that getting to the
point of needing ActionScript will likely
| | 02:05 |
come relatively soon for you.
| | 02:07 |
As soon as you want the user to be
able to interact with your movie, not just
| | 02:11 |
watch it, you'll need script.
| | 02:13 |
There is a great tool in Flash
called code snippets which writes
| | 02:16 |
ActionScript for you.
| | 02:17 |
It's a great place to start
learning, and we'll be using that later in
| | 02:20 |
this course.
| | 02:22 |
| | Collapse this transcript |
|
|
2. Introduction to the Flash InterfaceChoosing the type of document to work with| 00:00 |
When you first launch Flash, the first
thing you should see is the Start screen.
| | 00:05 |
Right here in the center of the screen
is where we create new blank Flash files.
| | 00:09 |
It might look kind of confusing at
first because you're presented with what
| | 00:12 |
looks like a lot of different
kinds of files to choose from,
| | 00:16 |
but really they are not that different at all.
| | 00:18 |
For most of the options, you are
going to end up with a new blank unnamed
| | 00:22 |
source.fla document.
| | 00:25 |
The only real difference between
these choices is having Flash set up some
| | 00:28 |
options about the final output for you.
| | 00:31 |
Let's check that out by choosing
the first option at the top that
| | 00:34 |
says ActionScript 3.0.
| | 00:37 |
Our new document is created and
the file name is untitled .fla.
| | 00:41 |
You know it's an FLA if you
go to File and then Save As, .fla.
| | 00:46 |
I am not going to save this, so for now,
let's just look on the right side of
| | 00:51 |
the screen at what's called the Properties panel.
| | 00:53 |
The Properties panel is the spot to set
all the settings for our Flash document.
| | 00:57 |
Here in the area marked Target, you
can see better output will target Flash
| | 01:02 |
Player 11.2, so we know that our
output from Flash is going to be a SWF file
| | 01:07 |
that's going to play in a web browser.
| | 01:09 |
We can also see that our SWF
will be using ActionScript 3.0.
| | 01:14 |
You can open up the Target
dropdown to see the other options.
| | 01:17 |
You could target your SWF to play on older
version of the Flash Player if you wanted.
| | 01:22 |
If you want your project ultimately to
deploy as an Adobe AIR for desktop, you
| | 01:26 |
can choose AIR 3.2 for Desktop, and when you
publish your file, a .air file will be created.
| | 01:34 |
Likewise of course, you could see that
you can choose AIR 3.2 for Android or AIR
| | 01:39 |
3.2 for iOS, if you want to target one
of those platforms. And when you publish,
| | 01:44 |
the appropriate files for
deployment to Android or iOS will be created.
| | 01:49 |
Flash Lite is an older
Flash Player for mobile devices.
| | 01:53 |
You probably won't use this.
| | 01:54 |
I am going to leave this at Flash
Player 11.2 since I want to develop a Flash
| | 02:00 |
piece for the web to be
viewed from a desktop computer.
| | 02:03 |
If you pull open the Script dropdown,
you can see that you could specify that
| | 02:07 |
your SWF is going use ActionScript 1, 2, or 3.
| | 02:11 |
Even if you never write a single line
of ActionScript code in your project, you
| | 02:15 |
still have to tell Flash which
version of ActionScript you want to target.
| | 02:18 |
Now I am going to close out of this
document to return to the start page.
| | 02:23 |
This time I am going to click on
ActionScript 2.0 to open a blank document.
| | 02:28 |
Again, we get our blank unnamed FLA
document and over in the Property inspector
| | 02:33 |
we see that our published SWF file is
going to target Flash Player 11.2 but
| | 02:38 |
this time use ActionScript 2.0
instead of 3.0, and really, that's the only
| | 02:43 |
difference between this blank file and
the one we created just a moment ago.
| | 02:48 |
Flash is just setting these options
in the dropdowns for you ahead of time.
| | 02:51 |
The combination we see here is
probably not when you would use.
| | 02:55 |
As you can infer, ActionScript 3.0
is the most recent and robust version.
| | 03:01 |
ActionScript 2.0 and 3.0 can talk to
each other, but they're different in some
| | 03:05 |
significant ways, and it's not exactly easy.
| | 03:07 |
So unless you have a specific
reason to use an older version of
| | 03:10 |
ActionScript, stick with 3.0.
| | 03:14 |
One thing to note is that to use
ActionScript 3.0, you have to target
| | 03:18 |
Flash Player 9 or higher.
| | 03:20 |
Well, Flash player 9 came out in 2006
and as we discussed earlier in the course,
| | 03:26 |
new versions are adopted
pretty quickly over time,
| | 03:28 |
so you should be safe choosing a
more recent version of the player.
| | 03:32 |
So let's close out of this file
and go back to the start page.
| | 03:36 |
The next four options of AIR, AIR for
Android, AIR for iOS, and Flash Lite 4 are
| | 03:42 |
similar to what we have already seen.
| | 03:44 |
I'll click AIR for Android and you
get a blank FLA document with the
| | 03:48 |
corresponding choice preselected
for you in the Target dropdown.
| | 03:53 |
If I were to publish this document,
the files needed to deploy my project for
| | 03:57 |
Android would be created, and of course,
changing it to target something else is
| | 04:02 |
as easy as just changing the dropdown.
| | 04:05 |
So I'll close this file.
| | 04:07 |
Let's click on the next
choice of ActionScript file.
| | 04:12 |
This opens another blank document, but
this time if you go to File and then Save
| | 04:17 |
As, you will see that instead of
being an FLA, this is a .as file.
| | 04:22 |
This is a text document that can
contain ActionScript, hence .as.
| | 04:27 |
You can write ActionScript directly
in your FLA, as we will later in this
| | 04:31 |
course, but you can also write it in
an external.as document and have the
| | 04:36 |
FLA call out to it.
| | 04:38 |
Using external .as files is probably
something you'll start to work with
| | 04:43 |
only when you become more proficient
with ActionScript and want to do some
| | 04:46 |
more advanced things.
| | 04:47 |
So for now, let's just close this document.
| | 04:52 |
The same thing could be said for the
ActionScript 3.0 class and the ActionScript
| | 04:56 |
3.0 interface choices.
| | 04:59 |
You probably won't use these until
you're more proficient with ActionScript.
| | 05:02 |
If you've programmed in other
languages like C++ or Java before, you will be
| | 05:07 |
glad to know that ActionScript is
also a robust object-oriented language.
| | 05:11 |
A Flash JavaScript file is also a file
that contains script, but it's saved as a
| | 05:17 |
.jsfl file, as we can see
when we go to File > Save As.
| | 05:21 |
JSFL files extend regular JavaScript to
include the Flash document object model.
| | 05:28 |
Basically, you can use it to write
commands that can automate events and
| | 05:32 |
workflows within Flash.
| | 05:34 |
It's kind of like recording an action
in Photoshop, if you've done that before.
| | 05:38 |
For instance, say you have a series of
animations and you want to have each pose
| | 05:43 |
in an animation outputted
as an individual bitmap file.
| | 05:47 |
You could write a .jsfl script that
does this and then reuse it on each
| | 05:51 |
animation sequence you want to export.
| | 05:53 |
So I will cancel out of this, and we
will go back to the start page one last
| | 05:57 |
time. And finally, the last choice in the
middle of the start page is a Flash Project.
| | 06:04 |
This is basically a way to group
multiple related files together when creating
| | 06:08 |
complex applications.
| | 06:10 |
It kind of acts like an index to
multiple files that you may have in different
| | 06:13 |
locations on your computer.
| | 06:15 |
I am just going ahead and
cancel out of that for now.
| | 06:19 |
Everything else on the start page
is there mostly for your reference.
| | 06:23 |
The choices down the right-hand side
lead to tutorials and help articles about
| | 06:27 |
various topics in Flash.
| | 06:29 |
The lower-left under the Open a Recent
Item heading shows a clickable history
| | 06:34 |
of FLA files you worked on.
| | 06:36 |
The templates are just like they sound.
| | 06:38 |
They are simple templates for
different types of commonly built projects.
| | 06:42 |
Picking them apart can be a great
way to pick up new ideas on how to
| | 06:45 |
construct things in Flash.
| | 06:47 |
I especially like the ones in the
AIR for Android section, as well as the
| | 06:52 |
Animation section and the Sample Files section.
| | 06:56 |
There's even a course in the lynda.
com online training library called Code
| | 07:00 |
Snippets and Templates
in Depth by David Gassner.
| | 07:04 |
It takes a deep dive into how to
effectively incorporate the sample files
| | 07:07 |
into your own projects.
| | 07:12 |
So you've seen now what the different
kinds of blank files that you can open up
| | 07:16 |
from the start page are.
| | 07:17 |
We've also seen how easy it is to
change the end target of your FLA between
| | 07:22 |
AIR, AIR for Android and iOS, the
different versions of the Flash Player, and so on.
| | 07:28 |
For this course, we're going to
assume that we're developing for the web,
| | 07:32 |
so we will choose ActionScript 3.0 from
the start page if we need a new FLA document.
| | 07:37 |
Our FLA files will thus be
targeting Flash Player 11.2 and using
| | 07:42 |
ActionScript 3.0.
| | 07:44 |
| | Collapse this transcript |
| Getting to know the Flash interface| 00:00 |
Let's start getting familiar
with the workspace in Flash.
| | 00:03 |
So from the Start page, I am going to
click ActionScript 3.0 to open up a
| | 00:07 |
New FLA file in Flash.
| | 00:10 |
The first thing you probably notice on your
screen is the big blank rectangle in the middle.
| | 00:14 |
In Flash, this is known as the Stage
and is where you'll place all your content
| | 00:19 |
for your Flash movie.
| | 00:20 |
You can place content on the
screen but off the Stage if you wish.
| | 00:24 |
The gray area around the
Stage is known as the pasteboard.
| | 00:28 |
And for an example, I am going to
select my Rectangle tool and quickly draw a
| | 00:32 |
rectangle half on and half off the Stage.
| | 00:35 |
Now I am going to press Ctrl+Enter on
my keyboard or Command+Enter if you're
| | 00:40 |
on a Mac, to publish the SWF File and
preview what it looks like as the finished product.
| | 00:45 |
As you can see, only half
of the rectangle is visible.
| | 00:48 |
So, while it's okay to put things on to
the pasteboard, if you want it to appear
| | 00:52 |
in the final finished SWF file,
it has to be on the Stage.
| | 00:56 |
Having items start offstage and then
animate in later, or vice versa, is a common
| | 01:01 |
technique for having visual elements
enter and exit the user's field of view.
| | 01:05 |
All right, let's close our SWF file, and
know that the pasteboard is also really
| | 01:11 |
useful for deselecting things.
| | 01:14 |
If I switch to my Arrow tool to select
my rectangle but later need to deselect,
| | 01:19 |
clicking on the pasteboard
is a good way to do that.
| | 01:22 |
While building Flash projects, you'll
probably have a lot of other content on
| | 01:25 |
the Stage, but not so much on the pasteboard.
| | 01:28 |
So it'll allow you to deselect
something without accidentally
| | 01:31 |
selecting something else.
| | 01:32 |
I'll select my rectangle again really
quickly and point out that another choice
| | 01:37 |
for deselecting is hitting
Ctrl+Shift+A on the keyboard for Windows or
| | 01:43 |
Command+Shift+A on a Mac.
| | 01:46 |
Above the Stage, across the top of
the screen, are all the menus for Flash.
| | 01:50 |
The File menu has some pretty standard
items for software, like New to create a
| | 01:54 |
New Document, Open, Save, Save As, and so on.
| | 01:59 |
If you Choose File > Publish Preview >
Flash, the SWF file will be created just
| | 02:07 |
like it did when we pressed
Command+Enter or Ctrl+Enter a moment ago.
| | 02:11 |
We'll explore the rest of the
menus as we need throughout the course.
| | 02:15 |
At the top of the screen near the
menus is this handy zoom dropdown to adjust
| | 02:19 |
the view of content on the Stage.
| | 02:22 |
You can play with this a little bit if you want,
| | 02:24 |
but since we don't have much on our
screen right now, it doesn't really show much.
| | 02:28 |
So we'll explore all the ways to
zoom in and out with precision later on.
| | 02:31 |
Now if all your Flash settings are
like mine--and I'm just using the default
| | 02:36 |
setup from when Flash is installed--
below the Stage you'll find the Timeline.
| | 02:41 |
Anything that's going to appear on our
Stage is also going to appear in the Timeline.
| | 02:46 |
A Flash Movie plays in a linear
fashion, and the Timeline helps you control at
| | 02:51 |
what point in linear time your
items will appear, and for how long.
| | 02:55 |
It also organizes content into layers.
| | 02:58 |
We will practice using the Timeline
in detail in a separate video, but for
| | 03:02 |
now, know that the Timeline will be an
integral part of the setup of all your Flash movies.
| | 03:08 |
Finally, Flash uses panels, like the
Property inspector here on the Right, the
| | 03:12 |
Library panel, and the toolbar,
where all our drawing tools are.
| | 03:17 |
These are the where all the controls
for you as the developer are, and we'll
| | 03:20 |
look at that in depth soon.
| | 03:22 |
For now, these are the main
elements that you'll interact with while
| | 03:25 |
developing in Flash.
| | 03:27 |
| | Collapse this transcript |
| Working with panels and workspaces| 00:00 |
Flash uses panels to display
controls for you as the developer.
| | 00:05 |
To better demonstrate some of the most
commonly used panels, I'm going to start
| | 00:08 |
a new blank ActionScript 3.0 FLA.
| | 00:12 |
Now I'm going to choose my Rectangle tool
and quickly draw three rectangles on my Stage.
| | 00:17 |
So I'll draw one here and a
second one here and a third here.
| | 00:24 |
Panels are displayed in the Windows
surrounding the pasteboard and the Stage, and
| | 00:28 |
you can see that a number of
panels are visible by default.
| | 00:32 |
Know that if you can't find a panel,
or you want to turn on one that's not on
| | 00:36 |
by default, you can open up the Window menu and
all the panels available to you are listed here.
| | 00:43 |
Now, if I choose the Arrow tool and
click on the Stage--or the pasteboard is
| | 00:47 |
okay too--look to the right and you'll see
the Properties panel that we mentioned earlier.
| | 00:52 |
The Properties panel displays
information about whatever you've selected.
| | 00:56 |
Since we clicked on the Stage,
the Properties panel is displaying
| | 00:59 |
information about our FLA.
| | 01:01 |
So we can see that we're targeting
Flash Player 11.2 and ActionScript 3.0.
| | 01:06 |
Our document has a background color of
white, and a Stage dimension of 550 x 400.
| | 01:12 |
If I double-click one of the
rectangles, notice that the Properties panel
| | 01:16 |
changes to tell us
information about the rectangle.
| | 01:19 |
For instance, the Width of this
rectangle is 141.95 and the Height is 65.
| | 01:24 |
The X position is 101 and the Y is 39.
| | 01:29 |
I can also type in new values if I wish.
| | 01:31 |
So for instance, I'll change the
Width of this rectangle to 100.
| | 01:37 |
So I'll click on the pasteboard to
deselect, and notice that there's a whole
| | 01:41 |
bunch of other panels here, such as
the Color panel, which allows you to
| | 01:44 |
precisely control color of objects on
the Stage, and the Swatches panel, which
| | 01:49 |
can help you create a custom
palette for use in your movies.
| | 01:53 |
Notice at the upper-right of each panel,
if you click on this little arrow, a
| | 01:57 |
flyout menu appears which offers
you options pertinent to that panel.
| | 02:02 |
So here's the one for the Swatches panel,
and here's the flyout menu for the Color panel.
| | 02:06 |
So the Library panel is a place where
you can keep copies of the items that
| | 02:12 |
you're using in your Flash project,
like bitmaps, images, and sounds.
| | 02:16 |
It's a pretty important panel, and we'll
cover it in depth a little later on in the course.
| | 02:21 |
Down at the bottom of the screen is
the Timeline, which is where you can
| | 02:24 |
control when and for how long content
appears on the Stage, as well as create animation.
| | 02:30 |
The Motion Editor allows you to
fine-tune animations, and since we don't have
| | 02:33 |
any animations, right now nothing shows up.
| | 02:37 |
Other panels that may appear here in
this area are the Output panel, which I'll
| | 02:41 |
open up for you, and the Compiler Errors panel.
| | 02:47 |
This is where Flash can give you
messages about any errors or problems with your
| | 02:51 |
movie when you test.
| | 02:53 |
For now, I'm going to move my mouse
right over to the Toolbar panel, which is
| | 02:57 |
where all the drawing tools are kept.
| | 02:59 |
I'm going to choose the Rectangle tool
again, and when I do, you'll notice that
| | 03:03 |
two places on the screen change.
| | 03:06 |
First of all is the Properties panel,
and it shows you the different settings
| | 03:10 |
that you can set for a rectangle that
you're about to draw, for instance the
| | 03:13 |
fill and the stroke, the width of the
stroke, the style, and so on and so forth.
| | 03:19 |
Also notice there's some settings below
the Drawing tools, such as the fill and
| | 03:23 |
the outline color again.
| | 03:25 |
If I click on several other of the
tools in the toolbar, like the Text tool,
| | 03:29 |
the Line tool or the Pencil tool,
you'll see that the Properties panel and the
| | 03:34 |
area below the toolbar change depending on what
options are available for that particular tool.
| | 03:39 |
Another really useful tool is the Align panel.
| | 03:42 |
Let's say I want to align my
three rectangles on the Stage.
| | 03:46 |
So I'm going to grab my Arrow tool from
the Tools panel and now click and drag
| | 03:50 |
around all three
rectangles to select all of them.
| | 03:54 |
To open the Align panel, I'm going to
go to the Window menu and then Align.
| | 03:59 |
Notice that the menu also tells you what
the keyboard shortcut is for the Align panel.
| | 04:03 |
It's Ctrl+K for the PC and Command+K on the Mac.
| | 04:08 |
So looking at the options here, we could
align our rectangles on the left edge,
| | 04:12 |
horizontal center, or on the right edge.
| | 04:14 |
Of course you could align them on the top
edge, vertical center, or along the bottom edge.
| | 04:19 |
I'm going to align them to the left.
| | 04:21 |
Notice in the second row there are
some options for distributing them
| | 04:24 |
so there's an equal amount of space
between them, like distribute top edge,
| | 04:28 |
vertical center, or bottom edge.
| | 04:31 |
I'm going to choose Distribute vertical center.
| | 04:33 |
So now there's an even amount of
space between each one vertically.
| | 04:38 |
Match size is kind of interesting.
| | 04:39 |
You can choose to match width,
height, or width and height.
| | 04:43 |
I'll Match width and you can see that all
three rectangles are now the same width.
| | 04:47 |
Notice also this little checkbox
of Align to stage at the bottom.
| | 04:52 |
If I left-align all of my rectangles now,
they'll left-align relative to each other.
| | 04:58 |
If I click Align to Stage and then
left align, the left-align relative to the
| | 05:04 |
left side of the Stage.
| | 05:06 |
I'm going to click on the Stage to get
rid of my Align panel. And there's one
| | 05:10 |
other panel you might like to know
about, which is the History panel.
| | 05:14 |
If you make a mistake while working,
you can hit Ctrl+Z or Command+Z, just like
| | 05:18 |
you can in many other programs to undo.
| | 05:21 |
If you open the History panel, which
is in Window and then Other panels and
| | 05:26 |
then History, you'll see that we have a history
of each move and change that we've made so far.
| | 05:33 |
You can drag his little slider up
the left-hand side to step back through
| | 05:36 |
your moves one by one.
| | 05:38 |
Or you can drag it back down to
step back forward through them.
| | 05:41 |
So this can be really useful.
| | 05:42 |
I'll close out of the History panel.
And the panels are designed to be moved
| | 05:49 |
around to best suit your workflow.
| | 05:52 |
For instance, I could click on the
Color panel and the Swatches panel and so on,
| | 05:57 |
one by one, or I could click on the
double-headed arrow here and expand this
| | 06:02 |
entire panel set to
reveal all the panels at once.
| | 06:06 |
You can also drag this around to
make your panels bigger or smaller.
| | 06:10 |
You've probably noticed that some panels
are grouped with, and hidden behind, others.
| | 06:15 |
So I could click Align and then Info
and Transform to bring each one of those
| | 06:19 |
panels to the front.
| | 06:21 |
You can also change the grouping of panels.
| | 06:23 |
Say we want to move the Align panel to
appear next to the Color and Swatches panel.
| | 06:28 |
To move it, you simply click and
drag the title of the panel to group it
| | 06:32 |
with Color and Swatches.
| | 06:35 |
You can also change where an
entire panel group is docked.
| | 06:38 |
So I'm going to collapse my Color group,
and see this little dotted area at the top?
| | 06:43 |
If you click and drag that, you can
move the whole panel, say, over to the left.
| | 06:48 |
If I hover over the left side of the
screen for a moment, you'll see a blue
| | 06:51 |
outline and a gray shade pop up, which
shows the new spot you can dock the panel into.
| | 06:58 |
Clicking on the gray area next to the
Timeline in the Motion Editor, I can
| | 07:02 |
drag this panel group up to the top,
and wait for the little blue outline and
| | 07:07 |
dock them at the top.
| | 07:09 |
Some people like to pull their
toolbar out so it just floats above
| | 07:12 |
everything else as they work.
| | 07:14 |
You can change the panel
layout as much as you wish.
| | 07:17 |
If you move something somewhere you
don't like and you can't get it to
| | 07:20 |
unstick, you can always go to the
dropdown at the upper-right of the screen
| | 07:25 |
that says Essentials.
| | 07:26 |
If you choose Reset Essentials, your
panel layout will return to the default
| | 07:31 |
layout you see when you open Flash.
| | 07:34 |
You can also checkout some
of the other preset layouts.
| | 07:37 |
Here's one that's meant to be useful
for designers that has the Timeline at the
| | 07:41 |
top and the Tools on the left.
| | 07:44 |
Here's another one that's meant to
be useful for developers, and so on.
| | 07:48 |
Finally, let's say you've
created a panel layout you really love.
| | 07:52 |
So I'm just going to pull my toolbar
out in the middle, and say this is what I
| | 07:57 |
really like, like this.
| | 08:00 |
You can now choose New Workspace, type
in a name for your layout, and save it.
| | 08:06 |
So I'll call it myWorkspace.
| | 08:12 |
Your new workspace now appears in the
list of possible layouts you can choose.
| | 08:17 |
I'm just going to be boring
and stick with Essentials.
| | 08:19 |
I'm going to click once on the
pasteboard to make sure everything is deselected,
| | 08:24 |
and the final thing I want to point
out is this little area in the Property
| | 08:27 |
inspector labeled SWF History.
| | 08:29 |
I'm going to hit Ctrl+Enter on my
keyboard to quickly preview my SWF file and
| | 08:34 |
then immediately close the SWF.
| | 08:36 |
You'll see that the SWF History area
handily shows you the size of the SWF we
| | 08:41 |
just published, and that updates
every time you test your movie.
| | 08:44 |
So, panels offer you information and
controls for all the elements in your Flash movie.
| | 08:49 |
You'll get to know the most commonly
used ones, like the Property inspector and
| | 08:53 |
the Timeline, quickly, and remember, that
you can always go to the Window menu and
| | 08:58 |
choose any other panel that you might need.
| | 09:00 |
| | Collapse this transcript |
| Understanding document orientation and guides| 00:00 |
Let's take a look at the
coordinate system in Flash used for
| | 00:03 |
determining position.
| | 00:05 |
To demonstrate, I've opened up the file
called position.fla in the exercise files
| | 00:09 |
for this chapter, and you can see that
we have a logo for the Roux Academy of
| | 00:13 |
Art, Media, and Design.
| | 00:15 |
To better visualize the units of
measurement, you might want to turn on the rulers.
| | 00:19 |
To do this, go to the
View menu and choose Rulers.
| | 00:23 |
The default increment of
measurement on the rulers is pixels.
| | 00:27 |
You can also see that the origin
point for the Stage is measured from the
| | 00:30 |
upper left-hand corner.
| | 00:32 |
In Flash, the X axis goes horizontally,
starting at 0 at the upper left-hand
| | 00:37 |
corner and going across the top.
| | 00:40 |
The Y axis also starts at 0 at the upper
left-hand corner and gets bigger as you
| | 00:45 |
go down the left-hand side of the Stage.
| | 00:47 |
So if I use my Arrow tool to click on
the logo, a little black cross appears on
| | 00:52 |
the upper-left of the logo that
indicates its registration point, or what point
| | 00:57 |
on the logo its position is measured from.
| | 01:00 |
You can look at the logo's registration
point relative to the rulers to figure
| | 01:04 |
out its position, or you could
just look in the Property inspector.
| | 01:08 |
We can see that the X position is
100 and the Y position is 100 as well.
| | 01:13 |
I'm going to type in 250 for the X
position, and when I do, you can see that the
| | 01:19 |
logo moves over 150 pixels
on the X axis to the right.
| | 01:24 |
To further help you line things up on
the Stage, you might like to use guides.
| | 01:28 |
To create a guide line, first click on
the pasteboard somewhere to make sure
| | 01:32 |
you've deselected the rectangle.
| | 01:34 |
Now click and hold on either one
of the rulers and drag a guide out.
| | 01:38 |
You can create as many guides as you
wish, and you can also reposition them by
| | 01:43 |
simply clicking and dragging them
to a new location with your mouse.
| | 01:48 |
You could also double-click on a guide
and type in the location you want it to have.
| | 01:52 |
So I will double-click on this bottom one
and tell it that I want it to be at 250 pixels.
| | 01:59 |
Guides are only a tool for you as the developer.
| | 02:02 |
If I publish my movie, you will see that
the guides don't appear in published SWF.
| | 02:09 |
So back in Flash, if you want to
lock your guides in place so you don't
| | 02:13 |
accidentally move them, you can go to
the View menu, then Guides and then Lock
| | 02:18 |
Guides. And you can see now I can't
select and move them around anymore.
| | 02:24 |
If it's helpful for you to change the
color of the guides, you can go to the
| | 02:28 |
View menu, then Guides, and then Edit Guides.
| | 02:31 |
I am going to click on the little color chip to
change my guides from cyan to a magenta color.
| | 02:36 |
You also have the option to turn the
visibility of your guides on and off
| | 02:40 |
by ticking Show guides, and you can also
lock or unlock your guides from here as well.
| | 02:46 |
I'll unlock mine.
| | 02:47 |
Snap to Guides allows you to make
objects on the Stage line themselves up with
| | 02:52 |
the guidelines, and you can choose in the
dropdown how responsive this is going to be.
| | 02:56 |
I will stick with Normal and click OK,
and you'll see that as I drag my logo
| | 03:01 |
around, the spot in the center
lines itself up with the guidelines.
| | 03:05 |
It snaps right to them.
| | 03:08 |
To get rid of a guide, you can simply
drag the guide back up onto the ruler,
| | 03:12 |
or as you may have noticed, you can
go to the View menu, then Guides, and
| | 03:17 |
then Clear Guides.
| | 03:20 |
| | Collapse this transcript |
| Zooming and moving around| 00:00 |
Using the Zoom and the Hand tools in
Flash allows you to adjust the view of your
| | 00:04 |
content so you can work on it with ease.
| | 00:07 |
There are several ways in
Flash to zoom in and out.
| | 00:10 |
I've opened the file called
zoom.fla from the exercise files for this
| | 00:14 |
chapter, and I'm going to click once
on the Stage to just make sure that
| | 00:18 |
everything is deselected.
| | 00:19 |
Now, honestly, for zooming, I
like to use keyboard shortcuts.
| | 00:24 |
Try pushing Ctrl or Command and then the
plus key at the same time to zoom in on
| | 00:29 |
the center of the Stage.
| | 00:31 |
Similarly, Ctrl or Command
and the minus key zooms out.
| | 00:35 |
Using the hot keys, as you probably
notice, just zooms us in and out on the
| | 00:38 |
center of the Stage.
| | 00:40 |
If you use your Arrow tool to click
and drag around the Roux Academy logo to
| | 00:44 |
select it and then use Ctrl and the
plus key, you'll notice that Flash zooms in
| | 00:50 |
and out on the selected object.
| | 00:52 |
Notice that you have little scroll
handles to scroll right and left or up
| | 00:56 |
and down when you're zoomed in, if you need
to re-center your imagery so you can work.
| | 01:00 |
I'm going to press Ctrl and the minus
key one more time to zoom out, and now I'll
| | 01:04 |
click once on the
pasteboard to deselect the logo.
| | 01:07 |
Now another option for zooming is the
handy Zoom tool over on the toolbar.
| | 01:12 |
Once you selected the tool, near the
bottom in the Options area, you can choose
| | 01:16 |
Enlarge and click, or you can
choose Reduced, and click to reduce.
| | 01:21 |
I'm going to choose the Enlarge option
again, and notice that you can also click
| | 01:26 |
and drag to zoom in on a particular
spot on the Stage, so you can work in
| | 01:30 |
detail on your content.
| | 01:32 |
So I'll click and drag on that
upper-right corner of my logo and now I've got
| | 01:36 |
a really close view.
| | 01:38 |
A final option for zooming is the
Zoom dropdown menu on the upper-right.
| | 01:43 |
You can choose a percentage to zoom
in or out to or choose Fit in Window,
| | 01:47 |
Show Frame, or Show All.
| | 01:49 |
Fit in Window fits the Stage into the
window area that you've allowed for it.
| | 01:54 |
So, to demonstrate, I'm going to grab
the top of my Timeline and expand it way
| | 01:59 |
up so that the Timeline takes a lot of room.
| | 02:02 |
Now I'm going to choose Fit in Window.
| | 02:04 |
You can see that the Stage takes up as
much room as I've given it between the
| | 02:08 |
Timeline and the top bar of Flash.
| | 02:10 |
Now I'm going to decrease the size of
my Timeline again, and you can see that it
| | 02:14 |
updates accordingly.
| | 02:15 |
Show Frame gives you the scrollbars
so you can move your view around.
| | 02:20 |
When you choose Show All, Flash will
change the view so that you can see all of
| | 02:24 |
your artwork, including any that might
be hiding out of view on the pasteboard,
| | 02:28 |
like we have down below here.
| | 02:31 |
I use Show Frame a lot.
| | 02:32 |
I think that's a really good
one for easily re-centering.
| | 02:36 |
There is actually a few keyboard
shortcuts that you can use in place of the
| | 02:39 |
dropdown menu, if you want to memorize them.
| | 02:42 |
If you go to View and then Magnification,
you'll see the same options as in the
| | 02:47 |
dropdown, and then the
corresponding keyboard shortcuts.
| | 02:50 |
I'll just pick Show Frame for now.
| | 02:52 |
Now, a good way to easily pan around
to different parts of your Stage is by
| | 02:56 |
using the Hand tool.
| | 02:57 |
Just grab the Hand tool from the toolbar and
then click and drag the Stage to move it around.
| | 03:03 |
You can see that I'm not moving my artwork;
| | 03:05 |
I'm just moving my view of it.
| | 03:07 |
If you like the Hand tool as a way
to move things around, you might like
| | 03:10 |
this keyboard shortcut.
| | 03:11 |
I'm going to make sure that I've
got my Selection tool or my Arrow tool
| | 03:15 |
selected, so you can see it's just
the arrow, and now I'm going to press the
| | 03:19 |
spacebar on the keyboard.
| | 03:21 |
As long as I've got the spacebar
pressed down, the Hand tool will be activated.
| | 03:25 |
When it's not pressed down, you just
toggle back to the regular Selection tool.
| | 03:29 |
So using the various ways to zoom in
and out and the Hand tool, you can easily
| | 03:33 |
change your view of your content on
the screen, allowing for the easiest
| | 03:37 |
editing possible.
| | 03:39 |
| | Collapse this transcript |
|
|
3. Importing GraphicsNavigating in the library| 00:00 |
The library is the place in Flash where
you can keep copies of and organize all
| | 00:05 |
your reusable assets from your movies.
| | 00:07 |
To work with libraries, I've opened
up animals.fla and welcome.fla from the
| | 00:13 |
exercise files for this chapter.
| | 00:14 |
Now first off, if you don't see the
library, you can always open it up by going
| | 00:19 |
to Window and then choosing Library.
| | 00:21 |
So in my animals library you can see I
have several different items here, and if
| | 00:27 |
you click on them, you'll see
a preview in the Preview area.
| | 00:31 |
You can click on the Name header to
organize your library items by name.
| | 00:36 |
If you expand the library out
horizontally, you'll see that you can organize
| | 00:40 |
them by Use Count as well.
| | 00:42 |
All of mine are used only once,
so that doesn't do much right now.
| | 00:47 |
You can also organize them by the date modified.
| | 00:51 |
So I'll shrink my library back down again.
| | 00:54 |
You can also create different
folders to help organize your assets.
| | 00:58 |
So I'll click on the New Folder
icon and give it the name of animals.
| | 01:03 |
Now I can drag and drop each of my
animals into the folder, and then you can
| | 01:08 |
expand or collapse your
folder to see what's in it.
| | 01:11 |
Notice that you can also double-click on the
name of anything in the library and rename it.
| | 01:15 |
So I'll rename my folder to jungleanimals.
| | 01:20 |
A good best practice to keep in mind
is to make sure that the names of your
| | 01:23 |
items and folders are
something intuitive and descriptive.
| | 01:27 |
This may not seem that important for
a file with just a few items in the
| | 01:30 |
library, but trust me, libraries can
get big quickly, and you can waste huge
| | 01:35 |
amounts of time trying to figure out
what's what if you have 50 different items
| | 01:38 |
and they're all named something
non-descriptive like image 1, image 2, and image 3.
| | 01:43 |
So if you click on an item in the
library and click the little Info icon at the
| | 01:48 |
bottom, you can get more information
about that particular library item.
| | 01:52 |
Go ahead and cancel out of that.
| | 01:54 |
If you want to delete something out of
the library, you simply click on it and
| | 01:58 |
then click the icon of
the trashcan at the bottom.
| | 02:00 |
But I'm not going to do that.
| | 02:02 |
Finally, you can create new library
items by clicking the New Symbol button,
| | 02:07 |
which looks like a piece of paper.
| | 02:09 |
We'll talk more about
symbols later on in the course,
| | 02:12 |
so for now I'll just cancel out of this.
| | 02:15 |
Notice that I also have
another FLA open here, welcome.fla.
| | 02:19 |
There's nothing on the Stage of this FLA,
but notice that there's a single item
| | 02:24 |
in the library, with the name of
welcome, and it says, "Welcome to the Jungle!"
| | 02:29 |
If I want to get this item from one
library into the animals library, I could
| | 02:34 |
just right-click on the
welcome item and choose Copy.
| | 02:38 |
Then I could flip back to my animals.fla and
in the library, right-click and choose Paste.
| | 02:45 |
You notice that I dropped my welcome
item into the jungleanimals folder, and I
| | 02:49 |
don't want it there,
so I'm just going to drag it up and out.
| | 02:53 |
Actually, I'm going to delete that
welcome item, because they're several other
| | 02:56 |
ways to access items in a different library.
| | 02:59 |
So I'm going to run through those quickly here.
| | 03:01 |
So one method would be here in animals.fla,
| | 03:05 |
I'm going to change the dropdown at
the top of the Library panel to welcome.
| | 03:10 |
Notice that I'm still working in my
animals.fla file, but I'm looking at the
| | 03:14 |
library of welcome.fla.
| | 03:17 |
So I can drag and drop the welcome sign into
my animal.fla from here, just onto the Stage.
| | 03:23 |
But I'm not going to do that right now.
| | 03:24 |
I'm going to change the dropdown back
to animals.fla so we're looking at this
| | 03:28 |
movie's own library.
| | 03:31 |
Now notice as I toggle back and forth
on the tabs between animals and welcome,
| | 03:35 |
the corresponding library
appears in the Library panel.
| | 03:39 |
So I'm going to flip over to welcome.fla
and then click the Pin Current Library icon.
| | 03:44 |
It looks like a little pin right here.
| | 03:47 |
Now, when I flip back and forth between
my FLA files, I see the library for a
| | 03:52 |
welcome all the time, regardless
of which FLA file I'm looking at.
| | 03:56 |
So I'll just go back to welcome.fla
and unpin the library, and now when we
| | 04:01 |
toggle back and forth, each FLA
displays its own library again.
| | 04:06 |
Back in animals.fla, there's another
trick you can use to have the assets from
| | 04:11 |
two libraries open at once.
| | 04:13 |
I'm going to click the New
library panel icon up here on the right.
| | 04:18 |
Now I have a second Library panel open,
and notice in the dropdown that I can
| | 04:23 |
choose between animals and welcome.
| | 04:25 |
So I'll choose welcome.
| | 04:27 |
So I have a library of both
FLAs open at the same time.
| | 04:31 |
If I had 6 different FLA files open,
I could choose from all 6 of their
| | 04:35 |
libraries here in the dropdown.
| | 04:38 |
So I'm going to close that second Library
panel, and now I'll also close welcome.fla.
| | 04:42 |
I'm not going to save any changes.
And the final way to have the assets of
| | 04:48 |
multiple libraries open is to go to
the File menu, and then Import, and then
| | 04:54 |
Open External Library.
| | 04:55 |
Even though it says Open Extra
Library, I'm going to navigate to my
| | 04:59 |
welcome.fla file and choose Open, and you see
here that it opens it up as an external library.
| | 05:07 |
So after all of that, finally, I'll drag
and drop the welcome sign into animals.fla.
| | 05:13 |
It appears on the Stage and also, of course,
in the library for animals.fla, right there.
| | 05:20 |
So the library is a place to store all you
reusable assets, organize, and sort them.
| | 05:25 |
And as you've seen, there's about a
million different ways to access the assets
| | 05:29 |
in other libraries as well,
| | 05:31 |
so you can combine assets
from different FLA files easily.
| | 05:35 |
| | Collapse this transcript |
| Understanding and importing bitmaps| 00:00 |
While Flash provides you a number of
drawing tools, using imagery that's been
| | 00:04 |
created outside of Flash is likely
going to be something you'll want to do often.
| | 00:08 |
So I've started a new blank
ActionScript 3.0 file, and I've saved it into the
| | 00:13 |
End folder in the exercise files
for this chapter as bitmapImport.fla.
| | 00:19 |
In the Property inspector, notice that
the default document settings have the
| | 00:23 |
Stage dimensions as 550x400
and a white background color.
| | 00:27 |
Now for bitmap images, Flash can import
the common web file types like JPEG, GIF
| | 00:33 |
and PNG, although it's not
limited to just those three.
| | 00:37 |
If you need to import an image that has
transparency, that transparency will be
| | 00:41 |
preserved with PNG files.
| | 00:44 |
So there's two ways to import
bitmaps into Flash, which are similar.
| | 00:48 |
I'll start by going to the File menu and
choosing Import, then Import to Library.
| | 00:53 |
In the exercise files for this
movie, I'll choose the file called
| | 00:57 |
jungle_background_550x400,
and then click Open to import.
| | 01:03 |
Flash thinks about it for a minute
and then the import process is done.
| | 01:07 |
Nothing's on the Stage, but if I
open my library, you'll see the
| | 01:10 |
jungle_background image there, and you
can click on it to get a little preview
| | 01:14 |
of it in the Library.
| | 01:15 |
From here, I can drag and drop the
image from the library onto the Stage.
| | 01:20 |
I'm going to undo that and actually,
I'm going to delete the jungle_background
| | 01:24 |
out of the library so we can look
at the other way to import bitmaps.
| | 01:29 |
So now I'll go to the File menu and
choose Import, and then Import to Stage.
| | 01:35 |
I'll select that same jungle_background
image from the exercise files and click
| | 01:39 |
Open, and this time the image is placed
automatically onto the Stage, as well as in the library.
| | 01:45 |
So the difference between Import to
Library and Import to Stage is really just
| | 01:49 |
that the Import to Stage places a
copy of the image on the Stage for you.
| | 01:53 |
So I'm going to click on the image on
the Stage to make sure it's selected, and
| | 01:58 |
now in the Property inspector, I'm
going to notice that the Width of our image
| | 02:01 |
is 550 and the Height is 400.
| | 02:03 |
Well, that's great that the image is
already at the same size as our Stage,
| | 02:07 |
because it's a bitmap.
| | 02:09 |
Bitmap images don't scale up and
down easily. You can think of image
| | 02:13 |
information for bitmaps kind of like a grid.
| | 02:15 |
For instance, in our image, one pixel is green,
| | 02:19 |
then the pixel next to it is a lighter
green, and then the pixel next to it is
| | 02:22 |
brown, and so on, and so on.
| | 02:24 |
If you need to scale a bitmap image up
so it's bigger, your image program has to
| | 02:28 |
guess what color to use to fill in the
extra space you've added to the grid.
| | 02:32 |
Likewise, scaling a bitmap image down
also require some guesswork as to what
| | 02:37 |
color to make each pixel, since you're
essentially making the area of the grid smaller.
| | 02:42 |
You can see this behavior by clicking
on the image to make sure it's selected
| | 02:46 |
and then over in the toolbar,
selecting the Free Transform tool.
| | 02:50 |
It's the third one from the top.
| | 02:52 |
Transformation handles appear on the
image, and you can then resize the image.
| | 02:56 |
We'll talk more about the
Transformation tool in a different movie, but for
| | 03:00 |
now, if I approach the upper right-hand
corner of the image, a double-headed arrow appears.
| | 03:05 |
This allows me to change the width and
height of the image at the same time.
| | 03:09 |
So I'm going to zoom out a little bit,
and then I'm going to make my image
| | 03:13 |
really, really, really big.
| | 03:16 |
See how the image quality of it has
degraded as the image got bigger?
| | 03:20 |
The trees, leaves, and other items
on the image start looking blocky or
| | 03:24 |
pixelated, and that's
because as the bitmap scales,
| | 03:27 |
there's not defined information to
fill in the extra pixels that I'm asking
| | 03:31 |
the image to include.
| | 03:32 |
It's just guessing.
| | 03:33 |
Pictures you take with the camera are a
great example of imagery captured as a bitmap.
| | 03:38 |
You would use a program like Adobe
Photoshop to be able to resize bitmaps
| | 03:42 |
without getting this kind of pixelation.
| | 03:44 |
So the conclusion to take away about
bitmap images is that it's best to have
| | 03:48 |
them sized at the correct dimension you
need before importing them into Flash.
| | 03:53 |
So now that we've sufficiently messed
up our image, I'll change back to the
| | 03:57 |
arrow Selection tool.
| | 03:58 |
I'm going to click on image to
make sure it's still selected.
| | 04:01 |
In the Property inspector, I'm going
to make sure that this little Lock width
| | 04:05 |
and height values together icon looks like
a broken chain, as opposed to a whole chain.
| | 04:11 |
This is going to allow me to
change the Width and Height dimensions
| | 04:14 |
separately from each other.
| | 04:15 |
So I'm going to change the Width
back to 550, and the Height back to 400.
| | 04:21 |
Remember that Flash measures the
origin point from the upper left-hand of the
| | 04:26 |
screen, and the position of items on the
Stage, by default, is measured from the
| | 04:30 |
upper left-hand corner as well.
| | 04:32 |
So I'm going to put 0 for the X
and 0 for the Y so that our image looks
| | 04:37 |
centered directly on the Stage.
| | 04:39 |
So now our image is placed correctly
and the pixelation that we saw when we
| | 04:43 |
stretched the image out has gone away.
| | 04:45 |
I'll zoom back in, just so we can see that.
| | 04:47 |
So you've seen that importing bitmap
imagery into Flash only requires the simple
| | 04:52 |
steps of going to File and then Import,
and then choosing if you want to import
| | 04:56 |
to the library or to the Stage.
| | 04:59 |
Remember that as a best practice,
have your bitmap sized correctly before
| | 05:03 |
bringing them into Flash.
| | 05:05 |
| | Collapse this transcript |
| Understanding and importing vector files| 00:00 |
Flash allows you to import files with
vector artwork to use in your Flash projects.
| | 00:05 |
The import process is similar to that for
bitmaps, but you have a few more options.
| | 00:09 |
So I have opened the file called
jungle.fla from the Start folder in the
| | 00:13 |
exercise files for this chapter,
| | 00:15 |
and I'll save a copy of it
right away into the end folder.
| | 00:20 |
You can see that it's already got the
bitmap jungle_background image in it.
| | 00:24 |
To import vector artwork, go to the
File menu, scroll down to Import, and
| | 00:28 |
select Import to Library.
| | 00:31 |
You could Import to Stage and get a
similar result, but we will choose Import to
| | 00:34 |
Library for this demonstration.
| | 00:37 |
So I will navigate to the Start
folder for this movie's exercise files and
| | 00:41 |
choose the file called giraffe.ai--it's
an Adobe Illustrator file--and click Open.
| | 00:47 |
So we're presented with some
options before we import our file.
| | 00:51 |
Down the left-hand side you can
select or deselect which layers from the
| | 00:55 |
Illustrator file you want
to include in your import.
| | 00:57 |
I am going to close some of these
dropdowns so all the nested layers aren't
| | 01:02 |
quite so overwhelming.
| | 01:04 |
This Illustrator file is
actually somewhat complex.
| | 01:07 |
I am going to cancel out of this and
open up the Illustrator file so we can take
| | 01:11 |
a closer look at it.
| | 01:13 |
You can see that in layer 1 there
is actually four different groups.
| | 01:17 |
I will turn the visibility of all four of
them off and then turn them on again one by one.
| | 01:22 |
And you can see that each one is the
giraffe in a different position as he walks.
| | 01:28 |
I think the one I like best
is the second from the bottom.
| | 01:31 |
So I will turn the other ones off.
And just notice that he's got a lot of
| | 01:36 |
different layers, even for just this position.
| | 01:38 |
So I'll close the Illustrator
file and then go back in to Flash.
| | 01:42 |
I will go back to File, and then
Import, and then Import to Library, choose
| | 01:48 |
giraffe, and now I'll deselect the
checkbox next to each layer except for the one
| | 01:55 |
second to the bottom, called layer 2,
since that's the one that's got the
| | 01:58 |
position of the giraffe that I want.
| | 02:01 |
Now I'll click on pos.2
title and you'll see some more options for
| | 02:05 |
the import show up on the right-hand side.
| | 02:08 |
Basically, from here, the default
settings that are selected should be okay,
| | 02:12 |
but on the right, I could choose to import my
AI file as a bitmap, which I don't want to do;
| | 02:18 |
I want it to remain vector,
so I won't click that.
| | 02:20 |
You could also choose to wrap
everything you're importing up into a movie clip
| | 02:24 |
symbol by checking Create movie clip.
| | 02:27 |
We haven't talked about movie clips
yet, so let's not check this either.
| | 02:31 |
We can always convert something
to a movie clip later down the line.
| | 02:34 |
Down at the bottom, in the Convert to
layers dropdown, you can choose to have
| | 02:38 |
Flash preserve the layers
by choosing Flash Layers.
| | 02:42 |
You could also have Flash squish all
the layers into one by choosing Single
| | 02:45 |
Flash Layer or you could have it
convert all the layers to keyframes.
| | 02:50 |
We haven't discussed keyframes yet either,
but that's okay because we want to go
| | 02:54 |
ahead and preserve the
layers set up in Illustrator.
| | 02:56 |
So we'll just leave this at Flash Layers.
| | 02:58 |
I also don't want to import any unused
symbols and I don't want to import this
| | 03:03 |
as a single bitmap image, so we'll just leave
these two boxes unchecked and just click OK.
| | 03:08 |
It doesn't look like much has happened
because we imported the image into the
| | 03:12 |
library, not to the Stage, but in the
library, indeed, there is giraffe.ai and if I
| | 03:18 |
click on him, we see a little preview.
| | 03:19 |
He is in here as a graphic symbol, and
we will cover symbols in detail later,
| | 03:24 |
but for now, think of
symbols as a reusable blueprint.
| | 03:28 |
So I am going to drag a copy of the giraffe
out of the library and drop it onto the Stage.
| | 03:34 |
It's a little too big, so I'll head
over to the toolbar and grab the Free
| | 03:38 |
Transform tool, or you could just press Q on
your keyboard as a shortcut to Free Transform.
| | 03:43 |
You can change the horizontal or vertical
dimension by dragging the transform handles.
| | 03:49 |
Notice that you can change the
dimensions as much as you want and the image
| | 03:53 |
always stays looking sharp and non-pixelated.
| | 03:56 |
The giraffe might look a little
stretched, but he is non-pixelated.
| | 03:59 |
And that's because this is a vector graphic.
| | 04:02 |
Instead of storing information about the
image like a grid, like bitmaps, vectors
| | 04:07 |
instead use mathematical equations
to describe the shapes and curves.
| | 04:11 |
As you change the image, the shape
of the image is simply recalculated
| | 04:15 |
so it always appears crisp.
| | 04:16 |
So I am going to delete my giraffe
because he is all stretched out, and now I
| | 04:20 |
will just drag and drop
another copy of him to the Stage.
| | 04:23 |
The Free Transform handles are still there,
| | 04:26 |
so I'm going to hold down the Shift key
of my keyboard and then click and drag
| | 04:30 |
on the upper right-hand corner of the giraffe.
| | 04:33 |
Dragging at the corner allows you to
resize both the width and height at the
| | 04:36 |
same time, and holding down the Shift
key allows you to constrain the dimensions
| | 04:40 |
of the giraffe so he scales down proportionally.
| | 04:43 |
About here is a good size, and I will
just move him into a good spot so he's
| | 04:47 |
having a nice stroll through the jungle.
| | 04:50 |
It's a good idea to have your vector
imagery already sized correctly before you
| | 04:54 |
import it into Flash.
| | 04:56 |
That way your FLA is not carrying
around the extra file size of a giraffe the size
| | 05:00 |
of Godzilla that you'll need
to end up scaling down anyway.
| | 05:04 |
However, if you're not exactly sure
the dimensions you need, you can see
| | 05:07 |
that adjusting the dimensions after the
fact works just fine, in terms of image quality.
| | 05:13 |
With the Arrow tool, now I am going to
double-click on the image of the giraffe.
| | 05:18 |
You will notice that the screen changes.
The top-left of the screen says Scene 1
| | 05:22 |
and then giraffe.ai, and the
background image is grayed out.
| | 05:26 |
What we've done is stepped
into the giraffe image itself.
| | 05:29 |
I will double-click again and keep
double-clicking until I have drilled down
| | 05:33 |
all the way through the various
layers, until I get to the most broken-down
| | 05:36 |
piece of the giraffe's leg.
| | 05:39 |
Notice how the other areas of the
giraffe are grayed out, since we have stepped
| | 05:42 |
in several levels to the shape
that makes up the giraffe's leg.
| | 05:46 |
Notice also how the upper-left of the
screen says Scene 1 giraffe.ai and then
| | 05:52 |
several more levels.
| | 05:53 |
What we're seeing here is all the
individual layers from the original
| | 05:57 |
Illustrator file that have been preserved.
| | 06:00 |
This proves very useful when you want to
manipulate or animate individual parts of an image.
| | 06:05 |
For now, I'll click on Scene 1 on the
upper-left to step back up out of the
| | 06:09 |
giraffe image and return to the
main Timeline, and I'll save my file.
| | 06:14 |
So importing vector imagery into Flash
is as simple as going to File and then
| | 06:18 |
Import, and then choosing if you when
import to the library or to the Stage.
| | 06:23 |
Vector imagery looks good whether you
scale it up or down, but remember, as a
| | 06:26 |
best practice, to have your image
resized as closely to the actual size you
| | 06:30 |
needed at before bringing it into Flash.
| | 06:34 |
| | Collapse this transcript |
| Using tricks and techniques for imported imagery| 00:00 |
Here are some useful techniques for
manipulating and optimizing bitmap and
| | 00:04 |
vector imagery once
they're imported into Flash.
| | 00:07 |
Imported bitmaps can be a big
source of file size bloat in your SWFs.
| | 00:11 |
The best way to avoid this is to plan ahead.
| | 00:14 |
Import images only at the dimensions
and resolution that you really need them.
| | 00:18 |
That being said, you can rachet down
the size of your final SWF by affecting
| | 00:22 |
the quality of
compression Flash uses for images.
| | 00:26 |
To demonstrate this, I've saved a
copy of the jungle.fla document from the
| | 00:30 |
exercise files for this
chapter into the end folder.
| | 00:34 |
This movie has a single layer that
has the jungle_background bitmap in it.
| | 00:38 |
So I'm going to take a quick look at
what the published SWF file will look like
| | 00:42 |
by hitting Ctrl+Enter.
| | 00:44 |
I'll close the SWF and open the Property
inspector and look in the SWF History area.
| | 00:50 |
Here we can see the size of the published SWF.
| | 00:52 |
We're at 63.2 kilobytes.
| | 00:55 |
Now in the library, I'll
double-click on the little tree icon next to the
| | 01:00 |
jungle_background.jpg to open
up the Bitmap Properties box.
| | 01:05 |
Using the Quality radio button, you
can set a custom compression that Flash
| | 01:10 |
should use, instead of
the default for your image.
| | 01:13 |
I'm going to be pretty
aggressive and change this to 40%.
| | 01:17 |
I'll click OK and then publish the movie again.
| | 01:21 |
The quality of the
background image is certainly reduced.
| | 01:24 |
You can see a lot of
blockiness and pixelation in the image.
| | 01:27 |
However, when I close the SWF and look
at the SWF History box, you can see that
| | 01:31 |
our file size has been reduced
significantly, down to 16.7 K.
| | 01:37 |
I'm going to restore my background
image back to its original settings,
| | 01:41 |
but know that you can play with this
to find the right balance between image
| | 01:44 |
quality and file size, if the
final SWF size is a concern for you.
| | 01:49 |
If you're building an application
like an image gallery that shows a lot of
| | 01:52 |
high-quality images, you might want to
keep studying Flash and try techniques
| | 01:57 |
like loading in external images or
other assets one by one on demand, instead
| | 02:02 |
of embedding them all into a SWF file
like we've done here and trying to fight
| | 02:06 |
with the file size.
| | 02:07 |
So that Bitmap Properties box that we
just used has another useful option in it.
| | 02:12 |
To demonstrate, I'm going to rotate my
image to the left by choosing the Free
| | 02:16 |
Transform tool, clicking the image,
and then grabbing it at the upper-right.
| | 02:21 |
You can see my cursor changes to a
little circular arrow, and I'm just going
| | 02:25 |
to rotate the image.
| | 02:26 |
Notice how the image gets some weird
jagged edges and just doesn't look good
| | 02:30 |
when we publish the SWF, because of the rotation.
| | 02:33 |
I'll close the SWF and double-click on
the image in the library again to open up
| | 02:38 |
the Bitmap Properties box.
| | 02:40 |
This time, I'll check this little box
next to Allow smoothing and then click OK.
| | 02:45 |
Right away you can see the difference,
and when I publish the SWF image, looks
| | 02:49 |
nice and smoothed out.
| | 02:50 |
I'm going to hit Ctrl+Z on my keyboard
once to undo the smoothing change and a
| | 02:56 |
second time to undo the rotation
| | 02:58 |
so we're back where we started.
| | 03:00 |
So let's take our bitmap and
change it into a vector image.
| | 03:04 |
This can be good because, as you'll
soon see, we get a chance to create some
| | 03:07 |
stylized artwork, but even better, is
that once our image is vector, it can scale
| | 03:12 |
up and down without losing quality.
| | 03:15 |
So I'll choose my Selection tool
and click on the image to make sure
| | 03:18 |
it's selected, and now we'll go to the
Modify menu, then Bitmap, and then Trace Bitmap.
| | 03:25 |
Adjusting the Color threshold and
Minimum area allows you to control how complex
| | 03:30 |
the colors are inside the shapes
that we're going to be creating.
| | 03:33 |
The higher the value means a less complex shape.
| | 03:36 |
The lower value means a more complex shape.
| | 03:40 |
You don't want to go bananas in
making an image too complex of a vector
| | 03:43 |
graphic, since a very complex vector
shape could slow down the Flash Player
| | 03:48 |
more than a bitmap image.
| | 03:50 |
So I'll put my Color threshold at
50 and use a Minimum area of 8.
| | 03:56 |
Corner threshold determines how colors
will be created when the image is vectorized.
| | 04:01 |
I'll just leave this at Normal.
| | 04:04 |
Curve fit allows how
curves are going to be rendered.
| | 04:07 |
For more curves, you'd choose Very Smooth;
| | 04:10 |
for less curves, you'd choose Pixels.
| | 04:13 |
I'm just going to stick with Normal.
| | 04:15 |
You can click Preview to see what your
image is going to look like as a vector graphic.
| | 04:20 |
That looks fine
| | 04:21 |
so I'll click OK, and now we have a
vector graphic created from a bitmap.
| | 04:26 |
You can tell because you can click on
the shapes and move them around and select
| | 04:29 |
them just like any other vector image in Flash.
| | 04:33 |
Also notice in the
Property inspector, it says Shape.
| | 04:36 |
I'm going to hit Ctrl+Z to undo that change
| | 04:39 |
so my image is restored.
| | 04:41 |
So a good practice when you have
complex vector artwork like this is to
| | 04:45 |
optimize the shapes.
| | 04:47 |
Whether you've broken a bitmap apart
like we just did or you're working with
| | 04:51 |
imagery that you imported as a
vector, this can be a good technique.
| | 04:54 |
Complicated vector artwork can
eventually slow the Flash Player down if it has
| | 04:59 |
to render complex objects over and over.
| | 05:02 |
So I'm going to hit Ctrl+A on my
keyboard or Command+A on a Mac.
| | 05:07 |
So select everything on the Stage and
then I'll go to Modify > Shape and Optimize.
| | 05:12 |
The Optimize Curves dialog box comes up,
and you can set the Strength for the
| | 05:17 |
optimization and choose to
see a preview of the image.
| | 05:21 |
You can also see a totals message,
and we'll see that in just a second.
| | 05:25 |
I'm going to slide the
Strength all the way up to 100.
| | 05:28 |
Watch carefully and you can see how
the image changes just a little bit.
| | 05:33 |
What it's doing is removing anchor
points and making the shapes less complex.
| | 05:38 |
So I'll click OK, and here we get a
message that the original image had 8,585 curves.
| | 05:45 |
The optimized shape has 6,403 curves.
| | 05:48 |
This is a 25% reduction.
Now that's pretty good.
| | 05:52 |
For our last technique, we've got all
these shapes on our screen, and it might be
| | 05:57 |
useful to be able to move them
around as a group so parts of it don't
| | 06:00 |
accidentally get knocked
out of place, like this.
| | 06:02 |
I'm just going to undo that change.
| | 06:05 |
So I'm going to hit Ctrl+A on my
keyboard to select all, and then go to
| | 06:09 |
Modify and then Group.
| | 06:11 |
Notice also the keyboard shortcut of
Command+G or Ctrl+G. Now I can move the
| | 06:17 |
entire image background as a group.
| | 06:20 |
If you want to undo the grouping,
you just go to Modify and then Ungroup.
| | 06:25 |
So in this movie we've
looked at a lot of techniques.
| | 06:28 |
We looked at how to change the
compression settings for bitmaps to make them
| | 06:32 |
carry less file size, as well as how
to smooth them so they appear smooth
| | 06:35 |
when they're rotated.
| | 06:36 |
We also saw how to change a bitmap image
into vector using the Trace Bitmap command.
| | 06:42 |
Then we saw how to optimize shapes
so they have fewer curves and aren't
| | 06:46 |
so complex.
| | 06:48 |
| | Collapse this transcript |
|
|
4. Structuring a Flash DocumentAdjusting document settings| 00:00 |
Let's create a blank ActionScript 3.0
FLA file and look at how to adjust a few
| | 00:05 |
important document settings
before adding to any Flash project.
| | 00:10 |
So first, I am going to save my
file to my computer as test.fla, and to
| | 00:15 |
the desktop is fine.
| | 00:18 |
To set the properties for your document,
like background color and size, simply
| | 00:22 |
click on the Stage and
look in the Properties panel.
| | 00:25 |
The Properties panel tells you
information about whatever thing you've clicked
| | 00:28 |
on, and in this case, it's the
Stage, so the document itself.
| | 00:32 |
Before we go further, I am going to
grab my Rectangle tool and quickly draw a
| | 00:37 |
shape on the Stage to demonstrate
something else in just a moment.
| | 00:42 |
So I'll just draw my rectangle, and then
use my Arrow tool and click on the rectangle.
| | 00:49 |
We can see in the Property inspector
that the width is 125 and the height is 72.
| | 00:55 |
So I will click on the
pasteboard to deselect the rectangle.
| | 00:57 |
In the Property inspector, we see the
properties about the FLA document again.
| | 01:02 |
Here in the Properties area, I'll
click on the icon of the wrench to edit
| | 01:06 |
document properties.
| | 01:08 |
We can see that the current
dimensions of our Stage are 550 x 400 and you can
| | 01:12 |
change this by typing in new dimensions.
| | 01:14 |
For example, I will put 640 x 480.
| | 01:18 |
You can adjust the 3D Perspective
Angle if you want, which will make sense a
| | 01:22 |
little later on in the course.
| | 01:25 |
You can also choose to
scale content with the Stage.
| | 01:28 |
What that means is any content on the
Stage will scale relative to the new size
| | 01:33 |
of the Stage once we click OK.
| | 01:35 |
Let's check this, and we'll expect to
see our rectangle get a little bit bigger
| | 01:39 |
once we click OK, since we just made our
Stage dimensions a little bit bigger as well.
| | 01:45 |
Here in the Ruler units is where you
can also change the units of rulers to
| | 01:49 |
Inches, Centimeters, or other choices.
| | 01:53 |
With this radio button, you can make
your document match your default settings
| | 01:56 |
in Flash; or content, if you've imported
a bunch of things to the Stage; or you
| | 02:01 |
can have it match your printer settings.
| | 02:03 |
I am just going to leave it at Default for now.
| | 02:06 |
You can also set the
Background color of your document here.
| | 02:08 |
I will just leave it at white.
| | 02:11 |
Here is where we can change the frame rate,
and you can see it's currently set to 24.
| | 02:16 |
This affects how fast or slow
your Flash movie is going to play.
| | 02:20 |
We'll go into a more detailed discussion
of this in the next few movies, but for
| | 02:23 |
now, know that setting this to
something between 12 and 30 is generally
| | 02:28 |
considered acceptable,
and the default of 24 is just fine.
| | 02:31 |
You can also choose to turn on Auto-
Save and specify how many minutes should go
| | 02:36 |
by before Flash
auto-saves your document for you.
| | 02:39 |
That seems like a good idea, so
I'll check this and type in 1 minute.
| | 02:43 |
Now, if the settings you have put here
are what you want all new Flash documents
| | 02:49 |
to use, you could click Make Default.
| | 02:51 |
I'm not going to do that though.
| | 02:53 |
So I'm about to click OK
and look for two things:
| | 02:57 |
first is that the size of the Stage
adjusts to the value of 640x480, and the
| | 03:02 |
second thing is that the rectangle
should scale up too, since we checked
| | 03:06 |
Scale content with Stage.
| | 03:10 |
And indeed, the Stage gets
bigger and the rectangle has too.
| | 03:13 |
If I click on it with the Arrow tool,
you will see that the width has increased
| | 03:17 |
from 125 pixels before to 150 pixels.
| | 03:21 |
So I will click on the pasteboard to
deselect the rectangle, and you'll notice
| | 03:25 |
that a few of the settings we just saw
are available in the Property inspector
| | 03:28 |
as well, specifically Frames Per Second,
the Stage dimensions and the Background color.
| | 03:34 |
It makes no difference if you
change these here or in the Edit Document
| | 03:37 |
Properties dialog box that we just saw.
| | 03:40 |
So notice that there's also a little
asterisk next to the name of my FLA file.
| | 03:46 |
This indicates that changes have been made
to the FLA since the last time it was saved.
| | 03:50 |
I could hit Save right now, but if we
wait for one minute, as we specified in the
| | 03:55 |
Auto-Save area, Flash will
save the file on its own.
| | 03:58 |
And there it is. The asterisk is
gone, indicating that Flash auto-saved
| | 04:02 |
the document for me.
| | 04:03 |
Now, there is another setting you might
find useful regarding saving your files,
| | 04:07 |
and that's Auto-Recovery.
| | 04:09 |
It's easier to see Auto-Recovery
in action if we disable Auto-Save,
| | 04:13 |
so I am going to open up my
Document Properties box again to deselect
| | 04:17 |
Auto-Save, and then hit OK.
| | 04:21 |
Now, I'm going to go to the
Edit menu and then Preferences.
| | 04:25 |
If you're on a Mac, you'd go to
the Flash menu, and then Preferences.
| | 04:29 |
So what we're about to do here
isn't set on a document level;
| | 04:33 |
it's a preference that we'll apply
to Flash itself, no matter what FLA
| | 04:36 |
document you're working on.
| | 04:38 |
So here in the General category,
I'm going to make sure that Auto-Recovery here
| | 04:42 |
at the bottom is checked and type in 1 minute.
| | 04:45 |
I will do that so it doesn't take
long for us to see, but you could type in
| | 04:49 |
whatever you wanted here. So, I'll click OK.
| | 04:53 |
I am going to move my rectangle to be
way over on the right side of the Stage
| | 04:58 |
and a little bit offscreen, and you'll
notice that the file is still unsaved
| | 05:03 |
because we now have a
little asterisk next to test.
| | 05:07 |
So that asterisk isn't going
to automatically disappear.
| | 05:09 |
It isn't going to auto-save
our file like Auto-Save does.
| | 05:12 |
What this does is create a copy of
our file that we can access in case
| | 05:16 |
Flash crashes unexpectedly or your cat steps
on the switch to your power strip or whatever.
| | 05:21 |
You can see this copy of the file by
opening your file explorer to the same
| | 05:25 |
directory as your FLA.
| | 05:27 |
I've got mine on the desktop. And you'll
see that the file has Recover as the prefix.
| | 05:32 |
So I haven't saved the file.
| | 05:34 |
Remember, the last time we saved the rectangle,
it was over on the left side of the Stage.
| | 05:40 |
Now I am going to force Flash to
quit like it's crashing by hitting
| | 05:43 |
Ctrl+Alt+Delete on my keyboard
and then telling it to End Task.
| | 05:54 |
On a Mac, you'd do this by opening the
Apple menu and choosing Force Quit.
| | 05:59 |
So that's my simulated crash, and when I
go to the Recover file and open it, you
| | 06:03 |
will see that Flash asks me if I
want to open the recovered file.
| | 06:09 |
And yes, I'd like to open the recovered file.
| | 06:13 |
And you'll notice that the rectangle
is on the right side, even though I never
| | 06:16 |
saved the file this way.
| | 06:20 |
If I open the original file,
you'll see the rectangle still back over on the
| | 06:23 |
left, which is where it was last
placed the last time it was saved.
| | 06:27 |
So I am going to close out of the Recover file.
| | 06:31 |
The Recover file will exist on your
machine until you save your original file
| | 06:35 |
properly, not as a force quit or a crash.
| | 06:38 |
So I am just going to move my rectangle
one more time and save my document and
| | 06:44 |
then back on my Desktop, you'll
see that the Recovery file is gone.
| | 06:48 |
So these are the basics that you need
to know about setting up the properties
| | 06:52 |
for your Flash movie.
| | 06:53 |
Remember that you can change items like
the Stage dimension, background color or
| | 06:58 |
Auto-Save any time by clicking on the
Stage or the pasteboard and opening the
| | 07:02 |
Document Properties dialog box.
| | 07:04 |
Auto-Recovery is a feature you access
through the Preferences panel for Flash
| | 07:09 |
that affects Flash as the
software, not on the document level.
| | 07:14 |
Between Auto-Recovery and Auto-Save,
you should be pretty well covered for
| | 07:18 |
making sure your hard work is saved,
even in the event of a software or
| | 07:21 |
system crash.
| | 07:23 |
| | Collapse this transcript |
| Organizing layers| 00:01 |
One good way to organize all your visual
assets on your Stage is by using layers.
| | 00:05 |
Layers allow you to control the
stacking order of your visual content.
| | 00:09 |
If you've used layers before in
programs like Adobe Photoshop or Illustrator,
| | 00:13 |
the concept should transfer easily for you.
| | 00:16 |
In Flash, layers are
controlled from the Timeline.
| | 00:18 |
I've opened a file called layers.fla
from the Start folder in the exercise files
| | 00:23 |
for this chapter, and I've
saved a copy into the End folder.
| | 00:27 |
Look at the bottom-left of your screen
next to the Timeline, and you'll see that
| | 00:30 |
we currently have one layer in our Flash movie.
| | 00:33 |
It contains the background
jungle image and the three animals.
| | 00:36 |
You can see that the monkey's arm
looks like it's more in the foreground than
| | 00:40 |
the elephant's trunk.
| | 00:41 |
So let's say I want to swap the monkey
and the elephant so that the monkey's arm
| | 00:45 |
appears behind the elephant.
| | 00:48 |
With the Arrow tool, I can click once
on the monkey and then from the Modify
| | 00:52 |
menu, choose Arrange and then Send Backwards.
| | 00:58 |
Now the monkey looks like he is standing
behind or further away than the elephant.
| | 01:03 |
You can access those same
Arrange commands by right-clicking.
| | 01:07 |
So I'll right-click the monkey,
choose Arrange, and then Send to Back.
| | 01:12 |
He totally disappears because he went
to the very back of the stacking order,
| | 01:16 |
behind the background image.
| | 01:17 |
So I'm going to undo that change
by pressing Ctrl+Z on my keyboard;
| | 01:21 |
that's Command+Z on a Mac.
| | 01:22 |
So I'm going to right-click the
monkey one more time and under Arrange,
| | 01:27 |
choose Bring Forward.
| | 01:30 |
So he looks like he is standing closer
to the viewer again, and I'm going to
| | 01:34 |
move him to overlap the
elephant just a little bit more.
| | 01:37 |
You probably also noticed the
command of Bring to Front, which brings an
| | 01:42 |
object all the way to the front of the stacking
order, but I'm not going to do that right now.
| | 01:47 |
So this works well, but a best practice
while working in Flash is to have each
| | 01:51 |
visual item on the Stage be on its own layer.
| | 01:54 |
That way you can work with one
individual asset at a time and not
| | 01:58 |
accidentally affect other items.
| | 02:00 |
As we progress further into Flash and
start working with animation, you have to
| | 02:05 |
have individual assets on their
own layers to set up an animation,
| | 02:08 |
so organizing your movie layers
is a good habit to get into early.
| | 02:12 |
You can have Flash separate out items on
one layer into separate layers for you.
| | 02:18 |
To try this, hit Ctrl+A or Command+A on your
keyboard to select all the items on our layer.
| | 02:24 |
You can see that all the animals and the
background images have a thin blue line
| | 02:28 |
around them to show that they're selected.
| | 02:31 |
Now, right-click somewhere on the
selected items and choose Distribute to Layers
| | 02:35 |
from the context menu.
| | 02:37 |
You could alternatively go to Modify menu,
then Timeline, then Distribute to Layers.
| | 02:44 |
We now have five layers.
| | 02:46 |
You can turn the visibility of layers on and
off as an easy way to see what's on each layer.
| | 02:50 |
So on the layer where it says giraffe,
I'm going to click on the little dot in
| | 02:54 |
the column under the icon of the eye.
| | 02:57 |
The giraffe disappears, so that's his layer.
| | 02:59 |
I'll click again to turn the layer on
and now I'll click on the dot next to the
| | 03:03 |
background layer and the monkey and
the elephant layers so that we can see
| | 03:07 |
what's on those layers.
| | 03:10 |
You can click on the eye icon itself to
affect the visibility of all the layers at once.
| | 03:15 |
So the original layer that the
background and the animals were on is now empty.
| | 03:20 |
You can tell the layer is empty in two ways.
| | 03:23 |
First, turning the visibility of the
layer on and off doesn't do anything, since
| | 03:27 |
there's nothing on the layer.
| | 03:28 |
Also, notice how the animal and
background layers have, in the first frame, the
| | 03:33 |
Timeline filled in with a
gray background and a black dot.
| | 03:37 |
Having that color indicates that
there's something on the layer.
| | 03:40 |
The layer 1 layer has a white
background with a dot that's not filled in.
| | 03:45 |
Not having the shading
indicates that the layer is empty.
| | 03:49 |
Since we're not using that layer
anymore, I'll click on it and then click the
| | 03:52 |
icon of the trashcan at the bottom.
| | 03:55 |
So another best practice is to
name your layer something intuitive.
| | 03:59 |
With only four items on the Stage,
this may not seem that important.
| | 04:03 |
But when you have Flash projects with
tens or even hundreds of layers, you'll
| | 04:07 |
appreciate layer names that make sense, as
opposed to layer 1, layer 2, layer 3, and so on.
| | 04:12 |
Flash did a pretty good job
of naming the layers for us,
| | 04:15 |
but to change a layer name, simply double-
click on the name and type in a new one.
| | 04:20 |
I'll rename the bottom layer to junglebg.
| | 04:24 |
So to avoid moving things around on the
Stage by accident when you've got them
| | 04:27 |
positioned just right, you can lock your layers.
| | 04:31 |
Just like the eye, you can click on
the lock to toggle all layers between
| | 04:35 |
locked and unlocked.
| | 04:36 |
I'm going to try selecting anywhere on
the Stage and you'll see that it's working.
| | 04:42 |
Everything is locked and I can't grab anything.
| | 04:44 |
I'm going to leave the background
layer locked, since it isn't going
| | 04:48 |
anywhere anytime soon, but I'm going to unlock
the animal layers so we can move them around.
| | 04:52 |
So I'll click on the little icon of
the lock on each one of those layers.
| | 04:57 |
The column underneath the little
rectangle to the right of the lock icon allows
| | 05:01 |
you to view some or all
of the layers as outlines.
| | 05:06 |
This can come in handy at times, for
instance, if you're trying to line up one
| | 05:10 |
item precisely behind another.
| | 05:13 |
You can easily change the stacking order
of your layers by dragging and dropping
| | 05:17 |
a layer up or down on the stack.
| | 05:18 |
I'm going to drag the junglebg layer
above the elephant and you'll notice the
| | 05:23 |
dark black line that appears to
indicate where the layer is going to be placed
| | 05:27 |
when I release the mouse.
| | 05:29 |
When I release, you can see that the
elephant disappears because it's now behind
| | 05:33 |
the background image.
| | 05:34 |
I'm going to undo that change
so we can see the elephant again.
| | 05:38 |
So if you need more layers, simply
click on the icon that looks like a
| | 05:42 |
little piece of paper.
| | 05:44 |
New layers are added above whatever
layer you currently have selected, so I'm
| | 05:48 |
going to select my giraffe layer
and add a single new layer above it.
| | 05:52 |
I'm going to rename it welcome.
| | 05:56 |
If you open the library, you'll see that
there's an object called welcome that's
| | 05:59 |
already been prepared for us.
| | 06:02 |
I want to put that on the new welcome layer.
| | 06:05 |
So notice that if I try to drag and drop
it onto the Timeline, Flash doesn't let me.
| | 06:10 |
What you have to do is click the
layer in the layer stack so Flash knows
| | 06:14 |
which one you want to use and then
drag and drop the item out from the
| | 06:17 |
library onto the Stage.
| | 06:21 |
Notice now that on the welcome layer,
the dot in the first frame is now filled
| | 06:26 |
in and the background is gray, to
indicate that there's something on the layer.
| | 06:30 |
It can be really easy to
accidentally put something on the wrong layer.
| | 06:34 |
For instance, I'll undo that last
change so the Welcome message is gone, and now
| | 06:39 |
I'm going to click my elephant
like I'm going to move him around or do
| | 06:43 |
something else to him.
| | 06:44 |
Since I clicked him, notice the
background behind the word elephant in the
| | 06:48 |
layer stack is now highlighted--
| | 06:50 |
it's blue--to indicate that
this is the selected layer.
| | 06:54 |
If I drag and drop the welcome message
now, it ends up on the elephant layer and
| | 06:58 |
I can tell when I turn the
visibility of the layer on and off.
| | 07:04 |
So the thing to do is to click the
layer name you want a new visual object to
| | 07:08 |
appear on before placing it, so
it ends up on the correct layer.
| | 07:13 |
So now, since the welcome message is on
the wrong layer, I want to move it from
| | 07:17 |
elephant back up to the welcome layer,
but the positioning on the screen is
| | 07:21 |
perfect and I want to preserve that.
| | 07:24 |
So one way to do this is to select the
welcome message and then hit Ctrl+X or
| | 07:28 |
Command+X on your keyboard to cut it.
| | 07:31 |
Then I'll click once on the welcome
layer to select it and then use the keyboard
| | 07:35 |
shortcut Ctrl+Shift+V to paste in place.
| | 07:39 |
That's Command+Shift+V on the Mac.
| | 07:42 |
You could also go to the Edit
menu and choose Paste in Place.
| | 07:46 |
No matter how you get there,
the "Welcome to the Jungle!"
| | 07:49 |
message is now on its own layer.
| | 07:51 |
You can also further organize your
layers by creating and using folders.
| | 07:55 |
Click on the folder icon at the
bottom of your layers to create a new one.
| | 08:01 |
You can drag and drop folders just
like you can layers, so I'm going to drag
| | 08:04 |
the folder just above the giraffe layer.
| | 08:06 |
I'll put all three of the
animal layers into the folder.
| | 08:10 |
To do this, I'm going to click and drag
each layer up and slightly to the right.
| | 08:14 |
You can see the black line that appears
to indicate where the layer is going to
| | 08:18 |
go, and when I release, you can see the
layer is now indented under the folder to
| | 08:23 |
indicate that it's inside the folder.
| | 08:24 |
You can also rename folders by double-
clicking on the name and typing a new name.
| | 08:30 |
So I'll call this folder animals.
| | 08:36 |
Clicking on the little arrow to the left
of the folder name allows you to expand
| | 08:40 |
and contract the contents of the folder.
| | 08:42 |
So arranging the stacking order of
items within a layer and layers and layer
| | 08:47 |
folders are all quick and easy
ways to organize your Flash movies.
| | 08:51 |
Getting into the habit early of having
each visual asset on the Stage be in its
| | 08:55 |
own layer and then renaming each of
your layer something intuitive will ensure
| | 09:00 |
that even your most complex Flash
pieces remain easy to navigate, both for you
| | 09:04 |
and for colleagues you may pass your work on to.
| | 09:07 |
| | Collapse this transcript |
| Utilizing guide layers| 00:00 |
There is a special type of layer called
a guide layer that can be really useful
| | 00:04 |
during the development process.
| | 00:06 |
To demonstrate this, let's work with a
fictional situation where we have our
| | 00:10 |
three animals that we've imported
into Flash, each on their own layers.
| | 00:14 |
If you look in the library, the
jungleBackground image is there as well, but
| | 00:18 |
it's not on the Stage yet.
| | 00:19 |
We will bring it in later.
| | 00:21 |
So the problem is that I'm not sure where
exactly my clients want the animals to go.
| | 00:27 |
Fortunately, the client has
also provided me with some mockups.
| | 00:30 |
So from those, I've got a bitmap image that I
can use as a guide to help me line them up.
| | 00:35 |
I am going to open the file called
guideImage.jpg in the Start folder of this
| | 00:40 |
chapter, just to take a quick look at the guide.
| | 00:42 |
So to use this in Flash, I am going to
create a new layer and call it guide.
| | 00:51 |
Before I import the guideImage,
I am going to make sure that all of the layers
| | 00:54 |
are locked except the guide layer, and
now I will drag the guide layer down to
| | 00:59 |
the bottom of the layer stack.
| | 01:01 |
With my guide layer selected, now I'm
going to import my guide image by going to
| | 01:06 |
File > Import, and then Import to Stage.
| | 01:11 |
So I'll navigate to the
guideImage.jpg file and click Open and the image is
| | 01:18 |
placed on the Stage in the guide layer.
| | 01:20 |
I am going to click once on the
image with my Arrow tool and open up
| | 01:24 |
the Property inspector.
| | 01:25 |
Notice for some reason the X
isn't at zero. It's slightly off.
| | 01:31 |
So I will just change that to zero so
we are sure that our guide image is lined
| | 01:34 |
up precisely with the Stage
dimensions, and now I'll lock the layer.
| | 01:38 |
Now on the guide layer I am going to
double-click on the icon that looks like a
| | 01:42 |
piece of paper to open the Layer Properties box.
| | 01:46 |
Using the radio buttons, I will
change this layer from a normal layer to a
| | 01:50 |
guide layer and click OK.
| | 01:52 |
Notice how the icon is changed from
a piece of paper to what looks like a
| | 01:55 |
T-square, to indicate that this is a guide layer.
| | 01:59 |
So I'll unlock the animal layers and
now move each of them into place using my
| | 02:03 |
mouse and the arrow keys on the keyboard.
| | 02:05 |
So our animals are now in place.
| | 02:10 |
So far, the guide layer may seem as
useful as a solar-powered flashlight, since
| | 02:14 |
you could have done this lining-up
process with just a regular layer.
| | 02:18 |
The difference is that when I test my
movie by hitting Ctrl+Enter the guide
| | 02:22 |
image doesn't appear in the published SWF.
| | 02:25 |
So in a situation like this where
you've been given a layout that you must
| | 02:28 |
re-create in Flash, using a guide
layer to act as a template means you can
| | 02:33 |
keep your guide images in place but
they won't be in the way as your SWF gets
| | 02:37 |
sent around to your clients or
colleagues for approval. Or maybe you want to
| | 02:42 |
write some instructions for another person who
is also going to be working on the Flash piece.
| | 02:47 |
You could type instructions right on the
Stage in a guide layer so the developer
| | 02:51 |
can see it but not have it
affect the published SWF.
| | 02:54 |
Another advantage is that the file size
associated with the content in the guide
| | 02:58 |
layer is not included in the resulting SWF.
| | 03:03 |
Click on your pasteboard once and make
sure your Properties panel is open.
| | 03:07 |
Here in the SWF History you can see
that the size of the SWF we just created is
| | 03:11 |
14.1 K. Now, I'll double-click on the
icon next to the guide layer name again and
| | 03:18 |
change the layer back into a normal layer.
| | 03:20 |
Now I am going to test the movie again.
| | 03:22 |
I am going to close the SWF right away
and open the Properties panel again and
| | 03:28 |
click the pasteboard.
| | 03:29 |
And notice that our file size has
jumped up to 106.5 K because the size of the
| | 03:35 |
guide image is now included in the SWF.
| | 03:38 |
The little yellow exclamation point
next to the file size is a little warning
| | 03:42 |
that the SWF size increased over
50%, which is okay in this case.
| | 03:46 |
So I am going to change the
guide layer back into a guide layer.
| | 03:53 |
To complete our piece, I am going to
unlock the background layer, click on it
| | 03:57 |
once to select, and then drag and drop
the jungleBackground image to the Stage.
| | 04:01 |
I will open the Property inspector and
make sure that the X position is zero as
| | 04:07 |
well as the Y. Now when I turn the
visibility of the background layer on and
| | 04:12 |
off you see no change,
| | 04:14 |
so we know that our animals and our
background image are lined up perfectly
| | 04:18 |
with the guide image.
| | 04:20 |
So can use guide layers to your
advantage, but I would recommend that once
| | 04:23 |
you're done with them, delete guide layers even
though they're not included in the final SWF.
| | 04:28 |
That way your FLA files include only
layers with content that's actually used
| | 04:32 |
on the Stage.
| | 04:33 |
| | Collapse this transcript |
| Understand the Timeline and frame rate| 00:00 |
The Timeline controls when and for how long
visual objects appear in your Flash movie.
| | 00:05 |
To explore this, I've opened the file
called elephant.Animation.fla from the
| | 00:10 |
exercise files for this chapter.
| | 00:12 |
The Timeline appears across the bottom
of the screen and is measured in frames.
| | 00:17 |
You can see the frame numbering
across the top of the Timeline.
| | 00:20 |
How fast those frames are played is
determined by the frames per second, or FPS.
| | 00:26 |
To figure out what the FPS is, open your
Property inspector, if it isn't already,
| | 00:31 |
and click on the pasteboard so we can
see the document settings. We are at 24.
| | 00:35 |
You'll notice that this movie has
content and animation over the span of 36
| | 00:40 |
frames, so at 24 frames per
second, it's 1 1/2 seconds long.
| | 00:45 |
Notice also the vertical red line that
appears over the Timeline anytime you
| | 00:50 |
have a movie longer than one frame.
| | 00:53 |
This is called the playhead and you can
drag it across the Timeline to preview
| | 00:57 |
what your Flash movie looks like so far.
| | 00:59 |
Dragging the playhead is better
known as scrubbing the Timeline.
| | 01:04 |
When you scrub the Timeline or click on
any frame notice at the bottom of the
| | 01:08 |
Timeline this small number that
tells you what frame the playhead is on.
| | 01:13 |
You can also see the frames per second
and the amount of time elapsed at the
| | 01:17 |
point the playhead is at.
| | 01:19 |
My playhead is at frame 17, so 0.7
seconds have gone by at this point in the movie.
| | 01:25 |
So I'm going to test the movie by
Ctrl+Enter on my keyboard--that's Command+Enter
| | 01:30 |
on the Mac--and we see the resulting SWF.
| | 01:33 |
Indeed, it looks like it takes the
elephant about 11/2 seconds to trumpet and
| | 01:36 |
then the movie starts over.
| | 01:38 |
When the playhead gets to frame 36,
it sees there's no more frames and
| | 01:42 |
starts over on frame 1.
| | 01:45 |
You can get a visual on what the
playhead is doing while viewing this SWF by
| | 01:49 |
going to the View menu
and then Bandwidth Profiler.
| | 01:55 |
The little gray marker at the top of
the screen indicates the position of
| | 01:59 |
the playhead, and you can see on the lower-
left the frames being counted out as well.
| | 02:04 |
I'm going to close the Profiler by
going to View and then clicking on
| | 02:08 |
Bandwidth Profiler again.
| | 02:09 |
I'm going to close my SWF and back in
Flash, if we change our frames per second
| | 02:20 |
from 24 to 12 and then test our movie
again, you'll notice that the elephant is
| | 02:26 |
moving twice as slowly,
| | 02:27 |
since 36 frames at 12
frames per second is 3 seconds.
| | 02:38 |
So, I'll close the SWF window and
change the Frames Per Second back to 24 in
| | 02:43 |
the Property inspector.
| | 02:45 |
Common frame rates in Flash usually
range between around 12 and 30. You can pick
| | 02:50 |
which frame rate works best for you,
but I recommend picking a frame rate at
| | 02:54 |
the start of your project
and then sticking to it.
| | 02:57 |
If you're coordinating with others about
a number of Flash assets that will work
| | 03:01 |
together, especially if it involves
video, agreeing on the frame rate ahead of
| | 03:05 |
time is a really good idea.
| | 03:08 |
You can imagine what would happen if
you develop assets at 24 frames per second
| | 03:12 |
and someone else at 12, and
then you try to combine them.
| | 03:15 |
Half the animations would be either
way too fast or way too slow and it
| | 03:19 |
would just be a big mess.
| | 03:21 |
So if you'd like to see more or less
of the Timeline at once, click on this
| | 03:25 |
little dropdown at the
upper-right of the Timeline window.
| | 03:30 |
Choosing Tiny shrinks the views of
the frames so you can see more at once.
| | 03:35 |
Conversely, choosing Medium makes it so you
can see less frames, but each one is bigger.
| | 03:41 |
You can experiment with what works best for you.
| | 03:45 |
Choosing Short in this context menu
simply shrinks the vertical space each layer
| | 03:50 |
takes up in the Timeline.
| | 03:50 |
I'm going to change mine back to Normal.
| | 03:55 |
So using the Timeline and frames, you
can control what items appear on your
| | 03:59 |
screen and when, and for how long.
| | 04:02 |
| | Collapse this transcript |
| Previewing a project| 00:00 |
There are multiple ways to
preview your work in Flash.
| | 00:03 |
Of course we've already worked with
the keyboard shortcut of Ctrl+Enter
| | 00:07 |
for testing your movie.
| | 00:08 |
That's Command+Enter on the Mac.
| | 00:10 |
This publishes a SWF file that you can
preview and then close quickly so you
| | 00:14 |
can go on to make more changes to your movie.
| | 00:17 |
Note that this is the same as going to the
File menu, then Publish Preview, and then Flash.
| | 00:27 |
I think the name Publish
Preview is a little misleading.
| | 00:30 |
You are previewing your work in a sense,
but you end up looking at a published SWF file.
| | 00:35 |
Ctrl+Enter and Publish Preview Flash
are a little different than the choice of
| | 00:42 |
Publish that you may have
notice under the File menu.
| | 00:45 |
If I choose Publish,
it doesn't look like anything happened.
| | 00:48 |
Flash does publish the SWF file, but it
doesn't open it for you to look at.
| | 00:53 |
If you are using the default settings
of Flash, it also creates an HTML that
| | 00:58 |
embeds the SWF file within it.
| | 00:59 |
I will hop over to my file explorer and
you'll see the SWF and the HTML file there.
| | 01:06 |
What files Flash publishes for you are
controlled by the settings you can find
| | 01:10 |
if you go to File and then Publish Settings.
| | 01:13 |
In the Publish Settings dialog box, you
can see that SWF and HTML Wrapper are checked.
| | 01:18 |
We'll talk more about the other
file types later in the course.
| | 01:21 |
From here, you can click
Publish, which publishes the files,
| | 01:25 |
but again Flash doesn't open up for you;
it just creates them, and then you can
| | 01:29 |
go find them in your File Explorer.
| | 01:31 |
You can click OK, which saves your choices but
doesn't publish, or just cancel. I'll hit Cancel.
| | 01:38 |
So, after all that, the fastest way to
test your movies as you're developing and
| | 01:42 |
see how they are going to look in the
Flash Player is what we've been doing all
| | 01:45 |
along: Ctrl+Enter or Command+Enter.
| | 01:48 |
In another movie, we talked about
scrubbing the Timeline with your playhead to
| | 01:51 |
see how your content looks, like this.
| | 01:54 |
Note that you can also press Enter on
your keyboard and the playhead will start
| | 01:58 |
playing from whatever position
it's at and then stop at the end.
| | 02:02 |
Pressing Enter again starts it over at frame 1.
| | 02:05 |
You can stop it before it gets to
the end by pressing Enter again.
| | 02:09 |
There is also these Timeline
controls underneath the Timeline.
| | 02:14 |
You can toggle between play and pause.
| | 02:16 |
You can also step back one frame
or you can go to the first frame.
| | 02:22 |
You can also step forward one
frame or go to the last frame.
| | 02:27 |
You can also choose this icon that
looks like a curvy arrow to loop your
| | 02:31 |
content. Notice these control handles
appear above the Timeline, and I can move
| | 02:36 |
them around to define what
particular keyframes I want to focus on.
| | 02:43 |
Now, when I press Enter on my keyboard,
the playhead loops repeatedly through the
| | 02:47 |
frames I've identified.
| | 02:51 |
We'll talk more about the other icons
below the Timeline in a different movie,
| | 02:55 |
so for now, I'll just turn Loop off.
| | 02:57 |
So you have multiple ways to view
your content in Flash as you're working.
| | 03:02 |
The method you will probably use most
is Control+Enter or Command+Enter.
| | 03:05 |
| | Collapse this transcript |
| Defining frames and keyframes| 00:00 |
Being able to create and manipulate
frames and keyframes in the Timeline is key
| | 00:05 |
to controlling the flow
of your Flash animations.
| | 00:08 |
If you open the file called
framesAndKeyframesPreview.swf from the start file in
| | 00:13 |
the exercise files for this chapter, you'll
see what we're building towards in this tutorial.
| | 00:18 |
So the elephant shows up first,
then the monkey, and then the giraffe.
| | 00:22 |
The whole thing lasts four
seconds and then starts over.
| | 00:25 |
The staggered pace of appearance is
through the use of frames and keyframes,
| | 00:29 |
so let's take a look.
| | 00:30 |
I'll close the preview SWF
and then open up the file called
| | 00:34 |
framesAndKeyframes.fla in the start
folder in the exercise files, and then I'll
| | 00:39 |
save a copy of it right
away into the end folder.
| | 00:44 |
You can see that we've got four layers
here: the background layer, which already
| | 00:48 |
has our familiar jungle background,
and then an elephant, monkey, and giraffe
| | 00:52 |
layers, which don't have anything on them yet.
| | 00:55 |
In the Property inspector, you see that
we're at a frame rate of 24 frames per second,
| | 01:00 |
and in the library we have
our animals ready to use.
| | 01:05 |
Our movie currently only has one frame,
| | 01:07 |
so to have a movie that's four seconds
long, we need to extend our Timeline out
| | 01:12 |
to 120 frames, since 5 seconds
multiplied by 24 frames per second equals 120.
| | 01:19 |
So I'll click on frame 1
in the background layer.
| | 01:23 |
You can add frames one at a time by
pressing F5, or you can right-click and
| | 01:28 |
choose Insert Frame.
| | 01:32 |
Adding frames one at a time is pretty
tedious, so I'm going to grab the slider
| | 01:36 |
bar that appears under the
Timeline and slide over to frame 120.
| | 01:43 |
I'll click once on frame 120 to
select it, and you can tell it's selected
| | 01:46 |
because it turns blue.
| | 01:48 |
Now I'll right-click on the
frame and choose Insert Frame.
| | 01:51 |
Alternatively, you could have selected
frame 120 and then pressed the hot key of
| | 01:55 |
F5. So you can see that our
background layer now has 120 frames.
| | 02:00 |
So notice the different kinds
of frames that we have here.
| | 02:03 |
I'm going to scrub my
Timeline all the way back to frame 1.
| | 02:06 |
Notice how frame 1 has a gray
background with a black dot in it, but all the
| | 02:10 |
other frames are just gray.
| | 02:13 |
Frame 1 is a keyframe.
| | 02:15 |
One way that may be helpful to think of
keyframes is to think about stop frame
| | 02:18 |
animation, like used in claymation.
| | 02:21 |
If you've watched shows like Shaun
the Sheep or Wallace and Gromit, you can
| | 02:24 |
imagine how the clay characters are
put into position, an image is snapped,
| | 02:28 |
and then the characters repositioned,
and another image taken, and so on and
| | 02:32 |
so on in succession.
| | 02:34 |
Keyframes are the equivalent of this.
| | 02:35 |
Each keyframe shows the specific
starting position, size, and other attributes of
| | 02:40 |
artwork on the screen in that layer.
| | 02:43 |
When you need new
positioning, you need a new keyframe.
| | 02:46 |
Keyframes in Flash are indicated by
that circle, and you'll notice that all our
| | 02:49 |
layers have a keyframe on frame 1.
| | 02:52 |
However, background is the only
layer that actually has anything on the
| | 02:55 |
keyframe, and you can tell because the
circle is filled in and the background is gray.
| | 03:00 |
A non-filled-in circle and a white
background indicates a blank keyframe.
| | 03:04 |
A blank keyframe is just a
keyframe with no artwork in it.
| | 03:07 |
So notice how all the frames after the
keyframe on the background layer are gray.
| | 03:12 |
Gray indicates that these frames aren't empty;
| | 03:15 |
there's something on the Stage for these frames.
| | 03:17 |
Since they don't have circles in them,
they're just regular frames, not keyframes.
| | 03:20 |
And a frame just copies the information
from the most previous keyframe. And you
| | 03:25 |
can see that this is what these
frames are doing if you scrub the playhead.
| | 03:28 |
The Stage looks the same no matter
what frame we're on, since each frame just
| | 03:33 |
repeats what was in the keyframe on
frame 1, the background jungle image.
| | 03:37 |
Notice on frame 120 that there's a
gray background with a white rectangle.
| | 03:43 |
The white rectangle doesn't really do anything;
| | 03:46 |
it's just an indicator that that frame
is the last regular frame in the sequence.
| | 03:51 |
So back on frame 1, I'm going
to lock the background layer.
| | 03:54 |
Now you can see that all the other
layers have a blank keyframe on frame 1.
| | 03:58 |
They have the white background with just
the outline of the circle within them.
| | 04:01 |
It's really a keyframe.
| | 04:02 |
There's just no artwork in it.
| | 04:05 |
So now let's extend the next
three layers out to frame 120 as well.
| | 04:09 |
I'll scroll over to frame 120 and
click on frame 120 on the elephant layer.
| | 04:14 |
Remember that you can look at the
current frame underneath the Timeline.
| | 04:19 |
It says 120, so I know I've
got the correct frame selected.
| | 04:22 |
So I'm going to right-click and choose
Insert Frame, but remember, you could
| | 04:26 |
also use the keyboard shortcut of F5.
| | 04:29 |
Instead of extending the other layers
out individually, you can multiple-select
| | 04:32 |
by holding down the Shift key on your
keyboard and selecting frame 120 for the
| | 04:37 |
monkey and giraffe layers.
| | 04:38 |
So frame 120 on both layers are blue,
indicating that they're selected, so
| | 04:43 |
I'll insert my frames.
| | 04:44 |
So notice that all three of
these layers have frames with a white
| | 04:47 |
background instead of gray.
| | 04:49 |
Remember that frames simply repeat whatever
is happening on the most previous keyframe.
| | 04:55 |
Since the keyframes on frame 1 are
blank, these are all just blank frames.
| | 04:59 |
So our little project here is meant to have
a succession of images appear one at a time.
| | 05:03 |
So let's add the elephant to the
first animal in the sequence.
| | 05:07 |
We want him to appear one
second after the movie starts.
| | 05:10 |
Since we're at 24 frames per second,
I'll click once on frame 24 to select it,
| | 05:15 |
being very careful that I select
frame 24 in the elephant layer.
| | 05:18 |
Since I want to define the artwork for
this frame, I need to add in a keyframe here.
| | 05:24 |
You can do this by going to the
Insert menu, then Timeline, then Keyframe.
| | 05:30 |
Notice it doesn't show a keyboard
shortcut for this, but there is one; it's F6
| | 05:34 |
and you'll probably be using it a lot,
so you might want to memorize it.
| | 05:38 |
You could also right-click on the
frame and choose Insert Keyframe that way.
| | 05:41 |
Now I'll open up the library and
drag and drop the elephant to the Stage.
| | 05:46 |
You'll notice I can't drop
it onto the Timeline itself;
| | 05:49 |
you can only drop him onto the Stage.
| | 05:52 |
So frames 1 through 23 stay empty, the
keyframe now has a gray background and a
| | 05:56 |
black dot, and all the subsequent
frames turn gray because they're copying
| | 06:00 |
what's in the keyframe.
| | 06:01 |
Let's go ahead and lock our elephant
layer--we're done with that--and do this
| | 06:05 |
again for the monkey layer
at two seconds into the movie.
| | 06:08 |
So I'll select frame 48 on the
monkey layer and insert a keyframe.
| | 06:13 |
From the library, I'll drag and
drop the monkey onto the Stage.
| | 06:16 |
He is obviously huge, so I'll select
them with my Arrow tool and then select the
| | 06:21 |
Free Transform tool out of the toolbar.
| | 06:24 |
We'll cover the Free Transform tool in
detail later, but for now, I'm going to
| | 06:28 |
hold down my Shift key and click and drag the
corner of the image and scale the monkey down.
| | 06:33 |
That looks better, and so now with the
Arrow tool, I'll just move him into place.
| | 06:37 |
I'm going to scrub the
Timeline now to see the effect.
| | 06:41 |
Note that all the frames updated
automatically with the sized-down monkey.
| | 06:45 |
They are just frames that copy what the
keyframe on frame 48 does, so the monkey is
| | 06:49 |
the correct size all the
way across the Timeline.
| | 06:52 |
When I test the movie by pressing
Ctrl+Enter, our succession of images
| | 06:56 |
is shaping up nicely.
| | 06:57 |
The elephant appears and then the monkey.
| | 06:59 |
So I'm going to lock the monkey
layer and add in our third image at three
| | 07:06 |
seconds into the movie, which is frame 72.
| | 07:09 |
So I'll right-click and choose
Insert Keyframe and now drag and drop the
| | 07:13 |
giraffe to the Stage.
| | 07:14 |
Now you might be wondering if you
could have chosen Insert Blank Keyframe
| | 07:19 |
instead--that also appears in the dropdown menu.
| | 07:22 |
The answer in this instance is yes.
| | 07:25 |
The difference between inserting a
keyframe and inserting a blank keyframe is this.
| | 07:30 |
I'm going to demonstrate using
frame 90 on the giraffe layer.
| | 07:34 |
When you choose to insert a new keyframe,
you're getting a new keyframe with a
| | 07:38 |
copy of the information from
the most previous keyframe.
| | 07:42 |
Notice when I scrub over the new
keyframe, it looks just like the previous
| | 07:46 |
frames and keyframe.
| | 07:48 |
But since it's a keyframe, I can now drag
my giraffe on frame 90 to a new location.
| | 07:55 |
So now when we look at frames 72 to 89,
we see the giraffe in one position, but
| | 08:00 |
in the new position when we hit frame 90.
| | 08:03 |
If you insert a blank keyframe, like
I'll do here on frame 95, you get just
| | 08:08 |
that, a blank keyframe with nothing in it.
| | 08:11 |
Notice how the giraffe is gone
when I scrub over the blank keyframe.
| | 08:15 |
Also notice that the last frame
with anything in it, frame 94, has the
| | 08:19 |
white rectangle in it.
| | 08:21 |
All that's doing is indicating it's
the last regular keyframe in the sequence
| | 08:25 |
before the playhead hits the blank keyframe.
| | 08:28 |
Since these keyframes were just for
demonstration, let's get rid of them by
| | 08:31 |
selecting, right-clicking,
and choosing Clear Keyframe.
| | 08:35 |
You could also go to Modify >
Timeline and then Clear Keyframe.
| | 08:39 |
Now the frames are restored back to
the giraffe starting at frame 72 and
| | 08:45 |
going on until the end.
| | 08:46 |
So the question was, when you're
inserting a new keyframe, does it matter if you
| | 08:51 |
choose Insert Keyframe or Insert Blank Keyframe?
| | 08:55 |
It depends on what you're trying to do.
| | 08:56 |
Remember that inserting a keyframe
gives you a new keyframe with a copy of the
| | 09:01 |
information from the most previous keyframe.
| | 09:04 |
If you're starting with a blank frame
in the first place, like you are way over
| | 09:08 |
here at the beginning of the movie,
it doesn't really matter if you choose to
| | 09:12 |
insert a keyframe or a blank keyframe;
| | 09:14 |
you end up with the same
thing, a blank keyframe, like so.
| | 09:19 |
I'll undo that change.
| | 09:20 |
So let's lock the giraffe
layer and test our movie.
| | 09:24 |
It takes a total of four seconds
and the images appear in succession.
| | 09:29 |
So keyframes define how an
item should look on the Stage.
| | 09:33 |
There are blank keyframes, which are
frames with a white background and the
| | 09:36 |
outline of a circle in them.
| | 09:38 |
Keyframes that have content in them
are indicated in the Timeline by a frame
| | 09:42 |
with a gray background and a black dot.
| | 09:45 |
Frames just copy the contents
of the most previous keyframe.
| | 09:50 |
So blank frames appear after a blank
keyframe and regular frames appear after a
| | 09:55 |
keyframe, and contain the
same content as the keyframe.
| | 09:58 |
| | Collapse this transcript |
| Manipulating frames and keyframes| 00:00 |
Let's take a look at manipulating frames on
the Stage once you have got content on them.
| | 00:05 |
In a file called framesKeyframes.fla in
the exercise files for this chapter, we
| | 00:10 |
have pretty much where we
left off in the last movie.
| | 00:13 |
We have got a background layer with the
jungleBackground image, a monkey layer,
| | 00:17 |
an elephant layer, and a giraffe layer.
| | 00:19 |
The elephant first appears on frame 24,
so after one second has passed, the
| | 00:24 |
monkey at frame 48, and the giraffe at frame 72.
| | 00:31 |
In the library, we also have this Don't Feed
The Animals signs that we haven't used yet.
| | 00:37 |
I want to add that sign to the scene
and have it appear at frame 72 and stay
| | 00:42 |
onstage until frame 96,
where the other frames end.
| | 00:46 |
But in doing this, I am going to make
two mistakes on purpose, so we can see how
| | 00:50 |
to easily move keyframes
around and delete unwanted frames.
| | 00:54 |
So first, I am going to create a new layer
above all the other layers and call it dontFeed.
| | 00:58 |
Now I will select frame 100 of the
dontFeed layer and insert frames.
| | 01:05 |
Remember that you can do that by right-
clicking and choosing Insert Frame or by
| | 01:09 |
using the keyboard shortcut of F5.
| | 01:12 |
When I scrub the Timeline, near the
end of the frames you will see the Stage
| | 01:16 |
update appropriately depending
on what frame the playhead's on.
| | 01:19 |
The Stage is of course empty from
frames and 97 to 100, since there are
| | 01:23 |
only blank frames here.
| | 01:25 |
When I publish the movie,
you'll see the little blip at the end.
| | 01:29 |
We see four seconds' worth of animals,
four frames' worth of blank frames, and
| | 01:33 |
then back to frame one where the background
image and elephant start the movie over again.
| | 01:39 |
To get rid of those blank frames, I will
click on frame 97 in the dontFeed layer,
| | 01:44 |
then hold down the Shift key, and select
frame 100, so I have all of those blank
| | 01:49 |
extra frames selected.
| | 01:51 |
Now I will right-click and choose Remove Frames.
| | 01:56 |
So that's mistake one made and fixed.
| | 01:59 |
Now I'll select frame 1 of the
dontFeed layer and drag and drop a copy of the
| | 02:04 |
Don't Feed The Animals sign
from the library onto the Stage.
| | 02:07 |
Now I said I wanted it to first appear
on frame 72, so this obviously is not the
| | 02:13 |
right frame in the Timeline to leave it at.
| | 02:15 |
So to fix this, I will simply select the
keyframe on frame 1 and then drag and
| | 02:20 |
drop it to frame 72.
| | 02:23 |
Frame 1 automatically gets a blank
keyframe and then blank frames after that.
| | 02:28 |
You may run into times where you want
to copy and paste frames from one spot in
| | 02:33 |
your movie to another spot, or
maybe from a movie into another movie.
| | 02:37 |
Let's do this with our animals.
So I'll select frame 1 of the dontFeed layer,
| | 02:42 |
hold down the Shift key
so I can multiple select,
| | 02:46 |
and then click on the last
frame of the background layer.
| | 02:49 |
Now I am going to right-
click and choose Copy Frames.
| | 02:52 |
I am going to open up a new blank FLA document.
| | 03:01 |
And then on frame 1 of layer 1,
right-click and choose Paste Frames.
| | 03:06 |
And there, all of our animals
are pasted into the new document.
| | 03:09 |
I will save it as copied.fla in
the end folder for this chapter.
| | 03:14 |
So in the new movie, let's say I want to
change when they Don't Feed The Animals! sign appears.
| | 03:20 |
It's currently at the end of the movie and
appears for 24 frames, or one second long.
| | 03:26 |
I want it to appear at the beginning.
So I can simply click once on the starting
| | 03:30 |
keyframe, hold down the Shift key on
the keyboard to multiple-select, and then
| | 03:34 |
click once on the end frame.
| | 03:36 |
With my frame span selected, I can drag
it and drop it up and down the Timeline
| | 03:41 |
and even to different layers.
| | 03:42 |
I am going to drop it on frame 1,
but notice what happened here.
| | 03:50 |
Don't Feed The Animals appears on
frame 1 all right and the blue highlighted
| | 03:54 |
frames still show the number of
frames I originally selected,
| | 03:57 |
but the rest of the frames down to the end of
the Timeline to frame 96 are now all filled in.
| | 04:03 |
When those frames were at the end of the
Timeline the frames stopped because they
| | 04:07 |
hit the end of the Timeline at frame 96.
| | 04:10 |
Now that it's in the new position,
starting at frame 1, there is nothing to
| | 04:14 |
stop those frames filling
all the way down to the end.
| | 04:17 |
So to keep the amount of time that the
Don't Feed The Animals sign appears at
| | 04:21 |
one second, we need to
clear out frame 25 to the end.
| | 04:26 |
So I could select frame 25 of the
dontFeed layer, hold down the Shift key to
| | 04:31 |
multiple-select, and click on frame 96.
| | 04:37 |
Now, I will right-click and choose Clear Frames.
| | 04:45 |
Flash inserts a blank keyframe for me on
the first frame I want it to clear, frame 25,
| | 04:50 |
and now the extra frames are also blank.
| | 04:53 |
I am going to undo that change to show
the difference between Clear Frames and
| | 04:57 |
Remove Frames, which we
saw just a few minutes ago.
| | 05:00 |
So now, I'm going to reselect all my
frames from 25 to 96, right-click, and
| | 05:11 |
choose Remove Frames.
| | 05:14 |
You can see now that we don't have any
frames at all, blank or not, starting at frame 25.
| | 05:19 |
I am going to undo that change.
| | 05:22 |
I'm going to go back to just having
blank frames, so I will right-click on frame
| | 05:28 |
25 and choose Insert Blank Keyframe.
| | 05:33 |
Now I can select frame 1 with the
filled-in keyframe to frame 25 with the
| | 05:37 |
blank keyframe and move those 24
frames of content around as I wish without
| | 05:42 |
having any extra frames be added, since
we have a keyframe defining the start of
| | 05:46 |
the frame span and the end.
| | 05:50 |
Sometimes with Timelines that get
complex with lots of frames and keyframes that
| | 05:54 |
you're copying and pasting and
reversing and all sorts of things,
| | 05:57 |
it can be easy to have extra frames
where you don't want them or keyframes in
| | 06:01 |
places that you don't expect.
| | 06:03 |
Just remember that you can right-
click on unwanted frames and choose to
| | 06:06 |
clear frames to empty out the
content, or you can remove frames to just
| | 06:11 |
remove them completely.
| | 06:13 |
Similarly, if you have a keyframe you
don't want, you can get rid of that by
| | 06:17 |
right-clicking and choosing Clear Keyframe.
| | 06:20 |
Finally, if you want to change the
position of existing keyframes to affect how
| | 06:24 |
long content stays on the Stage,
you just click and drag to keyframe.
| | 06:28 |
For instance, I can move the frame
that starts the Don't Feed The Animals sign
| | 06:32 |
all the way back to the beginning of frame 1.
| | 06:35 |
| | Collapse this transcript |
|
|
5. Drawing Basic ShapesUnderstanding the Merge and Object Drawing modes| 00:00 |
There are two drawing modes available
to you when using the drawing tools in
| | 00:04 |
Flash: Merge Drawing mode
and Object Drawing mode.
| | 00:07 |
To demonstrate Merge Drawing mode, I'm
going to start with a blank FLA document
| | 00:11 |
in Flash and select the Rectangle tool.
| | 00:13 |
In the Property inspector, I'm going to
choose what color the outline or stroke
| | 00:17 |
of my rectangle is going to be.
| | 00:19 |
I'll pick black and I'll also choose a
color for the fill. I'll pick yellow.
| | 00:24 |
Before drawing a rectangle, let's make
sure that we're using Merge Drawing mode.
| | 00:29 |
So when you select a tool, the
Properties area underneath the toolbar also
| | 00:33 |
changes to show you more
options available for that tool.
| | 00:36 |
For our rectangle, we see a little icon
that looks like a circle within a square.
| | 00:41 |
This icon toggles between
Merge and Object Drawing modes.
| | 00:45 |
Merge Drawing mode is the mode selected
by Flash as the default when you start a
| | 00:49 |
new FLA, and you can see that the
icon is kind of a light gray color.
| | 00:54 |
If you click on the icon, it
turns a darker gray and puts you into
| | 00:57 |
Object Drawing mode.
| | 00:58 |
We went Merge Drawing mode, so make
sure the icon is the lighter gray color.
| | 01:03 |
The difference between the light gray and the
dark gray can admittedly be a little subtle,
| | 01:07 |
so if you're not sure which one you've
got, just draw a rectangle on the screen
| | 01:11 |
by clicking and dragging.
| | 01:12 |
Then use your Arrow tool
and select the rectangle.
| | 01:15 |
If your Property inspector shows that
the selected object is a shape, then you
| | 01:19 |
know you're in Merge Drawing mode.
| | 01:21 |
If your Property inspector says a
drawing object, you're an Object Drawing mode.
| | 01:25 |
So Merge Drawing mode is
basically for drawing ungrouped shapes.
| | 01:29 |
This rectangle is really just a blob of
color on the Stage that happens to be in
| | 01:33 |
the shape of a rectangle.
| | 01:35 |
So in Merge Drawing mode, the stroke
or the outline of the shape is treated
| | 01:39 |
separately than the fill.
| | 01:40 |
I'm going to click once on the Stage to
deselect and now if I click just once in
| | 01:45 |
the middle of the rectangle,
notice that only the fill is selected.
| | 01:49 |
You can tell because it has that
kind of stippled pattern of dots.
| | 01:53 |
If I drag and drop the rectangle
elsewhere on the Stage, only the fill goes.
| | 01:57 |
I'm going to hit Ctrl+Z to undo that move.
| | 02:00 |
Now, when I double-click on the rectangle,
you'll see that both the fill and the
| | 02:04 |
stroke are selected, allowing
you to move both of them together.
| | 02:08 |
It's a common mistake to click only
once on a shape and select just the
| | 02:12 |
stroke or the fill.
| | 02:14 |
So try to remember that you have to
click twice to get both the stroke and fill.
| | 02:18 |
Now I'm going to click on the
pasteboard to deselect the rectangle and approach
| | 02:22 |
one of the edges of the rectangle with my mouse.
| | 02:25 |
You'll notice how a small
icon of a curved line appears.
| | 02:28 |
When that's visible, you can change
your rectangle shape by clicking and
| | 02:31 |
dragging out the edge.
| | 02:32 |
Similarly, if you approach a corner of
your shape with the mouse, you'll see
| | 02:36 |
a little angle icon appear, which allows
you to click and drag the angles to modify.
| | 02:41 |
If you select and move your fill
away from your stroke, then deselect by
| | 02:46 |
clicking the pasteboard, you'll see
that this technique still works on both the
| | 02:50 |
fill and the stroke separately.
| | 02:52 |
I'm going to undo that change.
| | 02:54 |
So here are a few behaviors that are
unique to Merge Drawing mode, and it's
| | 02:58 |
perhaps where Merge Drawing mode got its name.
| | 03:01 |
In the toolbar, I'm going to click
and hold down on the Rectangle tool and
| | 03:05 |
you'll see the Oval tool hidden underneath that.
| | 03:07 |
I'm going to choose the Oval tool and in the
Property inspector, choose red for the fill.
| | 03:12 |
This time we're not going to have any stroke,
| | 03:15 |
so I'll choose the icon of a white
rectangle with the red diagonal line across
| | 03:19 |
it to indicate no stroke for my oval.
| | 03:22 |
So I'll draw the oval and select and
drag so it's positioned partially over the
| | 03:27 |
yellow rectangle fill.
| | 03:29 |
If I leave the red fill selected, I
can just continue moving it around.
| | 03:33 |
However, when I place it over the
yellow, then deselect by clicking on the
| | 03:37 |
pasteboard, now I'm going to
select and move the red fill again.
| | 03:41 |
You can see that the red kind of
cut its shape out of the yellow.
| | 03:46 |
This behavior can be useful or annoying
depending on what you're trying to do,
| | 03:50 |
so try to remember that this is how
shapes drawn in Merge Drawing mode behave.
| | 03:53 |
There's kind of an opposite behavior as well.
| | 03:56 |
I'm going to select my circle and in
the Property inspector change the fill
| | 04:00 |
color from red to the
same yellow as the rectangle.
| | 04:04 |
Now I'll move the circle over the
rectangle and deselect everything by
| | 04:08 |
clicking on the Stage.
| | 04:10 |
Now when I select the yellow fill,
you'll see that the two shapes have been
| | 04:13 |
merged or fused together.
| | 04:16 |
If you want to be able to move all of
your shapes on the screen as a unit, you
| | 04:19 |
can Select All, which is Command+A or
Ctrl+A on your keyboard, and then go to
| | 04:24 |
the Modify menu and choose Group.
| | 04:27 |
You could also hit Command+G or
Ctrl+G on your keyboard to group.
| | 04:31 |
Now when you select any of the
shapes, you select the whole group, and
| | 04:35 |
indeed, the Property inspector no
longer shows that we've got a shape here;
| | 04:39 |
instead, we've got a group.
| | 04:41 |
You can move the group around as you wish,
and then you can even double-click on
| | 04:44 |
the group to step inside the
group to edit the individual shapes.
| | 04:48 |
Notice how above the Stage it
says Scene 1 and then Group.
| | 04:53 |
Your shapes behave just the way
that they did before they were grouped.
| | 04:57 |
You can now move them
around individually, and so on.
| | 04:59 |
I'm going to undo that change.
| | 05:01 |
When you're done, just be sure to click
on Scene 1 to step back out of the group.
| | 05:06 |
Ungrouping the shape is just as easy.
| | 05:09 |
You just select your Group and
then go to Modify and Ungroup.
| | 05:13 |
So that was Merge Drawing mode.
| | 05:15 |
Object Drawing mode draws shapes on
the Stage where the stroke and the fill
| | 05:18 |
aren't able to be individually selected.
| | 05:21 |
It's similar to a group in that shapes
our already kind of stuck together for you.
| | 05:26 |
To demonstrate, I'm going to choose
the Oval tool again, and in the Property
| | 05:29 |
inspector make the fill
blue and the stroke black.
| | 05:32 |
So let's make sure they
we're using Object Drawing mode.
| | 05:36 |
So in the area underneath the toolbar,
I'll click on the Drawing mode toggle
| | 05:39 |
button to make it turn to darker gray, and
then that puts us into Object Drawing mode.
| | 05:44 |
I'm going to draw two circles on the
Stage, and when I do, notice immediately in
| | 05:49 |
the Property inspector that we're
looking at drawing objects, as opposed to a
| | 05:53 |
shape like you get with Merge Drawing mode.
| | 05:56 |
Also notice that my selected drawing
object has this rectangle around it to
| | 06:00 |
indicate that it's a drawing object;
| | 06:02 |
shapes don't have that.
| | 06:04 |
When I use my Arrow tool to click and
drag the circle around, notice that the
| | 06:08 |
stroke and the fill move around together.
| | 06:10 |
You can't select either one of them
separately like you can with Merge Drawing mode.
| | 06:14 |
Notice also that when I use the Arrow
tool to move one circle on top of the
| | 06:18 |
other, click on the pasteboard to
deselect everything, and then move the second
| | 06:22 |
circle away, both circles
remain their own discrete shapes.
| | 06:26 |
If this were Merge Drawing mode, the
two circles would have fused together or
| | 06:29 |
cut each other out depending on the color.
| | 06:31 |
So you can see how Object Drawing
mode really lives up to its name.
| | 06:36 |
Each shape you draw is its own
individual object of sorts, unaffected by others
| | 06:40 |
on the same layer, as
Merge Drawing mode shapes are.
| | 06:43 |
With drawing objects, I can still
click the pasteboard to deselect and then
| | 06:48 |
approach the side of the circle with
the mouse and the little icon of the
| | 06:52 |
curved line appears.
| | 06:54 |
I can drag the edge of the shape
out to modify it, just like we did in
| | 06:57 |
Merge Drawing mode.
| | 06:58 |
You can further edit your drawing
objects by double-clicking on them to step
| | 07:02 |
into them, as I'll do now.
| | 07:04 |
Notice how at the upper-left of the Stage it
now says Scene 1 and then Drawing Object.
| | 07:09 |
Additionally, the other items on the
Stage look faded out since they're back up
| | 07:14 |
on the main Timeline.
| | 07:15 |
While stepped into the drawing object,
I'll select the fill of the circle and
| | 07:19 |
look in the Property inspector.
| | 07:21 |
It says Drawing Object;
| | 07:23 |
however, the behavior is
really that of simple shapes.
| | 07:26 |
I can select the fill
individually and move it away.
| | 07:28 |
I can move the fill on top of some
of the stroke, and then click the
| | 07:32 |
pasteboard to deselect.
| | 07:34 |
And now when I move the fill away,
you'll see that the stroke that was covered
| | 07:37 |
up is now cropped off.
| | 07:39 |
Indeed, our items on the screen
here are behaving like shapes.
| | 07:43 |
So I'm going to click Scene 1 to
return to the main Timeline, but you can see
| | 07:47 |
that really what Object Drawing mode is
doing for you is grouping the fill and
| | 07:50 |
the stroke of a shape for you
automatically when you draw the shape.
| | 07:54 |
This is a little different than
grouping a shape together with Ctrl+G, as we did
| | 07:58 |
before, since grouping items on the screen
simply allows you to move them around as a group.
| | 08:04 |
A drawing object, in essence, groups
stuff together, but you can still modify
| | 08:09 |
the outlines by deselecting everything
by clicking on the pasteboard and then
| | 08:13 |
approaching the edge of your shape.
| | 08:15 |
I can also still change the fill and the stroke.
| | 08:19 |
If you find yourself wanting a
drawing object to behave more like a merge
| | 08:23 |
drawing object after you've created it,
simply select the shape, right-click,
| | 08:28 |
and choose Break Apart.
| | 08:30 |
Now when you click on either the fill
or the stroke, the Property inspector
| | 08:34 |
shows that you're working with shapes.
| | 08:37 |
You can also go the other way with merge
drawing objects or shapes that you want
| | 08:41 |
to change into drawing objects.
| | 08:43 |
I can go to Modify >
Combine Objects, and then Union.
| | 08:48 |
Now when I click on the shape,
in the Property inspector, it says
| | 08:51 |
Drawing object, not Shape.
| | 08:54 |
So we've seen that Merge Drawing mode
essentially results in shapes being drawn
| | 08:58 |
on the screen with the
fill and the stroke separate.
| | 09:00 |
Merge drawing shapes can kind of
cut each other out or fuse together,
| | 09:04 |
depending on the color.
| | 09:06 |
Object Drawing mode is more of a
convenient way to have the shape's stroke and
| | 09:09 |
fill grouped together for
you when you draw the shape.
| | 09:13 |
| | Collapse this transcript |
| Using the Line and Pencil tools| 00:00 |
The Line and Pencil tools both
allow you to draw simple lines in Flash
| | 00:04 |
when creating graphics.
| | 00:06 |
With a blank FLA document open I'll
start with the Line tool by selecting the
| | 00:10 |
icon with the line on it in the toolbar.
| | 00:12 |
Both the Pencil and the Line tool can
create lines in Merge or Object Drawing
| | 00:17 |
mode. And for this demo I want
to be in Merge Drawing mode,
| | 00:20 |
so I'll just make sure that the Drawing
mode button at the bottom of the toolbar
| | 00:24 |
is the lighter gray instead of the darker.
| | 00:26 |
In the Property inspector you will see
all the options that we can set for the
| | 00:30 |
line before we draw it.
| | 00:31 |
Near this icon of the pencil you can
change the color of the stroke of the line
| | 00:35 |
by clicking the color chip and
choosing from the color picker.
| | 00:38 |
I am just going to leave mine at black.
| | 00:40 |
Notice that when I click on Fill, nothing
happens, which makes sense; since we are
| | 00:44 |
drawing a line there is no fill.
| | 00:46 |
So 1 for the Stroke thickness and Solid
for the Style will give is a thin solid
| | 00:52 |
line when I click and drag to draw a line.
| | 00:54 |
I will change the style to it Dashed
and type in 2 for the Stroke, and now when
| | 01:01 |
I click and drag to draw another line,
you can see we get a slightly thicker dashed line.
| | 01:06 |
The higher the stroke number, the
thicker the shape stroke is going to be.
| | 01:09 |
Notice that you can also click this
second icon of a pencil to create a
| | 01:13 |
customized line style.
| | 01:15 |
In the Type dropdown, you can choose
between the different types of lines, and
| | 01:20 |
when you do, options for each
one are presented underneath.
| | 01:23 |
So I could look at Dotted or Stipple or Hatched.
| | 01:29 |
I'll choose Ragged and I can play with
the Pattern, I can play with the Wave
| | 01:37 |
height--I will just leave it at Flat--
and I can play with the Wavelength.
| | 01:43 |
You can also change the thickness
or you could give it sharp corners.
| | 01:48 |
The options are different for each
kind of line in that Type dropdown.
| | 01:52 |
For now I am just going to click Cancel.
| | 01:53 |
So I am going to make sure that my
Line style is back to Solid, so we can see
| | 01:58 |
the options in this Scale dropdown.
| | 02:01 |
This option allows you to control how
objects will appear in the Flash player
| | 02:05 |
when they're scaled.
| | 02:06 |
If you choose Normal and draw a line
on the Stage and then scale it up, the
| | 02:10 |
stroke will scale with the shape.
| | 02:12 |
For instance, if you have a line
with a Stroke of 1 and you scale it up
| | 02:16 |
multiple times bigger, the stroke will
also increase in height or thickness.
| | 02:21 |
If you choose None, the stroke will
stay the same thickness no matter how big
| | 02:25 |
or small you scale it.
| | 02:26 |
Horizontal only adjusts the Stroke
thickness when an object is scaled
| | 02:29 |
horizontally, and Vertical only adjusts the
stroke when the object is scaled vertically.
| | 02:34 |
You can see all of this in action if
you open the file called lines.swf in the
| | 02:38 |
exercise files for this chapter.
| | 02:40 |
This has two line segments in it: one drawn
with normal scaling and the other with none.
| | 02:45 |
If I scale my SWF bigger and smaller,
you will see that the line with the Normal
| | 02:50 |
setting gets bigger and smaller as I scale.
| | 02:54 |
The line with none always
stays the same thickness.
| | 02:58 |
So back in Flash I am going to
leave the Scale dropdown at Normal.
| | 03:02 |
Hinting places anchor points at exact pixels.
| | 03:05 |
When you're drawing a line if the end
of the line is halfway between 2 pixels,
| | 03:10 |
Flash will automatically
snap it to the nearest pixel.
| | 03:13 |
This is so that you don't drop
anchor points in between pixels.
| | 03:16 |
That could render blurry in the Flash player.
| | 03:19 |
So I'll leave Hinting checked.
| | 03:20 |
Cap determines how a
stroke will look when it ends.
| | 03:24 |
The end can have a rounded tip or a square one.
| | 03:27 |
Join determines how a stroke will
look when one line segment connects with
| | 03:30 |
another line segment.
| | 03:32 |
So for Join, you can choose to round
lines, bevel them, or set the miter.
| | 03:36 |
I am going to leave the default of Round.
| | 03:38 |
So now I'm going to draw another line
and as I click and drag, I am going to
| | 03:42 |
hold down the Shift key on the
keyboard and as I drag around, you can see that
| | 03:47 |
it constrains the line to straight
lines and I can go all the way around here
| | 03:51 |
45 degrees at a time.
| | 03:53 |
Using Arrow tool, you can of course move
your line around the Stage as you'd like.
| | 03:57 |
Using your Arrow tool, you can also
approach the edge of the edge of the line
| | 04:00 |
with your mouse and you will see the
little icon of a curved line appear.
| | 04:04 |
With that icon visible, I can click and
drag on the line and modify the curve of
| | 04:08 |
it any way that I want.
| | 04:11 |
So now I am going to press Ctrl+A on my
keyboard or Command+A on a Mac to select
| | 04:15 |
all our lines and hit Delete to get rid of them.
| | 04:18 |
Now we will switch to the Pencil tool by
selecting the icon of the pencil in the toolbar.
| | 04:23 |
The Pencil tool allows you to draw
freeform lines and there are not that many
| | 04:27 |
settings available for it.
| | 04:28 |
In the Property inspector you'll see
that you can change the color of the line
| | 04:32 |
and also leave mine at black.
| | 04:34 |
The options in the Properties panel
are pretty much the same as they were for
| | 04:38 |
the Line tool in regards to the
stroke thickness, the style, and so on.
| | 04:42 |
I am going to give mine a stroke of 1.
| | 04:44 |
What I'd like to call your attention
to is the area at the bottom of the
| | 04:47 |
toolbar where we see an additional option
for the Pencil tool, and that's the Pencil mode.
| | 04:53 |
This basically allows you to choose to
have Flash smooth your drawing or not.
| | 04:57 |
So I will choose Ink and I'll draw a spiral,
and I will kind of shake my hand as I draw it.
| | 05:02 |
And you can see that it's not very
smooth, because I'm drawing with the mouse.
| | 05:06 |
It's hard to draw with the mouse.
| | 05:07 |
Now I am going to change to Smooth and
draw another spiral, and this one is a
| | 05:12 |
little bit smoother.
| | 05:13 |
Flash takes the lines and makes them
less wrinkly with their flows and curves.
| | 05:17 |
Finally, choosing Straighten and drawing
a spiral does a similar thing to smooth;
| | 05:24 |
it kind of straightens the lines out.
| | 05:27 |
In any case, if you hold down the
Shift key on your keyboard as you draw a
| | 05:31 |
line with the Pencil tool, Flash
constrains the line to a straight line,
| | 05:36 |
perfectly straight.
| | 05:37 |
So the Line tool and the Pencil tools
give you some easy ways to draw lines in
| | 05:41 |
Flash, with a good amount of control
over the thickness, pattern, and other
| | 05:45 |
attributes of the lines.
| | 05:47 |
| | Collapse this transcript |
| Drawing with the Rectangle and Oval tools| 00:00 |
Let's explore the Rectangle and Oval tools.
| | 00:03 |
I'm just going to be using a
blank FLA document to demonstrate.
| | 00:07 |
The Rectangle and Oval tools are both
located in the toolbar, but there are a
| | 00:11 |
number of tools grouped together in
one spot hidden underneath each other.
| | 00:15 |
When there is multiple tools hidden
behind another, it's indicated by this tiny
| | 00:19 |
little arrow on the lower right-hand side.
| | 00:22 |
To choose which tool you want, simply
click and hold down your mouse to open
| | 00:26 |
up the flyout menu.
| | 00:27 |
So I'm going to start with the
Rectangle tool, and we want to make sure that
| | 00:30 |
we're using Merge Drawing mode.
| | 00:32 |
So in the tool option area at the
bottom of the toolbar I'll make sure that the
| | 00:36 |
Drawing mode button is the lighter
gray as opposed to the darker gray.
| | 00:40 |
So you can see in the Property
inspector the different options that we have
| | 00:43 |
for the Rectangle tool.
| | 00:45 |
I could change the color of
the fill and the stroke here.
| | 00:47 |
So I'll click on the color chip to open up
the color picker and choose a yellow fill.
| | 00:53 |
The same color picker is available for
the stroke, but I'll just leave it at black.
| | 00:57 |
You can change the thickness of the
stroke by increasing the number here.
| | 01:00 |
You also have some different choices
for the style of the stroke, like a dashed
| | 01:05 |
or a dotted line, as well as options for
the Cap, Scale, and Join that we saw for
| | 01:10 |
the Line tool previously.
| | 01:11 |
There is also this Rectangle Options
area, and we'll look at that in a moment.
| | 01:15 |
For now I'm just going to draw a rectangle.
| | 01:17 |
I'm keeping my mouse pressed down as
I draw, and notice how the width of the
| | 01:21 |
rectangle can be a different
dimension than the height of the rectangle.
| | 01:24 |
If I hold down the Shift key while
drawing the rectangle, the dimensions
| | 01:27 |
are constrained relative to each other so
we get a perfect box instead of a rectangle.
| | 01:33 |
I'm going to hit Ctrl+Z to erase that
shape, and as I draw another, you'll notice
| | 01:37 |
that it draws out from the corner.
| | 01:40 |
If I hold down Alt or Option on
the Mac, it draws out from the center.
| | 01:45 |
So I'll delete that rectangle as well,
and now let's take a look at what we have
| | 01:49 |
in the Rectangle Options
area in the Property inspector.
| | 01:53 |
These settings affect the
corner radius of the rectangle.
| | 01:56 |
You can either use the
slider or you can type in a value.
| | 01:59 |
I'm going to bump this up to a bigger
number, like 10, and now when we draw a
| | 02:04 |
rectangle, you see that we
get nice rounded corners.
| | 02:07 |
You can also have a
negative corner radius as well.
| | 02:10 |
I'll just drag the slider over to a
negative number and draw a rectangle and you
| | 02:14 |
can see that the corners are kind of inverted.
| | 02:17 |
You don't have to have all the corners match.
| | 02:19 |
I'm going to change my corner
radius to 20 by typing it in.
| | 02:24 |
Now I'm going to click on this Lock
Corner Radius icon so the values of all four
| | 02:29 |
corners aren't tied together anymore.
| | 02:31 |
Now I'll change the radius for the
upper-left corner to 5 and now when I draw
| | 02:36 |
my rectangle, you can see how indeed the upper-
left corner is not as rounded as the others.
| | 02:41 |
Once you have a shape on the Stage,
it's really easy to change the color of the
| | 02:45 |
fill and the stroke.
| | 02:46 |
Using my Arrow tool, I'm going to
double-click on one of my rectangles.
| | 02:49 |
Remember that if you click only
once, you select just the Fill.
| | 02:52 |
If you click twice, you
get the fill and the stroke.
| | 02:56 |
Now over in the Property inspector,
I can click on the color chip next to the
| | 02:59 |
icon of the paint bucket and change
the fill color of my rectangle by picking
| | 03:03 |
from the color picker. I'll choose blue.
| | 03:06 |
Likewise, I can open the color picker
next to the pencil icon and change the
| | 03:10 |
stroke color of the rectangle.
| | 03:12 |
You could also just type
in a hexadecimal value here.
| | 03:15 |
I'll type in FFFF00 to get yellow.
| | 03:20 |
You can do that for any shape you draw
on the Stage, not just rectangles, and
| | 03:24 |
it doesn't matter whether it's Merge
Drawing mode or Object Drawing mode.
| | 03:28 |
So you have a fair amount of control
with the Rectangle tool, and the Oval
| | 03:31 |
tool is pretty similar.
| | 03:33 |
So I'm going to use my Arrow tool to
click and drag around all the rectangles on
| | 03:36 |
the screen and delete, and
| | 03:38 |
now from the flyout menu, under
the Rectangle, choose the Oval tool.
| | 03:42 |
So the options for color, stroke
thickness, the style of the stroke, and so on
| | 03:46 |
are just like the Rectangle tool.
| | 03:48 |
I'm going to make my stroke to be black.
| | 03:51 |
And just like the Rectangle tool,
I can draw my oval out on this Stage.
| | 03:55 |
If I hold down the Shift key as I draw,
my shape is constrained to a perfect circle.
| | 04:00 |
And just as before, I can drawn my shape
out from a corner or if I hold down the
| | 04:04 |
Alt key or the Option key on the
Mac, then it draws out from the center.
| | 04:08 |
I'm going to get rid of these ovals so
we can take a look at that Oval Options
| | 04:12 |
at the bottom of the Property inspector.
| | 04:15 |
So let's start with Start angle.
| | 04:17 |
You can use this slider or
type in a value. I'll put 90.
| | 04:20 |
When I draw the oval you'll see that the
angle the shape starts with is affected.
| | 04:25 |
We've got a 90-degree angle here.
| | 04:27 |
So I'm going to set that back to 0 and
now I'm going to change End angle to 90.
| | 04:32 |
Now when I draw a circle, this time
we've also got 90 degrees, but you can see
| | 04:36 |
it's kind of the opposite 90 degrees of before.
| | 04:39 |
I'll slide the End angle value up a
little bit more and draw another shape so
| | 04:44 |
you can see which
direction the angle is moving in.
| | 04:46 |
So I'm going to delete these circles
and with the Oval tool selected again, I'm
| | 04:51 |
going to hit the Reset button in the Oval
Options area to set everything back to 0.
| | 04:57 |
Let's try the Inner radius.
| | 04:59 |
I am going to make it at least 30, and
draw a circle, and you can see now we've
| | 05:04 |
got a donut machine.
| | 05:06 |
So I'm going to reset everything to
0 once again, and now I'm going to
| | 05:09 |
uncheck the Close path box.
| | 05:11 |
I'm going to type in 90 for the Start
angle and this time when I draw my circle,
| | 05:16 |
I get just that outline of the
circle, but not the line for the angle.
| | 05:20 |
So the Rectangle and Oval tools are
very similar, and that's why they're grouped
| | 05:24 |
together in the toolbar.
| | 05:26 |
The settings for both can be easily
changed in the Properties panel, and you can
| | 05:30 |
use the keyboard shortcuts mentioned
earlier to control the relative dimensions
| | 05:34 |
and origin point of each shape.
| | 05:37 |
| | Collapse this transcript |
| Drawing with the Rectangle and Oval Primitive tools| 00:00 |
The Rectangle and Oval Primitive tools
are almost identical to the Rectangle and
| | 00:05 |
Oval tools, but with one important difference.
| | 00:08 |
Let's start with the Rectangle tool.
| | 00:10 |
I'll be working in a blank FLA document here.
| | 00:13 |
So, if I select the Rectangle tool,
and draw a Rectangle, well, there it is.
| | 00:18 |
It's been drawn with the Options that
we set here in the Properties panel.
| | 00:21 |
What the Rectangle Primitive tool
allows you to do is change the setting in the
| | 00:25 |
Rectangle Options Area after the shape is drawn?
| | 00:29 |
So I'll select the Rectangle Primitive
tool which is just in the flyout menu
| | 00:33 |
with the Rectangle Oval and other tools.
| | 00:36 |
Notice that all the settings are
the same as the Rectangle tool:
| | 00:39 |
Color, Stroke, Stroke Style, and so on.
| | 00:42 |
I'll just draw a Rectangle Primitive on
my screen, and you'll notice that it has
| | 00:45 |
these 4 points on the corners.
| | 00:48 |
Now, I can go to the Rectangle Options
Area and move the slider up to increase
| | 00:52 |
the Corner Radius and make the corners
more rounded or down to give the corners
| | 00:57 |
what I call an Inverted Radius.
| | 00:59 |
And that's really the difference between
the Rectangle and Rectangle Primitive tools.
| | 01:04 |
With Rectangle Primitive, you can
change the Corner Radius after you've drawn
| | 01:08 |
the shape, but with the
Regular Rectangle you can't.
| | 01:11 |
The do Oval Primitive tool is similar
I'll just choose the Oval Primitive tool
| | 01:15 |
here, and you'll notice again that all
the settings in the Property inspector
| | 01:19 |
are just like the settings for the Oval tool.
| | 01:21 |
Now I'll draw an Oval Primitive Shape,
and now that it's drawn I can move the
| | 01:26 |
slider for the Start angle, the End
angle and the Inner radius and have the Oval
| | 01:31 |
on the Stage update accordingly.
| | 01:33 |
I can also uncheck the Close Path
checkbox and slide say the Start Angle
| | 01:38 |
slider and see just the outline of the
circle and not angle within as I drag the slider.
| | 01:44 |
So Rectangle and Oval Primitives are
not merged drawing mode Shapes or Objects
| | 01:50 |
drawing mode shapes.
| | 01:51 |
They are Rectangle and Oval Primitive
Shapes using my arrow tool when I click on
| | 01:55 |
the Rectangle Primitive Shape, you'll
see that it says Rectangle Primitive in
| | 02:00 |
the Property inspector.
| | 02:01 |
If you double-click on a Primitive
Shape to edit it like you would an
| | 02:05 |
Objects drawing Shaped.
| | 02:06 |
Flash gives you a warning that to edit it,
you must convert it to a Drawing Object.
| | 02:11 |
I'll OK and Flash
converts it to a Drawing Object.
| | 02:15 |
Notice now on the upper-left of the
screen we stepped from the main Timeline as
| | 02:19 |
indicated by scene 1 down into a Drawing Object.
| | 02:23 |
If I click Scene 1 to return to the
main Timeline, you'll notice that the
| | 02:27 |
Property inspector confirms that our
selected Shape is now a Drawing Object.
| | 02:31 |
And notice that I can't
change the Corner Radius anymore.
| | 02:35 |
So the Rectangle and Oval
Primitive tools can be really useful.
| | 02:38 |
If you're a drawing something in Flash
and need to be able to change the Shape
| | 02:42 |
after you've drawn it.
| | 02:44 |
Just remember that they're located in the
flyout menu with the Rectangle and Oval tools.
| | 02:49 |
So remember that, if you're looking
for them and you don't see them in
| | 02:51 |
the toolbar right off.
| | 02:53 |
| | Collapse this transcript |
| Creating shapes with the PolyStar tool| 00:00 |
The Polystar tool allows you to draw
stars or polygons, and there are some
| | 00:04 |
settings that you can adjust before you draw
a shape to effect what the end shape looks like.
| | 00:09 |
I'll be working in a blank FLA
document here to demonstrate.
| | 00:13 |
If you click and hold the flyout menu
with the Rectangle, the Oval tool, the
| | 00:17 |
Rectangle Primitive, and the Oval
Primitive tool, you'll find the Polystar
| | 00:20 |
tool at the bottom.
| | 00:21 |
Before drawing, I'm going to make
sure that we're in Merge Drawing mode,
| | 00:24 |
so the Drawing mode icon here at the
bottom of the toolbar should be the lighter
| | 00:28 |
gray as opposed to the darker gray.
| | 00:30 |
The options in the Fill and Stroke area
are the same as the Rectangle, Oval, and
| | 00:35 |
Rectangle and Oval Primitive tools.
| | 00:36 |
You can set things like the color of
the fill and the stroke, the width of the
| | 00:40 |
stroke, the style of the stroke, and so on.
| | 00:43 |
In the section called Tool Settings
you'll see this button called Options.
| | 00:47 |
When I click a tool settings pop-up
appears. In the Style dropdown, you can
| | 00:51 |
choose to draw a star or a polygon.
| | 00:53 |
And I'll start with the polygon.
| | 00:54 |
I want to draw a hexagon, so in the
Number of Sides box, I'll type 6. Even though
| | 00:59 |
Star point size appears here,
| | 01:01 |
it isn't relevant to Polygons so
you can just leave it at the default.
| | 01:04 |
I'll click OK, and now I
can draw out my polygon.
| | 01:07 |
I am going to draw out a second
polygon and notice that as I rotate the shape
| | 01:11 |
around, if I push the Shift key on the
keyboard, Flash will line up the shape so
| | 01:15 |
that either one of the points is
pointing straight down or one of the edges is
| | 01:19 |
aligned perfectly straight on the bottom.
| | 01:22 |
So to draw a star, I'll click on the
Options button in the Property inspector again,
| | 01:26 |
and this time, under the
Style dropdown, choose Star.
| | 01:28 |
I am going to type in 5 for regular old
5-pointed star. Star point size refers to
| | 01:34 |
how deep the angles between the points are.
| | 01:37 |
I'll type in 0.10 here and click OK.
| | 01:39 |
Now I'll draw the star to show what
that looks like. So here's our 5-pointed
| | 01:44 |
star and I'll click Options again and
this time change the Star point size to 2.90.
| | 01:50 |
I'll click OK and draw another star.
| | 01:52 |
And you can see what the difference
that the Star point size setting makes.
| | 01:56 |
Back in the Options again, Star point
size can only have a value between 0 and 1,
| | 02:02 |
and Flash will correct the size if
you try a number outside of 0 and 1.
| | 02:05 |
So I am going to change my star so
that it has 10 sides and I am going to type
| | 02:09 |
in 2 for Star point size.
| | 02:11 |
I am going to draw my 10-pointed star
and then when I click Options again,
| | 02:16 |
you can see that Flash rounded the Star point
size down to 1, since 2 is above the allow limit.
| | 02:22 |
So the Polystar tool is an easy way to
draw polygons and stars that otherwise
| | 02:27 |
would probably take you a long time to
create using the other drawing tools.
| | 02:31 |
Just remember that this is one of
the five tools grouped together,
| | 02:34 |
so open the flyout menu in the
toolbar to find it, if you don't see
| | 02:37 |
it immediately.
| | 02:39 |
| | Collapse this transcript |
| Manipulating items with the Free Transform tool| 00:00 |
The Free Transform tool allows you to
take objects on the Stage and easily
| | 00:04 |
affect things like their
scale, skew, and rotation.
| | 00:07 |
I am going to be using a file called
transform.fla from the exercise files for this chapter.
| | 00:13 |
So I'll select the rectangle on the
screen and now choose the Free Transform
| | 00:17 |
tool, which is the 3rd tool
from the top in the toolbar.
| | 00:21 |
It's in the same flyout as
another tool called Gradient Transform,
| | 00:24 |
so be sure you choose the correct one.
| | 00:27 |
You could also press Q on your keyboard
instead of choosing the tool out of the toolbar.
| | 00:31 |
So you notice that a bunch of handles appear on
the object indicating that we can change it.
| | 00:36 |
I'll drag the handle at the top to
scale up and down, and notice that the bottom
| | 00:40 |
of the image is anchored.
| | 00:41 |
You could it even scale it so
far that it flips over, like this.
| | 00:45 |
You can also scale from the middle
instead of the bottom, if you hold down Alt
| | 00:49 |
or Option while you scale.
| | 00:50 |
So you can of course also drag the
handles on the sides or the bottoms to scale
| | 00:55 |
horizontally or from the bottom.
| | 00:58 |
You can also use the handles on the corners.
| | 01:01 |
Notice how my mouse turns into a double-
headed arrow as I hover over one of the corners.
| | 01:06 |
So I can scale horizontally and
vertically separately or at the same time.
| | 01:10 |
I am going hold down Shift to keep
the width and height proportionate to
| | 01:14 |
each other as I scale.
| | 01:17 |
You can also rotate objects.
| | 01:19 |
If you use your mouse to approach one
of the corner handles, you'll see the
| | 01:22 |
curved line with an arrow on it.
| | 01:24 |
Now I am going to
Click+Drag to rotate the shape.
| | 01:27 |
If you hold down the Shift key, Flash will
constrain the rotation to 45-degree angles.
| | 01:35 |
To skew an object, approach one of the
sides with your mouse, and notice the icon
| | 01:40 |
of two lines that look like
they're going opposite of each other.
| | 01:43 |
You can now skew your object
vertically or horizontally.
| | 01:47 |
Transformations occur based on the
transformation point, which is indicated
| | 01:51 |
by the white circle.
| | 01:52 |
If I move the transformation point up
and scale the shape you can see the
| | 01:56 |
scaling is happening around that point.
| | 01:58 |
You can really tell the
difference when I rotate the object.
| | 02:03 |
For really granular control,
you might like the Free Transform panel.
| | 02:07 |
I am going to make sure my rectangle
is still selected and then go to Window
| | 02:11 |
and then Transform.
| | 02:12 |
Notice also, there's a keyboard
shortcut of Ctrl+T or Command+T. Here you can
| | 02:17 |
see control points for the scale,
rotation and skew of my object.
| | 02:21 |
And this can be really useful if you
want to be very precise about how much are
| | 02:25 |
transforming the object.
| | 02:27 |
So here when I change my Scale and I
am going to change may Scale vertically.
| | 02:32 |
Of course, I can change
the rotation and the skew.
| | 02:38 |
You can also use this handy Reset
button to change your scale percentage back
| | 02:45 |
to where you started.
| | 02:46 |
Or you could also just type in a number.
| | 02:49 |
So the Free Transform tool can be
used to scale, rotate, and skew objects,
| | 02:53 |
whether they are shapes you've drawn
or object you've imported into Flash.
| | 02:56 |
You'll probably be using it a lot,
so I recommend memorizing the keyboard
| | 03:00 |
shortcut of Q so you can simply
select your object can quickly get the Free
| | 03:04 |
Transform tool going.
| | 03:06 |
| | Collapse this transcript |
|
|
6. Beyond Basic ShapesPainting with the Deco and Spray Brush tools| 00:00 |
The Deco tool offers some pre-built artwork
that you can incorporate into your Flash pieces.
| | 00:05 |
It's located in the toolbar under the
Brush tool and looks like a pencil with
| | 00:09 |
maybe some stars coming out.
| | 00:11 |
So when you select the Deco tool,
you'll notice in the Property inspector this
| | 00:15 |
area called Drawing Effect.
| | 00:17 |
Open up this dropdown and you'll see
all the different kinds of pre-built
| | 00:20 |
drawings that the Deco tool can create.
| | 00:23 |
The options for each one are different, so
we're going to just take a look at a few of them.
| | 00:26 |
We'll start with the Building Brush.
| | 00:28 |
When I click and drag on the screen,
I get a randomly selected building.
| | 00:35 |
Under Advanced Options in the Property
inspector, I could choose Skyscraper 1
| | 00:40 |
from the dropdown and now draw
only that one style of skyscraper.
| | 00:44 |
Changing Building Size to 5 makes
the size of the building bigger.
| | 00:50 |
So I'll hit Ctrl+A on my keyboard to
select all the buildings and hit my Delete
| | 00:54 |
key, and now under Drawing
Effect, choose Decorated Brush.
| | 01:00 |
The default under the dropdown in
Advanced Options is Step Wave, so let's try
| | 01:04 |
that out. Okay, that's pretty cool.
| | 01:07 |
So, now let's try Mayan and now Music Notes.
| | 01:15 |
So this could be a cool way to create
some easy patterns or borders in Flash and
| | 01:20 |
note of course that you can change the
color, pattern size, and pattern width for
| | 01:24 |
the different patterns.
| | 01:25 |
So I'll Undo or Command+Z or Ctrl+Z out
of all of these things on the screen, and
| | 01:30 |
now let's try the Fire Animation.
| | 01:34 |
So we have some options here.
For instance, this is going to be an animation and
| | 01:38 |
we can change it to be more or less
than 50 frames long if we want to.
| | 01:43 |
We can also change the color
of the fire in the fire color.
| | 01:46 |
And I think the defaults are just
fine, so I'll click on the screen.
| | 01:51 |
We'll see Flash draw out 50 frames'
worth of flames, and notice they are actually
| | 01:55 |
keyframes, because the content on each
one is different. You can tell when you
| | 01:58 |
scrub your playhead.
| | 01:59 |
I am going to zoom in and click on some
of the fire, and you can see looking in
| | 02:07 |
the Property inspector that we've
got groups of shapes here. Clicking on
| | 02:11 |
different keyframes in the Timeline, we see
that each keyframe contains different groups.
| | 02:16 |
If I double-click to step into any one
of those groups, I'll select what's inside
| | 02:20 |
and we can see in the
Property inspector that it's a shape.
| | 02:24 |
So Flash has done a lot of work here drawing
all these shapes and grouping them together.
| | 02:28 |
I'm going to click Scene 1 to go back
to the main Timeline and then choose Fit
| | 02:32 |
in Window so we can see the whole Stage again.
| | 02:34 |
Now I'm going to hit Ctrl+Enter to
check out what the animation looks like, and
| | 02:39 |
that's a pretty cool fire effect.
| | 02:42 |
Now I'm going to open apple.fla from
the exercise files from this chapter to
| | 02:47 |
explore the Deco tool and the
Spray Brush tool in conjunction.
| | 02:50 |
There is nothing on the Stage
here, but there will be soon.
| | 02:55 |
So I'm going to select the Deco
tool and now choose the Tree Brush.
| | 03:01 |
Notice that you can draw an Aspen Tree,
an Apricot Tree, an Ash Tree, even some
| | 03:05 |
vines and different kinds of evergreen
trees. You have a lot of options here.
| | 03:09 |
Now I'm going to choose the Orange Tree.
| | 03:12 |
You can even change the color for
branch, leaf, and flowers, and I'm actually
| | 03:16 |
going to leave these at their defaults
because even though this is an orange
| | 03:19 |
tree, I'm going to make it an apple tree.
| | 03:21 |
So I'm going to draw my tree, and the
longer I hold the mouse down at the top, the
| | 03:25 |
more branches I get, so you can
experiment with how this works.
| | 03:29 |
So our apple tree is going to have a
profusion of apples, so many that they're
| | 03:33 |
going to be just falling on the ground.
| | 03:34 |
I'm going to use the Spray
Brush tool to draw those apples.
| | 03:38 |
The Spray Brush tool is under the Brush
tool, just above the Deco tool. So I'll
| | 03:42 |
click and hold the Brush
tool to open the flyout menu.
| | 03:45 |
There is my Spray Brush tool.
| | 03:47 |
So notice that in the Property
inspector it says Spray and then no symbol.
| | 03:52 |
The Spray Brush tool is basically asking
us to tell it what image we want to use
| | 03:56 |
to spray on the screen.
| | 03:57 |
If you don't define any--I'm just
going to click and drag to spray--you get a
| | 04:01 |
series of black dots sprayed
on the screen like spray paint.
| | 04:03 |
I'm going to undo that change and now click
in the Library tab to open up the library.
| | 04:10 |
Here we have a symbol that contains an apple.
| | 04:13 |
We haven't covered what symbols are
quite yet, but for now know that it's a
| | 04:16 |
reusable graphical asset.
| | 04:18 |
I'm going to go back to my Spray Brush
tool and in the Properties panel choose
| | 04:24 |
Edit. Now I'm going to tell Flash
that I want to use the apple symbol.
| | 04:28 |
So we'll leave the Scale
width and Scale height at 100%.
| | 04:32 |
If you change these, it would scale the
width or height of the apple up or down,
| | 04:36 |
which I don't want to do since that
would distort the Apple. I'll make sure that
| | 04:40 |
these three checkboxes here are unchecked.
| | 04:43 |
We'll work with them in a minute. And in
the Brush area, I'll make sure that Width
| | 04:46 |
is 0, Height is 10, and Brush angle is 0.
| | 04:51 |
Now I'll click and drag to spray some
apples onto the ground under our orange
| | 04:55 |
tree that's really an apple tree.
| | 04:57 |
You'll notice that those apples are
all pretty close together. If I change the
| | 05:01 |
Height to 90 and spray again, you'll see that
the apples are spread within a 90-pixel swath.
| | 05:07 |
I'm going to create a third set of
apples and this time check the Random scaling
| | 05:12 |
and Random rotation boxes.
| | 05:14 |
This time when I spray, you can see
that the apples are randomly scaled bigger
| | 05:18 |
and smaller and they're also randomly rotated.
| | 05:21 |
So, the Deco tool is a fun way to
experiment with different kinds of pre-built
| | 05:25 |
graphics, and the Spray Brush tool is
a good way to put lots of copies of a
| | 05:29 |
particular image on the Stage in different ways.
| | 05:32 |
There are lot of choices between both of
these tools, so I encourage you to take
| | 05:35 |
a few minutes and check out the
options that interest you most.
| | 05:39 |
| | Collapse this transcript |
| Using the Paint Bucket and Ink Bottle tools| 00:00 |
The Paint Bucket and the Ink Bottle
tools are easy ways to help you change the
| | 00:04 |
color of fills and strokes of
artwork that you have in Flash.
| | 00:08 |
In the exercise files for this chapter,
we have a file that has two instances of
| | 00:13 |
the Roux Academy logo that are a little
bit different from each other and then
| | 00:17 |
one instance of the kinetEco logo.
So first I'm going to zoom in to 200%.
| | 00:21 |
I'm going to choose the Paint
Bucket tool from the toolbar.
| | 00:27 |
In the Property inspector, I'll click
once on the color chip for the fill color
| | 00:31 |
to open the color palette, and I'm
going to select this special yellow color
| | 00:35 |
that I loaded into the color picker
that goes with the color scheme for the
| | 00:39 |
Roux Academy brand.
| | 00:41 |
Now I can simply click on parts
of the fill to change the color.
| | 00:44 |
I'm going to change all these leaves to yellow.
| | 00:47 |
Now there are some useful options for
the Paint Bucket tool. Look in the toolbar
| | 00:52 |
underneath all the tools and
we'll see the option for Lock Fill.
| | 00:56 |
We're going to address this in the movie
about gradients, so we'll skip it for now.
| | 01:00 |
We're going to look at Gap Size.
| | 01:02 |
Gap Size is good for when you want to
change the fill of something but there's
| | 01:06 |
a gap in the outline.
| | 01:08 |
We have an example of this on the kinetEco logo.
| | 01:11 |
If we wanted to fill in the spaces
between the circles, there are some pretty
| | 01:14 |
big gaps there. So I'm going to zoom
in a lot, to 1600%, using my keyboard
| | 01:20 |
shortcut of Command or Ctrl and then plus sign.
| | 01:23 |
Then I'm going to select my Paint Bucket
tool and I'm going to change the fill
| | 01:27 |
color to the correct green
color for that kinetEco logo.
| | 01:32 |
In the Gap Size dropdown, I'm going
to tell Flash that we want to close the
| | 01:35 |
small gaps, so ignore the gap in the
line. I'm going to click, but nothing
| | 01:40 |
happens, so the gap must be bigger
than what Flash considers a small gap.
| | 01:45 |
So, I'll open up my dropdown
and jump to Close Large Gaps.
| | 01:49 |
I'm going to try again, but once again
it doesn't work. And that's the way that
| | 01:54 |
the close gaps work.
| | 01:56 |
Small, medium, and large gaps are not a
particular pixel amount; they're just kind
| | 02:01 |
of relative to what's going on on the screen.
| | 02:04 |
If I zoom out to 800% and then try
filling the space again with the Paint Bucket
| | 02:08 |
tool, suddenly it works. So I can
fill on the other lines as well.
| | 02:14 |
This one I didn't feel in quite the
way that I like, but the point is that
| | 02:17 |
the gap is too large a gap at 1600%
but not at 800%. So gaps being too large
| | 02:23 |
or small relative to the zoom level may seem
counterintuitive, but it's the way Flash works.
| | 02:28 |
So, I'm going to zoom back out to 200%
and move on to the Ink Bottle tool, which
| | 02:33 |
works similarly to the Paint Bucket tool.
Click and hold down the paint bucket
| | 02:38 |
in the toolbar, and you'll see the
Ink Bottle tool hidden underneath it.
| | 02:42 |
In the Property inspector, I'm going
to click on the color chip to open up
| | 02:46 |
the color picker and choose that Roux
Academy yellow again. And on the logo
| | 02:50 |
I'm going to click on the stroke that's around
the outside of the circle to apply the color.
| | 02:56 |
For some reason, Flash is treating the
stroke as two separate pieces and that
| | 03:00 |
happens sometimes as you work with shapes.
It's easy enough to fix. I'll just click
| | 03:04 |
on the little piece of stroke that's
still blue and change it to yellow.
| | 03:07 |
You may notice that if you have the
bottle or the top part of the ink touching
| | 03:11 |
the stroke, it won't work; you have to
have the very end of the ink spilling out
| | 03:16 |
of the bottle touch the stroke to
actually make the color change, like this.
| | 03:21 |
So here's kind of a special thing.
| | 03:23 |
The Roux logo on the right side has no stroke.
| | 03:27 |
If I use my arrow tool to click on the
blue background, you'll notice in the
| | 03:31 |
Property inspector that it shows the
blue for the background, but the stroke
| | 03:35 |
shows a gray box with a red line through it.
| | 03:38 |
This means that there's no stroke.
| | 03:40 |
The background is also a shape, as it
says in the Property inspector. So being, we
| | 03:45 |
can first use our Arrow tool to
click the pasteboard to deselect.
| | 03:49 |
Now I'm going to choose the Ink Bottle tool.
| | 03:52 |
I'm going to change the color to a light blue,
specific to the Roux brand, so it's this one.
| | 03:59 |
And I'm going to click on the edge of
the dark blue circle, and you'll see that
| | 04:03 |
Flash draws the stroke for us.
| | 04:06 |
So the Paint Bucket and the Ink Bottle
tools are easy ways to update the fill
| | 04:10 |
and the stroke of objects on your Stage.
Just remember that they're stacked on
| | 04:14 |
top of each other in the toolbar.
| | 04:16 |
From there, you simply have to pick the
color you want to apply and click on the
| | 04:20 |
fill or the stroke on the
Stage that you want to change.
| | 04:24 |
| | Collapse this transcript |
| Cleaning up with the Eraser tool| 00:00 |
The Eraser tool offers you a lot of
different ways to erase selections on the screen.
| | 00:05 |
You actually have a lot of power in
terms of modifying only the parts of the
| | 00:08 |
screen that you want.
| | 00:10 |
I've opened the file called erasing.fla,
in the exercise files for this chapter.
| | 00:14 |
And you'll see that we've got a large
size version of the logo for The Roux
| | 00:18 |
Academy of Art, Media, and Design.
| | 00:20 |
So, I'm going to select the Eraser
tool from the toolbar, which is in between
| | 00:24 |
the eyedropper and the Hand tool.
| | 00:26 |
You'll notice that the bottom of the
toolbar that we have three settings that we
| | 00:30 |
can change for the Eraser tool:
Eraser mode, Faucet, and then Eraser Shape.
| | 00:35 |
We'll talk about Faucet in just a minute.
| | 00:37 |
For now, for my Eraser Shape and Size,
I'm going to choose a smallish square size.
| | 00:43 |
For Eraser mode, I'm going to start
with Erase Normal. And the eraser with these
| | 00:49 |
settings works probably like you expect.
| | 00:51 |
It just erases everything that I drag it over.
| | 00:55 |
However, you might have noticed that
none of the words in the ring that says
| | 00:59 |
Roux Academy of Art, Media,
and Design have been affected.
| | 01:02 |
That's because the blue parts of the
logo--the background, the flower, the R--
| | 01:06 |
those are all shapes.
| | 01:08 |
You can tell when you click on
them with your Arrow tool and look in
| | 01:11 |
the Property inspector.
| | 01:14 |
The ring of words is a bunch of
letters that have been grouped together.
| | 01:17 |
I'll click on it and notice in the
Property inspector it says group.
| | 01:21 |
So, right off the bat, we've seen that
the eraser will work on shapes--and on
| | 01:25 |
drawing objects, by the way--but
it won't work on grouped objects.
| | 01:29 |
You'd have to ungroup these shapes by
going to Modify and then Ungroup for them
| | 01:33 |
to act as individual entities
and be affected by the Eraser tool.
| | 01:37 |
So, I'm going to undo my erasing, and
just so it's not confusing going forward,
| | 01:42 |
also delete the ring of letters from
around the logo so all we have on this
| | 01:46 |
Stage is just shapes.
| | 01:47 |
I'll also zoom in a little bit so it's
a little easier to see what we're doing.
| | 01:53 |
With my Eraser tool selected again,
I'm going to set my Eraser mode to Erase
| | 01:58 |
Fills. And when I erase, you'll notice
that the part of your logo that has a fill
| | 02:03 |
has been erased, but the
light-blue outline is a line.
| | 02:07 |
It's the stroke of the circle,
and that hasn't been affected.
| | 02:10 |
I'm going to undo those changes,
and here's where Faucet mode comes in.
| | 02:14 |
If I click the Faucet, it turns a
dark gray in the background, so we know
| | 02:18 |
that it's turned on. And then I'm
going to click on any part of the fills and
| | 02:22 |
it erases fields of contiguous color,
so I'm going to undo those changes and
| | 02:27 |
turn Faucet mode off.
| | 02:30 |
Now for the Eraser mode, I'll select Erase
Lines. And this does probably what you expect.
| | 02:36 |
It erases the line or the stroke
around the logo, but not the fill.
| | 02:41 |
You can see the little breaks in the lines here.
| | 02:43 |
So, I'll undo those changes and I'll
change the Eraser mode to Erase Selected Fills.
| | 02:50 |
When I try to erase something,
nothing happens, and that's because Flash is
| | 02:55 |
expecting me to select a part of the fill first.
| | 02:58 |
So, I'll use my Lasso tool to draw
a boundary around part of the logo.
| | 03:04 |
Now I'll use my Eraser tool, and you can
see that when I lift up my mouse button,
| | 03:09 |
only the parts of the fill that were
in the selection area have been erased.
| | 03:14 |
So, I'll undo one last time and
now I will choose Erase Inside.
| | 03:18 |
For this Eraser mode, you have to
actually start erasing within a fill.
| | 03:23 |
If I click and drag starting from
outside my shape and drag into it, when I
| | 03:27 |
release the mouse, nothing has been erased.
| | 03:30 |
So, I'll start everything from
within one of my light-blue petals.
| | 03:34 |
I'll erase it little bit, and then
I'll end outside, in the dark blue.
| | 03:40 |
When I release, you see that only
the light-blue parts have been erased.
| | 03:43 |
Flash recognizes the area I started
erasing in and it allows me to erase only
| | 03:48 |
inside that color field.
| | 03:49 |
So, you actually have a lot of nice
choices with the Eraser tool, in terms of
| | 03:54 |
being able to have control over what
you're erasing. That can save a lot of
| | 03:58 |
headache if you're working in very
detailed artwork and need to be precise about
| | 04:02 |
what you're erasing.
| | 04:04 |
| | Collapse this transcript |
| Drawing with the Brush tool| 00:00 |
The Brush tool offers you a variety
of different options for drawing on the
| | 00:04 |
Stage, and it works in many
ways like the Eraser tool.
| | 00:07 |
I've opened the file called
brushtool.fla in the exercise files for this chapter
| | 00:12 |
and you'll see that, again, we've got the
large size version of the logo for the
| | 00:16 |
Roux Academy of Art, Media, and Design.
| | 00:19 |
I'll select different parts of the logo
with my Arrow tool and you'll see that
| | 00:23 |
all parts of the logo have
been broken down into shapes.
| | 00:26 |
There is no groups or drawing objects here.
| | 00:29 |
So, I'll click the Stage once to
deselect and now I'll choose the Brush
| | 00:32 |
tool from my toolbar.
| | 00:34 |
Notice that it's grouped with this
Spray Brush tool, so if you don't see it at
| | 00:37 |
first, click and hold down on
the Spray Brush tool to find it.
| | 00:40 |
You'll notice at the bottom of the
toolbar there's a number of different
| | 00:44 |
settings we can adjust for the Brush
tool. Since the last setting kind of runs
| | 00:48 |
off the bottom of the screen, I'm going
to adjust to my toolbar a little bit so
| | 00:52 |
it's wider, so it's
easier to see all the options.
| | 00:55 |
In the Property inspector, you'll see that
Stroke is not responding when I click on it.
| | 01:01 |
The Brush tool works with just a
fill, so you can't change the stroke.
| | 01:04 |
I'm going to make my fill color be a dark gray.
| | 01:08 |
The other selections here in the Fill
and Stroke area don't apply for the Brush
| | 01:12 |
tool either, so you can't change them.
| | 01:14 |
So, for the options at the bottom of
the toolbar, you can choose to draw in
| | 01:19 |
Merge Drawing mode or Object Drawing mode,
just like you can for the other drawing tools.
| | 01:23 |
I want to be in Merge Drawing mode,
so I'll make sure that the icon is
| | 01:27 |
the lighter gray color.
| | 01:29 |
The Lock Fill selection is pertinent
when we're working with gradients, so refer
| | 01:33 |
to the movie about gradients
to learn more about this option.
| | 01:37 |
Here we can choose a brush size--
| | 01:39 |
I'll choose the third from
the top--and also a Brush Shape.
| | 01:44 |
I'll select this kind of diagonal brush shape.
| | 01:47 |
Now for a Brush mode, I'll choose
Paint Normal. And when I use the Brush tool
| | 01:52 |
with these settings, it works
probably just like you'd expect.
| | 01:56 |
The Brush tool just draws wherever I drag it.
| | 01:59 |
Notice in the Property inspector that
the Smoothing is set to 50. If I change
| | 02:04 |
this to 0 and draw again, the line is
more like exactly what I draw with my
| | 02:08 |
shaky hand trying to draw with the mouse.
| | 02:11 |
With smoothing, that same shape is
smoothed out a little bit for me, so
| | 02:14 |
I'll change it back to 50. So I'll
undo those lines and now under the Brush
| | 02:20 |
mode, choose Paint Fills.
| | 02:23 |
When I paint this time, you'll notice
that the line only appears over parts
| | 02:27 |
where there's a fill.
| | 02:28 |
The blue outline around the logo is a
stroke, so it doesn't color over that part;
| | 02:34 |
it colors behind it. I'll undo that change
and now for Brush mode choose Paint Behind.
| | 02:40 |
I'll draw across the middle of the
graphic, and it works just like the name
| | 02:43 |
implies; it only paints behind.
| | 02:45 |
I am going to try again along the
right edge and make maybe a drop shadow.
| | 02:52 |
It's actually kind of hard to do.
| | 02:53 |
I would probably not use this to draw drop shadow.
| | 02:55 |
I'd use a filter, which we'll talk
about in a different movie, but for now you
| | 02:59 |
get the point about paint behind.
| | 03:01 |
So, I'll undo those lines and now
I'll choose Paint Selection and when I
| | 03:07 |
draw, nothing happens.
| | 03:09 |
I have to select an area of the logo
first, so I'll use my arrow to select one
| | 03:14 |
of the leaves, and then I'll
grab the Brush tool again and paint.
| | 03:20 |
When I release my mouse, you'll see
that the color has been applied only where
| | 03:24 |
it touched the area of the screen that I
selected first. So I'll Undo that as well
| | 03:29 |
and now I finally choose Paint Inside.
| | 03:32 |
So, I'll start drawing in the dark part of
the logo, crossing into the light-blue leaf.
| | 03:38 |
When I lift my mouse, you'll see that
flash recognizes the dark-blue part of the
| | 03:42 |
logo as the area I started painting
in first, and it doesn't let the line
| | 03:46 |
continue into the light blue.
| | 03:48 |
If I start within the light-blue area
and trace along the edge, I can draw in
| | 03:52 |
the light blue but not the dark.
| | 03:55 |
I could use that to maybe stylize the
leaves of the logo if I drew carefully
| | 03:59 |
enough, or not; I don't have a very
steady hand. But you can see that the Brush
| | 04:06 |
tool offers you a lot of options for
controlling where it draws, as well as the
| | 04:10 |
shape and smoothing of the lines.
| | 04:13 |
| | Collapse this transcript |
| Sampling color with the eyedropper| 00:00 |
The Eyedropper tool offers you a handy
way to be able to pick out colors from
| | 00:04 |
within your Flash pieces.
| | 00:06 |
To demonstrate how this works, I'll be
working with a file called eyedropper.fla
| | 00:10 |
in the exercise files with this chapter.
| | 00:13 |
In it we have a logo for kinetEco, our
fictional alternative energy company.
| | 00:18 |
Let's say I want to make this yellow
circle in the logo the same color as the blue
| | 00:23 |
but I don't know exactly what color the blue is.
| | 00:26 |
The Eyedropper tool can help me. So I'll
select it in the toolbar, and it's below
| | 00:30 |
the Paint Bucket tool.
| | 00:32 |
Now when I click the blue circle
with the eyedropper, the blue color is
| | 00:35 |
automatically updated as the
fill color in my toolbar and in the
| | 00:39 |
Property inspector.
| | 00:41 |
Notice also that Flash changes the
icon of the eyedropper to a paint bucket.
| | 00:46 |
I can then use that paint bucket to
change the fill of the yellow circle to
| | 00:49 |
the blue, instead of having to go and select
the Paint Bucket tool out of the toolbar myself.
| | 00:54 |
The blue color remains in
the fill of the toolbar.
| | 00:57 |
So, now if I went and picked some other
drawing tool, like the Rectangle tool, I
| | 01:02 |
could a draw blue rectangle or some
other shape that matches the blue icon.
| | 01:06 |
I'm just going to undo that shape.
| | 01:09 |
There is another way that the
Eyedropper tool works that's useful as well.
| | 01:14 |
So I'll choose the Eyedropper tool
again and then click once on the color chip
| | 01:18 |
with the fill in the toolbar.
| | 01:21 |
The color picker opens up and I can
mouse over any of the colors in the color
| | 01:25 |
picker and select a color this way.
| | 01:27 |
Notice how it shows at the top of the
color picker with the hex number for that
| | 01:31 |
color is, so I can see it and
have it for later reference.
| | 01:35 |
That hex number continues to appear when I
mouse over any of the colors on the Stage.
| | 01:40 |
The Eyedropper tool in this
mode is like Super-Eyedropper tool.
| | 01:43 |
You can even mouse over areas in the
window and the chrome or Flash and the
| | 01:47 |
eyedropper will pick it up.
| | 01:49 |
Here it is picking up the orange
color in this icon here at the top.
| | 01:53 |
So the Eyedropper tool offers you a
quick and easy way to pick up colors in your
| | 01:57 |
Flash movie so you can use them again
and maintain an overall color-coordinated look
| | 02:02 |
in your Flash pieces.
| | 02:04 |
| | Collapse this transcript |
| Using the Color and Swatches panels| 00:00 |
The Color and Swatches panels are
often used in conjunction with each other.
| | 00:04 |
If you have the default layout of Flash,
the color palette is indicated by this
| | 00:09 |
mini-icon of a palette
| | 00:11 |
in the Swatches panel, by this icon
that looks like a grid of squares.
| | 00:15 |
If you don't see them here, you can
find them by going to the Window menu and
| | 00:18 |
then choosing Color or Swatches.
| | 00:21 |
You can click on either one of
the icons to access both panels.
| | 00:25 |
As you can see, they're grouped
together, and you can easily toggle back and
| | 00:29 |
forth between them by clicking
on the labeled tabs at the top.
| | 00:33 |
The Color panel is a useful tool for
creating or re-creating specific colors for
| | 00:38 |
use in your Flash movies.
| | 00:39 |
The Swatches panel is
basically like a library of colors.
| | 00:43 |
It comes with a bunch of default
web-safe colors that you can choose from, and
| | 00:47 |
you can add your own custom colors as
well, which we'll do in just a moment.
| | 00:52 |
Before we start working, I'm going to
drag the Color and Swatches panel set out
| | 00:56 |
from the Flash chrome and expand them
so they stay open while we're working.
| | 01:00 |
So with the Color panel, you can define the
fill and stroke colors that you want to use.
| | 01:08 |
If I click on the pencil icon,
I can define a stroke color.
| | 01:11 |
So I'll just click in the
color area below and pick green.
| | 01:16 |
If I click the Paint Bucket
icon, I can define a fill color.
| | 01:20 |
I'll slide this slider down
and choose a lighter green.
| | 01:25 |
Notice that when I choose a color
the color is updated at the bottom of the
| | 01:29 |
toolbar over on the bottom right side
of the screen, and is also shown at the
| | 01:33 |
bottom of the Color panel.
| | 01:35 |
The hexadecimal value for the color is
also displayed, as are the corresponding
| | 01:40 |
values for the color, with hue,
saturation, and brightness, as indicated by H, S
| | 01:46 |
and B, as well as the red, green, and
blue channels, indicated by R, G and B. I'm
| | 01:50 |
going to click the radio button next to G
for green and move this slider up and down.
| | 01:56 |
You can see the in the color window at
the bottom how the new color looks in
| | 02:02 |
comparison to the old color.
| | 02:04 |
The numerical values and the
hexadecimal values for the amount of green
| | 02:07 |
update as I slide as well.
| | 02:09 |
I could also type in the
value for a desired color.
| | 02:12 |
I'll type in 0 for R, 0 for G, and 255
for B, and I'll get a pure, bright blue.
| | 02:21 |
Notice also the value with the label
of A. This indicates the alpha value of
| | 02:26 |
my color, or opacity.
| | 02:27 |
100% is totally opaque
and 0 is totally transparent.
| | 02:32 |
So I'll type in 50 here
and hit Enter on my keyboard.
| | 02:36 |
You can see how the color changes in
the Preview window. And I'll quickly grab
| | 02:40 |
my Rectangle tool and draw
a rectangle on the Stage.
| | 02:46 |
And of course, it's filled with the
blue color that I can see through, since
| | 02:49 |
it's partially transparent.
| | 02:51 |
I'm just going to delete that rectangle.
| | 02:53 |
In the color palette, I'm going to
change my alpha back to 100, and now,
| | 02:59 |
back near at the top, I'm going to click on
this icon with the black and white squares.
| | 03:05 |
This sets the stroke to
black and the fill to white.
| | 03:08 |
If I click the rightmost icon, the
Swap Colors icon, it changes the colors so
| | 03:13 |
the stroke is white and the fill is black.
| | 03:15 |
I'm going to swap these one more time so
we have a black stroke with a white fill.
| | 03:20 |
Now I'll click on the paint bucket so
I can modify the fill and click on the
| | 03:25 |
icon of the white rectangle
with the red line drawn through it.
| | 03:29 |
This indicates that there
will be no color for the fill.
| | 03:32 |
Notice how the color box in all the
controls at the bottom have gone away.
| | 03:36 |
In the Color Type dropdown here, it
says None, since we don't have any kind of
| | 03:40 |
fill at all. And if I draw a rectangle,
it's got a black stroke with no fill.
| | 03:45 |
I'm going to delete that rectangle.
| | 03:48 |
So the Color panel is a great way to
mix up new colors or type in the values of
| | 03:52 |
colors that you know you want to use,
| | 03:53 |
but what if you want to be able
to save those colors for later?
| | 03:57 |
That's where the Swatches panel comes in.
| | 04:00 |
You can see how the Swatches panel has a
whole bunch of web-safe colors loaded in for you.
| | 04:05 |
To save the custom color, I'll go back
to the Color panel, and in the dropdown
| | 04:09 |
menu, I'll choose Solid color.
| | 04:12 |
We'll explore the other options of
Linear gradient, Radial gradient, and Bitmap
| | 04:17 |
fill in a different movie.
| | 04:19 |
So I'm going to pick a custom color and
then flip over to the Swatches panel again.
| | 04:24 |
As I hover over the gray empty part of
the panel with my mouse, you'll notice
| | 04:28 |
the cursor's changed to a paint bucket,
and when I click, my custom color is
| | 04:32 |
added to the swatches at the lower
left-hand corner, on the bottom row.
| | 04:37 |
Now when I click on a drawing tool like
the Rectangle tool, notice that the new
| | 04:41 |
color is now available in the color
pickers for the stroke and the fill, both in
| | 04:45 |
the toolbar and in the Property inspector.
| | 04:51 |
You can use the Eyedropper tool in
conjunction with the Swatches palette to
| | 04:55 |
build a custom color palette that you
can use for creating new graphics that use
| | 04:59 |
the same color scheme.
| | 05:01 |
First, in the Colors panel, I'll click
the paint bucket so Flash knows that
| | 05:05 |
we're talking about fills, not stroke.
| | 05:08 |
Now I'll pick the Eyedropper tool and
select this yellow color in the kinetEco logo.
| | 05:13 |
Now open the Swatches panel again,
wait for the mouse to turn into the paint
| | 05:17 |
bucket, and click to drop in my new swatch.
| | 05:20 |
Actually, it already put it in there for us.
| | 05:22 |
I'm going to do this again for the brown color.
| | 05:28 |
In this way, you can build a custom
palette in your Swatches panel so you
| | 05:32 |
can use those colors to create color-
coordinated graphics in future Flash documents.
| | 05:37 |
You can even save these
colors to be used in another FLA.
| | 05:41 |
In the Swatches panel, if I click on
this icon of the arrow pointing down, I
| | 05:45 |
get the context menu.
| | 05:47 |
If I pick Save Colors, I can save my
palette as a .clr file, or a Flash color file.
| | 05:54 |
You could also choose a color table file, or ACT.
| | 05:57 |
I'm going to choose CLR and save
my color palette to the Desktop.
| | 06:06 |
Now I can start a new blank FLA file,
and then in the Swatches panel, go to the
| | 06:11 |
context menu and choose Add Colors.
| | 06:15 |
Now I can navigate to my CLR file
and load in those colors into this FLA
| | 06:20 |
so I have my custom colors
available to me here, and there they are.
| | 06:27 |
I'm going to close this FLA
and return to the previous one.
| | 06:35 |
If you're going to make a custom color
palette, I would recommend first getting
| | 06:39 |
rid of the standard colors first.
| | 06:42 |
You can do this by going to the Swatches
panel context menu and choosing Clear Colors.
| | 06:49 |
Here, now I just have black, white, and a
gradient swatch that goes from white to black.
| | 06:54 |
Now I'm going to add in a few custom colors.
| | 07:06 |
From here, I could save my CLR file.
| | 07:17 |
Now, when I load in the CLR file in a
new document by choosing Add Colors, I'll
| | 07:22 |
be loading in just the custom colors,
instead of the entire standard color set.
| | 07:28 |
Notice the other choices in the context menu.
| | 07:31 |
I could load default colors, which
gives me the standard color palette.
| | 07:34 |
That's the very default in every new document.
| | 07:38 |
Notice that blew away my custom colors,
but I could load those in again by
| | 07:42 |
choosing Add Colors and
navigating to my CLR file.
| | 07:52 |
I could also save as default.
| | 07:55 |
Flash will ask me if I'm sure I want
to save the current color palette as the
| | 07:59 |
default for all documents.
| | 08:00 |
I don't want to right now, so I'll say No.
| | 08:05 |
You can also sort your swatches by
color, and you can also replace colors.
| | 08:11 |
So this is basically where I can
navigate to my CLR file again and load that
| | 08:15 |
in instead of the palette I've got.
| | 08:18 |
Finally, if there's a swatch that you
don't want anymore, you can click on it
| | 08:21 |
once and then choose Delete Swatch.
| | 08:27 |
You can also choose a swatch and
duplicate it if you want a copy of it.
| | 08:31 |
You can also add custom gradients to
your Swatches panel, and we'll look at how
| | 08:35 |
to do that in another movie.
| | 08:37 |
So the Color and Swatches panels
give you a lot of control in terms of
| | 08:40 |
creating and saving colors.
| | 08:42 |
You can also use them in conjunction
with the Eyedropper tool to create a
| | 08:46 |
custom palette of colors that you
can save and reuse in other FLA files.
| | 08:51 |
| | Collapse this transcript |
| Working with gradients and the Gradient Transform tool| 00:00 |
Gradients are a great way to add some
depth to your visual assets in Flash.
| | 00:04 |
The Gradient Transform tool allows you
detailed control on how your gradients look.
| | 00:09 |
So let's take a look at how these work.
| | 00:11 |
I am going to start by opening the file
called gradients.fla from the exercise
| | 00:15 |
files for this chapter.
| | 00:16 |
I am going to save it
right away into the end files.
| | 00:19 |
You can see that we've got two layers
in the movie. The first contains our
| | 00:23 |
elephant and we are not going to
change him, so that layer can stay locked.
| | 00:27 |
The background layer is currently blank.
| | 00:29 |
So I am going to click once on the
background layer in the Timeline so I
| | 00:33 |
can draw a shape here.
| | 00:34 |
Now I am going to click on the
Rectangle tool and for the fill, I am going to
| | 00:38 |
choose a nice green color.
| | 00:40 |
The Stroke I am going to leave at No Stroke.
| | 00:43 |
And I am just going to draw a shape on
the Stage so our elephant has a nice
| | 00:47 |
grassy place to walk.
| | 00:48 |
Of course, it's not the right size, so
I am going to click on it once with my
| | 00:51 |
Arrow tool and move the X and Y to 00,
the Width to be 550, and a Height to 400
| | 01:00 |
to match our Stage dimensions.
| | 01:01 |
Now with the green rectangle selected,
I am going to click to open my Color panel.
| | 01:06 |
We will see in the Color Type dropdown,
Solid Color is selected, which makes sense;
| | 01:12 |
we have a solid green rectangle.
| | 01:14 |
Now I am going to change the
dropdown to Linear Gradient.
| | 01:17 |
You will see now that we have a gradient
blend of two colors that go from one into another.
| | 01:23 |
Our green color got blown away, but that's okay.
| | 01:26 |
You can click on these little
crayon-looking things to change the colors that they use.
| | 01:30 |
So for instance, I'll change my black
back to green and I'll change the white to
| | 01:38 |
a lighter green color.
| | 01:42 |
You can slide the gradient preview to
change how much relative area one color uses.
| | 01:47 |
And you see that it
updates on the Stage right away.
| | 01:49 |
I am just going to set it
back to the way that it was.
| | 01:55 |
And now if you want more colors in
your gradient, make sure your shape
| | 01:58 |
is selected and then just click below the
gradient preview to add more color points.
| | 02:03 |
I'll add one and change its
color to something like blue.
| | 02:07 |
So now our elephant has Kentucky bluegrass.
| | 02:10 |
You can add multiple color points to
your gradient and change the color on each.
| | 02:14 |
If you've got too many, click a color point
and drag it off the panel to get rid of it.
| | 02:19 |
I am just going to get rid of all my
extra color points, so we just go from the
| | 02:23 |
lighter green to the darker green again.
| | 02:26 |
So if you really like your gradient and
you want to keep it for later, make sure
| | 02:30 |
your Shape is selected on the Stage
and then pop open the Swatches panel.
| | 02:34 |
The mouse cursor turns into the paint
bucket when I mouse over the gray area.
| | 02:38 |
And you can click to add the gradient to
the Swatches panel to use anytime you want.
| | 02:43 |
So I am going to open my Color panel
by clicking on the Color tab again.
| | 02:47 |
And you'll notice that while we're
working with gradients there are these
| | 02:51 |
options next to Flow.
| | 02:53 |
They are Extend color,
Reflect color, and Repeat color.
| | 02:58 |
These give you control over how
the gradient looks when using the
| | 03:01 |
Gradient Transform tool.
| | 03:03 |
So let's see how that works.
| | 03:05 |
With my green shape still selected, in
the toolbar, I will click and hold on the
| | 03:09 |
Transform tool until flyout menu opens,
| | 03:11 |
and then I'll choose the
Gradient Transform tool.
| | 03:16 |
You use the Gradient Transform tool to
change the way the gradient is applied.
| | 03:20 |
So notice I can click and drag the box
with the arrow in it to scale the gradient.
| | 03:24 |
I can scale it out and scale it back in.
| | 03:31 |
Clicking and dragging on the circle
control, I can rotate my gradient around.
| | 03:35 |
I am just going to undo that change.
| | 03:40 |
Grabbing the control point in the center,
I can move the origin of the gradient,
| | 03:43 |
so I will just move it
way over here to the left.
| | 03:45 |
And I am just going to undo that change.
| | 03:49 |
So the back on the Color panel, notice
how the Flow option is set to Extend Color.
| | 03:55 |
What this affects is the change in the
gradient in between the two lines that
| | 03:59 |
control the scale of the gradient.
| | 04:01 |
I am going to make sure that I have got
my Gradient Transform tool selected and
| | 04:05 |
click on the gradient.
| | 04:07 |
Notice that if I scale the gradient out
bigger or a little bit smaller, the
| | 04:11 |
gradient is applied in between the lines.
| | 04:14 |
It becomes really obvious
when I scale it very small.
| | 04:17 |
Notice how the light green continues on
out to the right of the right blue line.
| | 04:22 |
The darker green continues on out
to the left of the left blue line.
| | 04:26 |
Now I am going to change my Flow to
Reflect, and notice how the gradient
| | 04:31 |
reflects itself at the blue lines.
| | 04:35 |
If I change the Flow to Repeat,
the gradient repeats left to right across the shape.
| | 04:40 |
I am just going to change
it back to Extend Color.
| | 04:43 |
So now let's try changing our
Gradient Type dropdown to Radial.
| | 04:49 |
You will that the gradient now
radiates out from the middle instead of going
| | 04:53 |
from one side to the other.
| | 04:55 |
I think I'm going to swap the
positions of the color markers to change the
| | 04:58 |
gradient flow so that the
light green is in the middle.
| | 05:01 |
I am going to close the Color panel, and
I can still scale my Gradient using the
| | 05:11 |
little circle with the arrow pointing out.
| | 05:15 |
I can stretch it out really far--oops,
stretched it out too far--or I can bring it back in.
| | 05:24 |
The circle with the arrow
rotates the gradient around.
| | 05:27 |
That doesn't seem to make much sense for a
radial gradient, since it's already round.
| | 05:31 |
By using the control that looks like a
square with an arrow in it allows me to
| | 05:37 |
stretch the gradient in one direction,
or flatten it out so the green part now
| | 05:41 |
looks a little bit flatter.
| | 05:43 |
Now when I rotate the gradient around,
you can see the difference that it makes.
| | 05:47 |
Just as with the linear gradient,
the circle control in the middle of the
| | 05:51 |
Gradient Transform tool allows you to
move the center point of the gradient.
| | 05:54 |
So I am going to have that
light-green part start at the upper-left of the
| | 05:58 |
screen instead of smack in the middle.
| | 06:00 |
I think it makes it looks more like the
sun is shining strongly on the upper-left.
| | 06:04 |
So gradient fills are a way to add
multicolor backgrounds that transition
| | 06:08 |
smoothly from color to color onto your objects.
| | 06:11 |
Remember that you create
these in the Color panel.
| | 06:14 |
The Gradient Transform tool, which is
located underneath the Free Transform tool
| | 06:18 |
in the toolbar, allows you to
affect how that gradient appears.
| | 06:22 |
| | Collapse this transcript |
| Using the Lock Fill modifier with gradients| 00:00 |
There's a really cool thing you can do
with gradients and the Paint Bucket and
| | 00:03 |
Brush tools that we've
alluded to in other movies.
| | 00:06 |
So we'll use that here to give the
elephant some lakes and ponds to drink water from.
| | 00:11 |
I've started by opening the file called
lockFillGradient.fla from the exercise
| | 00:15 |
files for this chapter, and I've saved
it into the end file for the chapter.
| | 00:20 |
So we've got an elephant
layer and a background layer.
| | 00:22 |
We're going to create some pools of water,
| | 00:25 |
so I'm going to lock my background layer,
and I'll create a new layer and call it Lakes.
| | 00:30 |
Now I'm going to grab my Oval tool,
give it no stroke, and for the Fill choose
| | 00:37 |
the blue gradient that's at
the bottom of the color picker.
| | 00:41 |
This is going to be water
| | 00:42 |
so I don't want it to go from blue to black;
| | 00:44 |
I want it to go from blue to white.
| | 00:46 |
So I'll pop open the Color panel and
double-click the black color marker
| | 00:51 |
and change it to white.
| | 00:53 |
We'll just leave the
dropdown here at Radial gradient.
| | 00:55 |
So I'll click my Color panel to close and
then I'm going to draw three lakes on the screen.
| | 01:01 |
Now I'm going to use the Arrow tool to click
and drag around all three ovals to select them.
| | 01:18 |
Now I'm going to select the Paint Bucket tool.
| | 01:20 |
At the bottom of the toolbar,
there's an icon to lock fill.
| | 01:24 |
I'll select that, and what this is going
to do when I click on one of the lakes
| | 01:28 |
is have the gradient fill be
applied across all three of them at once.
| | 01:32 |
So now I'm going to select the Gradient
Transform tool and click on one of the lakes.
| | 01:39 |
What we've done is going to be really
apparent as I change how the gradient flows.
| | 01:43 |
Right now the gradient is really, really huge,
| | 01:46 |
so I'm going to make it a little bit smaller.
| | 01:48 |
I'm going to make it even smaller, and
now I'm going to move the origin point of
| | 01:55 |
the gradient towards the middle.
| | 02:01 |
You can make more changes than this if
you want, but the point is to see that by
| | 02:04 |
selecting all three lakes and using
the Lock Fill option on the Paint Bucket
| | 02:08 |
tool, a single gradient has been
applied across all three of the shapes.
| | 02:13 |
The Brush tool can do a similar thing.
| | 02:14 |
I'm going to lock my Lakes layer and
add a new layer above it and call it
| | 02:18 |
Puddles, and I'm going to select the Brush tool.
| | 02:22 |
I'm going to make sure Lock Fill is on,
which it is--I can tell because it has
| | 02:26 |
kind of the darker gray background behind it.
| | 02:29 |
I'm going to choose Paint Normal for
the brush mode and make sure I like the
| | 02:33 |
shape and size of the brush.
| | 02:34 |
Now I'm going to draw some little puddles,
and as I draw, it looks like a single
| | 02:45 |
gradient is being applied
across all three of the puddles.
| | 02:52 |
When I choose the Gradient Transform
tool and click, I can affect the gradient
| | 02:56 |
that goes across all of these puddles as well.
| | 02:59 |
Again, it's a super-giant gradient,
| | 03:06 |
so I'm going to start by just shrinking it down.
| | 03:08 |
I'm going to move the origin point.
| | 03:15 |
You can see that it's using a
different gradient than the one for the lakes.
| | 03:18 |
So I'm not going to mess around with
this too much more, but it can be a
| | 03:23 |
really cool effect.
| | 03:24 |
Just remember to deselect Lock Fill next
time you use the Paint Bucket or the Brush tool.
| | 03:29 |
There's one last option for gradient fills,
and it's not really a gradient at all.
| | 03:34 |
So I'm going to lock my Puddles layer and
I'm going to unlock the Background layer.
| | 03:37 |
I'm going to use my Arrow tool to
select my green gradient background.
| | 03:42 |
Now in the Color panel, I'm going to
change the Color type dropdown to Bitmap fill.
| | 03:49 |
So I can use a bitmap to fill up my
shape instead of solid colors or gradients.
| | 03:55 |
Flash asks me to identify
the fill that I want to use,
| | 03:59 |
so I'm going to navigate to
our jungle_background JPEG
| | 04:02 |
that's in the start folder in
exercise files for this chapter.
| | 04:05 |
I'm going to click Open and now
the bitmap is now the background.
| | 04:10 |
Notice, however, that now while it's
selected, it's covered with that stippled
| | 04:15 |
white-dot pattern, and when I look in
the Property inspector, it shows that
| | 04:19 |
the fill is a shape.
| | 04:21 |
So Flash has taken my bitmap image
and broke it down into shapes.
| | 04:25 |
And just so you know,
I wouldn't necessarily do it this way.
| | 04:28 |
If I wanted the background to be the
jungle image, I'd just import the bitmap
| | 04:31 |
into Flash and place the bitmap onto the Stage.
| | 04:34 |
But you can see how a bitmap can be used
as the fill for a shape, and that could
| | 04:38 |
be useful as a way to add
interesting textures to your shapes on Stage.
| | 04:42 |
Indeed, with the Bitmap fill still
selected, if you open up the fill color chip
| | 04:47 |
in the Property inspector, you'll
see the jungle as a choice for fills.
| | 04:51 |
So you could use the jungle for a fill for
any other shape that you draw from here on out.
| | 04:56 |
So I'm going to click on
the pasteboard to deselect.
| | 04:59 |
Using the Lock Fill setting with the
Paint Bucket and the Brush tools allows you
| | 05:03 |
to apply a single gradient
across multiple shapes on the Stage.
| | 05:07 |
The Gradient Transform tool allows
you to transform that gradient across
| | 05:11 |
the multiple shapes.
| | 05:12 |
| | Collapse this transcript |
| Creating shapes with the Pen tool and working with anchor points| 00:00 |
The Pen tool allows you to
draw complex shapes in Flash.
| | 00:04 |
If you've used the Pen tool in other
applications like Adobe Photoshop or Adobe
| | 00:07 |
Illustrator, you're in luck, because
the Pen tool in Flash works the same way.
| | 00:12 |
All the keyboard shortcuts are the same as well.
| | 00:14 |
So we have our elephant here, and I'm
going to use the Pen tool to draw him a
| | 00:18 |
pool of water to drink.
| | 00:20 |
So I'll select the Pen tool from the
toolbar, and just notice that it also has
| | 00:24 |
a flyout menu with the Add Anchor
Point, Delete Anchor Point, and Convert
| | 00:29 |
Anchor Point tools.
| | 00:30 |
So you'll see in the Property inspector
that the Pen tool doesn't have a fill color;
| | 00:35 |
It only works with a stroke color.
And we're going to leave ours at black with
| | 00:39 |
a 1-point stroke is fine, and
I'll this in Merge Drawing mode
| | 00:44 |
so the icon here at the bottom is the
lighter gray instead of the darker gray.
| | 00:48 |
One way to work with the Pen
tool is to point and click.
| | 00:51 |
Then I'll just move my mouse and point
and click again, all the way around a circle.
| | 00:56 |
You'll notice that all the lines are straight.
| | 00:59 |
To close my shape, I just click again
on the first anchor point that I created.
| | 01:03 |
So now I'm going to hit Ctrl+Shift+A
on my keyboard to deselect the shape--
| | 01:10 |
that's Command+Shift+A on a Mac--and
look at the shape. And it's a little
| | 01:16 |
unrealistic for a pool of water,
| | 01:17 |
so I'm going to hit Ctrl+A on my
keyboard to select all and delete it.
| | 01:22 |
Fortunately, the Pen tool also allows you
to draw curved lines using Bezier curves.
| | 01:27 |
A Bezier curve uses a mathematical
equation to describe the curve of the line.
| | 01:32 |
So to take advantage of this,
I'll click with the Pen tool once to create my
| | 01:37 |
first anchor point and then click
and hold down the mouse to create the
| | 01:41 |
second anchor point.
| | 01:45 |
As I hold down my mouse and move it back
and forth, you'll see these handles appear.
| | 01:50 |
As I continue to move my mouse, you'll see
how the handle affects the curve of the line.
| | 01:54 |
You can drag those handles way out as well
to change how they affect the Bezier curve.
| | 01:59 |
So I'm going to fix my line so I like
this first curve and then release the
| | 02:05 |
mouse and click and drag to
make the next point with handles.
| | 02:09 |
I'll repeat this process all the way around
the water hole so we have a nice round pool.
| | 02:14 |
I'll click once on my starting anchor
point to close my shape and now I'll
| | 02:20 |
deselect everything.
| | 02:23 |
If you want to change your shape
after you've drawn it, you can use the
| | 02:26 |
Subselection tool, which is the
white arrow in the toolbar underneath the
| | 02:29 |
regular Selection tool.
| | 02:30 |
You can click on any of the anchor points
you've created and moved the point around.
| | 02:38 |
You'll also notice that the handles reappear.
| | 02:40 |
If you approach the end of a handle
with the mouse, the cursor changes to a
| | 02:44 |
little black arrow, allowing you to
grab the handle and adjust the curve.
| | 02:48 |
So I'll move this handle
back and forth a few times.
| | 02:51 |
Now I'm going to hold down Alt on the keyboard--
| | 02:53 |
that would be Option on the Mac--and
you'll notice that this constrains my
| | 02:57 |
handles so that the movement of the mouse
only affects one side of the handles, not both.
| | 03:01 |
So you can use that for really detailed control.
| | 03:08 |
So I'll release the mouse, and you can
also move the entire shape using the
| | 03:12 |
Subselection tool if you wish, by
grabbing a portion of the stroke in between two
| | 03:15 |
anchor points and dragging.
| | 03:18 |
So now I'll go back to the toolbar
and choose the Add Anchor Point tool.
| | 03:23 |
When I click on the line
I now have a new anchor point.
| | 03:27 |
The Delete Anchor Point tool
does just what the name implies:
| | 03:30 |
I can choose it, click on
any anchor point, and delete it.
| | 03:34 |
So I'll switch back to my Subselection arrow.
| | 03:36 |
Now when I click on the anchor points
around the entire circle, you'll notice
| | 03:40 |
the handles on them for
controlling the Bezier curves.
| | 03:44 |
When I click the very first point that
I drew, you'll notice that it doesn't
| | 03:48 |
have any handles on it.
| | 03:49 |
I didn't click and drag
when I made this anchor point;
| | 03:52 |
I just clicked, so it doesn't
have any Bezier curves or handles.
| | 03:55 |
If you want to change an anchor point
from a straight angle to a curved angle,
| | 04:00 |
you just select the Convert Anchor
Point tool in the flyout menu and then click
| | 04:04 |
and drag on the anchor point in
question and now you have control handles.
| | 04:10 |
With my shape still selected, if I
switch back to the Pen tool and hover over
| | 04:14 |
the edge of the shape, you'll notice the
cursor now has a little plus sign next to it.
| | 04:19 |
When I click on the line, I get a new
anchor point, just as if I was using Add
| | 04:23 |
Anchor Point tool from the flyout menu.
| | 04:26 |
When you approach other anchor points
with the mouse, the cursor can also show a
| | 04:29 |
minus sign or an angle, equivocating the
Delete Anchor Point and Convert Anchor
| | 04:34 |
Point tools as well.
| | 04:35 |
So I'm going to deselect my shape and
now that we've got a pool of water, I'll
| | 04:39 |
select my Paint Bucket tool, choose a
blue color, and fill in the pool so our
| | 04:43 |
elephant can have a drink.
| | 04:46 |
So the Pen tool--as well as the Add,
Delete, and Convert Anchor Point tools--allow
| | 04:51 |
you to create artwork that connects lines
and even utilize Bezier curves to make
| | 04:55 |
lines look more realistic.
| | 04:57 |
| | Collapse this transcript |
| Selecting with the Lasso tool| 00:00 |
The Lasso tool provides you several
options for selecting objects, or parts of
| | 00:04 |
objects, on the screen.
| | 00:06 |
I'm going to be working in the file called
lasso.fla from the exercise files for this chapter.
| | 00:12 |
You can see that we've got a bitmap
layer which is locked and has the visibility
| | 00:16 |
turned off. We'll work
with that in just a minute.
| | 00:18 |
Here on the shapes layer I'll click on
the yellow circle, and you can see in the
| | 00:22 |
Property inspector that this is a shape;
| | 00:25 |
it's not a drawing object or a group.
| | 00:27 |
When I click on the three
overlapping circles, we see that they move
| | 00:31 |
around together as a unit.
| | 00:33 |
This is a group. It's basically three
circle shapes that were grouped together by
| | 00:37 |
going to the Modify menu and then
choosing Group. I'm going to click the pasteboard to
| | 00:41 |
deselect everything.
| | 00:43 |
Now I can use the Lasso tool to
select part or all of these circles.
| | 00:47 |
I'll choose the Lasso tool, which is the
fifth item from the top in the toolbar.
| | 00:53 |
If I draw a rough circle on the Stage with
the Lasso that covers part of the circle
| | 00:57 |
shape and the circle group,
| | 00:59 |
you'll see that the part of the circle
shape that falls within the lines I drew
| | 01:02 |
is selected. Even though I only drew
my selection boundary over part of the
| | 01:07 |
circle group, the entire group is selected.
| | 01:10 |
So now I want to deselect everything,
and instead of grabbing my Arrow tool and
| | 01:17 |
clicking on the pasteboard, I'm
going to deselect everything by pressing
| | 01:20 |
Ctrl+Shift+A on my keyboard.
Of course on the Mac that would be
| | 01:25 |
Command+Shift+A. Now with my Lasso tool
still selected, down in the Options area,
| | 01:31 |
at the bottom of the toolbar, I'm going
to click on the Polygon mode icon, which
| | 01:35 |
is the bottommost icon.
| | 01:38 |
Now when I use the Lasso tool, when I
click, I get straight lines. Every time I
| | 01:42 |
click my selection area is expanded.
| | 01:44 |
So I'm going to draw multiple lines to
select kind of the same area I did as before.
| | 01:50 |
Notice that even though the end of my
last line and the start of my first line
| | 01:54 |
don't meet, I can still close out
my selection by double-clicking.
| | 01:58 |
You can see that now we've got our selection.
| | 02:00 |
So, I'm going to deselect everything
again by pressing Ctrl+Shift+A, and I'm
| | 02:05 |
going to deselect Polygon mode.
| | 02:08 |
Now I'm going to click on the other option
for the Lasso tool, which is the Magic Wand tool.
| | 02:13 |
It's the top option.
| | 02:14 |
The magic wand works pretty much the
way it does in image editing programs
| | 02:18 |
like Adobe Photoshop;
| | 02:19 |
it allows you to click on a color on the Stage
and it will select all areas of similar color.
| | 02:24 |
So I'll go to select some of my yellow
circle and you'll see that, hey, my Lasso
| | 02:29 |
tool looks like it did before, and
indeed, if I draw a circle on the Stage, the
| | 02:33 |
tool works like it did before.
It's not working in Magic Wand mode.
| | 02:38 |
The thing is that the magic wand in Flash
works for bitmap images that have been
| | 02:42 |
broken apart. So I'll show you what I mean.
| | 02:45 |
If you lock and turn off the visibility
of the shapes layer and then turn on the
| | 02:51 |
visibility and unlock the bitmap layer,
you'll see that we have a bitmap image.
| | 02:55 |
I'll grab my Arrow tool and click on it.
| | 02:58 |
You'll see in the Property
inspector it says Bitmap.
| | 03:01 |
So the Lasso tool is not going to do
much with this bitmap the way it is.
| | 03:05 |
What we have to do first is select
the image and then go to the Modify menu
| | 03:09 |
and choose Break Apart.
| | 03:13 |
At this point we see in our Property
inspector that we've got one giant shape.
| | 03:17 |
You can manipulate it just like
you can any other vector shape in Flash.
| | 03:21 |
For instance, I can click the pasteboard
to deselect and then click and drag the
| | 03:25 |
edges and move them like so.
I'm going to undo that change.
| | 03:30 |
Now when I select my Lasso tool,
I'll make sure the Magic Wand option is
| | 03:34 |
selected--it should look dark gray--and
when I hover over the image, the cursor
| | 03:39 |
now looks like a wand. I'll click on
this leaf and you'll see that the leaf and
| | 03:44 |
other greens in the image that are similar
enough to it are selected--it's a lot of them.
| | 03:48 |
I'm going to deselect and in the tool
options area click on the Magic Wand Options icon.
| | 03:55 |
Opening up Magic Wand Settings again, if
I choose between Pixels, Rough, Normal,
| | 04:00 |
and Smooth in the dropdown will also
affect the range of variation that the
| | 04:05 |
magic wand includes, and you can play
with those if you want to experiment with
| | 04:09 |
the Magic Wand tool.
| | 04:12 |
So I'm going to cancel out of that
and deselect everything on the Stage.
| | 04:16 |
I'm now going to click the
Magic Wand option to turn it off.
| | 04:21 |
Using the Lasso tool just in regular
mode or in Polygon mode, just like we did
| | 04:25 |
before, works just fine on
this broken-apart bitmap.
| | 04:28 |
For instance, I'll turn on the Polygon
mode and start drawing a border around
| | 04:32 |
the top of the plant to select it and
also then go around the second leaf.
| | 04:40 |
If you're trying to do something like
crop this plant out so you can use it in
| | 04:43 |
another Flash movie, a useful technique
might be to do it in pieces. I'm going to
| | 04:48 |
double-click to close my selection so far.
| | 04:51 |
I'm going to hold down the Shift
key and when I start drawing around this
| | 04:55 |
third leaf and double-click to
close my next selection, I've added to my
| | 04:59 |
overall selected area.
| | 05:01 |
In this way, I can select parts of the
plant little by little using short lines
| | 05:05 |
to select small sections and eventually
get around the whole leaf to isolate it
| | 05:09 |
from the rest of the background.
| | 05:11 |
Here is an example of what that plant
looks like once I've selected it all out.
| | 05:16 |
I'm just opening up
leaf.fla in the exercise files.
| | 05:20 |
From here, I could clean it up more
with the Eraser tool and use it in
| | 05:23 |
other Flash movies.
| | 05:25 |
So the Lasso tool in Flash allows you
to make some pretty clean selections from
| | 05:29 |
shapes or bitmaps that have been broken apart.
| | 05:31 |
The Lasso tool in Photoshop offers
more control than the one in Flash, but
| | 05:36 |
cropping out selections in Flash might
save you a little bit of file size as
| | 05:40 |
opposed to importing an
image cropped outside of Flash.
| | 05:43 |
| | Collapse this transcript |
|
|
7. SymbolsIntroducing symbols| 00:00 |
Symbols are basically reusable visual
assets, and you'll use them as building
| | 00:04 |
blocks for animation and interaction.
| | 00:07 |
To demonstrate why symbols are useful,
I'm going to open a new blank Flash FLA document.
| | 00:13 |
Now I'm going to draw a simple circle
shape on the Stage and then make it a symbol.
| | 00:17 |
So I'll select the Oval tool and
choose a blue fill and a black stroke.
| | 00:21 |
I'm going to make sure that I'm in
Merge Drawing mode, so the Drawing mode icon
| | 00:25 |
is the lighter gray as opposed to the darker.
| | 00:28 |
Now I'm going to draw my circle on the Stage.
| | 00:30 |
When I click on the oval with my Arrow
tool and look in the Property inspector,
| | 00:35 |
it shows us that the circle is a shape.
| | 00:37 |
To convert the circle into a symbol,
there are multiple actions that you could choose.
| | 00:41 |
You could select the entire shape.
| | 00:43 |
Don't leave the stroke
unselected, as that can be easy to do.
| | 00:47 |
Be sure to double-click on it.
| | 00:48 |
Then you can drag it to the library.
| | 00:50 |
I'm going to cancel out of this box.
| | 00:53 |
You could select the entire shape and
then right-click and choose Convert to
| | 00:57 |
Symbol, at which point the
dialog box comes up again.
| | 01:00 |
I'm going to cancel.
| | 01:01 |
You could select the shape on the
Stage and then go to Modify > Convert to
| | 01:06 |
Symbol. Or finally, you could
select the shape and hit F8.
| | 01:11 |
Any of those methods work. And we're
asked to give Flash some information
| | 01:15 |
about our new symbol.
| | 01:16 |
I'll call it Circle.
| | 01:18 |
In the Type dropdown, I'm going to
choose to make this symbol a Movie Clip.
| | 01:22 |
We'll talk about the differences
between the types of symbols in a little bit.
| | 01:26 |
Notice also the
registration point of our new symbol.
| | 01:30 |
The X and Y position of our symbol on the
Stage is going to be measured from this point.
| | 01:35 |
The default is the upper-left corner.
| | 01:38 |
You can make your symbols have their
registration point anywhere you want to,
| | 01:41 |
but I'd recommend picking one and then
sticking with it for all symbols that
| | 01:45 |
you create, so the registration point is
consistent across all your symbols within one movie.
| | 01:50 |
I'll click OK and two things happen now.
| | 01:53 |
One is that we now have the circle
show up as a symbol in the library.
| | 01:57 |
The second is that when we click on our
new movie clip symbol on the Stage and
| | 02:01 |
open the Property inspector, it shows
us that this is an instance of the movie
| | 02:05 |
clip symbol called Circle, which of
course we just saw in the Library. So, cool!
| | 02:10 |
We have this symbol, but why is it useful?
| | 02:12 |
Well, let's try dragging and dropping
another two of the circles out from the
| | 02:17 |
library onto the Stage, so we
have three identical circles.
| | 02:21 |
Think of this symbol in
the library as a blueprint.
| | 02:24 |
Each time you drag a new one out to the
Stage, you're making another copy--or, as
| | 02:28 |
the nomenclature is in Flash,
you're creating another instance.
| | 02:32 |
It's the same concept as maybe a
blueprint for a house or a car.
| | 02:36 |
There's one set of plans for the car
and then thousands of cars can be built
| | 02:40 |
using the same blueprint.
| | 02:41 |
So symbols are useful in a case where
you need multiple copies of the same thing.
| | 02:46 |
Maybe you need a bunch of
monkeys or a herd of elephants.
| | 02:49 |
Instead of drawing that item on the
Stage over and over, you can just use
| | 02:52 |
copies of your blueprint.
| | 02:54 |
You can convert almost anything into a
symbol, shapes drawn in Merge or Object
| | 02:58 |
Drawing modes, bitmap images, text, and so on.
| | 03:02 |
This can not only save you a lot of work,
but it can also save you on file size.
| | 03:06 |
Let's delete two of the instances of
our circle from the Stage to explore this.
| | 03:10 |
Now I'm going to publish the movie.
| | 03:12 |
The SWF file opens up, and I'm
going to close it out right away.
| | 03:16 |
What I'm interested in is
seeing the file size of our movie,
| | 03:20 |
so I'm going to do that by clicking
on the pasteboard and then opening up
| | 03:23 |
the Property inspector.
| | 03:24 |
Here in the SWF History section,
we see that our file size is 660 bytes.
| | 03:29 |
So now let's add two more circles, and I'm
going to do this by using my Oval tool again.
| | 03:34 |
So I'll draw the second
circle and now the third circle.
| | 03:37 |
But I'm not going to turn them into symbols;
| | 03:40 |
just leave them as shapes.
| | 03:41 |
I'm going to republish the movie again,
and again, close the SWF right away.
| | 03:46 |
Using my Arrow tool, I'll click on
the Stage and look in the SWF History.
| | 03:50 |
We're at 817 bytes.
| | 03:53 |
Now let's compare using symbols.
| | 03:55 |
I'll delete these two circles that I
just drew, so we should just have the one
| | 03:58 |
instance of the Circle
movie clip symbol on the Stage.
| | 04:02 |
Now I'll drag two more instances of the
circle from the library out and publish
| | 04:06 |
the movie a third time.
| | 04:08 |
I'll close the SWF, click on the Property
inspector, and then click on the pasteboard.
| | 04:12 |
Now our final file size is 683 bytes.
| | 04:16 |
That's smaller than when we had the
circles that we had drawn with the Oval tool.
| | 04:20 |
And that's part of the power of using symbols.
| | 04:23 |
Our file size is smaller when using
multiple instances of the symbol because
| | 04:27 |
Flash only has to remember the
definition of the circle once.
| | 04:31 |
Each copy on the Stage points back to
the symbol in the library, as opposed to
| | 04:35 |
Flash having to remember the definition
of each circle that we drew separately.
| | 04:39 |
Of course, in our example here the
difference in file size is not all that dramatic,
| | 04:44 |
but hopefully, you can project that
file size savings could really add up when
| | 04:48 |
you're dealing with something like
multiple copies of complex artwork or
| | 04:51 |
bitmaps, or in a case where you need
a million raindrops or space rocks or
| | 04:55 |
apples falling from a tree.
| | 04:57 |
So there's another thing to learn about symbols.
| | 05:00 |
Each individual instance can be modified,
but they're all still tied back to the
| | 05:04 |
blueprint in the library.
| | 05:06 |
This is kind of like how you could
have three houses built from the same
| | 05:09 |
blueprint but then paint each one a
different color so they all look a
| | 05:14 |
little bit different.
| | 05:15 |
I'm going to select one of our
circle symbols on the Stage and modify it.
| | 05:18 |
I'm going to press Q on my keyboard so
that the transformation handles come up.
| | 05:22 |
I'm going to skew it a little bit,
and then I'm going to shrink it.
| | 05:26 |
Now with the second instance of the
circle selected, I'm going to open
| | 05:30 |
our Properties panel.
| | 05:31 |
Under the Color Effect area, I'm going
to choose Alpha and make the Alpha 50% so
| | 05:37 |
it appears faded out.
| | 05:38 |
So I'm going to click once on the
pasteboard to deselect everything and I'll
| | 05:42 |
make sure I've got my Arrow tool selected.
| | 05:45 |
So each one of the instances of the
symbol can be modified so they look
| | 05:48 |
different but they're all still
tied back to the symbol in the Library.
| | 05:52 |
I'll prove it by double-clicking on
the third instance of the circle on the
| | 05:56 |
Stage, although really,
you could pick any of the three.
| | 05:59 |
You'll see that your screen has changed.
| | 06:01 |
Notice at the top it says
Scene 1 and then Circle.
| | 06:05 |
This is indicating that we've stepped into
the Timeline of the circle symbol itself.
| | 06:10 |
You can also see that the other
instances of the circle on the Stage, on the main
| | 06:14 |
Timeline, are now kind of faded out.
| | 06:17 |
This is called Edit-In-Place mode,
because I'm editing the circle symbol right
| | 06:21 |
in place where it was on the Stage.
| | 06:23 |
Because I accessed it by clicking an
instance on the Stage, I can still see what
| | 06:27 |
that instance is looking like,
relative to other stuff on the Stage.
| | 06:31 |
So I'm going to change my circle symbol.
| | 06:33 |
I'm going to click on the fill of
the circle and change it to orange.
| | 06:37 |
As soon as I do that, you'll see that
all the instances on the Stage reflect the
| | 06:41 |
change I made to the blueprint.
| | 06:43 |
To step out of Edit-In-Place mode,
I'll click on Scene 1 at the top of the
| | 06:47 |
screen, so we're back on the main Timeline.
| | 06:50 |
There's also another way to edit a symbol.
| | 06:52 |
Instead of double-clicking on an
instance on the Stage, I'm going to
| | 06:55 |
double-click on the
symbol itself in the library.
| | 06:58 |
I'm going to be sure to click on the little
picture of the cog, not the name of the symbol;
| | 07:03 |
otherwise, Flash will think
you're trying to rename the symbol.
| | 07:06 |
You can see that once again
we're in Scene 1 and then Circle.
| | 07:10 |
So we've stepped into the
Timeline of the circle blueprint.
| | 07:13 |
But since we double-clicked on the
symbol in the library to edit, this time we
| | 07:17 |
don't see all the other stuff
sitting on the Stage in the background;
| | 07:20 |
we just see the content on the
Timeline of the Circle movie clip symbol.
| | 07:24 |
This is called Symbol Editing mode.
| | 07:27 |
Anyway, let's select the fill of our
circle again and this time change it to green.
| | 07:31 |
Now I'll click on Scene 1 at the top
of the screen to go back to the main
| | 07:34 |
Timeline. And yet again, the changes
to the blueprint have been reflected in
| | 07:38 |
each one of the copies.
| | 07:40 |
From here on out, each one of the copies
could be further modified individually.
| | 07:44 |
I could rotate one,
| | 07:45 |
I could skew a different one, but the
basic structure of each circle points back
| | 07:50 |
to the Circle movie clip
symbol sitting in the library.
| | 07:53 |
The final advantage to using symbols
is that a symbol in your library is
| | 07:57 |
always a part of your FLA.
| | 07:59 |
Even if we went and deleted all of the
circles on the Stage, we would still be
| | 08:03 |
able to use that circle later
on in our development process
| | 08:06 |
because it's a symbol in the library.
We can grab a copy of it anytime we want.
| | 08:11 |
However, if you draw a shape on the
Stage, like I'm going to do now, and then
| | 08:15 |
delete it, it's gone forever.
| | 08:17 |
One best practice to keep in mind as
you work on projects is to periodically
| | 08:21 |
clean out and organize your library symbols.
| | 08:24 |
For instance, here I'll click the
Folder Icon in the library to create a shapes
| | 08:28 |
folder, and I'm going to drag
my Circle movie clip into it.
| | 08:33 |
Folders are a great way to
keep related symbols together.
| | 08:35 |
And if you come to the end of a project
and you have library symbols that aren't
| | 08:40 |
actually used in your movie, deleting
them out of the library will make it much
| | 08:44 |
easier to figure out what's actually
used in the movie when you open up the FLA
| | 08:48 |
file, say, four months down the road.
| | 08:50 |
Naming each symbol something intuitive
and descriptive, like "circle" or "square,"
| | 08:55 |
is much better than the default name
Flash will come up with, which is usually
| | 08:59 |
something not very unique,
like Symbol 1, Symbol 2, Symbol 3.
| | 09:03 |
I once bought a Flash template that had
originally been developed by someone else.
| | 09:07 |
Not only were the symbols named things
like Symbol 1, Symbol 2, and Symbol 3,
| | 09:12 |
but there were multiple copies
of the symbols in the Library.
| | 09:15 |
The symbol copies were almost all
exactly alike, so it was really hard to tell
| | 09:20 |
what was actually being used in the SWF.
| | 09:23 |
It was a terrible
time-waster to sort that all out.
| | 09:26 |
So whether you just need a good way to
organize your movie's content or you need
| | 09:30 |
a lot of copies of a single item,
symbols can provide you with many advantages.
| | 09:35 |
There are three types of
symbols in Flash, and we'll explore the
| | 09:38 |
differences between them next.
| | 09:41 |
| | Collapse this transcript |
| Understanding movie clip symbols| 00:00 |
One of the three symbol types in
Flash is the movie clip symbol.
| | 00:04 |
I am going to start with a new blank FLA
document to create and examine a movie clip.
| | 00:09 |
I am going to draw a star.
| | 00:11 |
So I am going to grab my
PolyStar tool from the toolbar.
| | 00:14 |
I am going to have my stroke
be black and my fill be yellow.
| | 00:19 |
In the tool Settings area, I am going
to click on Options, star is already
| | 00:22 |
selected, and then I am going to have five sides.
| | 00:25 |
I am going to click OK.
| | 00:26 |
I am going to draw my star on the Stage
and now to convert it to a symbol, you
| | 00:31 |
may remember from the previous video
that there's a lot of ways to do this.
| | 00:35 |
For now, I'm going to select my shape and
then right-click and choose Convert to Symbol.
| | 00:40 |
I am going to give it an
intuitive name, so how about yellowStar?
| | 00:44 |
I am going to make sure that Movie Clip
is selected in the dropdown here, and I
| | 00:49 |
am going to click OK. Now if I open my library,
I see my star movie appears in the library.
| | 00:55 |
Movie clips have a little symbol that
kind of looks like a cog in the library.
| | 00:59 |
I am going to drag several more
copies or instances of the star movie clip
| | 01:03 |
out on to the Stage.
| | 01:05 |
So I could animate this movie clip,
which we will learn how to do soon.
| | 01:09 |
As we have seen before, when I
double-click on one of the star movie clip
| | 01:12 |
instances, you'll notice the
upper-left of the screen changes.
| | 01:16 |
Now it says Scene 1 and then yellowStar.
| | 01:19 |
We have actually stepped
inside the star movie clip.
| | 01:22 |
You can see that it has its own
timeline just like the main Timeline.
| | 01:26 |
Notice the other stars back up on the
main Timeline are kind of faded out, since
| | 01:30 |
we're in the nested timeline
of the yellowStar movie clip.
| | 01:34 |
So I could select my fill
here and change it to red.
| | 01:38 |
I can make the star bigger or other changes.
| | 01:41 |
All of the instances on this Stage
update because they're all tied to the
| | 01:44 |
symbol definition that I am editing, and
this movie clip's internal timeline can
| | 01:48 |
have its own set of layers.
| | 01:50 |
I am going to add an extra layer or two here.
| | 01:52 |
It can have its own keyframes,
its own animation, whatever you want.
| | 01:56 |
Each movie clip symbol definition
having its own timeline is a really
| | 02:00 |
powerful feature, both in terms of
ActionScript and animation, which we will
| | 02:05 |
explore a little later on.
| | 02:07 |
For now, I am going to click on Scene 1 on
the upper-left to go back to the main Timeline.
| | 02:11 |
There is one other important
thing to note about movie clips.
| | 02:15 |
I am going to use my Arrow
tool and select on one of my stars.
| | 02:18 |
Now notice this spot in the
Property inspector that says Instance Name.
| | 02:24 |
I can type in a name here
for my symbol, maybe myStar.
| | 02:28 |
What that does is give Flash a hook
into this symbol instance if I want to
| | 02:32 |
control it using ActionScript.
| | 02:34 |
Remember, ActionScript is Flash's
programming language that allows you to make
| | 02:39 |
your movies interactive.
| | 02:40 |
We will practice with some simple
ActionScript later on in this course.
| | 02:45 |
With multiple different stars on the Stage,
how would Flash know which one I want to control?
| | 02:50 |
Well, the instance name is the hook
you use to connect ActionScript and
| | 02:54 |
individual movie clips on the Stage.
| | 02:57 |
Once Flash knows which symbol on the
Stage you are trying to talk to, you can
| | 03:00 |
move it, rotate it, scale it, make it
fade in and out, make it clickable, and a
| | 03:05 |
number of different other
things with ActionScript.
| | 03:08 |
So movie clip symbols are useful
because they have their own timelines,
| | 03:12 |
they can be animated, and ActionScript can
communicate to them via an instance name.
| | 03:17 |
In fact, the entire Flash
document is a movie clip of sorts.
| | 03:21 |
Movie clip is the most versatile and
powerful of the three symbol types.
| | 03:26 |
| | Collapse this transcript |
| Using graphic symbols| 00:00 |
Another symbol type available
in Flash is the graphic symbol.
| | 00:04 |
Don't let the name graphic symbol fool you;
| | 00:06 |
You don't need to use any kind of
special graphic to create a graphic symbol.
| | 00:11 |
Almost anything can be
made into a graphic symbol:
| | 00:13 |
shapes, drawing objects, groups of
objects, bitmap or vector artwork, even text.
| | 00:19 |
For now, in a new blank FLA document,
I am going grab my Oval tool and quickly
| | 00:24 |
draw an oval on the Stage.
| | 00:26 |
To convert it to a symbol, you may
remember from previous videos that there's a
| | 00:30 |
lot of ways to do this.
| | 00:32 |
This time I'm going to select my shape
on the Stage and hit F8 on my keyboard.
| | 00:36 |
I'll give it an intuitive name, so how
about oval? And in the Type dropdown, I am
| | 00:42 |
going to make sure that this is a
graphic. I am going to click OK.
| | 00:45 |
When I look in the library,
there's the graphic symbol.
| | 00:49 |
Notice the graphic symbol icon,
which looks maybe like a piece of paper
| | 00:53 |
with some shapes on it.
| | 00:55 |
In the Property inspector, it tells me
that I've selected an instance of the
| | 00:59 |
Oval graphic symbol.
| | 01:01 |
So, I can drag and drop multiple copies or
instances of the graphic symbol to the Stage.
| | 01:07 |
From here, I could animate my graphic symbols,
which we'll talk about in an upcoming movie.
| | 01:11 |
You can also double-click on one of the
instances, and you'll notice how at the
| | 01:15 |
top-left it now say Scene 1 and then Oval.
| | 01:20 |
This is probably starting to look familiar.
| | 01:22 |
We've stepped inside the symbol to its
timeline and were editing in place.
| | 01:26 |
The other ovals back up on the
main Timeline a kind of faded out,
| | 01:29 |
since I'm working in the internal
timeline of the symbol definition. So I
| | 01:33 |
could select my fill here and change it to
green, or I could rotate it, or other changes.
| | 01:39 |
All the instances on the Stage update
because they're all tied to the symbol
| | 01:43 |
definition that I'm editing.
| | 01:45 |
And then I can add layers, edit, or
even animate content in this timeline, just
| | 01:49 |
like the main Timeline.
| | 01:51 |
So let's click on Scene 1 back on the
upper-left again to step out of the
| | 01:55 |
graphic symbols timeline and
end up on the main Timeline again.
| | 01:59 |
So what's really the difference between
movie clip symbols and graphic symbols?
| | 02:03 |
So far, they look about the same.
| | 02:05 |
They both have their own
timelines and they can both be animated.
| | 02:08 |
Well, one big difference is that graphic symbols
can't be directly manipulated by ActionScript.
| | 02:14 |
For instance, if I want to make
this oval clickable, well, I couldn't.
| | 02:19 |
When I select the oval and open up the
Property inspector, there's no field to
| | 02:23 |
type in an instance name
like there is for movie clips.
| | 02:27 |
If there's no instance name, Flash can't
identify it to manipulate it with ActionScript.
| | 02:32 |
That's really the biggest
difference between movie clips and graphics.
| | 02:35 |
There are some other differences and
tricks between movie clips and graphics
| | 02:39 |
when it comes to control of Timeline
animation, which we'll talk about in the
| | 02:44 |
section about tweening.
| | 02:45 |
But for now, when you are trying to decide,
should my new symbol be a movie clip or graphic,
| | 02:50 |
just keep in mind, if you think you
might ever want to make your symbol
| | 02:54 |
clickable or otherwise control it
with ActionScript, make it a movie clip.
| | 02:58 |
Otherwise, graphic symbols could be a
great choice to contain something like a
| | 03:03 |
background graphic or a simple animation.
| | 03:06 |
| | Collapse this transcript |
| Exploring button symbols| 00:00 |
Let's take a look at the third and final
type of symbol in Flash, the button symbol.
| | 00:05 |
I'll be working in just a blank FLA document.
| | 00:08 |
Let's create a button by
grabbing our Rectangle tool.
| | 00:10 |
I am going to choose a black stroke a
blue fill and then under Rectangle Options,
| | 00:16 |
I am going to bump up the rounded corners
measurement so we get slightly rounded corners.
| | 00:20 |
I will type in 10. And I am going
to draw a rectangle on the Stage.
| | 00:24 |
The next step is probably familiar.
| | 00:26 |
Using my Arrow tool, I am going to
select the rectangle shape and now
| | 00:30 |
right-click and choose Convert to Symbol.
| | 00:33 |
I am going to give it a name of boxButton.
| | 00:35 |
In the Type dropdown, I am going to make
sure that this is a button and click OK.
| | 00:40 |
If you flip over to your
library, you'll see the new symbol.
| | 00:44 |
Buttons in the library have an icon
of a finger pressing down on a button.
| | 00:48 |
Now let's double-click on the instance on
the Stage to go into the button's own timeline.
| | 00:53 |
You will notice that just like with the
other symbol types, the upper-left says
| | 00:57 |
Scene 1 and then boxButton.
| | 01:00 |
So we are editing in
place the button's timeline.
| | 01:02 |
You can see that a button timeline is different
than that of a movie clip or a graphic symbol.
| | 01:07 |
We've four frames here, each that have
to do with what the user's mouse is doing.
| | 01:12 |
The first keyframe shows what the
button will look like when the user's mouse
| | 01:15 |
is up, or unclicked.
| | 01:17 |
It's basically what the button looks like
when it's just hanging out on the Stage.
| | 01:21 |
The next frame is for what the button
will look like when the user's mouse is
| | 01:25 |
hovering over the rectangle.
| | 01:26 |
Well, let's give our user some nice
visual feedback when they mouse over the
| | 01:30 |
button by changing the color.
| | 01:32 |
So the way we do that is in the Over frame, we
will right-click and choose Insert Keyframe.
| | 01:38 |
Flash copies the information from
the Up frame into the Over keyframe.
| | 01:43 |
So right now Up and Over look the same.
| | 01:45 |
So making sure I've got the Over frame
selected, I am going to click the fill of
| | 01:50 |
the rectangle and change it to a light blue.
| | 01:52 |
The Down keyframe is for when the
user's mouse is pressed down on the button.
| | 01:57 |
Let's give some visual
feedback for the Down state,
| | 01:59 |
so I am going to right-click
and choose Insert Keyframe.
| | 02:02 |
Now I am going to the select the fill in the
rectangle and this time change it to green.
| | 02:06 |
Let's test our movie by pressing
Ctrl+Enter and indeed, when the mouse is up--so,
| | 02:12 |
just not touching the
rectangle--the button is blue.
| | 02:15 |
When the mouse is over it, the
rectangle is light blue, and when you press down
| | 02:19 |
on your mouse, you see the green
color we defined in the Down keyframe.
| | 02:22 |
I am going to close the SWF.
| | 02:24 |
Now button symbols can have layers too,
and this could be useful for something
| | 02:28 |
like giving our buttons some text.
| | 02:30 |
So on the button timeline I am
going to click the Add layer icon.
| | 02:34 |
You can have as many layers in the
timeline of your button symbol as you want,
| | 02:38 |
just like the main Timeline.
| | 02:39 |
I am going to move my playhead to the
Up frame and I am going to grab my text
| | 02:43 |
tool and in the Property inspector,
make sure that it's a black color.
| | 02:47 |
Now I am going to type the words Click Me.
| | 02:50 |
You can see that Flash filled in Click Me on
the Over and Down frames for you automatically.
| | 02:55 |
If you hit Ctrl+Enter to test your movie,
now you see your nice button with the
| | 02:59 |
text working properly.
| | 03:00 |
I am going to close the preview and go
back to the button Timeline and delete
| | 03:04 |
the text layer so we
can look at something else.
| | 03:07 |
So we've got Up, Over, and Down.
| | 03:09 |
Well, how about the Hit state of the button?
| | 03:12 |
Hit, as the name kind of implies, defines
what area of the button is hot, or clickable.
| | 03:17 |
Notice that even though there's no
keyframe in the Hit frame, Flash is looking
| | 03:22 |
back to the closest previous keyframe that
has something drawn in it, and using that.
| | 03:27 |
So it's using the area of the rectangle
defined in Down for the clickable area.
| | 03:33 |
And it's fine to leave a button this way.
| | 03:35 |
You don't have to
specifically define the Hit state.
| | 03:38 |
You don't even have to define the
Over and Down if you don't want to.
| | 03:41 |
If you have just a keyframe on the Up
state and nothing on the other frames,
| | 03:45 |
your button will just always be blue.
| | 03:48 |
The hot area will be the area covered
by the blue rectangle, and that's because,
| | 03:52 |
as we just said, if there's no keyframe
on one of the button states, Flash just
| | 03:57 |
looks back to whatever the last
previous keyframe is and uses that information.
| | 04:03 |
Having that Hit state can be nice
if you want to do some fancy tricks.
| | 04:07 |
Perhaps you want the button to highlight when
the mouse just gets close to it but not on it,
| | 04:12 |
so they Hit area being a little bit bigger
than the colored area of the button itself.
| | 04:17 |
This could be useful in a children's
game where the child is still practicing
| | 04:20 |
using the mouse, and having that extra
Hit area makes it easier for them to
| | 04:25 |
actually get the mouse on
the button. So let's try it.
| | 04:28 |
I am going to right-click in the
Hit state and choose Insert Keyframe.
| | 04:32 |
The rectangle is already selected,
| | 04:34 |
so I am going to hit Q on the keyboard
to bring up the Free Transform tool.
| | 04:37 |
Now I am going to make the rectangle
in the Hit area a little bit bigger.
| | 04:41 |
I am going to move it a little bit with
my arrow keys, and now when we test, you
| | 04:46 |
can see that when the mouse gets close
to the colored area but not quite on
| | 04:49 |
top of it, the button starts reacting, because
the Hit state is bigger than the colored area.
| | 04:55 |
So let's close the SWF and go back to the FLA.
| | 04:58 |
Another thing you could do is go back
to your Hit state and move the rectangle
| | 05:03 |
to a totally different area of the screen.
| | 05:05 |
Now I am going to publish and see what happens.
| | 05:08 |
Notice that the button doesn't react
until I touch the Hit state way over up on
| | 05:12 |
the top, with my mouse.
| | 05:13 |
This could be really useful or really
confusing to your user, depending on what
| | 05:18 |
you're trying to do.
I am going to undo that change.
| | 05:21 |
One more useful thing that you can do with
the Hit state is create an invisible button.
| | 05:25 |
Invisible buttons are used a lot.
| | 05:28 |
You can use them to make
any area of your screen hot.
| | 05:31 |
Maybe you have an area of
text that you want to be hot.
| | 05:34 |
Maybe you want to detect when the
user's mouse passes over or clicks a
| | 05:38 |
certain part of the Stage.
| | 05:40 |
Banner advertisements you see on web
sites rely heavily on invisible buttons.
| | 05:43 |
You've probably noticed how you can
click on almost any part of an ad and
| | 05:48 |
then something happens.
| | 05:49 |
Banner ads usually have the whole ad, or
at least a large part of it, covered with
| | 05:54 |
an invisible button
| | 05:55 |
so it's super easy for the user to
click anywhere and get more information.
| | 05:59 |
So all you need for an invisible
button is just something in the Hit state.
| | 06:02 |
I am going to right-click on the
Up frame and choose Clear Frames.
| | 06:07 |
That clears out the frame's content.
And now I am going to do it two more times
| | 06:11 |
to get rid of the other two
keyframes of Over and Down.
| | 06:14 |
So now Up has a plain keyframe, Over
and Down have nothing in them at all, and
| | 06:19 |
Hit is the only keyframe that
actually has something on the Stage.
| | 06:23 |
On the upper-left, I am going to
click Scene 1 to go back to the main
| | 06:26 |
Timeline, and you'll notice that
your button appears as a light blue.
| | 06:31 |
This is only for you as the
developer, to remind you that there's an
| | 06:34 |
invisible button there.
| | 06:35 |
If you test the movie, you'll see
that the button doesn't appear at all.
| | 06:39 |
However, I know that it's still there
because when I mouse over where the
| | 06:42 |
button is, my cursor turns into the
little hand instead of the arrow.
| | 06:47 |
Button symbols, just like movie clips,
can be controlled by ActionScript as well.
| | 06:52 |
Using my Arrow tool, if I click on
the button and then open the Property
| | 06:55 |
inspector, you will see the field
for adding an instance name appears.
| | 07:00 |
That's Flash's hook into this
symbol to control it with ActionScript.
| | 07:04 |
Just because the button changes colors
when a user mouses over it doesn't mean
| | 07:08 |
it actually does something when it's clicked.
| | 07:10 |
You have to use ActionScript to detect
that they clicked and then open up a
| | 07:14 |
new browser window, or load in more content,
or whatever that button is supposed to do.
| | 07:19 |
Now here's a quick tip for you:
| | 07:21 |
if you're like me and you aren't good
at drawing buttons that look pretty, you
| | 07:25 |
could go to the Window menu and then
choose Common Libraries and then Buttons.
| | 07:30 |
A panel opens up with a library of
buttons that you can choose from.
| | 07:34 |
I'll open this up a little bit so
there's more that we can see, buttons oval.
| | 07:38 |
So I will just browse
through some of these here.
| | 07:42 |
I like the Classic buttons
because it has the Arcade buttons.
| | 07:46 |
When you find one you like, you just
drag it and drop it onto the Stage.
| | 07:51 |
Open up your Library panel, and you'll
see that there is now a folder that has
| | 07:55 |
the assets that make up that button.
| | 07:57 |
So here's the button symbol itself in
the Arcade buttons area, and then button
| | 08:02 |
assets has the different
parts that make up the button.
| | 08:05 |
So there we have the button symbols.
| | 08:07 |
The button symbol's special timeline
makes it easy to create buttons that
| | 08:11 |
respond individually to user
interaction. By giving buttons an instance name,
| | 08:16 |
they can also be controlled by ActionScript.
| | 08:20 |
| | Collapse this transcript |
| Applying 3D and color transformations to symbols| 00:00 |
The transformations we've looked at so
far, like affecting the skew, resize, and
| | 00:04 |
rotation, can be applied to shapes and symbols;
| | 00:08 |
however, there are a few other
worthwhile transformations that can be applied
| | 00:11 |
only to symbols or a special kind of text
called TLF text that we'll talk about soon.
| | 00:17 |
I will demonstrate these
transformations in the file called transforms.fla in
| | 00:22 |
the exercise files for this video.
| | 00:25 |
We have our Roux Academy logo again,
and when I click it, it shows in the
| | 00:29 |
Property inspector that this is
an instance of a movie clip symbol.
| | 00:32 |
In our Property inspector further
down, I am going to expand the heading
| | 00:36 |
that says Color Effect.
| | 00:38 |
In the Style dropdown,
I am going to choose Alpha.
| | 00:41 |
Alpha refers to how opaque
or transparent an object is.
| | 00:44 |
To fade the logo out, I will slide the
slider bar to the left. An Alpha of 0
| | 00:49 |
means that the object is totally transparent,
| | 00:52 |
so an Alpha of 100 means it's totally opaque.
| | 00:55 |
You can also type in Alpha if you wish.
| | 00:57 |
I am going to type in 100 again,
so the logo is totally opaque.
| | 01:01 |
Now, in the Style dropdown,
I will choose Advanced.
| | 01:04 |
Here you see values for Alpha as well
as the Red, Green, and Blue channels.
| | 01:09 |
If I mouse over the 100% for the Blue
and then slide to left, the blue colors
| | 01:14 |
in the logo fade away and we go green.
| | 01:17 |
In the Style dropdown, I will choose
None to reset all the values back to the
| | 01:20 |
default, and then I will
open it again and choose Tint.
| | 01:24 |
So if I put 255 for Red and 0 for
everything else, the logo looks like it did
| | 01:29 |
before, just hanging out on the Stage.
| | 01:31 |
But as I turn up the Tint, the logo turns Red.
| | 01:34 |
If I turn Red down and turn up
the Green again, it turns green.
| | 01:38 |
Now, I will choose
Brightness in the Style dropdown.
| | 01:40 |
You will notice that the
Tint settings are taken away.
| | 01:43 |
Flash can apply only one
or the other at one time.
| | 01:47 |
The Brightness slider works much like
it does in other image editing programs
| | 01:51 |
you may have worked with.
| | 01:51 |
You can make the image brighter or not
bright at all, and the effect of this is
| | 01:56 |
going to vary depending on the image
you're working with on your screen.
| | 02:00 |
So, after all that, I'll set the Style
dropdown back to None so our logo is back
| | 02:04 |
at its default look.
| | 02:06 |
Remember that all of these color
effects that we just looked at can be applied
| | 02:09 |
to movie clips, graphic symbols,
button symbols, and TLF text.
| | 02:14 |
The next type of transform we're going
to look at rotates objects in 3D space.
| | 02:19 |
It doesn't actually give
objects three dimensions;
| | 02:22 |
it just allows you to rotate them on the
X, Y, and X axes, as you'll see in a moment.
| | 02:27 |
The thing to remember about 3D
rotation is that it can only be applied to
| | 02:31 |
movie clips and TLF text;
| | 02:33 |
it won't work on regular shapes,
button symbols, or graphic symbols.
| | 02:37 |
But 3D rotation can cause a real
revolution for your movie clips.
| | 02:41 |
So with my logo still selected, I will
choose the 3D Rotation tool in the toolbar.
| | 02:46 |
It's the fourth from the top and looks
like a globe with an arrow around it, and
| | 02:50 |
you'll notice that there's
another tool in the flyout menu,
| | 02:52 |
so be sure you've got the correct one.
| | 02:54 |
Notice we now have a series
of control lines over our logo.
| | 02:58 |
When I approach one of the green lines,
you'll see a little Y appear next to
| | 03:02 |
the mouse, telling us that we're
about to manipulate the 3D Y axis.
| | 03:07 |
So I will click and drag the line to
see the effect, and you can see it's
| | 03:10 |
rotating along the axis that goes
vertically up and down, the Y axis.
| | 03:14 |
You can see that the logo looks like
a flat piece of paper as it rotates.
| | 03:18 |
It doesn't have depth or width as it rotates.
| | 03:20 |
It's Flash's simulated 3D that
simply rotates the object around.
| | 03:24 |
So I am going to undo that change.
Similarly, the red line affects the 3D X axis.
| | 03:30 |
So you can see it rotating
around the horizontal X axis.
| | 03:35 |
So I'll undo that change by
hitting Ctrl+Z on my keyboard--
| | 03:38 |
that's Command+Z on a Mac.
| | 03:40 |
The blue line affects the 3D Z axis,
which affects an object looking like it's
| | 03:46 |
getting closer or farther away,
| | 03:47 |
but here in this situation, it just
gives us basically regular rotation, similar
| | 03:52 |
to what you get with the Free Transform tool.
| | 03:54 |
I am going to undo that. And now if
you click and drag the orange line, you
| | 03:59 |
affect all three axes at once, which I
think is a little harder to control and
| | 04:03 |
actually know what you're doing.
| | 04:05 |
One useful tool is to pop open the
Transform panel by hitting Command+T or
| | 04:10 |
Ctrl+T on your keyboard.
| | 04:12 |
Here in the 3D Rotation area,
you can either slide or type in a value for
| | 04:16 |
each one of the axes.
| | 04:17 |
So I will change the X and the Y.
This is also a great way to set everything
| | 04:23 |
back to 0 if you want to start over.
| | 04:26 |
You could also hit this Remove Transform button.
| | 04:29 |
I am going to pull the Transform panel
out so it stays open as we continue to
| | 04:34 |
work, and now I will close these other panels.
| | 04:36 |
Notice I can also move the 3D Center
point, either by clicking and dragging on
| | 04:41 |
the number in the Transform panel
or just clicking and dragging on the
| | 04:45 |
transformation point with my mouse.
| | 04:47 |
Now, when I rotate the object, you'll
see that the rotation centers around the
| | 04:51 |
new location of the registration point.
| | 04:53 |
I am going to undo all those changes so the
registration point is back in the center again.
| | 04:58 |
Now, I am going to give my logo a
simple rotation with the green line, or the
| | 05:02 |
Y axis, one more time.
| | 05:04 |
Now, I am going to choose the 3D
Translation tool, which is in the flyout menu,
| | 05:09 |
underneath the 3D Transform tool.
| | 05:11 |
The 3D Translation tool helps move your
object in 3D space, taking into account
| | 05:16 |
how it should look relative to its 3D position.
| | 05:20 |
So I can move it up and down using the
green arrow for the Y axis, and the right
| | 05:24 |
and left using the red arrow for the X axis.
| | 05:27 |
You can see how it changes my logo as I
move it right and left across the screen.
| | 05:31 |
Let's get rid of that Transform panel.
| | 05:35 |
Notice what it does when I click and
drag the center point with my mouse to
| | 05:39 |
scale the logo up on the Z axis.
| | 05:42 |
So, note that the Rotation tool is
for rotating the object, the Translation
| | 05:47 |
tool that we're using now is for
moving it left and right, up and down, and
| | 05:51 |
forward and backward.
| | 05:52 |
Notice also in the Property inspector that
there's an area called 3D Position and View.
| | 05:58 |
Here you have just the regular X and Y
positions of the object, along with the
| | 06:02 |
Z and the Width and the Height.
| | 06:04 |
You can also change what's called the
Camera Angle, so I will click and drag on
| | 06:08 |
the number to increase this.
| | 06:09 |
You can imagine it's kind of what it
would look like if you moved a camera right
| | 06:13 |
up close next to the logo and
looked through the Viewfinder.
| | 06:16 |
I am going to undo that because using
the camera angle maybe gets a little more
| | 06:20 |
clear when you combine it
with using the vanishing point.
| | 06:24 |
Think of the vanishing point like when
you're looking down a perfectly straight road.
| | 06:28 |
As your eye looks towards the horizon, the
edges of the road converge toward each other.
| | 06:33 |
When you look at the horizon line,
the road disappears into a single point.
| | 06:37 |
If I move the X control for the
vanishing point, you can see the little gray
| | 06:40 |
lines, or crosshairs, on the screen that
indicate where the vanishing point is.
| | 06:44 |
Then I can change the Camera Angle
really a lot, and you can see the logo image
| | 06:49 |
stretch, and all the lines
converge at the vanishing point.
| | 06:52 |
So I am going to undo that.
| | 06:54 |
Now, I think using the 3D Rotation and
Translation tools are kind of like golf;
| | 06:59 |
you don't have to completely
understand them to enjoy playing with them,
| | 07:02 |
especially when using them for the first time.
| | 07:05 |
You can create some really fun and
interesting effects with this 3D rotation,
| | 07:09 |
especially combined with simple animation.
| | 07:12 |
In any case, remember that the 3D
effects can only be applied to movie clips and
| | 07:16 |
TLF text, nothing else.
| | 07:18 |
The Color effects that we tried earlier,
like Alpha or Brightness, can be applied
| | 07:23 |
to all three kinds of symbols and TLF text.
| | 07:27 |
| | Collapse this transcript |
| Troubleshooting problematic selections and seeing their properties| 00:00 |
Sometimes when you're authoring in
Flash, especially if you're new to the
| | 00:03 |
program, you might not be able to
select something on the Stage that you expect
| | 00:07 |
to. Or maybe you don't see items in
your Properties panel that you expect.
| | 00:12 |
So here are a few troubleshooting tips.
| | 00:14 |
To start off, I'm going to try and
select the star, and you can see that when
| | 00:18 |
I do, obviously I haven't selected;
I've drawn something, and that's because I
| | 00:22 |
have the Brush tool selected.
| | 00:24 |
I'm going to undo that change.
| | 00:25 |
Now, it may seem super simple, but just make
sure that you've got the right tool selected.
| | 00:31 |
So I'm going to use the Arrow tool, and of
course now when I select the star, it works.
| | 00:35 |
Another option is to make sure you
click on the Stage or the pasteboard to make
| | 00:39 |
sure you've deselected everything first.
| | 00:41 |
Then try selecting your item again.
| | 00:43 |
You could also hit Ctrl+Shift+A on a PC
or Command+Shift+A on a Mac to make sure
| | 00:50 |
that everything is
deselected and then try again.
| | 00:53 |
Again, this may sound super simple,
but it's a common tripping point for
| | 00:57 |
those new to Flash.
| | 00:58 |
So now I'm looking for a small blue star.
| | 01:01 |
I know there's one in this
FLA file, but I don't see it.
| | 01:04 |
So one thing to check is to make sure
that all of your layers are visible.
| | 01:08 |
It can be really easy to think you've
lost something when really the layer
| | 01:12 |
is just turned off.
| | 01:13 |
If I turn on the blue star layer here
in my layer stack, there's my blue star.
| | 01:18 |
So I'll click on it with my Arrow tool.
| | 01:20 |
Now I want to see the properties for
the Flash movie itself, like the frame
| | 01:25 |
rate, the background color,
and the stage dimensions.
| | 01:27 |
But right now the Property
inspector is showing me something else.
| | 01:31 |
It's telling me the
properties for the blue star.
| | 01:34 |
The solution here again is to use the
Arrow tool to click a blank part of the
| | 01:38 |
Stage or the pasteboard and make sure
that everything is deselected, and now I
| | 01:42 |
can see the properties for my FLA document.
| | 01:45 |
Another super-common tripping point
is forgetting to double-click on Merge
| | 01:50 |
Drawing Shapes to select
the fill and the stroke.
| | 01:53 |
I'll click once on my red star and move the
fill, and of course the stroke is left behind.
| | 01:58 |
It can get really confusing to have
your stroke and fill end up on different
| | 02:02 |
layers, or worse, turn the fill into a symbol
and then just totally leave the stroke behind.
| | 02:08 |
So try to remember to double-click on
shapes if they've been drawn in Merge
| | 02:13 |
Drawing mode to get both
the fill and the stroke.
| | 02:15 |
You could also group things together
so that they move as a unit, and you
| | 02:19 |
don't have this problem,
| | 02:21 |
by selecting them and then
going to Modify > Group.
| | 02:25 |
Alternatively, you could also use Object
Drawing mode, which has the fill and the
| | 02:29 |
stroke stuck together by default.
| | 02:31 |
Now I'm going to try to select my
rectangle, but it's not working.
| | 02:36 |
The problem is that the rectangle is on
the rectangle layer, but the layer is locked.
| | 02:42 |
Once I unlock, it works.
| | 02:43 |
Now here's another one.
| | 02:45 |
If you can't seem to select an item,
check that the item is actually on the
| | 02:49 |
layer that you expect.
| | 02:51 |
For example, I'm trying to select
my circle now, but it's not working.
| | 02:56 |
If you look at the circle layer in
the Timeline you'd think that the circle
| | 02:59 |
would be on the circle layer.
| | 03:02 |
But that layer only has a blank keyframe,
| | 03:04 |
so the circle must be on
another layer somewhere.
| | 03:07 |
One way to tell where it is is to turn
the visibility of each layer on and off
| | 03:12 |
one at a time by clicking on the
little icon that looks like an eye that
| | 03:15 |
appears adjacent to the layer name.
| | 03:18 |
So I'll try the star layer. It's not there.
| | 03:20 |
It's not on blue star.
| | 03:22 |
It's not on rectangle. And there it is.
| | 03:25 |
The circle is on the hexagon layer.
| | 03:28 |
So to move it to the circle layer,
I should make sure that both the hexagon and
| | 03:32 |
the circle layers are unlocked.
| | 03:34 |
Now I'm going to select the
circle and cut it by using Ctrl+X on my
| | 03:38 |
keyboard, Command+X on a Mac.
| | 03:40 |
Now the layer I want to move it to--
the circle layer--I'm going to click on the
| | 03:44 |
keyframe where I want the circle to
appear, and now I'm going to choose Paste in
| | 03:49 |
Place from the Edit menu, and now
my circle is on the correct layer.
| | 03:54 |
Finally, let's say I'm trying to
grab this text here that says hello.
| | 03:58 |
So I can move the box that it's on,
but I can't seem to get the text itself.
| | 04:03 |
Now one thing to check is to make sure
you're not dealing with a nested timeline.
| | 04:08 |
If you look in the Property inspector,
you'll see that this hello box is an
| | 04:12 |
instance of the graphic symbol.
| | 04:14 |
If I double-click it, I go into its timeline.
| | 04:17 |
That's where the hello text is, so
now I can grab it and move it around.
| | 04:21 |
Sometimes the opposite problem happens
when you're trying to select something on
| | 04:25 |
the main Timeline but you've
accidentally clicked into a nested timeline.
| | 04:29 |
To check, look on the upper-left of your screen.
| | 04:32 |
Does it say Scene 1?
| | 04:33 |
If it does, you're on the main Timeline.
| | 04:35 |
If it says Scene 1 and then something
else, like nested, as in our example right
| | 04:40 |
now, you've stepped into the timeline
of something on your Stage, either a
| | 04:44 |
symbol or a grouped shape.
| | 04:45 |
Click on Scene 1 to return to the main Timeline.
| | 04:48 |
Now these are all super-common mistakes
for those new to Flash, and they're great
| | 04:52 |
practice for debugging movies.
| | 04:55 |
| | Collapse this transcript |
|
|
8. Motion TweensCreating motion tweens| 00:00 |
Much animation in Flash is built
with what's called the motion tween.
| | 00:04 |
The term tween comes from the
first days of animated cartoons.
| | 00:08 |
Imagine your favorite cartoon
character in one pose with their arms up.
| | 00:12 |
Then imagine the character in
another pose with their arms down.
| | 00:15 |
The senior animators would draw those
mainframes, which you can think of like
| | 00:19 |
keyframes. Then the junior animators
would then draw in all the in-between
| | 00:23 |
frames so that when they're played
in quick succession, it looks like the
| | 00:27 |
character was moving.
| | 00:29 |
In Flash, what you as the
developer do is define the keyframes.
| | 00:33 |
Flash takes care of the in-betweening for you.
| | 00:35 |
To practice with motion tweening,
I am going to open up a new blank FLA
| | 00:39 |
document and save it as a ball.fla in the end
folder in the exercise files for this chapter.
| | 00:45 |
I am going to select my Oval tool.
| | 00:50 |
I am going to choose a gradient red
for the fill and give it no stroke.
| | 00:55 |
Now, I am going to draw a circle on the Stage.
| | 01:00 |
It doesn't really matter if you're
using Merge or Object Drawing mode because to
| | 01:04 |
motion tween something on the Stage, it
has to be either a movie clip symbol or a
| | 01:08 |
graphic symbol or oddly enough, TLF
text, which we haven't covered yet.
| | 01:12 |
For now, we have to convert
our shape into a movie clip.
| | 01:15 |
So I will use my arrow to select the
circle and hit F8, or you could right-click
| | 01:20 |
and choose Convert to Symbol.
| | 01:22 |
Let's give this symbol the name of
Ball and make sure that movie clip is
| | 01:27 |
selected in the Type dropdown.
| | 01:33 |
The workflow you need to use when
creating a motion tween is tell Flash where
| | 01:37 |
you want it to start, apply the motion tween,
and then tell Flash where you want it to end.
| | 01:42 |
So we'll start by telling Flash
where we want the animation to start.
| | 01:46 |
We are going to have the ball moved from
the left to the right, so it's actually
| | 01:50 |
probably okay just here on
the left side of the Stage.
| | 01:52 |
The next step is to apply the
motion tween, but our movie is only one
| | 01:56 |
frame long. Animation by
definition happens over time, so we need to
| | 02:00 |
extend our Timeline out.
| | 02:02 |
I'll click on the Stage and look in
the Property inspector, and we are at the
| | 02:05 |
Flash default of 24 frames per second.
| | 02:09 |
Let's go for a one-second animation,
so let's extend the Timeline out to 24
| | 02:13 |
frames by selecting frame 24 in our
layer and hitting F5, or right-clicking and
| | 02:19 |
choosing Insert Frame.
| | 02:21 |
Now, we can apply the motion tween.
| | 02:23 |
Select any of the 24 frames;
| | 02:25 |
it doesn't matter which one.
| | 02:27 |
Then go to the Insert menu and choose
Motion Tween, or you could right-click on
| | 02:32 |
the frame and choose Create Motion Tween;
| | 02:34 |
that works just as well.
| | 02:35 |
You will see that the frame span now
turns blue, which is the indication that
| | 02:40 |
it's a motion tween span.
| | 02:43 |
If you scrub your playhead across the
frames, of course the ball doesn't do anything.
| | 02:46 |
We have told Flash where we want it to
start and apply the tween, but we haven't
| | 02:50 |
told it where we want it to end.
| | 02:51 |
So I will move the playhead to frame
24 by clicking on the gray bar above the
| | 02:56 |
Timeline at frame 24.
| | 02:58 |
Now I will move the ball over to
the right-hand side of the Stage.
| | 03:03 |
You will notice two things: first,
| | 03:05 |
a green line across the Stage that
indicates the path the ball will take; secondly,
| | 03:11 |
a new little diamond on
frame 24 in the Timeline.
| | 03:15 |
Flash creates this ending keyframe for
you automatically when you define the
| | 03:19 |
end state of the tween.
| | 03:20 |
So I am going to test the movie to see
the results, and indeed, the ball moves
| | 03:24 |
from left to right and plays over and
over as the playhead runs out of frames at
| | 03:28 |
24 and starts over again at frame one.
| | 03:30 |
I am going to close the SWF. And let's
say I want to change the position of the
| | 03:35 |
ball a little bit on frame 24.
| | 03:37 |
Well, that's no problem.
| | 03:39 |
I am just going to make sure that my
playhead is still on frame 24, which it is,
| | 03:43 |
and then move the ball.
| | 03:44 |
The path of the motion tween is updated
accordingly, and I am going to test to see the effect.
| | 03:54 |
I'd like to point something out.
| | 03:56 |
I am going to close the SWF and in
Flash right-click anywhere in the tween span
| | 04:01 |
on the Timeline and choose Remove Tween.
| | 04:04 |
The blue color goes away and the ball
is just at the position defined in the
| | 04:08 |
keyframe on frame 1.
| | 04:10 |
So when we made the tween, remember we
had said, move the playhead to frame 24
| | 04:15 |
before moving the ball to the
right-hand side of the Stage.
| | 04:18 |
Now that's important, and I'll show you why.
| | 04:20 |
When I right-click in the middle of
the tween span, around frame 10, and
| | 04:25 |
Create Motion Tween.
| | 04:28 |
The tween is applied, and you can tell
because the Timeline is turned blue.
| | 04:32 |
This time I am going to leave my
playhead where it is on frame 10 and move the
| | 04:35 |
ball to the right-hand side of the Stage.
| | 04:39 |
See how the keyframe indicating the end
of the tween has now appeared on frame 10?
| | 04:45 |
Let's test the movie to see the result.
The ball moves all right, but it's
| | 04:49 |
faster since it does its
motion in only 10 frames.
| | 04:52 |
It also hangs out on the right side of
the screen for a moment before starting
| | 04:57 |
over, and this makes sense since the
ending keyframe is at frame 10 and the ball
| | 05:03 |
stays in the same position until frame 24.
| | 05:06 |
So paying attention to where your
playhead is when you define where you want the
| | 05:10 |
motion tween to end is pretty important.
| | 05:13 |
So remember, our workflow is to tell
Flash where you want a motion tween to
| | 05:17 |
start, apply the motion tween, and then
tell it where you want it to end, being
| | 05:22 |
careful where your playhead is
when you defined that end state.
| | 05:26 |
We are going to practice
this workflow one more time.
| | 05:29 |
I am going to close ball.fla and open
the file called motionTweens.fla from the
| | 05:35 |
start folder, in the exercise files
for this chapter, and I will save a copy
| | 05:39 |
into the end folder.
| | 05:40 |
I am going to choose Fit in
Window so we can see everything.
| | 05:50 |
And you will see we have
got a solar-powered home here.
| | 05:52 |
We are going to animate some toast
popping out of the toaster that's sitting on
| | 05:57 |
the kitchen counter.
| | 05:59 |
In the Timeline, we have four layers:
| | 06:01 |
one with the house itself on it, one
with the sun, one with the actual toast
| | 06:06 |
itself--it's pretty small--and
then a layer with the toaster.
| | 06:10 |
What we are interested in here is
the toast on the toast layer, so
| | 06:14 |
everything else is locked.
| | 06:15 |
Since the toaster's so small, I am
going to zoom in a little bit so we can
| | 06:18 |
actually see what we were doing.
| | 06:26 |
When I click the toast and look in the
Property inspector, we can see that the
| | 06:30 |
toast is a drawing object.
| | 06:31 |
In fact, we've got two of them;
each piece is its own drawing object.
| | 06:35 |
You have to have a symbol
to create a motion tween,
| | 06:38 |
So I am going to hit Ctrl+A on my
keyboard to select all the parts of the
| | 06:41 |
toast on this layer.
| | 06:43 |
Now I am going to right-click the
toast and choose Convert to Symbol.
| | 06:46 |
Let's give it the name of "toast" and choose
Movie Clip out of the dropdown and say OK.
| | 06:52 |
Remember, the first step in our
workflow is to tell Flash the position where we
| | 06:56 |
want the tween to start.
| | 06:57 |
So I am going to move my toast down
so it's hidden behind the toaster.
| | 07:02 |
Next, we apply the motion tween, so
I'll right-click one of the frames on the
| | 07:06 |
toast layer--it doesn't matter which
one--and choose Create Motion Tween.
| | 07:10 |
The frames turn blue to
indicate that the tween is there.
| | 07:13 |
Let's have the toast take 12 frames to
jump up, so I will move my playhead to
| | 07:17 |
frame 12 and then move the toast
up above the toaster. And that's it.
| | 07:27 |
When I scrub the playhead, the toast pops up.
| | 07:29 |
After frame 12, we have another 36
frames where there's no more motion.
| | 07:34 |
It's just extra frames so that the
toast holds its position so you can grab it
| | 07:38 |
out of the air and eat it before
the playhead jumps back to frame one.
| | 07:41 |
I will test my movie and there
we go, solar-powered breakfast.
| | 07:49 |
So now you have seen how
to create motion tweens.
| | 07:52 |
Once again, the basic workflow to
remember is tell Flash where you want the
| | 07:55 |
tween to start, apply the motion tween,
and then tell Flash where you want it to end.
| | 08:00 |
| | Collapse this transcript |
| Modifying motion tweens| 00:00 |
Let's create a simple motion tween and then
look at how to modify it after it's been created.
| | 00:06 |
I'll be working with the file ball.fla
from the exercise files for this chapter.
| | 00:10 |
It's 24 frames long and when I click
on the ball and look in the Property
| | 00:14 |
inspector, we see that it's
already a movie clip symbol.
| | 00:17 |
To create the motion tween,
we'll follow the workflow of telling Flash where we
| | 00:21 |
want the tween to start,
| | 00:22 |
applying the motion tween, and then
telling Flash where we want the tween to end.
| | 00:27 |
So, the position the ball has on
frame 1 is a fine starting point, so I'll
| | 00:31 |
move on to step 2 by right-clicking
anywhere in the Timeline and choosing
| | 00:35 |
Create Motion Tween.
| | 00:37 |
The frames turn blue to indicate that
a motion tween is on this layer, so now
| | 00:42 |
I'll tell Flash where I want the tween
to end by moving my playhead to frame 10
| | 00:47 |
and then moving the ball over to
the right-hand side of the Stage.
| | 00:50 |
A keyframe is created for us on frame
10 and when I publish the movie, we see
| | 00:56 |
the ball move over the course of 10
frames. Then it hangs out a little bit while
| | 01:00 |
the remaining 14 frames
play. Then it starts over.
| | 01:03 |
So, let modify this tween.
| | 01:05 |
I'm going to move my playhead to frame 24.
| | 01:09 |
These frames are still motion tween
frames, so there's no reason we can't make
| | 01:13 |
the ball move back to the
left side of the screen.
| | 01:15 |
So, I'll move the ball back to the left
side of the Stage and notice that a new
| | 01:20 |
keyframe is added to frame 24.
| | 01:23 |
When we test the movie, cool!
| | 01:25 |
The ball is bouncing back and forth.
| | 01:27 |
So you've been a little bit clever here
by having this center keyframe act as an
| | 01:33 |
ending keyframe and a starting keyframe.
| | 01:36 |
You'll probably notice that the
bouncing was a little bit uneven. The ball is
| | 01:40 |
going to the right over the course of
10 frames but going back to the left over
| | 01:44 |
14. So, to fix this, I'll just
select the middle keyframe.
| | 01:49 |
If Flash selects the entire span for you,
hold down the Ctrl key, or the Command
| | 01:54 |
key on your keyboard, so
you get just that keyframe.
| | 01:57 |
Now I'm going to move it
over to the right, to frame 12.
| | 02:00 |
Now I'll test again, and
the bouncing is more even.
| | 02:06 |
If you've made a tween too long or too
short, you can simply grab the end of the
| | 02:11 |
tween and move it, so I'm going to
shrink my tween down to 12 frames long.
| | 02:16 |
The keyframe in the middle is still at
the same relative spot, and when I test
| | 02:20 |
again, we now have a very fast bouncing ball.
| | 02:22 |
Now what happens if you create a tween
but later figure out that you need it to
| | 02:28 |
appear just later or earlier on the Timeline?
| | 02:31 |
It's simple enough.
| | 02:32 |
I'm going to click and drag the tween
span down the Timeline to start at frame 24.
| | 02:37 |
When I test again, we see 24 frames
of nothing; 12 frames of a fast-moving,
| | 02:46 |
bouncing ball; and then it starts over.
| | 02:51 |
Finally, let's say I've got a
keyframe that I don't want anymore.
| | 02:55 |
I want to delete the end keyframe.
| | 02:57 |
I'm going to hold down Ctrl or Command on
the Mac to select just the ending keyframe.
| | 03:04 |
Now I'll simply right-click on the
keyframe and choose Clear Keyframe.
| | 03:10 |
Notice that Flash gives us this
dropdown to delete position, scale, skew,
| | 03:14 |
rotation, and so on.
| | 03:16 |
Flash keeps track of each of these
properties separately by keyframe, so you
| | 03:20 |
could modify maybe just
the scale, but not the skew.
| | 03:24 |
In our case we want to get rid of the
keyframe altogether, so I'm going to
| | 03:27 |
choose All. And now when I scrub the
playhead, we see the ball moves to the right
| | 03:34 |
and then just hangs out
for the rest of the Timeline.
| | 03:43 |
So, those are some of the most
common things you'll likely want to modify
| | 03:46 |
with your motion tweens.
| | 03:47 |
We'll look at more techniques for
modifying tweens in the upcoming movies.
| | 03:51 |
| | Collapse this transcript |
| Using motion tweens in 3D space| 00:00 |
If you're familiar with motion tweens,
and you're familiar with rotating items
| | 00:04 |
in Flash, with a 3D Rotation tool,
| | 00:06 |
you'll probably enjoy
combining those two techniques.
| | 00:10 |
Here we have a house powered by solar energy
and we want to show how the garage door opens.
| | 00:16 |
When I click somewhere on the pasteboard
and look in the Property inspector, you'll
| | 00:19 |
see that the frame rate is 24 frames per second.
| | 00:22 |
The file also has two layers in it: a
garageDoor layer and a house layer, which is locked.
| | 00:28 |
So to have the garage door open,
we'll create a motion tween and use the 3D
| | 00:33 |
Transform tool to manipulate the
door into the correct position.
| | 00:37 |
Remember that to create a motion tween
you have to be working with a movie clip
| | 00:41 |
symbol or a graphic symbol.
| | 00:43 |
I'll select the garageDoor and looking
in the Property inspector, we can see that
| | 00:47 |
it's already a movie clip, so that part is done.
| | 00:50 |
The movie is currently one frame long,
so we'll need to extend the Timeline out
| | 00:55 |
so the motion tween actually has time to occur.
| | 00:57 |
I going to select frame
24 on the garageDoor layer,
| | 01:01 |
hold down Shift on the keyboard, and then
click frame 24 on the solar house layer.
| | 01:06 |
Now I'll insert frames by right-
clicking and choose Insert Frame, or you could
| | 01:11 |
use the keyboard shortcut of F5.
| | 01:14 |
We know that we have to tell Flash
how we want the motion tween to start,
| | 01:18 |
apply the motion tween, and then tell
Flash how we want the tween to end.
| | 01:23 |
The position of the garage door on frame
1 is just fine for the start position.
| | 01:27 |
So, now I'll right-click on the
Timeline on the garageDoor layer and choose
| | 01:31 |
Create Motion Tween.
| | 01:32 |
Now I'll move playhead to frame 24.
Making sure the garageDoor is still selected,
| | 01:38 |
I'll the 3D Rotation tool from the toolbar.
| | 01:42 |
We want the garage door to open up,
| | 01:44 |
so I'll move along the X axis.
| | 01:46 |
So I'll approach the red line with my mouse
and click and drag to rotate the garage door up.
| | 01:52 |
And that doesn't look quite right.
| | 01:54 |
It's rotating up, but it's
rotating around the point in the center.
| | 01:57 |
It would look better if the movement
originated from the top of the garage door,
| | 02:02 |
so I am going to undo my changes and
now I'm going to click and drag the rotation
| | 02:06 |
point up to the top of the garage door.
| | 02:12 |
Now when I click and drag the red line, the
garage door rotation looks more convincing.
| | 02:17 |
I'll rotate it all the way up so it looks
like it gets totally flat and disappears.
| | 02:24 |
I'll scrub the playhead to
preview the effect. It looks good,
| | 02:27 |
but I like the garage door to stay open
for a moment before the movie starts over,
| | 02:31 |
so I'm going to select frame 48 on both
layers and right-click and insert frames.
| | 02:40 |
Now when I test the movie, the
garage door opens up and stays open for a moment
| | 02:44 |
before the movie starts over.
| | 02:45 |
So you can see that once you've
mastered motion tweening and figured out
| | 02:51 |
rotating items in 3D space, combining
the two really just uses the same process
| | 02:56 |
as setting up a motion tween
that doesn't involve 3D rotation.
| | 03:00 |
By now it probably sounds like a broken
record, but the key is to remember the
| | 03:04 |
workflow for creating motion tweens.
| | 03:06 |
Tell Flash where you want it to start,
apply to motion tween, and then tell it
| | 03:11 |
where you want it to end.
| | 03:12 |
| | Collapse this transcript |
|
|
9. Motion Tweening Tools and TechniquesExploring cool tools for motion tweening| 00:00 |
Say hello to the monkey family.
They are going to help demonstrate a number
| | 00:03 |
of ways you can monkey around with your
motion tweens to make their effects more complex.
| | 00:08 |
You will notice that our frame rate is 24
frames per second and the movie is 48 frames long,
| | 00:13 |
so our movie is two seconds long.
| | 00:15 |
We have eight monkeys and the effect
that each one is going to demonstrate
| | 00:19 |
is labeled above them.
| | 00:20 |
You will note that each monkey is on
its own layer and the layers are named
| | 00:24 |
according to the effect
that will be demonstrated.
| | 00:27 |
So here's the grow monkey and the
alpha monkey and the easeIn monkey and the
| | 00:32 |
easeOut monkey, and so on.
| | 00:34 |
Each monkey has already had a
simple motion tween applied.
| | 00:37 |
When I scrub the playhead, you will see
that all eight monkeys go from the top
| | 00:41 |
of the Stage to the bottom.
| | 00:43 |
So let's start with grow.
| | 00:44 |
I am going to turn the visibility of all
the layers except the labels layer and
| | 00:49 |
the grow layer off, so we
can see what we were doing.
| | 00:51 |
I will unlock the grow layer and
now move the playhead to frame 48.
| | 00:57 |
I am going to select the monkey on
frame 48 and press Q to bring up the
| | 01:01 |
transformation handles.
| | 01:03 |
I am going to scale the monkey up.
| | 01:11 |
Now when I scrub the Timeline, you can see the
monkey grow as he goes through his motion tween.
| | 01:16 |
So motion tweens allow you not only to
move items on the Stage, you can also
| | 01:20 |
change their sizes they move.
| | 01:22 |
I am going to grab my Arrow tool and now lock
and turn off the visibility of the grow monkey.
| | 01:28 |
I'll unlock and make visible
the alpha monkey, the big boss.
| | 01:31 |
I will move my playhead to frame 48,
select the monkey, and in the Property
| | 01:37 |
inspector, under Color Effect, choose Alpha.
| | 01:42 |
Now I will move this slider down to 0
or you could just type in 0, so on frame
| | 01:46 |
48 the monkey is totally faded out.
| | 01:49 |
I will scrub the Timeline to see the effect.
| | 01:53 |
You can see he fades out.
| | 01:54 |
And using this technique is very
common for fading items in and out onstage.
| | 01:59 |
So that's it for alpha monkey.
| | 02:01 |
I am going to lock and hide him.
| | 02:02 |
Now I am going to unlock
and turn on easeIn monkey.
| | 02:06 |
Easing affects how fast or slow an object
is moving at the start and end of its motion.
| | 02:13 |
To change the easing, I am going to
click once on the monkey. And notice the
| | 02:17 |
little line on the Stage that
indicates the path that he moves along.
| | 02:21 |
When I click on the path, the Property
inspector changes to tell us information
| | 02:24 |
about the motion path itself.
| | 02:27 |
Under the Ease section, I'll click and
drag on top of the 0 to the left to make
| | 02:32 |
the Ease -100. Or you could just type it in.
| | 02:35 |
I will hit Enter on my
keyboard to see the effect.
| | 02:39 |
The monkey starts out slow and speeds
up as he falls out of the tree. Ouch!
| | 02:44 |
Poor monkey! Gravity sucks.
| | 02:46 |
So I will lock and hide the easeIn
monkey and now turn on the easeOut monkey.
| | 02:52 |
You can guess what we are going to do here.
| | 02:53 |
I am going to click the monkey so that
we can see the motion path and then click
| | 02:57 |
on the motion path itself.
| | 02:59 |
Now over in the Ease section in the
Property inspector, I'll change the easing
| | 03:02 |
to 100, and I will hit Enter on
my keyboard to preview the effect.
| | 03:09 |
The monkey starts off faster and slows
down near the end of the motion tween,
| | 03:13 |
coming to a smooth stop.
| | 03:15 |
So that's it for this guy.
| | 03:16 |
I am going to lock and hide him, and
we will turn on the rotate monkey.
| | 03:20 |
So how is this monkey going
to get down from the tree?
| | 03:23 |
Well, you don't get down from a tree;
| | 03:25 |
you get down from a goose.
| | 03:27 |
For this guy I'll click the monkey
so we can see the motion path and then
| | 03:30 |
select the path with my arrow.
| | 03:32 |
In the Property inspector in
the Rotate area, let's type in 2.
| | 03:37 |
Notice the Direction dropdown
has defaulted to CW for clockwise.
| | 03:42 |
If you open it up, you will see that
CCW for counter-clockwise is also a choice.
| | 03:46 |
I will stick with CW.
| | 03:48 |
Now I will hit Enter on my
keyboard to see the effect.
| | 03:51 |
Wow! That's pretty crazy.
| | 03:54 |
So that's enough for rotate monkey.
| | 03:56 |
I am going to lock and hide that layer
and now unlock and turn on the path layer.
| | 04:00 |
For our next trick, I will click on the
monkey, so we can see the motion path,
| | 04:07 |
and then I am going to
approach it with the mouse.
| | 04:09 |
You will see a curved line appear next to
the arrow when you get close to the path.
| | 04:14 |
Then I will click and drag it. You can
see that you can actually curve the path.
| | 04:18 |
I'll hit Enter to see the effect.
| | 04:20 |
It's kind of an unnatural movement
for a monkey, but it's good to know that
| | 04:24 |
you can have something more complex than
just a straight line for a motion tween path.
| | 04:29 |
If you click the path again, you can also
move the entire path somewhere else on the Stage.
| | 04:33 |
I am just going to undo that change.
| | 04:37 |
So I am going to lock and hide path
monkey and unlock and turn on the orient layer.
| | 04:42 |
I'll click the monkey so we can see
the motion path and do a similar thing
| | 04:46 |
to what we just did.
| | 04:47 |
I will stretch this motion
path kind of up and to the right.
| | 04:52 |
So I will hit Enter so we can see the effect,
and now I'll click on the motion path again.
| | 04:59 |
In the Property inspector, I am
going to click this little checkbox that
| | 05:02 |
says Orient to path.
| | 05:04 |
Right away you can tell something has happened.
| | 05:05 |
I will hit Enter to see the effect,
| | 05:08 |
and we can see that the monkey's
orientation now follows the motion path and
| | 05:12 |
he lands on his head.
| | 05:13 |
So the doctor says "No more monkeys
jumping on the bed," but imagine if you had
| | 05:17 |
a rocket following a curved trajectory
into space, or maybe a car driving up and
| | 05:22 |
down a hill. The motion is more
realistic if the nose of the car points up and
| | 05:27 |
down the hill as it drives, and that's
where Orient to path really comes in handy.
| | 05:31 |
Also notice that the motion tween is now
a succession of keyframes in the Timeline.
| | 05:37 |
Flash has added in a keyframe on each
frame to account for the unique position
| | 05:41 |
and rotation of the monkey.
| | 05:43 |
I will imagine how much time that
would take you to rotate the monkey frame by
| | 05:46 |
frame like that, by hand.
| | 05:49 |
So we will lock and hide this
layer and unlock and turn on Swap.
| | 05:54 |
It will probably happen to you in your
Flash career where you have got things
| | 05:57 |
all set up onstage, motion tweens in
place, and you will find need to swap out
| | 06:01 |
some of your symbols onstage for
something else. Maybe the design gets updated
| | 06:05 |
and you have to integrate new artwork,
maybe you are just tired of monkeys and
| | 06:08 |
you're ready for something else, whatever.
| | 06:10 |
It's happened to me many times where I
have things all set up onstage, changes
| | 06:14 |
are needed, but I don't
want to rebuild everything.
| | 06:17 |
Fortunately, it's easy to
swap things out in Flash.
| | 06:20 |
I will click on the monkey to demonstrate.
| | 06:22 |
It doesn't matter which frame the
playhead is on; Flash knows I'm talking about
| | 06:26 |
the monkey during the entire motion tween.
| | 06:29 |
You can see that the entire
thing is selected in the Timeline.
| | 06:32 |
In the Property inspector, near the top, I
am going to click the button that says Swap.
| | 06:38 |
Flash gives me a dialog box that essentially
shows me what other items I have in my library.
| | 06:43 |
I will select the elephant and click OK.
| | 06:46 |
Now I will hit Enter on the keyboard and
you can see that we have an elephant in
| | 06:49 |
place of our monkey.
| | 06:50 |
Notice also that the elephant has
been scaled down to match the size of the
| | 06:55 |
monkey that it replaced.
| | 06:57 |
To prove it, I am going to quickly
make an extra layer and drag and drop an
| | 07:00 |
instance of the elephant
from the library onto the Stage.
| | 07:06 |
You can see that it's much bigger,
| | 07:08 |
so Flash did that scaling
down for us automatically.
| | 07:11 |
I am going to delete this new layer.
| | 07:15 |
And now I will lock all the layers and
turn the visibility of all of them on.
| | 07:20 |
So that's the end of our motion
tweening tips and tricks, and I hope you will
| | 07:24 |
find them useful in your
future animation projects.
| | 07:26 |
But of course, after all that,
we can't end without testing the movie and
| | 07:30 |
seeing the full effect of all the
monkeys and the parachuting elephant all at
| | 07:34 |
once, and you really do see here just
how many options you have for motion
| | 07:38 |
tweening right within Flash.
| | 07:40 |
| | Collapse this transcript |
| Exploring motion presets| 00:00 |
Motion presets are pre-built effects that
you can apply to your motion tweens in Flash.
| | 00:05 |
To demonstrate, I have opened up motionpresets.fla
from the exercise files for this chapter.
| | 00:11 |
We have a single layer that's 48
frames long with a blue ball on the Stage.
| | 00:15 |
I'll the select ball and looking in
the Property inspector, you can see
| | 00:18 |
that it's a movie clip.
| | 00:19 |
I am going to apply a quick motion
tween, so I'll right-click in the frame
| | 00:24 |
span and choose Create motion tween.
| | 00:26 |
Now I'll move my playhead to frame 48
and move the ball to the right side of the
| | 00:30 |
Stage. I'll hit Enter on keyboard
to preview this simple motion tween.
| | 00:37 |
Now under the Window menu, I
am going to choose Motion Presets.
| | 00:42 |
The Presets panel opens up, and I'll
stretch it out so we can see a little bit better.
| | 00:47 |
I'll open up the Default folder, and you
can now scroll through a whole bunch of
| | 00:52 |
pre-built effects that you
can apply to the motion tween.
| | 00:54 |
You click on any one of them to preview.
| | 00:56 |
I'm going to choose
bounce-in-3D. That's pretty cool.
| | 01:03 |
So how about smoke? And now spiral-3D.
| | 01:16 |
You can take as much time as
you want to look through these,
| | 01:18 |
but for now I am going to
choose wave and click Apply.
| | 01:22 |
Flash asks you if you want to
replace the current motion with what you've
| | 01:26 |
selected. I am going to click Yes.
| | 01:27 |
You'll see that the Timeline and
the motion path of the ball have been
| | 01:31 |
updated automatically,
| | 01:33 |
so I'll test the movie.
| | 01:39 |
Back in Flash, I'll now make sure that the
ball is still selected and I'll try one more.
| | 01:46 |
I'll choose zoom-out-3D and hit Apply.
| | 01:52 |
Yes, I want to replace the current
motion with the new selection, and now
| | 01:57 |
I'll test the movie.
| | 01:59 |
So, the motion presets are fun, easy
ways to add some sophisticated motion
| | 02:04 |
to items on the Stage.
| | 02:05 |
Remember, you'll find the motion
Presets panel by going to the Window menu and
| | 02:09 |
then Motion Presets.
| | 02:11 |
| | Collapse this transcript |
| Copying and reversing motion tweens| 00:00 |
Sometimes it's useful to be able to
have an exact copy of some of your frames,
| | 00:05 |
for instance if you have a tween on
one movie and want to copy it to another.
| | 00:08 |
Flash can do this work for you, so to
try it out, I'm going to be working in
| | 00:12 |
copyReverse.fla from the
exercise files from this chapter.
| | 00:17 |
Let's test this movie
quickly to see what it does.
| | 00:20 |
The elephant comes on, then the
monkey, and then the giraffe. The jungle
| | 00:24 |
background stays on the whole time.
| | 00:28 |
Back in Flash, I'll scrub my Timeline,
and we can see the keyframe on frame 24 on
| | 00:33 |
the elephant layer where the elephant
comes on, and then here's the keyframe for
| | 00:37 |
the monkey and for the giraffe.
| | 00:38 |
Well, I want to have my animals come
on screen but then go off screen in
| | 00:43 |
the opposite order.
| | 00:45 |
To copy my frames, I'll click on
frame 1 of the background layer.
| | 00:49 |
Now I'll hold down Shift on my keyboard
since I went to multiple-select a whole
| | 00:53 |
bunch of frames, and now click
on frame 96 of the giraffe layer.
| | 00:57 |
I'll right-click and choose Copy Frames.
| | 01:00 |
I'm going to paste my
frames starting on frame 97.
| | 01:05 |
So I'll click on frame 97 on the
background layer, hold down Shift, and select 97
| | 01:10 |
on the giraffe layer.
| | 01:12 |
So I'm basically just telling
Flash where I want it to put the frames.
| | 01:16 |
Now I'll right-click and choose Paste Frames.
| | 01:20 |
So that's half the job.
| | 01:21 |
I just need my frames reversed so
the animals disappear off the screen.
| | 01:26 |
If I test now, you see
they come on twice in a row.
| | 01:37 |
So I'm going to select all the
frames that I just copied by holding down
| | 01:40 |
the Shift key and then clicking to
select, and now I'll right-click and
| | 01:45 |
choose Reverse Frames.
| | 01:50 |
Scrubbing the last half of the
Timeline, we see the animals disappearing.
| | 01:55 |
And I'll test the movie to see the final effect.
| | 01:59 |
So they step on one at a
time and then they step off.
| | 02:06 |
It works pretty much the same way
for copying, pasting, and reversing
| | 02:10 |
motion tweens as well.
| | 02:11 |
I'll now open the file
called copyReversetween.fla.
| | 02:15 |
I'm going to save a copy of it
right away into the end folder.
| | 02:25 |
I'm going to move my Timeline a little
bit, and now I'll choose Fit in Window so
| | 02:37 |
we can see the entire house.
| | 02:39 |
I'm going to move my playhead to
frame one, and you can see that we have two
| | 02:43 |
layers, one that has the house on it
and then one that has the animation of the
| | 02:47 |
garage door opening and closing.
| | 02:52 |
I'll just test quickly so
we can see it in action.
| | 02:57 |
I want to copy and reverse my
frames so the garage door closes too.
| | 03:02 |
This time I'm going to do it a
little bit differently than before.
| | 03:05 |
Now we've talked before about how a best
practice in Flash is to keep individual
| | 03:10 |
items and individual tweens on their own layers.
| | 03:13 |
I know I'll be extending my Timeline
out when I copy and paste my frames, and I
| | 03:18 |
want to be sure that the
existing tween is preserved,
| | 03:21 |
so I'm going to first insert a blank
keyframe on the frame right after the end
| | 03:26 |
of the motion tween.
| | 03:29 |
You don't have to do it this way, but it's
going to save us a little bit of headache later.
| | 03:35 |
So now nothing will mess up this tween
since there's keyframes bookending both sides.
| | 03:39 |
Now I'm going to choose all of the
motion tween frames in the garageDoor layer
| | 03:44 |
except the blank keyframe;
| | 03:45 |
I don't really need that.
| | 03:47 |
And I'll right-click and choose Copy Frames.
| | 03:51 |
Now I'll make a new layer
and call it closeGarageDoor.
| | 03:56 |
I'll select the last frame in this layer,
right-click, and choose Paste frames.
| | 04:02 |
My tween is pasted in and now
all I have to do is reverse it.
| | 04:05 |
So I'll select all of the frames on
the closeGarageDoor layer by holding down
| | 04:10 |
Shift as I select the start and the end
of the frame span, then I'll right-click
| | 04:14 |
and choose Reverse Keyframes.
| | 04:23 |
When I test my movie, the garage door
opens, pauses, and shuts, but we lose the
| | 04:27 |
house in the last half of the movie,
| | 04:30 |
so I'll go back into Flash and extend
the house layer out by clicking frame 96
| | 04:35 |
and then right-clicking to choose
Insert Frame. Or you could just hit F5.
| | 04:41 |
Now when I test my movie,
the garage door opens and then closes.
| | 04:45 |
So copying, pasting, and reversing
frames can be an easy way to disseminate work
| | 04:50 |
you've already done to
another part of the Timeline.
| | 04:53 |
| | Collapse this transcript |
| Nesting timelines| 00:00 |
By now we've seen how movie clip
symbols, graphic symbols, and button symbols
| | 00:04 |
each have their own Timeline.
| | 00:06 |
Those nested symbol Timelines can
hold animation, which we can use to our
| | 00:10 |
advantage to create more
detail in our animations.
| | 00:13 |
So let's use nested timelines to
animate our monkey that appears in the
| | 00:17 |
exercise files for this chapter.
| | 00:19 |
Clicking on the monkey,
we see that he's a movie clip.
| | 00:21 |
I'm going to double-click to
enter the monkey's Timeline.
| | 00:25 |
You'll notice that the top-left of
the screen says Scene 1 and then monkey
| | 00:29 |
since we've stepped into the monkey's timeline.
| | 00:31 |
Also notice the jungle background
up on the main Timeline is faded out.
| | 00:35 |
So the monkey's timeline has three
layers: one that contains the right arm, one
| | 00:41 |
that contains the body and the head,
and then of course the left arm.
| | 00:45 |
Let's animate the arms so that they
lift up over the course of 24 frames.
| | 00:50 |
So the first thing we'll need to do is
extend the Timeline out to 24 frames.
| | 00:54 |
I'll select frame 24 on the left arm
layer, hold down the Shift key, and then
| | 00:58 |
select frame 24 on the right arm layer.
| | 01:01 |
Now I'll right-click and choose Insert Frame.
| | 01:04 |
To animate the monkey's right arm,
I'll right-click anywhere in the frames on
| | 01:08 |
the right arm layer and
choose Create Motion Tween.
| | 01:13 |
We've told Flash where we want the
tween to start and applied the motion tween,
| | 01:18 |
so now I'll move the playhead to frame 24.
Making sure the monkey's arm is selected,
| | 01:23 |
I'll hit Q on the keyboard to
bring up the Free Transform handles.
| | 01:27 |
I'll rotate his arm up, and
that's how I want his arm to end.
| | 01:33 |
So I'll do the same for the left arm.
| | 01:35 |
I'll right-click and choose Create
Motion Tween, and I'll move to frame 24
| | 01:41 |
and rotate the arm up.
| | 01:46 |
Actually, not quite that far. About
like that. So I'll grab my Arrow tool and
| | 01:51 |
scrub the Timeline, and you can see the effect.
| | 01:53 |
I'm going to click back to Scene 1
| | 01:57 |
so we go back to the main Timeline.
| | 01:59 |
Notice the main Timeline only has one
frame, but of course we just animated the
| | 02:03 |
arms on the nested timeline over the
course of 24 frames, and that's part of the
| | 02:08 |
power of nested timelines. A nested
animation can play at the same time but
| | 02:13 |
independently of the main Timeline.
| | 02:16 |
Even though the main Timeline's only
one frame, the nested animation plays its
| | 02:20 |
timeline regardless.
| | 02:22 |
So now let's animate the monkey
movie clip on the main Timeline.
| | 02:26 |
I'm going to extend the timeline
on both layers out to frame 48.
| | 02:35 |
Now I'll create a motion tween on
the monkey layer and then move the
| | 02:38 |
playhead over to frame 48.
| | 02:41 |
Here I'll just move the monkey
over to the right side of the screen.
| | 02:44 |
When we test the movie now, we see the
main Timeline animation of the monkey
| | 02:50 |
sliding to the right and the nested
timeline animation of the arms moving up.
| | 02:54 |
I'm now going to open the file called
solarHouseNestedTimelines.fla in the
| | 03:04 |
exercise files for this chapter.
| | 03:08 |
Looking at the Timeline, you can see
that the movie is only one frame long;
| | 03:12 |
however, when I test the movie,
we have a lot of motion going on.
| | 03:16 |
The sun is shining and making power
to open and close the garage door.
| | 03:20 |
The toaster's making toast, the teapot is
steaming, and the clock on the wall is spinning.
| | 03:25 |
I'll close the SWF and you can
double-click on any of those elements to view the
| | 03:30 |
animation in their nested timelines.
| | 03:32 |
For instance, the garage door is a movie
clip, and when I enter its timeline, we
| | 03:36 |
see the animation that we
created a few movies ago
| | 03:39 |
that opens and closes the door.
| | 03:41 |
I'll just scrub the
playhead so we can check it out.
| | 03:46 |
So I'll click Scene 1 to go back to the main
Timeline and now double-click on the toaster.
| | 03:51 |
This is actually pretty small, so I'm going to
zoom in a little bit so I can better see it.
| | 03:58 |
You can see the nested timeline.
| | 04:00 |
It has the static toaster
but the motion tweening toast.
| | 04:08 |
Back on the main Timeline, notice also
how none of these items seemed to be tied
| | 04:13 |
to the others, in terms of rhythm.
| | 04:15 |
We'll see that when I publish the movie again.
| | 04:17 |
It's all moving at 24 frames per second,
but the length of each nested timeline
| | 04:22 |
is different depending on what the
animation needs to do, and each nested
| | 04:26 |
timeline plays
independently from the main Timeline.
| | 04:30 |
So you can see that nesting timelines,
especially when those nested timelines
| | 04:35 |
have animation on them, can be a great
technique for adding extra motion to your projects.
| | 04:40 |
You could use this technique to have a
butterfly fly from left to right on the
| | 04:44 |
main Timeline, and have the wings
move up and down in the nested timeline.
| | 04:48 |
Or you could have a train with steam coming
out the top or a whale who wiggles his tail.
| | 04:52 |
The possibilities are endless.
| | 04:55 |
You're also not constrained to
just one level of nested timelines.
| | 04:58 |
You could nest multiple
levels of timelines if you wish.
| | 05:01 |
| | Collapse this transcript |
| Using graphics vs. movie clips for animation| 00:00 |
We learned earlier in the course that
graphic symbols and movie clip symbols
| | 00:04 |
both have their own internal timelines.
| | 00:06 |
We've used this to create nested animation.
| | 00:09 |
Up to this point the main reason to
make something a movie clip instead of a
| | 00:13 |
graphic symbol is if you want
to control it with ActionScript.
| | 00:17 |
Movie clips can be controlled with
ActionScript via an instance name, but
| | 00:21 |
graphic symbols cannot.
| | 00:22 |
Other than that, at first glance there
doesn't seem to be much reason to pick
| | 00:26 |
one over the other.
| | 00:27 |
Well, actually, there are some kind of
big differences in how graphics versus
| | 00:32 |
movie clips behave in terms of animation.
| | 00:35 |
Let's take a look at that so you can
choose with confidence which one is going
| | 00:38 |
to serve you best in different situations.
| | 00:41 |
So from exercise files for this chapter,
I've opened up elephantAnimation.fla.
| | 00:46 |
We've got three layers on our Timeline
here, one for each elephant, and then a
| | 00:51 |
Labels layer that simply identifies
which one is a movie clip symbol and which
| | 00:55 |
one is a graphic symbol.
| | 00:56 |
When I click on each elephant, you'll
look in the Property inspector and you
| | 01:00 |
will see that the one on the left is
indeed a movie clip and the one on the
| | 01:04 |
right is a graphic symbol.
| | 01:06 |
So I am going to double-click on the
movie clip version of the elephant to
| | 01:09 |
enter its timeline.
You'll see that it's got 36 frames and 5 layers:
| | 01:15 |
one that has the body on it, the back
ear, the head and the trunk, the front
| | 01:20 |
ear which is called pink ear, and then the face.
| | 01:24 |
I'll scrub the playhead so
you can see the animation.
| | 01:27 |
Now I'll go back to Scene 1 and
I'll double-click on the graphic symbol
| | 01:31 |
version of the elephant.
| | 01:32 |
You can see it's exactly the same.
| | 01:34 |
It's got the same five layers and
when I scrub the playhead, the animation
| | 01:39 |
is exactly the same.
| | 01:40 |
I'll click Scene 1 to return to the
main Timeline, and the point is that the two
| | 01:45 |
symbols are exactly alike, as you
can see. They do the exact same.
| | 01:48 |
The think the only difference is one
is a movie clip, the other is a graphic.
| | 01:51 |
So let's take a look at
how these differ in behavior.
| | 01:53 |
Now notice our main
Timeline is only 1 frame long.
| | 01:58 |
When I test the movie, you'll see that
the movie clip elephant is moving, but
| | 02:02 |
the graphic symbol one isn't.
That's one main difference right there.
| | 02:05 |
The timeline of a movie clip plays
independently from the main Timeline.
| | 02:09 |
It doesn't care if the main
Timeline has 1 frame or 100;
| | 02:13 |
it just plays on its own.
| | 02:14 |
However, as you can see, the graphic
symbol is affected by this and basically
| | 02:18 |
just shows the elephant stuck on
its frame 1 of the internal timeline.
| | 02:22 |
So I am going to go back to FLA and insert
frames to extend the Timeline out to 36 frames.
| | 02:29 |
If you remember, the internal timelines
of the elephant symbols are also 36 frames.
| | 02:35 |
Now let's test again, and this
time you will see the graphic symbol
| | 02:38 |
animating too, because the main
Timeline has enough frames to show the
| | 02:42 |
animation of the nested timeline.
| | 02:44 |
So that's good to know, right?
| | 02:46 |
Well, I want to stress just how
important that can be for the number of
| | 02:50 |
frames on your main Timeline to match or
exceed the number of frames in a graphic symbol.
| | 02:55 |
Let's try removing some frames on the
main Timeline so that we only have 18
| | 03:00 |
and then test again.
| | 03:03 |
The movie clip doesn't even flinch;
| | 03:05 |
it just plays on and looks good, but as
you can see, the graphic symbol elephant
| | 03:09 |
is doing a little dance.
| | 03:10 |
He is trying to play all 36 of its
frames, but the main Timeline only has 18,
| | 03:15 |
so it gets cut off halfway through.
| | 03:18 |
Graphic symbols are kind of tied
to the parent Timeline in that way.
| | 03:22 |
It's a common thing for someone to
animate in a graphic symbol but then not
| | 03:25 |
have enough frames on the main Timeline
and then wonder "Gosh, what went wrong?"
| | 03:29 |
when they test their movie.
| | 03:31 |
If it happens to you, just remember
to count up your frames in your graphic
| | 03:34 |
symbol and then extend the main
Timeline out to the same number of frames like
| | 03:39 |
so. And of course here when
we test again, it's fixed.
| | 03:44 |
Another big difference in behavior
between movie clips and graphic symbols is
| | 03:48 |
that if you scrub your Timeline in the
FLA, you will notice that you can preview
| | 03:52 |
the motion of the graphic symbol, but
you can't see it for the movie clip.
| | 03:57 |
If you're doing a very synced animation
where you want a lot of frame-by-frame
| | 04:01 |
control, using a graphic symbol
might be the way to go for you.
| | 04:04 |
Now graphic symbols also offer you
some additional methods for control.
| | 04:08 |
I am going to click on the movie clip,
and you will the options available in
| | 04:12 |
the Property inspector.
| | 04:14 |
We've seen all of this before.
| | 04:15 |
You can change the position and size,
| | 04:17 |
you can maybe swap what
symbol you're using, and so on.
| | 04:20 |
I am going to click on the graphic
symbol and now there's this whole Looping
| | 04:25 |
area in the Property inspector.
| | 04:27 |
I am going to play with this a little.
| | 04:29 |
So starting with what we've got, our
graphic symbol is looping through its
| | 04:32 |
timeline starting on frame 1.
And of course we've seen this.
| | 04:37 |
Well, now I am going to change First
to 18, so the elephant will loop, but it
| | 04:43 |
will start from frame 18.
| | 04:46 |
So the elephants look a little bit offset there.
| | 04:48 |
Now back to our controls, I am going to
change the dropdown to Single Frame and type in 9.
| | 04:56 |
So when we test, the graphic
symbol is just going to hold on frame 9.
| | 05:03 |
Let's go back and try Play
Once and have it start on frame 1.
| | 05:09 |
So when you test this, it doesn't look
like anything really special has happened;
| | 05:13 |
it's just kind of playing the way it before.
| | 05:15 |
Well, the trick here is that we
have to expand our main Timeline.
| | 05:19 |
Right now the main Timeline matches
the nested timeline length of 36 frames.
| | 05:24 |
The elephant clip runs out of frames
right as the main Timeline runs out as well.
| | 05:29 |
Then it starts over, so we
never see it stop the loop.
| | 05:32 |
If we extend out to frame 72, which is
the nice round double of 36 and test, you
| | 05:37 |
will see that it plays once and then holds.
| | 05:40 |
It starts over again when the
main Timeline starts over at frame 1.
| | 05:44 |
It might make it easier to see this if
we open our Bandwidth Profiler by going
| | 05:48 |
to View > Bandwidth
Profiler and then SWF preview.
| | 05:54 |
The little gray marker at the
top shows us where our playhead is.
| | 05:57 |
Now you can see where the elephant
animates ones and then holds before the main
| | 06:02 |
Timeline starts over again.
| | 06:03 |
I am going to close the
Bandwidth Profiler and now close my SWF.
| | 06:08 |
So I am going to move the playhead to frame 1.
| | 06:11 |
Now I am going to click on the graphic
symbol version of the elephant and just
| | 06:16 |
for grins, I am going to go and make it
play once and now I'll start on frame 18.
| | 06:21 |
When I test, that's exactly what it does.
| | 06:24 |
The elephant starts at frame 18, plays
what's left of the 36 frames, and then holds.
| | 06:29 |
He looks like he sneezing.
| | 06:32 |
So I will set our graphic symbol
elephant back to Loop, starting on frame 1.
| | 06:38 |
You can see how these controls could
allow you to really easily create some
| | 06:42 |
perceived randomness and offsets with
the elephant trunks, if you are trying to
| | 06:46 |
do something like animate a herd of elephants.
| | 06:48 |
So we've seen how the behavior of the
graphic symbols really depends on what's
| | 06:52 |
going on on the main Timeline and with
the settings you've chosen for it.
| | 06:56 |
The movie clip just kind of chugs along unaffected.
| | 06:59 |
There's one last little bit to see in
terms of the difference between movie
| | 07:03 |
clips and graphic symbols.
| | 07:04 |
I am going to make a new layer
in our movie and call it actions.
| | 07:09 |
On frame 18, I am going to
insert a blank keyframe.
| | 07:12 |
Now I am going to write one single line
of ActionScript code by going to Window >
| | 07:17 |
Actions and then typing
in "stop" in the Actions panel.
| | 07:23 |
Don't worry too much about the
ActionScript right now or the ActionScript panel;
| | 07:27 |
just know that this command tells the
playhead to stop when it reaches frame 18.
| | 07:31 |
I'll close the ActionScript panel
and when I test, you'll notice that the
| | 07:35 |
graphic symbol stops when
the playhead gets to 18.
| | 07:39 |
So yet again, we see how the graphic symbol
is tied to what the parent Timeline is doing.
| | 07:44 |
The movie clip symbol's
timeline could care less and is just
| | 07:47 |
playing independently.
| | 07:49 |
So there are advantages and
disadvantages to both movie clips and graphic
| | 07:53 |
symbols depending on what you want to do.
| | 07:55 |
Now we mentioned elsewhere in the
course how you can click on a movie clip
| | 07:59 |
and give it an instance name in the Property
inspector so ActionScript has a hook into it.
| | 08:04 |
So if you want to make one of the
elephants clickable or otherwise interactive,
| | 08:08 |
they need to be movie clips.
| | 08:10 |
If you're more interested in Timeline
animation, graphic symbols would probably
| | 08:13 |
be the better way to go.
| | 08:15 |
In any case, now you've seen how movie
clip timelines play independently of the
| | 08:19 |
main Timeline, but graphics symbol
timelines are greatly affected by it.
| | 08:24 |
On the flipside, graphic symbols also
offer you some neat animation controls
| | 08:28 |
that movie clips don't do.
| | 08:30 |
Now, going forward, use this info to
confidently choose which type of symbol
| | 08:33 |
best suits your needs.
| | 08:36 |
| | Collapse this transcript |
| Onion skinning| 00:00 |
A really useful tool you have for creating
frame-by-frame animation is onion skinning.
| | 00:05 |
Onion skinning allows you to preview
frames before and after the current frame
| | 00:10 |
that you're working on.
| | 00:11 |
In our example file we have an animation
of the elephant. The file has got 5 layers.
| | 00:16 |
So here's the face layer, then the
pinkEar, or the frontEar, the headand the trunk, the
| | 00:22 |
backEar, and then the body.
| | 00:24 |
I'm going to zoom in on the head.
| | 00:26 |
So if I move my playhead to frame 3,
you'll see that there's a problem.
| | 00:32 |
The elephant's eye and
eyebrow are missing from this same.
| | 00:36 |
If you go to frame 2, you can see the
eye and if you go to frame 4, you can
| | 00:39 |
see it on that frame too.
| | 00:41 |
So the eye on frame 3 should be somewhere in
between the position of the eye on frames 2 and 4.
| | 00:47 |
So I'm going to a select
and copy the eye from frame 2.
| | 00:49 |
Now I am going to move my playhead to frame 3.
| | 00:53 |
I could just paste in the eye, but Flash
sticks it in a funny place, and I'm just
| | 00:57 |
guessing as to where I should really put it.
| | 00:59 |
So I'll undo that change by
pressing Ctrl+Z. Onion skinning can help.
| | 01:04 |
It's this little tiny icon down below
the Timeline. When I click it, the onion
| | 01:09 |
skin markers appear on the Timeline.
| | 01:11 |
What it's doing is basically letting
me preview the frames before and after
| | 01:15 |
frame 3 while I'm working on frame 3.
| | 01:18 |
To make it a little clearer what were
doing here, I am going to make sure
| | 01:21 |
the playhead is on frame 3 and then click the
circles on the onion skin markers and drag them in.
| | 01:26 |
So, now within our markers,
we only have frames 2, 3, and 4.
| | 01:31 |
So on the screen, the kind of
grayed-out eye that's lower is the eye
| | 01:35 |
position on frame 2.
| | 01:37 |
The higher grayed-out eye is the
position of the eye on frame 4.
| | 01:41 |
As I drag my onion skin marker on
the right a little further down the
| | 01:44 |
Timeline, you can see the grayed-out version of
the eye moving up the screen the further I go.
| | 01:50 |
So I'll drag the marker back in so we
are only looking at frames 2, 3, and 4.
| | 01:55 |
Now another option you have while working
in onion skins is to use onion skin outlines.
| | 02:00 |
It's the icon next to onion skin, and it
basically displays items on your Stage as outlines.
| | 02:06 |
We're working with a really complex or
detailed animations, sometimes the onion
| | 02:10 |
skin outlines can make it a little
more clear as to what you're looking at
| | 02:14 |
across multiple frames.
| | 02:15 |
For now, I'm just going to
go back to regular onion skin.
| | 02:19 |
So we can see where the eye is on frame 2.
| | 02:21 |
It's the lower eye, and on
frame 4, it's the upper eye.
| | 02:25 |
So I am going to paste in the eye that I
copied earlier and then using my mouse,
| | 02:29 |
I'll move it in place, kind of in
between the other two sets of eyes.
| | 02:32 |
Now I'll turn onion skin off and scrub
the Timeline. And frame 3 looks good.
| | 02:40 |
The position of the eye doesn't seem off
as we watch the frame-by-frame animation.
| | 02:44 |
You can preview frames before and after
the frame that you're working on simply
| | 02:48 |
by clicking the onion skin button at
the bottom of the Timeline and then
| | 02:52 |
modifying the onion skin markers.
| | 02:55 |
| | Collapse this transcript |
| Editing multiple frames| 00:00 |
Once I built a project for a client
that had a lot of items and animations
| | 00:04 |
positioned specifically in
particular spots on the main Timeline.
| | 00:08 |
Near the end of the project the
client asked if we could keep everything
| | 00:11 |
just the way it was,
| | 00:12 |
just move everything up 100 pixels on the Stage.
| | 00:15 |
It had something to do with where the
Flash piece was going to be positioned
| | 00:19 |
among other items on the web page.
| | 00:21 |
So I had to go and move all of the
animations and everything on the main
| | 00:25 |
Timeline up 100 pixels.
| | 00:27 |
Now you might run into a case where you
have a large span of frames and you want
| | 00:31 |
to edit them all at once
as well, like I had to do.
| | 00:34 |
Let's look at an example here
with our elephant animation.
| | 00:38 |
We've got five different layers in the
main Timeline with different kinds of
| | 00:41 |
frames and keyframes and tweens on them.
| | 00:43 |
Let's test the movie, and let's say that
what we want to do is make the elephant
| | 00:48 |
smaller and move him over.
| | 00:51 |
So how are we going to get all of these
frames and keyframes in different tweens
| | 00:54 |
on the main Timeline changed?
| | 00:56 |
Well, I could try to do this by
unlocking all the layers and selecting all the
| | 01:01 |
frames on all the layers.
| | 01:02 |
So I'd select frame 1 on the face
layer, hold down the Shift key on the
| | 01:06 |
keyboard, and then select the
last layer on the body layer.
| | 01:10 |
Then I could hit Q to bring up the Free
Transform tool and try to scale my elephant down.
| | 01:16 |
When I test, you'll see
that it didn't really work.
| | 01:20 |
So I'm going to close the
SWF and undo that change.
| | 01:25 |
So, alternatively, you could select each
keyframe one by one on the Timeline and
| | 01:30 |
try to scale the content down.
| | 01:32 |
But it would be extremely difficult
to line everything up, especially since
| | 01:36 |
there's tweens involved.
| | 01:38 |
Fortunately, there's a useful icon at the
bottom of the Timeline that can help with this.
| | 01:42 |
It's called Edit Multiple frames.
| | 01:45 |
So I'll click on it.
| | 01:46 |
You'll see that we get the markers
at the top of the Timeline similar to
| | 01:50 |
the onion skin markers.
| | 01:51 |
It allows us to affect multiple frames at once.
| | 01:54 |
So, I'll move the markers to encompass
all the frames, and now I'll hit Ctrl+A
| | 01:59 |
on my keyboard to select everything.
| | 02:01 |
Now I'll hit Q to bring up the
Free Transform tool again and shrink
| | 02:05 |
everything down all at once.
| | 02:10 |
Now I'll also move the
elephant over a little bit.
| | 02:13 |
Testing the movie now, you'll see that
the elephant's animation is retained, and
| | 02:17 |
he's just smaller and moved over. It worked.
| | 02:22 |
So with that done, I'm going to grab
my Arrow tool, click on the pasteboard
| | 02:26 |
somewhere to deselect everything
and then unclick Edit Multiple frames.
| | 02:31 |
I'm going to save this file and close it.
| | 02:33 |
Now I'm going to open up a fresh copy of
elephantAnimation from the start folder
| | 02:39 |
in the exercise files for this chapter.
| | 02:41 |
I'm going to save it into the
end folder as elephantAnimationMC.
| | 02:51 |
The MC stands for movie clip, and the
reason that I'm doing that is because
| | 02:55 |
everything that we just did was because we
wanted to change the dimensions of the elephant.
| | 03:00 |
Now if all you're trying to do is change
the dimensions of something that's been
| | 03:04 |
developed on the main Timeline, another
option would be to select all the layers
| | 03:08 |
and frames as we did before, but then
just dump it into a new movie clip.
| | 03:12 |
So I'm going to do that.
| | 03:14 |
I'll select all my frames by holding
down Shift on the keyboard. Now I'll
| | 03:18 |
right-click and choose Copy Frames.
| | 03:21 |
Now I'm going to create a new blank movie clip.
| | 03:24 |
I'll do that by going to the
Insert menu, then choosing New Symbol.
| | 03:29 |
I'll call this elephantSizer,
| | 03:31 |
and I'll make sure it's a
movie clip and click OK.
| | 03:34 |
I'm in the nested timeline of
the elephantSizer movie clip.
| | 03:39 |
So I'm going to right-click on frame
1 on layer 1 and choose Paste Frames.
| | 03:44 |
So now I've dumped everything from
the main Timeline into this movie clip.
| | 03:49 |
I'll click Scene 1 to go back to the
main Timeline, and you can see of course
| | 03:54 |
the elephantSizer movie clip that
we just created is in the library.
| | 03:57 |
Now I'm going to lock and turn off
the visibility of all the layers.
| | 04:01 |
I'm going to add a new layer
on the top called elephantSizer.
| | 04:06 |
Now I'll drag and drop a copy of my movie
clip out from the library onto the Stage.
| | 04:11 |
Since he is a movie clip, I can really
easily now use the Free Transform tool
| | 04:15 |
to transform him down and move him around
and rotate him and whatever else I want to do.
| | 04:22 |
So having the elephant as the movie
clip makes him more versatile in terms of
| | 04:26 |
solving the elephant-sizing issue.
| | 04:29 |
However, there will be times where for
whatever reason you'll want to change a
| | 04:32 |
whole bunch of frames and layers on
the Timeline without messing around with
| | 04:36 |
extra symbols like we just did.
| | 04:39 |
Remember the example that I gave earlier,
where I had a lot of stuff on the main
| | 04:43 |
Timeline and there was ActionScript and
things going on where I couldn't move it
| | 04:46 |
into a movie clip symbol. This does happen,
| | 04:50 |
so when it happens to you,
remember the Edit Multiple frames tool.
| | 04:55 |
| | Collapse this transcript |
| Understanding classic tweens| 00:00 |
There is an older type of tween called
a classic tween that you may run into.
| | 00:05 |
To explore what it is, I've opened
classictween.fla from the exercise files for
| | 00:10 |
this chapter, and I've saved
the copy into the end folder.
| | 00:13 |
To learn about classic tweens,
let's first talk about motion tweens.
| | 00:17 |
By now, we're familiar with motion tweens.
| | 00:19 |
We know that to create one, we need a
symbol, like this blue ball on the Stage.
| | 00:24 |
We know that the workflow is to tell
Flash where we want the tween to start,
| | 00:27 |
apply the motion tween, and then tell
Flash where we want the motion tween to
| | 00:31 |
end, so I'll do that.
| | 00:33 |
Here's the start state. I will right-
click to apply the motion tween, and
| | 00:38 |
then I'll move my playhead to frame 24 and
move the ball over to the right side of the Stage.
| | 00:44 |
Well, for your end users to see motion
tweens they have to have Flash Player 10
| | 00:49 |
or later, which at this point most
people do, but before the motion tween in
| | 00:53 |
Flash Player 10, there was the classic tween.
| | 00:56 |
It's a lot like motion tween, just the
workflow to set it up is a little different.
| | 01:01 |
Let's make one by clicking on the
ball movie clip next to the Classic
| | 01:04 |
Tween label on the Stage.
| | 01:07 |
The workflow for a classic tween, as it
says, is tell Flash where you want it to
| | 01:11 |
start, tell Flash where you want it to
end with a keyframe, and then apply the
| | 01:15 |
tween, so I'll do that.
| | 01:17 |
We have our beginning keyframe.
| | 01:19 |
Now I'll tell Flash where I want the
tween to end. I'll right-click on frame 24
| | 01:23 |
in the classicTween layer
and choose Insert Keyframe.
| | 01:28 |
Now I'll move the ball over. So I've got
where it starts, where it ends, and now
| | 01:35 |
I just have to right-click
and Create Classic Tween.
| | 01:37 |
You'll see the classicTween layer
turns purple and has a little arrow
| | 01:42 |
pointing through it.
| | 01:44 |
I'll scrub the Timeline and you won't
really see any difference between the two
| | 01:47 |
tweens; they look about the same.
| | 01:50 |
So, why did they both exist?
| | 01:52 |
Well, a classic tween was the first
iteration of motion tweens, and in fact, in old
| | 01:56 |
versions of Flash it was
called the motion tween.
| | 01:59 |
As Flash evolved, a bigger, better
version of motion tweens came out, the kind
| | 02:03 |
that we've been working
with so far in this course.
| | 02:06 |
And the old kind of tween
got renamed classic tween.
| | 02:10 |
Motion tweens have some
features that classic tweens don't.
| | 02:13 |
For instance, I can click on the blue
ball in the motion tween and we see the
| | 02:17 |
path that the tween takes.
| | 02:19 |
You can click on the path and modify
it by changing the shape and using the
| | 02:23 |
controls in the Property inspector.
You can't do that with classic tweens.
| | 02:28 |
I just click on the ball and that's all we see.
| | 02:31 |
Motion tweens also use property keyframes.
| | 02:34 |
I'll demonstrate by clicking on the
ball in frame 24 and then going to
| | 02:39 |
the Property inspector.
| | 02:41 |
In Color Effect, I'm going to choose Alpha.
| | 02:43 |
I'm going to turn the Alpha all the
way down so the ball is faded out, and
| | 02:47 |
here is the effect.
| | 02:50 |
Now, if I right-click on the keyframe in
frame 24 of the motion tween layer and
| | 02:55 |
choose Clear Keyframe, Flash asks me,
what information that the keyframe stores
| | 03:00 |
do you want to get rid of,
information about the Position, the Scale, the
| | 03:04 |
Skew, the Rotation, All?
| | 03:07 |
I can choose Color and the ball is still there.
| | 03:10 |
The alpha fade is taken away, but the
keyframe remains, since there are still
| | 03:14 |
all those other properties
that exist for this keyframe.
| | 03:17 |
With classic tween, those types of
distinctions are not made about the keyframe.
| | 03:22 |
If I right-click and choose Clear
Keyframe, it just gets rid of the keyframe and
| | 03:27 |
it breaks the tween.
| | 03:29 |
I'll undo that change.
| | 03:30 |
So I'll click on my motion tween ball again.
| | 03:33 |
Motion tweens also have another set of
controls by way of the Motion Editor,
| | 03:38 |
which is a panel next to the Timeline tab.
| | 03:40 |
The Motion Editor basically allows
you to control your motion tweens in a
| | 03:44 |
graphical interface.
| | 03:47 |
I'll just pop it open so you can see
it, but it's not something we will really
| | 03:50 |
cover in this course.
| | 03:51 |
I'll close this back up. Classic
tweens don't use the Motion Editor.
| | 03:57 |
If I click on the ball with the
classic tween, you'll notice that the Motion
| | 04:00 |
Editor panel is blank.
| | 04:03 |
So, classic tweens are something you
might run into if you're working with older
| | 04:07 |
Flash files that somebody already
created. You also might run into them if you
| | 04:11 |
need to target a version of the
Flash Player older than Flash Player 10.
| | 04:14 |
There is no real reason to not use
classic tweens if you felt compel to do so,
| | 04:20 |
but motion tweens offer a lot
more options than classic tweens.
| | 04:25 |
| | Collapse this transcript |
|
|
10. Shape TweensBuilding shape tweens| 00:00 |
Shape tweens do exactly what the name imply;
| | 00:03 |
they allow you to tween
from one shape to another.
| | 00:06 |
Unlike motion tweens, which required
that you use a symbol, like a movie clip or
| | 00:10 |
a graphic symbol to create a tween,
shape tweens really stick to their name in
| | 00:14 |
that you can't use a symbol.
| | 00:16 |
You also can't use grouped shapes.
Just a simple shape will do, or a
| | 00:21 |
drawing object is okay too.
| | 00:22 |
I am going to be working with
solarHouse.fla from the exercise files for this
| | 00:27 |
chapter to demonstrate.
| | 00:29 |
You can see that our file has three
separate layers: the house layer which
| | 00:33 |
has the house and the garage, the sun which
has a yellow circle, and then the sun ray layer.
| | 00:40 |
If you click on the sun ray and look
in the Property inspector, you will see, indeed,
| | 00:44 |
that this is just a simple shape.
| | 00:46 |
The workflow for shape tweens is a
little different than that for motion tweens.
| | 00:51 |
For a motion tween, you first tell
Flash where you want it to start,
| | 00:54 |
then you apply the motion tween, and
then tell it where you want it to end.
| | 00:59 |
For a shape tween, you first tell Flash
where you want it to start with a keyframe.
| | 01:04 |
Then you tell it where you
want it to end with a keyframe.
| | 01:07 |
Finally, you apply the shape tween last.
| | 01:11 |
So Flash already knows where we
want the shape tween to start.
| | 01:14 |
It's the ray shape on frame 1 of the ray layer.
| | 01:17 |
Now we have to tell it where we want it to end.
| | 01:20 |
Notice that the house and sun
layers already have 24 frames.
| | 01:24 |
I want the ray layer to match, so I
will right-click on frame 24 of the ray
| | 01:28 |
layer and choose Insert Keyframe.
| | 01:30 |
I am going to zoom in a
little bit and using my Arrow tool,
| | 01:34 |
I will change the shape of the ray a
little bit so it gets a little bit
| | 01:37 |
fatter on frame 24.
| | 01:40 |
Our last step is to apply the shape tween.
| | 01:42 |
To do this, with my Arrow tool, I will
right-click anywhere before frame 24 and
| | 01:47 |
choose Create Shape Tween.
| | 01:49 |
The frames turned to a light-green color
with a little arrow pointing from frame
| | 01:53 |
1 to 24 along the way.
| | 01:56 |
When I test the movie, you can
see how the ray changes shape.
| | 02:01 |
So this conceptually would be a little more
realistic if the sun rays did, well, more.
| | 02:07 |
Luckily, with shape tweens you can
do more than just change the shape.
| | 02:10 |
You can change the content of
either of the keyframes to further modify it.
| | 02:14 |
So I am going to move my playhead to frame 24,
select my ray, and change the fill to orange.
| | 02:19 |
I am also going to grab my Free
Transform tool from the toolbar and scale my ray
| | 02:25 |
down so it's smaller.
| | 02:26 |
I will adjust the position of it as well.
| | 02:30 |
Now when I test my movie, the shape is
changing as well as the color and the size.
| | 02:34 |
I am going to close the SWF and now
with the Arrow tool, I will move the sun ray
| | 02:40 |
on frame 24 down closer to the solar panel.
| | 02:45 |
When I test the movie, you will see
the tween has updated accordingly.
| | 02:49 |
Our morphing sun ray is also moving
as it changes shape, size, and color.
| | 02:54 |
So you can see that in a sense, shape
tweening can do what motion tweens can
| | 02:59 |
do, at least when it comes to making an
object look like it's moving across the Stage.
| | 03:04 |
If I click on my sun ray on frame 24
and delete it, you will notice that we
| | 03:09 |
still have a green background in the
Timeline, but now we have a dotted line
| | 03:13 |
instead of the line with the arrow.
| | 03:15 |
This indicates a broken shape tween,
and when I scrub the playhead, there's
| | 03:19 |
nothing on any frame except frame 1.
| | 03:22 |
If you see a dotted line in your
Timeline where you expect the shape tween to
| | 03:26 |
be, then you need to go back to the
basics and make sure that your tween has
| | 03:29 |
everything it needs.
| | 03:31 |
You need to be working with shapes.
| | 03:33 |
You need to tell Flash where you want
it to start with a shape in a keyframe.
| | 03:37 |
Then you need to tell it where you
want it to end with a second shape in
| | 03:41 |
a second keyframe.
| | 03:42 |
Finally, you have to apply the shape tween.
| | 03:45 |
I am going to Ctrl+Z to replace the
sun ray I just deleted and fix our tween.
| | 03:49 |
And you will see that our shape tween
is restored with the arrow appearing
| | 03:53 |
in the Timeline again.
| | 03:54 |
Also note that it's a best practice to keep
individual shape tweens on their own layer.
| | 04:00 |
So, for instance, if I want to have more
sun rays in addition to the shape tween
| | 04:04 |
I have already got, that tween should
be built on its own layer; otherwise,
| | 04:08 |
Flash can get confused about which shape
is meant to be morphing into which, and
| | 04:12 |
you might get unexpected results
or otherwise break your shape tween.
| | 04:16 |
If you want to remove a shape tween,
you simply right-click anywhere in the
| | 04:20 |
tween span and choose Remove Tween,
but I am not going to do that right now.
| | 04:25 |
So now you have seen how to change a
shape's color, size, shape, and even
| | 04:29 |
position using shape tweens.
| | 04:32 |
The biggest thing to remember about
shape tweening is that you must be working
| | 04:35 |
with a shape. No grouped objects and no symbols.
| | 04:40 |
| | Collapse this transcript |
| Employing shape hints| 00:00 |
When shape tweening, sometimes your shape
tween doesn't morph the way you expect it to.
| | 00:05 |
Shape hinting is a technique you can use
to help better control your shape tweens.
| | 00:10 |
To demonstrate, I'm going to open
up a new blank document in Flash.
| | 00:14 |
Right away I'm going to grab my Text tool,
| | 00:16 |
I am going to choose an easy-to-read
font like Arial, I'll make it 72 points, and
| | 00:22 |
I'll choose a blue color.
| | 00:25 |
Now I'm going to type the number 1 on the Stage.
| | 00:28 |
Now I'm going to right-click on frame 24
in the Timeline and choose Insert Keyframe.
| | 00:34 |
A new keyframe is inserted with the
information from frame 1 copied into it.
| | 00:39 |
I'll use the Text tool to change the 1
into a lowercase a. Now I'll select the
| | 00:44 |
Arrow tool from my toolbox,
select the a, and go to the Modify menu.
| | 00:49 |
I'm going to choose Break Apart.
| | 00:53 |
My a is now a shape, and you can tell
by looking in the Property inspector.
| | 00:57 |
Now I'll do the same for
the number 1 on frame 1.
| | 01:01 |
I'll select it and this time instead of
going to the Modify menu, I'm just going
| | 01:05 |
to right-click and choose Break Apart.
| | 01:08 |
So we have a starting and an ending
state for our shape tween, so all that's
| | 01:13 |
left is to actually apply the tween.
| | 01:14 |
I'm going to right-click between frames
1 and 24 and choose Create Shape Tween.
| | 01:20 |
So, I'll scrub my Timeline to check out
the results and while the 1 does morph
| | 01:27 |
into an a, it's a little bit jumbled up
in the middle, and sometimes you'd just as
| | 01:32 |
well employ a boa constrictor for a tape measure
| | 01:34 |
as hope that Flash is going to be
able to correctly guess every time how you
| | 01:39 |
want to shape tween to go,
especially if the shapes are complex.
| | 01:43 |
Shape hints allow you to tell Flash
how you want it to match up the edge of
| | 01:46 |
the object at the start of the tween to
the edge of an object at the end of the tween.
| | 01:50 |
So to try this, I'll
move my playhead to frame 1.
| | 01:54 |
Now I'm going to go to the
Modify menu > Shape > Add Shape Hint.
| | 02:00 |
A small red circle with an A in it
appears on the screen, and I'll move this to
| | 02:04 |
the upper-left of the number 1.
| | 02:05 |
So, I'll add another shape hint by
going to Modify menu, choosing Shape, and Add
| | 02:11 |
Shape Hint again. I'll move the
second shape hint to the left edge of the
| | 02:16 |
number 1 like this.
| | 02:18 |
Note that it can be easy to try
and click and drag a shape hint and
| | 02:22 |
suddenly they all disappear.
| | 02:23 |
If this happens to you, go ahead and
just add another shape hint and they
| | 02:27 |
should all reappear.
| | 02:29 |
You can move any extra shape hints
just below another one or you could
| | 02:32 |
right-click on any extra shape
hints and choose Remove Hint.
| | 02:35 |
Now I'll move my playhead to frame 24.
| | 02:40 |
Right now we only see one shape
hint marked "b," but that's okay.
| | 02:43 |
When I move it out of the way, we
see that "a" was right underneath it.
| | 02:49 |
So, I'll move my "a" and "b" shape hints into
position as shown on the left side of the letter.
| | 02:54 |
Shape hints should always be on the
edges of objects, not in the middle.
| | 02:58 |
Notice how in our example the positions
of the shape hints on frame 24 roughly
| | 03:03 |
correspond to where the
matching shape hints are on frame 1.
| | 03:07 |
By positioning the shape hints, you're
telling Flash what edge to match up with
| | 03:12 |
what edge during tweening.
| | 03:13 |
The shape hints have individually
turned green when Flash recognizes a match
| | 03:18 |
between them, and when I go back to frame 1,
| | 03:21 |
the shape hints here have turned yellow,
indicating they've recognized what
| | 03:25 |
shape hint on frame 24
they're meant to match up with.
| | 03:29 |
With the shape hints now in place, I'll
scrub the Timeline again, and the tween
| | 03:33 |
looks a lot different.
| | 03:34 |
And in my opinion, it's a more attractive tween.
| | 03:38 |
You can you shape hints whenever
you want to help Flash define how a
| | 03:42 |
shape tween should morph.
| | 03:43 |
While you can have a very high number of
shape hints on the Stage, remember that
| | 03:47 |
shape hints should only go on
the edges of visual objects.
| | 03:52 |
| | Collapse this transcript |
|
|
11. Inverse KinematicsDefining inverse kinematics (IK) motion| 00:00 |
Inverse kinematics, or IK for short, is
a special kind of motion that you build
| | 00:05 |
with the Bone tool in Flash.
| | 00:07 |
IK animation is great for
anything animating with joints.
| | 00:11 |
Examples could be a person walking, or
a long earring with multiple sections on
| | 00:15 |
it swinging, or a long flexible
flagpole blowing in the wind.
| | 00:19 |
Let's take a look at an example of IK
animation by opening giraffeIK.swf from
| | 00:25 |
the exercise files for this chapter.
| | 00:27 |
So the giraffe's legs have joints,
and each leg moves independently, and each one
| | 00:33 |
of those legs has its own IK
animation applied on its own separate layer.
| | 00:38 |
The body and neck are moving
slightly as well, as the giraffe walks.
| | 00:42 |
IK motion is a lot like motion tweening.
| | 00:44 |
The terminology is a little different.
Instead of keyframes, you use poses, and
| | 00:49 |
poses are strung together in
what's called an armature layer.
| | 00:52 |
We'll take a look at how to do this in
another movie, so get ready for IK motion
| | 00:57 |
created using the Bone tool.
| | 00:59 |
| | Collapse this transcript |
| Using the Bone tool| 00:00 |
Let's start exploring IK animation by
opening bonetool.fla in the exercise
| | 00:06 |
files for this chapter.
| | 00:07 |
You can see we've got our giraffe here with
his body broken up into different layers.
| | 00:12 |
So moving up the layer stack, I'm going
to turn on and off the visibility for the
| | 00:16 |
back leg in the background.
| | 00:19 |
Now we have the front leg that's in
the background, then the tail, then the
| | 00:25 |
body and the head, then the back leg in the
foreground, and the front leg in the foreground.
| | 00:34 |
Click on anywhere in the giraffe
and look in the Property inspector.
| | 00:38 |
You'll see that everything is shapes and
to use IK animation, you can use shapes
| | 00:43 |
or movie clip symbols.
| | 00:44 |
We're going to start animating the
giraffe in a walk cycle, and we'll use IK
| | 00:48 |
animation to move his front leg, the
one in the foreground that looks like
| | 00:52 |
it's closest to us.
| | 00:53 |
Now I think animating anything
with four legs can get a little bit
| | 00:57 |
confusing when you have to keep track
of the position of each leg over the
| | 01:00 |
course of multiple frames.
| | 01:02 |
So we have a guide layer here at
the bottom with the label of model.
| | 01:06 |
I'm going to turn off the
visibility of all the layers except the model
| | 01:10 |
layer, so you can see it.
| | 01:11 |
I'm going to scrub the Timeline so you can
see the giraffe's walk on the model layer.
| | 01:17 |
This is what we'll be shooting for.
| | 01:19 |
Normally, you don't have a model layer
when you're creating motion like this, but
| | 01:23 |
this has been prepared ahead of time
for us so we could just have them as a
| | 01:26 |
guide to help us position the
legs as we practice with IK motion.
| | 01:30 |
So as I turn the visibility for all
the other layers back on, we see that the
| | 01:34 |
guide giraffe is a brighter yellow and
the giraffe we're going to animate is
| | 01:38 |
a more beigy yellow.
| | 01:40 |
And notice that the model layer has
the icon of a T-square in it to indicate
| | 01:45 |
that it's a guide layer.
| | 01:46 |
That means that when we test the movie,
the yellow little guide giraffe doesn't show up.
| | 01:51 |
Guide layers don't appear
in the published SWF file.
| | 01:54 |
So I'm going to lock all the layers
except the frontLegForeground layer.
| | 02:02 |
I'll turn off the visibility of everything
except the frontLegForeground layer as well.
| | 02:09 |
The first thing I'm going to do is use
my Arrow tool to select everything on the
| | 02:12 |
frontLegForeground layer.
| | 02:15 |
Now I'm going to select the
Bone tool out of the toolbar.
| | 02:18 |
It's above the paint bucket.
| | 02:19 |
I'm going to zoom in so we
can see better what were doing.
| | 02:23 |
Now I'm going to click and drag to
draw a single bone from the top of the
| | 02:27 |
giraffe's leg to his knee, and I'll
draw a second bone by clicking on the end
| | 02:32 |
of the first bone and dragging all the way
down to the very bottom of the giraffe's hoof.
| | 02:37 |
It can be easy to not drag far enough
and the hoof not be included in the bone,
| | 02:41 |
so be sure to drag all the way
down to the bottom of the hoof.
| | 02:44 |
So you can tell you've got all the
parts of the leg as part of the bone
| | 02:48 |
structure by looking in your Timeline.
| | 02:50 |
We now have this new layer called Armature.
| | 02:53 |
I'll just click somewhere else in the
Timeline so you can see the olive green background.
| | 02:57 |
The original layer of
frontLegForeground doesn't have anything in it anymore.
| | 03:02 |
You can see the blank keyframe here on frame 1.
| | 03:05 |
So we can go ahead and
actually delete this layer.
| | 03:08 |
If your frontLegForeground layer still
has something on it, you might have missed
| | 03:12 |
the bottom of the foot and it
wasn't included in the Armature layer.
| | 03:16 |
If this happens to you, what you could
do is undo until you're at the point
| | 03:19 |
where you have just the leg as a shape again
and then try drawing the bone system again.
| | 03:25 |
As a general rule, you should draw
bones on items from the natural anchor point
| | 03:29 |
of the whole bone system.
| | 03:31 |
So, for example, if you're drawing bones
for an arm, the bones should start from
| | 03:35 |
the shoulder, not the hand.
| | 03:37 |
On a flagpole, the bones should start from
the base of the flagpole and not the tip.
| | 03:40 |
So I'm going to use my Selection
tool. And we've got two bones here.
| | 03:45 |
Now I'm going to click on one of the bones.
| | 03:47 |
I'm going to drag the control point of
the bottommost bone, and you can see how
| | 03:51 |
we can move the position of the leg around.
| | 03:54 |
We can also select each
bone individually and move it.
| | 03:57 |
So you can see how this one rotates
around the control point at the knee.
| | 04:03 |
And if you'd do the one at the top,
it rotates around the control point at the top.
| | 04:06 |
I'm going to undo that positioning so
the leg is in the correct spot for this
| | 04:11 |
first frame of our walk cycle.
| | 04:13 |
So I'm going to click on the top bone
specifically and it changes color to
| | 04:23 |
indicate that it's selected.
| | 04:25 |
In the Property inspector,
you can see all kinds of information for
| | 04:28 |
this particular bone.
| | 04:30 |
The thing to notice immediately is
the navigation arrows at the top.
| | 04:33 |
You can see that by clicking these I
can select the next bone or the previous
| | 04:38 |
bone in the sequence.
| | 04:41 |
When you only have two bones,
you may not really need this.
| | 04:44 |
But if you have an armature with a lot
of different bones and some are kind of
| | 04:47 |
small, this can be a handy way to step
up and down the different bones, so you
| | 04:52 |
can control each one of them separately.
| | 04:54 |
Now if I click on the Armature layer
in the Timeline itself, in the Property
| | 04:58 |
inspector we get the option to view
the bones as Wire, Line, None, or Solid.
| | 05:09 |
Now, for the animation part. Since this
is going to be a walk cycle, we should
| | 05:13 |
have the end frame of the Armature
layer be an exact copy of the start frame,
| | 05:17 |
because the leg is going to be
doing a lot of motion in between.
| | 05:21 |
So I'll right-click on the last frame of
the Armature layer and choose Insert Pose.
| | 05:27 |
You can think of poses kind of like keyframes.
| | 05:29 |
We're going to define what position
the leg should have on that frame.
| | 05:33 |
So scrubbing the Timeline, the leg
doesn't really do anything yet in terms of
| | 05:37 |
motion, so let's fix that.
| | 05:39 |
So now I'm going to turn on the
visibility of the model layer and scrub the
| | 05:43 |
playhead a little bit.
| | 05:44 |
So I'm going to move carefully and
I'm going to go till about frame 34.
| | 05:58 |
At frame 35 the leg starts moving forward again.
| | 06:01 |
So I'm going to right-click on frame 34
in the Timeline and choose Insert Pose.
| | 06:09 |
So I'll grab the leg and move it so it
matches the guide as closely as I can get.
| | 06:14 |
So I'm going to scrub the playhead a
little bit more, and I think the next place
| | 06:27 |
I'm going to insert a pose is on frame 38.
| | 06:32 |
The giraffe's leg is kind
of bending forward here,
| | 06:35 |
so I'll click to insert a new pose
and position the leg to match the guide.
| | 06:39 |
So I'll keep scrubbing forward.
| | 06:44 |
All right, I think I'm going to do this
again on frame 42, so I'll right-click
| | 06:51 |
and choose Insert Pose, and I'll scrub
forward a little bit more and I think I'll
| | 06:59 |
do the last one on frame 45.
| | 07:00 |
Scrubbing between frame 45 and the end,
the foot matches pretty closely to the model.
| | 07:11 |
We could put another pose in there if we wanted,
but I think I'll just leave it the way it is.
| | 07:14 |
So I'm going to test the movie, and we
can see that the giraffe's leg is moving
| | 07:19 |
with really that kind of smooth motion.
| | 07:24 |
So back in Flash, if you find that
you've got an extra pose somewhere that you
| | 07:28 |
don't like, you just simply
right-click on it and choose Clear Pose.
| | 07:33 |
You can see that you could also
cut, copy, and paste poses as well.
| | 07:38 |
You can also grab any pose in the
Timeline and move it earlier or later on the
| | 07:41 |
Timeline if you need.
| | 07:43 |
I'm going to undo that change.
| | 07:45 |
There are more options to explore once your
poses are set, and we'll do that in another movie.
| | 07:51 |
To complete the rest of this giraffe,
you'd have to go through the same process
| | 07:54 |
that we just did for each leg, and
then the body and then the tail.
| | 07:58 |
That takes some time, especially if
you don't have a guide layer like we do.
| | 08:02 |
So, for now, what that complete
giraffe looks like is in a file called
| | 08:05 |
giraffeIK.fla in the start
folder, in the exercise files.
| | 08:12 |
When I publish this movie,
here is our IK-tweened giraffe.
| | 08:17 |
| | Collapse this transcript |
| Fine-tuning IK motion| 00:00 |
There are a number of different
options that you have for controlling the
| | 00:03 |
movement of joints and
bones in your IK animations.
| | 00:07 |
So, here we have our giraffe, and the
front leg has been animated with IK motion
| | 00:11 |
on an armature layer.
| | 00:12 |
I'm going to use my Arrow tool to click
the topmost bone in the giraffe's leg.
| | 00:18 |
In the Property inspector, we see a lot
of different options that we can use to
| | 00:21 |
control the armature movements.
| | 00:23 |
Speed refers to the stickiness or
stiffness of a joint. A joint with a low Speed
| | 00:29 |
value will be sluggish.
| | 00:30 |
A joint with the high Speed
value will be more responsive.
| | 00:34 |
You can really see the effect Speed
has when you drag the end of an armature.
| | 00:38 |
I'll drag my giraffe's leg around
and you see that it moves easily.
| | 00:41 |
I'm going to undo that change. Now I'll click
on the top bone to make sure that it's
| | 00:48 |
selected and change Speed from 100 to 10.
| | 00:53 |
Now when I drag the armature the
top bone moves a lot more slowly and
| | 00:57 |
sluggishly than before.
| | 00:58 |
I'm going to undo that position change
and then change the Speed back to 100.
| | 01:09 |
Pinning a joint means that you can
pin the tail of a selected joint to the
| | 01:13 |
Stage. So I'll move the armature around,
and of course, as we've seen before,
| | 01:17 |
the top joint and the joint
in between the bones both move.
| | 01:22 |
I'll undo that change, so the
position stays where it was originally.
| | 01:25 |
Now I'm going to click the top bone
and click Pin in the Property inspector.
| | 01:32 |
Now when I try to move the leg,
only the bottom part moves. I'm going to undo
| | 01:40 |
that position change.
| | 01:44 |
You can pin and unpin by clicking the
bone and then checking the checkbox. Or you
| | 01:50 |
can hover your mouse over a joint
and it turns into an icon of the pin.
| | 01:54 |
You can then toggle pinning on and off
by clicking, and you can tell if it's
| | 01:59 |
pinned when the blue X appears over the joint.
| | 02:03 |
For the next part, I'm going to zoom
in a little bit so it's easier to see
| | 02:06 |
what we were doing.
| | 02:09 |
For joint rotation, you see that I can drag
my armature 360 degrees around the topmost joint.
| | 02:18 |
If I select the top bone and then
click Constrain in the Rotation area in the
| | 02:22 |
Property inspector, my joint is now
constrained to 90 degrees' worth of rotation.
| | 02:26 |
It goes from -45 degrees to 45.
| | 02:30 |
Notice the very small angle indicator
that appears over the joint that shows
| | 02:34 |
how far I can rotate.
| | 02:36 |
When I try to rotate now, you can see that I
can't move the leg beyond the angle indicators.
| | 02:48 |
You can of course type in what angle
you want to use, so now I'll type in
| | 02:52 |
-90 for the minimum,
| | 02:55 |
and you'll see that the angle
indicator adjusts and my bone is now
| | 02:59 |
constrained to the new angle.
| | 03:04 |
I'll click on my top bone again to make
sure it'd selected and disable Joint Rotation.
| | 03:11 |
This will really allow us to see the
effect of checking the enable box for Joint: X Translation.
| | 03:17 |
Now that X Translation is enabled,
notice that over the topmost joint there
| | 03:21 |
is a horizontal arrow indicating the
direction that the bone can slide or translate.
| | 03:27 |
I can move it all the way
across the screen right now.
| | 03:31 |
When I check Constrain, we're now
constrained to 50 pixels of movement in either
| | 03:36 |
direction, as indicated by the line.
| | 03:42 |
I'll disable X Translation by
checking the box and now I'll enable Y
| | 03:46 |
Translation, which of course works
in a similar way as the X Translation.
| | 03:51 |
I can move this up and down.
| | 03:55 |
We'll just undo that.
| | 03:57 |
So, the other option we have in the
Property inspector is Spring, which we're
| | 04:00 |
going to cover in a separate movie.
You've now seen how to control the range of
| | 04:05 |
motion that each individual joint has
by clicking on the corresponding bone and
| | 04:09 |
then changing the settings
in the Property inspector.
| | 04:12 |
| | Collapse this transcript |
| Integrating IK Ease, Spring, and Damping features| 00:00 |
The Spring feature of IK animation allows you
to add realistic physics to your bone systems.
| | 00:06 |
In the file called spring.fla from the
exercise files from this chapter, we have
| | 00:11 |
a vine hanging in the jungle.
| | 00:13 |
Clicking on any part of the vine, you'll see in
the Property inspector that it's a movie clip.
| | 00:19 |
We have three individual movie
clips here that make up the vine.
| | 00:23 |
There's purposely a dark line at the
end of each part, so you can see all three
| | 00:27 |
of the movie clips easily.
| | 00:29 |
Now, using the Bone tool, I am going to
create an armature by first drawing one
| | 00:32 |
bone from just inside the top of the
first part of the vine down to the top of
| | 00:37 |
the second part of the vine.
| | 00:39 |
Now I will draw a second bone from the second
part of the vine to the top of the third vine.
| | 00:45 |
Now, using my Arrow tool, I'll move the
bone system up so it's positioned like so.
| | 00:50 |
Now, I am going to move the playhead
to frame 18 and move the vine down so
| | 00:55 |
that it's pointing straight down.
| | 00:59 |
You can see that Flash
inserted a pose for us on frame 18.
| | 01:04 |
The other way to do this would have
been to right-click on frame 18, choose
| | 01:08 |
Insert Pose, and then move the vine;
| | 01:10 |
either way is fine.
| | 01:11 |
So all this vine does right now is
the simple movement of going from the
| | 01:15 |
upper-left to straight down.
| | 01:16 |
Now, in the Timeline, we can get rid
of the blank layer left behind from when
| | 01:22 |
the armature was created.
| | 01:24 |
So I am going to get rid of the vine
layer. Now I am actually going to rename
| | 01:27 |
the Armature layer Vine.
| | 01:29 |
Now, if I click on the Armature span
in the Timeline, the Property inspector
| | 01:35 |
changes, and near the top we see
the dropdown for changing the Ease.
| | 01:39 |
This offers some pre-built
effects as to how the vine moves.
| | 01:43 |
We can test the movie, just so that we
can see how the vine moves by default.
| | 01:50 |
Now, I'll change the Ease to Simple (Fast).
| | 01:54 |
I am also going to
change the Strength up to 100.
| | 01:57 |
When I publish again, you will
see how the vine moves more quickly.
| | 02:02 |
We will wait for it to play again. There we go!
| | 02:06 |
Now, back in Flash, I will change
the Ease to Stop and Start (Fast).
| | 02:13 |
We will keep the
Strength at 100 and test again.
| | 02:16 |
We will wait a second for it to play again.
| | 02:24 |
So, easing can be a way to affect the
slowing down or speeding up of an armature
| | 02:28 |
as it plays its tween.
| | 02:30 |
So I am going to change this back to
an Ease of None and a Strength of 0.
| | 02:39 |
With the Armature span in the Timeline
still selected, in the Property area,
| | 02:43 |
I am going to find the Springs area and
make sure that the Enable checkbox is checked.
| | 02:49 |
Now I am going to click the topmost bone,
and we'll see that the Spring area in
| | 02:54 |
the Property inspector
for the bone is now enabled.
| | 02:57 |
Spring adds realistic
physics to your bone systems.
| | 03:00 |
I will show you what I mean.
| | 03:02 |
First, we're going to test the
movie again, just so we can have the
| | 03:04 |
movement fresh in our heads.
| | 03:08 |
Now, I am going to select the bottom
bone and give it a Spring Strength of 100.
| | 03:15 |
When we test again, you will see
that the vine swings like a pendulum.
| | 03:20 |
But you can see that the motion is
originating at the joint between the top
| | 03:23 |
bone and the next bone.
| | 03:25 |
So I am going to select the bottom bone
and turn the strength of the Spring back to 0.
| | 03:31 |
Now, I am going to select the top
bone and make the Spring Strength 100.
| | 03:39 |
Now I will test and you will see that
the vine swings a little bit, but the
| | 03:42 |
motion is coming from the topmost joint and the
rest of the vine has no spring. It's pretty stiff.
| | 03:50 |
So I am going to go back and give the
bottom bone a Spring Strength of 100 so
| | 03:54 |
now both bones have a Strength of 100.
| | 03:58 |
Now when I test, the pendulum motion is
more natural since both joints can spring.
| | 04:02 |
You will notice that the
pendulum keeps on swinging.
| | 04:08 |
Now, in real life, the arc of the
swing will get smaller and smaller over time
| | 04:14 |
and then the vine would eventually stop.
| | 04:16 |
Now, spring refers to the force of
motion that a bone system has. Damping
| | 04:22 |
refers to the heaviness of it, or perhaps a
better way to think of it is how fast it stops.
| | 04:28 |
So I am going to turn the
Damping of just the bottom bone to 100.
| | 04:31 |
I am going to test and the damping on
just that one part is enough for the vine
| | 04:38 |
to kind of swing and just about come to
a stop by the time the playhead runs out
| | 04:43 |
of frames and starts over on frame 1.
| | 04:47 |
So Spring and Damping allow you to
affect how much an item will move and how
| | 04:51 |
fast or slow that movement will degrade.
| | 04:53 |
Now, we can't have done all this
messing around with the vine and not have
| | 04:59 |
someone swing on it,
| | 05:00 |
so one great thing about IK motion
with movie clips like we're doing here is
| | 05:05 |
that the Swap button in the
Property inspector still works;
| | 05:08 |
it allows you to change what movie
clips are part of your bone system.
| | 05:12 |
So using the Arrow tool, I am going
to click once on the Stage to deselect,
| | 05:16 |
because right now I don't see the
Swap button in the Property inspector.
| | 05:20 |
I will click once to deselect and then
now click on the second bone, and here,
| | 05:25 |
we have the Swap button.
| | 05:26 |
I am going to choose the movie clip
called vineMiddleWithMonkey to replace the
| | 05:32 |
existing section of vine.
| | 05:36 |
And with that, we can test the movie.
| | 05:42 |
Now, obviously there is a little more
work that could be done here in terms of
| | 05:46 |
having the monkey be animated in his
nested timeline so to look a little more
| | 05:50 |
realistic as he swings.
| | 05:52 |
But the point is that Easing, Spring,
and Damping can all be used to affect the
| | 05:56 |
quality of movement of your IK tweens.
| | 05:58 |
Now, remember that Easing is
accessed by clicking on the IK span in the
| | 06:02 |
Timeline. Spring and Damping are
accessed by clicking on the individual bone in
| | 06:08 |
the armature.
| | 06:09 |
| | Collapse this transcript |
| Creating runtime IK| 00:00 |
We've already explored how you can
create IK motion at Authortime in Flash.
| | 00:05 |
One feature that's available to you
is having IK motion be accessible by
| | 00:09 |
the user at runtime.
| | 00:12 |
So, in the file called Runtime IK.fla
from the exercise files for this chapter,
| | 00:17 |
we have a bone system in an Armature
layer with a monkey swinging on a vine.
| | 00:23 |
Note that there are no pose frames except
for the one on frame 1 in the Armature layer,
| | 00:28 |
so when you scrub the Timeline,
there is not actually any motion.
| | 00:32 |
And if you click the Armature Span in
the Timeline and look in the Property
| | 00:35 |
inspector, you'll note the
Type dropdown in the Options area.
| | 00:39 |
I'm going to change this to
Runtime instead of Authortime.
| | 00:44 |
When I test the movie, you can
move the monkey around as you wish,
| | 00:48 |
and your end users can too.
| | 00:51 |
Now this could be a fun feature for a
game or a similar type of application.
| | 00:56 |
So when you want to have a runtime bone system,
| | 01:00 |
simply click on the
Armature span in the Timeline
| | 01:02 |
and then choose Runtime in the
dropdown in the Properties panel.
| | 01:06 |
| | Collapse this transcript |
| Converting IK to frame-by-frame animation| 00:00 |
IK animation and the Bone tool can create some
really fun and interesting effects in Flash;
| | 00:05 |
however, it for your end users to be
able to see IK animation, they need to be
| | 00:10 |
using Flash Player 10 or higher.
| | 00:12 |
If you're developing with IK but you
need to publish to an older version of the
| | 00:16 |
Flash Player, the best way to retain
your IK animations is to convert them to
| | 00:21 |
frame-by-frame animation.
| | 00:23 |
To do this in my giraffe animation, I
will need to unlock all of my layers.
| | 00:27 |
Then I will right-click in each Armature layer
and choose Convert to Frame by Frame Animation.
| | 00:33 |
| | 00:48 |
You can see that each layer is
converted to a frame-by-frame animation with
| | 00:52 |
keyframes on every frame.
| | 00:55 |
When I test the movie, the giraffe
goes on his walk just as well as he did
| | 00:58 |
before when he was IK motion.
| | 01:02 |
Frame-by-frame animation though can be
viewed by older versions of the Flash Player.
| | 01:06 |
So, just remember that once you've
converted to frame-by-frame animation,
| | 01:10 |
you can't go back to armature,
| | 01:12 |
so be sure your animation is
finalized or you have a backup copy somewhere
| | 01:16 |
before converting to Frame by Frame.
| | 01:18 |
| | Collapse this transcript |
|
|
12. Effects and MasksUnderstanding blend modes| 00:00 |
Using a blend mode in Flash refers to
how the colors of an instance interact
| | 00:05 |
with the colors behind it.
| | 00:07 |
You can use blending to make imagery
integrate in more with the background
| | 00:10 |
or make it stand out.
| | 00:12 |
Let's explore blend effects by opening
Butterfly.fla in the exercise files for this chapter.
| | 00:18 |
I am going to click somewhere offstage
and look in the Property inspector, and
| | 00:21 |
you can see that the
background color of our file is black.
| | 00:24 |
If you turn the bgGradient layer on and
off, you can clearly see that we have a
| | 00:29 |
rectangle on the Stage.
| | 00:30 |
I am going to click on the rectangle
and look in the Property inspector;
| | 00:34 |
you can see that this is just a shape
that was drawn with the Rectangle tool.
| | 00:37 |
It has a bradient fill going from blue to white.
| | 00:40 |
Having the black, white, and blue in the
background will allow us to better see
| | 00:45 |
the effects of the blends
on different backgrounds.
| | 00:47 |
So I am going to go ahead
and lock the bgGradient layer.
| | 00:50 |
Now I am going to click on the butterfly.
| | 00:52 |
Looking in your Property inspector,
you will see that the butterfly is an
| | 00:56 |
instance of a movie clip.
| | 00:57 |
To apply a blend to something on this
Stage, it has to be an instance of a movie
| | 01:02 |
clip, a button symbol, or TLF text.
| | 01:05 |
Let's practice adding some blends.
| | 01:07 |
With the butterfly selected, I'll
drop open the Display area of the
| | 01:11 |
Property inspector.
| | 01:12 |
Under the Blending dropdown, you can see
all the choices we have for blend modes.
| | 01:17 |
Overlay, Screen, and Multiply
are the three main blend modes.
| | 01:21 |
Most of the rest are variations on these three.
| | 01:23 |
They are also grouped according to
blend modes that do similar things.
| | 01:27 |
So for instance, Multiply makes things darker.
| | 01:30 |
So let's change this from Normal to Multiply.
| | 01:32 |
Notice how the part of the butterfly
over the white area still looks pretty
| | 01:36 |
light, but the part over the blue
blends nicely with the blue, and the part
| | 01:40 |
over the black is totally black.
| | 01:42 |
Overall, the butterfly is darker.
| | 01:45 |
Let's change the blend from Multiply to Darken,
and you'll see that the effect is similar.
| | 01:50 |
Screen is another one of the main
blend modes, and it makes things lighter,
| | 01:54 |
so let's try it. And it does make
the butterfly lighter with some really
| | 01:59 |
different effects, depending on what
part of the background you're looking at.
| | 02:02 |
Let's change our blend to Lighten, and
you'll see that it does a similar thing.
| | 02:06 |
Let's try a few more.
| | 02:08 |
So we will flip back to Normal for just
a second so we can start with the image
| | 02:12 |
of the butterfly kind of fresh in our minds.
| | 02:15 |
Now, Overlay is the third main blend mode.
| | 02:18 |
It removes a medium
grays and increases contrast.
| | 02:22 |
For this image that's not quite what I
thought it would be. We don't have a lot
| | 02:25 |
of medium gray in this butterfly
anyway, so let's try Hard Light.
| | 02:29 |
That does seem to increase the contrast,
especially in the area over the black.
| | 02:33 |
I will quickly click on Add and now
Subtract, and now Difference, and Invert,
| | 02:43 |
just so we can see what those come up with.
| | 02:46 |
There are other ways you
can play with the blends.
| | 02:48 |
For instance, I am going to change
the blend on the butterfly back to Hard
| | 02:51 |
Light. Now I am going to click on the
Stage to open the properties for the FLA
| | 02:55 |
document and change the
background from black to yellow.
| | 02:58 |
Notice how the butterfly changes when
the background goes from dark to light.
| | 03:02 |
I am going to change the background
color of the movie back to black, and the
| | 03:05 |
Blend mode for the butterfly back to Normal.
| | 03:08 |
You might be wondering about some of
the other options here in the Display area
| | 03:12 |
of the Property inspector.
| | 03:13 |
The Visible checkbox affects whether the
butterfly is visible or not in the published SWF.
| | 03:19 |
I'll uncheck the box and test my movie
by pressing Ctrl+Enter, and the butterfly
| | 03:23 |
doesn't appear as you'd expect.
| | 03:26 |
At first this might seem like a
strange option to include, but there are
| | 03:30 |
definitely use cases where you'd want
a movie clip onstage but not visible.
| | 03:34 |
The butterfly could be
turned on later via ActionScript.
| | 03:38 |
Back in Flash, we'll recheck the Visible
box, and now I will go on to change the
| | 03:42 |
Render mode from Original or
No change to Cache as Bitmap.
| | 03:47 |
Our butterfly is a vector image that
was imported into Flash. So being, the
| | 03:51 |
Flash Player has to constantly redraw
it at runtime, especially if it's moving
| | 03:56 |
around the Stage, and that can
eat a lot of processing power.
| | 03:59 |
Caching the vector image as bitmap
allows Flash to cache an internal bitmap
| | 04:04 |
representation of the movie clip and
refer to that copy, instead of having to
| | 04:08 |
redraw the vector version over and over.
| | 04:11 |
This can increase
performance as the movie is playing.
| | 04:14 |
Notice you can also choose to have
the background transparent or opaque,
| | 04:18 |
depending on if you need
transparency behind the art or not.
| | 04:22 |
Export as Bitmap can potentially
give you better performance in your
| | 04:25 |
animations as well.
| | 04:27 |
The difference is that Cache as
Bitmap creates a bitmap at runtime.
| | 04:31 |
Export as Bitmap creates a bitmap
from a movie clip at publishing.
| | 04:36 |
So don't think that this means it
creates an actual bitmap file that you'll find
| | 04:40 |
somewhere in your file
explorer on your computer;
| | 04:43 |
it just creates a bitmap image in a way that
your published SWF knows what to do with it.
| | 04:48 |
Export as Bitmap is better for more
complex vector shapes, like our butterfly
| | 04:53 |
here that has lots of colors and
curves and anchor points within it.
| | 04:56 |
You could also choose Transparent
or Opaque for the background as well.
| | 05:00 |
Both Cache as Bitmap and Export as
Bitmap are best used with movie clips that
| | 05:05 |
have mostly static content that
don't scale or rotate frequently.
| | 05:09 |
So we are working with a vector
butterfly, but Blend modes can work well on
| | 05:14 |
bitmap images that you've imported into
Flash too, as long as you take the bitmap
| | 05:18 |
and convert it to a movie clip first.
That's because, as you remember, you have
| | 05:23 |
to have a movie clip to use blend modes.
| | 05:25 |
This could be really useful if you
have part of a bitmap image or an
| | 05:28 |
entire image that you want to
apply a blend mode to, but don't have a
| | 05:31 |
program like Adobe Photoshop.
| | 05:33 |
You could just do it within Flash.
| | 05:35 |
So blending can be a good way to add
some interesting effects to your layouts.
| | 05:39 |
A good way to know the options
is to experiment with them against
| | 05:43 |
different background colors.
| | 05:45 |
Know that if you're working with
an image in another program like
| | 05:48 |
Photoshop, blends that you apply
there will come through when you import
| | 05:52 |
the image into Flash.
| | 05:53 |
Also, remember that to apply a
blend to something in Flash,
| | 05:57 |
it must be an instance of a movie clip
symbol, a button symbol, or a TLF text.
| | 06:03 |
| | Collapse this transcript |
| Applying filters| 00:00 |
Filters are special effects you can apply
to movie clip instances, buttons, or text.
| | 00:06 |
We haven't covered using text yet,
but the techniques we will look at here
| | 00:09 |
working with movie clips are
identical when applied to text.
| | 00:13 |
So, I have opened up the file called
solarHouseFilter.fla and when I publish, we
| | 00:18 |
see that the sun is already shining onto
the solar panel and the teapot, toaster,
| | 00:22 |
and clock are all plugged in.
| | 00:23 |
Let's add a filter to the sun so it
glows and another filter to the lamp and the
| | 00:28 |
upstairs bedroom to show
that it's plugged in too.
| | 00:31 |
First I'm going to shrink my
Timeline down a little bit so we have a
| | 00:34 |
little more room to work.
| | 00:35 |
The only layers that we need to work with
are the lamp, the sun, and the rays layer.
| | 00:39 |
Now I'm going to select the sun, and
in the Property inspector notice that
| | 00:43 |
this is a movie clip.
| | 00:44 |
I'm going to open up the Filters
dropdown in the Property inspector.
| | 00:49 |
There is an icon at the bottom that
looks like a little piece of paper.
| | 00:52 |
It's on the bottom-left. Click on
that once and you'll see the filters that
| | 00:56 |
we could choose from.
| | 00:57 |
I'm going choose Glow.
| | 00:59 |
You'll immediately see that a
glow has been applied to the sun.
| | 01:03 |
Changing the Blur X and Blur Y
setting affects how diffuse the glow is.
| | 01:07 |
You could use the slider,
but I'm going to type in 55.
| | 01:11 |
Notice that you can also click on the
little picture of the chain to unlink Blur
| | 01:15 |
X and Blur Y, so you can change the
blur horizontally or vertically without
| | 01:20 |
affecting the other dimension.
| | 01:25 |
You can play around with all the
other options to see what they do.
| | 01:28 |
I'm not going to change them all,
but I'm going to try changing the Quality to
| | 01:32 |
High and change the Color to kind of
an orange, and then I'm going to try
| | 01:37 |
checking the box for Inner
glow to see what that looks like.
| | 01:40 |
You can turn the visibility of a filter
on or off by clicking on the name of the
| | 01:44 |
filter, so I'll click Glow at the top and
then click on the little icon of the eye at
| | 01:49 |
the bottom to disable the filter.
| | 01:52 |
If you want to turn it back on again,
you have to click Glow at the top again
| | 01:56 |
and then click the eye a second time.
| | 01:58 |
If you don't like your filter, you can
click on the name of the filter--so I'll
| | 02:02 |
click Glow again at the top--and at the
bottom of the Property inspector click
| | 02:07 |
the little arrow to reset the
filter back to the defaults.
| | 02:10 |
I'm going to link up my Blur X and
Blur Y again so that if I change one, the
| | 02:15 |
other moves proportionally, I'm
going to change the blur to 55.
| | 02:19 |
So, let's say you really like this filter
and you want to apply it somewhere else.
| | 02:23 |
You could save the settings that
you've chosen for a filter as a preset to
| | 02:27 |
use on another object.
| | 02:29 |
I'm going to click on the title of Glow
again and now click the icon that looks
| | 02:33 |
like multiple pieces of paper and choose
Save as. I'm going to save my preset as myGlow.
| | 02:40 |
Let's apply the glow to the
lamp in the upstairs bedroom.
| | 02:44 |
So, I'll click on the lamp and you'll
notice that it's a movie clip instance.
| | 02:48 |
Now you can open up the presets in the
Property inspector and choose the myGlow
| | 02:53 |
preset that we just created, and there it is.
| | 02:56 |
You've probably also noticed the
Clipboard icon at the bottom of the
| | 02:59 |
Property inspector.
| | 03:00 |
This is useful for copying and
pasting a filter between items, as opposed to
| | 03:04 |
creating and using a preset like
we just did. So, let's try it out.
| | 03:08 |
First, we're going to get
rid of the glow on the lamp.
| | 03:11 |
With the lamp still selected, I'll
click on the Glow filter title and then at
| | 03:16 |
the bottom of the Property inspector, click
the icon of the trashcan to delete the filter.
| | 03:20 |
Now I'm going to click on the sun again.
| | 03:22 |
I'm going to click on the Glow
filter title in the Property inspector.
| | 03:26 |
Now under the Clipboard, notice the
options of Copy Selected, Copy All, or Paste.
| | 03:32 |
I'm going to choose Copy Selected.
| | 03:34 |
Now the Glow Filter settings are copied
to my computer's memory, ready to paste
| | 03:38 |
onto another object.
| | 03:40 |
So I'll click on the lamp movie clip, go
to the Clipboard again, and choose Paste.
| | 03:44 |
The Glow is apply to the lamp, but I
actually think it would be better as kind
| | 03:48 |
of a yellow color for the lamp,
so I'm just going to change it to yellow.
| | 03:51 |
Now a movie clip can have more
than one filter applied to it.
| | 03:55 |
I'm going to click the sun
and also give it a Blur filter.
| | 03:59 |
So you can see we've got two filters here,
and I'm going to increase the value of the Blur.
| | 04:05 |
It changes the sun, but I'm not
really sure I like the Blur effect.
| | 04:09 |
So, I'll just click on the Blur title
in the Property inspector and delete it.
| | 04:14 |
Just know that you can apply multiple
filters to a single item on the Stage.
| | 04:18 |
Now filters don't have to be applied
to just static elements. You can apply a
| | 04:22 |
filter to a movie clip, even if it's not moving.
| | 04:25 |
Remember how the sun's
rays move towards the house?
| | 04:28 |
I'll publish the movie so we can see that.
| | 04:33 |
Back in Flash, I'll double-click on the
sun ray movie clip, and we can see that
| | 04:37 |
it's got its own Timeline
| | 04:39 |
that's 45 frames long with a shape tween on it.
| | 04:41 |
I'll click Scene 1 to
return to the main Timeline.
| | 04:45 |
Now with sun ray selected, I'm going
to apply a Glow filter to this as well.
| | 04:50 |
I'm going to change the color to orange and
I'm going to bump up the Blur X and Blur Y.
| | 04:55 |
Now I'm going to test the movie, and you'll
see the glow applied during the entire tween.
| | 05:00 |
That sun looks positively scorching.
| | 05:02 |
I don't think we're going to have
to ever pay for electricity again.
| | 05:04 |
So, you can apply filters to movie
clips that are tweening, regardless if
| | 05:09 |
they have a nested Timeline, like this one, or
if they are just animated on the main Timeline.
| | 05:14 |
Filters are an easy way to add some
visual depth to your imagery. All you
| | 05:18 |
have to do is click on the item and open
the Filters section in the Property inspector.
| | 05:23 |
Remember that filters can be
applied to movie clip instances, button
| | 05:26 |
instances, and text.
| | 05:29 |
| | Collapse this transcript |
| Setting up masks | 00:00 |
A mask in Flash is a technique where
you can make only certain parts of the
| | 00:04 |
screen visible. You achieve the effect
using layers and it's not unlike using
| | 00:09 |
masks in other programs, like Adobe Photoshop.
| | 00:12 |
To practice with masks, I've opened
the file called mask.fla in the exercise
| | 00:17 |
files for this chapter.
| | 00:18 |
The file has two layers in it.
| | 00:20 |
If you turn the visibility of the
background layer on and off, you'll see that
| | 00:24 |
this is where the image of
the jungle background is.
| | 00:27 |
Clicking on the image in opening the
Property inspector we'll see that it's
| | 00:30 |
just an instance of a bitmap called
jungleBackground. So I'm going to go ahead
| | 00:34 |
and lock this layer.
| | 00:36 |
Now I'll turn the visibility of the
monkey layer on and off and click on him and
| | 00:40 |
you'll see that he is a movie clip.
| | 00:42 |
That's fine, so I'll just lock the monkey layer.
| | 00:44 |
So I'm going to create a mask so that
only the monkey's head appears so he
| | 00:48 |
looks like he's peeking
out from behind the tree.
| | 00:51 |
The first step is to create a new layer
above all the other layers and name it mask.
| | 00:59 |
Now we have to draw a shape. What this
shape covers will be what appears on the
| | 01:03 |
screen; everything else will be
masked out. So I'll grab my Oval tool.
| | 01:09 |
In the Property inspector, I'm going
to set the stroke to be Null, and I'll
| | 01:14 |
choose a color for the fill.
| | 01:15 |
I recommend a light color that
will show up easily, like light green.
| | 01:19 |
I'd also recommend setting the alpha of the
fill to 50 so it's a little bit transparent.
| | 01:25 |
This will make it easy to see what's
behind the mask, as you'll soon see.
| | 01:29 |
So, I'll draw an oval that
covers just the head of the monkey.
| | 01:32 |
You can see through the green because
the Alpha is 50%. And I'll use my Arrow
| | 01:37 |
tool to make a few adjustments to the
shape so it more closely matches the shape
| | 01:41 |
of his face and chin.
| | 01:43 |
The next step is to change the layer
from a regular layer to a mask layer. To do
| | 01:48 |
this, I'll double-click on the icon
next to the layer name that looks like a
| | 01:52 |
piece of paper to open up the
Layer Properties dialog box.
| | 01:56 |
Choosing the Mask radio button will
change the layer from a normal layer to a
| | 02:00 |
mask layer. So I'll click OK.
| | 02:01 |
You'll notice that the icon next
to the layer name now has changed to
| | 02:06 |
indicate it's a mask layer.
| | 02:07 |
However, nothing on the screen
looks like it's really changed.
| | 02:11 |
That's because we have yet to tell Flash
what layers we want to be affected by the mask.
| | 02:15 |
To do this, on the monkey layer, I'll
double-click on the icon next to the layer
| | 02:19 |
name to open up the Layer Properties box again.
| | 02:22 |
This time I'll change it from a
normal layer to a masked layer.
| | 02:26 |
You'll notice the layers icon has
changed to indicate that it's masked.
| | 02:33 |
It's also indented a bit
underneath the mask layer.
| | 02:36 |
Instead of going through the process
that we just did, you could just simply
| | 02:40 |
click and drag the layer name. I'll show you.
| | 02:43 |
When I drag the monkey layer out to
the left, notice the dark black line.
| | 02:48 |
The position of the black line
indicates where the layer is going to rest when
| | 02:52 |
you release the mouse. So I'll drag it
to the left and up and drop it and now
| | 02:56 |
it's a normal layer again.
| | 02:58 |
Now I'll drag it down and to the right
until we see that black line again, and I'll
| | 03:02 |
drop it underneath the mask layer.
| | 03:04 |
So we've set up our mask correctly, but
it still doesn't look like anything has
| | 03:08 |
changed on the screen.
| | 03:09 |
However, if you test your movie, you'll
see in the resulting SWF that the mask
| | 03:13 |
has been successfully applied; we can
only see the portion of the monkey's head
| | 03:17 |
covered by the mask.
| | 03:18 |
The entire background image appears
because it's just a normal layer.
| | 03:22 |
So here is the secret to be able to see the
effect of the mask while working in your FLA.
| | 03:27 |
All you have to do is lock
the mask in the monkey layers.
| | 03:31 |
Suddenly our mask effect appears.
| | 03:33 |
Notice what happens when you unlock the
mask layer. You can still see the shape
| | 03:38 |
of the green mask, but the effect
doesn't appear. But that's okay.
| | 03:41 |
I can adjust my green oval a little bit
more to make it a slightly tighter crop.
| | 03:46 |
Now I'll lock the mask layer again and
lock and unlock the monkey layer. You can
| | 03:51 |
see that while you can kind of see what
the mask effect is going to be, because
| | 03:55 |
the green square is visible,
it's not the full effect.
| | 03:58 |
The point is that when you're working
with masks, if you aren't seeing your
| | 04:02 |
full-on mask effect and want to, be sure that
all affected layers are locked and visible.
| | 04:07 |
So, masks can be a good
way to create visual effects.
| | 04:11 |
Remember that the bare minimum you need
to create masks are a mask layer and at
| | 04:15 |
least one masked layer
that's indented underneath it.
| | 04:18 |
The mask layer can be static, as this one is.
| | 04:21 |
It could also have a motion tween or,
even a shape tween in it, for a more dynamic
| | 04:25 |
feel, as we'll soon see.
| | 04:27 |
| | Collapse this transcript |
| Animating a mask| 00:00 |
One practical application of masks you
might like is to make masks animated in
| | 00:05 |
order to reveal different
parts of the screen over time.
| | 00:08 |
What I'm thinking of is
often called a wipe effect.
| | 00:11 |
You've probably seen it in places like
PowerPoint presentations where words on
| | 00:14 |
the screen reveal from left to right.
| | 00:16 |
Sometimes you see it in photo galleries,
where an entire picture is revealed
| | 00:20 |
from one side to another.
| | 00:21 |
So I've opened the file called
animatedMask.fla from the exercise files for this
| | 00:26 |
chapter to demonstrate.
| | 00:28 |
In our Timeline, we have our background
image as before, as well as our monkey.
| | 00:33 |
We also have a text layer
that says "Got any bananas?"
| | 00:36 |
Let's lock all three layers.
| | 00:38 |
So we'll have the monkey and the
text at first be hidden, and then later
| | 00:43 |
revealed by way of an animated mask,
| | 00:45 |
so we'll need a mask layer.
| | 00:47 |
I'll create a new layer above
the text layer and rename it mask.
| | 00:52 |
Now I'll create a shape to be our mask.
| | 00:54 |
I'm going to use my Rectangle tool
and set the Stroke to No Stroke, and have
| | 00:58 |
the Fill be a green color with
50% Alpha so I can see through it.
| | 01:02 |
I'll draw the rectangle off to
the left of the monkey and the text.
| | 01:08 |
Now I'll double-click on the icon in
the mask layer to open up the Layer
| | 01:12 |
Properties box, and I'll
change it to a mask layer.
| | 01:16 |
Now I'll drag the text and the monkey
layers up and to the right so they're
| | 01:20 |
indented under the mask layer.
| | 01:24 |
Notice the icons have also changed from
the piece of paper to the masked layer icon.
| | 01:29 |
Let's have our animated mask
move over the course of two seconds.
| | 01:33 |
I'll click on the pasteboard and open
the Property inspector, and we can see
| | 01:37 |
that our frame rate is 24 frames per second.
| | 01:39 |
So to have two seconds, we need to
extend our Timeline out to 48 frames, since
| | 01:44 |
24 multiplied by 2 is 48.
| | 01:47 |
So I'll select frame 48 of the mask
layer, hold down the Shift key on my
| | 01:51 |
keyboard, and then select
frame 48 of the background layer.
| | 01:54 |
Now I'll hit F5 to extend all
four layers out to 48 frames.
| | 01:59 |
We want to make our mask
animate from left to right,
| | 02:01 |
so we'll build a motion tween on the mask layer.
| | 02:04 |
Note that we could use a shape
tween just as well, but for this example
| | 02:07 |
we'll use a motion tween.
| | 02:09 |
Remember that to create a motion
tween you have to have a symbol.
| | 02:12 |
So on the mask layer, I'll select the
green rectangle and convert it to a symbol
| | 02:16 |
by right-clicking on it
and say Convert to Symbol.
| | 02:19 |
I'll call it mask and in the Type dropdown
| | 02:22 |
I'll make sure it's a movie clip and click OK.
| | 02:24 |
Remember the workflow to create a
motion tween is to tell Flash where you want
| | 02:28 |
it to start, apply the tween, and
then tell it where you want it to end.
| | 02:33 |
So I'll move the red
playhead on the Timeline to frame 1.
| | 02:36 |
The green rectangle is already over to
the left of the monkey and the text, and
| | 02:40 |
that's a fine place for the start.
| | 02:41 |
So now I'll right-click anywhere on the
mask layer in the Timeline and choose
| | 02:45 |
Create Motion Tween.
| | 02:47 |
To tell Flash where we want the tween
to end, I'll move my red playhead over to
| | 02:51 |
frame 48 and move the green
rectangle over to the right-hand side of the
| | 02:55 |
monkey and the text.
| | 02:57 |
Now I'll lock the mask layer and
scrub the playhead to preview the tween
| | 03:01 |
acting as the mask.
| | 03:02 |
I'll go ahead and test by pressing Ctrl+Enter.
| | 03:08 |
So our desired effect has been achieved.
| | 03:11 |
The monkey and text are revealed and
then disappear as the animated mask
| | 03:14 |
moves across the screen. Cool!
| | 03:17 |
Let's take this one step further to
demonstrate that we can have other motion
| | 03:20 |
going on on the Stage
despite there being a mask.
| | 03:24 |
To show this, we'll make
the monkey do a somersault.
| | 03:26 |
To make him jump, it's a simple
matter of applying another motion tween.
| | 03:30 |
I'll unlock the monkey layer, and
let's unlock the mask layer too so you can
| | 03:34 |
see where the position of the
monkey is relative to the mask.
| | 03:37 |
I'll make sure the red playhead is on
frame 1 and click once on the monkey.
| | 03:42 |
Looking in the Property inspector,
he's a movie clip, which is good.
| | 03:45 |
You'll have to have a symbol in
order to create a motion tween.
| | 03:48 |
So I'll right-click anywhere in the
Timeline on the monkey layer and choose
| | 03:51 |
Create Motion Tween.
| | 03:52 |
Now we just have to tell Flash where we
want the monkey's motion to end, so I'm
| | 03:58 |
going to move the red playhead to frame
48 and then click and drag the monkey
| | 04:01 |
slightly to the right.
| | 04:03 |
Now I'll click on the pink line that
indicates the motion path of the monkey.
| | 04:07 |
The properties for the motion path show
up in the Property inspector. And I'll
| | 04:11 |
type in 1 for Rotation
| | 04:13 |
so the monkey spins once over
the course of the 48 frames.
| | 04:17 |
Our changes are done, so I'll go ahead
and lock the two unlocked layers, and
| | 04:21 |
I'll publish the movie to see
the final effect. And it works.
| | 04:24 |
The text and the monkey are revealed and
disappear because of the animated mask,
| | 04:29 |
while the monkey is doing
his own motion-tween thing.
| | 04:32 |
Masks can create some complicated
visual effects, and remember that the bare
| | 04:36 |
minimum you need to create masks are a
mask layer and at least one masked layer
| | 04:41 |
that's indented underneath it.
| | 04:43 |
The mask layer can have a motion
tween or even a shape tween in it.
| | 04:46 |
The masked layers can be doing their
own things like motion tweening, just like
| | 04:50 |
our monkey layer, and the content
on that layer still be revealed and
| | 04:54 |
disappeared, thanks to the mask.
| | 04:57 |
| | Collapse this transcript |
|
|
13. TextComparing Text Layout Framework (TLF) vs. Classic text| 00:01 |
There are two main types of texts
that you can choose between in Flash:
| | 00:04 |
classic text and TLF text.
| | 00:07 |
TLF stands for Text Layout Framework.
| | 00:11 |
Now which one you pick affects the text
formatting options available to you and
| | 00:15 |
the final file size of your SWF.
| | 00:17 |
Let's take a peek at the different types
of text now, starting with classic text.
| | 00:22 |
So I am going to start in
a new blank FLA document.
| | 00:24 |
I am going to it as text.fla just on my Desktop.
| | 00:27 |
Now over in the toolbar
I'll click on the Text tool.
| | 00:31 |
It looks like a capital T. As soon
as you click it, you should see the
| | 00:36 |
Properties panel open with all the
different options you can choose from for your text.
| | 00:41 |
The first thing to notice is this first
dropdown at the top, which gives you a
| | 00:45 |
choice between Classic Text and TLF Text.
| | 00:48 |
I am going to choose Classic Text.
| | 00:50 |
Under the next dropdown you'll see you get a
choice between Static, Dynamic, and Input Text.
| | 00:56 |
We're going to choose Static Text.
| | 00:58 |
All we want our text to do is
just appear on the Stage, so this is
| | 01:01 |
the appropriate choice.
| | 01:02 |
We'll talk about the other
choices in a later movie.
| | 01:05 |
So first, the very basics of putting
text on the Stage. I am going to choose to
| | 01:10 |
have my text be Arial, bold, 18 points
big, choose black for the color, and have
| | 01:16 |
my text be left-aligned down
here in the Paragraph area.
| | 01:20 |
Now I am going to click just once on the
Stage and type the phrase, "This is the text tool."
| | 01:27 |
You can move your box around if you
want to adjust the position by selecting
| | 01:30 |
your Arrow tool and then
just moving the box around.
| | 01:33 |
Now I am going to grab the Text
tool again and make a new text box.
| | 01:38 |
This time I am going to hold the
mouse button and drag out to the right.
| | 01:43 |
This is a great way to create a text
box if you need a specific width. You can
| | 01:47 |
just type whatever you want into the text box
and it will wrap as needed to keep the width.
| | 01:52 |
I am going to type "Fixed width
text boxes wrap automatically."
| | 02:01 |
If I grab the Arrow tool again, I can
click on the edge of the box and adjust
| | 02:05 |
the width of the box if
needed, and the text will rewrap.
| | 02:08 |
Well, here's another weirder option.
| | 02:11 |
Let's hit Q to bring up the
transformation handles on the text box, and you can
| | 02:15 |
stretch, rotate, and skew the text.
| | 02:18 |
Now all the simple things we've done so
far you can do with classic and TLF text.
| | 02:25 |
For now, we don't need this bottom text
box anymore, so I'm just going to delete it.
| | 02:29 |
I'll select the remaining
text box with my Arrow tool.
| | 02:33 |
I am going to open up all the options that
we have for classic text boxes on the right.
| | 02:38 |
Now I am not really going to spend
hardly any time here because the breadth of
| | 02:42 |
the tools set for classic text
includes options that you're likely familiar
| | 02:46 |
with from other programs, especially
if you work with programs like Adobe
| | 02:49 |
Illustrator or InDesign.
| | 02:52 |
You can affect the X and the Y and the
Width and the Height up here at the top
| | 02:56 |
in the Position and Size area.
| | 02:58 |
The controls under Character for
selecting the Font Size and Style and in the
| | 03:02 |
Paragraph section are probably familiar,
or at least intuitive enough that they
| | 03:06 |
are easy to figure out.
| | 03:08 |
If you select your text box and type a
link into the Options area here, your
| | 03:12 |
text becomes clickable in the SWF.
| | 03:14 |
And finally, in the Filters area, you
can add a filter effect to your text just
| | 03:18 |
like we saw earlier in the course.
| | 03:20 |
I am going to delete that filter.
| | 03:23 |
I am also going to quickly publish the SWF file.
| | 03:26 |
I am going to close it right
away and click on the pasteboard.
| | 03:30 |
Now I'll look in the Property inspector
in the SWF History area and you can see
| | 03:33 |
the file size of our SWF is 1.6 kilobytes.
| | 03:38 |
That's pretty tiny, and that will
become important in just a minute.
| | 03:42 |
So there are two big differences I want to
point out between classic text and TLF text.
| | 03:47 |
TLF text, as we said before,
stands for Text Layout Framework.
| | 03:51 |
It was introduced in Flash CS5, and
your end users must have at least Flash
| | 03:55 |
Player 10 for TLF text to work.
| | 03:57 |
Now the first big difference is that
TLF offers a lot more text manipulation
| | 04:02 |
methods than classic.
| | 04:04 |
I am going to make sure that
my text box is still selected.
| | 04:07 |
I am going to change the dropdown
that specifies the type of text to TLF.
| | 04:12 |
Notice right away how we have a lot more
options in the Property inspector for text control.
| | 04:17 |
We'll go over some of the highlights
of those controls in a different movie.
| | 04:21 |
The second big thing between classic
and TLF text is file size, so I am just
| | 04:25 |
going to publish the movie
again by hitting Ctrl+Enter.
| | 04:28 |
I am going to close the SWF
right away and click on the pasteboard.
| | 04:33 |
Here in the SWF History section you can see
that our file size has jumped up to 22.7 kilobytes.
| | 04:40 |
That's pretty big for something
with just a simple line of text in it.
| | 04:43 |
I am going to go to the file explorer
and find where I saved my text Flash file.
| | 04:50 |
Here's the FLA and here's the SWF,
and you'll also see this textLayout SWZ
| | 04:56 |
file next to the SWF.
| | 04:58 |
TLF text depends on a specific
external ActionScript library to function
| | 05:03 |
properly, and that's it right there.
| | 05:05 |
It's created when you publish the SWF.
| | 05:07 |
When a SWF with TLF text is playing
from the web, it looks for this runtime
| | 05:12 |
shared library in a couple of places.
| | 05:14 |
First the SWF looks on the
local computer that it's playing on.
| | 05:17 |
Often the library is cached
there from previous Internet usage.
| | 05:21 |
If the SWF doesn't find it
there, it then looks on adobe.com.
| | 05:25 |
If that fails too, it looks for the
library in the same directory as the SWF.
| | 05:30 |
So to be totally 100% safe when using
TLF text in your Flash movies, you should
| | 05:35 |
be sure that the SWZ file is uploaded
to the same directory as the SWF on your
| | 05:41 |
web server, or wherever
your SWF file is going to go.
| | 05:44 |
There is a way to wrap up the
functionality of what's in the SWZ file into the
| | 05:49 |
SWF so you don't have to
have these two separate files.
| | 05:53 |
I am going to do it super quickly but
it's not recommended, since it makes your
| | 05:57 |
file size really big.
| | 05:59 |
So don't worry about
retaining how to actually do this.
| | 06:02 |
So I am going to click on the Stage to
make sure we have the Document Properties
| | 06:06 |
in the Property inspector.
| | 06:07 |
Then I am going to click on
the little wrench icon to edit
| | 06:10 |
ActionScript settings.
| | 06:12 |
Now I am going to choose the Library path tab.
| | 06:16 |
Down below, I am going to
click on textLayout.swc.
| | 06:20 |
This is our runtime shared library.
| | 06:23 |
Under Default linkage, here in this
dropdown, I am going to choose Merged into code.
| | 06:28 |
I am going to click OK and
now I'll publish my SWF again.
| | 06:35 |
I'll close it right away and in the
Property inspector, we see that the SWF
| | 06:39 |
file is now over 190K.
| | 06:42 |
So can see now why the functionality
of TLF text is wrapped up into that
| | 06:47 |
separate SWZ file, so you're not
bogging down your Flash SWFs that use TLF text
| | 06:52 |
with that file size every time.
| | 06:53 |
So now you have some criteria as to
what type of text you should use when
| | 06:58 |
creating Flash movies.
| | 07:00 |
If you need sophisticated controls for
text formatting, like multiple columns
| | 07:04 |
or wrapping text around, choose
Classic Text if you don't need that degree of
| | 07:09 |
layout control, or if you need to be
super careful about your final published
| | 07:13 |
SWF file size.
| | 07:15 |
| | Collapse this transcript |
| Exploring types of TLF and Classic text| 00:00 |
There are several choices as to the
type of text box you can create for both
| | 00:05 |
classic and TLF text.
| | 00:07 |
I've opened the file called
textComparison.fla to demonstrate.
| | 00:11 |
In this file the actual text boxes we'll
be working with are in blue. The black
| | 00:16 |
text is just acting as labels.
| | 00:18 |
So I'm going to click on the
first text box on the upper-left.
| | 00:22 |
If you look in the Property inspector it
will tell you that this is Classic Text
| | 00:26 |
and in the secondary dropdown it's Static Text.
| | 00:30 |
And of course, that's what
the label on the screen implies.
| | 00:33 |
In the Type dropdown we also have
Dynamic Text and Input Text choices.
| | 00:38 |
You can see that we have a labeled
example for each of those on the screen too.
| | 00:42 |
Here's Dynamic and here's Input.
| | 00:45 |
When I click on the box that says,
"I'm read only" and look in the Property
| | 00:50 |
inspector, note that it shows that
this is a TLF text box and the Type is
| | 00:55 |
of course Read Only.
| | 00:57 |
The other choices for TLF in the
dropdown are Selectable and Editable, and we've
| | 01:01 |
got an example of each of
those on the screen as well.
| | 01:04 |
Here's the Selectable box
and here's the Editable box.
| | 01:09 |
So starting with Classic Text > Static,
| | 01:12 |
I'll publish the movie. And this
text is just as the name implies:
| | 01:16 |
it's Static Text and it
just hangs out on the screen.
| | 01:19 |
It's great for things like labels or
blocks of text that just need to be present
| | 01:23 |
and not do anything.
| | 01:24 |
You'll notice when I try to select the
text in the SWF, I can't. If I go back
| | 01:31 |
into the FLA and select the text box,
in the Property inspector there is an
| | 01:36 |
option in the Character
section to make it selectable.
| | 01:39 |
It's this little box right here.
| | 01:40 |
I'll click that, test, and
now I can select the text.
| | 01:45 |
So you can have text be static or
selectable depending on if you want people to
| | 01:50 |
be able to copy it or not.
| | 01:51 |
Now let's look at Classic Text > Dynamic.
| | 01:59 |
This is a type of text box that
you can control with ActionScript.
| | 02:03 |
When I click on the box, notice in the
Property inspector there's a spot for instance name.
| | 02:08 |
I've given this text box
an instance name of dynamo.
| | 02:11 |
That instance name is the hook that
ActionScript needs to know what box I want
| | 02:15 |
to change and what I want it to say.
| | 02:19 |
When I test the movie, you'll see that
the ActionScript I wrote when I prepared
| | 02:22 |
this file has changed the text in
the box from "I'm dynamic" to "I changed."
| | 02:30 |
Now the classic text box for input text.
It's great for things like when you want
| | 02:35 |
someone to type in their name or
their phone number or an email address.
| | 02:39 |
You can pre-populate the box with instructions.
| | 02:41 |
Of course our box here
tells us to type your name here.
| | 02:45 |
Input text boxes can also have an
instance name--you can tell when I click on
| | 02:49 |
the text box and look in the Property inspector.
| | 02:52 |
I didn't give this one a name, but when I
test the movie you can see indeed, I can
| | 02:56 |
type something in, so I'll type in my name.
| | 03:00 |
If I had given this box an instance
name, I could then take what I typed in and
| | 03:06 |
do something with it, like put it in a
database or insert it into an email or
| | 03:10 |
save Anastasia as the
highest scorer in the game.
| | 03:13 |
I could then even output text back into the
box, but I didn't do that for this example.
| | 03:18 |
So that's the types of classic text.
| | 03:21 |
I won't even close the SWF here as we
move on to TLF, Read Only text, because as
| | 03:27 |
you can see, it really is just
read only. I can't select it.
| | 03:30 |
If you want selectable text when using
TLF you'll need to use selectable text
| | 03:35 |
like our middle text box here.
| | 03:37 |
You might be wondering why classic
text and TLF text both have what's
| | 03:42 |
essentially a read only type of text.
| | 03:44 |
Why would we need two
versions of almost the same thing?
| | 03:47 |
Well, the difference is in the types of
controls that you have over the flow and
| | 03:52 |
layout of static text.
| | 03:53 |
TLF has more options, like flowing
text from one text box into another in
| | 03:58 |
different places on the screen.
| | 03:59 |
We'll look at that in another movie.
| | 04:01 |
Closing the SWF, we'll move on to the
final type of TLF text, editable text.
| | 04:07 |
This type of box can have an
instance name and can be controlled by
| | 04:09 |
ActionScript as well.
| | 04:11 |
In fact, all the types of TLF text boxes can.
| | 04:14 |
Now the name of editable text is a
little misleading because this type of
| | 04:18 |
text box can actually do a lot.
| | 04:21 |
You can see that we've pre-populated it
with instructions to type your name here.
| | 04:24 |
All right, I will publish
the movie and type in my name.
| | 04:30 |
Even though the text box is editable, it's
also kind of like a dynamic text box too.
| | 04:36 |
When I click on the Enter button,
ActionScript takes the name that I typed in and
| | 04:40 |
puts it back out into the
phrase "Hello, Anastasia."
| | 04:44 |
If you're wondering where all the
ActionScript for this is, look in the Timeline
| | 04:48 |
on the actionscript layer.
| | 04:50 |
You'll see the keyframe on frame 1
has a little A above it, indicating
| | 04:53 |
ActionScript is attached there.
| | 04:55 |
To view it, you simply click on that
frame and open the Actions panel by going to
| | 04:59 |
Window > Actions, or hitting F9.
| | 05:03 |
We'll talk more about writing and
using ActionScript later in the course, so
| | 05:07 |
I'll just close my Actions panel for now.
| | 05:09 |
So there you have the
different types of text boxes.
| | 05:13 |
The choices between classic text and
TLF text are different because TLF text is
| | 05:18 |
newer, so it offers more choices in
terms of text layout and functionality,
| | 05:22 |
which we'll talk about later.
| | 05:24 |
If you don't need all those fancy
controls, it's fine to choose Classic Text.
| | 05:28 |
Remember, also, that classic text ends
up giving you a smaller SWF file size
| | 05:32 |
because it doesn't use that external
library that we looked at previously in
| | 05:37 |
the course.
| | 05:38 |
| | Collapse this transcript |
| Exploring TLF text features| 00:00 |
Let's explore some of the advanced
features offered by TLF text by opening a new
| | 00:05 |
blank FLA document and saving it as TLF.fla.
| | 00:10 |
I'll save mine in the end folder in
the exercise files for this chapter.
| | 00:15 |
Now I'm going to select my Text tool
and make sure that we have TLF Text and
| | 00:19 |
Read Only selected in the dropdowns.
| | 00:22 |
Make sure also that you've got Arial,
Regular font, size 10 point, with a color
| | 00:27 |
of black, and now I'm going to
draw a text box on the Stage.
| | 00:31 |
You'll notice that the Property
inspector changes to show all the different
| | 00:37 |
options that TLF text provides.
| | 00:39 |
I'll demonstrate one of those methods by
putting a lot of text into the text box.
| | 00:44 |
To save on typing, I'm going to
quickly copy and paste the chunk of text from
| | 00:48 |
the file called TLF text that's
sitting in the exercise files.
| | 00:52 |
Now in the Property inspector, let's
open up the area called Container And Flow.
| | 00:58 |
You'll see a spot here marked Columns.
| | 01:01 |
Let's change this from 1 to 3.
| | 01:05 |
You can see that we now have our text
in a nice three-column format. You might
| | 01:09 |
not be able to see it right away, so
you could stretch your text box out a
| | 01:12 |
little bit and scroll up, and there it is.
| | 01:15 |
I'm going to shrink it back down a
little bit more, because I'm going to need to
| | 01:18 |
need more room on the Stage in a little bit.
| | 01:20 |
And notice the little red square
at the bottom-right off the box.
| | 01:24 |
That's an indicator that
there's too much text for this box.
| | 01:27 |
The text box needs to be bigger.
| | 01:29 |
So, we could just click and drag the box to
make it bigger, but I'm not going to do that.
| | 01:34 |
Instead, I'm going to draw a second TLF
text box below the first one and then a
| | 01:39 |
third one with a more
vertical shape on the right.
| | 01:41 |
Now I'm going to select the first
text box and click on the little red box
| | 01:46 |
on the lower-right.
| | 01:48 |
As I move the arrow over the second
text box, you'll see the icon that looks
| | 01:52 |
like a linked chain appear next to my arrow.
| | 01:55 |
I'll click on the second text box and
you'll see that the text now flows from
| | 01:58 |
the first to the second.
| | 02:00 |
We can do this again by clicking on
the little red box at the bottom of the
| | 02:03 |
second text box, and then
mousing over the third text box.
| | 02:07 |
I'll click and now the text
flows into the third text box.
| | 02:11 |
I'm going to stretch this last text box
out so we finally have enough text box
| | 02:16 |
space to display all of the text.
| | 02:19 |
So, you could use flowing the text
from one box to another to create
| | 02:23 |
sophisticated layouts where the text
flows around other items on the Stage.
| | 02:28 |
You can unlink the boxes by clicking
the box with the arrow in it on the third
| | 02:32 |
text box. Then, hover over until an icon
of a broken chain comes up. I'll click
| | 02:39 |
and the link between the two boxes is broken.
| | 02:42 |
To restore, I'll click the red box at
the bottom of the second text box again,
| | 02:47 |
and as I move my mouse, a little icon
of words comes up, indicating I'm about
| | 02:51 |
to flow the text again.
| | 02:53 |
When I get to the third text box, the
chain icon shows up again, and I'll click
| | 02:57 |
to restore the text flow.
| | 02:59 |
So being able to control features like
columns and text flow from one box to
| | 03:04 |
another can make it a lot easier
to work with big chunks of text.
| | 03:08 |
TLF text also offers you
lots of other choices for text.
| | 03:12 |
You could turn it on its side so it
reads vertically up and down the page.
| | 03:16 |
You could change color settings like
tint and alpha and brightness and more.
| | 03:20 |
You can even use some basic HTML
tags in the text box via ActionScript.
| | 03:25 |
So when you need it, take some time to
further explore all the options available
| | 03:29 |
via the Property inspector.
| | 03:31 |
| | Collapse this transcript |
| Embedding fonts| 00:00 |
There is a technique you need to be
aware of when working with a text box where
| | 00:04 |
the text can be changed during runtime.
| | 00:06 |
An example could be where a user has
to type information in or the text is
| | 00:11 |
changed via ActionScript.
| | 00:13 |
I'll open the file called missingFont.swf
in the exercise files for this chapter
| | 00:18 |
to see this in action.
| | 00:19 |
The FLA also exists for your
reference, but the resulting SWF is what
| | 00:23 |
we're interested in.
| | 00:25 |
The SWF file has classic text input
text boxes with content displayed in two
| | 00:30 |
fonts, Arial and Tristan, or at least
it kind of does. The first line of text
| | 00:36 |
tells you it's supposed to be
displayed in Tristan font, but unless you have
| | 00:40 |
Tristan on your computer, it's probably not.
| | 00:42 |
For me, it looks like Flash
is substituting Arial instead.
| | 00:46 |
The second line of text is
just in boring old Arial.
| | 00:49 |
It's actually probably Arial
Bold, and it displays just fine.
| | 00:53 |
And here's why this is happening.
| | 00:55 |
When Flash displays input or dynamic
text boxes on the screen, it looks for the
| | 01:00 |
definition of the fonts being used
on the end user's local computer.
| | 01:04 |
If it finds those fonts, it uses
them and the fonts display correctly and
| | 01:08 |
everything is peachy.
| | 01:09 |
If those fonts are not found on the
user's local computer, Flash substitutes
| | 01:14 |
with something else.
| | 01:15 |
And as you can see here, this can
lead to some unexpected results.
| | 01:19 |
Notice the last line of text, which
tells you that this is what the font
| | 01:22 |
called Tristan looks like.
| | 01:24 |
You can see what it looks like because
I used a trick to make doubly sure that
| | 01:28 |
it would display as Tristan.
| | 01:30 |
To demonstrate, I am going to open a
new blank FLA document and type some
| | 01:34 |
text on the screen.
| | 01:37 |
It doesn't matter what
font, size, or color it is;
| | 01:40 |
I am just going to type in hello.
| | 01:44 |
Now, I will select the text with my
Arrow tool, go to the Modify menu,
| | 01:48 |
and choose Break Apart.
| | 01:50 |
The text turns from a
word into individual letters.
| | 01:54 |
Now, I will go to Modify >
Break Apart one more time.
| | 01:58 |
Look in the Property inspector and
you'll see that these are now shapes.
| | 02:01 |
They're just blobs of color that
happen to be in the shapes of letters.
| | 02:06 |
So that's what we have in the SWF file,
letters which look like Tristan but
| | 02:11 |
are really just shapes.
| | 02:12 |
I will go head and close both of those files.
| | 02:15 |
The way to get around this
problem is by embedding fonts.
| | 02:19 |
Embedding fonts basically means that
you're including, or embedding, the vector
| | 02:23 |
outlines of each character into your SWF file.
| | 02:26 |
This way Flash knows how to draw the
characters regardless of what fonts are on
| | 02:29 |
the end user's computer.
| | 02:31 |
As we've seen, embedding fonts
can be a very worthwhile activity,
| | 02:34 |
so let's learn how to do it by
first opening another blank FLA file.
| | 02:40 |
I'll grab the Text tool and choose Classic Text.
| | 02:43 |
Under the next dropdown, I am going to
make sure that Input Text is selected.
| | 02:48 |
For the Font, I'm going to
choose Baskerville Old Face.
| | 02:51 |
You should pick a font on your
computer that isn't one that everyone else
| | 02:55 |
would necessarily have.
| | 02:56 |
Now, I will draw a text box on the Stage
and type in "I need to embed this font."
| | 03:03 |
When it publish the movie. While it will
publish and look just fine to me because
| | 03:07 |
I'm using a font on my computer,
Flash will give an output message stating "Fonts
| | 03:12 |
should be embedded for any text
that may be edited at runtime."
| | 03:16 |
Then it encourages us to
embed our fonts. So let's do it.
| | 03:19 |
I will close the SWF file and return to Flash.
| | 03:22 |
I will grab my Arrow tool and be
sure that the text box is selected.
| | 03:26 |
Then in the Character area of the Properties
panel, I am going to click the Embed button.
| | 03:32 |
The Font Embedding dialog box comes up.
| | 03:35 |
Here in the Name area, you can type a
more descriptive name than the default to
| | 03:39 |
identify what the font
you're embedding is meant to be.
| | 03:42 |
So I'll type Baskerville.
| | 03:44 |
Then in the Character ranges area, I am
going to select to embed the uppercase,
| | 03:48 |
lowercase, and punctuation glyphs.
| | 03:52 |
I'd recommend not selecting all, because
as you can see, that would be 236 glyphs.
| | 03:58 |
You're embedding the vector outline
of each glyph into the SWF file, so the
| | 04:02 |
fewer glyphs you embed, the smaller
the file size, and the faster your
| | 04:05 |
movie loads for user.
| | 04:07 |
Once you've made your selections, click OK.
| | 04:10 |
At this point, you can publish your
movie again and note that the little
| | 04:13 |
reminder to embed fonts
that we saw before is gone.
| | 04:17 |
We're set for now, but know that if
you use an unusual font in multiple
| | 04:21 |
text boxes in your Flash movie, you need
to go through the process that we just
| | 04:25 |
did for each text box.
| | 04:27 |
Here's an alternative you could
use instead of embedding fonts.
| | 04:30 |
Using the Arrow tool,
I will select the text box again.
| | 04:34 |
Under the Font dropdown in the Property
inspector, I am going to scroll to the top.
| | 04:39 |
The top three fonts are device fonts:
| | 04:42 |
Sans looks like Arial, Serif looks like
Times, and Typewriter looks like Courier.
| | 04:47 |
By using device fonts, you're telling
Flash to just pick a font on the user's
| | 04:52 |
local computer that most
closely resembles the device fonts.
| | 04:55 |
By choosing device fonts, you don't
have to embed and the SWF size is smaller.
| | 05:00 |
However, since the font outlines are
not embedded, expect the possibility of
| | 05:05 |
some variation in what your end users will see.
| | 05:08 |
In the end, you don't know for sure
what font that they may have installed that
| | 05:12 |
corresponds to the device
font that you've chosen.
| | 05:15 |
Of course, you cold also choose you
text and go to Modify > Break Apart twice,
| | 05:19 |
just as we did before.
| | 05:21 |
Once your text is turned into shapes
though, you can't edit it like text,
| | 05:25 |
so be sure the text is
finalized before you do that.
| | 05:29 |
So now you've seen how and why to embed
fonts. The only other thing to remember
| | 05:34 |
is that you should embed fonts for
text boxes that can change or be edited
| | 05:38 |
during runtime, such as classic text
input boxes or TLF text-editable boxes.
| | 05:44 |
You don't have to embed
fonts for static text boxes.
| | 05:47 |
But if you're not sure, Flash
will warn you when you need to embed.
| | 05:51 |
| | Collapse this transcript |
| Working with right-to-left fonts| 00:00 |
TLF text offers you more options than
classic text in terms of controlling Asian and
| | 00:06 |
right-to-left fonts.
| | 00:08 |
You can see these options by
clicking on the Text tool in the toolbar or
| | 00:11 |
selecting a text box on the Stage.
| | 00:14 |
This one is a TLF text box
that's been set to Read Only.
| | 00:18 |
Notice in the Property inspector
that I've got the Advanced Character and
| | 00:22 |
Paragraph sections open.
| | 00:24 |
Now in the flyout menu at the
upper-right of the Property inspector notice the
| | 00:28 |
choice for Show Asian Options that you
can toggle on and off. When I turn it on,
| | 00:34 |
notice that we get some extra options
for Asian fonts in the Advanced Character
| | 00:38 |
Section, like Dominant
Baseline and Alignment Baseline.
| | 00:41 |
When I turn on the Show Right to Left Options,
| | 00:45 |
notice the new Direction dropdown
that shows up in the Paragraph section.
| | 00:49 |
So using these options in Flash, you
have support for Asian and right-to-
| | 00:53 |
left Languages.
| | 00:55 |
| | Collapse this transcript |
|
|
14. VideoUsing the Adobe Media Encoder| 00:00 |
Flash is the most common method
of delivering video over the web.
| | 00:05 |
Sites like The New York Times and YouTube
rely on the Flash platform to present video.
| | 00:10 |
Adding video to Flash is easy,
but before adding it to Flash the video itself
| | 00:15 |
must first be correctly formatted.
| | 00:17 |
The appropriate video format for Flash is
Flash video, which has an extension of FLV or F4V.
| | 00:24 |
F4V is a newer Flash video
format that supports the H.264 or high-
| | 00:31 |
definition video standard.
| | 00:33 |
Your viewers have to have at least
Flash Player 9 to view H.264 video.
| | 00:38 |
If you already have a video in FLV or
F4V format, you are all set and you are
| | 00:44 |
ready to use it in your Flash projects.
| | 00:46 |
If you have a video that's not in FLV
or F4V format, you are still covered,
| | 00:52 |
because when you purchase Flash
Professional you also get a stand-alone
| | 00:55 |
application called Adobe Media Encoder.
| | 00:59 |
You can use Adobe Media Encoder to
convert MOV, AVI, WMV, and some other video
| | 01:05 |
file formats into Flash video.
| | 01:09 |
I already have Adobe Media Encoder open.
| | 01:12 |
Once it's open, I am going to click the
plus button at the upper-left to select
| | 01:16 |
what video I want to convert.
| | 01:18 |
In the Start folder, in the
exerciseFiles for this chapter, I am going to choose
| | 01:22 |
KinetEco_640x480.mov.
| | 01:27 |
You could also choose any other video
file that you may have and want to use.
| | 01:33 |
So in Adobe Media Encoder, you can
click the Format dropdown to see the
| | 01:37 |
export options we have.
| | 01:39 |
We will go ahead and stick with F4V.
| | 01:41 |
Under the Preset dropdown, let's select
the second from the bottom, which starts
| | 01:46 |
with the words Web-640x480, 4x3. Under
Output File, make sure that you like the
| | 01:54 |
spot where Media Encoder
will put your converted file.
| | 01:59 |
Having it point to the end folder in the
exercise files for this chapter is just fine.
| | 02:04 |
There is already a video file there in case
Adobe Media Encoder isn't working for you,
| | 02:09 |
so you can either overwrite that file
or create a new name for the one that we
| | 02:13 |
are about to export.
| | 02:17 |
Now when I click on the listing we
chose under Preset, the Export Settings
| | 02:21 |
dialog box comes up.
| | 02:23 |
Here you can edit the length of your
video, you could resize it, you could add
| | 02:27 |
cue points to it so it can sync with
other things going on on the screen,
| | 02:31 |
you can affect the final
quality of the output and more.
| | 02:35 |
I am going to drag the play bar under
the video preview just so we can get an
| | 02:39 |
idea of what the video looks like,
but I am not going to make any edits.
| | 02:44 |
With that, I will click OK and then
back on the main interface, I am going to
| | 02:48 |
click Start Queue, which
looks like a green play button.
| | 02:54 |
The conversion begins and
we can watch the progress.
| | 02:56 |
While it's working, know that the
course Publishing Video with the Flash
| | 03:02 |
Platform by Lisa Larson-Kelley
here in the lynda.com online training
| | 03:06 |
library will give you excellent
detail on all the options of using the
| | 03:10 |
Adobe Media Encoder.
| | 03:11 |
(sound playing)
| | 03:14 |
And with that sound the
video is done processing.
| | 03:18 |
Here is the new video that I just converted.
| | 03:21 |
So now I'm ready to use it in a Flash project.
| | 03:24 |
| | Collapse this transcript |
| Integrating video| 00:00 |
Once you have a video converted to a
format that Flash can work with, integrating
| | 00:04 |
the video into your Flash projects
is a simple step-by-step process.
| | 00:09 |
I am going to start a new blank FLA
document by clicking ActionScript 3.0, and I
| | 00:13 |
will save the new file as video.fla.
| | 00:18 |
I'd suggest saving it in the folder for
the exerciseFiles for this chapter since
| | 00:23 |
that's where the video
we're going to use is located.
| | 00:25 |
The first thing I'm going to do is
change our Stage dimensions to 640x520 so we
| | 00:31 |
have room for the video, which is at
640x480, and the video controller bar that we
| | 00:37 |
haven't added in yet.
| | 00:39 |
To import the video, I will go to the File
menu and then choose Import, then Import Video.
| | 00:44 |
The Flash Video Import Wizard pops up.
| | 00:50 |
The first question you are
asked is, Where is your video file?
| | 00:52 |
It's on our computer, not already
deployed to a web server somewhere like this
| | 00:57 |
bottom choice mentions.
| | 00:58 |
So I'll click Browse and navigate to
the video file in my exercise files.
| | 01:04 |
For the next set of radio buttons,
you can choose between Load external video
| | 01:08 |
with playback component or Embed
FLV in SWF and play in Timeline.
| | 01:13 |
For most cases I would recommend Load
external video with playback component.
| | 01:18 |
By choosing this, you're telling your
FLA file to add a video playback component
| | 01:23 |
with controls like play, stop, pause,
volume control and so on to the Stage.
| | 01:29 |
That video playback component will then
point to and play the FLV file, which is
| | 01:34 |
sitting in the directory that we just specified.
| | 01:37 |
The FLV video file will not
actually be embedded into the Flash SWF.
| | 01:42 |
It won't appear in the library, but your
SWF will know which video file to play.
| | 01:47 |
This is advantageous because it's very easy
to change what video you're going to play.
| | 01:52 |
You simply change what FLV
video your SWF is pointing to.
| | 01:56 |
The second advantage is the file size of the
actual FLV video isn't bundled up into your SWF.
| | 02:03 |
If you chose the second option of
Embed FLV in SWF and play on Timeline, your
| | 02:08 |
FLV is actually physically added to
your Timeline and into your library.
| | 02:13 |
If your video file is huge, your SWF
file is huge, and it could take a really
| | 02:17 |
long time to download for your end viewers.
| | 02:19 |
The SWF file remains small if all we
have is a small playback component that
| | 02:24 |
just points to the FLV file.
| | 02:25 |
Also, if there's a problem in loading
the FLV file, at least the user has the
| | 02:30 |
playback component and whatever else is on
your Stage to look at while they are waiting.
| | 02:35 |
Anyway, embedding video onto your
Timeline would be appropriate only in cases
| | 02:39 |
such as the video is very, very short,
or if for some reason you want to be able
| | 02:43 |
to see what the video is
doing on each and every frame.
| | 02:47 |
With the availability of cue points
and other controls that exist for video,
| | 02:51 |
there's not many cases where you'd
want to embed video onto the Timeline.
| | 02:55 |
So moving on, I am going to
click Next to go to the next screen.
| | 02:59 |
Here's where you get to choose what
that video playback component or the video
| | 03:03 |
controls are going to look like.
| | 03:05 |
Take a minute to look through all the
different options available to you in the
| | 03:09 |
dropdown and what they include.
| | 03:11 |
For instance, some of them, like
SkinOverAll, have the control bar that
| | 03:15 |
appears over the video.
| | 03:22 |
Others, like this one with
the really long name of the
| | 03:25 |
SkinUnderAllNoVolNoCaptionNoFull, have
the controller appear underneath the video.
| | 03:32 |
You can also change the background
color of the player component here.
| | 03:35 |
I am going to stick with gray.
| | 03:40 |
Now I will click Next, and the
final page is a Review page.
| | 03:43 |
I will check that the location of the FLV
I want to use is correct. That looks good.
| | 03:48 |
It says here that a Flash Video
component will be created on the Stage and
| | 03:53 |
configured for local playback.
| | 03:55 |
Okay, that sounds fine.
| | 03:57 |
Finally, it's telling us that the
video component uses a skin that's been
| | 04:01 |
copied next to the FLA and that file
will need to be deployed to your server.
| | 04:05 |
Okay, we will see what that file looks
like in just a second, and it will become
| | 04:09 |
more clear than what it means.
| | 04:10 |
For now we're ready, so I am
going to go ahead and click Finish.
| | 04:15 |
Flash thinks about it for just a moment
and then magically, our video component
| | 04:19 |
appears on the Stage.
| | 04:20 |
I am going to select Fit in
Window so we can see everything.
| | 04:25 |
So here you can preview the video.
| | 04:27 |
You can play it, pause it,
and rewind it to the beginning.
| | 04:30 |
(clip playing)
| | 04:37 |
(Talia Wilson: We all enjoy the sun for light,
warmth, and even bringing cheer on a dreary day.)
| | 04:42 |
So you can see the other controls here.
| | 04:44 |
You can fast-forward and rewind and you
can play with the volume as well, on or off.
| | 04:50 |
Open the library and you will see that
all we have in here is an instance of
| | 04:54 |
what's called the FLV playback component.
| | 04:56 |
That's the video controller.
| | 04:58 |
Notice that the FLV file itself is
not in the library; we're just pointing the
| | 05:03 |
playback component to it.
| | 05:04 |
So go ahead and publish your movie and the
SWF file behaves about the same as expected.
| | 05:10 |
(clip playing)
| | 05:18 |
I published that for a reason.
| | 05:20 |
I am going to go ahead and open my
file explorer and navigate to the
| | 05:23 |
location where the FLA is.
| | 05:25 |
Here you can see the FLA and the
video.swf that we just published.
| | 05:30 |
If you follow the steps in this
video, the FLV file is also here.
| | 05:34 |
You'll also note the existence of
SkinUnderAllNoVolNoCaptionNoFull.
| | 05:41 |
Remember that last line on the Review
page of the Video Import Wizard and it
| | 05:45 |
talked about a skin file?
Well, that's it. It's a SWF file.
| | 05:50 |
The FLV playback component can have
many different skins, or looks, depending on
| | 05:54 |
which one you chose. This is what defines it.
| | 05:57 |
The SWF file is used by your
video.swf file to determine how the video
| | 06:02 |
playback component looks.
| | 06:04 |
So when you upload your video.swf
file to your web site, or wherever it's
| | 06:09 |
going to go, you need to upload not
only video.swf but skinUnderAllNoVol so
| | 06:15 |
the video player will appear.
| | 06:17 |
You will also need to upload the FLV file.
| | 06:21 |
Back in Flash, say you don't like the
layout of your video component anymore and
| | 06:25 |
you want to change it.
| | 06:25 |
I will simply click on the playback
component on the Stage and open the
| | 06:29 |
Property inspector.
| | 06:30 |
The Component Parameters area
is where all the options are.
| | 06:33 |
I am going to find and click on the
little pencil icon on the line that says
| | 06:38 |
skin and choose a different skin for the player.
| | 06:40 |
I am going to choose the very
last option in the list called
| | 06:45 |
SkinUnderPlayStopSeekMuteVol and click OK.
| | 06:50 |
You will see that the
look of the player updated.
| | 06:51 |
I will publish the FLA file again and
immediately close the resulting SWF.
| | 06:57 |
(clip playing)
| | 07:00 |
Back in the file explorer, you can see
that a new SWF file with a corresponding
| | 07:04 |
name for the new skin has been generated.
| | 07:07 |
If this is going to be your final choice
for the skin then this is the SWF file
| | 07:11 |
that you'd need to upload to your web
server along with all the other files.
| | 07:15 |
Back to Flash one more time.
| | 07:17 |
Let's say we want to change
what video we are going to play.
| | 07:20 |
Back in the Component Parameters area, I'll
click on the little pencil on the source line.
| | 07:25 |
In the Content Path box you can now
navigate to any other video file that you
| | 07:29 |
have, to change what video
is going to be displayed.
| | 07:33 |
When using video, you can have as
many other items on your FLA Timeline as
| | 07:37 |
you wish, but do follow the best practice
of having your video player on its own layer.
| | 07:42 |
If you'd like more detail about using the
Flash Media Encoder or more detail about
| | 07:46 |
using the FLV playback component,
check out some of the other courses about
| | 07:51 |
Flash video here in the
lynda.com online training library.
| | 07:54 |
One is Publishing Video with the
Flash Platform, by Lisa Larson-Kelley.
| | 08:00 |
| | Collapse this transcript |
|
|
15. AudioImporting and using audio| 00:00 |
Using audio is a great way to help bring
your projects to life, so let's look at
| | 00:04 |
how to integrate sound into Flash.
| | 00:07 |
We are going to use four
different sounds in our jungle scene:
| | 00:10 |
one is a background sound and then one
that will play when you click on each animal.
| | 00:15 |
Bringing sounds into Flash is a
delightfully easy one-step process; you simply
| | 00:20 |
import sounds directly into the library.
| | 00:22 |
Let's try it by going to the File menu and
then choosing Import, then Import to Library.
| | 00:31 |
In the start folder, in the
exercise files for this movie, you'll find three WAV
| | 00:35 |
files and one MP3 file.
| | 00:37 |
I am going to select them all.
| | 00:38 |
I'll click Open to import them, and
know that Flash can import audio and MP3,
| | 00:45 |
WAV, AU, and some other formats as well.
| | 00:50 |
Now that the sound is imported, I'll open
the Library panel, and we can see the sounds.
| | 00:54 |
I'll click once on JungleLoop.mp3
and you'll see a little picture of the
| | 00:59 |
waveform appear at the top of the library.
| | 01:02 |
You can click the tiny Play button at the
upper-right of the Preview panel to hear the sound.
| | 01:07 |
(sound playing)
| | 01:12 |
We have the sounds we need for our
project, but for future reference, know that
| | 01:16 |
Flash comes with a library of
free sounds available to you.
| | 01:19 |
To open, go to the Window menu and
then hover over Common Libraries and
| | 01:24 |
then choose Sounds.
| | 01:26 |
As you can see, we have a lot of
choices here. Let's scroll down a little bit.
| | 01:30 |
And if you want to try one out, you just
click it once to select and click Play to listen.
| | 01:36 |
(audio playing)
| | 01:38 |
If you want to use any of these, you
can just drag it from the panel over to
| | 01:41 |
your Library panel.
| | 01:43 |
I am going to go ahead
and close the Sound Library.
| | 01:46 |
So let's start by having the
JungleLoop.mp3 sound play at the beginning of the movie.
| | 01:51 |
So I'll make sure all my layers are
locked except for the audio layer.
| | 01:55 |
Then I'll click on the blank keyframe
on frame 1 of the audio layer so Flash
| | 02:01 |
knows where to start the sound, and now
I'll simply drag and drop JungleLoop.mp3
| | 02:05 |
from the library onto the Stage.
| | 02:07 |
It may seem counterintuitive
to do this, since audio has no
| | 02:12 |
visual representation,
| | 02:13 |
but you can see that now we can see the
waveform of the JungleLoop.mp3 starting
| | 02:18 |
on frame 1 of the audio layer.
| | 02:21 |
Let's go ahead and test our
movie by pressing Ctrl+Enter.
| | 02:24 |
(audio playing)
| | 02:30 |
As you saw, or rather, heard,
we have some problems.
| | 02:34 |
The sound plays a long time because it's a
very long sound, which in this case isn't bad.
| | 02:39 |
But after a few moments you can't really
tell because the sound kept starting over.
| | 02:44 |
We had multiple different copies of the
sound starting and continuing to play at once.
| | 02:48 |
We'll solve this problem in the next video.
| | 02:51 |
For now, so that sound doesn't drive
us nuts while we work with our animals,
| | 02:55 |
we're going to temporarily get rid of it.
| | 02:56 |
I'll do this by clicking on frame 1
of the audio layer and opening the
| | 03:01 |
Property inspector.
| | 03:02 |
In the Name dropdown, under
Sound, I am going to change this from
| | 03:06 |
JungleLoop.mp3 to None.
| | 03:08 |
You'll notice that the dropdown lists all
of the different audio files in the library.
| | 03:14 |
If you're doing something like testing
out different audio tracks in a movie to
| | 03:17 |
see which one works best, this is an easy way
to switch out which sound plays on your keyframe.
| | 03:24 |
Let's go on to the sounds for the
animals. So I'll unlock the three layers
| | 03:28 |
where the animals are.
| | 03:30 |
I'll click on the elephant and you'll
notice in the Property inspector that
| | 03:33 |
he is a button symbol.
| | 03:35 |
In tutorials earlier in this course,
the animals were all movie clips, so just
| | 03:39 |
know that all three animals here are buttons.
| | 03:41 |
So we've seen that the way you add
sound is by dragging and dropping the sound
| | 03:45 |
onto the Timeline where you want it to play.
| | 03:48 |
We need to drop this sound
onto the buttons Timeline,
| | 03:51 |
so I'll double-click on the elephant
to enter his Timeline and we're now
| | 03:55 |
in Edit-In-Place mode.
| | 03:57 |
You can tell we are in the buttons
Timeline because the elephant is clearly
| | 04:01 |
visible, but everything else back
up on the main Timeline is faded out.
| | 04:05 |
Also look on the upper-left. It shows Scene 1,
which is the main Timeline, and then elephant.
| | 04:11 |
So far, this button only has one
layer with the elephant on it.
| | 04:15 |
Keeping with the best practice of
having each item on the Timeline have its own
| | 04:19 |
layer, let's create a new layer in
the Timeline and rename it audio.
| | 04:24 |
We want the sound to play when the
user clicks on the button so the place we
| | 04:30 |
need to add a new keyframe is on the down frame.
| | 04:33 |
Let's do that by right-clicking on
the down frame in the audio layer and
| | 04:37 |
choosing Insert Blank Keyframe.
| | 04:40 |
From here, all we have to do is
open our library and drag and drop the
| | 04:44 |
Elephant.wav file to the Stage.
| | 04:46 |
The waveform isn't very visible in
the down frame, but you can see it;
| | 04:51 |
it's that small purple line.
| | 04:53 |
Let's have our elephant layer also match
our audio layer, so I'll right-click on
| | 04:57 |
the down frame in the elephant
layer and choose Insert Frame, or hit F5.
| | 05:04 |
This button is done, so I'll click
Scene 1 on the upper-left to return to the
| | 05:08 |
main Timeline. Now we'll
add sound to the monkey.
| | 05:11 |
I'll double-click on the monkey
button to enter his Timeline and just like
| | 05:14 |
the last button, let's create a new layer
above the existing layer and rename it audio.
| | 05:21 |
We want the sound to play when the user
clicks on the button, so we'll add a new
| | 05:25 |
keyframe on the down frame in the audio layer.
| | 05:28 |
We'll right-click and
choose Insert Blank Keyframe.
| | 05:31 |
Now I'll drag and drop the
Monkey.wave sound onto the Stage.
| | 05:36 |
And again, we'll have the monkey
layer match the audio layer, so I'll
| | 05:40 |
right-click on the down frame in the
monkey layer and choose Insert frame.
| | 05:44 |
And we'll need to do the exact
same thing for the giraffe as well.
| | 05:49 |
So I'll click Scene 1 to get back to the
main Timeline, then double-click on the
| | 05:54 |
giraffe to enter his timeline.
| | 05:56 |
I'll add a new layer and call it audio.
| | 06:01 |
I'll right-click in the down keyframe on
the audio layer and choose Insert Blank
| | 06:05 |
Keyframe and then from the
library, I'll drag and drop Giraffe.wav.
| | 06:11 |
And finally, I'll extend the timeline on
the giraffe layer out to the down keyframe.
| | 06:16 |
I'll click Scene 1 to go back to the
main Timeline one last time, and we're
| | 06:20 |
ready to test our movie.
| | 06:22 |
We are going to click each one
of the buttons to hear the sound.
| | 06:25 |
(sounds playing)
| | 06:36 |
Before we end, let's clean
up our library a little bit.
| | 06:38 |
In the Library panel, I'll create
a new folder and rename it sounds.
| | 06:44 |
Now I'll drag and drop all of the sounds into
that folder, so we can keep them all together.
| | 06:51 |
So now you've seen how to quickly and
easily add sound into your Flash movies.
| | 06:55 |
To review the steps, first you import
the sound into your Library, then you
| | 06:59 |
simply drag and drop the sound onto
the Stage at the keyframe on the Timeline
| | 07:04 |
you want the sound to begin playing.
| | 07:07 |
| | Collapse this transcript |
| Affecting playback control| 00:01 |
Sounds that you use in your Flash
projects sometimes don't behave exactly the
| | 00:04 |
way you'd like them to right off the bat,
| | 00:07 |
so let's look at some of the
options available for controlling audio.
| | 00:11 |
Right away, I'm going to test my movie.
| | 00:14 |
I can of course play any one of the
animal sounds by clicking the animals,
| | 00:18 |
but I'm going to try clicking one of
the buttons multiple times quickly.
| | 00:22 |
(music playing)
| | 00:28 |
You'll notice that the sound
can play over the top of itself.
| | 00:31 |
You have multiple instances of
the sound playing at the same time.
| | 00:35 |
It happens for all three animals.
| | 00:37 |
This could be a cool feature, depending
on what you're trying to achieve in your
| | 00:40 |
movie, but let's close our test movie
and make a quick adjustment so that each
| | 00:45 |
sound can play only once.
| | 00:47 |
The sounds are in the
individual button timelines,
| | 00:50 |
so I'll double-click on the
Elephant button to enter his timeline.
| | 00:55 |
What we need to do is click on the
Down frame in the Audio layer since
| | 00:59 |
that's where the sound is.
| | 01:01 |
Now, we'll open up the Property inspector.
| | 01:03 |
The Sync dropdown is where we need to be.
| | 01:06 |
It offers you the choices of
Event, Start, Stop, and Stream.
| | 01:12 |
The default when you drag and drop
a sound into your movie is Event.
| | 01:16 |
Sounds with the Event setting trigger
when the playhead enters the keyframe, and
| | 01:20 |
then the sound plays immediately until
it's done, but one instance of the sound
| | 01:24 |
can still be playing when a second is triggered.
| | 01:27 |
That's why our button behaves the way it does;
| | 01:30 |
every time we hit down, a new
instance of the sound begins.
| | 01:33 |
For our button sound, we need to choose Start.
| | 01:37 |
Sounds with the Start setting play only
if a previous version of the same sound
| | 01:41 |
has completed first.
| | 01:44 |
The Stop setting is pretty obvious;
| | 01:45 |
it stops playing a specified sound.
| | 01:48 |
The Stream setting causes the
Timeline to keep up with the sound.
| | 01:52 |
You'd use this setting in a situation
like if you had a long voiceover or a
| | 01:56 |
narration attached to your main
Timeline, and it's important for the sound to
| | 02:00 |
sync with visuals on the Stage.
| | 02:02 |
With the Stream setting, the Flash
Player will actually drop frames from
| | 02:06 |
the visual side in order for the graphics
to keep up with the sound, if it's necessary.
| | 02:11 |
So there are all our choices,
but Start is the one we want to keep.
| | 02:16 |
With that complete, let's click Scene 1
on the upper-left to return to the main
| | 02:20 |
Timeline and now double-click on the
Monkey button to enter his timeline.
| | 02:24 |
I'll do the same thing here that
we did for the Elephant button.
| | 02:28 |
I'll click on the down frame in the
Audio layer, open the Property inspector, and
| | 02:32 |
change the Sync dropdown to Start.
| | 02:36 |
With that, we'll go back to Scene 1 or
the main Timeline again, and do the same
| | 02:41 |
thing for the Giraffe button.
| | 02:45 |
Now, I'll go back to the main Timeline
and test the movie. Now notice when I
| | 02:49 |
press any of the animal buttons
multiple times in a row, the sound has to wait
| | 02:53 |
until the first instance is done
playing before it will play the sound again.
| | 02:57 |
(music playing)
| | 03:06 |
So our piece now is
missing the background music.
| | 03:09 |
I'll click once on frame 1 of the
Audio layer, and from the library, drag and
| | 03:13 |
drop the JungleLoop.mp3 file to the Stage.
| | 03:19 |
Making sure frame 1 is selected, now
I'll open the Property inspector and
| | 03:23 |
change the Sync dropdown to Start.
| | 03:28 |
This way we don't have multiple
instances of the sound playing every time the
| | 03:31 |
playhead gets to the end of the
Timeline and starts over at frame 1.
| | 03:35 |
Now, when I test the movie,
the background music will play.
| | 03:38 |
My other sounds can play on top of that
as well, but the background sound is a
| | 03:42 |
little bit loud, so it's hard to hear the
animals, and we'll fix that in the next video.
| | 03:46 |
(music playing)
| | 03:57 |
So now you've seen how to use the Sync
dropdown in the Property inspector for
| | 04:01 |
sounds, and this way you can control
the behavior of sounds during playback.
| | 04:06 |
| | Collapse this transcript |
| Controlling volume| 00:00 |
Flash offers some basic audio editing controls,
so let's practice using them on our movie.
| | 00:06 |
When we publish our SWF,
the background music plays.
| | 00:10 |
The problem is, it's so loud
| | 00:11 |
we can hardly hear the sounds of
the animals when we click them.
| | 00:14 |
(music playing)
| | 00:21 |
To fix this, first I'm going to lock
all the layers except the audio layer.
| | 00:26 |
Now I'll click on the keyframe where
the sound begins, so frame 1 of the audio
| | 00:30 |
layer, and open the Property inspector.
| | 00:33 |
In the Sound area, next to the Effect
dropdown, I'll click on the little icon of
| | 00:37 |
the pencil to edit the sound.
| | 00:40 |
This brings up the Sound Envelope.
The top track represents the left channel or
| | 00:45 |
a left speaker or left ear or however
is easiest for you to think about it.
| | 00:48 |
The bottom track represents the right channel.
| | 00:50 |
There are some simple controls for
changing your view at the bottom-right.
| | 00:54 |
Here you can toggle back and forth
between frames in seconds as the unit of
| | 00:58 |
measurement for the length of the sound.
| | 01:00 |
Using the little slider, you can scroll over
it and see that this sound is really long.
| | 01:05 |
It's about 650 or so frames, or just
over 27 seconds at our current frame rate.
| | 01:13 |
I'm going to leave this at seconds.
| | 01:16 |
You can also zoom in and out to see
more or less of the sound Timeline at once.
| | 01:21 |
I'm going to zoom pretty far out.
| | 01:26 |
Under the Effect dropdown at the top,
you can see some preset choices available
| | 01:30 |
for controlling the volume of the sound.
| | 01:32 |
You can have the sound
fade in, fade out, and so on.
| | 01:35 |
For now let's play the
sound once for a baseline.
| | 01:38 |
(music playing)
| | 01:43 |
Now we'll choose Fade In and you'll
see how we now have a graph on the sound
| | 01:47 |
envelope that indicates
how the sound will fade up.
| | 01:50 |
Let's click the little preview
arrow at the bottom to hear this.
| | 01:53 |
(music playing)
| | 02:01 |
On the Preset menu,
let's try Fade Right to Left.
| | 02:05 |
You can see how the graph indicates that
the right, or bottom track, is on at full
| | 02:09 |
blast and then drops off over time.
| | 02:11 |
And the left, or top track,
starts off quietly and gets louder.
| | 02:16 |
Since our sound is 27 seconds long,
we'll have to listen a long time to hear this.
| | 02:21 |
So instead, let's choose
Left Channel and try that.
| | 02:24 |
Let's test for the effect.
| | 02:26 |
(music playing)
| | 02:31 |
Notice also that you can grab the
little control squares on the tracks and move
| | 02:35 |
them around as you'd like.
| | 02:38 |
You can also click anywhere on
the line to add more control points.
| | 02:43 |
Notice that the dropdown at the top
changes to Custom when you do this,
| | 02:47 |
indicating it's a custom
sound control that you've set up.
| | 02:49 |
For this sound, we just need the
overall volume to be lower, so I'm going to
| | 02:54 |
choose None to reset everything back to nothing.
| | 02:57 |
Then I'll drag the volume lines way down
for both channels so the sound is just softer.
| | 03:04 |
I'll click OK and now when I test
the movie, the background sound is a lot
| | 03:08 |
softer and I can hear all the
animal sounds when I click on them.
| | 03:11 |
(music playing)
| | 03:23 |
Now our background sound is really long.
| | 03:26 |
It's actually okay, but Flash does
offer controls to shorten a sound.
| | 03:30 |
To do this, I'll click the Edit
button in the Property inspector again.
| | 03:34 |
To cut the sound down, I'm going to
grab this little control handle in
| | 03:38 |
the center and move it over to the left,
and you can see Flash cutting off the sound.
| | 03:43 |
Remember that you can zoom in on the
Timeline if you want for more detailed
| | 03:46 |
control, if there's a particular time
code that you're trying to shoot for.
| | 03:51 |
So I'll slide the chopper way
down so the sound is really short.
| | 03:54 |
You can even cut off some of the start of
the sound by using the handlebar in the left.
| | 03:58 |
I'll click OK to apply our changes
and notice how the sound wave on the
| | 04:05 |
Timeline is now shorter.
| | 04:06 |
It runs out around 42 frames.
| | 04:09 |
Let's test our movie by hitting
Ctrl+Enter and you'll hear, indeed, that the
| | 04:13 |
sound is nice and short.
| | 04:14 |
(music playing)
| | 04:21 |
To restore it, we'll just hit the Edit
button again and drag the sound crop
| | 04:25 |
handles back to where they were.
| | 04:29 |
Simple editing like this in Flash can
work really well for shortening sounds and
| | 04:33 |
controlling the volume;
| | 04:34 |
however, know that if you need to do
something more complex than this, like
| | 04:38 |
combine two different sounds into one
audio track, you'll need to edit your
| | 04:42 |
sound file in an outside audio editing
software and then bring the sound into Flash.
| | 04:47 |
A Google search can bring up
several free or inexpensive audio editing
| | 04:51 |
programs that you could use.
| | 04:53 |
| | Collapse this transcript |
| Choosing audio compression settings| 00:00 |
The file size on the final SWF is
often a concern for Flash developers,
| | 00:05 |
and audio can contribute
significantly to the SWF file size.
| | 00:09 |
This doesn't mean you should import
poor-quality sounds into Flash though.
| | 00:14 |
Flash can compress sounds for you, so
it's actually better to bring sounds in
| | 00:18 |
at a good quality so you can find the right
balance between file size and audio quality.
| | 00:23 |
The default compression Flash uses on a
sound is MP3, although others are available.
| | 00:29 |
The compression types and settings can be
changed in the Sound Properties dialog box.
| | 00:34 |
You open the Sound Properties dialog
box by double-clicking a sound's icon in
| | 00:38 |
the document library.
| | 00:39 |
I'll click on JungleLoop.mp3 and here
you can see the default setting used on
| | 00:44 |
the sound, MP3 compression at 16
kilobytes per second as the bit rate.
| | 00:51 |
If you click the Test
button, you can hear the sound.
| | 00:53 |
(sound playing)
| | 00:56 |
Now let's open the dropdown box and
choose MP3 but this time uncheck Use
| | 01:02 |
imported MP3 quality.
| | 01:03 |
I am going to drop the bit rate down to
8 kilobytes per second, which won't give
| | 01:08 |
us a very good sound quality.
| | 01:09 |
I will click Test to hear the sound.
| | 01:12 |
(sound playing)
| | 01:16 |
And you can hear that the
sound quality is a lot worse.
| | 01:19 |
However, our file size will be smaller.
| | 01:21 |
Let's click OK on the Sound
Properties Box and publish our movie by
| | 01:25 |
hitting Ctrl+Enter.
(sound playing)
| | 01:28 |
I am going to close the SWF quickly
because what I'm interested in is the
| | 01:32 |
file size of the SWF.
| | 01:33 |
We can see that by looking in the
Property inspector; it's 107.5 kilobytes.
| | 01:39 |
I am going to open the Sound Properties
dialog box for JungleLoop.mp3 and change
| | 01:44 |
the Sound Compression
settings back to the Default.
| | 01:47 |
I will hit OK and then Publish.
| | 01:52 |
(sound playing)
| | 01:54 |
Of course the music sounds a lot better
with that compression, but notice what a
| | 01:58 |
big jump in file size that we have;
| | 02:00 |
we are suddenly up to over 600 kilobytes.
| | 02:04 |
So if file size is a concern, you
might have to spend some time testing
| | 02:07 |
different compressions to find the right
balance between file size and sound quality.
| | 02:11 |
For instance, if I change JungleLoop
to not use the default settings but use
| | 02:17 |
16 kilobytes per second, it will give us an
okay sound quality and not such a big file size.
| | 02:24 |
(sound playing)
| | 02:28 |
You can see here it's only 134.5 kilobytes.
| | 02:34 |
Back to the Compression dropdown so
we can talk about the other choices.
| | 02:38 |
Speech can be a good choice for voiceovers.
| | 02:41 |
ADPCM and Raw can be good for very
short sounds, like door's slamming or clicks.
| | 02:47 |
MP3 can be good for music or longer sounds.
| | 02:51 |
A higher bit rate for MP3 or for ADPCM, a
higher sample rate, will give you a better sound.
| | 03:01 |
But the file size gets bigger
with those higher rates as well.
| | 03:06 |
In the end, I am just going to leave my
sound at the default settings of MP3 and
| | 03:10 |
use the imported MP3 quality.
| | 03:14 |
Double-clicking on a sound in the
library opens up the Sound Properties
| | 03:18 |
dialog box, which you can use to
adjust the compression settings and sound
| | 03:22 |
quality for your sounds.
| | 03:24 |
| | Collapse this transcript |
|
|
16. ActionScriptUnderstanding ActionScript and the Actions panel| 00:00 |
ActionScript is Flash's programming
language that allows you to make your
| | 00:04 |
Flash projects interactive.
| | 00:06 |
Some of the most common things
ActionScript is used for include detecting
| | 00:10 |
when buttons are clicked, controlling
what the playhead is doing, and opening
| | 00:14 |
URLs in other windows.
| | 00:16 |
In the file actionscript.fla from the
exercise files for this chapter, we'll
| | 00:21 |
use ActionScript to do all of
those things and create a simple game.
| | 00:26 |
To preview what we'll be building toward
over the next few movies, I'll open the
| | 00:30 |
file called jungleSoundsFinal.swf.
| | 00:33 |
My kids play a lot of games like this.
| | 00:35 |
They are just learning how
to point and click the mouse.
| | 00:38 |
(music playing)
| | 00:44 |
So the intro screen comes up
with our background music playing.
| | 00:48 |
The sound has been shortened and
fades out after just a few moments.
| | 00:51 |
When you're ready to play, you click Start.
| | 00:54 |
We're taken to another part of the
Timeline where our familiar animals are, and
| | 00:58 |
you can click on each one to hear the sound.
| | 01:00 |
(music playing)
| | 01:05 |
I will just click on the elephant, but
they all work. And when you're done, you
| | 01:09 |
can click on More Games to be taken
to a web page with more game choices.
| | 01:15 |
So let's take a look at where
we'll be working in actionscript.fla.
| | 01:20 |
The Timeline is structured so we
have two views of the game: the intro
| | 01:23 |
screen with the welcome and the
instructions and then the screen where the
| | 01:27 |
clickable animals appear.
| | 01:29 |
We'll go up layer by layer to
see how the layers are structured.
| | 01:33 |
So the background layer is
just the jungle background image.
| | 01:37 |
Notice that it stays present for
the entire length of the Timeline.
| | 01:41 |
The next layer is the Back to Games button.
| | 01:46 |
Click on it, and in the Property
inspector, you will see that it's an instance
| | 01:50 |
of a button symbol called backTo Games.
| | 01:53 |
I'll pop open the library and there it is.
| | 01:57 |
This button also appears for
the entire length of the Timeline.
| | 02:00 |
Now, I am going to double-click it in
the library to enter the button's timeline.
| | 02:05 |
Notice that the Up, Over, and Down
states are all defined with a different text
| | 02:10 |
color on each state.
| | 02:11 |
I will click Scene 1 to go
back to the main Timeline.
| | 02:17 |
The next layer is for the Start button.
| | 02:19 |
It's also a button
symbol sitting in the library.
| | 02:23 |
Notice that it only stays onstage for
the first 24 frames of the movie since
| | 02:27 |
there's a blank keyframe
on frame 25 on this layer.
| | 02:32 |
The Welcome layer has the
welcome text and the instructions.
| | 02:35 |
We don't have to do anything to
this layer, so it's already locked.
| | 02:39 |
Notice that this only appears
on Stage for 24 frames as well.
| | 02:43 |
The next three layers are where the
monkey, elephant, and giraffe are.
| | 02:47 |
They don't appear until frame 25, so I'll
move my playhead there so we can see them.
| | 02:51 |
I will open the Property inspector
and then I'll click on each animal.
| | 02:57 |
You can see that they're all button instances.
| | 03:00 |
I will double-click on the
monkey to enter his timeline.
| | 03:04 |
He has got two layers:
| | 03:06 |
one with the graphics on it and
one with the audio sound on it.
| | 03:09 |
The audio sound is on the down frame, so the
sound will play when someone clicks the monkey.
| | 03:14 |
The other animals are structured
this way as well, and these are the same
| | 03:17 |
animals that we built and added audio to in
the section about audio earlier in the course.
| | 03:22 |
So I will click Scene 1 to go
back up to the main Timeline.
| | 03:26 |
Now the next layer is the Sound layer,
which has the background music in it.
| | 03:30 |
Now, even though the waveform shows
for the entire length of the Timeline, I
| | 03:34 |
used the Edit Sound Properties Box,
just like we did earlier in the course, to
| | 03:38 |
turn the volume down and shorten up
the sound so it actually only plays
| | 03:42 |
for just a few seconds.
| | 03:44 |
If I click on frame 1 where the sound
begins and look in the Property inspector,
| | 03:48 |
the Sync dropdown is set to Start.
| | 03:51 |
That means that the sound has to finish
playing before another instance of it can start.
| | 03:56 |
Finally, the top layer is
where we'll add our ActionScript.
| | 04:00 |
I recommend keeping all your
ActionScript in one layer, preferably at the top of
| | 04:04 |
all the other layers.
| | 04:05 |
That way, it will be easy to find all the
ActionScript in your movie, since it's in one place.
| | 04:11 |
It's a convention among Flash developers
to have the ActionScript layer at the top,
| | 04:15 |
although it will still work if
it's lower in the layer stack.
| | 04:18 |
So let's test our movie.
| | 04:19 |
(music playing)
| | 04:29 |
As you may expect, the movie
just plays from start to finish.
| | 04:32 |
There's no option to sit and look at the
Welcome screen, since the playhead just
| | 04:36 |
runs on down the Timeline.
| | 04:38 |
Notice that the audio played once,
and then it started again when the
| | 04:42 |
playhead hit frame 1 again.
| | 04:45 |
So what we need to do is tell the
playhead to stop and wait for the user to
| | 04:49 |
click the Start button.
| | 04:52 |
Now, a fine place to have the playhead
stop would be frame 24, right before the
| | 04:56 |
first frame where you can
actually click on the animals.
| | 05:00 |
Actually, having it on frame 1 or any of
the other frames between 1 and 24 would
| | 05:04 |
work as well, since all of
these frames look exactly the same.
| | 05:09 |
For simplicity's sake, let's
have the playhead stop on frame 1.
| | 05:13 |
So the command to tell the
playhead to stop is, well, Stop,
| | 05:17 |
so let's add that to frame 1.
| | 05:18 |
To add ActionScript to a
frame, we first need a keyframe.
| | 05:23 |
frame 1 of the Actions layer
already has one, so we're set.
| | 05:26 |
So I will select frame 1 of the
Actions layer and open the Actions panel by
| | 05:31 |
going to Window and then Actions.
| | 05:33 |
Notice you could also use the hot key of F9.
| | 05:36 |
The Actions panel appears.
| | 05:38 |
You can drag it around, and you
can also resize it if you want.
| | 05:42 |
It also has some panels that you
can open and collapse by clicking this
| | 05:47 |
little bar in the middle.
| | 05:48 |
The upper-left panel here is help documentation.
| | 05:52 |
The lower-left panel allows you to navigate
between different frames that have ActionScript.
| | 05:57 |
For now, I will just collapse all of
that so we can just type our command.
| | 06:01 |
So I will type stop():
| | 06:03 |
and note that it's important for it to
be all lowercase, have the open and close
| | 06:07 |
parentheses, and the semicolon, and it
all has to have no spaces in between.
| | 06:12 |
You can tell it's correct if it turns blue.
| | 06:15 |
That's one way Flash helps you
validate your code, is by having correctly
| | 06:18 |
typed commands turn blue.
| | 06:20 |
With that, I am going to close the
Actions panel, and you can see that the
| | 06:24 |
keyframe on frame 1 now has a little A in it.
| | 06:27 |
That indicates that
ActionScript is attached to that frame.
| | 06:30 |
If you want to see it again, you just
click on the frame with the A in it and
| | 06:33 |
open the Actions panel again.
| | 06:37 |
Let's test the movie.
(music playing)
| | 06:43 |
So the music starts and fades out, and
we remain in that first view where the
| | 06:47 |
welcome message and the Start button is.
| | 06:50 |
It will stay here until
we click the Start button.
| | 06:52 |
Of course, right now it doesn't
work because we haven't written the
| | 06:55 |
ActionScript code for it yet.
| | 06:56 |
Notice that the sound doesn't play again either.
| | 07:00 |
We told the playhead to stop.
| | 07:02 |
That sound will only play again once the
playhead hits frame 1 again. Since it's stopped,
| | 07:07 |
that's not going to happen.
| | 07:08 |
You can go to View > Bandwidth
Profiler to see what the playhead is doing,
| | 07:13 |
and indeed, it's just sitting there on
frame 1, as indicated by the little green marker.
| | 07:17 |
So I am going to close the SWF.
| | 07:19 |
If you've written ActionScript code
but later you want to move it to a
| | 07:22 |
different part of the Timeline,
you can simply drag and drop the keyframe.
| | 07:26 |
I am going to drag it down
to frame 24 and test again.
| | 07:29 |
(music playing)
| | 07:36 |
You may have noticed the playhead
indicator go from frame 1 to 24 and now stop.
| | 07:41 |
I will play that again so you can
see it, since it goes by quickly.
| | 07:45 |
So watch that top area
of the Bandwidth Profiler.
| | 07:48 |
(music playing)
| | 07:54 |
So the view on the screen looks the
same, since everything on frame 24 looks the
| | 07:58 |
same way it does on frame 1, but our
playhead is hanging out on frame 24.
| | 08:02 |
So I am going to close the Bandwidth
Profiler and now I will close the SWF.
| | 08:07 |
I am going to drag my
ActionScript keyframe back to frame 1 again.
| | 08:12 |
But again, in this case it doesn't
really matter which frame between 1 and
| | 08:17 |
24 it's on, since all those frames look the
same regardless where the playhead stops.
| | 08:23 |
You might be wondering if there's a
reason that the first view here, where we see
| | 08:27 |
the welcome message and the
instructions and all that, is 24 frames long.
| | 08:31 |
Well, there's no real reason it's that way.
| | 08:34 |
It's mostly so that you as the developer can
have a clear view of each state on the Stage.
| | 08:40 |
I could select all the frames between frames
2 and 24 on all the layers and delete them.
| | 08:45 |
I will publish the movie and
it still works just the same;
| | 08:48 |
the playhead still stops on frame 1.
(music playing)
| | 08:54 |
Flash doesn't care if there's 1
frame on the Timeline or 24 or 100;
| | 08:58 |
it just stops where you tell it to stop.
| | 09:01 |
I think it's easier to see what's
going on if there's more than one frame, so
| | 09:05 |
I'm going to undo that deletion of the frames.
| | 09:08 |
I just hit Ctrl+Z to do that.
| | 09:11 |
So adding ActionScript to your FLA file
is as easy as creating a blank keyframe,
| | 09:16 |
opening the Actions panel,
and typing your ActionScript.
| | 09:19 |
We saw how the playhead obeyed the Stop
command as soon as it reached the frame
| | 09:23 |
where the ActionScript was.
| | 09:24 |
Remember the best practice of keeping
all your ActionScript on one layer if
| | 09:28 |
possible, and ideally in the
top layer of your layer stack.
| | 09:33 |
| | Collapse this transcript |
| Using code snippets to create clickable items| 00:00 |
In our animal sounds games so far, when
you publish the movie, the intro music plays.
| | 00:06 |
Then the screen hangs out at the
welcome screen, because there's a stop action
| | 00:10 |
on frame 1 of the Actions layer. Let's watch.
| | 00:13 |
(music playing)
| | 00:18 |
The buttons onstage respond to the mouse
hovering over and clicking on them, in terms of color.
| | 00:23 |
The keyframes in the Up, Over, and Down
states of those two buttons take care of that.
| | 00:28 |
But nothing actually happens
when you click on the buttons.
| | 00:31 |
Let's use ActionScript to detect
and respond to the button click.
| | 00:36 |
Specifically, we'll be working with code
snippets, which as the name implies, are
| | 00:41 |
little pre-built snippets of working code.
| | 00:44 |
In this movie, we'll be working
with the backToGames button.
| | 00:47 |
So when someone clicks on this button,
we want to open a browser window where
| | 00:52 |
the user can go and pick
some more games to play.
| | 00:55 |
We've mentioned before how for
ActionScript to be able to interact with
| | 00:58 |
something on the Stage, the item
needs to have a unique instance name.
| | 01:04 |
If we had 14 identical buttons on the
Stage, the instance name is how Flash
| | 01:08 |
would know which button we
want to control, in what way.
| | 01:11 |
So I'll click once on the Back to
Games button, and in the Property inspector,
| | 01:16 |
give it an instance name of backToGames.
| | 01:20 |
Now we're ready to add our ActionScript.
| | 01:22 |
I'm going to make sure my button is
still selected so Flash knows which item I
| | 01:27 |
want to write code for.
| | 01:29 |
Now I'll open the Code Snippets panel by
going to Window > Code Snippets.
| | 01:36 |
There are a lot of code snippets
organized by type, and the one that we want is
| | 01:41 |
in the Actions folder.
| | 01:42 |
It's called Click to Go to Web Page.
| | 01:44 |
Notice when I click once on it, we
get options to the right to give a brief
| | 01:49 |
description of what it does.
| | 01:52 |
Clicking on the specified object loads the
URL in a new browser window. That's good.
| | 01:58 |
That's what we want it to do. And if you
want a preview the code before actually
| | 02:02 |
applying it, you can click the Show
code button and it will show you the code.
| | 02:07 |
I'm ready to insert my code, so I'm
going to double-click on Click to Go to Web
| | 02:11 |
Page in the code snippets.
| | 02:12 |
I'm going to move my Actions panel up a
little bit and scroll up in my Timeline
| | 02:18 |
so I can see the top layers.
| | 02:21 |
Notice that Flash created
a new layer called Actions.
| | 02:24 |
It has a keyframe on frame 1
with the ActionScript code in it.
| | 02:28 |
Now I'm going to click on the
ActionScript keyframe on the ActionScript layer
| | 02:33 |
that has the stop action that
we inserted in the last tutorial.
| | 02:37 |
Now I'll click the keyframe on the
Actions layer and I can see the code that the
| | 02:40 |
code snippet created again.
| | 02:42 |
So you can toggle back and
forth between the two easily.
| | 02:45 |
Now I'm slightly annoyed that the code
from the Code Snippets panel didn't get
| | 02:49 |
put on the same keyframe as my stop action.
| | 02:52 |
The movie will work just fine when we
publish it if the two pieces of code are
| | 02:56 |
on separate layers like they are now.
| | 02:58 |
But the best practice is to keep all
your code in one place, so it's not lying
| | 03:03 |
around in a million different spots.
| | 03:05 |
So being, I'm going to highlight all of
the code that the Code Snippets panel wrote,
| | 03:10 |
cut it by hitting Command+X or
Ctrl+X, I'm going to click on the other
| | 03:15 |
ActionScript keyframe, and
then paste all my code in.
| | 03:20 |
Now we can delete the topmost
Actions layer since its empty.
| | 03:25 |
So here's our code, and note that if
we had pasted the code above the stop():
| | 03:29 |
action, it would still work just fine.
| | 03:32 |
I'm pasting it below
| | 03:33 |
because I think it kind of
mirrors the flow of the movie.
| | 03:36 |
First we want to playhead to stop and
then the button code will execute when
| | 03:40 |
someone clicks on the button.
| | 03:41 |
There are actually conventions for what
order you should put your code in, that
| | 03:45 |
just make it easy to read and organize,
and you'll learn about that more as you
| | 03:49 |
continue to study ActionScript.
| | 03:51 |
For now, let's take a look
at the code that was written.
| | 03:54 |
The lines in gray at the top are comment lines.
| | 03:57 |
They just document what the code
snippet does and tells you how to use it.
| | 04:01 |
You can tell they are
comments because the text is in gray.
| | 04:04 |
The comment begins with the
forward slash and asterisk on line 4.
| | 04:09 |
It ends with the asterisk
and forward slash on line 10.
| | 04:13 |
So it says, "Clicking the specified
simple instance loads the URL in a
| | 04:17 |
new browser window."
| | 04:19 |
The instructions are to replace
www.adobe.com with the desire to URL address, if
| | 04:25 |
I keep the quotation marks.
| | 04:27 |
Well, we can do that.
| | 04:28 |
I'll replace adobe.com with games.com.
| | 04:31 |
Of course you could put in
any URL here that you wanted to.
| | 04:36 |
If you're familiar with HTML code,
the underscore blank right here works just
| | 04:41 |
like it does in HTML: games.com
will open up in a new browser window.
| | 04:46 |
If you put _self here,
games.com would open up over on top of our
| | 04:51 |
Flash piece when viewed in a browser.
| | 04:54 |
In any case, our code is saying, hey Flash!
| | 04:57 |
Listen for when the button
called backToGames is clicked.
| | 05:01 |
Remember that the instance name we gave
to the button on the Stage was backTo-
| | 05:05 |
Games. and this is where the
instance name comes into play.
| | 05:09 |
When backToGames is clicked, run the
function called FL_ClickToGoToWebPage.
| | 05:16 |
And we just updated the FL_
ClickToGoToWebPage function a moment ago with games.com
| | 05:22 |
as the URL we want to point to.
| | 05:23 |
Note that the default function names
that Flash will come up with are usually
| | 05:28 |
long, and while descriptive, are sometimes a
little hard to figure out at first glance.
| | 05:33 |
If you want to change the name of
the FL_ClickToGoToWebPage function to
| | 05:37 |
something else, you could.
| | 05:39 |
I'm going to replace it with the name of
goToGames, because I think that's more intuitive.
| | 05:46 |
But now that I've changed the name of
the function that I want ActionScript to
| | 05:49 |
call, I have to change it here as well.
| | 05:52 |
If I tell Flash to look for a
function called goToGames but it's called
| | 05:57 |
FL_ClickToGoToWebPage, the
ActionScript is going to break.
| | 06:01 |
Note, also, that ActionScript is
very picky about capitalization.
| | 06:05 |
You have to be sure to type
goToGames exactly the same way in both spots.
| | 06:11 |
From here you could also delete out the
code comments if you wish, but I'm just
| | 06:14 |
going to leave them in.
| | 06:15 |
So that's enough code.
Let's test our movie.
| | 06:18 |
I'll publish, and when the movie
starts, I'll click Back to Games.
| | 06:21 |
(music playing)
| | 06:27 |
And a browser window opens up with games.com,
| | 06:30 |
so our code is working.
| | 06:32 |
So code snippets are an easy way to add pre-
written blocks of code to your Flash movies.
| | 06:37 |
Remember that to add code to our button
| | 06:40 |
we selected the button on the Stage first so
Flash knew which one we wanted to add code for.
| | 06:45 |
Then we gave it an instance name.
| | 06:48 |
Then you open the Code Snippets panel and
double-click the code snippet that you want.
| | 06:52 |
Each code snippet comes with
instructions on how you have to modify it, if it
| | 06:56 |
all, to make the code work for you.
| | 06:59 |
| | Collapse this transcript |
| Combining clickability and timeline control| 00:01 |
In our jungle animal sounds game,
we've used the stop action to keep the
| | 00:05 |
playhead stopped at frame
1 on the Welcome screen.
| | 00:09 |
We have also used code snippets to
make them more games button clickable.
| | 00:13 |
Now let's combine these two
tasks to make the Start button work.
| | 00:16 |
So we will write code that will detect
when the button is clicked and then get
| | 00:20 |
the playhead to jump to
frame 25 where our animals are.
| | 00:24 |
There is a code snippet
that will do this for us.
| | 00:26 |
So I am going to make sure that my
playhead is on frame 1 and I am going to
| | 00:31 |
click on the Start button.
| | 00:32 |
I am going to give it an instance name so
Flash knows what button I am trying to control.
| | 00:36 |
I will call it startButton.
| | 00:40 |
With the button still selected,
I will now go to the Code Snippets panel by
| | 00:44 |
going to Window > Code Snippets.
| | 00:47 |
The code snippet we want is in the
folder marked Timeline Navigation.
| | 00:51 |
It's called Click to Go to Frame and Play.
| | 00:55 |
I'll double-click it to have
the code added to my movie.
| | 00:57 |
I am going to scroll up in my Timeline
layers and just like last time, Flash
| | 01:04 |
added an extra layer called
Actions with my new actions in it.
| | 01:08 |
We've already got an ActionScript
layer and I want all the code in one place,
| | 01:13 |
so I am going to quickly cut all the
new code out of the top Actions layer and
| | 01:17 |
paste it in below all the
existing code on the ActionScript layer.
| | 01:24 |
Now I'll delete the empty Actions layer.
| | 01:29 |
So I will open my Actions panel up a
little bit more so I can read it, and I'll
| | 01:33 |
read in the code comments what this code does.
| | 01:36 |
On line 21 it says, "Clicking on the
specified symbol instance moves the playhead
| | 01:41 |
to the specified frame in the timeline
and continues playback from that frame."
| | 01:47 |
The instructions on line 25 are to
replace the number 5 in the code below with
| | 01:52 |
the frame number you would like the
playhead to move to when the symbol
| | 01:56 |
instance is clicked.
| | 01:59 |
So, all right. I'll go down to my code
and I will change the 5 to frame 25.
| | 02:06 |
Remember that that's the frame
where our animals first show up.
| | 02:11 |
So I will click frame 1 of the
ActionScript layer and open up the Actions panel
| | 02:15 |
again, and we will take
one more look at this code.
| | 02:19 |
So the code on line 28 is basically
saying, hey Flash, listen for when
| | 02:23 |
startButton is clicked.
| | 02:25 |
When it is, run the function called
fl_ClickToGoAndPlayFromframe_2, and that
| | 02:31 |
function begins then on frame 30.
| | 02:34 |
So fl_ClickToGoToAndPlayFromframe_2
is a long name and it bothers me,
| | 02:39 |
so I am going to change it to startGame.
| | 02:41 |
I have to change it in two places.
| | 02:45 |
Here is where the function is being called.
| | 02:47 |
Here below, on frame 30, is
the actual function itself.
| | 02:52 |
The names have to match exactly, so
I will make sure that it's spelled and
| | 02:55 |
capitalized in exactly the same
way in both spots. So let's test.
| | 03:00 |
(music playing)
| | 03:06 |
I'll click the Start
button and we go to the animals.
| | 03:09 |
(music playing)
| | 03:14 |
We are suddenly back at the main
Welcome screen again. What's the deal?
| | 03:18 |
Remember how we just told Flash to
make the playhead go to and play frame 25.
| | 03:24 |
It does exactly that.
| | 03:26 |
The playhead jumps to frame 25, runs down to
the end of the Timeline, and then starts over.
| | 03:32 |
It encounters the stop
actionscript on frame 1 so it stops there.
| | 03:37 |
If you click Start again, it does go to and
play frame 25 again, and then the cycle repeats.
| | 03:43 |
So what we need to do is one of two things.
| | 03:47 |
The first option could be to add a stop
action to the last frame of the movie.
| | 03:52 |
So the user would click Start, the
playhead would jump to frame 25, run down the
| | 03:57 |
Timeline, and then stop on the last frame.
| | 04:00 |
Alternatively, we could modify our
existing code from gotoAndPlay to a similar
| | 04:05 |
command called gotoAndStop, so let's do that.
| | 04:09 |
I'll click on frame 1 of the Actions
layer and open up the Actions panel.
| | 04:14 |
Now I will just change
gotoAndPlay to gotoAndStop.
| | 04:19 |
Note that the S has to be
capitalized and gotoAndStop should turn blue.
| | 04:24 |
When we test again and click Start,
the playhead will go to frame 25 and stop.
| | 04:29 |
(music playing)
| | 04:35 |
And it works perfectly.
| | 04:36 |
I click Start, we go to the frame where
we see the animals, and we can click on
| | 04:39 |
the animals to hear the sounds.
| | 04:41 |
(sound playing)
So our ActionScript is complete.
| | 04:46 |
If you wanted, you could delete out
the code comments that our code snippet
| | 04:50 |
just put in, or you could modify them
since their documenting gotoAndPlay.
| | 04:53 |
Now we are using gotoAndStop,
so that might be confusing.
| | 04:58 |
But you don't have to do
this if you don't want to.
| | 05:00 |
So we are able to combine making a
button clickable with controlling the
| | 05:05 |
position of the playhead on the Timeline.
| | 05:08 |
Organizing the Timeline and
controlling the playhead in this way allows
| | 05:11 |
your user to be able to move between
different screens, or scenes perhaps, on the Timeline.
| | 05:16 |
You could use this basic
structure to build all sorts of things.
| | 05:21 |
Imagine that our Jungle Welcome
screen was the intro page for a web site.
| | 05:25 |
You can have multiple, clickable
navigation buttons much like the Start button.
| | 05:30 |
When you just clicked on them, they
could move to different parts of the
| | 05:33 |
Timeline to see different parts
of information on your web site.
| | 05:36 |
The course Building a First Web Site, by
Paul Trani, here in the lynda.com online
| | 05:41 |
training library, capitalizes on this concept.
| | 05:44 |
There is also a lot of other really
useful code snippets that can write code for
| | 05:48 |
common tasks for you.
| | 05:49 |
If you'd like to study more about how
to incorporate code snippets into your
| | 05:52 |
Flash pieces, I'd recommend the course
Code Snippets and Templates in Depth, by
| | 05:57 |
David Gassner, here in the
lynda.com online training library.
| | 06:01 |
| | Collapse this transcript |
| Troubleshooting ActionScript| 00:00 |
The topic of this video may or may not
be a little advanced depending on your
| | 00:04 |
previous experience with coding.
| | 00:07 |
If you've coded in other languages
and are just getting started with
| | 00:09 |
ActionScript, it may help you
recognize similarities and differences.
| | 00:14 |
In any case, the following are commonly
asked questions and topics when people
| | 00:18 |
first begin with ActionScript.
| | 00:20 |
The example file we will be showing
here is the exact same as the end state at
| | 00:24 |
the animal sounds game that we
just completed in the previous movie.
| | 00:27 |
So, say you have written to ask
ActionScript code and it's just not working.
| | 00:32 |
Maybe you've checked it and rechecked
it against what's shown in the video and
| | 00:35 |
you can't get it to go.
| | 00:36 |
Well, there are a couple things
that you can do to narrow down an
| | 00:40 |
ActionScript problem.
| | 00:41 |
So I am going to open of the Actions
panel to show our ActionScript for this movie.
| | 00:46 |
The first thing that you can do is
double-check your capitalization and spelling.
| | 00:51 |
This may seem simple, but it is such a
common mistake that it's worth saying again.
| | 00:55 |
Double-check your
capitalization and your spelling.
| | 01:00 |
For instance, gotoAndStop, like we have
on line 31, must have the A in the And and
| | 01:06 |
S in the Stop capitalized.
| | 01:09 |
I want to include that you have
capitalized everything correctly is that
| | 01:12 |
reserved words and commands in Flash,
such as gotoAndStop, gotoAndPlay, or Stop,
| | 01:17 |
will turn blue when they're correct.
| | 01:20 |
If you're having trouble narrowing
down where in the code an ActionScript
| | 01:24 |
problem is, one thing to
try is to publish your SWF.
| | 01:27 |
I am going to purposely break my code here.
| | 01:31 |
The line of code on line 11 is
calling a function called goToGames and that
| | 01:36 |
actual function is on line 13.
| | 01:37 |
I am going to change the name of the
function so that it's just goToames.
| | 01:42 |
I am going to close the
Actions panel and test the movie.
| | 01:47 |
(music playing)
| | 01:52 |
So the movie doesn't work, and I also
get a little message from Flash in the
| | 01:57 |
Output panel as to the nature of the problem.
| | 02:00 |
The message itself may or may not be
clear to you, but you can at least tell
| | 02:04 |
which line number the error is on or around.
| | 02:08 |
Here it's telling me line 11 is breaking.
| | 02:10 |
Of course if we open up the Actions
panel again, that's because line 11 is
| | 02:16 |
looking for goToGames, but the function name
on line 13 is goToames, so I will fix that.
| | 02:23 |
Other common places where typos
occur are where you're trying to hook up
| | 02:27 |
instance names of things on
the Stage to ActionScript code.
| | 02:30 |
For instance, we have a button on the Stage
that has an instance name of Back to Games.
| | 02:36 |
You can see it in the Properties
panel, and the T and the G are capitalized.
| | 02:41 |
That instance name is being
used on line 11 in the code.
| | 02:44 |
We are telling Flash to listen for
the Back to Games button to be clicked.
| | 02:49 |
If you're instance name on the button
on the Stage has a capital T and G, but
| | 02:54 |
the one in the code doesn't--like I'll
change it right here--he code is going to break.
| | 02:58 |
So I will test the movie, and
it really broke that time.
| | 03:03 |
So I will go back and fix that.
| | 03:08 |
So you have seen how spelling and
capitalization is really important.
| | 03:13 |
What about spacing and
indentation in ActionScript?
| | 03:16 |
Spacing and indentation are not as
important as spelling and capitalization.
| | 03:20 |
So I am going to scroll down to line 28.
| | 03:23 |
Here we have two lines of ActionScript
code, and it doesn't matter if you have 1,
| | 03:29 |
10, or no blank lines in between them.
| | 03:32 |
Whatever makes sense to you in terms
of readability is fine. For instance, I
| | 03:36 |
could take away that empty line on line 28
and it would work just fine. I will test.
| | 03:41 |
(music playing)
| | 03:45 |
I could also add extra lines, say, the
above or below the gotoAndStop action in
| | 03:51 |
the actual function itself
and it would still work as well.
| | 03:56 |
(music playing)
| | 04:00 |
Indentation isn't so
important in ActionScript either.
| | 04:03 |
For instance, my gotoAndstop could be
indented like it is or it could be not indented.
| | 04:09 |
I could even pull up the curly braces
around it and it would still be just fine.
| | 04:13 |
(music playing)
| | 04:21 |
There are general conventions for
indentation and spacing that are widely used
| | 04:26 |
by ActionScript
developers, and coders in general.
| | 04:29 |
If you want Flash to rearrange your code
for you to match these conventions, you
| | 04:33 |
can click the Auto Format
button in your Actions panel.
| | 04:36 |
It's here at the top.
| | 04:38 |
Notice how it changed the code down
at the bottom of our Actions panel.
| | 04:42 |
If you want to make adjustments how
the auto formatter formats your code, you
| | 04:46 |
can change this by going to the Edit
menu in Flash, choosing Preferences, and
| | 04:51 |
then selecting Auto Format.
| | 04:53 |
I am just going to cancel out that.
| | 04:56 |
In the end, you're the one working in
your project, and readability for you and
| | 05:00 |
those who may help maintain your
files can be the driving force regarding
| | 05:04 |
indentation and spacing.
| | 05:06 |
You might already be familiar with
writing code in another language and have
| | 05:10 |
spacing conventions that you
like to follow, and that's just fine.
| | 05:14 |
Finally, regarding code comments, you
can choose to have comments or not to have
| | 05:19 |
comments in your ActionScript code.
| | 05:21 |
I recommend commenting as much as you
can, so you can remember what the heck
| | 05:25 |
your code does when you open it up
a few weeks or months down the road.
| | 05:29 |
A multi-line code comment starts with
an asterisk and a forward slash, just
| | 05:33 |
like it does on line 3.
| | 05:34 |
It ends with an asterisk and a forward slash.
| | 05:38 |
All the text typed in between the
lines are comments, and there can be as
| | 05:42 |
many lines as you want.
| | 05:45 |
A single-line comment starts with
two forward slashes like this, and now I
| | 05:49 |
can write my comment.
| | 05:53 |
When I hit Enter and type More
what I type is not a comment anymore,
| | 05:57 |
so I'll delete that line.
| | 05:59 |
That's just a few quick tips that may
be helpful about ActionScript. The big
| | 06:03 |
thing to take away is that spelling
and capitalization is really important,
| | 06:07 |
so pay attention to this as you
learn more about ActionScript.
| | 06:11 |
The course ActionScript 3.0
Essential Training, by Todd Perkins, here in the
| | 06:15 |
lynda.com online training library, is a
great place to go if you're ready to take
| | 06:20 |
the next steps with ActionScript.
| | 06:22 |
| | Collapse this transcript |
|
|
17. Integrating with Other ApplicationsIntegrating with Photoshop| 00:00 |
Flash and Photoshop play really nicely
together, in terms of passing assets back and forth.
| | 00:06 |
We're going to look at two ways
to integrate Flash and Photoshop.
| | 00:09 |
The first way is to edit a bitmap image
that's in the library directly from Photoshop.
| | 00:14 |
So I have an image of a palm tree on the Stage,
and let's say I want to make it black and white.
| | 00:18 |
Now, you could just edit the image
in Photoshop and reimport it into the
| | 00:22 |
library, but there's no need to do
that because you can perform that
| | 00:26 |
round-trip from within Flash.
| | 00:29 |
So in the library, I will right-
click and choose Edit with Photoshop CS6.
| | 00:35 |
Photoshop opens up, and now
I'll apply my color adjustment.
| | 00:39 |
So I will go to Image > Adjustments,
and then Black & White. I will click OK.
| | 00:46 |
So my palm tree is black and
white, and now I will save the file.
| | 00:50 |
Now, back in Flash, the image updated
itself on the Stage and in the library.
| | 00:54 |
So now, I'm going to delete the palm tree
off the Stage so we can look at something else.
| | 01:00 |
The second way to have Flash and
Photoshop interact is through importing PSD files.
| | 01:06 |
You can set your preferences for
importing PSD files through Flash Preferences.
| | 01:11 |
That's under the Edit menu,
and then Preferences on the PC.
| | 01:14 |
On the Mac, you go to the
Flash menu and then Preferences.
| | 01:18 |
Then you click PSD File Importer.
| | 01:20 |
Here you can select your choices as to
how image layers, text layers, and shape
| | 01:25 |
layers should be treated.
| | 01:27 |
The settings you pick here will be the
defaults that Flash uses every time when
| | 01:31 |
you import PSD files.
| | 01:32 |
Now, even though these are the
default settings, all these options are
| | 01:36 |
offered to you when you actually import in a
file, so you're not stuck with the defaults.
| | 01:41 |
For now, I am just going to hit Cancel,
and I am going to open my PSD file in
| | 01:45 |
Photoshop so we can take a quick look at it.
| | 01:47 |
So here's the PSD file open in Photoshop.
| | 01:50 |
It's the layout for the header
of a web page for a blog site.
| | 01:53 |
You can see that it's got a
lot of different layers in it.
| | 01:56 |
Here we've got a layer with some editable text.
| | 01:59 |
I will just grab my Text tool, and we
can see that it's the Faculty Blog layer.
| | 02:02 |
We've also got a whole bunch of layers
for all of the different letters that go
| | 02:07 |
around the Roux Academy logo, and we've
got some groups and some other things.
| | 02:13 |
So I am going to close this.
| | 02:14 |
Now, to import that PSD file into Flash, I
will go to File > Import > Import to Stage.
| | 02:22 |
So I will select my file and hit Open.
| | 02:28 |
So here in the Import to Stage dialog
box, you can see that we have the same
| | 02:32 |
layers that we just saw in Photoshop.
| | 02:34 |
So you can click each layer and
choose whether or not to include it in your
| | 02:39 |
import by checking the checkbox on
the left for each individual layer.
| | 02:44 |
You get choices for each
layer appropriate to what's on it.
| | 02:47 |
So for instance, for this group layer,
some of the choices are things like
| | 02:51 |
importing as editable paths and layer
styles or as a flattened bitmap image.
| | 02:57 |
On the faculty BLOG layer, I could
choose to import as editable text, vector
| | 03:01 |
outlines, or a flattened bitmap image.
| | 03:04 |
If I chose Flattened bitmap image, I
could choose to create a movie clip for
| | 03:07 |
each layer and even give it an instance name.
| | 03:10 |
I am going to choose
Editable text for this layer.
| | 03:14 |
Here at the bottom, you can choose to
import as Flash layers or keyframes.
| | 03:18 |
Choosing keyframes can be useful if you
use Photoshop to organize an animation
| | 03:22 |
by layer and you want to
bring it in that way into Flash.
| | 03:25 |
Maybe you could use it as a guide.
| | 03:27 |
For now, I'm just going
to stick with Flash Layers.
| | 03:30 |
You could also place layers at their
original position, and set Stage to same
| | 03:35 |
size as the Photoshop canvas.
| | 03:37 |
I am going to click both of
those checkboxes and click OK.
| | 03:41 |
So our PSD file is brought in.
| | 03:43 |
Depending on your choices when you
imported, your FLA file should be set up
| | 03:47 |
like your Photoshop file.
| | 03:48 |
Notice that each item is on
its own layer in the Timeline,
| | 03:53 |
so I will just turn some
of these layers on and off.
| | 03:57 |
The size of the Stage has been
modified to match the imported artwork.
| | 04:01 |
I can also still click on the
faculty BLOG text and change it.
| | 04:06 |
The editability has been preserved.
| | 04:09 |
So from here, you could animate the
logo or do whatever else you wanted to do.
| | 04:13 |
There is a file format called FXG.
| | 04:17 |
That's an XML-based image format that
works between different Adobe products.
| | 04:22 |
You can use it to move files between
Flash, Photoshop, and Illustrator too.
| | 04:26 |
We'll talk about that a
little bit in the next movie.
| | 04:29 |
So, round-tripping between Flash and
Photoshop, like we did with the palm tree, is
| | 04:33 |
an easy way to edit your images
and then update them in Flash.
| | 04:37 |
By setting your PSD Preferences in
Flash, you can control the balance between
| | 04:41 |
editability and quality that
will best suit your project.
| | 04:45 |
| | Collapse this transcript |
| Integrating with Illustrator| 00:00 |
There are multiple ways to get
artwork back and forth from Illustrator into
| | 00:04 |
Flash and from Flash into
Illustrator, and beyond.
| | 00:08 |
Now, one way to get artwork from
Illustrator into Flash is by directly importing
| | 00:12 |
an Illustrator AI file.
| | 00:14 |
I've got a file called
RouxAcademyLogos open in Illustrator, and you can see
| | 00:19 |
that it's got multiple versions
of the Roux Academy logo in it.
| | 00:23 |
You can import this
whole thing right into Flash.
| | 00:26 |
Before I import, I am going to take a
look at the default settings that will be
| | 00:29 |
used when the file comes in.
| | 00:32 |
So, in Flash, I will go to the
Edit menu and then Preferences.
| | 00:36 |
On Mac, that would be under the
Flash menu and then Preferences.
| | 00:40 |
I'll click to the AI File Importer screen.
| | 00:43 |
Here I can set my Preferences for
importing AI files in general, as well as how
| | 00:48 |
Flash should import text, paths,
images, groups, and layers.
| | 00:53 |
What you set here creates the defaults for
how Flash treats AI files when you import them.
| | 00:58 |
But as you will see in a moment, you
can change your choices for individual
| | 01:02 |
elements if you wish at the time of import.
| | 01:05 |
For now, I'm going to close out
of this Preferences dialog box.
| | 01:08 |
Now, in Flash, I am going to create a
blank document, and now go to File, and
| | 01:14 |
then Import, and Import to Stage.
| | 01:16 |
I am going to choose my AI file in the
exercise file for this chapter, and the
| | 01:21 |
Import to Stage dialog box comes up.
| | 01:23 |
So you can click on each individual
item in the file and choose whether or not
| | 01:28 |
to import it by checking or
unchecking the box on the left.
| | 01:31 |
When you click an element on the left,
you're presented with the settings that
| | 01:37 |
you can choose from for that
element individually on the right.
| | 01:41 |
So, for instance, when I click this
Path layer, I can choose to import as an
| | 01:45 |
editable path or a bitmap.
| | 01:48 |
At the bottom of the screen, you
can choose to import as Flash layers,
| | 01:52 |
keyframes, or a single Flash layer.
| | 01:55 |
You can also place objects at their
original position and set the Stage size to
| | 01:59 |
the same as the Illustrator file.
| | 02:01 |
I am going to make sure both
of those boxes are checked.
| | 02:04 |
You could import unused symbols if you
want or import the whole shebang as a
| | 02:09 |
single bitmap image, which I'm not going to do.
| | 02:11 |
I will click OK and the logos are imported.
| | 02:14 |
Also notice that the Stage size was
changed to match the size of the AI file.
| | 02:19 |
So you've seen that it's pretty easy to
import your Illustrator files, but what
| | 02:24 |
if you want to import just part of a file?
| | 02:26 |
Say I wanted to import just one
of the logos and not all of them.
| | 02:30 |
So, I will hit Ctrl+A to select all
the logos and then hit Delete on the
| | 02:34 |
keyboard to get rid of everything off the Stage.
| | 02:36 |
I am going to return to my Illustrator file.
| | 02:39 |
Say I want to bring in just this logo
with the three-colored RAA letters into Flash.
| | 02:44 |
I am just going to simply copy and
paste between Illustrator and Flash.
| | 02:49 |
So I will drag and click to select the
logo and hit Ctrl+C on my keyboard to copy--
| | 02:54 |
that's Command+C on the Mac.
| | 02:56 |
Back in Flash, I will hit Ctrl+V on my keyboard.
| | 03:00 |
Flash asks if I want to paste the bitmap
or paste it using the AI File Importer
| | 03:05 |
preferences that we saw just a few moments ago.
| | 03:07 |
I will paste using the AI File
Importer preferences, and I will also apply
| | 03:12 |
the recommended import settings to resolve
incompatibilities and maintain the layers.
| | 03:17 |
I'll click OK and the logo is pasted into Flash.
| | 03:21 |
Now I can work with the logo.
For instance, I could click on the yellow A and
| | 03:25 |
change the color to blue.
| | 03:26 |
Now, there is a newer XML-based image
format called FXG that allows you to
| | 03:34 |
easily move artwork
between multiple Adobe products.
| | 03:37 |
So I could create artwork in Flash,
Illustrator, or Photoshop, and then move the
| | 03:42 |
artwork into the other programs.
| | 03:43 |
Now, I know we just imported this logo
in from Illustrator, but let's say that
| | 03:48 |
I've created it in some other artwork in Flash.
| | 03:50 |
So, to export it as FXG, I will click and
drag to select all the parts of the logo.
| | 03:56 |
Now, I will go to File >
Export > Export Selection.
| | 04:01 |
You can see the file extension will be
FXG, and I'll just give my file the name
| | 04:05 |
of "logo" and save it to the desktop.
| | 04:11 |
Now, I will go back to Illustrator
and open a new blank document.
| | 04:14 |
I will now go to File > Open and
find the FXG file on the desktop.
| | 04:24 |
Illustrator imports the artwork and
all the pieces are still editable.
| | 04:29 |
Again, you can output and import
FXG files from Flash, Illustrator, and
| | 04:34 |
Photoshop, so it's a really easy
way to move artwork around in a format
| | 04:38 |
understood by multiple programs.
| | 04:41 |
| | Collapse this transcript |
|
|
18. PublishingCleaning up and optimizing a file| 00:00 |
When getting ready to publish your final
files, taking a few minutes to clean up
| | 00:04 |
and optimizing your FLA is time well spent.
| | 00:08 |
To demonstrate in this movie,
we'll be using optimizing.fla.
| | 00:12 |
It's basically just a copy of the
finished piece we created in the section
| | 00:16 |
about ActionScript.
| | 00:18 |
It's a simple interactive piece for
children where they can practice using
| | 00:21 |
the mouse to click.
| | 00:22 |
Then they listen to different animal sounds.
| | 00:25 |
I'll publish it quickly and you'll recognize it.
| | 00:27 |
(clip playing)
| | 00:33 |
So the intro music plays, and we can
click the Start button to see the animals.
| | 00:37 |
Then we can click on any of
the animals to hear its sound.
| | 00:40 |
(clip playing)
| | 00:43 |
Then we can click on the Back to Games
button to be taken to a web site where we
| | 00:47 |
can choose more games to play. That's perfect!
| | 00:54 |
So, the first spot to look at when
cleaning up your file is in the library.
| | 00:58 |
Take a look at your library items and delete
anything that isn't being used in your movie.
| | 01:03 |
If you're not sure if something is
being used, you can go to the context menu
| | 01:07 |
for the library here at the upper-
right and then choose Select Unused Items.
| | 01:13 |
You can see that we have an extra monkey
and vineMiddleWithMonkey movie clips.
| | 01:18 |
I stuck those in this file
on purpose to demonstrate.
| | 01:21 |
Those two items really
are not used in the movie;
| | 01:23 |
the monkey that's used is the button
symbol version. So, I'll delete these.
| | 01:28 |
Another best practice is to make sure
that all your library items are named
| | 01:32 |
something intuitive.
| | 01:33 |
When you open up the file three or four
months down the line, you can tell at a
| | 01:37 |
glance what each item is.
| | 01:39 |
Trust me, there's nothing worse than a
library full of items named Symbol 1,
| | 01:43 |
Symbol 2, and symbol 3.
| | 01:45 |
Putting related library items into
well-named folders, like we have here,
| | 01:49 |
can also be helpful.
| | 01:51 |
The same guidelines apply to the main Timeline.
| | 01:54 |
Take a minute to delete any unnecessary
or blank layers, make sure each one is
| | 01:58 |
named something intuitive, and
consider putting related layers into folders.
| | 02:03 |
I've got an extra layer here
called rhino with nothing on it.
| | 02:08 |
It's just cluttering up the
main Timeline, so I'll delete it.
| | 02:11 |
If you go to the File menu and then
Publish Settings, you'll see where you can
| | 02:15 |
affect the default compression settings
that Flash will apply to the audio and
| | 02:20 |
bitmap images you've brought into Flash.
| | 02:23 |
To optimize your SWF files even
further, you can go through and compress
| | 02:27 |
individual audio files, which we talked about
in the Audio section earlier in the course.
| | 02:31 |
For instance, you can double-click on
the icon of the speaker for any of your
| | 02:37 |
audio files in the library.
| | 02:39 |
Then you can test different output
compression settings to get the right balance
| | 02:43 |
of sound quality and file size.
| | 02:45 |
What you choose for an individual
audio file here will override the settings
| | 02:49 |
for the FLA document in general, which we saw
just a second ago in the Publish Settings box.
| | 02:56 |
Imported bitmaps can be a big source
of file-size bloat in your SWFs as well.
| | 03:01 |
The best way to avoid this is to plan ahead.
| | 03:04 |
Import images only at the dimension
and resolution you really need them.
| | 03:08 |
That being said, you can ratchet down
the size of your final SWF by affecting
| | 03:12 |
the quality of compression that
Flash uses for individual images.
| | 03:17 |
To demonstrate this, first, I am
going to publish the movie and then
| | 03:20 |
immediately close the SWF.
| | 03:21 |
(clip playing)
| | 03:24 |
I'll click on the pasteboard
and open the Properties inspector.
| | 03:27 |
In the SWF History section, you can see
that our file is at 620 K. Now in the
| | 03:33 |
library, I'll double-click on the
little tree icon next to jungleBackground.jpg
| | 03:39 |
to open up the Bitmap
Properties box for this image.
| | 03:43 |
Using the Quality radio button, you
can set a custom compression that Flash
| | 03:48 |
should use instead of
the default for this image.
| | 03:51 |
I am going to be pretty aggressive and use 40%.
| | 03:55 |
I'll publish the movie again and
the quality of the background image
| | 03:59 |
is certainly reduced.
| | 04:00 |
You can see a lot of
blockiness and pixelation in the image.
| | 04:03 |
(clip playing)
| | 04:10 |
However, when you close your SWF,
click on the pasteboard, and open the
| | 04:13 |
Properties inspector again,
| | 04:15 |
you can see our file size
has been reduced to 582.5 KB.
| | 04:17 |
I am going to restore my background
image back to the original settings, but
| | 04:25 |
know that you can play with this to
find the right balance between image
| | 04:29 |
quality and size if final
SWF size is a concern for you.
| | 04:33 |
If you're building an application
like an image gallery that shows a lot of
| | 04:37 |
high-quality images, you might want to
keep studying Flash and try techniques
| | 04:42 |
like loading in external images or other
assets one by one on demand, instead of
| | 04:47 |
embedding them all into a SWF file.
| | 04:50 |
Next, you might want to also consider
optimizing shapes for any vector artwork.
| | 04:56 |
We showed how to do this in the
movie called Movie tricks and techniques
| | 05:00 |
for imported imagery;
| | 05:01 |
it's in the Graphic section of this course.
| | 05:04 |
If you have a lot of things going
on on your Stage at once and SWF
| | 05:08 |
performance is a concern, you could
also try finding items in your project
| | 05:12 |
that you could cache as bitmap.
| | 05:15 |
An example would be this movie clip that
says Welcome to the Jungle Sounds Game.
| | 05:20 |
When I click on it in the Display area
of the Properties inspector, in the Render
| | 05:24 |
dropdown, I can choose to Cache
as Bitmap or Export as Bitmap.
| | 05:30 |
Caching vector imagery as bitmap
allows Flash to cache an internal bitmap
| | 05:35 |
representation of the movie clip.
| | 05:37 |
Then it refers to that copy instead of
having to redraw a vector version over
| | 05:42 |
and over and over again as the SWF plays.
| | 05:45 |
This can increase
performance as the movie is playing.
| | 05:48 |
Export as Bitmap can potentially
give you better performance in your
| | 05:51 |
animations as well.
| | 05:53 |
The difference is that Cache as Bitmap
creates a bitmap at runtime; Export as
| | 05:58 |
Bitmap creates a bitmap for
a movie clip at publishing.
| | 06:01 |
Now, don't think that this means it
creates an actual bitmap file that you'll
| | 06:06 |
find somewhere in the file
explorer on your computer.
| | 06:09 |
It just creates the bitmap image in a way
that your published SWF knows what to do with it.
| | 06:14 |
Export as Bitmap is better
for more complex vector shapes.
| | 06:18 |
Both Cache as Bitmap and Export as
Bitmap are best used with movie clips that
| | 06:22 |
have mostly static content that
don't scale or rotate frequently.
| | 06:29 |
Finally, be careful about
the kind of text that you use.
| | 06:32 |
As we discussed in the section in the
course earlier about text, embedding fonts
| | 06:37 |
and using TLF text can add
significantly to your file size.
| | 06:42 |
Be sure that you need to embed fonts or
use TLF text before you incorporate it
| | 06:47 |
into your Flash project.
| | 06:50 |
With these items considered, you can
optimize the file size and performance of
| | 06:54 |
your final SWF, as well as make sure
that your layers and library are as easy to
| | 06:58 |
navigate as possible.
| | 07:01 |
| | Collapse this transcript |
| Configuring SWF publish settings| 00:00 |
There are a lot of different options
that you can set when you're getting ready
| | 00:04 |
to publish the final
version of your Flash projects.
| | 00:07 |
Let's take a look at some of
the things that you can specify.
| | 00:10 |
Note that in this movie we are going
to assume that we are getting ready to
| | 00:13 |
publish our Flash file for the web.
| | 00:16 |
The things we'll look at here also
apply for when you are trying to deploy a
| | 00:19 |
mobile app, or as a desktop app.
| | 00:22 |
But those types of deployments have
additional settings that you won't see here.
| | 00:25 |
We will cover settings specific to mobile
and desktop deployment in a different movie.
| | 00:30 |
So, when you're getting ready to
deploy for the web, Flash can create a SWF
| | 00:34 |
file and an HTML document that
embeds the SWF file within it.
| | 00:38 |
I am going to go to File and then
Publish Settings to open up the Publish
| | 00:42 |
Settings dialog box.
| | 00:43 |
I am going to cancel out of this
because you could also get to the same spot by
| | 00:48 |
going to the Property inspector
and then clicking Publish Settings.
| | 00:53 |
First off, note the difference between OK
and Publish at the bottom of the screen.
| | 00:59 |
If you just change some of your
Publish Settings and then click OK, nothing
| | 01:02 |
is actually published;
| | 01:04 |
Flash just remembers the
settings that you've chosen.
| | 01:07 |
If you change some of your Publish
Settings and then click Publish, Flash will
| | 01:10 |
actually create the final files
but not open them up for you to see.
| | 01:14 |
So I will click Publish and then
Cancel and now jump to my file explorer.
| | 01:20 |
Here you can see we have a SWF and an
HTML file that Flash created for us.
| | 01:30 |
So, back in the Flash Publish Settings,
remember that you'll set the Publish
| | 01:34 |
Settings here, but to actually see the changes,
you are going to have to do one of two things:
| | 01:38 |
hit Publish and then go to the File
Explorer and open your files from there, or
| | 01:43 |
hit OK and then hit Ctrl+Enter to
preview your SWF, just like we've done
| | 01:48 |
throughout this entire course.
| | 01:50 |
So now, for the actual settings.
| | 01:52 |
At the top of the box, you can specify
which version of the Flash Player you
| | 01:56 |
want to target, as well as what version
of ActionScript that you want to target.
| | 02:01 |
You have to tell Flash what version of
ActionScript you want to target, even if
| | 02:05 |
you don't write a single
line of code in your movie.
| | 02:08 |
Unless you have a specific reason to
target an older version of ActionScript,
| | 02:12 |
you will want to leave it at ActionScript 3.0.
| | 02:16 |
The area on the left displays all the
different types of output files that you could create.
| | 02:20 |
You will notice that Flash (.swf) and
HTML Wrapper are checked by default.
| | 02:25 |
Clicking on any of the choices in this
left box brings up the options for that
| | 02:29 |
type of file on the right.
| | 02:31 |
So I am going to start with Flash (.swf).
| | 02:34 |
If I open up the Advanced area,
you will see that there's a lot of choices.
| | 02:38 |
I'm only going to highlight some of them.
| | 02:40 |
The help files in Flash are a good place to
find out what the ones we don't touch on do.
| | 02:46 |
So first off, the JPEG Quality
setting affects the bitmap compression of
| | 02:50 |
images in your movie.
| | 02:52 |
To make highly compressed JPEG images
look smoother when they are exported from
| | 02:56 |
Flash, you can select the
Enable JPEG deblocking option.
| | 03:00 |
I am going to leave it deselected.
| | 03:02 |
Similarly, to set the sample rate and
compression for all the streaming sounds
| | 03:07 |
or event sounds you use in the SWF file,
you can click and change the Audio
| | 03:10 |
Stream or Audio Event options.
| | 03:12 |
I am going to cancel out of Publish
Settings for a moment and hit Ctrl+Enter so
| | 03:18 |
we can hear what the background sound
sounds like, because we are going to
| | 03:22 |
change it in a minute.
(music playing)
| | 03:28 |
So, remember that you can set the audio
compression used for any given individual
| | 03:33 |
sound through the library.
| | 03:35 |
You open the library and double-click on
the sound icon for a given sound to do that.
| | 03:39 |
We talked more in depth about this
in a previous movie in this course,
| | 03:43 |
but for now, I am just going to uncheck
Use imported MP3 quality and now choose
| | 03:47 |
8 kb for the Bit rate.
Now, I will click OK.
| | 03:50 |
Now, if you have done this process
for any of your sounds, the settings you
| | 03:55 |
choose from the Library will override
the settings in the Publish Settings
| | 03:59 |
box that we just saw.
| | 04:01 |
So I am going to test the movie, and
now notice how the sound quality for the
| | 04:04 |
background sound is not very good.
| | 04:06 |
(music playing)
| | 04:12 |
I am going to flip over to the Property
inspector and open the Publish Settings again.
| | 04:16 |
I am going to check the
Override sound settings box.
| | 04:19 |
I am going to click OK at the bottom.
| | 04:21 |
That saves our settings but it doesn't publish.
| | 04:24 |
So now when I hit Ctrl+Enter, you will see
that the background sound sounds good again.
| | 04:28 |
(music playing)
| | 04:34 |
So, that Override sound settings box
allows you to ignore the individual
| | 04:38 |
settings you've set for particular sounds.
| | 04:40 |
So I am going to quickly go back and
restore my background sound to the way that
| | 04:44 |
it was, using the Imported MP3 quality.
| | 04:49 |
I'll also fix my Publish Settings
to uncheck Override sound settings.
| | 04:53 |
Now, between all these options for
compressing sounds, it might seem like
| | 04:57 |
there's too many places to control it from.
| | 05:00 |
Well, one use case where I can think of
where override sound settings could be
| | 05:04 |
useful is if you're testing
iterations of your Flash projects.
| | 05:07 |
If you want a smaller low-fidelity
version of your SWF that doesn't carry around
| | 05:12 |
so much file size due to audio,
this is where it could be useful.
| | 05:15 |
You could set the Sound settings
to be really super compressed here,
| | 05:19 |
do your testing, and then set
everything back when you're done.
| | 05:23 |
So, moving on, Export device
sounds is kind of a different topic.
| | 05:27 |
You check this if you wanted to
export sounds suitable for mobile devices
| | 05:30 |
instead of an original library sound.
| | 05:32 |
Now in the Advanced section,
you can choose to compress the movie.
| | 05:37 |
Choosing compression reduces the file
size and download time of your SWF, and
| | 05:41 |
that's generally an option
that you want to leave checked.
| | 05:44 |
Under the Compress movie dropdown,
you can choose Deflate or LZMA.
| | 05:50 |
LZMA is short for
Lempel-Ziv-Markov chain algorithm.
| | 05:54 |
This compression type is new in Flash CS6.
| | 05:58 |
It's most efficient for compiling
ActionScript and vector graphics.
| | 06:02 |
The reduction in file size can be
up to 40% depending on the amount of
| | 06:06 |
ActionScript and vector
graphics included in your SWF file.
| | 06:09 |
Now, I am going to skip
down to Include XMP metadata.
| | 06:13 |
If you click on the little icon of the
wrench, a dialog box opens up where you
| | 06:17 |
can describe your Flash file for other
developers that you might share your file with.
| | 06:21 |
What your type here can also be
seen by search engines on the web.
| | 06:24 |
So you could add in title, description,
keywords, and any other information
| | 06:29 |
about your SWF that you want to include.
| | 06:32 |
Then all that metadata is embedded in the file.
| | 06:35 |
The only other setting we are going to
discuss here is the Generate size report checkbox.
| | 06:39 |
I will check that and then click Publish.
| | 06:42 |
Now, I am going to close the Publish
Settings box and you'll notice that we've
| | 06:47 |
got a ton of text in the Output panel.
| | 06:49 |
I will open this up so we
can see it a little bit better.
| | 06:52 |
Now, scrolling through all of this,
you will see we get information about our
| | 06:56 |
SWF presented in different ways.
| | 06:59 |
This section shows how many bytes of memory we
are dealing with on each frame of our Timeline.
| | 07:04 |
So frame 1 has got a lot. Then there's
not much until we get down to frame 25.
| | 07:10 |
If you've watched other parts of this
course, you know that frame 25 is where
| | 07:13 |
the Timeline changes from the Welcome
screen to when the jungle animals with
| | 07:17 |
their sounds appear.
| | 07:18 |
I will scroll down even further and
it breaks down each asset by size.
| | 07:25 |
Here is also some information about the
font that's used, and then here at the
| | 07:30 |
very bottom, it tells us information
on the size of each one of the sounds.
| | 07:33 |
In case where your SWF file is
bigger than you want or expect it to be, the
| | 07:38 |
Size report can be really useful in
pinning down what item or items are
| | 07:42 |
causing the file bloat.
| | 07:45 |
Flash also creates a copy of the Size
report for you in a text file in the same
| | 07:50 |
directory as your SWF.
| | 07:52 |
So these are the most important items to work
with when setting your SWF Publish Settings.
| | 07:57 |
When publishing for the web,
the settings for the HTML file that's going to be
| | 08:01 |
the wrapper for the SWF are important also,
| | 08:03 |
so we will explore those in the next movie.
| | 08:06 |
| | Collapse this transcript |
| Configuring HTML publish settings| 00:00 |
In the last movie, we took a look at
some of the publish settings for the SWF
| | 00:04 |
file that you can manipulate.
| | 00:06 |
When you're getting ready to deploy
for the web, Flash can create an HTML
| | 00:10 |
document that embeds the
SWF file within it for you.
| | 00:12 |
Let's take a look at the
settings for the HTML file now.
| | 00:16 |
So I'll open up the publish settings
for our document by opening the Property
| | 00:20 |
inspector and clicking
the Publish Settings button.
| | 00:24 |
In the Publish Settings dialog,
I'll click HTML Wrapper to go to the
| | 00:28 |
settings for the HTML file.
| | 00:29 |
There's a lot of choices here,
just for the SWF settings.
| | 00:33 |
So I'm going to highlight just some of
them here and refer you to the Flash help
| | 00:37 |
for a blow-by-blow of all the rest.
| | 00:39 |
In the Template dropdown, we're
going to stick with Flash, but there's a
| | 00:43 |
myriad of other choices.
| | 00:44 |
For example, if you have a file that you
want the user to be able to open up the
| | 00:48 |
full screen, you'll want to
choose Flash Only - Allow Full Screen.
| | 00:53 |
That's often used in files that play video.
| | 00:56 |
If your Flash piece is going to end
up on an LMS, or a learning management
| | 00:59 |
system, you might be interested
in the options for SCORM tracking.
| | 01:04 |
If you wish, you can choose to have
Flash automatically detect what version of
| | 01:08 |
the Flash Player is on the user's computer.
| | 01:11 |
This can be a really great idea,
| | 01:13 |
for instance, in a case where your Flash
movie uses a feature that works only in
| | 01:17 |
the most recent version or two of the player.
| | 01:21 |
If someone trying to view SWF file
doesn't have the correct version of Flash
| | 01:25 |
Player that they need to view your
content, they'll be presented with a message
| | 01:29 |
that they need to go download the
different version and then can click to the
| | 01:32 |
right spot on adobe.com to go get it.
| | 01:35 |
So I'll check this box and you can type
in the specific version of Flash Player
| | 01:39 |
that you want to detect for.
| | 01:40 |
Now the Size dropdown offers choices
regarding the dimensions of your published movie.
| | 01:46 |
Match Movie plays the movie at
the Stage size you set in Flash.
| | 01:50 |
That's the usual setting you'll use
for almost all your Flash projects.
| | 01:54 |
Pixels lets you enter in a specific
size in pixels for your Flash movie, and
| | 01:58 |
Percent sizes the Flash movie as a
percentage of the browser window.
| | 02:01 |
Now this dropdown and the Scale
dropdown here at the bottom work together to
| | 02:06 |
determine the movie size and
amount of distortion and cropping.
| | 02:09 |
For instance, with Size at Match Movie and
Scale at Default, I'll publish the movie.
| | 02:16 |
Now I'm going to go to my file explorer
and open up the HTML file in a browser.
| | 02:22 |
(clip playing)
| | 02:28 |
So the HTML file has the
SWF file embedded within it.
| | 02:32 |
Now when I shrink the browser down,
the content remains constant, but it's
| | 02:36 |
clipped by the window
when I shrink it very small.
| | 02:42 |
Back in Flash, I'll change Size to Percent
and Scale to Exact Fit and publish again.
| | 02:50 |
Now when I open the HTML file,
you'll see right away that the movie fills the
| | 02:54 |
entire browser window.
| | 02:55 |
(clip playing)
| | 03:02 |
Now when I scale the window, the movie
scales too and it can distort as well.
| | 03:09 |
One thing that people often want
to do is center their SWF content in
| | 03:12 |
the browser window.
| | 03:14 |
That's done by setting Size to
Percent with a Width and Height of 100.
| | 03:19 |
The Scale dropdown should be set to No scale.
| | 03:23 |
Now there's another set of dropdowns
that come into play: Flash horizontal
| | 03:27 |
alignment, which should be set to
Center, and Flash vertical alignment, which
| | 03:31 |
should also be set to Center.
| | 03:34 |
I'll hit Publish and go to the
file explorer to open up the HTML.
| | 03:42 |
(clip playing)
| | 03:47 |
Here you can see that the SWF file
is centered, and it stays that way when
| | 03:51 |
I resize the browser.
| | 03:52 |
And one thing to note about centering
your content this way is that if you have
| | 03:57 |
anything on the pasteboard in your FLA,
it will also show up on the screen here,
| | 04:01 |
so clean off your pasteboard or maybe
put a mask on your file so that only the
| | 04:05 |
content on the Stage appears.
| | 04:07 |
And moving on, things here in the
Playback area mostly affect how your SWF
| | 04:12 |
behaves when playing.
| | 04:14 |
For instance, you could have it
pause at the beginning or loop, and I'd
| | 04:17 |
recommend not using any of these
settings and instead, control your Timeline
| | 04:21 |
through ActionScript.
| | 04:22 |
For instance, if you want your movie
to pause at the beginning, use the Stop
| | 04:27 |
command, like this movie already has.
| | 04:29 |
That way your Timeline playback is
all controlled from the same place.
| | 04:33 |
Finally, Window mode is something you
might start being concerned about if
| | 04:37 |
you're going to have your SWF appear
amongst HTML that's dealing with complex
| | 04:41 |
style sheets and layers.
| | 04:42 |
For instance, think of a
banner ad on a web page.
| | 04:46 |
For some ads, when you mouse over them,
they expand over the content on the rest of the page.
| | 04:51 |
The setting on that banner ad
would be Transparent Windowless.
| | 04:54 |
It allows layering of SWF content within DHTML.
| | 04:58 |
So I'm going to quickly turn your
attention to the fact that we checked
| | 05:02 |
that Detect Flash Version box, so
we can see what version of the Flash
| | 05:06 |
Player the end user has.
| | 05:07 |
I'm going to head over to the file
explorer and pop open the HTML file that
| | 05:12 |
Flash created for us in Dreamweaver.
| | 05:15 |
Scrolling through, you can recognize
some of the items that we set in the
| | 05:18 |
Publish Settings here in the code
that's embedding the SWF into the HTML.
| | 05:23 |
For instance, the window mode is window,
the scale is noscale, and up here you
| | 05:28 |
can even see that the background color
of our SWF is being set to white, ffffff.
| | 05:35 |
So remember that we checked that Detect
Flash Player box in the Publish Settings.
| | 05:39 |
Because of that, this HTML file
is actually mostly JavaScript.
| | 05:44 |
You can see on line 6 that it's
calling a JavaScript file called swfobject.js,
| | 05:49 |
which Flash generates for you.
| | 05:51 |
Most of the code below
that is JavaScript as well.
| | 05:53 |
Now if I go to the file explorer where
my SWF is, there is the swfobject.js file.
| | 06:00 |
When you deploy your Flash project to
your web server, you should put your HTML,
| | 06:05 |
your SWF file, and the .js file.
| | 06:08 |
You should also include any other files
that your SWF uses, like FLV or F4V video
| | 06:13 |
files or any other SWF files.
| | 06:16 |
Embedding your SWF file into the HTML using
this method is a pretty smart thing to do.
| | 06:21 |
The JavaScript works well across all
different browsers and you can learn more
| | 06:25 |
about how to modify what the end user
sees if they don't have the right version
| | 06:30 |
of the Flash Player.
| | 06:31 |
It says right here at the top of the page,
here in the code comments, where to go to do that.
| | 06:36 |
It's code.google.com/p/swfobject.
| | 06:38 |
If you want to have your Flash SWF
appear on an HTML page amongst other content
| | 06:47 |
that you've already built, you could
just copy and paste the code from this page
| | 06:50 |
that Flash generated for
you into your other page.
| | 06:55 |
That being said, if for some reason
you don't want to use all that fancy
| | 06:58 |
JavaScript, you can just
uncheck the Detect Flash Version box.
| | 07:03 |
Flash will still publish an HTML file
for you that takes into account all the
| | 07:07 |
settings that you set here, and you
can manipulate that code as you wish.
| | 07:11 |
So I'll publish this and then head back to
Dreamweaver so we can see what it looks like.
| | 07:16 |
Yes, I want to reload my code and see
the new version, and you can see that this
| | 07:21 |
is more just straight HTML with a div.
| | 07:25 |
There's no JavaScript.
| | 07:27 |
Scrolling down, there is a little
thing at the bottom of this code that will
| | 07:31 |
show the user a button that says Get Adobe
Flash Player if they don't have the right one.
| | 07:36 |
But this isn't nearly as robust as
the JavaScript version and you'd just be
| | 07:39 |
reinventing the wheel if
you wanted to customize this.
| | 07:42 |
So unless you have a specific reason
not to, I'd recommend checking that Detect
| | 07:47 |
Flash Version box in the Publish
Settings and using the JavaScript method.
| | 07:52 |
So the HTML Settings area contains a
lot of pretty important settings for
| | 07:57 |
deploying your Flash project to the web.
| | 07:59 |
Again, you can always consult the
Adobe help documentation for a setting
| | 08:03 |
you don't understand.
| | 08:04 |
Notice that the Help button is at the
bottom of the dialog; that can take you there.
| | 08:08 |
Just remember that once you've
published your files, be sure to upload your
| | 08:11 |
HTML, the SWF, the JavaScript, and any
supporting files up to your web server.
| | 08:18 |
| | Collapse this transcript |
| Looking at other types of files you can publish| 00:00 |
Flash allows you to save specific
frames of your movie as images or save the
| | 00:05 |
file as a projector, which can play on
computers that don't have Flash Player installed.
| | 00:10 |
Let's start with exporting images.
| | 00:12 |
You might run into a case where you
don't want to share an entire movie but
| | 00:16 |
share a particular frame, or maybe you
want to create a storyboard using imagery
| | 00:21 |
from different places in your Timeline.
| | 00:23 |
You can export your Timeline
frames as GIF, JPEG, or PNG images.
| | 00:29 |
To demonstrate, I'll click the Publish
Settings button in the Property inspector
| | 00:33 |
to open up the Publish Settings box.
| | 00:36 |
Now, I'll select the GIF, JPEG, and
PNG checkboxes from the list of file
| | 00:41 |
types that I can publish.
| | 00:44 |
When you click on each one of the file types,
options for that selection show up on the right.
| | 00:48 |
For instance, for GIF, I could change
the dimensions of my outputted image.
| | 00:52 |
I could also choose between a
static image or an animated GIF.
| | 00:57 |
Animated GIFs are special kinds of GIFs
that play a series of images in sequence.
| | 01:02 |
There are also a lot of choices
regarding the colors of my GIF in the Color area.
| | 01:07 |
Notice under the Transparent dropdown,
you could maintain the Alpha settings
| | 01:12 |
that you might have on an image.
| | 01:14 |
JPEG doesn't have quite as many options.
| | 01:16 |
You can basically just change the
size and quality of the end image.
| | 01:20 |
PNG files have a few more options.
| | 01:23 |
You can change the size and have some
options regarding Color and Alpha as well.
| | 01:28 |
So these options export the frame
currently selected in the Flash document.
| | 01:32 |
I'm going to click OK to close the
Publish Settings, and now I'll move my
| | 01:36 |
playhead to the last frame of the Timeline.
| | 01:39 |
Now I'll go to File and then Publish.
| | 01:43 |
Now, I'll hop open to my file explorer,
and here we have the GIF, JPEG, and the PNG.
| | 01:48 |
I'm going to open it up in Photo
Gallery, and it looks like I need to work on
| | 01:55 |
the color settings for my GIF,
but the other ones looks pretty good.
| | 02:00 |
Back in Flash, you can also
publish what's called a projector file.
| | 02:04 |
A projector basically wraps up all your
SWF content as well as everything needed
| | 02:09 |
to play it into one self-contained unit.
| | 02:12 |
You don't have to worry about if someone has
the right version of Flash Player, if at all.
| | 02:16 |
This would be useful if you need to
distribute your movie to someone who doesn't
| | 02:19 |
have the Flash Player or has an older
version. Or maybe you just want to run
| | 02:23 |
your movie without a browser.
| | 02:25 |
One example could be an interactive piece that
would be playing in a kiosk in a museum display.
| | 02:31 |
As a projector file, the Flash piece
could run and even have museum visitors
| | 02:35 |
interact with it without
having to play it through a browser.
| | 02:38 |
The projector could utilize the whole
screen and offer the added benefit of
| | 02:42 |
not having to worry if the browser is
going to crash or if a user is going to
| | 02:45 |
try and use the browser to get to the web or
do something that they're not supposed to do.
| | 02:51 |
So to create a projector file,
we'll go ahead and open up our Publish
| | 02:54 |
Settings box again.
| | 02:55 |
Then you simply check the box for a
Windows Projector or a Mac Projector.
| | 03:00 |
You'll notice the Windows
Projector has a file extension of .exe.
| | 03:05 |
The Mac Projector has a file extension of .app.
| | 03:07 |
I'll click Publish and then
head over to my File Explorer.
| | 03:14 |
So here is the EXE file and then the APP.
| | 03:17 |
I'm on a Windows machine, so I'll
click on the EXE file to run it. And here's
| | 03:22 |
our little animal sounds game.
| | 03:24 |
(clip playing)
| | 03:28 |
Now, this doesn't look that different than
double-clicking and viewing the SWF file.
| | 03:32 |
Remember that the difference is
that if my computer doesn't have Flash
| | 03:35 |
Player, the SWF won't work.
| | 03:37 |
The projector file will work no
matter where it goes, since it has the Flash
| | 03:41 |
Player functionality wrapped up internally.
| | 03:43 |
That's also why it's a lot
bigger in file size than the SWF file.
| | 03:48 |
So the Image Publishing and Projector
Publishing options give you some extra
| | 03:53 |
choices in terms of the formats you
can use to share your Flash content.
| | 03:58 |
| | Collapse this transcript |
| Using the Bandwidth Profiler| 00:00 |
You can preview how your final project
might behave under different download
| | 00:04 |
environments by using the Bandwidth Profiler.
| | 00:07 |
Before we look at it, let's refresh
ourselves on the structure of our movie.
| | 00:12 |
We basically have two main views: the
Welcome screen, which welcomes you to the
| | 00:16 |
jungle animal sounds game, and then
the second view that starts on frame 25,
| | 00:20 |
where the animals appear and you can
click on them to hear their sounds.
| | 00:24 |
Now to find the Bandwidth Profiler,
first test your movie in Flash by pressing
| | 00:28 |
Command+Enter or Ctrl+Enter.
| | 00:30 |
(music playing)
| | 00:35 |
Then, under the View menu,
choose Bandwidth Profiler.
| | 00:42 |
On the upper-left of the Profiler
you can find information such as the
| | 00:45 |
dimensions, the frame rate, the overall
file size, and the total number of frames.
| | 00:49 |
What you'll probably really find
interesting is how long it says it will take
| | 00:53 |
your movie to preload and how your
data is distributed throughout your frames.
| | 00:57 |
So you've two views in the Bandwidth
Profiler: the Streaming Graph and the
| | 01:02 |
Frame By Frame Graph.
| | 01:03 |
The default view that we
have now is the Streaming Graph.
| | 01:06 |
It shows you how data streams from each frame.
| | 01:09 |
Frame By Frame simply indicates
the amount of data in each frame,
| | 01:12 |
so to toggle to that view, I'll
go to View and then Frame By Frame.
| | 01:17 |
Here it's more clear the two mainframes
where we have big chunks of data: frame
| | 01:22 |
1 and frame 25, where the
view of the animals first began.
| | 01:25 |
I'm going to toggle back
to the Data Streaming Graph.
| | 01:29 |
So think of the way a SWF file is delivered
to a users web browser like a freight train.
| | 01:34 |
First the engine has to arrive, then
the cars, and then finally the caboose.
| | 01:39 |
If you want to get on the caboose,
you have to first wait for the engine and
| | 01:42 |
the cars to arrive.
| | 01:44 |
And so it is with SWF files.
| | 01:46 |
Everything on your first frame has to
download before you can see anything on
| | 01:49 |
the subsequent frames.
| | 01:50 |
So now, maybe this view
makes a little more sense.
| | 01:54 |
We're waiting for data to stream on frame 1.
| | 01:57 |
Frames 2 through 24 don't really stream
anything new, because all those frames
| | 02:01 |
look just like frame 1.
| | 02:03 |
The next bump comes at frame 25, and
the |
|
|
