IntroductionWelcome| 00:00 |
(music playing)
| | 00:04 |
Hi my name is Kelly McCatherine, I am a
certified technical trainer plus and an
| | 00:07 |
Adobe certified instructor.
I have been teaching Flash for about 9
| | 00:11 |
years and I specialize in web and print
training.
| | 00:15 |
But as of now, also mobile and tablet
publishing.
| | 00:18 |
The web and mobile devices have become so
sophisticated over the last five years.
| | 00:24 |
That static content will no longer do.
For that reason, any designer worth their
| | 00:29 |
salt really needs to understand how to
create, deliver and publish this new
| | 00:34 |
class of dynamic content.
In this course, I'll be guiding you
| | 00:39 |
through the fundamentals of flash
animation.
| | 00:42 |
Getting you comfortable with flashes,
tools and interface.
| | 00:45 |
And showing you how to create Flash
animations from scratch.
| | 00:49 |
After you're comfortable with the Flash
workspace, we'll jump into creating and
| | 00:53 |
animating shapes and objects, creating
slideshows, and incorporating other media
| | 00:58 |
into your movies.
As your projects grow and grow, it's a
| | 01:02 |
good idea to organize all of your assets
into libraries.
| | 01:07 |
A core feature of Flash, and no Flash
course would be complete without a
| | 01:10 |
through tour of the timeline.
So prepare to get nerdy with me.
| | 01:15 |
Finally we'll give you guidelines for
distributing your work, so the world can
| | 01:19 |
see your great animations.
After completing this workshop, you
| | 01:22 |
should feel very comfortable with the
Flash interface, and building basic animations.
| | 01:27 |
I had a lot of fun creating these
lessons, and I hope you'll have as much
| | 01:30 |
fun Learning these exciting new skills.
So, let's sit back, relax and get ready
| | 01:36 |
to animate.
| | 01:38 |
| | Collapse this transcript |
|
|
1. Building Your Flash VocabularyIntroduction to Flash CS5 and the Flash Player| 00:02 |
Welcome to Animating with Flash.
Before we get started, let's go over what
| | 00:07 |
Flash is and what it can do.
Sometimes it can be confusing because
| | 00:12 |
Adobe has a collection of Flash
applications, different programs used to
| | 00:15 |
create Flash content.
In this series of videos, you'll be
| | 00:20 |
learning flash professional CS5.
What most people encounter when viewing
| | 00:27 |
flash content is the Flash Player.
And I've just switched over to the
| | 00:32 |
video2brain website.
If I right-click anywhere on this
| | 00:36 |
animated movie, you'll see that this is a
movie that's being viewed through a web
| | 00:41 |
browser plugin using the Flash Player
10.2.
| | 00:46 |
That's the latest as of today.
If I go to another website, you'll notice
| | 00:50 |
that a common other piece, that you'll
see Flash used for, is banner ads.
| | 00:57 |
So, I expanded this ad on one of my
favorite technical websites, cnet.com.
| | 01:03 |
And if I don't want the animation and
want to view my content, they've nicely
| | 01:06 |
given me the option to collapse that.
A lot of people ask me what you can build
| | 01:12 |
with Flash.
Well, there's a variety of things.
| | 01:17 |
You can create animations as you saw on
the video2brain site, banner ads, entire
| | 01:22 |
presentations, slide shows, which is one
of my favorite uses for it.
| | 01:28 |
Even entire websites.
There's also newer technology known as
| | 01:34 |
web applications or RIA's.
And as someone who loves to define her
| | 01:39 |
acronyms, RIA stand for rich Internet
applications.
| | 01:44 |
New to Flash Professional CS5, is you can
actually build iPhone apps and when
| | 01:48 |
you're looking at iPhone or iPad or iPod
Touch, they've abbreviated application
| | 01:53 |
apps because they're usually smaller and
self-contained.
| | 02:00 |
There are far more uses.
One of the other ones that I use quite
| | 02:03 |
often is Learning Modules.
And let's take a look at a little use of Flash.
| | 02:09 |
Over in one of my favorite educational
sites, Adobe TV.
| | 02:14 |
If you search my name, Kelly McCathran,
you'll find a few videos out there.
| | 02:18 |
And this is one I did for Adobe on
testing mobile content with Adobe Device Central.
| | 02:24 |
I'll hit play.
In this video, I'm going to show you Adobe
| | 02:27 |
Device Central CS5 and it's improved
integration with the entire creative suite.
| | 02:33 |
And this is all FLV flash video,
available online or for CD publishing, or
| | 02:38 |
as a companion to a book.
But I'm only scratching the surface.
| | 02:44 |
Most people encounter the Flash player in
a web browser as you saw earlier.
| | 02:48 |
So, if I switch back over to Apple
Safari, you can notice that this is being
| | 02:52 |
viewed in the web browser with the Flash
player.
| | 02:57 |
Since, I mentioned Apple Safari, there
are lots of different web browsers out there.
| | 03:02 |
If you're on the Windows platform, you'll
most likely be using Internet Explorer.
| | 03:07 |
But you can also download free ones, such
as Firefox, which works on both Mac and
| | 03:11 |
Windows, Google Chrome, Opera, and that's
just to name a few.
| | 03:17 |
I remember the early days when Netscape
was the standard.
| | 03:20 |
Today's standards bounce up and down.
Now for some useless trivia.
| | 03:26 |
Flash began as an application called
FutureSplash, one word.
| | 03:31 |
It was FutureSplash Animator and it was
conceived in 1995.
| | 03:36 |
It started shipping in May 1996.
And two key things made Flash a very
| | 03:41 |
successful platform for animation.
And let's flip back over to Flash.
| | 03:47 |
First, when Microsoft launched MSN, the
Flash Player was part of it and it became
| | 03:53 |
dependent on the Flash Technology.
Also, Disney was one of the first adopters.
| | 04:00 |
They had a newsletter that was, again,
dependent on the Flash Technology, and
| | 04:05 |
the newsletter was called the Disney
Daily Blast.
| | 04:09 |
In the upcoming videos, you'll be
learning Flash Animation and this will
| | 04:13 |
give you a solid foundation to build on.
That way, in the future, you can learn
| | 04:19 |
all of the other things that you can
create with flash.
| | 04:24 |
I hope you enjoy this series.
| | 04:28 |
| | Collapse this transcript |
| FLA, SWF, and other file types| 00:02 |
Now lets discuss the two primary formats
you'll be creating your flash files in.
| | 00:08 |
The first is .FLA ,and you can see I've
got that here on my screen.
| | 00:13 |
That's the native Flash format, which
stores any images or text that you're
| | 00:17 |
going to be using in your Flash movies.
It also stores any layers, your
| | 00:23 |
animations and if I flip back to my
operating system you'll notice that I
| | 00:28 |
have a 1.6 megabyte .FLA file.
When I come back to Flash I can take a
| | 00:35 |
look at the second primary format, the
publishable format.
| | 00:40 |
Under the Control menu, I can choose Test
Movie > Test.
| | 00:45 |
And Flash will launch the Flash player
within the Flash Professional application.
| | 00:52 |
You can see I've animated this box coming
in.
| | 00:56 |
And here's the publisher we'll file, the
.SWF.
| | 01:00 |
Which used to stand for Shockwave Flash,
but I'm not sure if anyone refers to it
| | 01:04 |
that way any longer.
I'll close that and come back to my
| | 01:09 |
Operating System.
And you'll notice I have a much tinier
| | 01:13 |
82K, kilobyte, file for publishing on the
web.
| | 01:17 |
File size is very important.
I'll come back to Flash and there are
| | 01:22 |
options for static formats, like a .JPEG,
the Joint Photograph Experts Group, just
| | 01:27 |
a still photo if you want to publish there.
Or PING, the Portable Network Graphic.
| | 01:34 |
Those are rarely used.
New to Flash Professional CS5.
| | 01:40 |
Is the .IPA, an iPhone app.
Native for porting over to your Iphone.
| | 01:48 |
Also, we can do flash video, that's a
large percentage of the market.
| | 01:52 |
And one of my favorite websites for
showing off flash video is The Colbert Report.
| | 01:58 |
And it should be Report, but to go with
his last name he calls it the Colbert
| | 02:02 |
Rapport (LAUGH)
It's a Comedy Central show, and I can hit Play.
| | 02:08 |
(music playing) And you saw a small sample of the
Flash movie that's on their homepage.
| | 02:19 |
I'll close that up, and I'll come back to
Flash.
| | 02:23 |
And there are other things you can build.
Forms.
| | 02:29 |
And you saw a quick glimpse of what I'm
going to get into next.
| | 02:33 |
AIR.
AIR is an Adobe technology, and, as
| | 02:36 |
someone, again, who always defines her
acronyms, it stands for Adobe Integrated Runtime.
| | 02:43 |
If I go back to my browser, you'll see
the Adobe.com/products/air page.
| | 02:49 |
As I mouse over, there's a SWF which is
playing, and if I click the Play button,SOUND.
| | 03:05 |
You get some background on Adobe AIR.
There are also web widgets.
| | 03:10 |
Widgets are referred to as rich Internet
applications, and air falls into that category.
| | 03:15 |
But they are not only for the web.
You can build small desktop applications...
| | 03:30 |
Widgets are not only based on Air, but
they could be written in dynamic html,
| | 03:35 |
the dynamic hypertext markup language, or
Javascript.
| | 03:40 |
However, Flash can build Air widgets.
So, same technology or same end result,
| | 03:45 |
it's either based on Flash or it's based
on html and Javascript.
| | 03:52 |
And lastly, a little bit more about your
file formats.
| | 03:56 |
I'm going to flip back over to Flash.
And in Flash I have the option to save a
| | 04:02 |
few different ways.
So let's take a look at how we save.
| | 04:06 |
I'll choose File, Save As.
I've got a Flash practice folder that I
| | 04:11 |
build on my desktop, and we were looking
at that a moment ago.
| | 04:15 |
And here I have the option for native
FLA.
| | 04:20 |
If I need to send my Flash file for
someone to work on, and they haven't
| | 04:24 |
upgraded to CS5, you can save it backward
compatible to Flash CS4.
| | 04:29 |
One super secret thing you could also do
is save it in the XFL format, the
| | 04:35 |
Extensible Flash format.
Secretly, under the hood, the native
| | 04:41 |
Flash CS5 document is actually a ZIP
file.
| | 04:45 |
If you want to see the components of the
ZIP, or all the individual pieces.
| | 04:50 |
When you save as XFL, it expands all of
those assets.
| | 04:54 |
So if I save an XFL and hit Save again
and come back to my Operating System,
| | 04:59 |
you'll see here it built a little
uncompressed folder.
| | 05:05 |
I can double-click to get inside and
there are all the assets it needs in
| | 05:09 |
order to publish file.
For mobile, for online publishing, the
| | 05:13 |
library contains things I might need like
symbols that I've used.
| | 05:19 |
The box shop, the portable network
graphic, the logo and so on.
| | 05:24 |
But that's really only for the experts.
As a beginner user, all you need to be
| | 05:30 |
concerned with is the .FLA where you'll
build and save your native work to edit.
| | 05:39 |
And the .SWF, which you'll use for
publishing.
| | 05:43 |
| | Collapse this transcript |
| Flash feature comparison| 00:01 |
When it comes to creating Flash content,
there are three main authoring tools that
| | 00:05 |
you may choose to purchase from Adobe.
The first one of those is Flash
| | 00:11 |
Professional, and to show you each
product I've build a little animation in
| | 00:15 |
Flash Professional.
I am going to switch to my favorite classic
| | 00:20 |
work space and will scrub through the
timeline.
| | 00:24 |
You'll notice this red play head, and I'm
going to slide over, so Flash Professional
| | 00:29 |
comes in.
Flash Professional has been around since
| | 00:33 |
1996, and it is the industry standard way
to create Flash animations, games,
| | 00:37 |
slideshows, presentations, all the things
that you can do in Flash.
| | 00:44 |
Now there is a new product called Flash
Catalyst.
| | 00:49 |
Flash Catalyst was introduced with CS5.
The reason Adobe focused on a newer
| | 00:55 |
product is because many graphic designers
are not programmers.
| | 01:01 |
And to effectively build complex
animations in Flash, you need to know a
| | 01:05 |
little bit of action script.
Now what action script is, it's basically
| | 01:11 |
Macromedia's implementation of
JavaScript.
| | 01:15 |
It's a small scripting language that
causes things to happen.
| | 01:19 |
For example, you can validate a form
field, or you can stop or start an
| | 01:23 |
animation, or you can program buttons to
do certain things, like On RollOver, On RollOut.
| | 01:30 |
While all of that technology is
wonderful, many designers out there
| | 01:34 |
aren't warm and fuzzy with programming or
code or action script.
| | 01:39 |
So for that reason, Adobe developed Flash
Catalyst from the ground up, where you
| | 01:44 |
can actually place or import Illustrator
files, Photoshop files and/or Fireworks
| | 01:49 |
files natively.
So you build the basis of what's going t
| | 01:54 |
be animated in Illustrator, for example,
then you select the pieces in Flash
| | 01:58 |
Catalyst and make them interactive.
You could add states just like you do in
| | 02:05 |
Flash Professional, you can add
rollovers, there's a timeline to work
| | 02:08 |
with, and the beauty of Flash Catalyst is
you never need to learn a bit of code.
| | 02:15 |
It is a brand new product, it was
released just with CS5, but it is
| | 02:18 |
interesting to take a look at.
In this series of movies, we'll be
| | 02:22 |
focusing on Flash Professional.Though I
wanted to give you a nice breakdown of
| | 02:26 |
what Flash products are available.
The third Flash product you may hear of
| | 02:32 |
is Adobe Flash Builder.
Now, I like to say that Flash Builder was
| | 02:37 |
written for engineers, by engineers.
Flash Professional and Flash Catalyst
| | 02:42 |
have a very visual interface that, again,
lends itself well to design.
| | 02:47 |
Flash Builder focuses more on the back
end.
| | 02:53 |
It's heavy on action script, and it's
used by programmers and software
| | 02:57 |
developers primarily to create Flash
content, but also heavily to create
| | 03:03 |
RIA's, Rich Internet Applications.
And Flash Builder, which was formerly
| | 03:10 |
Flex Builder, is based on the open source
Flex Framework.
| | 03:15 |
Now there are other products that you
could use to build your Swift movies,
| | 03:20 |
your .swf content.
For example Abode InDesign which was
| | 03:25 |
primarily a print design application, can
now create animated Flash content in CS5.
| | 03:32 |
So that's the collection of Flash
authoring tools, but many other Adobe
| | 03:36 |
products and even some non-Adobe products
still build Flash content.
| | 03:42 |
We'll be digging deep into Flash
Professional CS5, but there's your
| | 03:46 |
breakdown of the three main products you
might choose when you're going to create
| | 03:52 |
flash content and publish Swift, .swf and
other files.
| | 03:58 |
| | Collapse this transcript |
| Raster vs. vector| 00:00 |
In this video, I'm going to go over the
two main categories of all computer based graphics.
| | 00:08 |
The two terms you'll hear is raster or
vector, and there are other terms that
| | 00:12 |
we'll cover.
Raster, by Flash, is called bitmap, and
| | 00:17 |
that's the other acceptable term.
Vector is also called Bezier curve, and
| | 00:23 |
for some useless trivia, Bezier curve was
created by a car designer for Renault in
| | 00:29 |
the 1920's.
Back then, US car makers were the leaders
| | 00:34 |
in the world, in car design.
And Pierre Bezier went to his boss and
| | 00:38 |
said, well, instead of plotting
everything out to the millimeter, how
| | 00:41 |
about we just put a point in and then
adjust the arc around that point.
| | 00:46 |
As his boss (FOREIGN) said, well, Pierre
if that were true the Americans would
| | 00:50 |
already be doing it.
It is the fundamental of all vector-based
| | 00:54 |
drawing that we use today, and it was
originated by him.
| | 00:57 |
But to give you a little bit more
background between the two I'm going to
| | 01:01 |
start by hiding all of my panels.
I'll use my function key, the F1 through
| | 01:06 |
F12 or F1 through F15 on the top of your
keyboard.
| | 01:11 |
The function key F4 hides all my panels,
and now I'll choose View magnification >
| | 01:16 |
Fit in window, so you could see them side
by side.
| | 01:21 |
You'll notice I've assigned a keyboard
shortcut for that.
| | 01:24 |
Command zero on the Mac, or control zero
on the PC, because that works in a lot of
| | 01:27 |
the Adobe programs.
But as you can see, a raster image is a photograph.
| | 01:32 |
So something that originated on your
digital camera or scanner, something that
| | 01:36 |
was worked on in Photoshop possibly.
A vector image typically looks like a
| | 01:42 |
drawing, although I do know people that
can create bugs or objects that you'd
| | 01:46 |
have a hard time differentiating from a
photo of those.
| | 01:52 |
They are very skilled Adobe Illustrator
artists who can just make things look
| | 01:56 |
photo-realistic with their drawing tools.
So, to go over the difference between
| | 02:02 |
these two, raster is made up of pixels.
Vector is made up of points, that's what
| | 02:07 |
gives it it's scalability.
Raster has a certin resolution and a
| | 02:13 |
certain size where it looks the best.
Vector can be printed.
| | 02:17 |
In the high end publishing world, on a
business card or a billboard, and it will
| | 02:22 |
always stay sharp and crisp and never
lose any quality.
| | 02:28 |
When you blow up a raster image or a
bitmap image you'll see the pixels.
| | 02:32 |
Pixel being short for picture element,
pixel, you'll notice it with very jagged edges.
| | 02:39 |
Typically, most web graphics are 72
pixels per inch.
| | 02:43 |
Magazine photo quality is 300 pixels per
inch.
| | 02:46 |
The good news is, Flash was created from
scratch as a vector drawing program.
| | 02:51 |
So with the exception of placed photos or
movies, everything you build in Flash is
| | 02:55 |
scalable to any screen size, and that's a
large movement today.
| | 03:00 |
The screen sizes almost become irrelevant
because we never know what they're
| | 03:04 |
looking at your page on.
It might be a smart phone.
| | 03:08 |
It might be a computer, it could be any
number of devices.
| | 03:12 |
Let's take a closer look at these 2.
If I select this photo, the raster bitmap
| | 03:17 |
image, and choose Modify > Transform >
Scale and rotate.
| | 03:24 |
The reason I'm using this is so that I
can get a dialog and type in an exact
| | 03:27 |
percentage, so we can get a side by side
comparison.
| | 03:31 |
So let me blow this up to 400%, and as
soon as I do, there you can make out
| | 03:35 |
almost every pixel that this image is
composed of.
| | 03:40 |
If I select the vector bananas and go to
Modify > Transform > Scale and rotate, do
| | 03:46 |
the same percentage and hit Okay, you'll
notice very clean, very smooth edges.
| | 03:56 |
And let's take a look out at your
operating system.
| | 03:59 |
So I will jump over to my operating
system, and you'll notice that the file
| | 04:06 |
size between the raster is 266k.
I have a document in your project folder
| | 04:13 |
with just the scan of the bananas placed
in Flash.
| | 04:16 |
The vector, the drawing of the bananas is
143k.
| | 04:21 |
Now that file size is negligible.
You may not notice a big difference but
| | 04:25 |
it depends on how complex the
illustration is and what resolution the
| | 04:28 |
photo is.
For example a 2 by 2 photo at 200 pixels
| | 04:34 |
per inch is 250k, 254.
An 8 by 8 photo at magazine quality is
| | 04:42 |
5.7 megabytes.
The beauty of vector or Bezier curve
| | 04:48 |
typically isn't always, is smaller.
So I'll jump back to flash and I'll
| | 04:55 |
revert to save so I haven't harmed any of
the bananas on the making of this movie.
| | 05:01 |
I'll press my F4 key again to show all my
panels, and in summary, when you're
| | 05:05 |
building any graphics, you'll have either
a raster or a vector.
| | 05:10 |
Any objects you build in Flash like ovals
or rectangles, or little characters that
| | 05:14 |
you may draw, cartoons you may create,
are all vector and all scalable.
| | 05:20 |
Good luck, and just let that marinate for
a little bit.
| | 05:26 |
| | Collapse this transcript |
|
|
2. Getting Comfortable with the Flash InterfaceOverview of the interface| 00:00 |
In this video, we're going to take a look at
the Flash interface.
| | 00:05 |
Let's start with the menu bar.
Pretty much every computer program on the
| | 00:09 |
planet has a menu bar.
But you'll notice since I'm on the Mac
| | 00:12 |
there is an Apple menu and this
Application menu that you won't have on
| | 00:16 |
the Windows side.
What the Application menu contains,
| | 00:21 |
that's different between MAC and PC is
the preferences.
| | 00:25 |
On the PC, you'll start with a File menu
and your preferences will be located
| | 00:28 |
under Edit.
The next important part of the flash
| | 00:32 |
interface is the Application bar.
You could see that I've got a little FL
| | 00:36 |
icon, indicating that I'm in a Flash.
As I slide over to the right, you'll see
| | 00:41 |
the Workspace Switcher.
Depending on your screen resolution on
| | 00:45 |
the Windows platform, this may be up to
the right of your Help menu.
| | 00:49 |
But every Creative Suite 5 application
has this Workspace Switcher, and you'll
| | 00:54 |
see the default workspace is called
essentials.
| | 00:58 |
Since, I'm a heavy Photoshop Illustrator
and end design user, I like the classic
| | 01:02 |
workspace because it puts my tools panel
on the left.
| | 01:07 |
Every tool in most Adobe programs, has a
single letter you can press on the
| | 01:11 |
keyboard, to switch to it.
For example, if I pause over the
| | 01:15 |
Selection tool, you'll see in parenthesis
the letter V.
| | 01:19 |
I always remember V for move, and that
jumps me to my Selection tool, which is
| | 01:22 |
primarily used to move objects around on
the stage.
| | 01:27 |
If I pause over the sub-selection tool
letter a would jump me there, here's an example.
| | 01:32 |
I can press letter T by itself on the
keyboard, and I've jumped to the Type tool.
| | 01:37 |
I can press V for move, and I'm back to
the Move tool.
| | 01:41 |
Every panel, and this is the tools panel,
has the ability to collapsed icons.
| | 01:46 |
So, these double little white arrows,
when I click them once, will give me an
| | 01:50 |
icon only, instead of the tools.
And when I click once, the toolbox or
| | 01:55 |
tools panel looks a little bit different.
It's more in a row layout, so you notice
| | 02:00 |
that it's not one single, vertical
column.
| | 02:04 |
When I click Expand panels, now I get my
single vertical column of tools, which is
| | 02:09 |
my favorite way to work.
As I look over to the far right we have
| | 02:14 |
our standard panels that we'll be working
with frequently.
| | 02:17 |
The Properties panel is context
sensitive.
| | 02:21 |
What that means is, if I select this
graphic on the stage I can see that it's
| | 02:24 |
a bit map, also called a raster graphic.
If I select type I can see in the
| | 02:29 |
properties channel, it's now context
sensitive, indicating that I can change
| | 02:33 |
settings for this text that is selected
on the stage.
| | 02:37 |
I'm going to go back to the stage, and I've
mentioned that a few times, but let's
| | 02:42 |
give you a tour of what it is.
Your workspace where you'll be
| | 02:46 |
constructing your movies and building all
of your documents is known as the stage.
| | 02:51 |
If I were to simply do a New Document and
click Okay on the defaults, I have a
| | 02:55 |
blank white stage.
You'll notice there are tabbed windows
| | 03:00 |
for your open documents.
I have untitled 1, the blank document I
| | 03:04 |
just made.
I can click back on my project file
| | 03:07 |
0201interface.fla, which is the native
Flash format, to bring that forward.
| | 03:15 |
Looking here is your stage where you
build everything and this light gray area
| | 03:19 |
outside this stage is known as the paste
board.
| | 03:22 |
In fact, if I hit Cmd Minus or Ctrl Minus
to zoom out and that works in most every
| | 03:27 |
Adobe program.
You'll see my zoom level changed to 50%.
| | 03:33 |
And sometimes when you're animating, you
may have an object that starts way out in
| | 03:37 |
the pace board, like a ball, bounces in
and then bounces out.
| | 03:42 |
So it's only on the stage for a short
period of time.
| | 03:44 |
And this is an area where it remains
hidden until it crosses into the stage area.
| | 03:49 |
I'm going to go to my View menu and choose
magnification.
| | 03:53 |
And fit in Windows so I can see my entire
stage again.
| | 03:57 |
The timeline is essential and this is
where you'll put actions, where you'll
| | 04:01 |
add layers, where you control the timing
of your movie and this little play head
| | 04:05 |
will scrub the timeline.
So to deconstruct the part of the Windows
| | 04:10 |
that we've covered so far.
menu bar, Application bar with my
| | 04:14 |
workspace switcher, tools panel, Regular
panels that we'll use that are typically
| | 04:20 |
context sensitive.
Especially, when it comes to properties.
| | 04:27 |
Now, other important parts of the
interface appear.
| | 04:30 |
I have Adobe community help, so maybe I
want to learn more about the pen tool.
| | 04:35 |
I'll type in pen tool, and I'll press
return or enter, or hit the little
| | 04:39 |
magnifying glass to search and it brings
up Adobe community help.
| | 04:44 |
It lets me know, hey you've got a web
connection and these are constantly
| | 04:47 |
updated help files, so it goes out to the
Internet, checks to see if anything is new.
| | 04:53 |
I'll go ahead and hit update, you may
experience that periodically and it's
| | 04:56 |
always a good idea to go ahead and
update.
| | 04:59 |
But when I typed pen tool you'll notice,
here's the help file.
| | 05:02 |
Adobe Flash Professional CS5 drawing with
the pen tool.
| | 05:05 |
I can click on it and access an article
explaining how the pen tool works.
| | 05:11 |
I'll close the Adobe help window and I'll
come back to my interface.
| | 05:16 |
Now there are a couple other terms I
want to familiarize you with.
| | 05:20 |
Here we have the Properties panel, and
this is known as a panel doc.
| | 05:25 |
In earlier versions of Adobe programs,
panels were free floating.
| | 05:29 |
Which meant, and I'll show you how you do
it, if I grab properties and drag it out
| | 05:33 |
Into any other area besides the docking
area it floats.
| | 05:39 |
So, I can put it anywhere.
However, I love to treat my panels like drawers.
| | 05:43 |
If somebody moved my sock drawer every
morning I'd be pretty upset because I'd
| | 05:47 |
always be opening the wrong one.
So the docking allows me to keep it here
| | 05:52 |
and then you'll naturally build a habit
of going to the upper right for properties.
| | 05:58 |
Everybody gets comfortable with their
panels and tools in certain spots and
| | 06:01 |
there is no right or wrong way to do it
however I do avoid what I call window dragging.
| | 06:07 |
If I pull the document I am working on
out the document window becomes floating
| | 06:12 |
and window draggers as I call them tend
to look for stuff because they get buried
| | 06:16 |
one behind the other.
Now I can't see the document I have opened.
| | 06:22 |
So I floated both of my windows, this is
a floating window.
| | 06:26 |
I'll drag it back down where it's tabbed.
Tabbed windows have been pretty popular
| | 06:30 |
for about the last five years.
I think I saw them first in my web browser.
| | 06:36 |
Now, I lost the floating interface
document, so I can pull that back up by
| | 06:40 |
going to interface.
And I can doc that back down here so it's
| | 06:44 |
tabbed so it's nice and neat and I always
know where to look for it.
| | 06:49 |
You'll also notice this is called
nesting, 1 document behind the other.
| | 06:53 |
A little power user trick, since I'm a
huge keyboard shortcut fan.
| | 06:57 |
If you temporarily want to hide all of your
panels to see just the stage in your timeline.
| | 07:03 |
I can hit the F4 key on my keyboard.
F4 hid my tools panel, it hid my panels
| | 07:09 |
on the right and even the timeline panel.
It's a toggle, so F4 again will show it
| | 07:15 |
one more time.
And that is my summary of the Flash interface.
| | 07:20 |
So you have your Application bar, tools
panel.
| | 07:24 |
Nested and Dock panels, your open
documents and your timeline and you may
| | 07:30 |
see other panels nested behind it.
Thank you for taking the tour and take a
| | 07:36 |
few moments to orient yourself to your
flash work space
| | 07:40 |
| | Collapse this transcript |
| Panel modes and workspaces| 00:00 |
In this movie, we're going to cover
arranging your panel, creating new panel
| | 00:04 |
columns, adding new panels to your
workspace, stacking or nesting, and
| | 00:09 |
saving and deleting work spaces.
So let's begin.
| | 00:15 |
You'll see that I'm in the default
workspace, Essentials.
| | 00:18 |
And Adobe has nicely included, quite a
few different work spaces for you to
| | 00:21 |
choose from.
For example, if you're going to be doing
| | 00:25 |
a heavy amount of animating, I can choose
the animator work space, and it puts
| | 00:29 |
common panels like Color, Swatches,
Align, Motion Presets here on the left,
| | 00:32 |
Properties and a Library here on the
right.
| | 00:37 |
I'm going to start with my favorite
workspace, the classic workspace and I'm
| | 00:41 |
going to arrange it with a few extra panes
that I'd like to add.
| | 00:46 |
All panels can be taken by their panel
title and floated.
| | 00:50 |
So if for some reason I want properties
in a different spot, I can put it
| | 00:53 |
anywhere on my screen that I'd like.
I'm going to drag it back with Library and
| | 00:58 |
dock it.
I'm not only docking it to this area, but
| | 01:01 |
technically this is called a Stack or
Nesting, they are stacked behind one another.
| | 01:06 |
So I could take the entire group by this
darker gray area, and pull the whole
| | 01:11 |
stack and this extra column off and
undock them.
| | 01:16 |
However, I love the docks, so I'm going to
move my mouse all the way over, almost
| | 01:21 |
until it's off the screen.
It's not safe to let go until you see
| | 01:26 |
this blue bar along the right side.
Don't look at where the panels are
| | 01:31 |
actually going.
Pay attention to where your mouse is
| | 01:33 |
actually going.
That's what flash is hunting for.
| | 01:37 |
When the very tip of this black cursor on
your mouse, the black arrow, hits on the
| | 01:41 |
edge of the screen, that's when you are
docking them.
| | 01:45 |
Now, I can collapse these to icons only,
so they open and close like drawers.
| | 01:50 |
But I prefer to see the full name of
properties because I'm using it so frequently.
| | 01:56 |
In fact, if I wanted to see the names of
these panels, I could mouse over them and
| | 02:01 |
pause, or simply stretch them.
The longer you make it, the more of their
| | 02:06 |
name you could see.
And again, if I stretch to far, you'll
| | 02:09 |
notice that it expands them fully.
I can hit these double white arrows to
| | 02:14 |
collapse to icons.
I'm going to go all the way back down to
| | 02:17 |
icons, because I'm used to the order the
patterns occur in, and, I'm used to
| | 02:21 |
collapsing or expanding them so I don't
waste valuable screen space.
| | 02:26 |
However, there is one panel group that
I'd like to bring up that isn't in the
| | 02:30 |
classic workspace.
All of your panels can be accessed under
| | 02:34 |
the window menu.
Technically, I've seen a couple different
| | 02:38 |
names for them outside of panels.
Years ago, they were called palettes.
| | 02:42 |
I've even seen some technical terms
indicated they're called Windoids or Flotillas.
| | 02:48 |
(LAUGH) Although today, the accepted term
is panel.
| | 02:51 |
So under the Window menu, I'll find
Common Libraries.
| | 02:55 |
And Common Libraries are very handy for
things like built-in sounds or prebuilt buttons.
| | 03:02 |
So I'll pull up the prebuilt buttons
library.
| | 03:05 |
And my main library panel, which stores
all the assets for the movie I'm working
| | 03:09 |
on, is nested or stacked behind
properties.
| | 03:13 |
I'll drag the buttons library in with
that group.
| | 03:17 |
Now it's nested or stacked with
properties and the main library panel.
| | 03:22 |
I could rip that off again, and if for
some reason I wanted it to be its own
| | 03:26 |
little panel group, I can drag it to the
very top, just above, and now library and
| | 03:30 |
properties has moved down, and the
buttons library has moved up.
| | 03:38 |
And I can swap that position.
Again, ignoring where my panel is going.
| | 03:43 |
And looking at the tip of my mouse
cursor.
| | 03:46 |
When I drag that down, now library is
down here.
| | 03:50 |
And I might go grab Window, Common
Libraries, and Sounds.
| | 03:54 |
And put sounds and buttons together.
So they are one little nested group.
| | 04:01 |
I missed there, because I wasn't paying
attention and looking for this blue to
| | 04:05 |
highlight all the way around the edge of
the buttons.
| | 04:08 |
When I let go, now I've got sounds and
buttons together.
| | 04:13 |
I like to keep properties forward cuz I
use it so frequently.
| | 04:17 |
And you can double-click on sounds and
buttons, and it quickly collapses them so
| | 04:21 |
I can fit more in libraries panel.
So I'm very happy with this work space
| | 04:27 |
and it's something I use frequently.
I'll go to my Window menu, and I'm want
| | 04:31 |
to save this work space.
So under Window, Work Space, I can
| | 04:35 |
switch, just like the work space
switcher.
| | 04:41 |
Or, I can go to my work space switcher,
and choose new work space directly
| | 04:44 |
through here.
So let's name this work space Kelly.
| | 04:49 |
If you're trying this on your own, insert
your name there.
| | 04:51 |
When I click OK, now I can see the Kelly
work space.
| | 04:55 |
I'll flip to Essentials, the default work
space just to see the difference.
| | 04:59 |
And then back to Kelly.
If you decide for some reason you no
| | 05:04 |
longer want a workspace, maybe you've
built one that didn't turn out to be that
| | 05:07 |
logical, you may want to delete that
workspace.
| | 05:11 |
So I'm going to go to the workspace
switcher, and choose Manage Workspaces.
| | 05:16 |
I can click on the custom Kelly workspace
I've built and hit Delete.
| | 05:20 |
Are you really sure?
Well, since the purpose of this is to
| | 05:23 |
train you on how to manage your work
space yes, I'll do that.
| | 05:27 |
I would have to go through the effort of
building it again, but I like to start
| | 05:30 |
with just the classic.
So when I'm finished I'll start with the
| | 05:33 |
classic and then add any extra panels
that I use frequently from the Window
| | 05:36 |
menu to that group and save my work space
again.
| | 05:40 |
The last tip I want to give before I leave
is a keyboard shortcut.
| | 05:44 |
Often, you may want to look at just your
movie, and get all the excess stuff,
| | 05:49 |
generically sometimes called Chrome, all
the panels and tools and application bar
| | 05:53 |
out of the way.
So I'm going to use my Function key.
| | 05:58 |
Most keyboards have an F1 through F12 or
F1 through F15.
| | 06:02 |
I'm going to hit F4, Function 4, the F4 key,
and it hides all of my panels.
| | 06:07 |
Hitting F4 again will show them.
I'll hit F4 one more time, and if I mouse
| | 06:13 |
over into the dark grey area, they auto
expand.
| | 06:17 |
Mouse up here, and the timeline auto
expands.
| | 06:21 |
Mouse over to the right, and you do need
to pause you don't need to click, but
| | 06:24 |
properties and the other panels in this
column appear.
| | 06:28 |
Mouse away, they vanish, and I'll hit F4
one last time so that they're always showing.
| | 06:35 |
So, your assignment is, to go out and
make your own work space, after you've
| | 06:39 |
got a little experience in Flash, to find
out what panels you use most frequently.
| | 06:45 |
And there's no right or wrong here.
You can put them wherever they're most comfortable.
| | 06:49 |
Good luck with the work spaces.
| | 06:54 |
| | Collapse this transcript |
| Setting preferences| 00:00 |
Now, let's take a look at setting the
best preferences.
| | 00:05 |
If you're on the Windows platform,
Preferences will be located under the
| | 00:09 |
Edit menu.
You'll notice right now I have no
| | 00:14 |
documents open.
This isn't a document or even the stage,
| | 00:17 |
it's just blank when there's nothing
open.
| | 00:18 |
On the Mac, I'm going to choose from my
Applications menu that says Flash > Preferences.
| | 00:22 |
On Windows, your Edit menu, Preferences,
and I'll scoot this up so you can see it better.
| | 00:30 |
Some people use the Welcome screen to
open recent documents or see user groups,
| | 00:34 |
I don't often want the program to bring
up a dialog.
| | 00:38 |
I want to choose whether I want to do a
new document, the last document I was
| | 00:42 |
working on, or no document.
I typically leave it on No Document.
| | 00:47 |
I'll hit OK, or press Return or Enter,
and the next two settings I'm going to
| | 00:51 |
change are more functional for me.
Again, this'll be under the Edit menu on
| | 00:57 |
a PC.
On the Mac, it's under Application menu
| | 01:00 |
that says Flash and Keyboard Shortcuts.
I use a lot of Adobe programs and most
| | 01:05 |
often, it's Illustrator or Photoshop or
InDesign or Acrobat.
| | 01:10 |
Well, there's one standard keyboard
shortcut to fit your document on screen
| | 01:15 |
in all of those, which on the Mac is Cmd
+0, or on the PC is Ctrl+0.
| | 01:20 |
Flash has no shortcut for fit on screen,
to see your whole stage or the whole
| | 01:23 |
document that you're building.
So, what I'm going to do is take this
| | 01:28 |
standard set of Adobe shortcuts and
duplicate them.
| | 01:32 |
And just make my own set called Kelly,
again, insert your name here, I say that
| | 01:37 |
again because I say that often.
You can call it Kelly if you'd like.
| | 01:42 |
And any command you can access in the
program is available here under Commands.
| | 01:49 |
You'll notice I've got Drawing menu
commands, and I have my File menu, my
| | 01:53 |
Edit menu, my View menu.
I'll click this Expand Triangle to see my
| | 01:58 |
View menu.
I'll go to Magnification, and you'll
| | 02:01 |
notice Fit in Window.
There is no shortcut assigned, because if
| | 02:05 |
there was, I'd see it on the right.
So, down here, I'm going to hit the Plus
| | 02:09 |
sign to add my own shortcut.
Now on my keyboard, I'll hit the keyboard
| | 02:14 |
shortcut I'm used to using in other Adobe
programs, Cmd+0.
| | 02:18 |
If it was taken for something, Flash
would warn me.
| | 02:21 |
It's not.
So, when I hit Change, I've just assigned
| | 02:23 |
Cmd+0 to be fit in window so I don't
have to travel all the way up to the menu
| | 02:27 |
to do it.
Now, longtime Macromedia users and even
| | 02:32 |
Microsoft Office users may be used to Cmd
+ Y to redo.
| | 02:36 |
But again, in the suite of programs that
I run, Redo is Cmd+Shift+Z or Ctrl+
| | 02:41 |
Shift+Z.
So, I'll collapse or roll up the View
| | 02:45 |
menu, and I'll hit the Expand Triangle
next to Edit.
| | 02:49 |
Now, notice Redo is Cmd+Y, which wasn't
a natural shortcut for me, so I'm going
| | 02:53 |
to make it what I'm most comfortable
with.
| | 02:57 |
I'll remove Cmd+Y, hit Plus to add a
new shortcut, and now on my keyboard hit
| | 03:02 |
Cmd+Shift+Z.
It's telling me that this is already
| | 03:07 |
taken for remove transform.
I'm going to accept the fact that it's
| | 03:12 |
already taken because I can do that from
a menu, and it's not a frequent task of
| | 03:16 |
mine, so I'll click Change to change it
anyway.
| | 03:20 |
And this is why it's nice to build your
own set.
| | 03:23 |
When you alter the defaults, it will just
say modified.
| | 03:26 |
I built my own set, or group of
shortcuts.
| | 03:28 |
Before I started, it's saying hey, are
you really sure?
| | 03:31 |
I did warn you, this is already taken to
remove transform.
| | 03:34 |
Yes, I'm really sure, so I'll click
Reassign.
| | 03:37 |
And I'll hit OK.
And the last thing I typically do is head
| | 03:41 |
to the classic workspace, which is my
favorite.
| | 03:44 |
So, that is my group of suggestions for
the best preferences.
| | 03:49 |
You can leave some of them if you're a
long time Flash user, or if you're used
| | 03:53 |
to keyboard shortcuts like Cmd+Y to
redo.
| | 03:57 |
But give them a go.
Good luck with your Flash Prefs.
| | 04:04 |
| | Collapse this transcript |
| Choosing the proper document size| 00:00 |
In this video, we're going to go over the
considerations in building a new document.
| | 00:07 |
Let's start, we have no documents open,
but let's start in Flash by choosing File
| | 00:11 |
> New.
When the new document window appears,
| | 00:15 |
you'll notice you have quite a few
choices.
| | 00:18 |
In most cases, you're simply going to
click OK on Action Script 3.
| | 00:22 |
And let me give you a little bit of
background.
| | 00:25 |
Prior to Flash CS3, everything that flash
created was on an earlier version of
| | 00:30 |
action script known as Action Script 2.
Action script is flash's implementation
| | 00:38 |
of JavaScript.
It's a way to control your behavior in
| | 00:41 |
movies, to do things like create on
roll-overs or on roll-offs or on-click
| | 00:45 |
for a lot of the activity.
This course really doesn't get into
| | 00:49 |
action scripting.
Although at the end, you will do a little
| | 00:52 |
simple scripting to make your movies
stop, for example.
| | 00:56 |
The other choices you have is Adobe AIR.
AIR stands for, Adobe Integrated Runtime
| | 01:03 |
and it is a desktop application.
Little mini apps that can run on both
| | 01:07 |
Windows and MAC platform.
New to CS5 is native iPhone.
| | 01:13 |
So you can create and deliver to the
iPhone.
| | 01:19 |
Flash Lite used to be required for smart
phones, but today smart phones are adding
| | 01:23 |
native support for Flash.
Specifically the Flash Player 10.1, the
| | 01:29 |
very latest.
So we no longer, well, in the future, we
| | 01:32 |
may no longer need to develop in the
Flash Lite format.
| | 01:37 |
And the other ones you don't really need
to be concerned with but Device Central
| | 01:40 |
is a testing for mobile devices.
In pretty much all cases we're going to
| | 01:44 |
leave it on Action Script 3.
You do have one other choice.
| | 01:48 |
Flash has a collection of templates, for
advertising, for animation, for creating
| | 01:53 |
banners, for playing movies, for doing
presentations, and just a collection of
| | 01:58 |
sample files.
You can simply click, and you'll see a
| | 02:03 |
preview on the right.
I'm going to leave it on General.
| | 02:07 |
I'll leave it on Action Script 3, and
I'll click OK.
| | 02:12 |
Now, a lot of people ask me when I did
the new document, I didn't choose a size.
| | 02:16 |
What size is it?
That's an excellent question, thank you
| | 02:19 |
for asking.
I'm going to go to my Modify menu and choose Document.
| | 02:25 |
A good way to remember the shortcut to
that is Cmd+J to Jump to the document settings.
| | 02:30 |
Or in the PC, Ctrl+J to Jump to the
document settings.
| | 02:34 |
And I'll pull that up so you can see it a
little bit better.
| | 02:37 |
Now, here you have a couple of very
important decisions to make.
| | 02:41 |
The default document size for all new
Flash documents is 550 pixels by 400 pixels.
| | 02:47 |
And everything on the web is measured in
pixels for an absolute measurement.
| | 02:53 |
There are relative measurements that you
might use in HTML, such as, percentages
| | 02:58 |
instead of pixels.
Take up 80% of my screen or take up 100%
| | 03:03 |
of my screen.
But keep this in mind, as of 2010, the
| | 03:07 |
statistics aren't out for 2011 yet, more
than 76% of computer users out there,
| | 03:13 |
people surfing and viewing webpages, have
a higher resolution than 1024x768.
| | 03:22 |
In 2009, only 57% of people looking at
your website had a resolution higher than 1024x768.
| | 03:30 |
So you do some math.
If the lowest common denominator is that
| | 03:35 |
resolution, you have to deduct a little
bit for scroll bars or favorites or your
| | 03:40 |
URL bar.
Generically, the excess stuff along the
| | 03:44 |
outside often referred to as crow.
Today we still have 20% of the market
| | 03:49 |
looking at it by 1024 by 768, and that
number has most definitely gone down to
| | 03:54 |
maybe 15% of people looking at it at that
resolution of 1024 by 768 in 2011.
| | 04:03 |
But keep in mind we have a lot of people
looking at our sites now in smartphones,
| | 04:07 |
and those screen sizes are very small.
So the good news is Flash is a vector
| | 04:13 |
drawing program, which means everything
is scalable.
| | 04:17 |
The bad news is you still need to keep in
mind and do some math based on your
| | 04:20 |
website and where your Flash movie is
going to display.
| | 04:24 |
What percentage do you want it to take
up?
| | 04:27 |
At 550 pixels, that's about half of the
resolution of 1024x768.
| | 04:33 |
Moral to this story, take a look at your
audience, keep a higher resolution in
| | 04:38 |
mind today, 1280x1084.
There's a lot of debate about this in the industry.
| | 04:44 |
Most people say the magic number for
building your websites could be 750
| | 04:48 |
pixels wide.
It could be 950 pixels wide.
| | 04:53 |
Somewhere in that range is safe, giving
you roughly 100% of the screen and not
| | 04:57 |
counting in the scroll bars and the menu
bars, and everything else.
| | 05:03 |
For all of our movies, we're going to leave
it at the document default.
| | 05:06 |
You can set your ruler units to inches,
pixels, points, centimeters, or millimeters.
| | 05:12 |
Since we're doing web graphics, I'm going to
leave it on pixels.
| | 05:16 |
If you want your stage to be a different
background color, let's say for example,
| | 05:19 |
you like that sharp black background, and
all your type is going to be white.
| | 05:25 |
That's where you can set it, and your
seeing colors in hexadecimal.
| | 05:28 |
Hexadecimal is the coloring system or
numbering system for colors for the web.
| | 05:35 |
So a pound followed by six digits and
you'll see those numbers, but you can
| | 05:38 |
visually choose this here.
The last conversation I need to have is
| | 05:43 |
frame rate.
Now, again, flash has a good default, a
| | 05:47 |
frame rate of 24 frames per second.
I found a statistic recently that said
| | 05:53 |
the human eye perceives typical cinema
film and when there's motion involved in
| | 05:58 |
the film as fluid at 18 frames per
second.
| | 06:02 |
In the Flash Help, it will tell you for
most websites, 8 frames per second to 15
| | 06:07 |
frames per second is sufficient.
But for more smooth movement, most
| | 06:13 |
everyone today is leaving it at 24.
If you're at 12 frames per second or
| | 06:18 |
lower, your movies might look choppy.
It's not taking a lot more space or file
| | 06:22 |
size to deliver that.
And most people have faster connections
| | 06:26 |
than they did three to five years ago.
Another thing to keep in mind, is movies
| | 06:31 |
have a standard frame rate on the
computer of about 30 frames per second.
| | 06:35 |
What I like to do sometimes however, is
either set the frame rate to 20, or 25,
| | 06:41 |
to make the math simpler.
What you'll notice in framework I'm going to
| | 06:47 |
go ahead and click OK, you'll see my
background color change.
| | 06:51 |
Is when I look at my timeline, I have one
frame.
| | 06:54 |
And when you see it get a little bit
darker gray, those are photo frames.
| | 06:58 |
But when I click right here at 24 frames
per second, that is one second into the movie.
| | 07:04 |
If I go to 48 frames per second, that's
two seconds in the movie.
| | 07:09 |
So, you will have to do a little bit of
math, as you create your animations to
| | 07:13 |
determine how long do I want this text to
appear?
| | 07:17 |
How long do I want this photo to fade in
and fade out?
| | 07:21 |
How long do I want this object to fly
across the stage?
| | 07:26 |
The last thing I want to point out, is that
you can add metadata.
| | 07:30 |
Metadata is extra data in the file, that
makes it more accessible for search engines.
| | 07:37 |
If I choose File > File Info, you could
add things, such as, Title, Author, Description.
| | 07:46 |
And by putting metadata in your document,
it makes it pop up higher when you search
| | 07:52 |
for it.
We're not going to do that now.
| | 07:56 |
The moral to the story is, for most of
your work, you'll be doing file, new.
| | 08:01 |
You'll leave it on Action Script 3 and
click OK.
| | 08:03 |
If you'd like a smaller movie, because
maybe you're doing a banner ad, you can
| | 08:09 |
go to modify document and I can size this
down to maybe 130 pixels by 80 pixels.
| | 08:17 |
I will tell you that Flash has a lot of
preset banner ad sizes in their templates.
| | 08:23 |
And once it's smaller I'll go the view,
magnification, fit in window and begin my construction.
| | 08:31 |
So let that all sink in.
It never hurts to do a little research on this.
| | 08:35 |
The research engine I like to use most is
w3schools.com.
| | 08:42 |
The world wide web consortium, I'll type
that in here.
| | 08:45 |
But that's the website where I found
statistic of 76% of people viewing your
| | 08:52 |
pages at a higher resolution.
Then 1024x768.
| | 08:59 |
So, good luck with setting up your screen
size where most of our exercises will be
| | 09:03 |
at the default settings.
But now, you know how to make your
| | 09:08 |
choices based on what size your movie's
going to end up.
| | 09:14 |
| | Collapse this transcript |
|
|
3. Creating ShapesMerge Drawing mode vs. Object Drawing mode| 00:00 |
In this video, we're going to cover
drawing shapes in Flash.
| | 00:06 |
Feel free to try this along with me, to
pause and rewind, and practice.
| | 00:11 |
Now, a note before we get started.
All of the Drawing tools that you'll use
| | 00:15 |
in Flash create vector shapes, which
means they're infinitely scalable.
| | 00:19 |
So, your Pen tool, your Rectangle and
Oval tool, your Pencil, the Primitive
| | 00:24 |
Drawing tools will all be creating
scalable, small file size art.
| | 00:30 |
So to start, before I create a new
document, I'm going to switch to my
| | 00:34 |
favorite workspace using the Workspace
Switcher on your Application Bar across
| | 00:39 |
the top.
So, Classic is my favorite workspace.
| | 00:43 |
And once I'm on Classic, I'll choose
File > New.
| | 00:46 |
In the new document window, I always
leave it on Action Script 3, and click OK.
| | 00:53 |
And now, I'm going to go to my View menu,
Magnification > Fit in Window.
| | 01:00 |
I have assigned a keyboard shortcut to
that to be Cmd+0 on the Mac, or Ctrl+
| | 01:04 |
0 on the PC.
And you can do that on the Mac under
| | 01:08 |
Flash keyboard shortcuts, or on the PC
under your Edit menu keyboard shortcuts.
| | 01:13 |
So, I'll be using that throughout this
video.
| | 01:15 |
Now, here are my Shape tools.
If I click and hold for two seconds or
| | 01:19 |
right-click, you could see underneath the
Rectangle tool, we have Nested tools.
| | 01:25 |
In this video, we're going to be covering
the Rectangle tool and the Oval tool, and
| | 01:29 |
how Flash draws by default.
So, let's start with the Rectangle tool.
| | 01:35 |
Like other Adobe programs, single letters
change tools.
| | 01:38 |
So, if I was on the Selection tool,
simply hitting the letter R by itself,
| | 01:42 |
the rectangle on my keyboard would jump
me to this tool.
| | 01:47 |
You'll notice down at the bottom of the
tools panel I have a Stroke Color and a
| | 01:51 |
Fill Color.
I can click on the black and choose a new stroke.
| | 01:58 |
Stroke is Adobe's term meaning border or
outline.
| | 02:02 |
A lot of my students who are newer to
computer drawing keep asking me what it's
| | 02:05 |
called a Stroke.
Well, that's a term that's been around
| | 02:09 |
for a while, even in the high-end print
world.
| | 02:11 |
But it means the border of the object or
the outline of the object.
| | 02:15 |
I'll choose a blue for the stroke color.
Another spot you could set the stroke or
| | 02:20 |
outline or filler inside color is in the
Property Inspector.
| | 02:24 |
So, I'm going to come over to my
Properties panel, there's the blue I
| | 02:27 |
selected for the outliner stoke.
And here's the Fill Color.
| | 02:31 |
And when I click on Fill Color, I can
come down and select a yellow.
| | 02:35 |
Now, I'll click and hold and drag to make
a rectangle.
| | 02:40 |
I can keep my Shift key held down if I
want to constrain it to a perfect square
| | 02:46 |
and I let go of my mouse first then the
Shift key.
| | 02:52 |
I call them clutch keys.
You put them in, you shift the gears,
| | 02:54 |
then you let them go.
To move or select the object, I need to
| | 02:58 |
go back to the Selection tool.
And since I'm a keyboard shortcut
| | 03:02 |
fanatic, I'm going to hit the letter V
for move, and that jumped me back to the
| | 03:05 |
Selection tool.
Feel free to click on it if you're not as
| | 03:09 |
into shortcuts as I am.
When I click once on the fill, the yellow
| | 03:14 |
inside color of this square that I've
created, you'll notice a pattern.
| | 03:19 |
This pattern means that it was created
using Flash's default Merge Drawing mode,
| | 03:23 |
and you'll notice in the Properties
Inspector, there is no stroke color.
| | 03:28 |
And you might say, hey, I just saw you
choose blue as your stroke color and I
| | 03:32 |
could see that blue on the stage.
Well, if I click and drag this square
| | 03:38 |
outside, you'll notice it separated this
stroke from the fill.
| | 03:43 |
This, to me, was not natural because I've
been teaching Illustrator for a few years
| | 03:47 |
more than Flash and this doesn't happen
in Illustrator.
| | 03:51 |
However, this is called Cookie Cutting.
And it's been with Flash since its inception.
| | 03:58 |
The logic behind it is, if you don't send
the entire stroke, this little piece
| | 04:02 |
that's sliced away, it makes a smaller
file size.
| | 04:06 |
Well, we have the technology to slice
that on export.
| | 04:10 |
We don't need to slice the objects as
they're built.
| | 04:13 |
Here's another thing to be aware of when
drawing in the Merge Drawing mode.
| | 04:18 |
If I click on the top of the square, I
get only the top of this border or stroke
| | 04:22 |
selected, and that can be moved.
If I undo that and double-click, I can
| | 04:27 |
get the entire stroke and click and drag,
and there's the cookie cutter effect I
| | 04:32 |
was referring to.
So, a lot of Flash users early on got in
| | 04:37 |
the habit to double-clicking to select
the entire shape.
| | 04:41 |
Or once they've drawn a shape, they would
do a Select All and group them.
| | 04:46 |
There's no need to do either of those
things anymore.
| | 04:48 |
To be safe and to make it more
comfortable for me, for someone who is
| | 04:51 |
used to Adobe Illustrator before she
started using Flash, I'm going to turn on
| | 04:55 |
a feature called Object Drawing mode.
When I go to my Rectangle tool at the
| | 05:01 |
bottom of the toolbar, they added a new
feature, and I think this was added in
| | 05:05 |
Flash CS3.
It may have been a little bit before
| | 05:09 |
then, but we've had it for a few
versions.
| | 05:12 |
When I turn on Object Drawing mode, and
this only shows up once you're on a
| | 05:16 |
Drawing tool, the good news is, once it's
on, it's on forever.
| | 05:21 |
But once I turn that on and draw roughly
the same shape, holding down Shift to
| | 05:25 |
make a perfect square, letting go of my
mouse then letting go of Shift.
| | 05:31 |
Now, when I go back to the Selection tool
and click and drag to move the object,
| | 05:35 |
I'm moving the entire shape.
In fact, if I click and hold on the
| | 05:40 |
rectangle, or right-click the Oval tool
and draw an oval, you'll notice a blue
| | 05:45 |
bounding box around the outside.
This blue box means that object drawing
| | 05:51 |
is on.
If I turn Object Drawing off and click
| | 05:54 |
and drag to create another oval, there's
no blue box.
| | 05:59 |
If I go to my Selection tool, click on
the oval, I've only got the inside.
| | 06:04 |
Double-click, and I've got the fill and
stroke.
| | 06:07 |
Click on this one, and the whole object
is selected.
| | 06:11 |
No need to group, no need to
double-click.
| | 06:13 |
So, the moral of the story is to be
comfortable in creative shapes.
| | 06:17 |
I'm going to always have Object Drawing
mode on, and to not forget that I'll go
| | 06:21 |
back to my Oval tool.
Back to Object Drawing, and make sure
| | 06:26 |
it's on before I quit or begin creating
any other shapes.
| | 06:31 |
So, give these two different drawing
modes a try on your own, the Merge
| | 06:35 |
Drawing and the Object Drawing.
Have fun.
| | 06:42 |
| | Collapse this transcript |
| Using primitive objects| 00:00 |
In this video, we're going to take a look
at another pair of drawing tools.
| | 00:05 |
The primitive objects.
Before I start, again, I'll go over to my
| | 00:10 |
Workspace Switcher, and choose my
favorite workspace, Classic.
| | 00:15 |
This places my toolbar on the left where
I'm comfortable with it.
| | 00:18 |
Then I'll choose File, New.
I'll leave the defaults on Action Script
| | 00:24 |
3 and click OK.
Over on my toolbar you'll notice I was on
| | 00:28 |
the Oval tool last.
I'm going to right-click, or click and
| | 00:32 |
hold for two seconds, and choose the
Rectangle primitive tool.
| | 00:38 |
Now you may ask, why do they have two
rectangle tools?
| | 00:41 |
The logic behind the Rectangle primitive
tool and the Oval primitive tool is that
| | 00:46 |
they're more editable.
This got me once, I was burned a little
| | 00:50 |
bit by the fact that I had drawn some
buttons using the regular Rectangle tool,
| | 00:54 |
and set up a corner radius.
When I wanted to adjust those rounded
| | 00:59 |
corners of the rectangle, I couldn't.
So the point for me, in using the
| | 01:03 |
primitive tools, is that they're more
editable, and specifically, one of those
| | 01:07 |
settings you can edit, is the rounded
rectangle options for the corners, often
| | 01:11 |
used for making vertical buttons.
I'm also not using all of my stage that I could.
| | 01:18 |
I have too much gray paste board outside
my window, so I'm going to go to View,
| | 01:23 |
Magnification, Fit In Window.
You'll notice the short cut there to the
| | 01:27 |
right that I've assigned.
Command 0 on the Mac or Control 0 on the PC.
| | 01:33 |
You can reassign, or give menu items
shortcuts that don't have them under the
| | 01:37 |
Flash menu, Keyboard Shortcuts on the
MAC.
| | 01:41 |
Or, if you're a Windows user, it'll be
under the Edit menu at the bottom, you'll
| | 01:43 |
see Keyboard Shortcuts.
When I click and start dragging my
| | 01:48 |
rectangle, I have a blue stroke and a
yellow fill that was on, from before.
| | 01:55 |
When I let go, something that's different
between the rectangle primitive tool and
| | 02:00 |
the traditional rectangle tool, is if I
click and drag, using the traditional
| | 02:04 |
rectangle which I just quickly switched
to, I'll go back to my selection tool,
| | 02:09 |
click this, and there are four corner
points.
| | 02:15 |
When I click the traditional rectangle
object, I see no corner points.
| | 02:20 |
I can move the shape, but nothing extra
lights up.
| | 02:24 |
I'll click back on my primitive rectangle
that I created, and move over that corner point.
| | 02:29 |
And now, I can click and drag to round
the corners.
| | 02:33 |
I love that feature.
Adobe with inDesign CS5 added something
| | 02:36 |
similar that allows you to do rounded
corners that people kind of ooh and aah
| | 02:40 |
over all the time.
You could also adjust the rounded
| | 02:44 |
corners, over in Rectangle Options.
So I can go to inverse one direction or
| | 02:49 |
the other, or I could simply hit Reset to
go back to hard corners.
| | 02:54 |
And a little trick.
While you're drawing a shape, I'll go
| | 02:57 |
back, click and hold for two seconds.
I have to say count to two, because
| | 03:01 |
sometimes people only wait one second,
and it doesn't work.
| | 03:04 |
So, in my head, I'm always going one,
two.
| | 03:07 |
Patience is a virtue, that most people
lack.
| | 03:11 |
As I'm clicking and dragging, with the
rectangle primitive tool, I can use my up
| | 03:15 |
arrow keys on my keyboard, and that's
doing inverse rounded corners.
| | 03:21 |
My down arrow keys on my keyboard, is
adjusting the corner radius as I draw.
| | 03:27 |
So just your regular up and down arrow
keys on your keyboard will make those adjustments.
| | 03:32 |
Nice for visually doing it, instead of
doing it after the fact.
| | 03:36 |
Now let's take a look at the oval
primitive tool.
| | 03:40 |
And this is one of my favorites.
Before I draw any ovals, I'm going to do
| | 03:43 |
a Select All.
Command A on the Mac, or Control A on the
| | 03:47 |
PC, and just hit my Delete key.
I will use my Shift key when I draw the
| | 03:53 |
oval to make it a perfect circle, and
with the Oval primitive tool I have two
| | 03:57 |
points that I can modify this oval with.
Since I used the Shift key it's
| | 04:03 |
technically a perfect circle.
When I click this first point, I can
| | 04:07 |
actually create, like a pie, and it
always makes me think of Pac man or Ms.
| | 04:11 |
Pac man, in my case.
I'll undo that, and instead of traveling
| | 04:16 |
to the menu to undo all the time, I
always remember the French (FOREIGN),
| | 04:20 |
which means, oh shoot.
Command Z on the Mac, or Control Z on Windows.
| | 04:27 |
I'll click on the middle point, and drag,
and now I've turned my circle into a
| | 04:32 |
donut, or into the letter O.
And a couple little power user tricks
| | 04:37 |
before I finish.
Let me put a few more shapes out here.
| | 04:41 |
So I'll go back to the Rectangle
primitive tool, click and drag.
| | 04:45 |
Use my up or down arrow keys, to adjust
my corner radius.
| | 04:52 |
Go back to the Oval primitive tool.
Click and drag using Shift.
| | 04:58 |
And you'll notice it was left open.
When I played with that last point, on
| | 05:02 |
the Oval primitive tool, it left that gap
open.
| | 05:06 |
I can reset that.
And there's even options, it's always a
| | 05:09 |
good idea to check out your Properties
Inspector, because you could set angles
| | 05:12 |
for starting at end.
You could tell it to open or close the
| | 05:16 |
path, and I can even adjust the inner
radius by sliding from here.
| | 05:20 |
But I like the letter c there.
Here's the power user tricks.
| | 05:24 |
Command A on the Mac, or Control A on the
PC, always selects all.
| | 05:29 |
Escape, in Flash, deselects everything on
the stage.
| | 05:33 |
However, that isn't an Adobe Suite wide
shortcut, so here's another one I like to
| | 05:37 |
use instead.
And I'll do the Mac ones first.
| | 05:40 |
Command A to select all.
Command shift A deselects all.
| | 05:43 |
And that works in most of the creative
suite programs.
| | 05:44 |
On the PC, that would be Control A to
select all.
| | 05:52 |
Control Shift A to deselect all.
So even though it's a few more keys than
| | 05:57 |
hitting escape, I'm more used to it,
because I can use it in inDesign,
| | 06:00 |
Illustrator and Photoshop.
So that is my tour of the primitive
| | 06:05 |
tools, which I'm more likely to use than
the standard rectangle or oval, because
| | 06:10 |
it's safer.
I won't be mad at myself later because I
| | 06:15 |
can't edit a shape, if I go back in a
week or a month to modify, let's say, a
| | 06:18 |
web page that I built, or a button that
I've created.
| | 06:24 |
So practice with your oval primitive
tool, and your rectangle primitive tool.
| | 06:28 |
And take a full look at the properties
inspector, as you're doing that practice.
| | 06:37 |
| | Collapse this transcript |
| Other shape tools| 00:00 |
Now, let's take a look at a few of the
other shaped tools.
| | 00:04 |
Again, before I start, I'm going to go to my
work space switcher, and choose my
| | 00:08 |
favorite classic work space.
We'll start with a fresh new document.
| | 00:13 |
So, from your File menu, choose New, and
click OK on the defaults.
| | 00:19 |
The last tool I was using you'll notice
is the oval primitive tool, and one
| | 00:22 |
little note, I'm going to draw a quick shape
here.
| | 00:25 |
With the oval primitive tool, if I've
opened this up like a Pacman, or modified
| | 00:30 |
the inner radius by grabbing the second
button, when I draw with the oval
| | 00:35 |
primitave tool again, it keeps that
letter c happening.
| | 00:41 |
Remember the properties inspector can
always reset that, so now it's a complete
| | 00:46 |
oval or circle.
I'm going to hit command A or Ctrl+A to
| | 00:50 |
select All, and hit Delete.
So the shape tools you have to chose from
| | 00:55 |
are rectangle, oval., rectangle primitive
and oval primitive, but the additional
| | 00:59 |
shape tools include the polystar tool,
called that because it can do polygons or
| | 01:03 |
it can do stars.
When I choose the polystar tool, if I
| | 01:09 |
don't change the settings, typically your
going to be on default colors, or
| | 01:13 |
default, depending if you have a southern
accent, I'll click that and I'm on a
| | 01:18 |
black stroke and a white fill.
And when I Click and Drag, you'll notice
| | 01:25 |
it creates a five-sided polygon.
I'm also on Object Drawing mode.
| | 01:31 |
I could tell that as soon as I let go,
because of the bounding box around the outside.
| | 01:35 |
And it's a good idea when practicing with
any of these tools, to turn on Object
| | 01:39 |
Drawing, so you don't get that cookie
cutter effect, where fills and strokes
| | 01:42 |
and objects that are overlapping are
slicing one another.
| | 01:47 |
Now I'd like to build a star.
So I'm still on the polystar tool, over
| | 01:51 |
in my properties inspector I can choose
Option.
| | 01:56 |
However, the last polygon I just created
is still selected.
| | 02:00 |
So I'll hit command Shift A, or Ctrl
Shift A, to deselect all.
| | 02:04 |
You may have noticed, as soon as I
deselected that shape, my options popped
| | 02:08 |
up on the properties.
So it's context sensitive, it will change
| | 02:12 |
depending on what's selected on the
stage, or what tool you're on.
| | 02:16 |
When I hit options, we'll leave it on,
actually, we'll switch it to, instead of
| | 02:22 |
a polygon, a star.
But we'll leave it on five sides, and
| | 02:26 |
I'll adjust the star point after I create
the first one.
| | 02:31 |
So I'll click OK, and click and drag.
So I've got a five pointed star.
| | 02:32 |
Again, I can hit Cmd+Shift+A, or
Ctrl+Shift+A to deselect all, Escape is a
| | 02:38 |
faster way to do it, but I use this
shortcut 'cuz it works in most Adobe
| | 02:42 |
Create Suite applications.
I'm going to hit Options and the star point
| | 02:49 |
size is really the inner or outer radius.
If you'll notice, I have half a point here.
| | 02:57 |
Let's go to .75 and click OK.
And now I'll click and drag, so it gets
| | 03:03 |
more obtuse.
I'll hit Cmd+Shift+ A, or Ctrl+Shift+ A,
| | 03:07 |
hit Options and let's make that two.
Click OK and Click and Drag, and it
| | 03:12 |
almost looks the same, because if the
number is small, it's adjusting the
| | 03:17 |
radius inside, if the number is large
it's adjusting the radius outside.
| | 03:23 |
So you may notice these look very
similar.
| | 03:25 |
Let's deselect all again, hit options one
more time, and try 0.2.
| | 03:31 |
I'll click OK.
Now click and drag, and now I get a very
| | 03:36 |
tight star, and I'll let go.
So there's your little tour of the poly
| | 03:42 |
star tool, I'm going to select all, Cmd+A,
or Ctrl+A, and hit my Delete key to delete.
| | 03:48 |
And the last tool for creating other
shapes is something you may want to free
| | 03:52 |
form draw.
I'll use the pencil tool, and there's
| | 03:55 |
only one thing I ever really learned to
draw, and that was a horse that sometimes
| | 03:59 |
ends up looking like a duck or a giraffe.
As I click and drag to make the horses
| | 04:05 |
ears, you notice how straight that ended
up being?
| | 04:08 |
Well the Pen tool has, drawing modes on
it.
| | 04:12 |
At the bottom of the tools panel you can
see there are three modes, straighten,
| | 04:15 |
smooth, and the bottom one, which is a
little off my screen at the moment is Ink.
| | 04:21 |
But I'm going to choose smooth.
I'll delete this shape that I just
| | 04:25 |
created, and now as I click and drag to
draw the ears, it smooths it out a little
| | 04:29 |
bit, but it doesn't make it look like a
very tight triangle, it's giving me more
| | 04:33 |
of the natural shape.
I'll click and choose Ink, and do roughly
| | 04:39 |
the same thing, and ink mode does pretty
much the same, it does apply some smoothing.
| | 04:45 |
So I typically like to leave it on
smooth.
| | 04:48 |
I'll do select All and a Delete, and
before I draw with a pencil tool I'm
| | 04:51 |
going to make my stroke a little bit
thicker.
| | 04:55 |
You can dial it up here, or I can simply
type in a height of four, for example.
| | 05:02 |
Now as I click and drag here, I'm
building the horse.
| | 05:07 |
(LAUGH) And really not doing a great job
today, but I am not a fine artist, so
| | 05:11 |
there you can see what I've drawn.
When I come back to my selection tool and
| | 05:18 |
click on any shape, you'll notice each
time I let go of the mouse, that created
| | 05:21 |
one independent shape.
This is what I might go back to the
| | 05:26 |
traditional merge drawing mode.
I'm going to do a select all and hit delete,
| | 05:31 |
and I'll go back to my pencil tool and
I'll turn off object drawing.
| | 05:37 |
If I want this horse to end up being one
shape, anything I overlap will basically
| | 05:42 |
be unified.
So let's draw the ears again, let's draw
| | 05:48 |
the nose, the jaw.
I'm going to undo that because I really
| | 05:53 |
don't like how I did it.
(LAUGH) I'll click and drag to do the
| | 05:57 |
back, and there we have it.
Now when I go to my selection tool and
| | 06:02 |
click, I can select an individual segment
or piece, or double-click to get the
| | 06:06 |
entire shape.
Now, when shapes overlap, you can see I
| | 06:11 |
got more of this, because I made sure
those pieces touched.
| | 06:15 |
I could also when I'm finished do a
Select All and choose Group, Modify Group.
| | 06:23 |
And now, I get the bounding box around
the entire shape.
| | 06:26 |
There are other ways to merge objects
that you've drawn, or create complete pieces.
| | 06:32 |
But this'll get you by to get started.
So take some time and practice with the
| | 06:36 |
polystar tool creating polygons, creating
stars.
| | 06:39 |
And then see if you're really an artist
using your free form mouse and your
| | 06:46 |
pencil tool.
| | 06:48 |
| | Collapse this transcript |
| Selecting, modifying, and transforming objects| 00:00 |
In this video, we're going to cover
selecting, transforming, reshaping and
| | 00:06 |
modifying objects.
You'll notice that I'm on the essentials workspace.
| | 00:12 |
I'm going to switch to my favorite, the
classic workspace, and I'll do view
| | 00:16 |
magnification fit in window.
I've set up a keyboard shortcut on the
| | 00:22 |
Mac to be Cmd 0, or on the PC control
zero through my keyboard shortcuts when
| | 00:26 |
setting my Preferences.
The first important tool you'll use to
| | 00:32 |
select objects is the Selection tool.
If I click on this red oval you'll notice
| | 00:36 |
this blue bounding box around the
outside...
| | 00:40 |
This means, that object drawing mode was
on when I created the shape.
| | 00:46 |
Right now it's off, if I go back to my
Selection tool and click on this purple
| | 00:51 |
oval, you'll notice a pattern inside.
This means that, it was created with
| | 00:57 |
merge drawing mode on, which is the
default.
| | 01:00 |
If I want to select both circles at the
same time, or both ovals, I can hold down
| | 01:05 |
my Shift key and Shift clicking will let
me select each object on the stage.
| | 01:12 |
You'll see again, the pattern inside the
objects created with merge drawing, and a
| | 01:17 |
bounding box around, either the primitive
objects, or the oval and rectangle
| | 01:22 |
created with the object drawing mode on.
Another way to select is called a Marquee select.
| | 01:31 |
If I want both ovals and the text above I
click and drag starting in the white
| | 01:35 |
space on my space, or starting out in the
gray of the paste board over the objects
| | 01:40 |
I'd like to select.
So this whole time, I've been holding
| | 01:46 |
down my mouse.
When I let go, I've got 4 selected
| | 01:49 |
objects, the two text boxes and the two
ovals.
| | 01:53 |
If I click Away, it Deselects as I click
and drag again.
| | 01:57 |
You'll notice, if I get just a little bit
into the text rectangle tool or cross
| | 02:01 |
anywhere over this text box.
These boxes were selected, but my mouse
| | 02:06 |
didn't go low enough to grab the yellow
rectangle or the purple circle.
| | 02:11 |
I'll click Away to Deselect, and if I
wanted to reshape this object.
| | 02:18 |
I'm going to zoom in, I'll switch to my zoom
tool and I'll do what's called a Marquee Zoom.
| | 02:23 |
Always starting at a corner and clicking
and dragging to zoom in to that exact
| | 02:27 |
spot, or one click.
We'll just go to a default zoom level,
| | 02:32 |
you'll see I'm at 529%.
I'm using my wheel on my mouse to roll up
| | 02:36 |
a little bit, and a couple clicks to roll
back down.
| | 02:40 |
Now, with the Selection tool, I can't
grab the corners and re-size, there's no
| | 02:44 |
re-size handles.
In order to re-size this oval, I'll go to
| | 02:48 |
my Free Transform tool.
That took me a little getting used to
| | 02:52 |
because in many Adobe programs, the
selection tool also lets you re-size, not
| | 02:57 |
in Flash.
In Flash, you'd have to be on the Free
| | 03:00 |
Transform tool.
And a good way to remember the shortcut
| | 03:03 |
to jump there is quickly change the
object.
| | 03:06 |
The shortcut is the letter Q on your
keyboard.
| | 03:09 |
So, V for move is a Selection.
Q for quickly modify the object is the
| | 03:15 |
free transform.
And there are three cursor states you
| | 03:18 |
want to be aware of on free transform.
If I move to a corner, I'm stretching the object.
| | 03:26 |
If I move to any of the middle points, I
can resize up and down, or left and right.
| | 03:33 |
So, you'll notice my cursor is either
diagonal arrows, up and down arrows, or
| | 03:37 |
left and right arrows.
If I move outside just a bit, anywhere
| | 03:43 |
not on the handle itself, and click and
drag I'm rotating, and this is showing me
| | 03:48 |
the original position.
I'm going to undo, Cmd Z or Ctrl Z, or edit
| | 03:56 |
undo, and the third cursor state is skew.
So, you'll notice when I get close to the
| | 04:05 |
line of the bounding box, I'll see kind
of two half and half arrows.
| | 04:10 |
When I click and drag I'm skewing the
shape.
| | 04:13 |
Again I'm going to undo that and I'll show
you how I use skew.
| | 04:18 |
I'm going to hold down, and this is a power
user trick, on my keyboard I'll hold down
| | 04:22 |
option or Alt and drag this to the right.
That just made a second copy of the circle.
| | 04:28 |
When I click on the original that I left
in place, I can now change the color to
| | 04:33 |
make it a shadow, and often shadows cast
backwards, so this is where I use skew.
| | 04:41 |
I look for those little half arrows and I
click and drag and I've made a shadow.
| | 04:46 |
And let's make it a bit smaller by
grabbing the corners.
| | 04:51 |
So there's a couple different ways to use
your Free Transform tool.
| | 04:56 |
One last note, I'm going to hit Cmd Minus or
Ctrl Minus to zoom out.
| | 05:01 |
If I wanted to enlarge this circle, I'm
still on the Free Transform tool, when I
| | 05:05 |
go to the lower right corner, I can click
and drag.
| | 05:09 |
But you'll notice it's scaling from the
upper left, I'm going to undo and again user
| | 05:14 |
a power user trick.
Holding down option or alt while grabbing
| | 05:20 |
any corner scales from the center out.
All right, I'm going to hit Cmd 0 or Ctrl 0 to
| | 05:27 |
fit in window and take a look at a few of
the options in merge drawing mode.
| | 05:34 |
I'll again zoom in, and I'll do a mark
zoom.
| | 05:38 |
So I switch to my zoom tool click and
drag the zoom in a little closer, and go
| | 05:41 |
back to my Selection tool.
Now with the Selection tool, if I click
| | 05:46 |
away it's not selected.
When I get on the edge of the object,
| | 05:49 |
you'll notice emerged drawing mode.
My cursor get's a little curve below it,
| | 05:55 |
so I can click and drag out, to reshape
the object.
| | 05:59 |
Gotta make it look like its warped in
space.
| | 06:02 |
(LAUGH) Where it's neater, I'm going to hold
down just my Spacebar key.
| | 06:06 |
Another power user trick that works again
in most Adobe programs.
| | 06:10 |
Spacebar will let me click and drag on my
screen, to move over to this rectangle
| | 06:14 |
created with Merge Drawing on.
So on a rectangle, if I click the edge,
| | 06:19 |
and look for that little curve under the
selection cursor, I can make this kind of
| | 06:24 |
a round point, like the tip of a felt
marker.
| | 06:29 |
Then I could do that on any side, that
does not happen, I'll use Spacebar to
| | 06:33 |
look at the rectangle above, it does not
happen with objects created in the object
| | 06:37 |
drawing mode.
See how it just moves the entire object?
| | 06:43 |
It's kind of faking me out letting me
know it might do that, but it really
| | 06:46 |
doesn't work.
So, I'll hit Cmd 0, Ctrl 0 to fit in
| | 06:50 |
window again, and the next way I may want
to transform a shape is to just move the
| | 06:54 |
position on the stage.
So, I'll select this rectangle that has
| | 07:00 |
rounded corners, and I use the primitive
rectangle tool to make sure I can adjust
| | 07:05 |
the roundness of the corners.
I could slide that in or out, any direction.
| | 07:12 |
But what I'm going to do with this one is
go to my info panel.
| | 07:16 |
You can bring up if you aren't in the
classic workspace under window, info.
| | 07:21 |
All your panels are located there, I
could see a width and a height and an xy value.
| | 07:27 |
By default, the xy value is at the upper
left corner.
| | 07:31 |
If I click here, it gives me an xy value
for the center.
| | 07:34 |
And let me hold down Spacebar and click
and drag this over after zooming in so
| | 07:39 |
you can see that a little bit better.
I'll click Back on the rectangle, back on
| | 07:45 |
the Info panel.
And now, click here to measure from upper
| | 07:49 |
left corner.
If I don't like seeing 0.6 of a pixel, or
| | 07:53 |
0.95 of a pixel, I could make this an
exact value.
| | 07:57 |
Let's say, I need to do an animation by
typing 432 hitting tap and 69 and hitting
| | 08:02 |
return and that's an easier number to
remember if you need to transform an
| | 08:07 |
object to that spot.
So we given you a tool of two
| | 08:13 |
fundamentals Selection tools, the
Selection tool for selecting objects or
| | 08:18 |
Marqueeing them.
You can use Shift to grab multiple
| | 08:23 |
objects, and click away to Deselect, and
a Free Transform tool in order to skew,
| | 08:30 |
rotate, or resize an object.
So open the 0304 select and transform
| | 08:39 |
exercise and give this a shot on your
own.
| | 08:45 |
| | Collapse this transcript |
|
|
4. AnimatingYour first animation| 00:02 |
In this video, we're going to start with a
brand new document and quickly animate
| | 00:06 |
some text using Flash's built in motion
presets.
| | 00:10 |
Motion presets were added to Flash CS4.
And there's a great collection or variety
| | 00:16 |
that you can use.
So let's begin.
| | 00:18 |
Under the File > New, I'll leave it on
ActionScript 3, and click OK.
| | 00:26 |
I can hit the letter T on my keyboard to
go to the Type tool or Text tool, or
| | 00:30 |
simply click the T to jump to the Text
tool.
| | 00:35 |
When I click once on the stage, Flash
creates an area to type.
| | 00:39 |
And it will create that text area in the
last font and size and style and color
| | 00:45 |
that I used.
Here I've got a little danger on color.
| | 00:50 |
White on white would be invisible.
So, let me go ahead and click on color
| | 00:54 |
and select a red.
And I'll type hello.
| | 00:58 |
I can double-click to select the entire
word.
| | 01:01 |
And I can click and select a different
font, if I'd like.
| | 01:04 |
But I'm a fan of Century Gothic, so I'm
going to leave that.
| | 01:08 |
Flash has something very fun called
Scrubby sliders.
| | 01:12 |
If my type looks a little too big or a
little too small, I could type 200 for
| | 01:16 |
the size, and press return or enter to
accept it.
| | 01:20 |
Or, if I move over the blue text, and
look for that finger pointing, with the
| | 01:25 |
left and right arrows, I can click and
drag up or down to size my text.
| | 01:31 |
And then I go back to my Selection tool
and simply drag this Hello, to roughly
| | 01:36 |
the top of my stage.
If I want this perfectly centered on the
| | 01:41 |
stage, I can go to my Align panel.
You'll find that under Window > Align, or
| | 01:46 |
in my favorite classic work space, it
always occurs right here.
| | 01:52 |
And if Align to Stage is checked when I
hit the second button, Align Horizontal
| | 01:57 |
Center, now I know it's perfectly center.
As I teach, I like to reinforce good work
| | 02:04 |
habits.So, before we animate I'm going to
name my layer.
| | 02:08 |
I'll name this Hello text.
Layers become essential to really track
| | 02:14 |
and control your animations.
Now, I'll select my text again and I
| | 02:19 |
could go to window and choose motion
presets or again, in my classic
| | 02:23 |
workspace, I can click this spot where
motion presets are always available.
| | 02:31 |
I have nothing selected, so it's saying
preview not available.
| | 02:35 |
But I'll expand by clicking on the small
triangle, the default presets, and click
| | 02:40 |
once on the bounce-in-3D.
I can stretch this to see a few more
| | 02:45 |
options and I can make this preview
bigger or smaller just by adjusting this
| | 02:50 |
portion at the panel.
I can fly in, while exploring from the
| | 02:56 |
bottom, fly in while exploring from the
top or fly in left or right.
| | 03:04 |
I'll scroll down to see a little bit more
and I think I'll fly in from the top.
| | 03:09 |
When I select that, nothing's happened to
the text yet.
| | 03:13 |
But when I click apply, I've just created
my first motion tween.
| | 03:18 |
In order to see what this did, I can do
what's called scrubbing the timeline.
| | 03:24 |
I'll grab this red play head and drag to
the right...
| | 03:28 |
And you'll see my text is moved a little
bit off stage.
| | 03:31 |
Let me View > Magnification > Fit In
Window, just to make sure I'm seeing everything.
| | 03:38 |
And yes, there's the bottom.
So, I could reposition the whole thing.
| | 03:42 |
I could double-click and drag the whole
effect up, so the text doesn't get
| | 03:46 |
chopped off.
This all depends on where you dragged it
| | 03:50 |
to start, so no big deal if it's not
perfect.
| | 03:53 |
If I take a look at my timeline, this
black dot indicates there is type or
| | 03:58 |
something on keyframe one.
The default frames per second is 24.
| | 04:04 |
So, this means that Flash did something
called tweening.
| | 04:08 |
It made a 1 second animation because
there are 24 frames in 1 second.
| | 04:14 |
Just like a movie.
They are actually called flicks because
| | 04:17 |
you would have a frame that would
flicker.
| | 04:20 |
In the olden days, they would say, let's
go see a flicker, and it got shortened to flick.
| | 04:24 |
Well, each little scrub of my timeline is
one of those flicks or flickers like a
| | 04:28 |
frame in a movie.
You'll notice a little diamond at frame 24.
| | 04:34 |
That diamond means a transition has
happened.
| | 04:37 |
So, it could be movement, it could be
rotation, could be scale, could be many things.
| | 04:43 |
But let's test this and see how the final
animation looks.
| | 04:47 |
I'll go to my Control > Test Movie.
Now, it is a good idea to save your movie
| | 04:54 |
before you test.
So, before I say test it in Flash, let's
| | 04:58 |
go to File > Save As and I'm going to go to
my hard drive and make a new folder and
| | 05:03 |
call it Flash Practice.
You'll notice I never put a space in a
| | 05:09 |
file name, just a good work habit
especially when publishing to the web.
| | 05:15 |
And I'll call this hello_01.
I start numbering files because I may do
| | 05:21 |
several different variations of this.
And using a double digit numbering scheme
| | 05:26 |
is a good work habit.
So I'll hit Save.
| | 05:28 |
And now, I'm ready to go to my Control >
Test Movie > In Flash is the default.
| | 05:34 |
And you'll notice this shortcut.
It shows the Command symbol on the Mac,
| | 05:39 |
and that's your Return key.
So, hitting Cmd+Return on the Mac, or
| | 05:43 |
Ctrl+Enter on Windows will do the same
thing as Control > Test Movie and Test.
| | 05:49 |
So let's take a look.
Flash is building a SWF, a .swf, and
| | 05:53 |
there's my quick one-second animation.
So, give that a try with any text of your own.
| | 06:04 |
| | Collapse this transcript |
| That's how the ball bounces| 00:00 |
In this movie, I'll have you create a
document from scratch, an object from
| | 00:05 |
scratch, and animate it.
So, let's start out with File > New.
| | 00:12 |
I'll leave it on action script three and
click OK.
| | 00:16 |
By default, I get a white stage.
And if I want to check the Document
| | 00:20 |
Settings, I could choose Modify Document.
You should've determined proper width and
| | 00:25 |
height that you require, but for this,
we'll leave it on the defaults.
| | 00:29 |
The frame rate is 24 frames equals 1
second, so your math, in order to get
| | 00:34 |
seconds in a movie, will be divisible by
24.
| | 00:39 |
I'll click OK, and I've switched to my
favorite Classic workspace.
| | 00:44 |
I'm going to start with the Oval tool.
So, I'll click and hold on the Rectangle
| | 00:49 |
tool and slide to the Oval tool, and I
think I'd like a red ball.
| | 00:54 |
So, I confirmed that my outliner stroke
color is none, and or confirm that my
| | 00:58 |
color is red.
I also prefer to draw with Object Drawing
| | 01:04 |
mode on.
This way, any objects that overlap don't
| | 01:07 |
automatically slice one another.
And if your circle or ball did have a
| | 01:12 |
stroke, it wouldn't be a separate piece
from the fill color.
| | 01:17 |
I'll take a look at my timeline.
You'll notice I have one layer and
| | 01:22 |
keyframe 1 is empty.
This hollow bullet means there's no
| | 01:26 |
content yet.
As I draw my circle, I'm going to draw it
| | 01:29 |
off stage in the paste board area, the
light grey area outside the white.
| | 01:34 |
I'll hold down my Shift key to make it a
perfect circle.
| | 01:37 |
Once I do that, I'll go back to my
Selection tool so I can move the object.
| | 01:42 |
To be a good Flash user, I'll
double-click and name my layer Ball.
| | 01:47 |
If I think there will be multiple
objects, I might want to name it Red Ball
| | 01:50 |
to be more descriptive.
But either one will work.
| | 01:54 |
As soon as I press Return or Enter,
you'll notice the layer name is accepted.
| | 01:59 |
And because I created the object, you'll
notice the bullet is now solid,
| | 02:03 |
indicating that there is content on
keyframe 1.
| | 02:07 |
In order to animate, I'll select the
object and then right-click.
| | 02:11 |
On the Mac, if you don't have a right
mouse button programmed, you can hold
| | 02:15 |
down your Ctrl key and click to bring up
this menu.
| | 02:19 |
And the first choice will be Create
Motion Tween.
| | 02:23 |
Motion Tweens mean let Flash create the
in-between to get my ball from one spot
| | 02:28 |
on the stage to the next.
So, once I create a Motion Tween, the
| | 02:34 |
first time it will, hey, do you know this
needs to be assemble in order to be tweened?
| | 02:40 |
Would you like me to convert it assemble
for you so that you can animate this?
| | 02:45 |
Yes, I want that to happen.
And I'm not a big fan of warning
| | 02:48 |
dialogs, especially when they're doing
something good so I am going to hit,
| | 02:51 |
don't show again, and hit OK.
Now, because I right-clicked and choose
| | 02:57 |
Create Motion Tween, Flash has put in at
Tween's Span, this light blue area,
| | 03:03 |
playing for one second.
So, it goes to 24 frames per second or
| | 03:10 |
keyframe 24.
In order to create the first bounce, all
| | 03:14 |
I need to do is move the ball.
And that little line on the bottom
| | 03:19 |
indicates that it's hitting the bottom of
the stage.
| | 03:22 |
So, this is a motion path indicating
that's where the ball is bouncing.
| | 03:27 |
I can grab my playhead and scrub the
timeline to see the animation I've created.
| | 03:33 |
But I'd also like it to bounce out.
So that I have the ball bounce out in the
| | 03:37 |
second second of the movie (LAUGH) or my
next full second of the movie, I'll click
| | 03:43 |
a keyframe 48 and I'll choose from my
Insert menu, Timeline > Keyframe.
| | 03:52 |
I'll move my playhead there cuz that's
where the action's going, and you'll
| | 03:55 |
notice this is diamond-shaped, and this
is diamond-shaped.
| | 03:59 |
So, there's a lot of different
transitions that I could have happen.
| | 04:02 |
I could have it fade in and out, I could
have it change shape or size or color,
| | 04:06 |
but here, I'm just having it change
position.
| | 04:10 |
So now, I'll grab the ball and drag it
offstage.
| | 04:14 |
And before I play this, I'm going to save
my movie.
| | 04:17 |
So I'll choose File > Save.
Save and Save As are the same thing the
| | 04:22 |
first time.
And I've got a folder in my hard drive
| | 04:25 |
called Flash Practice.
I'll name this ball _01.
| | 04:30 |
I never use a space in a web file name
because every space is replaced with
| | 04:34 |
three characters, %20.
That's why you may get a lot of numbers
| | 04:39 |
and percent signs in email attachments.
I'll hit Save.
| | 04:45 |
And now, I'll choose Control > Test Movie
> Test.
| | 04:54 |
Or I could hit Cmd+Return on the Mac,
or Ctrl+Enter on the PC.
| | 04:58 |
There's my bouncing ball.
Let's wrap that all up and do it one more
| | 05:04 |
time just to see how quick it happens.
You may notice that in the Library panel,
| | 05:11 |
my red oval was turned into a symbol.
So, I'm going to do another new document.
| | 05:19 |
File > New.
Click OK.
| | 05:21 |
Grab my oval tool, Object Drawing is
still on.
| | 05:25 |
I'll choose blue for this object, and
I'll name my layer Blue Ball.
| | 05:32 |
There's still no content on keyframe 1.
But as soon as hold down Shift, which
| | 05:37 |
keeps it a perfect circle, and click and
drag and let go, the bullet fills in to
| | 05:41 |
let me know there's content on keyframe
1.
| | 05:46 |
I'll go back to my Selection tool, I'll
right-click and choose Create Motion Tween.
| | 05:51 |
I'll move it into position roughly at the
bottom middle of the stage, then I'll
| | 05:56 |
extend this so plays two seconds by
clicking on keyframe 48.
| | 06:03 |
Choosing Insert > Timeline > Keyframe,
moving the playhead to where I want the
| | 06:09 |
action to happen and clicking and
dragging it off stage.
| | 06:15 |
And before I test, it's a good habit to
save.
| | 06:19 |
I will save this as ball_02.
That's why I add the numbering scheme.
| | 06:23 |
This way when you're doing many different
versions, it's good to track your
| | 06:27 |
progress in order through the numbers in
your file name.
| | 06:31 |
I'll hit Save and Cmd+Return on the Mac
or Ctrl+Enter on the PC to test it.
| | 06:38 |
So, let's see if we can get your balls
bouncing with a simple animation, by
| | 06:43 |
practicing this lesson.
Good luck.
| | 06:50 |
| | Collapse this transcript |
| Working with multiple shape tweens| 00:00 |
In this video, we're going to cover shape
tweening.
| | 00:05 |
What that means is that you create a
vector shape.
| | 00:08 |
And remember, vector's are scalable at
one frame in the timeline.
| | 00:12 |
You'll notice that I have a layer in this
03 tween begin named Circle and Square.
| | 00:18 |
The solid bullet indicates that there's
content on keyframe 1.
| | 00:23 |
And I've already drawn a green rectangle
for you to turn into a circle, or tween
| | 00:27 |
into a circle.
And just to explaining the word tweening,
| | 00:31 |
tweening means Flash will calculate the
necessary in-between steps necessary in
| | 00:35 |
order to convert this square to a circle.
Shape tweens use raw vector shapes.
| | 00:42 |
Simpler shapes are much easier to tween.
Complex shapes become much ore difficult
| | 00:48 |
for the calculations necessary.
So, to start, I want to have an animation
| | 00:53 |
that plays for two seconds.
So, what I'm going to do is click on
| | 00:58 |
Keyframe 48, since each second is 24
frames.
| | 01:02 |
Then I'll choose Insert > Timeline >
Blank Keyframe.
| | 01:07 |
And the reason I did that is that you'll
notice at Keyframe 48 a hollow bullet.
| | 01:14 |
Nothing's there.
That's where we'll create our circle.
| | 01:20 |
If I slide the play head over, you'll
notice the square is going to play or
| | 01:25 |
exist on the stage from Keyframe 1 to
Keyframe 47.
| | 01:30 |
Just shy of the two seconds.
I'll slide back over to Keyframe 48, and
| | 01:36 |
I'm going to switch to my Oval tool.
On the Oval tool, I'll tell it to have no
| | 01:42 |
stroke by using the red slash, and
another spot to select colors.
| | 01:47 |
Instead of choosing Fill Color here, I
can go to my Swatches panel and choose a
| | 01:53 |
Fill Color.
I'm going to select the second green at
| | 01:57 |
the top.
And with my Oval tool active, I'll hold
| | 02:01 |
down the Shift key to make a perfect
circle.
| | 02:04 |
Now, if you're retentive like me, you may
want to make sure that they start in the
| | 02:07 |
exact same spot.
And I could use my Selection tool, select
| | 02:11 |
the Circle and type in a value to make
sure they're all the same, but I'm just
| | 02:14 |
going to let it go.
The way I say that it's one word, let it go.
| | 02:19 |
You'll notice I did not have my Favorite
Object Drawing mode on, this is Merge Drawing.
| | 02:24 |
But that's fine.
I'll click anywhere before Keyframe 48,
| | 02:29 |
and now I'm in the Keyframe span for the
square.
| | 02:35 |
This whole span, I'm going to turn into a
shape tween.
| | 02:38 |
And shape tweens are one thing that
doesn't need to be converted into a symbol.
| | 02:42 |
If you forgot to convert something to a
symbol, Flash will do it for you
| | 02:45 |
automatically in CS5.
But here, we actually don't want them.
| | 02:50 |
It's a raw vector or scaleable shape.
So now, I'll choose Insert > Shape Tween.
| | 02:56 |
And you'll notice a light green appears
in the timeline.
| | 03:02 |
This is the keyframe span.
And the light green indicates a shape tween.
| | 03:06 |
Now, let's see what we accomplished.
I'll do that technical thing of scrubbing
| | 03:11 |
the timeline.
And there you could see I'm converting
| | 03:15 |
the square to a circle.
If I want to play this back before I do,
| | 03:19 |
it's a good idea to save your work.
So, let's do a Save As.
| | 03:22 |
And I highly recommend while you're
practicing, just changing the begin
| | 03:26 |
filename to your initials.
That way you know it's one that you've
| | 03:30 |
worked on.
I've got a practice folder already set up
| | 03:33 |
and I'll hit Save.
And let's play the two second movie.
| | 03:37 |
I can go to Control > Test movie > Test,
or I prefer a keyboard shortcut, Cmd+
| | 03:42 |
Return or Ctrl+Enter, which is
something you'll hit a lot while you're animating.
| | 03:49 |
So, there's your real time two-second
movie.
| | 03:52 |
Now we could do other things in shape
tweening outside of converting a one
| | 03:56 |
simple shape to the next, we can change
the color.
| | 04:00 |
I'll select the circle, and I'll go to my
Swatches panel, and I'll choose a yellow.
| | 04:06 |
Now, I'll hit Cmd+Return on the Mac, or
Ctrl+Enter on the PC.
| | 04:11 |
And it only not only changes shape, but
it calculated all the colors necessary
| | 04:15 |
for the in between in order to turn it
into a yellow circle.
| | 04:21 |
So, you might want to watch this video
again and try along with me.
| | 04:24 |
You can start with my begin file or you
can draw your own rectangle and your own
| | 04:28 |
circle with a new document from scratch.
Good luck tweening.
| | 04:36 |
| | Collapse this transcript |
|
|
5. Symbols and the Library PanelCreating and working with symbols| 00:00 |
All right.
Put your thinking caps on to prepare to
| | 00:05 |
absorb what Flash symbols are.
Symbols are created in Flash, because
| | 00:11 |
they're required to do most animations.
They can be vector shapes that you draw
| | 00:15 |
from scratch, such as an oval, a star, a
rectangle.
| | 00:19 |
They can be imported art work, such as an
Illustrator file, or an EPS, or any
| | 00:24 |
vector or scalable shape.
They can also be imported photos, raster
| | 00:29 |
images, which Flash refers to as bit map,
meaning they're made up of pixels and
| | 00:33 |
they're not scalable without losing
quality.
| | 00:39 |
When you create a symbol it automatically
becomes part of the library.
| | 00:43 |
So I'll click over on the library panel.
And you'll notice the library for this
| | 00:47 |
document, my0501 symbols begin is empty.
You already get this cat image into the
| | 00:53 |
flash movie, I went to file import and I
imported the stage that just brings in
| | 00:57 |
vectors, scalable art or a raster a bit
map image in this case this is vector or
| | 01:02 |
scalable art, if I chosen import to
library it would have automatically made
| | 01:07 |
a symbol But I want you to build the
symbol in this movie.
| | 01:15 |
So I'll click away, and I'll click on the
cat with the selection tool.
| | 01:20 |
You'll notice because I imported it, it
changed the layer name to the exact name
| | 01:24 |
of the Illustrator file.
The purpose of a symbol is to
| | 01:28 |
dramatically reduce the file size.
If I had a ball that was 5K, and I wanted
| | 01:35 |
a total of five balls bouncing around on
the stage, that could be 25K in file size
| | 01:40 |
if I made five copies of the ball.
However, if I take my first ball and I
| | 01:47 |
convert it to a symbol, I can then drag
instances of that ball onto the stage.
| | 01:54 |
I refer to instances like small aliases.
They refer to the original, but they
| | 01:59 |
don't occupy the same file size.
So instead a 25K file, I might end up
| | 02:04 |
with a 6K file.
Just a little bit bigger to create those
| | 02:08 |
extra copies of the ball, or those extra
aliases, that I need.
| | 02:13 |
So let's convert this cat to a symbol, so
that we can animate it in the future.
| | 02:17 |
Or, change its shape, its size, its
style, its color.
| | 02:21 |
In order to create a symbol out of
something that you've drawn, or something
| | 02:24 |
that you've imported, go to your Modify
menu and convert to symbol.
| | 02:28 |
Or if you're like me, and you love
keyboard shortcuts, simply hit the F8 key.
| | 02:34 |
Your function keys across the top, F1
through 12, or F1 through 15.
| | 02:39 |
Now, when naming symbols, it's very
important that you stick to web compliant names.
| | 02:45 |
Whenever I name a file, I only use
letters, numbers, underscore.
| | 02:51 |
And I write it that way for illustration
purposes, or hyphen.
| | 02:59 |
Upper and lowercase characters are
acceptable, but action script, Flash's
| | 03:03 |
implementation of java script, it case
sensitive.
| | 03:07 |
So you need to know whether you used
upper or lowercase characters.
| | 03:10 |
Otherwise if you call to the symbol later
you may not find it if you've typed it
| | 03:14 |
with a capital letter and in the action
script you refer to it with a lower case character.
| | 03:21 |
I'm simply going to name this cat.
So I just did a select all and typed cat.
| | 03:26 |
The first time you create a symbol your
registration point will be the upper left corner.
| | 03:31 |
You can think of the registration point
as a handle where flash and grab the
| | 03:36 |
object animate.
However for animation, center
| | 03:40 |
registration point are more common.
For example if you want to make something
| | 03:45 |
look like its growing you would have it
grow from the center out.
| | 03:50 |
If it grew from upper left it would
really stretch down to the right.
| | 03:54 |
So in most cases I'll use the center
registration point.
| | 03:59 |
Now when you're creating a symbol, there
are three categories, or three types that
| | 04:03 |
you can build, graphic is the simplest.
Graphic is typically a static image, or
| | 04:09 |
an animation, and graphics are tied to
the main timeline.
| | 04:13 |
buttons you've probably used everyday, a
button is something that has states.
| | 04:19 |
So it may have an on roll over and on
roll off state, a click state, so
| | 04:23 |
something flashes when you click on it.
There are four states automatically built
| | 04:29 |
into a button.
The third type is the most complex, it is
| | 04:33 |
a movie clip.
And movie clips are reusable animations.
| | 04:38 |
They're kind of like mini movies inside a
longer movie.
| | 04:42 |
They can have their own timelines and
these timelines can run independently of
| | 04:46 |
the main timeline.
They can also be made interactive through
| | 04:50 |
action script.
We'll stick with graphic for now.
| | 04:54 |
So I've named it Cat, I've clicked the
center registration point, and the type
| | 04:58 |
I'm leaving it on is graphic.
When I click Okay you'll notice the cat
| | 05:03 |
appears in the Library panel.
So once the cat is in the Library panel,
| | 05:08 |
now I can create instances of it on the
stage.
| | 05:12 |
There's my second instance.
The first one is the one that I used to
| | 05:16 |
make the symbol.
There's my third.
| | 05:19 |
There's my fourth.
And I'm just going to scale a few of these.
| | 05:23 |
I'll use modify, transform, scale and
rotate.
| | 05:27 |
So we'll put one at 40%.
I could also click on it and use the free
| | 05:32 |
transform tool.
If I don't hold down Shift, I get
| | 05:36 |
disproportional scaling, which may be a
design effect, but it's a good habit to
| | 05:40 |
use the Shift key when scaling up or
down.
| | 05:43 |
I'm going to actually distort this one.
And then I'll click on the next one, and
| | 05:49 |
this one I'll do by the numbers, so
Modify > Transform > Scale and rotate,
| | 05:53 |
and in this case we'll do 80%.
Now you can alter the instances of the
| | 05:59 |
symbol, and when you alter the instances
of the symbol, you can change its tint,
| | 06:04 |
its transparency, which Flash calls alpha
Its brightness and a fourth option which
| | 06:09 |
is advance.
Advance will allow you to do the red,
| | 06:14 |
green and blue, the colors and the alpha
or transparency at the same time.
| | 06:19 |
You can also change the skew rotation and
scale of instances of a symbol.
| | 06:26 |
So let's take a quick look at how we
modify an instance.
| | 06:29 |
I'll go to Properties, and in Color
Effect, that may not be expanded.
| | 06:34 |
You may have to roll it down.
I'll choose brightness.
| | 06:38 |
A brightness at minus a hundred percent
is solid black.
| | 06:42 |
A brightness at positive a hundred
percent looks clear or white on white.
| | 06:47 |
And if I double-click brightness and set
it back to zero.
| | 06:50 |
I'm back to my original value.
Let's do minus 50, and I'm just pressing
| | 06:55 |
return or enter to see the change.
I'll select the next cat, I'll go to
| | 07:01 |
style in the properties panel and I'll
change tint.
| | 07:05 |
And I can eyeball this by changing the
red, the green and the blue.
| | 07:11 |
Let me zoom in so you can see this a bit
better.
| | 07:14 |
You'll notice as I'm doing that, even the
cat's eyes are changing, or I could
| | 07:19 |
simply pick a color, let's go with green.
I'll go back to View > Magnification >
| | 07:25 |
Fit in Window, I assigned a shortcut,
Cmd+0 or Ctrl+0 for that.
| | 07:32 |
I'll use my selection tool, and on the
third one, I'll go to style, alpha.
| | 07:36 |
I'm not going to play with advanced at the
moment, but alpha 0% would be clear or
| | 07:41 |
see-through, completely transparent, 100%
is the original color or solid.
| | 07:48 |
Let's go to 20%, a very light ghosted
tint.
| | 07:53 |
We'll use alpha to make slide shows, for
example, or photos fade in or fade out,
| | 07:57 |
or make something look like it's
appearing on the stage.
| | 08:01 |
So take a little while and let symbols
settle.
| | 08:05 |
They are the heart of Flash and in order
to animate almost anything, you will
| | 08:09 |
create a symbol.
Good luck.
| | 08:16 |
| | Collapse this transcript |
| Editing symbols| 00:00 |
In this movie, we're going to explore
editing symbols, and we'll start from scratch.
| | 00:07 |
So, let's go to our File menu and choose
New, click OK on action script three.
| | 00:13 |
And we'll import an Illustrator file that
I drew.
| | 00:17 |
So, we're going to choose from the File
menu, Import.
| | 00:20 |
Now, Import to Stage will not create a
symbol out of the artwork that I'm
| | 00:24 |
pulling in, but Import to Library creates
a symbol automatically.
| | 00:29 |
Once I've chosen Import to Library, I'll
double-click to bring in my blue cat.
| | 00:34 |
You'll notice that it shows all
Illustrator layers and sublayers.
| | 00:40 |
This is just a cat with two eyes, so all
I need is a single Flash layer.
| | 00:44 |
However, a lot of artists will create the
steps in an animation, for example, the
| | 00:48 |
movement of maybe legs walking, as
separate Illustrator layers.
| | 00:53 |
Bring them all into Flash, and that way
they can accomplish the movement by using
| | 00:57 |
the different layers that originated in
Illustrator.
| | 01:00 |
We're not doing that yet.
So, I'm going to click OK.
| | 01:04 |
And you may say, well, where did it go?
(LAUGH) Well, our stage is still empty
| | 01:08 |
and it went to the Library panel.
That's where all of our symbols are stored.
| | 01:12 |
Before I move on too far, it's a good
habit to save.
| | 01:16 |
So, let me go ahead and Save this to my
hard drive, to my Practice folder, and
| | 01:22 |
I'll call this Symbol Edit.
And I always add my initials so I know
| | 01:28 |
that I created it, it wasn't one of the
class files.
| | 01:33 |
Once my file is saved, now I want to put
an instance of the symbol on the stage.
| | 01:40 |
I'll drag my blue cat over from the
Library.
| | 01:43 |
You'll notice that it chose,
automatically, the simplest type of
| | 01:47 |
symbol, which is Graphic.
We would need to create a button using
| | 01:52 |
Modify > Convert to Symbol, or Movie Clip
if we want something more complex.
| | 01:58 |
Now, editing symbols.
You can change the symbol type to a
| | 02:01 |
button or a movie clip, for example.
However, graphic is all we need for what
| | 02:05 |
we're going to accomplish in this
exercise.
| | 02:08 |
I'm going to drag a few more instances of
the cat onto the stage.
| | 02:13 |
That way you can see when I edit one
symbol.
| | 02:17 |
These are just aliases, or references to
the original, so all three of them will
| | 02:22 |
be modified.
There are several different ways to edit
| | 02:26 |
a symbol.
I could select the symbol, right-click or
| | 02:30 |
Ctrl click and choose Edit.
I could double-click, which is my
| | 02:34 |
favorite way, on the symbol on the stage,
or I can double-click on the symbol icon
| | 02:39 |
in the Library panel.
There's even another one, but we'll just
| | 02:43 |
stick with that for now.
So, what I did was double-clicked on any
| | 02:47 |
one of the instances of the symbol on the
stage.
| | 02:51 |
And we are now in Symbol Editing mode.
You'll notice there's scene one and we're
| | 02:57 |
working on the placed bluecat.ai which is
technically part of this document now.
| | 03:03 |
It is embedded.
You don't need that original Illustrator
| | 03:06 |
file any longer.
It doesn't reference the Illustrator file
| | 03:08 |
any longer.
It's as if you drew it in Flash.
| | 03:11 |
Something I want to illustrate is this
cat has several pieces.
| | 03:18 |
I'm going to use a power user shortcut,
Cmd+Space Bar on the Mac, or Ctrl+
| | 03:22 |
Space Bar on the PC.
Temporarily, changes me to the Magnifying
| | 03:27 |
Glass tool so I don't have to click the
Zoom tool, click and drag to zoom in, and
| | 03:30 |
then go back to my Selection tool.
A single click just goes to a default
| | 03:36 |
zoom level.
And if I want to zoom out, I could use
| | 03:39 |
all three in a row, on the Mac, Cmd+
Options+Space Bar, or on the PC, Ctrl+
| | 03:43 |
Alt+Space Bar.
The reason this is such a beautiful
| | 03:47 |
shortcut is because it works in most
Adobe programs, Acrobat, Illustrator,
| | 03:51 |
Photoshop, Flash.
It's just an excellent one to know.
| | 03:54 |
I'm looking at the symbol of the cat.
And if I double-click again, I've
| | 04:00 |
actually got the cat shape itself.
You may not have noticed this because it
| | 04:05 |
happened quickly, but the eyes vanished.
They're still there, it just brought the
| | 04:10 |
background blue color of the cat forward.
So, you'll notice we have kind of bread
| | 04:14 |
crumbs for where we've traveled in our
symbol editing.
| | 04:18 |
I'm on this drawing object, which is the
shape that I drew in Illustrator.
| | 04:23 |
If I want to go back and see the whole
symbol, I can click on bluecat .ai, but
| | 04:27 |
I'll double-click because I want to
change the cat's background color.
| | 04:32 |
Now, I'm on the shape of the cat.
And then, a single click selects the object.
| | 04:37 |
I'll travel over to my Swatches panel and
I'll make the cat red.
| | 04:40 |
And as soon as I do that, you'll notice
all three instances of the symbol turned red.
| | 04:47 |
In the other two, I can still see the
eyes.
| | 04:49 |
But you'll notice we're not actually
editing those.
| | 04:51 |
However, they stay there nicely, ghosted
back a little bit, so you can see how
| | 04:55 |
your overall stage looks.
To go back and make an edit to the eyes,
| | 05:00 |
I'll travel back to the main symbol.
And I'll zoom in a little more with Cmd+
| | 05:06 |
Space Bar or Ctrl+Space Bar on the PC.
And I'll select the eye and you'll notice
| | 05:11 |
this bound in box.
The eye was actually two pieces grouped
| | 05:15 |
in Illustrator.
So, I'll double-click to get inside and
| | 05:18 |
you'll see I'm on a group.
Double-click again, and now I've got to
| | 05:22 |
that background black color.
Click, and now I'll change it to a yellow.
| | 05:28 |
Now, that only changed it for one eye.
But let's go all the way back out to the
| | 05:33 |
blue cat, select the other eye.
Double-click, there's the group,
| | 05:37 |
double-click again, there's the
background black color.
| | 05:41 |
And I'll choose the same yellow.
I could hit the Back button to go back
| | 05:46 |
one step at a time, or I can just hit
Scene One to go all the way back to my
| | 05:50 |
main movie.
So, I'm going to use Cmd+0 or Ctrl+0,
| | 05:56 |
a shortcut I assigned to fit in window,
to see all the edits of my symbols.
| | 06:02 |
So that is a brief tour of how you get in
and out of the Symbol Editing mode, and
| | 06:07 |
how you might alter the color, or the
position, or a shape of a symbol object.
| | 06:14 |
Once you double-click, you're in Symbol
Editing mode, and you can keep
| | 06:17 |
double-clicking to get to the pieces.
You can move the pieces, and it affects everything.
| | 06:22 |
I'm going to Undo that.
To exit all the way back out, I'll just
| | 06:26 |
click back on Scene One.
So, give this a try with our exercise
| | 06:31 |
files, or even with shapes that you've
drawn yourself that you've turned into symbols.
| | 06:38 |
| | Collapse this transcript |
| The anatomy of a button| 00:00 |
In this movie, we're going to take a look
at the anatomy of a button.
| | 00:05 |
buttons are essential on the web, and
necessary in Flash movies.
| | 00:10 |
It'll be a common task for you.
buttons have you do things like jump to a
| | 00:14 |
website, start a movie, stop a movie or
pause a movie just to give a few examples.
| | 00:20 |
In this document that we've created, I
actually used one of the free or built-in
| | 00:25 |
buttons in the Flash common library.
You could see a collection of buttons
| | 00:31 |
that you can use in your own designs by
looking under the Window menu, Common
| | 00:35 |
Libraries > buttons.
And I'll pull this up a bit, and we'll
| | 00:41 |
take a tour of just some of the built-in
buttons.
| | 00:45 |
When I expand one of these folders, I can
click once and see a preview.
| | 00:50 |
If I go to buttons bar, that's where
you'll see the bar blue that I've placed
| | 00:54 |
on the stage.
And I can surf through some others just
| | 00:57 |
by clicking on them.
But we've already got one on the stage
| | 01:01 |
that we're going to dissect.
So, let me close that.
| | 01:05 |
And I'll take a look at the Documents
Library.
| | 01:08 |
In the Documents Library, when I dragged
out the bar of blue, it automatically
| | 01:12 |
made a nice little folder for my buttons
bar.
| | 01:15 |
In order to edit a symbol, I'm going to
select it and then double-click.
| | 01:20 |
I could also double-click in the library.
All buttons have four default states.
| | 01:27 |
The up state is what the movie looks like
when it loads.
| | 01:30 |
Or if you're got a flash website, what
the static state, or what the initial
| | 01:34 |
view of all the buttons are when that
website loads.
| | 01:39 |
The over state, when I click the play
head in a timeline, the over is what
| | 01:43 |
happens when the user's mouse moves over
that button.
| | 01:49 |
And you can see that little over change
by scrubbing the timeline.
| | 01:53 |
The down state is what happens when the
user clicks their mouse.
| | 01:58 |
So, I can flip between up and down to see
that click.
| | 02:02 |
So when they're holding down, they'll see
that change.
| | 02:05 |
And finally, the fourth state is the Hit
state.
| | 02:08 |
Hit means that the click was accepted.
That happens very quickly in a Flash no
| | 02:14 |
pun intended.
So, I'm going to click back on the over state.
| | 02:19 |
And I want to pick a change that's more
obvious so that we can test our button.
| | 02:23 |
I'll select this blue gradient
background.
| | 02:26 |
And I am on the Box Layer.
These layers were automatically built-in
| | 02:32 |
to that common Library button.
So, if I go to my Swatches, I can choose
| | 02:37 |
a yellow color for the over state.
And let's test it.
| | 02:42 |
To exit my symbol editing mode, I'll go
back to scene one, and I'll hit Cmd+
| | 02:46 |
Return or Ctrl+Enter.
Now, before I go too far, I want to
| | 02:50 |
remind you, it's important to save early.
That way, you don't overwrite any of the
| | 02:55 |
lesson files if you've copied them to
your hard drive.
| | 02:58 |
So, I'm going to do a save as and change
begin to my initials.
| | 03:02 |
That way, I don't harm the original.
Now, it's safe to hit that Cmd+Enter on
| | 03:07 |
the Mac or Ctrl+Return on the PC.
So here is my up state, the default state.
| | 03:14 |
When I mouse over, there's my over state
so my mouse entered that area.
| | 03:18 |
And you'll notice that little pointing
finger, meaning usually if the button is
| | 03:22 |
programmed to do so when you click,
something will happen.
| | 03:26 |
I haven't programmed anything, but I can
still see the down state, or what happens
| | 03:30 |
when I click.
I'm clicking my mouse and holding down
| | 03:33 |
right now.
And then, there's a very fast change to
| | 03:37 |
that hit state of black.
Since the button isn't programmed to do
| | 03:42 |
anything, I'm not really going to see
that hit state happen.
| | 03:45 |
I'll close that up, and that is your
orientation to the different states of a
| | 03:50 |
button symbol.
Take a tour of our exercise file on your own.
| | 03:59 |
| | Collapse this transcript |
| Building a button from scratch| 00:02 |
In this movie you'll build your own
button from scratch, a button that looks
| | 00:06 |
like a stop sign and will actually have
that button go out to Adobe's website.
| | 00:11 |
From your File menu choose New.
Click Okay on actions group three, and in
| | 00:16 |
order to have this be a different color
than the white border that a stop sign
| | 00:20 |
has, we're going to change the stage color.
So I'll chose modify document, and I'll
| | 00:28 |
make the background color for the stage a
light blue.
| | 00:33 |
I'll click okay.
Now were ready to draw our polygon.
| | 00:37 |
So I'm going to switch from the rectangle
tool by clicking holding, to the poly
| | 00:41 |
star tool.
Once your on the poly star tool In the
| | 00:45 |
properties panel, you'll see options.
When I hit options, the default is five.
| | 00:52 |
You can see I've practiced thisLAUGH
I've already set it to eight.
| | 00:56 |
But type in eight, if you don't have that
on your screen.
| | 00:59 |
I'll click okay, and before I draw the
shape, I'll confirm that object drawing
| | 01:03 |
is on.
That way, my stroke, the white border of
| | 01:06 |
the stop sign will not separate from the
red fill.
| | 01:11 |
So, let's set up the colors.
I'll choose the stroke color of white and
| | 01:16 |
a fill color of red.
And for my stroke weight, I think I'll do
| | 01:21 |
six points.
So now, I'll just guesstimate where to
| | 01:25 |
start by clicking and dragging on the
stage.
| | 01:29 |
You could draw rulers to get this to be
precise.
| | 01:32 |
What I'm going to do is eyeball it, just
trying to get that bottom line straight.
| | 01:37 |
When I see it straight, I'll let go and
there's the beginning of my stop sign.
| | 01:41 |
I'll go back to my selection tool, and so
that I'll sleep good tonight, I'm going to
| | 01:46 |
leave a line of stage on and in my line
panel, center horizontally and
| | 01:49 |
vertically, the perfectly centered on my
stage.
| | 01:55 |
And let's save.
I'll collapse a line and choose file,
| | 01:59 |
save as And I'll name this stop sign, and
save.
| | 02:05 |
Now, I 'm ready to turn this into a
button.
| | 02:08 |
And to practice good habits, I'm going to
name my layer before I do that.
| | 02:14 |
So I'll name my layer, stop button.
Once you get any content, it's a good
| | 02:19 |
idea to check out your layers.
And make sure you're naming each one appropriately.
| | 02:23 |
Again I'll click on my stop sign.
And now I'll either hit F8 or choose
| | 02:28 |
Modify > Convert to Symbol.
When naming buttons, there's a naming
| | 02:33 |
convention that is common that makes it
easier once you become a more
| | 02:36 |
intermediate or advanced user and start
action scripting.
| | 02:42 |
This button is called Stop, but in order
for ActionScript to call to it easily,
| | 02:47 |
it's a good habit for anything that you
make as a button, to add _btn as button.
| | 02:54 |
It helps the scripting language see that
automatically.
| | 02:58 |
You'll see my type is "button," and I'll
click OK.
| | 03:02 |
I'm actually not putting the text in the
button itself because I want you to have
| | 03:05 |
the button do something in the end.
And it's very easy without knowing action
| | 03:10 |
script to turn classic text into a
clickable link so we can visit a website.
| | 03:15 |
So now, I will double-click to edit the
symbol.
| | 03:19 |
And in this button's symbol, we have an
up state, an over state, a down state and
| | 03:24 |
a hit state.
And you'll notice that there's only
| | 03:28 |
content on the up state.
If I don't have text or multiple borders
| | 03:32 |
or other objects, I don't have to create
extra layers and I can leave layer one
| | 03:37 |
for now.
But whenever there's more than one layer,
| | 03:41 |
I might name this, stop sign background
for example.
| | 03:44 |
I'm going to click on the over state and
choose Insert > Timeline > Keyframe.
| | 03:50 |
That way I can have it change on the
over.
| | 03:53 |
Once that's there, I'll select my red
fill and I'm going to change the over to
| | 03:58 |
a yellow.
So I can test that by hitting up.
| | 04:04 |
You'll see it's red, over when the mouse
enters into it will be yellow, and let's
| | 04:07 |
have it do something on the down as well.
It's rare that I do something on the hit
| | 04:12 |
state because it flashes so quickly, so
again insert timeline, keyframe, on the
| | 04:17 |
downstate I'll click on the yellow...
There, I see the fill color, and I'll
| | 04:23 |
make it black.
So we've got three state changes.
| | 04:28 |
I'll follow my breadcrumb out of symbol
editing out, back to scene one, and we'll
| | 04:32 |
test it.
Command return on the Mac, or control
| | 04:36 |
enter on the PC.
There's my overstate.
| | 04:39 |
When I click my mouse and hold, there's
my down state.
| | 04:43 |
Perfect, I've crested a button from
scratch.
| | 04:47 |
Now let's make it do something.
So now I'll grab my type tool, the text
| | 04:51 |
tool, and I'll click anywhere on the
stage.
| | 04:55 |
It's a good idea to build a layer for
anything that you might be working with
| | 04:59 |
or just get into that work habit.
Practice doesn't make perfect, practice
| | 05:04 |
can build permanent bad habits.
So practice good things, so that you have
| | 05:08 |
good habits.
So I'll name this type.
| | 05:13 |
Then I'll click on the stage, you'll
notice my filling store colors does set
| | 05:16 |
up from before.
I'm going to choose stroke color of none and
| | 05:20 |
fill color of white.
And I'll type in all caps the word stop.
| | 05:27 |
I can double-click to set up the font and
size.
| | 05:30 |
Think I'll size this down to maybe 110.
This will vary depending upon what type
| | 05:35 |
face you use.
Now in order to make it a link, the
| | 05:38 |
default for Flash is tlf text the, Text
Layout Framework which is fairly new to flash.
| | 05:46 |
Classic text allows the option for a
link.
| | 05:50 |
If I go to tlf text you will not see that
as an option.
| | 05:54 |
So I am going to go back to classic text.
There I see link and I'll use my
| | 05:59 |
selection tool to just eye ball this in
the center.
| | 06:03 |
If I want it perfect I can use my align
and center it to the stage but I wouldn't
| | 06:07 |
do that vertically because the optical
center is usually lower that the absolute center.
| | 06:14 |
So I'll undo that last step.
But let's make it go somewhere.
| | 06:19 |
So I'll type in my http://, hypertext
transfer protocol to Adobe.com.
| | 06:29 |
When I press return or enter target
lights up.
| | 06:32 |
Target means do you want them to stay in
the same window or go somewhere else.
| | 06:36 |
If I'm going to somebody else's website I
always do blank, which triggers the
| | 06:40 |
opening of a browser window.
So now let's test again.
| | 06:45 |
Command return or control enter.
Now, in order to see this happen, my
| | 06:49 |
button's being covered up by my link
text, but I'm going to go ahead and just
| | 06:52 |
click on it to have it test and go to
Adobe's website.
| | 06:57 |
And it did work.
It traveled all the way there.
| | 07:00 |
In the future, you'll be doing links on
buttons via action script in the button itself.
| | 07:07 |
But I just wanted to have the button do
something.
| | 07:09 |
So your homework is to try this again
from the beginning along with me.
| | 07:14 |
Good luck.
| | 07:17 |
| | Collapse this transcript |
| The Library panel| 00:00 |
In this video, we're going to explore the
Flash library panel.
| | 00:05 |
The library panel contains assets and
symbols that you may use in your animations.
| | 00:13 |
Libraries can also contain raster or
bitmap images, sounds, movies, vector art
| | 00:19 |
that you've drawn from scratch, imported
illustrations and components.
| | 00:26 |
Before we start, I'm in my favorite
classic workspace and I'm going to bring the
| | 00:30 |
library panel over, so it's one of my
main group in the second column.
| | 00:36 |
These double arrows that I'm seeing will
expand at the panels.
| | 00:40 |
So now, I can click on Library and make
it nice and large.
| | 00:43 |
And any other panels that are in my way,
I can double-click to Collapse.
| | 00:48 |
And I can stretch the library panel
looking for my contact sensitive icon.
| | 00:53 |
So this way when I click on My Library
items I get a preview of what they are,
| | 00:58 |
and how I might use them on the stage.
And then a fit in window and I've
| | 01:04 |
assigned the shortcut Cmd 0, Ctrl 0 to
that.
| | 01:07 |
And what we're going to do is build an
advertisement.
| | 01:11 |
So, I'm going to start by dragging out this
coffee image.
| | 01:14 |
I'll drag and drop it over and I'll
double-click my Align panel and make sure
| | 01:19 |
align to stage is on.
I'll center horizontally and center vertically.
| | 01:25 |
And you'll notice in this document, the
0505librarybegin, I've already created a
| | 01:30 |
background layer and that's where this
coffee image will reside.
| | 01:36 |
There's even a little actions layer that
we won't be using in this exercise, but
| | 01:40 |
it's helpful because this library
contains a button.
| | 01:44 |
And in order to make buttons go anywhere,
they need actions tied to them.
| | 01:49 |
So, let me start early by saving with my
initials, into my Practice Folder, and
| | 01:55 |
now I'm ready to continue assembling.
So, I'm going to drag over, and I'll
| | 02:01 |
collapse the Align panel since I'm
finished, I'll drag over this white rectangle.
| | 02:06 |
You can't really see what's going on
because it's white on white, but I can
| | 02:10 |
drag and drop over and pop that down at
the bottom.
| | 02:15 |
So I'm just visually placing the
elements.
| | 02:17 |
If you have a massive library, you can
search your library items, or if the list
| | 02:22 |
is very long.
I'm sorting by name alphabetically from a
| | 02:26 |
to z, I can click this arrow and go from
z to a, so I can switch the sort order.
| | 02:33 |
And if I feel like my library is taking
up too much room you can collapse panels
| | 02:37 |
a little bit more by dragging them over.
The next thing I'm going to drag out is the
| | 02:42 |
caption, (LAUGH) one of the, what I call,
Kelly quotes.
| | 02:47 |
And I love to use my arrow keys just to
nudge items left or right or up or down.
| | 02:52 |
In fact, sometimes it can be difficult to
position looking at your stage and your
| | 02:56 |
gray area, the paste board that's when I
use Cmd Return or Ctrl Enter.
| | 03:02 |
Now, I wanted to do that early to warn
you that the actions layer we have is
| | 03:05 |
going to give us an error.
So I'm going to go ahead and delete that
| | 03:09 |
layer, because we aren't going to be
animating in this exercise, were just
| | 03:13 |
covering assembling with elements that
are in our library.
| | 03:18 |
So, now once I delete it, and hit Cmd
Return on the Mac or Ctrl Enter on the PC
| | 03:21 |
no errors were produced.
I'll close that up, now I am going to drag
| | 03:27 |
out a background for the logo and the
logo itself, which is a placed
| | 03:31 |
Illustrator file, so when I imported that
into the library it picked up that name.
| | 03:38 |
I'll collapse the timeline, so I get a
little bit more territory and I will zoom
| | 03:42 |
out by hitting Cmd Minus or Ctrl Minus
I'll use my Free-transform tool, and my
| | 03:47 |
Shift key to scale this proportionally.
Now, this is where positioning can get a
| | 03:54 |
little bit tricky, because I'm seeing
this larger white rectangle on the stage.
| | 03:59 |
So this is when Cmd Return, or Ctrl Enter
is kind of like a print preview, although
| | 04:02 |
you're not printing stuff.
We aren't killing trees in the making of
| | 04:08 |
these videos.
(LAUGH) We're doing everything for online
| | 04:11 |
distribution, so there we have it.
Looking good, so far and that's the
| | 04:15 |
assembly of elements that were already
added to the library.
| | 04:19 |
Now let's dissect these elements.
We have a graphic symbol, this icon
| | 04:24 |
indicates graphics.
I have a button that's waiting in the
| | 04:29 |
library that we're not going to use in this
exercise, but it came from the shared
| | 04:34 |
library components.
Window > Common Libraries > buttons.
| | 04:41 |
In the buttons panel, if I expand these
or scoot it over, I can see it came from
| | 04:45 |
the button's tube group and this was the
tube gray which I elongated and edited to
| | 04:50 |
add my own text and made a real workable
web link.
| | 04:57 |
So, there are built in items that flash
has in Common Libraries, like Sounds and
| | 05:01 |
buttons and Classes.
I'll close this library, and we have a
| | 05:07 |
captain which is also a graphic symbol
that's been added, and simply a placed
| | 05:11 |
image, this coffee background started out
as a JPEG.
| | 05:17 |
The third type of symbol we don't have
here, which is a movie clip, but let me
| | 05:20 |
show you a quick example of how something
will need to be converted to a movie clip.
| | 05:26 |
If I wanted to animate this and this
coming down.
| | 05:30 |
I select them both my using my Shift key
and clicking on each one or I could mark select.
| | 05:38 |
But the danger of mark selecting is, I
got my background in with it.
| | 05:42 |
So I'll click Away, click the White
Rectangle, hold down shift and click the Logo.
| | 05:47 |
I can group them, but what I'm going to
do is simply right-click and choose
| | 05:52 |
Create Motion Tween.
And when I create a Motion Tween, meaning
| | 05:57 |
I want to move it from one spot to another,
it has to be turned into a movie clip
| | 06:01 |
symbol, or a symbol in general.
It defaults to movie clip because they
| | 06:06 |
are the most complex and most open ended
type of symbol that you might store in
| | 06:09 |
your library.
So I'll hit Don't Show Again, and hit Okay.
| | 06:14 |
There's a symbol, and I'll go ahead and
double-click to name it, and I'll name it
| | 06:19 |
logo and BG for background.
There are other options, I can make a New Document.
| | 06:26 |
And in a New Document, if I want all of
these assets to build another ad, maybe
| | 06:30 |
with a different layout.
I can click Back on my original file
| | 06:34 |
where I've assembled all the pieces.
And where all of my library items where I
| | 06:39 |
can click the first item in the library,
hold down Shift, click the last item.
| | 06:45 |
Right-click and choose Copy.
You can also get to Edit and Copy, but
| | 06:50 |
sometimes Copy won't show up if my panels
are collapsed and I select all of my
| | 06:56 |
items in the library.
When I go to Edit, since they collapse,
| | 07:02 |
copy vanishes.
So I do need to have my panels fully
| | 07:05 |
expanded for that to show up if you're
not used to using the right-click.
| | 07:09 |
I've already copied, but I'll do it again
to be safe.
| | 07:12 |
I'll click on my New Blank Document, I'll
right-click anywhere in the library panel
| | 07:17 |
and choose Paste and now I've got all the
shared assets.
| | 07:21 |
And the last two things you may want to do
is, if I go to the panel Maenu.
| | 07:27 |
The panel menu is four little lines with
the down arrow and every panel has one,
| | 07:31 |
when I click it I can check for updates
if any of the placed images that were in
| | 07:35 |
the library when I started have been
modified, I see that my coffee image has
| | 07:39 |
been modified.
So when I hit update I see a change in
| | 07:45 |
the contrast and color on the image and I
will hit close, and just to take a last
| | 07:49 |
look at the library panel, I can build
new symbols directly from here, I can
| | 07:53 |
organize them into folders.
And one thing I often use when I'm
| | 07:59 |
finished with a project is I'll select
all Unused items and then I'll hit the
| | 08:03 |
little trashcan at the bottom to Delete.
So now, I only have the assets that I need.
| | 08:11 |
The folder still remained even though the
items in it are gone, so I'll click on
| | 08:14 |
the Folder, hit Delete again.
And that is your tour of the Library
| | 08:19 |
panel, so practice along with this video
and just eyeball it and see if you can
| | 08:22 |
create this simple add.
We haven't finished the animation, so
| | 08:27 |
don't worry if it doesn't animate
perfectly.
| | 08:30 |
All I want you to be able to do is pull
things out of the library and arrange them.
| | 08:38 |
| | Collapse this transcript |
|
|
6. The Flash TimelineThe Timeline: Part one| 00:00 |
Now, lets take a look at the timeline.
You cannot be a successful Flash animator
| | 00:06 |
without fully understanding what the
timeline is, and how to manipulate it.
| | 00:13 |
In this document, 0601 Timeline Begin,
I've already created a background layer
| | 00:18 |
and an Actions layer.
And it may look like both layers are blank.
| | 00:24 |
This keyframe has a hollow bullet
indicating that there is no content.
| | 00:30 |
The Actions layer looks like it has a
blank keyframe, but there's a tiny
| | 00:34 |
little a in there that indicates there's
an action tied to the keyframe.
| | 00:39 |
Actions are completely necessary in order
to do more complex stuff in Flash and
| | 00:44 |
it's not for the faint of heart.
Action script is based on JavaScript, and
| | 00:50 |
while it's not full programming language,
it does involve fundamentals of programming.
| | 00:56 |
But the good news is, for this course,
you don't really need to know any of it.
| | 01:00 |
And the other good news is there are very
simple scripts that you can get to have
| | 01:03 |
things happen.
The reason is I have an action here, is
| | 01:06 |
in order to make a button go to a
website.
| | 01:09 |
For that now that's already written, and
you'll only have to do one simple thing
| | 01:13 |
in order to have that happen, but we're
not going to use it yet in this exercise.
| | 01:18 |
I'm going to go over to my Library panel,
and we've got all the assets that I'll
| | 01:21 |
need for this stored in our library.
Here's the button I'm referring to, but
| | 01:26 |
we won't be using it yet.
I'm going to start by dragging this coffee
| | 01:31 |
image out on to my stage, and I'll use my
Align panel.
| | 01:36 |
I'm in my classic work space and I have
aligned the stage on and I hit Align
| | 01:41 |
Horizontal Center and Align Vertical
Center.
| | 01:46 |
When I put that on the stage, you may or
may not have noticed that the background
| | 01:50 |
layer became a solid bullet.
Meaning that keyframe has content.
| | 01:56 |
And that's a term you'll need to know.
A keyframe is where a new symbol or
| | 01:59 |
object appears in the timeline.
And the keyframe above, called Actions,
| | 02:04 |
which is a common practice to make the
top layer where your action script goes.
| | 02:10 |
The keyframe above contains an action.
So keyframes contain symbols or objects
| | 02:15 |
or possibly actions.
Blank keyframes have hollow bullets and
| | 02:19 |
we saw that when we started.
The third type of keyframe you'll see is
| | 02:24 |
a Property keyframe.
You'll see that when we change or animate something.
| | 02:29 |
For now, on the background, I don't want
to move that, so I'm going to lock the layer
| | 02:34 |
and this way it's fixed in position.
I can't select it inadvertently and it's
| | 02:40 |
not going to change throughout the movie.
Now, I want my movie to play for seven seconds.
| | 02:45 |
So I did the math for you.
I'm going to slide out to keyframe 168.
| | 02:50 |
You'll see each movie, like a movie at a
theater, divides length of time into frames.
| | 02:57 |
Specifically, 24 fps or frames per
second.
| | 03:02 |
Once I've selected keyframe 168, I'll
choose Insert > Timeline > Key frame.
| | 03:10 |
Now, there's a difference between
inserting a keyframe and inserting
| | 03:14 |
simply a frame.
When I chose Insert Key Frame, the object
| | 03:18 |
stops playing here and is referenced
again with a solid bullet on frame 168,
| | 03:24 |
which I can see is seven seconds into the
movie.
| | 03:30 |
It's there again, in case I want to make
another change on it.
| | 03:34 |
I know that I don't, so I'll undo that.
I'll scroll back over in the timeline.
| | 03:40 |
168 is still selected.
I'll go to Insert > Timeline > Frame.
| | 03:47 |
Now, I simply get a white rectangle
indicating the background image will play
| | 03:51 |
for the entire seven seconds of the movie
and then nothing else is going to happen to it.
| | 03:57 |
I'll scoot back to the beginning and I'm
going to make a new layer to put a logo in
| | 04:02 |
to animate.
I'll double-click on that layer and name
| | 04:07 |
it Logo.
This is essential as well, you have to be
| | 04:10 |
organized and good with layers.
Because as your movies get more complex,
| | 04:15 |
it can be harder and harder to hunt for
specific things that you're animating, if
| | 04:19 |
they aren't divided into layers.
And where that logo comes in, I want to
| | 04:25 |
happen at one second, so I'll slide that
to keyframe 24.
| | 04:30 |
And it's going to go on the logo layer,
so I've targeted keyframe 24, I'm on the
| | 04:36 |
logo layer.
In my library, I'll drag out the white square.
| | 04:42 |
And drop to put it into position.
Then I'll drag out the belly logo.
| | 04:48 |
And drop to put in position.
I'm already on my Free Transform tool,
| | 04:53 |
and I hold down Shift to keep it
proportional.
| | 04:56 |
And this is where I like to zoom out with
Cmd+- or Ctrl+-, but I also like to use
| | 05:01 |
my preview to test the movie.
So I'm going to hit command return or
| | 05:06 |
control enter.
And there I can see I don't love the
| | 05:09 |
position of these two so I may want to
move this down and to the right a bit.
| | 05:15 |
Ignore the error for now.
It's letting us know the button that the
| | 05:18 |
Action script is written to control isn't
working yet.
| | 05:23 |
And that's okay, we haven't used the
button yet.
| | 05:26 |
So I'll go back to my timeline just
because I'm focusing on that.
| | 05:30 |
I'll select the logo and use the arrow
keys on my keyboard to nudge it down.
| | 05:35 |
And I'll hold down Shift and select the
background and nudge it to the right.
| | 05:40 |
And that's really where I want them to
end.
| | 05:42 |
I'll hit Cmd+Return or Ctrl+Enter again
and I'm happy with the position.
| | 05:46 |
Now, I'm ready to animate those two.
So before I animate, I want to make the
| | 05:51 |
logo look like it's coming in from
nowhere.
| | 05:54 |
So I'll click and start dragging up, and
if I don't want it to move left and
| | 05:58 |
right, I can add in the Shift key as I'm
dragging.
| | 06:02 |
Now, you'll notice it jumped back to key
frame 1.
| | 06:06 |
So if I click on keyframe 1, I can drag
that over to 24.
| | 06:11 |
And these are blank placeholder frames.
Meaning nothing is happening for the
| | 06:15 |
first second of the movie to that logo
layer.
| | 06:18 |
Now, I can animate.
And when I right-click in order to animate.
| | 06:24 |
Because there are two symbols that are
selected, it needs to combine those into
| | 06:28 |
one symbol in order to create a motion
tween.
| | 06:32 |
So when I choose Create a Motion Tween,
it automatically built a symbol with both
| | 06:36 |
in there.
And you'll notice this is the movie clip
| | 06:39 |
type symbol.
I'll name this Logo and Background.
| | 06:46 |
And now, I want that to slide down for
another second.
| | 06:52 |
So I'll move it to 48.
I move my play head to keyframe 48 in
| | 06:57 |
the timeline.
Then I drag that into position, using my
| | 07:02 |
shift key after I start dragging to keep
it straight.
| | 07:07 |
There's the little diamond I referrred
to.
| | 07:10 |
That diamond is a property keyframe,
indicating something in the property of
| | 07:14 |
the symbol is changed.
Either opacity, position, color, all of
| | 07:18 |
the things that Flash can change.
And let's preview this again.
| | 07:22 |
Cmd+Return or Ctrl+Enter.
Lovely.
| | 07:27 |
There's my animation.
We have more to do, but that's it for the
| | 07:30 |
introduction to the timeline.
So I'm going to go ahead and Close this,
| | 07:35 |
come back to my timeline, Save my movie
with my initials.
| | 07:41 |
Give it a try on your own.
| | 07:48 |
| | Collapse this transcript |
| The Timeline: Part two| 00:00 |
All right, when we last left Batman and
Robin, they had just animated this logo.
| | 00:06 |
(LAUGH) Just kidding.
Now we're going to continue on with the
| | 00:10 |
timeline, and I'm going to add a tag line
to the bottom of this ad, and a caption text.
| | 00:16 |
And then we'll fix the button that's in
our library, the creative suite lovers
| | 00:22 |
that's tied to this actions layer.
So let's begin by dragging out our rectangle.
| | 00:29 |
As with any good animation, your layers
should be appropriately named and easy to spot.
| | 00:36 |
So before I drag anything out, I hit the
New layer button.
| | 00:40 |
I'll double-click on layer one and name
it rectangle.
| | 00:45 |
It always starts with layer one, two,
three, four depending on how many you've built.
| | 00:49 |
I want the rectangle to come in when this
animation finishes playing.
| | 00:54 |
So I'm going to click on keyframe 48, which
is two seconds into the movie.
| | 00:59 |
And I'll choose Insert > Timeline >
Keyframe.
| | 01:04 |
This puts a blank keyframe, a placeholder
there, so when I drag the rectangle
| | 01:08 |
object in, that's where it comes in.
So I'll grab my white rectangle and drag
| | 01:14 |
and drop it from the library onto the
stage.
| | 01:18 |
I'll position it and deselect it, because
sometimes if you have an object selected
| | 01:23 |
on the stage, your new layer button won't
work.
| | 01:28 |
So just check that out.
I clicked on the paste board, the grey
| | 01:32 |
area outside the stage, to make sure
nothing was selected.
| | 01:36 |
So now I'll hit new layer, and I'll
double-click on layer two, and name that
| | 01:41 |
tag line.
For now I'll put a place holder frame in.
| | 01:47 |
Insert > Timeline > Keyframe, and then
I'll drag out my caption text, and
| | 01:52 |
position it.
To check the position to make sure I'm
| | 01:57 |
happy with it, I'll hit Cmd+Return or
Ctrl+Enter, and we get that error,
| | 02:02 |
indicating the CS lover button isn't
identified.
| | 02:08 |
I'm happy with the positioning of
everything, and you could see the
| | 02:10 |
animation that's playing earlier, and
then these just appear on the stage, but
| | 02:13 |
they aren't animated as of yet.
If I close my preview and come back to
| | 02:19 |
the timeline, you'll notice that Flash
automatically extended those to play the
| | 02:23 |
entire length of the movie, which is 7
seconds.
| | 02:28 |
I'm going to scrub the timeline back over to
my keyframe 48 so that I could animate
| | 02:34 |
the rectangle.
But I want both to come in from off stage.
| | 02:40 |
So I'll click on Nectar of the Geeks,
hold down shift, click on my rectangle,
| | 02:45 |
and then drag those two off the stage,
adding the shift key in after I start
| | 02:49 |
dragging, so that it doesn't move up and
down.
| | 02:55 |
I'll click a way to deselect and click on
only the rectangle.
| | 02:59 |
And with this, I'll right-click and
choose, Create Motion Tween.
| | 03:05 |
Now, I want that to play for about on
second, and slide in from the left.
| | 03:11 |
So I'll drag my play head to keyframe
72, which is where I want it to end.
| | 03:18 |
And once I'm on keyframe 72, I'll click
and start dragging.
| | 03:22 |
Oops, I missed and grabbed the text
instead of the rectangle.
| | 03:26 |
There I've got the rectangle.
I'll click and start dragging, adding the
| | 03:30 |
Shift key in to keep it proportional.
And when I let you, you'll notice on the
| | 03:34 |
rectangle layer, I'll scoot this over so
you can see it.
| | 03:38 |
It has now become a property keyframe.
It's diamond-shaped, meaning something in
| | 03:44 |
the symbol or object has changed.
That's where I want it, and I want the
| | 03:49 |
tagline to start there, so I'll click on
the solid bullet on the tagline layer and
| | 03:54 |
drag that over to keyframe 72.
Now I'm ready to animate the text.
| | 04:01 |
So I'll select the text, right-click,
create motion tween.
| | 04:07 |
I'll go to keyframe 96, another second
in the movie.
| | 04:11 |
That's one of the tricky parts about
having 24 frames per second, which is the standard.
| | 04:16 |
You have to do math, and you have to
divide everything by 24, or multiply it
| | 04:19 |
by 24, to get to your one second.
I'll click and start dragging, adding my
| | 04:24 |
Shift key in, to keep it straight, and
you'll notice that, that property has changed.
| | 04:29 |
If I play again, I'll still get the
error, and we're just going to let it go,
| | 04:32 |
the way I say that it's one word.
Looking good.
| | 04:36 |
I could make that play longer if I want
to, but that's all I want for now.
| | 04:40 |
So, we're ready to add in our button.
So, I'm going to make a new layer.
| | 04:45 |
I'll double-click and name it button, and
I'm going to slide over, and I want the
| | 04:51 |
button to come in a little bit later in
the movie.
| | 04:56 |
So let's go to keyframe 120.
Insert > Timeline > Keyframe.
| | 05:05 |
I'll go to my Library panel.
I'll grab this button, which the action
| | 05:10 |
script is tied to.
Now when I name the button properly, I
| | 05:14 |
may still get an error because the action
script is happening at keyframe 1.
| | 05:19 |
But the button isn't coming until key
frame 120 5 seconds into the movie.
| | 05:26 |
So let's drag and drop this button over.
I'll go to my free transform tool, and
| | 05:33 |
I'll scale it up.
In order to get rid of the first error
| | 05:38 |
I'll go to properties, and I'll name the
instance of this button symbol CSlover_BTN.
| | 05:45 |
That's a habit you always want to build
with buttons that makes it easier for scripting.
| | 05:53 |
Now I am going to play one more time that
the error message has changed, so I hit
| | 05:58 |
Cmd+Return or Ctrl+Enter to play, and its
got something no meaning no content.
| | 06:06 |
Let's fix it.
I'll close this window, come back to the
| | 06:09 |
timeline, and I'll move my action over to
where the button comes in.
| | 06:16 |
It could be at the beginning or the end
of the movie.
| | 06:18 |
I'll just put right where the button
comes into the movie.
| | 06:22 |
So Cmd+Return, or Ctrl+Enter to test
again.
| | 06:25 |
There's the button.
I'll click it to see if it works.
| | 06:32 |
And this is an Adobe usergroup I run
called Creative Suite Lovers.
| | 06:35 |
And it did work.
Excellent.
| | 06:38 |
I'll close that window, I'll come back to
flash and there is a little bit more in
| | 06:42 |
depth with working with your timeline.
We 're quite finished with the beauty of
| | 06:47 |
this, its a little bit busy for an
advertisement for me.
| | 06:51 |
But you should have got in a good handle
on inserting keyframes, dragging items
| | 06:55 |
in from a library, calculating when you
want your objects to come into the movie.
| | 07:02 |
Go out and practice.
| | 07:07 |
| | Collapse this transcript |
| The Timeline: Part three| 00:00 |
Now, it's time for our final tour and
overview of the Timeline.
| | 00:05 |
Just to break everything down in summary,
we have the Timeline panel.
| | 00:10 |
To the left, you see all of your layers,
and you'll notice in the layers, the ones
| | 00:14 |
that have animation have a slightly
animated icon.
| | 00:19 |
If I want to hide a layer, I can click
the bullet in the I column or the layer
| | 00:24 |
visibility column.
And if I want to hide layers as I go,
| | 00:30 |
let's scroll to the right where more
action is happening.
| | 00:35 |
I've clicked my Play Head, the red Play
Head bar, to a certain spot.
| | 00:40 |
So, I can see that I've added a star
here, which is covering up Nectar of the
| | 00:44 |
Geeks a bit.
But if I want to hide multiple layers at
| | 00:48 |
once, I can click and hold on the first
bullet.
| | 00:52 |
And as I drag up, it hides those layers.
Clicking and dragging back down turns
| | 00:56 |
them back on.
You'll notice that the background layer
| | 01:00 |
is locked.
The pencil with the line through,
| | 01:02 |
indicates that.
And also, the lock symbol.
| | 01:04 |
You can lock any layer, simply by
clicking on it's bullet.
| | 01:08 |
At the bottom left, we have New Layer.
As your movies get more complicated, you
| | 01:14 |
may need to divide pieces of your movies
up into folders.
| | 01:19 |
That way, you don't have to scroll too
long and too far.
| | 01:23 |
And if you look at our Timeline, you'll
notice we have a keyframe with content.
| | 01:29 |
A blank keyframe, indicated by the
hollow bullet.
| | 01:33 |
Where animation is occurring, appears in
light blue.
| | 01:37 |
And I've added to this, a shape tween, or
actually, a classic tween.
| | 01:42 |
Shape tweens will have a light green
background.
| | 01:47 |
I can tell by the background being
slightly purple, that this isn't a shape
| | 01:50 |
tween, it's a classic tween.
So, I'm going to rename that layer.
| | 01:57 |
In order to rename the layer, I simply
double-click in the middle anywhere.
| | 02:00 |
And the pencil icon indicates that's the
layer I'm working on.
| | 02:04 |
I'll press return or enter to accept it.
Now, I'll notice a few of my layers have
| | 02:09 |
a layer color that are the same.
The layer color is used for motion paths.
| | 02:15 |
So, if I go to my Logo Layer and I take a
look by zooming out with command minus or
| | 02:20 |
control minus at the motion path,
creating animation on this logo, you'll
| | 02:24 |
see it's a light green, which is a layer
color.
| | 02:30 |
To get to Layer options and control the
color of the layer for the motion path, I
| | 02:34 |
could simply double-click on this column.
And pausing over the header of any of the
| | 02:40 |
columns, will tell you what it does.
Clicking the eye at the top of this
| | 02:45 |
column hides or shows all layers as a
unit.
| | 02:48 |
Clicking Lock, locks or unlocks all
layers as a unit.
| | 02:52 |
And showing layers as outlines can be
very helpful when it comes to dissecting
| | 02:57 |
something to find a stacked object that
may be beneath.
| | 03:02 |
So, I'll click again.
I'll make sure my Background Layer is
| | 03:05 |
still locked, so that's it's safe.
And now, I'll double-click on the green
| | 03:09 |
square to the right of logo.
Once I've double-clicked on that green
| | 03:13 |
square, I can change my outline color or
Motion Editor color.
| | 03:18 |
So, I think I'll go with a blue for this
one.
| | 03:20 |
And click OK.
I really only ever bother to do that when
| | 03:24 |
I get very complex movies.
As I look to the far right at the top of
| | 03:29 |
the Timeline panel, every panel has a
panel menu, four lines with a down arrow.
| | 03:35 |
And when I click there, there's some
other View options.
| | 03:38 |
As your movies get longer, viewing it in
normal may be difficult, cuz you have to
| | 03:42 |
scroll so far left and right, unless you
have a massive monitor.
| | 03:48 |
So, you can go to tiny and you'll notice
I can see a lot more keyframes.
| | 03:52 |
I can come back to the panel menu and
choose small, so that it goes to 170.
| | 03:59 |
Normal, for the resolution on my screen,
is going to about 150.
| | 04:05 |
Something else that's helpful is the
Preview option on the panel menu for the Timeline.
| | 04:10 |
The Preview option actually lets me
scroll through and see where objects occur.
| | 04:16 |
Now, I've got actions, a classic tween
and a button.
| | 04:20 |
And nothing's happening early on in the
movie.
| | 04:22 |
But if I scroll down to the bottom, there
I can see the background comes in first.
| | 04:27 |
So, it actually previews that JPEG image
in the timeline.
| | 04:31 |
As I scroll right, there's my animated
logo.
| | 04:35 |
As I go further right and scroll up, I
can get into my tagline, the Nectar of
| | 04:39 |
the Geeks.
And when I go even farther, I'll see my button.
| | 04:45 |
I'm going to go back to Normal View, and I
want to finish up this movie by having you
| | 04:50 |
fix a little bit of the animation.
I no longer need this classic tween, that
| | 04:56 |
star that's occurring.
I put it in there, simply for
| | 04:59 |
illustration purposes.
So, I'm going to select the Layer and hit
| | 05:03 |
the Trashcan to delete the entire layer.
I'll Preview my movie with Cmd Return, or
| | 05:09 |
Ctrl Enter.
And I want this button to create a
| | 05:12 |
sweetlovers.com, to come up last, and
appear where Nectar of the Geeks is.
| | 05:20 |
So, let's adjust the Timeline.
I'm going to scroll over to the right, and
| | 05:26 |
I've got my Rectangle Layer and my
Tagline Layer.
| | 05:31 |
And I could simply stop where they occur
by dragging the keyframe span over.
| | 05:39 |
So here, you can see it starts.
And I'll click on the frame, so I can see
| | 05:43 |
it, at frame 72, at 3 seconds into the
movie.
| | 05:46 |
And I've stopped it at frame 120.
Let me do the same with the tagline.
| | 05:52 |
And there we go.
So, the rectangle and the tagline are corrected.
| | 05:59 |
Now, for the button Layer.
Let me jump to where the button occurs.
| | 06:04 |
There it is.
And once the button is on, these two are
| | 06:10 |
now invisible or they've disappeared.
That's actually where it popped in, where
| | 06:18 |
the bullet is on the button Layer.
I'll drag and drop this to the middle.
| | 06:22 |
And to make sure I get it dead center,
I'll use my Align panel.
| | 06:26 |
Align the Stage is on, and I'll center
it.
| | 06:29 |
The last thing we're going to have you do,
is I have an Actions Layer.
| | 06:34 |
And I don't want the movie to
automatically loop, which it is doing
| | 06:38 |
right now.
So, I'm going to go to the Actions Layer and
| | 06:42 |
at the last keyframe, keyframe 168,
I'll choose Insert, Timeline, Key Frame,
| | 06:46 |
as a place holder.
Now, I'm going to put a little script here.
| | 06:52 |
And this is the only script you'll have
to write by hand and it should be pretty simple.
| | 06:58 |
I'll go to Window and Actions and you can
do this on Export.
| | 07:02 |
But I'll show you, because it's just one
word and some punctuation.
| | 07:06 |
By typing stop within an open and closed
parentheses and a semicolon, the movie
| | 07:11 |
will no longer loop.
And you'll notice, I'll close my Actions
| | 07:17 |
Frame, a little a occurs.
Now, when I hit Cmd Return or zCtrl Enter
| | 07:21 |
to Preview my movie, it plays once.
That slid in, it disappears.
| | 07:28 |
Now, the button stays.
So, it won't loop back while they're
| | 07:31 |
trying to go click on the button.
So, orient yourself with the components
| | 07:36 |
of the Timeline and if you're brave
enough, try writing that tiny little stop script.
| | 07:42 |
I hope you enjoyed our tour.
| | 07:47 |
| | Collapse this transcript |
|
|
7. The Motion EditorIntroduction to the Motion Editor| 00:00 |
In this video we're going to tour the Motion
Editor.
| | 00:05 |
The Motion Editor was introduced in Flash
CS4, and it gives you great control over
| | 00:10 |
individual properties of an animation.
You could think of it like a mirror of
| | 00:16 |
the timeline that's displayed as a chart.
Now in order to see Motion Editor
| | 00:22 |
options, you have to select a keyframe
span that's been tweened or an object
| | 00:27 |
that's been tweened.
The first time you click on the Motion
| | 00:32 |
Editor, it may be empty.
When I come back to the timeline and look
| | 00:36 |
at this project file, 0701motion, I'm
going to click once in this light blue area
| | 00:41 |
to select the tweened keyframe span, or I
can click on an object on the stage.
| | 00:49 |
You'll notice my movie is 48 frames.
The default frame rate is still set, at
| | 00:55 |
24 frames per second, so the movie has a
duration of two seconds.
| | 01:00 |
Now, when I click on the motion editor, I
can see all of its options.
| | 01:05 |
The first time you come in here, you may,
however, only be viewing one frame.
| | 01:12 |
This portion, where it says Viewable
Frames, I can click and drag down, and
| | 01:16 |
you'll notice only the number 1 appears.
The first time I jump into the motion
| | 01:22 |
editor, I always click and drag that up,
so I can see the full length of the movie.
| | 01:29 |
And now I'm seeing 48 frames.
I'm going to stretch the motion editor, and
| | 01:34 |
things that you can modify are the x y
position, rotation.
| | 01:41 |
I can collapse basic motion to make this
simpler.
| | 01:45 |
I can transform the skew or the scale.
I can apply a color effect, and you'll
| | 01:51 |
notice many of these options are also
available in the Properties Inspector.
| | 01:57 |
A lot of longtime Flash users will do
this just through the Properties Inspector.
| | 02:02 |
However, I travel and teach for Adobe a
lot, so I tend to be an early adopter of
| | 02:07 |
new features because my job is to show
them off.
| | 02:12 |
So I do almost everything with the Motion
Editor, even though it was designed to
| | 02:16 |
create more complex tweening.
One of the very cool things you could do
| | 02:22 |
is apply filters, like drop shadow, blur,
glow, or bevel.
| | 02:26 |
But the main focus of the motion editor
is easing.
| | 02:29 |
Easing creates more natural or more
realistic motion.
| | 02:32 |
For example, an object coming into the
stage quickly and leaving slowly, or
| | 02:38 |
coming in slowly and leaving quickly.
You could even create bounce effects
| | 02:45 |
which lose their momentum as an object
bounces across the stage, to simulate a
| | 02:50 |
realistic object bouncing on the floor.
But I like to start you out in the
| | 02:55 |
shallow end of the pool, so we're going to
start with basic motion.
| | 03:00 |
I'll expand that by clicking the little
expand triangle again.
| | 03:03 |
My object is selected, and my play head
is at the end.
| | 03:08 |
My 48th frame, or the end of the 2
seconds.
| | 03:12 |
I'm going to apply a rotation of 360
degrees, and I'll press Return or Enter.
| | 03:19 |
You'll notice, my dotted line for
rotation now became solid.
| | 03:24 |
Another powerful feature of the Motion
Editor is the ability to do things like
| | 03:29 |
custom easing, where you can use bezier
tools, curves or vectors in this chart of
| | 03:34 |
the motion editor To get very precise in
the playback of the property that you're
| | 03:39 |
editing often for for easing.
But lets see what we've done so far, as I
| | 03:47 |
scrub the timeline, there you see the
full spin of the image on the stage.
| | 03:54 |
As I mouse over this line in the motion
editor chart I could see on an exact keyframe.
| | 04:02 |
What the rotation angle is.
And if I press command return or control
| | 04:06 |
enter to preview.
(LAUGH) I always giggle when I see this.
| | 04:10 |
You'll start to get a little dizzy if you
leave it up too long.
| | 04:12 |
But there's my first effect.
The next thing I'm going to do is apply a
| | 04:17 |
scale effect but I want to do that with a
new image.
| | 04:21 |
So I'll come back to my timeline.
I'll give this a bit more room, and I'm
| | 04:26 |
going to look at the Library panel.
In the library panel, we have three
| | 04:31 |
images already placed for you to use.
Notice the symbol 1.
| | 04:36 |
When I created the motion tween, Flash
automatically made it a movie clip symbol.
| | 04:41 |
To be a good Flash user, I'm going to name
my symbol, boy1.
| | 04:48 |
And now add new layer for the new image,
call it boy2, and then I'll drag over the
| | 04:56 |
boy2 image.
Before you drag, it's important to put an
| | 05:01 |
empty keyframe in where you want it to
go.
| | 05:04 |
I want the boy2 image to start playing
after boy1 is finished.
| | 05:10 |
So, click here on keyframe 49, insert
timeline keyframe.
| | 05:17 |
There's my blank placeholder.
And I'll drag over boy 2.
| | 05:21 |
I'll use my alignment panel and confirm
that align to stage is on and I'll center
| | 05:27 |
horizontally and vertically.
I'll collapse my align panel.
| | 05:34 |
And I'm going to scoot over by sliding
the scroll bar to the right.
| | 05:39 |
And I want to make this also play for two
seconds.
| | 05:43 |
So I'll go to keyframe 96, and choose
Insert timeline frame.
| | 05:48 |
No tweening has occurred yet, so I'll
right-click on the image, and choose
| | 05:54 |
create motion tween.
There's the new symbol Flash creates, a
| | 05:59 |
movie clip symbol And I'll name it boy
two.
| | 06:03 |
Now I'm ready to use the motion editor.
I'll click back on the motion editor, and
| | 06:09 |
this time I'll collapse basic motion and
apply a scale transformation.
| | 06:15 |
My scale values are linked in, and I can
see in blue the properties...
| | 06:20 |
I'm at the end of my movie, so I'm going to
scale him down to nothing.
| | 06:25 |
I'll type 0, press Return or Enter to
accept it, and you'll see he disappears
| | 06:31 |
to infinity.
I'll hit command return, or control enter
| | 06:36 |
to preview, and there's my effect.
So if you're feeling frisky, you could
| | 06:42 |
try this again with the boy 3 image.
That is our introduction with the very
| | 06:50 |
basics of the motion editor.
| | 06:54 |
| | Collapse this transcript |
| Using filters and color effects| 00:02 |
In this video, we're going to have some
fun with Filters.
| | 00:05 |
One thing to keep in mind when using
filters in the Motion Editor is the more
| | 00:09 |
filters you have on an object, the more
calculations the Flash Player has to go
| | 00:12 |
through in order to display that effect,
so that can effect your performance.
| | 00:19 |
Filters can be applied to movie clips,
buttons, or text objects, not to graphic symbols.
| | 00:26 |
So, we're going to take this movie, 0702
Filters Begin, and I'm going to slide to
| | 00:32 |
about keyframe 48.
This is where this rectangle starts to
| | 00:37 |
slide in.
I'll select it on the stage, and you'll
| | 00:41 |
notice the type is graphic.
When this was added to the Library, it
| | 00:46 |
was added as the simplest symbol type, a
graphic symbol.
| | 00:51 |
Well, there's no options for filters here
on a graphic symbol.
| | 00:56 |
And if I go to the Motion Editor and
Collapse Basic Motion and Collapse
| | 01:00 |
Transformation, I can do color effects,
just as I can do here in properties.
| | 01:07 |
But filters is not an option.
So, for that reason, I'm going to easily
| | 01:12 |
through the Properties Inspector, convert
this to a move clip, the most complex
| | 01:17 |
sort of symbol.
Once it's a movie clip, here I can see
| | 01:22 |
the filter's Plus sign is now available.
You can do filters either through the
| | 01:29 |
Motion Editor, or here through Properties
by adding them at the bottom with the New button.
| | 01:35 |
So, the most common filters are drop
shadow, blur, glow, bevel.
| | 01:40 |
There's a few others that are very fun.
But on this one, what I want to do is
| | 01:44 |
apply a blur effect as it slides in.
So, I'm going to do it through the Motion Editor.
| | 01:52 |
In Filters, I'll choose Blur.
And then, when I choose Blur, you can
| | 01:56 |
choose how much blurring do you want to
have happen.
| | 02:00 |
I'm looking at the Motion Editor but I'm
only seeing 32 viewable frames.
| | 02:07 |
And this animation plays for longer.
So, I'm going to slide that up a bit and
| | 02:13 |
I'll scroll down a few clicks.
And there I can see Blur X and Blur Y.
| | 02:20 |
I'm going to go ahead and set Blur X to
20 pixels.
| | 02:24 |
When I press Return or Enter, these two
are linked so you can see that it had did
| | 02:30 |
both Blur X and Blur Y at the same time.
When I scrub my timeline, there's the
| | 02:37 |
blur effect.
So, like a soft feathered drop shadow,
| | 02:43 |
it's applying to the whole object here at
keyframe 72, roughly.
| | 02:51 |
Often, I'll go back to the timeline to
check my exact position.
| | 02:55 |
I'm actually at 74, so let's slide it
back to 72.
| | 03:00 |
You can see that in the Motion Editor,
but I find it easier in the timeline.
| | 03:04 |
There, I want to insert a change.
So, I'm going to click this little diamond.
| | 03:09 |
It'll turn yellow when I click it to add
or remove keyframe.
| | 03:14 |
So, it'll start at 20 pixels, and now
let's have it go down to 0.
| | 03:20 |
I'll press Return or Enter, and you'll
notice the chart in the Motion Editor
| | 03:24 |
bends to indicate some change is
happening.
| | 03:27 |
So, the edges start out soft, and then
end up crisp, I'm slowly scrubbing this
| | 03:31 |
so that you could see that.
I'll press Cmd+Return on the Mac, or
| | 03:38 |
Ctrl+Enter on the PC, and preview my
work so far.
| | 03:42 |
So, it came in soft edge and got sharper.
You can even make that far and more
| | 03:47 |
dramatic by sliding over here, and let's
try a 100 pixels.
| | 03:53 |
Now, I'll press Cmd+Return or Ctrl+
Enter to test, and there it slides in and
| | 03:58 |
gets very sharp.
I'll close this window.
| | 04:02 |
And another effect you may want to apply
is, you'll notice as the Creative Suite
| | 04:07 |
lovers button came in, it just kind of
appears.
| | 04:11 |
So, I'm going to slide over by dragging
my play head, or I like to use the
| | 04:17 |
timeline, but something I top off at a
certain amount to get to the spot where I am.
| | 04:26 |
The Motion Editor is a mirror of the
timeline, but the timeline's been around
| | 04:29 |
longer, so I'm more comfortable there.
Now, I'm where the button comes in.
| | 04:35 |
So, I'm going to do again another filter
on the button.
| | 04:39 |
I'll select the button on the stage, come
back to the Motion Editor, and this
| | 04:43 |
happens quite often.
If you don't have the Motion Tween setup,
| | 04:48 |
or if you don't have the Motion Tween
Span selected, you won't have any options
| | 04:52 |
in the Motion Editor.
So, it's important that you see this here.
| | 04:57 |
I'll come back to the timeline, and this
isn't set up to Motion Tween.
| | 05:01 |
I deselected so that I could see that.
It's a light gray which means the button
| | 05:06 |
is there but it has no animation to it.
So, let's right-click anywhere on the
| | 05:11 |
button and choose Create Motion Tween.
Once the Motion Tween is there, now I can
| | 05:16 |
select that keyframe span, so it's all
highlighted.
| | 05:21 |
Now, I can go to the Motion Editor, and
there my options are available.
| | 05:25 |
So, I'll choose Filter.
And on this one, I'll do a glow.
| | 05:29 |
And you'll notice, it automatically
popped in a glow color for the background.
| | 05:36 |
As I slide the play head, nothing is
changing in the effect.
| | 05:40 |
So, here again, I have Options.
I have a Blur X and Blur Y that applies
| | 05:45 |
to the glow, in this instance.
So, let's do a larger blur.
| | 05:50 |
Let's try 30.
There I get a nice, big glow.
| | 05:55 |
No changes still happening for the
duration of this.
| | 05:59 |
So, I'll come back to Blur X and Y, I'll
click the Diamond to insert a change, and
| | 06:04 |
I'll put that to zero.
So now, I'll get a highlight that appears.
| | 06:11 |
Or it starts out with a larger red glow,
and fades down.
| | 06:16 |
I think, while I'm here, I might as well
make that button fade in and fade out.
| | 06:21 |
So, you do that with alpha, which isn't
technically a filter.
| | 06:24 |
It's a color effect.
So, I'm going to come back to where the
| | 06:27 |
glow starts.
I'll go to Color Effect and choose Alpha.
| | 06:32 |
Every now and then, if you notice your
interface not showing something that you
| | 06:36 |
know it should, it helps to collapse and
expand to see your options.
| | 06:42 |
And make sure the object is selected on
the stage.
| | 06:46 |
Sometimes, I have to click away and click
back where I know the object to be in
| | 06:50 |
order to see my options.
There we go.
| | 06:53 |
Had to scroll down a little bit.
And this is why I love using the Timeline.
| | 06:56 |
For the Alpha amount at zero, I'm going
to go all the way to the end and set that
| | 07:00 |
to 100.
I'll slide it back.
| | 07:04 |
And I don't want it to start out
completely clear so I'll start it at
| | 07:09 |
about 20%.
Now, I'll press Cmd+Return or Ctrl+
| | 07:16 |
Enter to test my movie.
And there's a couple fun effects that you
| | 07:23 |
could add.
Give them a go on your own.
| | 07:29 |
| | Collapse this transcript |
| Applying easing with the Motion Editor| 00:02 |
In this video, we're going to use the
Motion Editor and a feature called easing.
| | 00:07 |
Easing makes your animations look more
realistic and more natural.
| | 00:11 |
There are two options, ease in where the
motion begins slowly and then gains speed.
| | 00:18 |
And ease out, where the motion begins
quickly, then loses speed.
| | 00:23 |
For example, if I'm doing this ball
animation, when I play the movie with
| | 00:27 |
Cmd+Return or Ctrl+Enter, the ball's
traveling at a consistent speed, which
| | 00:31 |
wouldn't happen if you really threw a
ball against a surface.
| | 00:37 |
So, I'll close that up.
What should happen if the ball is thrown?
| | 00:42 |
It hits, it slows down.
When it bounces, it actually reverses
| | 00:46 |
direction, that affects the velocity.
So, I want to demonstrate all of that.
| | 00:51 |
In order to make it easier to see that
the ball reverses direction, we're going to
| | 00:55 |
fill the ball with a gradient.
If I double-click on the ball, I'm
| | 01:01 |
editing the movie clip symbol called red
ball.
| | 01:04 |
I need to double-click again to get down
to the drawing object.
| | 01:08 |
And now I can select the red ball to be
able to change its fill to a gradient.
| | 01:14 |
So, I'm going to come to the swatches panel,
and I'll start with the black and white
| | 01:19 |
radial gradient.
I'm going to zoom in a bit and I like to
| | 01:23 |
click and drag to zoom.
And once I'm on the black and white
| | 01:27 |
radial gradiant, I'll come to the color
panel.
| | 01:31 |
Here's my white end, here's my black end.
I'll click on the black end and click in
| | 01:35 |
a shade of red because I still like a red
ball.
| | 01:39 |
Now, I'm going to hold down the Free
Transform tool and I like to offset this
| | 01:42 |
highlight that I've given the ball a bit.
So, when I go to the Gradient Transform
| | 01:48 |
tool, this center point can be moved to
offset the highlight.
| | 01:53 |
You could drag it anywhere and if you'd
like to make the highlight bigger or
| | 01:56 |
smaller, you can use this little diagonal
arrow to set that value.
| | 02:01 |
Gives it a little bit more depth.
When I'm finished, I'll go back to the
| | 02:06 |
Selection tool, and exit back out to
scene one.
| | 02:10 |
I've assigned Cmd+0 or Ctrl+0, to be Fit
in Window, so I've just hit that.
| | 02:15 |
And I'll preview my movie again.
So, the highlight is staying in the same spot.
| | 02:20 |
Let's make the ball rotate or spin.
I'll close this.
| | 02:25 |
And my keyframe span is selected, the
motion tween where we've got the bouncing happening.
| | 02:30 |
In the Motion Editor, I'm going to expand
Basic Motion and there is Rotation.
| | 02:36 |
I'm actually going to start at a 360-degree
rotation.
| | 02:40 |
And as soon as I type that 360, you'll
see the chart or the graph for the motion
| | 02:45 |
editor change.
As I scrub the timeline to halfway
| | 02:50 |
through the movie, 1 second or 24 frames,
there I can see it's at 183, because it's
| | 02:55 |
going from 360 here to zero here.
I actually want it to reverse direction,
| | 03:03 |
so I'm going to make this spot zero.
Now, I'll scrub to the end of the movie
| | 03:09 |
and put in 360 again.
And the way you can tell that, that
| | 03:14 |
actually achieved a reversal in direction
is by scrubbing the timeline and watching
| | 03:19 |
this registration point.
So, as I scrub backward, you'll see it's
| | 03:23 |
moving one direction.
When I get past the midpoint of the
| | 03:27 |
movie, that reverses.
And you can play it again if you'd like
| | 03:30 |
to see it.
But let's move on to easing.
| | 03:34 |
So, as I scroll to the very bottom of the
Motion Editor, you'll see I have the
| | 03:38 |
option for a simple or slow ease that's
automatic.
| | 03:42 |
Easing in, motion will begin slow, and
then gain speed.
| | 03:48 |
So, let's play the movie to see it's
still consistent, but we can see our spin.
| | 03:51 |
I'm going to start with an ease in, so I'll
put the value at minus 100.
| | 04:00 |
By setting that ease, it's not really
applied anywhere yet.
| | 04:05 |
I need to scroll up.
And in the basic motion, choose to do my
| | 04:09 |
simple minus 100 easing.
And now I'll play.
| | 04:13 |
But one thing to note here, see how that
dots are much closer together?
| | 04:18 |
Because the motion is going to begin slowly.
There are more stops here.
| | 04:24 |
Then it hits and gains speed, so there
are fewer stops.
| | 04:28 |
So, when I hit Cmd+Return or Ctrl+Enter
to preview slow to fast.
| | 04:33 |
And let's do a reversal of that.
I'll scroll down to the bottom and I'll
| | 04:38 |
add another ease effect that I can use on
my basic motion.
| | 04:44 |
So, this plus sign has preset eases that
are saved.
| | 04:47 |
And you could even do a custom to have it
ease in and ease out, instead of doing
| | 04:50 |
one throughout the whole movie.
But for now, we're just going to look at
| | 04:54 |
easing in and easing out.
So, I'll do simple slow again and this'll
| | 04:59 |
be my ease number 2.
But for this one, I'm going to use a
| | 05:04 |
positive 100, which will ease out, so the
motion will begin quickly, then lose speed.
| | 05:10 |
And it's not applied yet, but watch the
motion path as I apply it.
| | 05:16 |
I'll scroll up and choose the ease that I
built, number 2.
| | 05:22 |
Here, the dots are farther apart, then
they get closer together.
| | 05:26 |
And when I preview it, there you could
see it began really quickly and then it
| | 05:31 |
lost speed on the way out.
And that's where I'll leave it for now.
| | 05:37 |
The last thing I want to do is find the
spot where it bounces.
| | 05:42 |
Right here.
And add a little scrunching, because when
| | 05:44 |
a basketball hits a surface or a rubber
ball hits a surface, it changes shape.
| | 05:49 |
So, I'm going to go just before the hit and
I'll use transformation.
| | 05:57 |
So, I collapse basic motion.
And in transformation, I want the scale x
| | 06:01 |
and scale y linked, so it locks in 100%
right here.
| | 06:07 |
So, I link those two, they're probably
already linked on yours, and I'll put in
| | 06:11 |
keep the position at this spot.
I'll slide down to where it hits and now
| | 06:17 |
unlock them.
And I'll do 120% in one direction and 80%
| | 06:23 |
in the other.
So, now I get a little scrunch effect.
| | 06:29 |
But I don't want that staying through the
whole movie, I just want it to happen in
| | 06:31 |
sort of a split second.
So, I'll slide over a little bit more.
| | 06:34 |
You can do one or two keyframes.
And now, I'll set it back to 100 and 100.
| | 06:43 |
And let's preview our final movie.
Cmd+Return, and there it is.
| | 06:50 |
Coming in quickly, scrunching a little
bit at the bottom, so you get that
| | 06:53 |
natural little cush or bounce that you
get with a ball.
| | 06:57 |
So, now we've made our bouncing ball much
more real world and realistic.
| | 07:02 |
I'd like you to try to review this movie
on your own and see if you can do that.
| | 07:09 |
| | Collapse this transcript |
|
|
8. Distributing and Publishing Flash AnimationsOptions for testing your movie| 00:02 |
Now lets explore some publish settings.
We'll start in this video by showing
| | 00:06 |
testing options when you're using Control
and test movie.
| | 00:11 |
I'm at my operating system so you could
see that the only thing in the folder is
| | 00:16 |
the native project file, the .fla.
I'll double-click to open it in Flash,
| | 00:24 |
and I'll come to my control menu, test
movie and test, I can it Cmd+Return or Ctrl+Enter.
| | 00:33 |
As soon as you do that flash
automatically builds a swift and I, of
| | 00:37 |
course can see my animation.
I'll hide Flash, or minimize Flash, and
| | 00:44 |
look at the folder of my desktop, and
I'll see I have 102k SWF that was
| | 00:49 |
automatically created in order to
accomplish this test.
| | 00:55 |
I'll come back to Flash, and I'll scoot
this window up a bit.
| | 01:01 |
On the Windows platform your view menu
that we'll be using next will be here
| | 01:04 |
below your title bar.
On the Mac, it will be under View at the
| | 01:09 |
top on the menu bar.
And I'm going to enable the bandwidth profiler.
| | 01:15 |
Once this is on, it will stay on.
For this movie, the left side gives me
| | 01:20 |
the dimensions and information about the
document.
| | 01:25 |
Something that may be a little bit
alarming is that it'll take 18 seconds to preload.
| | 01:30 |
Well, that's because the default settings
for this are not typical of the real
| | 01:34 |
world today.
It's testing at dial-up speeds, and I
| | 01:38 |
know very few people who still have a
dial-up or phone line modem.
| | 01:43 |
Under the View menu, I can go to download
settings and change it to something more real-world.
| | 01:51 |
DSL, or Digital Subscriber Line, is
usually the lowest common denominator today.
| | 01:58 |
So if I choose DSL, now my preload time
is only 2.6 seconds.
| | 02:03 |
And let's explore the difference in those
two settings.
| | 02:08 |
Under view, I can choose, simulate
download.
| | 02:12 |
It's preloading, and now the movie
starts.
| | 02:18 |
If I come back to my view menu, and
download settings, and go to the default
| | 02:23 |
56k modem, and in the way back machine
they had 28.8.
| | 02:28 |
And that's bits per second, not bytes per
second.
| | 02:33 |
When I go back to the default setting and
I'm on that 18 second and I go back to
| | 02:37 |
view and simulate download, this will
cause people to get pretty impatient.
| | 02:44 |
However, anybody I know who's forced to
use dial up will typically know that
| | 02:48 |
everything takes longer to load as
they're surfing the Internet.
| | 02:52 |
So all this time I'm talking, I'm at
about 70% preloaded.
| | 02:57 |
The good news is once it preloads the
movie plays smoothly and I get a little
| | 03:02 |
chart, running through the timeline
telling me where large file sizes are.
| | 03:08 |
The right section of this profiler each
bar and lets slide back over.
| | 03:14 |
Represents an individual frame of the
document.
| | 03:19 |
So the stacked pieces you're seeing are
where large amounts of data are occurring.
| | 03:24 |
And the size of that bar corresponds to
that frames size in bites.
| | 03:29 |
So this is our brief overview of seeing
how your movie will perform.
| | 03:35 |
When a swf is created, getting statistics
for the document and, once the bandwidth
| | 03:40 |
profiler's on, it stays on.
When I'm finished with that, I'll go back
| | 03:45 |
to View and turn off my bandwidth
profiler.
| | 03:49 |
Give this a test with one of your own
movies or with our project file.
| | 03:57 |
| | Collapse this transcript |
| Full overview of Publish Settings and export options| 00:02 |
Now, let's explore your final Publish
Settings.
| | 00:05 |
When a movie is published, animations may
be viewed or played in the following ways.
| | 00:10 |
Through the Flash Player plug-in through
the web browser, they could be opened in
| | 00:14 |
a stand alone Flash Player application on
your hard drive.
| | 00:18 |
Or opened in a soft contained program
called Projector.
| | 00:23 |
Also, they can be played through ActiveX
controls in Microsoft Office and other
| | 00:28 |
ActiveX applications.
When you choose File, Publish, there are
| | 00:34 |
settings that go into play.
And Publish Preview, will actually
| | 00:41 |
preview it in your web browser.
But before we are ready to publish our
| | 00:45 |
movie, let's explore the Publish
Settings.
| | 00:49 |
Publish Settings are stored with your
Flash Document.
| | 00:53 |
In this document, we are going to build a
SWF, which happens automatically whenever
| | 00:59 |
you test your movie.
Flash is also nice enough to create an
| | 01:04 |
HTML, the HyperText Markup Language.
Basically, a web page that embeds the
| | 01:09 |
Flash content, so you can easily host
that on your own website.
| | 01:15 |
And on the right, you can browse to
different locations.
| | 01:18 |
If you don't want the destination to be
in the same folder that you're working on
| | 01:22 |
the Flash File from.
You could choose Static Content as well,
| | 01:27 |
a JPEG image who would just be a flat
image.
| | 01:31 |
GIFs can be animated and PNGs can be
animated depending on their format, but I
| | 01:36 |
rarely use these three options.
If you want a self-contained document
| | 01:42 |
that doesn't require a player or anything
else wherever it lands, you can make one
| | 01:46 |
specific for the Windows Platform, which
is a .exe, an executable file.
| | 01:52 |
Or a Macintosh Projector File, which is
technically a .app.
| | 01:58 |
If I click Flash Tab at the top, in Flash
CS5, setting the requirement to Flash
| | 02:04 |
Player 10 actually requires 10.1.
10.1 was the newest, until about a week
| | 02:12 |
ago, for me, was the newest Flash Player
out there.
| | 02:17 |
And 10.1 breaks a lot of barriers.
The newer Smartphones that are out there,
| | 02:22 |
like the Android, now play the Native
Flash.
| | 02:26 |
Older Smartphones required you to publish
in something called Flash Lite.
| | 02:31 |
That requirement, I do foresee in the
future, lightening up.
| | 02:36 |
You can also publish Adobe Integrated
Runtime or AIR, a self-contained running
| | 02:39 |
little program.
Or, native to the iPhone, IPA.
| | 02:46 |
If you're not sure what the end user may
have on their machine, you could make
| | 02:50 |
this more backward-compatible by setting
it to an older Flash Player.
| | 02:56 |
And if there's anything required that
won't work in the older player, Flash
| | 02:59 |
would've warned me immediately.
But most of my content, I set to the
| | 03:05 |
newest, and when I'm starting my
documents I'm using ActionScript 3.0,
| | 03:09 |
which is a bit more complex.
It was released with Creative Suite 3, so
| | 03:15 |
that does go quite a few versions back.
For the JPEG quality, you could set it to
| | 03:19 |
maximum, but you get a smaller file size
by leaving it between 60 and 80.
| | 03:25 |
JPEGs trash data, in order to get the
file size smaller, so you can turn on
| | 03:30 |
Enable JPEG Deblocking and it reduces
artifacts caused by the compression,
| | 03:36 |
large blocks of solid areas.
We don't have any sound in our movies
| | 03:42 |
yet, so the Audio Stream and Audio Event,
we don't need to set.
| | 03:46 |
I always leave Compress Movie on, and if
there are hidden layers, I want to make
| | 03:50 |
sure they're included.
Because hidden layers may be triggered to
| | 03:56 |
show on Mouseover Event, for example.
XMP Metadata stands for the Extensible
| | 04:02 |
Metadata Platform.
Metadata is extra data stored inside the
| | 04:07 |
file that makes your Flash movie more
searchable.
| | 04:12 |
So, if I hit File Info on the right, I
can actually put in some more descriptive
| | 04:18 |
information about the Flash movie.
I'll title this, Belly Coffee Company.
| | 04:27 |
The author would be me.
Insert your name here.
| | 04:34 |
I can put it in a title or description,
if you'd like.
| | 04:40 |
But I'll just copy this Belly Coffee
Company, animated, add, with a button.
| | 04:48 |
Good.
And I can put keywords.
| | 04:53 |
Keywords are grabbed by search engines to
make your movies show up at the top of a
| | 04:58 |
search result, whether it would be using
Google or Yahoo or any of your favorite
| | 05:02 |
search engine.
So, I might put Belly Coffee, Coffee,
| | 05:11 |
Coffee Company.
And you could separate those with
| | 05:16 |
semi-colons or commas.
I'm used to doing commas, so that's the
| | 05:20 |
one I decided to use.
This isn't copyrighted, so I can choose
| | 05:23 |
Public Domain.
If it was copyrighted, I could put a
| | 05:27 |
Copyright Notice and a URL for where it's
copyrighted.
| | 05:32 |
And that's about all I'll tour for right
now.
| | 05:35 |
So, I'll click OK.
And all of that information is now stored
| | 05:38 |
in the file.
If I want to see a size report where most
| | 05:42 |
of the assets are stored, for example,
how many bytes are the images taking up
| | 05:47 |
or the buttons or the text, I could turn
that on.
| | 05:53 |
I can actually protect my movie from
being imported somewhere else.
| | 05:58 |
I rarely do this, unless it's something
secure.
| | 06:00 |
And for the rest of this, I'll leave it
off.
| | 06:03 |
But if for some reason, you're doing a
government project that does have secure
| | 06:07 |
information, not for public release yet,
you can even make a password for the document.
| | 06:13 |
The last tab I want to cover is the HTML
tab.
| | 06:18 |
And the HTML tab has different templates
that you can allow.
| | 06:23 |
The default template is Flash Only.
And that's what I'm going to leave it on.
| | 06:26 |
But you could actually build a template
for secure work.
| | 06:29 |
For example, again, HTTPS is the
HyperText Transfer Protocol, but a secure
| | 06:35 |
web URL.
Again, for government work.
| | 06:38 |
I'm originally from Washington, DC and
used to training for the Bureau of
| | 06:41 |
Engraving and Printing, so I did have to
go through a background check just to get
| | 06:44 |
in the building.
And when I've trained at some government
| | 06:49 |
agencies, they don't even store at hard
drives.
| | 06:52 |
Everything's removable and nothing is
saved permanently on any piece of
| | 06:55 |
hardware there.
There is a few other like Allow Full
| | 06:58 |
Screen Access, and I'm not going to get into
too many details here because this is an
| | 07:02 |
introduction, so we'll leave that on a
Flash Only.
| | 07:07 |
One good thing you do want to turn on,
however, is Detect the Flash Version.
| | 07:12 |
Because if they're on a older version,
something prior to 10.1, you want to have
| | 07:16 |
the browser automatically detect that and
redirect them to Adobe.com where they can
| | 07:21 |
download the latest Flash Player.
One warning I'll give you.
| | 07:28 |
My mother inherits all of my old
computers and the last one she got, I
| | 07:31 |
guess, is probably is 6 years old, maybe
older.
| | 07:35 |
Her operating system is too old to
install the newest Flash Player.
| | 07:40 |
So, some of the Flash Videos that I post
on Facebook, she can't view.
| | 07:44 |
She has to go to my dad's PC in order to
see that.
| | 07:48 |
So, keep that in mind.
Some of your audience may just be stuck
| | 07:51 |
with very, very old equipment and may not
have access to your newer movies.
| | 07:55 |
When I get a chance to get out to
Florida, I can upgrade her operating
| | 07:59 |
system, and then she'll be able to play
it.
| | 08:02 |
But until then, she's kind of stuck.
(LAUGH) Now, the dimensions say Match Movie.
| | 08:09 |
But you can also override it and set it
to a specific amount of pixels.
| | 08:12 |
This is for the HTML page.
Usually, the Flash Movie is centered in
| | 08:16 |
that automatically.
For the HTML document, I can also say,
| | 08:20 |
take up 80% of their available screen.
And since most Flash content is vector,
| | 08:26 |
often your movies will scale.
But I leave it on Match Movie.
| | 08:32 |
If you haven't written action script, you
could actually have the movie be paused
| | 08:36 |
at start and use a play button.
However, a play button usually requires
| | 08:41 |
you to know action script.
If you don't want looping to happen and
| | 08:46 |
you also don't want learn the actions
script stop command, you can turn on or
| | 08:49 |
off Looping here.
And if, for some reason, you don't want to
| | 08:54 |
embed a type base that you've used in a
movie, you could choose Device Font.
| | 08:59 |
I almost never do that, although that
reduces the file size, it can radically
| | 09:03 |
change the appearance of your movie.
Quality of High, favors appearance over speed.
| | 09:12 |
And that's usually the best setting.
However, if you're audience is people who
| | 09:17 |
may all be dialing in from a slower
connection, you may want to lower your
| | 09:21 |
quality to Medium or Low.
But keep in mind, that will affect the
| | 09:26 |
appearance of your movie.
It would no longer do anti-aliasing or
| | 09:31 |
smoothing of the effects, and it favors
speed of loading the movie over the final appearance.
| | 09:39 |
You could set your HTML alignment default
as usually best, but you can fix it to
| | 09:43 |
anyone of the sides.
And you can choose whether you want to
| | 09:48 |
scale it or put a border or apply no
scale.
| | 09:52 |
Again, I leave it on the default.
And there's a Flash Alignment inside the
| | 09:57 |
HTML document.
So, I'm going to press Return or Enter.
| | 10:00 |
My OK button is a little bit below my
screen because of the resolution of my monitor.
| | 10:05 |
And that is your tour of the Publish
Settings.
| | 10:08 |
So, once you're finished, I'll choose
File, Publish, Flash creates the HTML
| | 10:14 |
document and I'll hop over to my
operating system, there's my HTML file.
| | 10:22 |
I double-click to open it up.
And if I want to view how this code was
| | 10:27 |
written, I can go to View and View
Source, and see what the options did in
| | 10:33 |
my published settings dialog.
So, it's technically embedding the SWF file.
| | 10:41 |
You don't need to worry about the rest of
this, but that's Flash Player detection.
| | 10:47 |
And then, here, down below, you've got
your warning and a redirect to where they
| | 10:54 |
can get the latest Flash Player.
| | 10:59 |
| | Collapse this transcript |
|
|
9. Adding Other Media to Your MoviesUsing sound in Flash movies| 00:00 |
All right.
Are you ready to make some noise?
| | 00:04 |
Well, add some noise or sounds to your
Flash movie.
| | 00:09 |
We're going to start by giving an overview
of a few of the built in sounds or taking
| | 00:13 |
a tour of the built in sounds that ship
with Flash to the common library.
| | 00:18 |
Before we do, Flash has several ways to
use sounds.
| | 00:23 |
A sound can play continuously,
independent of the timeline.
| | 00:27 |
It could be synchronized to play for a
certain length on the timeline and it can
| | 00:31 |
be attached to button events.
There are two types of sounds in Flash,
| | 00:37 |
event sounds which are often triggered by
buttons like a mouse over or on mouse
| | 00:42 |
down which would be a click.
The second type is a streaming sound.
| | 00:48 |
Streaming sounds are typically longer,
they may play for the length of the
| | 00:51 |
entire movie or be synchronized to the
timeline.
| | 00:55 |
Sounds can be added to movie clips and
buttons, but not to the simplest symbol
| | 01:01 |
type, which is Graphic symbol.
So if you make something a symbol, you
| | 01:06 |
have to choose movie clip in order to
attach a sound unless you're doing a
| | 01:10 |
button event.
So let's take a look at the free sounds
| | 01:14 |
that come with Flash.
Under the Window menu is common libraries
| | 01:19 |
and there is your sounds library.
I'm going to pull this up to the very top
| | 01:25 |
and stretch it so it's nice and long, so
I can see a full collection of the sounds.
| | 01:31 |
If I want to see their names, that are a
little bit chopped off, I can stretch the
| | 01:35 |
name column.
And if I want to preview a sound I can
| | 01:39 |
click on it, and in the upper right
corner of the sound common library, you
| | 01:44 |
can hit play.
| | 01:47 |
(sound playing)
| | 01:49 |
And I'll stop that.
I'll take a scroll down and there's a lot
| | 01:55 |
that are included, some pretty funny.
I'll click on it.
| | 02:00 |
(SOUNDLAUGHSOUND) All right, but I
think I'll use a giggle sound for this
| | 02:04 |
one, and this giggle sounds a bit like
Scooby Doo.
| | 02:08 |
(audio playing) All right, so what we're going to do
is select the image that I have on stage,
| | 02:15 |
on keyframe one and convert it to a
symbol.
| | 02:20 |
So I'll use modify convert to symbol.
It already is a movie clip.
| | 02:24 |
Be sure if you try this on your own you
aren't on graphic.
| | 02:28 |
I'll name this boy four and click OK.
I want to make the movie play for one
| | 02:35 |
second so I'll click on keyframe 24.
And Choose Insert > Timeline > Frame.
| | 02:43 |
Now I could take this sound, and watch
the library as I do it, and drag it
| | 02:48 |
directly onto the movie clip symbol.
And it plays on the same layer as this boy.
| | 02:56 |
But I'm going to undo.
I like to organize everything in layers,
| | 03:01 |
it's a good habit to get into.
So I'm going to make a new layer that
| | 03:06 |
contains the sound itself, and I'll name
that layer giggle.
| | 03:10 |
When I did the undo, the sound
disappeared from the library.
| | 03:15 |
Again, I'll take the sound and drag it
onto the stage.
| | 03:20 |
And now, it's on my new gigalayer.
To test the movie, I'll press Cmd return.
| | 03:27 |
(audio playing)
That's enough of that.
| | 03:30 |
Cmd return on the Mac, or Ctrl enter on
the PC.
| | 03:34 |
And to see the properties for the sound,
I can double-click.
| | 03:37 |
When I double-click, aim for this little
speaker icon, if you double-click on the
| | 03:41 |
name it lets you rename it in the
library.
| | 03:45 |
There are various compression options,
but the default is MP3, which is the most
| | 03:50 |
common and best for longer sounds.
ADPCM, was designed for short sounds, and
| | 03:58 |
P3 for a little bit longer, raw for
extremely short sounds, and speech for
| | 04:04 |
voice over.
I don't need to change it from default
| | 04:09 |
for now, but it does give me some
statistics and where it's loading it from.
| | 04:15 |
There is an application that ships with
the suite, depending on which one you
| | 04:18 |
buy, called Adobe Sound Booth, that you
can use to edit and clip together your sounds.
| | 04:24 |
But for now, we're just going to click OK
and use this built-in sound in Flash.
| | 04:29 |
The last thing I want to look at is the
properties inspector.
| | 04:33 |
And I'm going to double-click on this
keyframe span, to select the sound.
| | 04:39 |
You'll notice the sound name, and we have
some effect options.
| | 04:43 |
If someone's listening on a headset, you
could force out of one sound or the other.
| | 04:47 |
Left, or left to right, do some fun
stuff.
| | 04:51 |
I can also have it fade in or fade out.
I'll try a light fade in.
| | 04:56 |
And there are edits that you can make to
this but we're not going to at the moment.
| | 05:01 |
You could sync two events or you could
have it Start, stop or stream and you can
| | 05:05 |
have it repeat a certain number of times
or loop.
| | 05:10 |
It will automatically loop.
So again if I play this movie.
| | 05:14 |
(LAUGH) It's a little bit more subtle
from one repeat to the next.
| | 05:23 |
I could even drag in the timeline the
length down.
| | 05:29 |
And play again with Commander Turner Ctrl
enter.
| | 05:32 |
(audio playing) But it's still continuously
looping.
| | 05:38 |
So this is just a brief intro of what you
can do with built in sounds and some ways
| | 05:43 |
you might use sounds.
Give this a try with some of your own
| | 05:49 |
files or with our project file.
| | 05:53 |
| | Collapse this transcript |
| Importing sound into Flash movies| 00:00 |
In this video, we're going to cover
importing sounds.
| | 00:01 |
Sounds are stored in your movie once and
can be used many times.
| | 00:03 |
The importable sound types include .mp3,
which is very popular and probably the
| | 00:12 |
most frequent you'll run into.
.WAV, which is a wave file, and again,
| | 00:22 |
also very popular.
These used to be Windows only, but today,
| | 00:27 |
they're available for Windows and
Macintosh.
| | 00:30 |
.AIFF, which is Mac only.
.asnd, and that's the native Sound Booth format.
| | 00:38 |
I always remember it as "a sound." Sound
Booth ships with some of the Creative Suite.
| | 00:45 |
For example, the Master collection
includes everything, and with that, I
| | 00:48 |
have Adobe Sound Booth for editing my
sounds.
| | 00:53 |
Sound only Quick Time can also be
imported, and a format called .AU, which
| | 00:58 |
was developed by Sun Microsystems.
So let's start by previewing this movie,
| | 01:04 |
I'm going to press Cmd+Return or Ctrl+Enter,
and you'll see my little boy all airborn.
| | 01:11 |
and it fades into three different
pictures using an Alpha effect.
| | 01:17 |
What I'd like is companion music to go
along with this.
| | 01:20 |
So, I've selected some classical music
from Bach.
| | 01:24 |
And this is the last one, it's starting
over, so let's close it.
| | 01:28 |
click on keyframe 24, and before I do
it's a good idea to always organize your
| | 01:32 |
assets into layers.
So let's make a new layer.
| | 01:41 |
And I'll double-click on the layer name
and name it Bach.
| | 01:45 |
Now I'll click on keyframe 24...
And I'll choose file, import to library.
| | 01:54 |
And grab my bach.mp3 sound.
You'll notice, in the library, there's my
| | 02:01 |
new sound.
I can preview it here.
| | 02:06 |
(music playing)
But I'm ready to add it to the movie.
| | 02:10 |
Before I add it I want to make sure it
starts at one second in and that's why I
| | 02:14 |
clicked on Key frame 24.
If I were to just drag it over, it would
| | 02:19 |
start at the very beginning.
So let's insert timeline, keyframe, as a
| | 02:23 |
place holder for where the sound should
start.
| | 02:29 |
I'll drag and drop the sound onto the
stage, and it looks tiny to begin with.
| | 02:34 |
But now, when I hit command return or
control enter.
| | 02:37 |
(music playing)
It came in after one second.
| | 02:45 |
Now you can't trigger it to stop also
before the movie ends.
| | 02:50 |
Its about an 18 second movie and when you
click on the timeline in different spots
| | 02:56 |
you'll see where you are.
So I'm going to click on keyframe 409.
| | 03:03 |
Which is 17 seconds into the movie and
again, Insert > Timeline > Keyframe.
| | 03:10 |
Now, here I can select from the
Properties the sound to get and, once I
| | 03:16 |
select the sound, I can tell it To add an
effect like fade-in or fade-out or to
| | 03:22 |
sync triggering a start or a stop.
In this case we'll use a stop.
| | 03:31 |
So let's preview again.
Command return or Control enter.
| | 03:35 |
(music playing)
| | 03:52 |
And it stops very abruptly and then
starts over.
| | 03:55 |
So I could apply a fade in or fade out
effect as well by selecting the sound on
| | 04:01 |
the timeline, and under effect, fade out.
So let's try it one last time.
| | 04:09 |
(music playing)
| | 04:13 |
And there we have it.
So give this some practice on your own.
| | 04:32 |
And I hope you enjoy importing your
sounds into Flash movies.
| | 04:39 |
| | Collapse this transcript |
| Adding sounds to a button| 00:00 |
In this video, we're to explore adding
sound to a button.
| | 00:06 |
On the stage, I have a button that I
pulled from the common library and instructions.
| | 00:11 |
We're going to make a giggle sound like
we're tickling the button as the user
| | 00:15 |
mouses over.
It won't stop without an action script on
| | 00:19 |
mouse over and on mouse out even.
So, to avoid writing action script, we're
| | 00:25 |
just going to tell it to stop when they
click.
| | 00:28 |
If I preview the movie right now with
Cmd+Return on the Mac or Ctrl+Enter on
| | 00:32 |
the PC, the rollover is working but
there's no sound triggered yet.
| | 00:38 |
So, let's add that.
I'll close the preview and I'll
| | 00:42 |
double-click the button.
And in the button you can see are up,
| | 00:46 |
over, down and hit states.
I like to go to the top layer so that
| | 00:51 |
when I add a new layer it goes above.
And I'll name this layer tickle.
| | 00:57 |
I want the giggling sound when the user
mouses over, which it, we're going to
| | 01:02 |
pretend is tickling the button, to happen
in the over state.
| | 01:08 |
So, I click in over.
Insert > Timeline > Keyframe.
| | 01:14 |
I'll bring up our common library sounds.
So, Window > Common Libraries > Sounds.
| | 01:23 |
And I'll pull this up and stretch it a
bit.
| | 01:25 |
We're looking for the human female
laughing.
| | 01:29 |
I can preview it if I'd like by clicking
Play.
| | 01:36 |
(LAUGH)
And she goes on for awhile.
| | 01:40 |
So, we're going to drag that onto the stage,
which will add it to the over state.
| | 01:49 |
But you'll notice it's also populated the
down and the hit state.
| | 01:52 |
I'm going to put a stop on the down state.
That's when the user clicks their mouse.
| | 01:58 |
So, I'll click in the down state, and
choose Insert > Timeline > Keyframe.
| | 02:06 |
In the Properties inspector, I'll choose
the same sound again.
| | 02:10 |
And on the event, I want to sync to, I want
it to stop the playing of the sound.
| | 02:18 |
If you don't do that, there's nothing to
stop it without writing an action script.
| | 02:23 |
So, lets close the library.
Let's exist out of our button editing mode
| | 02:28 |
and lets press Cmd+Return or Ctrl+Enter
to play.
| | 02:33 |
(LAUGH)
| | 02:36 |
Notice the sound did not stop because I
haven't clicked.
| | 02:44 |
So, I'll mouse over again, she starts
over but when I click it stops for good.
| | 02:50 |
So that is your tour of adding sound to a
button.
| | 02:54 |
Give it a try on your own.
| | 02:58 |
| | Collapse this transcript |
|
|
