IntroductionWelcome| 00:04 | Hi! I am Anastasia McCune and welcome to
Up and Running with Flash Professional.
| | 00:09 | In this course we'll start with a blank
slate and go through the fundamentals of
| | 00:12 | creating a simple yet effective Flash project.
| | 00:16 | I'll start by showing you how to
navigate around Flash and utilize parts of the
| | 00:20 | workspace like the Stage, Library, and Timeline.
| | 00:23 | Then I'll show you how to import
artwork into Flash as well as create your own
| | 00:27 | using some of the drawing tools.
| | 00:29 | I'll show you how to create simple
animation by using Motion and Shape tweens.
| | 00:34 | We'll also see how to incorporate audio
and video as well as interactive control
| | 00:39 | using items like buttons
and simple ActionScript.
| | 00:42 | We'll be covering all these features
plus plenty of other tools and techniques.
| | 00:46 | So let's get up and
running with Flash Professional.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a premium member of the lynda.com
Online Training Library, or if you're
| | 00:05 | watching this tutorial on a DVD-ROM,
you have access to the Exercise Files used
| | 00:09 | throughout this title.
| | 00:11 | Many of the exercises in the course
builds on previous lessons, but some do not.
| | 00:16 | In both cases there is a folder for
each unit of the course where we're
| | 00:19 | building something.
| | 00:21 | Inside each folder is a start
folder and then an end folder.
| | 00:25 | The start folder shows what the project
looks like at the start of that tutorial
| | 00:29 | and provides any additional assets you may need.
| | 00:32 | The end folder shows what the end state
of the project looks like if you follow
| | 00:36 | all of the steps that I show you.
| | 00:38 | If you're a monthly member or an
annual member of lynda.com, you don't have
| | 00:42 | access to the Exercise Files, but you can
follow along from scratch with your own assets.
| | 00:47 | I'm ready to go, so if you
are too, let's get started.
| | Collapse this transcript |
| Viewing the finished project| 00:00 | For this course much of our activity is
going to be building towards the final
| | 00:03 | piece, let's take a look at that piece now.
| | 00:06 | Find fastCar.swf in the
Exercise Files for this chapter.
| | 00:11 | To prepare you ahead of time there will
be a four second introductory scene with
| | 00:15 | an animated title and a lady in a
red car inspired by a famous 1960s song.
| | 00:20 | Be prepared for some sound right off the bat and
now I'll double-click to open.
| | 00:24 | (video playing)
| | 00:28 | After the initial four seconds we come
to another scene where the lady in the
| | 00:31 | car drives from right to left.
| | 00:33 | When she's done crossing the screen
she starts over. You'll see, of course, the
| | 00:37 | text on the upper left
that loops as she drives by.
| | 00:40 | Notice also the sun in the upper right-hand
corner, the yellow points on the sun
| | 00:44 | slowly grow and shrink.
| | 00:46 | The buttons across the bottom do just
what they say. When you click "stop," the
| | 00:50 | car stops and honks.
(video playing)
| | 00:54 | When you click "go," the car starts up
again with tires squealing.
| | 00:57 | (video playing)
| | 01:00 | "Start over" has the lady rewinding to
the right side of the screen and the text
| | 01:05 | returning to the first phrase in the sequence.
| | 01:10 | Finally when you click "buy action
figure," Amazon.com opens up in a Browser
| | 01:14 | window, so you can buy a lady
and the car of your very own.
| | 01:19 | Except not quite. You'll probably get
this security setting warning, this is
| | 01:23 | expected and we have to adjust some
security settings to get rid of this.
| | 01:29 | To build this project we'll introduce a
wide range of Flash fundamental skills
| | 01:33 | that you'll use over-and-over
in your Flash career.
| | 01:35 | We'll also build some other smaller
files that aren't related to this car
| | 01:39 | project to demonstrate
additional topics like video.
| | 01:42 | So sit back and let's get started.
| | Collapse this transcript |
| Setting up local file permissions for Flash Player| 00:00 | When using the Exercise Files for this
course, or when developing and testing
| | 00:04 | your own projects, you may run into
some issues with the Flash security.
| | 00:08 | Flash player doesn't like it when
Flash files on your local hard drive try to
| | 00:12 | communicate with the Internet.
| | 00:13 | While this helps prevent personal
data from your computer being transmitted
| | 00:18 | without your consent, it can really
get in the way when you're testing
| | 00:21 | Flash applications.
| | 00:22 | The best way to get around this is to
specifically tell your Flash Player which
| | 00:26 | files on your local computer you trust.
| | 00:29 | This is done in the Flash Player
Settings Manager, which you can access
| | 00:33 | whenever the Flash player sees a local Flash
file trying to communicate with the Internet.
| | 00:38 | To adjust the settings for this
course, I'm going to open the file called
| | 00:42 | fastCar.swf movie in the Exercise
Files for this chapter.
| | 00:46 | (video playing)
| | 00:51 | When I click on "buy action figure," I get
a dialog box telling me Flash Player has
| | 00:56 | stopped a potentially unsafe operation.
| | 00:58 | What we need to do is add the
location of our exercise files to our list
| | 01:02 | of trusted locations.
| | 01:04 | This will tell Flash Player these
files are okay and allow us to test without
| | 01:08 | giving a security error.
| | 01:10 | To do this I'm going to click Settings.
| | 01:12 | I'm using Flash CS 5.5 and the
interface for the process looks a little
| | 01:16 | different from here on out with
previous versions of Flash, but if you follow
| | 01:20 | along in this tutorial you'll see what
we're trying to accomplish and can likely
| | 01:24 | figure it out for your version of Flash.
| | 01:26 | Clicking on Settings brings up
the Flash Player Settings Manager.
| | 01:30 | Here I'm going to click on the
Advanced tab and then click the Trusted
| | 01:33 | Location Settings button.
| | 01:35 | On the resulting screen I'm going to
choose to Add and we'll choose Add Folder
| | 01:39 | as we want to add all the
exercise files for the course.
| | 01:43 | Adding the whole folder will tell
Flash Player that we trust all the
| | 01:46 | files inside the folder.
| | 01:48 | So browse to the location where you've
downloaded your exercise files, I have
| | 01:51 | mine here on my Desktop,
select the folder and click Confirm.
| | 01:57 | As you can see that folder has been
added to our trusted locations and now
| | 02:01 | you'll be able to test the exercise
files locally without running into
| | 02:04 | security errors.
| | Collapse this transcript |
|
|
1. The Basics of FlashIntroducing the Flash application and Flash movies| 00:00 | People throw the term Flash around a
lot which makes sense as Flash is used in
| | 00:05 | so many places in the digital world.
| | 00:07 | However, there are some important
distinctions to understand between Flash, the
| | 00:10 | authoring tool, and the
end products it can create.
| | 00:14 | Let's take a look at those differences now
so you can speak with authority about it.
| | 00:18 | Let's first talk about
Flash, the authoring tool.
| | 00:20 | This is of course a piece of software
that you purchase and install on your
| | 00:23 | computer, and is what you're
watching this course to find out about.
| | 00:27 | Here on my screen I've already got the
Flash software opened and it is showing
| | 00:30 | what's called the Start Page.
| | 00:32 | I'm going to create a new Flash document
as if I was going to build a project by
| | 00:36 | clicking on ActionScript 3.0.
| | 00:38 | Don't worry about the
other types of documents there;
| | 00:40 | we'll go over them later.
| | 00:42 | For now, click on ActionScript 3.0
and Flash opens up a new blank document.
| | 00:47 | So this will be our source Flash file.
| | 00:49 | This is our authoring document where
we'll create all of our content and animation.
| | 00:54 | In Flash, the source
document has an extension of .fla.
| | 00:58 | So if you go to File, and then
Save As, you can save your document.
| | 01:02 | I'll give mine the name of Test,
and of course now, we have test.fla.
| | 01:08 | So let's say we've added all our nifty
content here, and it's zooming around,
| | 01:11 | and we want to test it out.
| | 01:13 | If you hit Command or Ctrl+Enter on your
keyboard, Flash publishes your FLA file
| | 01:18 | into a format ready for the world.
| | 01:20 | Of course, there's not much to see in
our blank file, but at least we have our
| | 01:23 | published file called test.swf or Swiff;
| | 01:28 | SWF stands for Shockwave Flash,
Shockwave being a name from kind of the early
| | 01:32 | history of the Flash program.
| | 01:34 | You can publish your SWF file as much
as you want as you develop your project
| | 01:37 | for testing and preview purposes.
| | 01:39 | When you're ready to deploy it to a
website, the final SWF file is the actual
| | 01:44 | thing that you would upload onto your server.
| | 01:46 | We'll talk more about how you actually
embed your SWF file into an HTML in the
| | 01:50 | section about publishing.
| | 01:52 | But, for now, conceptually, now we've
jumped from Flash, the authoring tool, to
| | 01:56 | Flash, the SWF file, which is what you
deploy onto the Web or into the world
| | 02:00 | for users to look at.
| | 02:01 | So, say your SWF file is up on your
website for someone to actually be able to
| | 02:05 | view the SWF on their computer in a
browser on the Web, their browser has to
| | 02:09 | have the Flash Player plugin installed.
| | 02:11 | The SWF file won't play in a
browser unless the plugin is installed.
| | 02:15 | One really nice thing is that for most
people, they already have some version of
| | 02:19 | the Flash Player installed.
| | 02:21 | It's come bundled with
Internet Explorer for years.
| | 02:23 | I'll prove to you that most people
already have the Flash Player, look at
| | 02:27 | this page on adobe.com.
| | 02:29 | You can take some time to look over
these charts, but the thing I want to point
| | 02:32 | out here quickly is how Flash
Player 10 as of June 2011 was on 98.7% of
| | 02:39 | computers in mature markets.
| | 02:41 | You can also see how newer versions of the
player are adopted pretty quickly over time.
| | 02:45 | For instance, version 10.2 had 45.8%
adoption in March 2011, and by June was up to 77.8%.
| | 02:54 | This is a big advantage, since you know
that your content is going to be able to
| | 02:58 | be viewed by a lot of people.
| | 03:00 | Have you ever viewed a website and seen
a message telling you that you need the
| | 03:03 | most recent version of the
Flash Player to view the content?
| | 03:06 | This and other methods are how the most
updated versions of the player get adopted.
| | 03:11 | So you as the developer can choose what
version of the Flash Player you want to
| | 03:15 | target when publishing your SWF,
and you should research your audience.
| | 03:18 | For instance, if your audience is a
group within a corporation that has a
| | 03:22 | tightly controlled IT environment, you
might not want to choose the very latest
| | 03:26 | version of the player.
| | 03:27 | You should choose whatever
version the company is using.
| | 03:29 | There's nothing wrong with targeting a
slightly older version of the player to
| | 03:33 | best suit your audience.
| | 03:34 | Another reason Flash is a good choice
for delivering content on the Web is that
| | 03:38 | Flash content looks the
same across all browsers.
| | 03:42 | Have you ever built something in HTML,
tested it in Internet Explorer, Firefox,
| | 03:46 | and Safari, and noticed that it looks
different across all three browsers?
| | 03:50 | That doesn't happen with Flash.
| | 03:52 | You aren't targeting a browser with
your SWF, you're targeting the player.
| | 03:55 | And as long as someone has the Flash Player
installed, your content is going to look good.
| | 03:59 | This is one reason Flash content is
deployed in so many places across the Web.
| | 04:04 | Flash makes it really easy for video to go
on the Web, and look good on all browsers.
| | 04:08 | And if you go to YouTube, pick any
video, and right-click on the video.
| | 04:12 | You'll see right there, you have the
option to see about the Flash 10.2 Player.
| | 04:17 | Content in the Flash Player always has
that little About the Flash Player option
| | 04:21 | when you right-click on it.
| | 04:23 | You may or may not have all the other
options shown here, but you'll always
| | 04:26 | have those bottom three;
| | 04:27 | Settings, Global Settings, and About
Adobe Flash Player 10.2. So you might be
| | 04:32 | thinking, okay, great!
| | 04:33 | This is true for the Web when you're
looking at a Flash SWF file from a computer
| | 04:37 | with a browser, but how
about mobile and tablets?
| | 04:40 | If you're an Android user, you're
pretty much okay, but if you have an iPhone,
| | 04:44 | you've probably noticed that Flash
content doesn't play through a Web browser.
| | 04:48 | This is more of a policy decision than
a technological limitation, but the fact
| | 04:52 | is that if you want to build for users,
purely on a mobile platform, you should
| | 04:55 | consider that, and maybe even
use something else besides Flash.
| | 04:58 | That being said, let's make a distinction here.
| | 05:01 | Say you've used your iPhone to buy an
app from the Apple App Store. The content
| | 05:05 | very well could have been
developed and deployed in Flash.
| | 05:08 | But, this isn't a SWF like viewed
through a Web browser, this Flash content is
| | 05:12 | being published through the Adobe AIR platform.
| | 05:15 | If you want to publish a straight SWF
file to be viewed on the Web through the
| | 05:18 | browser, this video training is
the right place to be to learn the
| | 05:21 | fundamentals of Flash.
| | 05:22 | If you want to build things that will
ultimately deploy an AIR project, maybe
| | 05:26 | as an app to be sold in the Android
or Apple stores or a program you want
| | 05:29 | people to be able to physically install in
their computer, this is also a good place to be.
| | 05:33 | The fundamentals of authoring in Flash
presented here pertain in both cases.
| | 05:38 | That being said, also note that there
are other courses here in the lynda.com
| | 05:41 | Online Training Library that focus
specifically on AIR and developing Flash for
| | 05:46 | mobile in particular to
help you with those topics.
| | 05:49 | So with that, I think we're ready to
move on with our journey with Flash.
| | Collapse this transcript |
| Using Flash instead of HTML to build a web presence| 00:00 | Flash and HTML are both powerful
tools for building a web presence.
| | 00:04 | They can work independently or together,
so let's take a look at how they interact.
| | 00:09 | In my Exercise Files, I've opened up the
file called fastLittleCars.html in a browser.
| | 00:15 | It's a very simple webpage for the
fictional website Fast Little Cars.com.
| | 00:19 | As you can see, it's just got a header
image, some fake navigation links on the
| | 00:23 | left, and some text.
| | 00:25 | Now, let's say I want to add a Flash
piece to my website, maybe an animation, a
| | 00:29 | game or something else pertinent to my site.
| | 00:31 | Let's say we want to add the completed
version of the project for this course;
| | 00:35 | the piece called Fast Car that has a little
old lady driving a red car to the webpage.
| | 00:40 | As I just showed you in the previous
movie, the final published output from
| | 00:44 | Flash is a SWF file.
| | 00:45 | To have the Flash SWF appear on my page, I have
to embed the SWF into my HTML.
| | 00:51 | (video playing)
| | 00:56 | And if you open up fastLittleCarsWithFlash.
html, you can see that's exactly what we've got.
| | 01:02 | We have our original HTML page, but
this time with the fastCar.swf Flash
| | 01:06 | file embedded within it.
| | 01:08 | The embedding is achieved through
some special HTML code that points the
| | 01:12 | HTML file to the SWF.
| | 01:14 | In this case, looking at our folder
structure of our computer, we can see that
| | 01:17 | the SWF file is in the same
directory as the HTML file.
| | 01:21 | Your SWF and HTML files can be in
different directories as long as you give the
| | 01:25 | HTML embedding code the correct path to the SWF.
| | 01:28 | Flash can generate the embedding code
for you and we'll look at how to do that
| | 01:32 | in the section about publishing.
| | 01:33 | For now, it's enough to know that it's
common for websites to be built mostly in
| | 01:37 | HTML or as PHP pages or ASP pages or
whatever, and have Flash SWFs embedded in
| | 01:43 | one or multiple spots throughout, as appropriate.
| | 01:46 | In this case, it's easy to
tell the borders of the SWF file.
| | 01:48 | But remember, you can always find out
if a piece of content on a page is Flash
| | 01:53 | by right-clicking on it.
| | 01:54 | If you see the words About Adobe Flash
Player and then the version number, you
| | 01:58 | know you're looking at something that's Flash.
| | 02:00 | Surely, you've seen some sites
that are built totally in Flash.
| | 02:03 | They are not that different
than what we've just seen.
| | 02:05 | We're still embedding a SWF onto an HTML page.
| | 02:08 | For example, if you open up flashVersion.html
from your Exercise Files, you'll
| | 02:14 | see pretty much the same
website we saw as before.
| | 02:16 | The only difference is that this time,
the HTML exists simply to embed the Flash
| | 02:21 | file called FlashVersion.swf.
| | 02:22 | The SWF has a very large visual
dimension, all the content that appeared as
| | 02:27 | HTML before is now part of the SWF file, and
we had a few extra zooming effects going on too.
| | 02:32 | The background color of
the HTML has been changed.
| | 02:34 | So you can see the edges of the
white SWF, but clearly, all of the site's
| | 02:38 | content is contained in the SWF.
| | 02:40 | Now, it wouldn't provide much of an
advantage to build a simple text heavy site
| | 02:44 | in Flash if something like animation
isn't going to be part of the picture.
| | 02:48 | Likewise, a site needing to show
animation or a neat interface for maybe a video
| | 02:52 | player, might be really well-
suited to be part, or all Flash.
| | 02:56 | There is no right or wrong regarding
if you build your site as all HTML,
| | 02:59 | all Flash, or a hybrid.
| | 03:01 | You should pick what makes the most
sense for you considering things like what
| | 03:05 | your project needs to convey, who will
be maintaining the site, and what skills
| | 03:08 | they have and so on.
| | 03:10 | So Flash and HTML can interact
as much or as little as you wish.
| | 03:14 | Your entire site can be made in
Flash or your site can be HTML-based with
| | 03:18 | smaller Flash pieces embedded within it.
| | 03:20 | The easy part is writing the embed code
for your HTML, because Flash can do that
| | 03:25 | for you when you create the SWF.
| | 03:26 | Most of your time will be
spent developing your content.
| | 03:29 | So let's get started with that.
| | Collapse this transcript |
| Understanding how ActionScript fits into Flash| 00:00 | You've probably heard that
ActionScript is an important component of Flash.
| | 00:04 | It is, but I'm here to tell you
that you don't need to know a lot of
| | 00:07 | ActionScript to be able to create
some pretty cool functional Flash pieces.
| | 00:12 | However, it won't take long until you get to
the point where you do need to know a few things.
| | 00:15 | So we'll cover some very
basic ActionScript in this course.
| | 00:18 | Let's take a quick look at some common
places were ActionScript is used to get
| | 00:22 | an idea of how it will fit into our learning.
| | 00:25 | Let's start with some places
where you don't need ActionScript.
| | 00:28 | If you open the file called
noActionScript.swf in your Exercise files, you'll
| | 00:33 | see images and text from our Uncle
Chris' vacation, simply appearing and then
| | 00:37 | disappearing on the screen.
| | 00:39 | You just place those images on what's
called the stage in Flash and they appear.
| | 00:42 | No ActionScript is required.
| | 00:44 | Similarly, animation
doesn't require ActionScript.
| | 00:47 | Now, I'm going to open
alsoNoActionScript.swf from our Exercise files.
| | 00:53 | The simple motion of the rocket going
across the screen, and the moon rising
| | 00:56 | requires no ActionScript.
| | 00:58 | Even the simple syncing of the Moon's
mouth with the words is created on what's
| | 01:02 | called the timeline, without ActionScript again.
| | 01:05 | Now, I'm going to open lynda_biker_banner.swf.
| | 01:10 | The animation in this piece is more
complex and very nice with the motion of the
| | 01:14 | biker's legs, her hair blowing in the
wind, and the changing perspective of the
| | 01:17 | bridge and landscape as she rides.
| | 01:19 | But again, none of that was ActionScript-based.
| | 01:22 | It's all just well-done graphics,
animated on the Flash timeline.
| | 01:25 | needsActionScript.swf shows some common
things that need ActionScript to work.
| | 01:30 | For instance, a button responding, the
Click Me button can be on the screen, but
| | 01:35 | without ActionScript, nothing
actually happens when you push it.
| | 01:38 | In this case, ActionScript is
listening for the button to be pushed.
| | 01:42 | When it is, it displays the
rocket in response to the click.
| | 01:45 | Opening a new window in response to
user action also needs ActionScript, just
| | 01:49 | like when I click the Shop Now button.
| | 01:52 | Now, if you get a warning when you click
the Shop Now button, you need to adjust
| | 01:56 | your security settings which we
talk about in a previous movie.
| | 01:59 | Counting and math also uses ActionScript.
| | 02:01 | You can see that the left box is
perpetually counting upward and the right box
| | 02:05 | is perpetually adding 1 to
the value in the left box.
| | 02:08 | Actually, outputting those
numerical values to the screen also
| | 02:12 | requires ActionScript.
| | 02:13 | Our last example shows taking in user
input, again in the form of a button click.
| | 02:18 | But, we could also ask for someone to
input their name, number, or email address
| | 02:21 | for use in our application.
| | 02:23 | So if I click Yes, I ate my
dinner, I get to have some dessert.
| | 02:26 | If I say No, I didn't eat my
dinner, I have to eat five more bites.
| | 02:30 | So you can see that getting to the
point of needing ActionScript will likely
| | 02:34 | come relatively soon for you.
| | 02:35 | As soon as you want the user to be
able to interact with your movie, not just
| | 02:39 | watch it, you need script.
| | 02:41 | There's a great tool in
Flash called Code Snippets.
| | 02:43 | It writes ActionScript for you and it's
a great place to start learning and is
| | 02:47 | what we will be using in this course.
| | Collapse this transcript |
|
|
2. Introducing the WorkspaceChoosing the type of document to work with| 00:00 | So we're ready to start working in Flash.
| | 00:02 | I've already launched Flash and we're
looking at what's called the Start Screen.
| | 00:06 | Right here in the center of this screen
is where we create new blank Flash files.
| | 00:10 | It might look kind of confusing at
first because you're presented with what
| | 00:13 | looks like a bunch of different kinds
of files to choose from, but they're
| | 00:17 | really not that different at all.
| | 00:18 | Regardless of which option you choose,
you're going to end up with a new blank
| | 00:23 | unnamed source.fla document.
| | 00:25 | The only real difference between
these choices is having Flash set up some
| | 00:28 | options about the final outputted SWF for you.
| | 00:32 | I'll demonstrate this by choosing
the first option at the top that
| | 00:34 | says ActionScript 3.0.
| | 00:37 | Our new document is created, and right-
away let's go to the File menu and scroll
| | 00:41 | down to select Publish Settings.
| | 00:43 | The Publish Settings dialog box appears
and here on this first screen we can see
| | 00:48 | that when the FLA is published it
will create a SWF file and an HTML file,
| | 00:52 | because both of those boxes are checked.
| | 00:54 | You can switch back and forth between the
settings for these two by clicking on the title.
| | 00:59 | I'm using Flash CS 5.5, and this
interface looks a little bit different from
| | 01:03 | previous versions of Flash, but you can
still switch back and forth between the
| | 01:07 | different screens for the
different type of output files.
| | 01:10 | On the SWF screen, here at the top,
you can see that the final outputted SWF
| | 01:14 | will target Flash Player 10.2 for
the player and use ActionScript 3.0.
| | 01:19 | You can open up the Player
dropdown to see the other options.
| | 01:22 | You could target your SWF to play on
older versions of the Flash Player if you
| | 01:26 | wanted, Adobe AIR, iOS, Flash
Lite, and some other options.
| | 01:30 | Flash Lite is a special kind
of player for mobile devices.
| | 01:33 | Likewise, if you pull down the
Script dropdown you can see that you could
| | 01:37 | specify that your SWF is going
to use ActionScript 1, 2 or 3.
| | 01:41 | Even if you never write a single line
of ActionScript code in your project, you
| | 01:45 | still have to tell Flash what
version of ActionScript you want to target.
| | 01:48 | Now I'm going to hit Cancel to close
the Publish Settings box and close out of
| | 01:52 | this document to return to the start page.
| | 01:54 | This time I'm going to click on
ActionScript 2.0 to open a blank document.
| | 01:59 | Let's once again go to the File
menu and then choose Publish Settings.
| | 02:03 | On the Flash screen you can see that
this time our Publish SWF is going to
| | 02:07 | target Flash Player 10.2 but this time
use ActionScript 2.0 instead of 3.0, and
| | 02:13 | really that's the only difference
between this blank file and the one we
| | 02:16 | created just a moment ago.
| | 02:18 | Flash is just setting these
options for you ahead of time.
| | 02:21 | Let's go ahead and get back to the start page.
| | 02:24 | The next option is for Adobe AIR,
iPhone OS, and Flash Lite are similar to
| | 02:29 | what we've already seen.
| | 02:30 | You get a blank FLA document and
then the appropriate settings are
| | 02:33 | pre-selected for you.
| | 02:35 | The choice out of all these that
you likely use the most, especially if
| | 02:38 | developing for the Web is ActionScript 3.0.
| | 02:41 | Regarding ActionScripts 2 versus 3; you
probably wouldn't want to use anything
| | 02:46 | other than ActionScript 3 since it's
the most recent and robust version of
| | 02:50 | ActionScript unless you have a specific reason.
| | 02:52 | For instance, if you're updating or
working with an older Flash piece that was
| | 02:56 | built-in ActionScript 2, you'd probably
just want to stick with ActionScript 2.
| | 03:00 | ActionScript 2 and 3 can talk to each
other but they are different in some
| | 03:04 | significant ways and it's not exactly easy.
| | 03:07 | For any new kind of project you're
building from scratch ActionScript 3 is
| | 03:11 | what you should choose.
| | 03:12 | Let's click on the choice of
ActionScript file this opens another blank document.
| | 03:17 | And if you go to File and Save As
you'll see that instead of being a .FLA this
| | 03:22 | is a .AS file, the AS stands for ActionScript.
| | 03:26 | This is an external ActionScript file.
| | 03:29 | Using external ActionScript files
is probably not something you'll work
| | 03:32 | with until you become proficient with
ActionScript, so let's just close this document.
| | 03:37 | The same could be said for the Flash
JavaScript, ActionScript 3.0 Class and
| | 03:41 | ActionScript 3.0 interface choices.
| | 03:44 | You probably won't use them until
you're proficient with ActionScript.
| | 03:47 | If you've programmed in other languages
like C++ or Java before, you'll be glad
| | 03:51 | to know that ActionScript is also
a robust object-oriented language.
| | 03:55 | Everything else on the start page
here is mostly for your reference.
| | 03:59 | The choices down in the right-hand
side lead to tutorials and help articles
| | 04:02 | about various topics in Flash.
| | 04:04 | The lower-left shows a clickable
history of FLA files that you've worked on and
| | 04:08 | the templates are just like they sound,
simple templates for different types of
| | 04:12 | commonly built projects.
| | 04:14 | Picking them apart can be a good way
to pick up new ideas on how to construct
| | 04:18 | things in Flash, especially the ones in
the Animation and Sample Files sections.
| | 04:22 | That's all for now, but we've seen
pretty much all the possible starting points
| | 04:26 | for starting a Flash project.
| | 04:27 | We've also seen where to access the
Publish Settings for a project if you need
| | 04:31 | to change what player or version of
ActionScript you're targeting down the line.
| | Collapse this transcript |
| Understanding document settings and orientation| 00:00 | Let's start getting familiar
with the workspace in Flash.
| | 00:03 | So I'm going to start by opening up a
blank ActionScript 3.0 document and taking
| | 00:08 | a look at a few important settings.
| | 00:10 | The first thing you probably notice in your
screen is the big blank rectangle in the middle.
| | 00:14 | In Flash, this is known as the stage,
and this is where you will place all your
| | 00:17 | content for your Flash movie.
| | 00:19 | You can place content on the
screen, but off the stage if you wish.
| | 00:22 | The area around the stage is known as
the pasteboard, and for an example, I'm
| | 00:26 | going to select my Rectangle Tool and
quickly draw a rectangle half on the stage
| | 00:30 | and half on the pasteboard.
| | 00:32 | To preview your SWF file, press Command
or Ctrl and then enter on your keyboard;
| | 00:37 | this way you can preview what the
finished product would look like, and as you
| | 00:40 | can see, we only see half of the rectangle.
| | 00:42 | So while it's okay to put things onto
the pasteboard, if you want your content
| | 00:46 | to appear in your final finished
SWF file, it has to be on the stage.
| | 00:50 | Starting visual objects off-screen on
the pasteboard can be a good way to create
| | 00:54 | an effect like a car driving on screen.
| | 00:56 | I am going to close the SWF file.
| | 00:58 | There are a few ways to
zoom in and out on the stage;
| | 01:01 | I'd like to use hotkeys to zoom in and out.
| | 01:03 | Press Command or Ctrl and then the plus
sign (+) at the same time to zoom in and
| | 01:08 | then Command or Ctrl and then
the minus sign (-) to zoom out.
| | 01:11 | Another good option for zooming is the
handy Zoom Tool over on your toolbar.
| | 01:15 | Once you've selected the tool, near
the bottom in the Options area, you can
| | 01:19 | choose Enlarge to zoom in or Reduce to zoom out.
| | 01:22 | I'm going to choose Enlarge again and
note that you can also click and drag
| | 01:27 | to zoom in on a particular spot in the
stage so you can work in detail on your content.
| | 01:31 | Finally, you can use the Zoom
dropdown menu on the upper-right to choose a
| | 01:36 | percentage to zoom in or out, too.
| | 01:38 | Notice also that you have little scroll
handles to scroll right and left or up
| | 01:42 | and down, if you need to re-center your
imagery after you've zoomed in and out.
| | 01:46 | Show Frame under the dropdown
menu up top is also a good one for
| | 01:49 | easily re-centering.
| | 01:51 | Another way to easily move around to
different parts of your stage is by
| | 01:54 | using the Hand tool.
| | 01:56 | Just grab the Hand tool from the toolbar and
then click and drag the stage to move it around.
| | 02:00 | You can see that I'm not moving my rectangle;
| | 02:02 | I'm just moving my view of the stage.
| | 02:04 | If you like the Hand tool as a way
to move things around, you might like
| | 02:08 | this keyboard shortcut.
| | 02:09 | Make sure you've selected your
Selection tool or the Arrow tool, and then with
| | 02:13 | the arrow over the stage press
the Spacebar on the keyboard.
| | 02:16 | As long as you've got the Spacebar
press down, the Hand tool will be activated.
| | 02:20 | Rulers are a super useful tool you've
probably seen in other softwares and
| | 02:23 | Flash has them too.
| | 02:25 | To turn the Rulers on, go to
the View menu and choose Rulers.
| | 02:29 | You'll notice that the increment on the
Ruler is pixels and the origin point for
| | 02:33 | this stage is measured from
the upper left-hand corner.
| | 02:35 | In Flash, the x-axis goes horizontally,
starting at 0 at the upper left-hand
| | 02:41 | corner and going across the top of the stage.
| | 02:43 | The y-axis also starts at 0 at the
upper left-hand corner and goes down the
| | 02:48 | left-hand side of the stage.
| | 02:49 | I'm going to choose my Arrow tool and
then click and drag to draw a little
| | 02:53 | box around the rectangle to select it, and
now move it over so it's fully on the stage.
| | 02:58 | The position of an object on the
stage is also measured from the upper-left
| | 03:02 | corner of the selected object.
| | 03:04 | So looking at the upper left-hand
corner of the rectangle relative to the
| | 03:08 | rulers, you can see that the x-position is
almost 200, maybe 175, and the y is about 140.
| | 03:17 | If you want to know what it is exactly,
just select the object and open up
| | 03:21 | what's called the Properties
panel over here on the right.
| | 03:24 | It tells you the exact X and Y position.
| | 03:27 | To further help you line things up on
your stage, you might like to use guides.
| | 03:31 | To create a guideline, first
click on the stage to make sure you've
| | 03:34 | deselected the rectangle.
| | 03:35 | Now click and hold on either one
of the rulers and drag a guide out.
| | 03:39 | You can create as many guides as you
wish and you can also reposition them by
| | 03:43 | simply clicking and dragging them
to a new location with your mouse.
| | 03:47 | You could also double-click on a guide and
type in the location you want it to have.
| | 03:51 | Guides are only a tool for you, as the developer.
| | 03:54 | If you've published your movie, you'll see
that the guides don't appear in the published SWF.
| | 03:57 | I am going to close my SWF and go back.
| | 04:00 | If you want to lock your guides in
place so you don't accidentally move them,
| | 04:03 | you can go to the View menu
then Guides then Lock Guides.
| | 04:08 | You can see I can't move my guides at all,
but now I actually want to get rid of
| | 04:11 | one so I'm going to go and unlock them again.
| | 04:15 | To get rid of a guide, simply
drag the guide back onto the ruler.
| | 04:18 | Alternatively, you could go to the
View menu, then Guides and Clear Guides to
| | 04:23 | get rid of all of them at once.
| | 04:24 | To set the properties for your document
like background color and size, simply
| | 04:29 | click on the stage, being sure
not to click on your rectangle.
| | 04:32 | Look over in the Properties panel
and you'll see some controls like the
| | 04:35 | stage size right here.
| | 04:37 | For instance, you can see that our
current stage dimensions are 550 x 400.
| | 04:40 | I'm going to click on the Edit
button to open the Document Settings.
| | 04:45 | In Flash CS 5.5, the Edit button
looks like a wrench, in other versions,
| | 04:49 | it simply says Edit.
| | 04:51 | Some of the items we saw on the
Properties panel are repeated here.
| | 04:54 | For instance, we can see the stage
dimensions and change them by typing in new
| | 04:58 | ones, for example 640 x 480.
| | 05:01 | The settings you'll most likely be
interested in are where you can change the
| | 05:04 | units of the rulers to inches,
centimeters, or other choices.
| | 05:09 | You can also set the
background color of your document here.
| | 05:11 | You've probably also noticed the
frames per second and you can see that it's
| | 05:15 | currently set to 24.
| | 05:17 | This affects how fast or slow
your Flash movie is going to play.
| | 05:20 | We'll go into a more detailed
discussion of this soon, but for now, know that
| | 05:24 | setting this to somewhere between 12
and 30 is generally considered acceptable,
| | 05:28 | and the default of 24 is just fine.
| | 05:31 | And of course, if you want Flash to
auto-save all your hard work for you, you
| | 05:34 | can check this box and specify
how often it should save for you.
| | 05:38 | If the settings you create here are
what you want all new Flash documents to
| | 05:41 | use, you can click Make Default.
| | 05:43 | I'm going to cancel out of this box
for now because our current settings are
| | 05:47 | fine for our purposes.
| | 05:48 | The final thing to note about your
stage properties is in this little area
| | 05:52 | labeled SWF History.
| | 05:54 | We've published our movie already,
and this area handily shows you the size
| | 05:58 | of that published SWF.
| | 05:59 | Let's go ahead and delete our rectangle
from the stage by drawing a box around
| | 06:02 | it with the arrow and then
hitting Delete on the keyboard.
| | 06:05 | Now let's hit Command or Ctrl+Enter
one more time to publish our now blank SWF.
| | 06:10 | Close the SWF and notice that the
file size went down a little bit since we
| | 06:14 | deleted the rectangle.
| | 06:15 | These are the basics that you need to
know about setting up the basic properties
| | 06:19 | for your Flash movie.
| | 06:20 | Remember that you can change them any
time by clicking on the stage or the
| | 06:24 | pasteboard, and then
looking in the Property Inspector.
| | Collapse this transcript |
| Touring the workspace| 00:00 | With a blank ActionScript 3.0 FLA
file open, let's further explore the
| | 00:05 | Flash interface so we can navigate around
and make good use of all the tools available.
| | 00:10 | We've already identified the blank
rectangle in the middle of our screen as the
| | 00:13 | stage and it's like a canvas where
we'll put all of our Flash content.
| | 00:17 | Above the stage, across the top of
the screen, are all the menus for Flash.
| | 00:21 | The File menu has items familiar to
pretty much any computer user like New to
| | 00:26 | create a new document, Open,
Save, Save As, and so on.
| | 00:30 | We'll explore some of the other menus
as we need them throughout the course.
| | 00:34 | If all your Flash settings are the
defaults like mine, below the stage,
| | 00:38 | you'll find the Timeline.
| | 00:39 | Anything that's going to appear on your
stage is also going to appear in the Timeline.
| | 00:43 | A Flash movie plays in a linear fashion.
| | 00:45 | The Timeline helps you control at
what point in linear time your items will
| | 00:49 | appear and for how long.
| | 00:51 | We'll practice using the Timeline in
detail in a separate video, but for now,
| | 00:54 | know that the Timeline will be an integral
part of the setup of all your Flash movies.
| | 00:58 | If you click on the stage or the
pasteboard with your Arrow Tool and look to the
| | 01:02 | right, you'll see the Properties
Panel which tells you information about
| | 01:05 | whatever item you've clicked on.
| | 01:07 | We can see our Flash movie here has the
default frames per second, or FPS, of 24,
| | 01:12 | a background color of white, and
a stage dimension of 550x400.
| | 01:17 | Move your mouse over to the right, over
the very skinny panel, that's the toolbar.
| | 01:22 | Here's where all your drawing tools are
kept and let's click on our Rectangle tool.
| | 01:26 | When you do, you'll notice that
two places on the screen change.
| | 01:29 | First of all, the Properties panel shows
you the different settings that you can
| | 01:32 | set for the rectangle you're about to draw.
| | 01:35 | Secondly, below all the drawing tools,
there are some other settings like Fill
| | 01:39 | Color and Outline Color.
| | 01:40 | Click on several other of the tools in
the toolbar like the Text tool, the Line
| | 01:44 | tool, and the Pencil tool, and you'll
see that the Properties panel and the
| | 01:47 | area below the toolbar change depending on what
options are available for that particular tool.
| | 01:53 | Let's choose our rectangle again and
change our settings and draw our shape.
| | 01:57 | So let's change the Fill to be black
and the Outline, which is known as the
| | 02:01 | Stroke in Flash, to red.
| | 02:03 | Let's make the stroke thicker by either
moving the slider or typing 4 in the box.
| | 02:07 | Let's make our Stroke a Dashed
line and then bump up the number under
| | 02:11 | Rectangle Options to 10.
| | 02:13 | The higher the number, the more
rounded our rectangle's corners will be.
| | 02:16 | Let's draw a rectangle on the stage.
| | 02:20 | After it appears, go back over to your
Tools panel and select the Arrow tool.
| | 02:24 | Now if you double-click on your black
rectangle, notice that the Properties
| | 02:28 | panel changes again, now telling you
information about the shape you selected on the stage.
| | 02:33 | For instance, it tells you that the
Width is about 223 pixels, the Height is
| | 02:37 | 145, the X-position is 160, and the Y is 105.
| | 02:42 | It also shows you the settings you chose
for the Style, for the Fill, and the Stroke.
| | 02:47 | If you move your rectangle with your
Arrow tool, notice that the X and Y
| | 02:51 | position are automatically
updated in the Property Inspector.
| | 02:54 | You can also go and change, say for
instance, the stroke from a dashed line to
| | 02:59 | another kind of line.
| | 03:00 | You can see that the Properties
Panel is a pretty important panel.
| | 03:03 | You'll use it constantly to check and
update settings for items on your stage.
| | 03:07 | Go ahead and click on the Library
tab now to open the Library panel.
| | 03:12 | It's empty right now, but this is a
place where you're going to keep copies of
| | 03:15 | different items that you use in your
Flash movie and it will become very
| | 03:19 | important down the line.
| | 03:20 | I am going to click on the pasteboard
to deselect my rectangle and now let's
| | 03:23 | work with the panels a little bit more.
| | 03:25 | They're designed to be moved
around to best suit your workflow.
| | 03:28 | You can expand and contract panels by
clicking on the little double arrow at
| | 03:32 | the top of each panel.
| | 03:33 | For instance, I can contract and
expand the Library and Properties panel.
| | 03:37 | Likewise, I can expand this panel set
to reveal the Color, Swatches, Align,
| | 03:42 | Info, and Transform panels.
| | 03:44 | When the panel set is open, click the
little context menu on the upper right to
| | 03:49 | see different additional
options available for that panel.
| | 03:52 | So, for instance, for the Swatches
panel, I can duplicate a swatch, delete a
| | 03:56 | swatch, add colors, and so on.
| | 03:58 | You can also change where an
entire panel group is docked.
| | 04:01 | Let's close our color group and see this
little dotted area at the top right here.
| | 04:06 | If you click and drag that, you can move
the whole panel, say, over to the left.
| | 04:10 | Hover over the left side of the
screen for a moment and you'll see a blue
| | 04:13 | outline and a gray shade pop-up which is the
new spot that you can dock your panel into.
| | 04:18 | Try clicking on the gray bar next to
the Timeline and the Motion Editor and I
| | 04:21 | can drag this panel up to the top.
| | 04:23 | Wait for the little blue line
and then dock them at the top.
| | 04:27 | You can also do something like pull
the toolbar out and have it just float
| | 04:30 | above everything else.
| | 04:31 | You can change the panel
layout as much as you wish.
| | 04:34 | If you move something somewhere you
don't like and you can't get it unstuck,
| | 04:38 | you can always go to the dropdown at the
upper right of the screen that says Essentials.
| | 04:42 | If you choose Reset Essentials, your
panel layout will return to the default
| | 04:45 | layout you see when you open Flash.
| | 04:47 | You can also check out some
of the other preset layouts.
| | 04:50 | Here's one that's meant to be useful
for designers with the Timeline at the top
| | 04:54 | and the color and drawing tools very visible.
| | 04:56 | Here's another one that's meant to
be useful for developers and so on.
| | 05:00 | Finally, let's say you've
created a panel layout you really love.
| | 05:03 | Let's pretend and just have the toolbar
float above all the other panels and expand it.
| | 05:08 | You can now choose New Workspace, type
in a name for your layout, and save it.
| | 05:13 | Your new workspace now appears in the
list of possible layouts you can choose.
| | 05:17 | For now, I am just going to be boring and
reset my workspace to the Essentials layout.
| | 05:22 | The final thing to know about panels is
that you don't automatically see all of
| | 05:25 | them that exist when you open up Flash.
| | 05:27 | If you go to the Window menu and hover over
Other Panels, you'll see some others that exist.
| | 05:32 | One useful panel is the History panel.
| | 05:35 | If you slide the little slider bar
up the left-hand side, Flash will step
| | 05:38 | backward through all of
the steps that you just did.
| | 05:41 | This can be a nice way to undo steps if
you want to change your Flash file back
| | 05:44 | to the way it was five minutes ago and
you don't know how many times you'd have
| | 05:48 | to push Ctrl+Z to get there.
| | 05:50 | And with the History panel, you can
also step back forward through the steps.
| | 05:54 | We've now heard the most important
terminology and seen how you can change the
| | 05:58 | layout of the workspace and
different panels available in Flash.
| | 06:01 | So let's start creating some exciting content.
| | Collapse this transcript |
| Understanding and importing bitmaps and vector files| 00:00 | While Flash provides you a number of
drawing tools, using imagery that's
| | 00:04 | been created outside of Flash is likely
going to be something you'll want to do often.
| | 00:08 | You can import both bitmap
and vector graphics into Flash.
| | 00:11 | So let's talk about the differences
between vector and bitmap and take a look
| | 00:15 | at the import process.
| | 00:16 | Here we'll perform the first steps to
create the finished project you previewed
| | 00:19 | earlier at the start of the
course with the lady driving the car.
| | 00:23 | As a refresher of what this looks like,
double-click on fastCar.swf in the
| | 00:27 | Exercise Files for this chapter.
| | 00:29 | Right now we'll be working with the
background image and the image of the lady in the car.
| | 00:33 | (video playing)
| | 00:38 | I am going to start by creating a new blank
ActionScript 3.0 file and save it as fastCar.fla.
| | 00:46 | In the Property Inspector, notice the
default document settings that have the
| | 00:49 | stage dimensions as 550x400, the frames
per second at 24, and a white background color.
| | 00:56 | Let's import a background
graphic which is a bitmap.
| | 00:59 | Go to the File menu and choose
Import, then Import to Stage.
| | 01:03 | In the Exercise Files for this movie,
find the file called background.jpg and
| | 01:08 | click Open to import.
| | 01:09 | Flash thinks about it for just a
moment and the import process is done.
| | 01:13 | Because the image is on the stage,
it also appears in the library.
| | 01:17 | Click on the Library tab
to see it, and there it is.
| | 01:20 | Click on the image on the stage to
make sure it's selected and then open
| | 01:23 | your Property Inspector and notice
that it shows the width of our image is
| | 01:27 | 550 and the height is 400.
| | 01:29 | It's great that this image is already the
same size as our stage because it's a bitmap.
| | 01:34 | Bitmap images don't scale up and down easily.
| | 01:37 | You can think of image
information for bitmaps kind of like a grid.
| | 01:40 | For instance, one pixel is green, then
the pixel next to it is red, then the
| | 01:44 | pixel next to it is blue, and so on.
| | 01:46 | If you need to scale a bitmap image so
it's bigger, your image program has to
| | 01:51 | guess what color to use to fill in the
extra space you've added to the grid.
| | 01:55 | Likewise, scaling a bitmap image
down also requires some guesswork as to
| | 01:59 | what color to make each pixel since you're
essentially making the area of the grid smaller.
| | 02:03 | You can see this behavior by clicking
on the image to make sure it's still
| | 02:07 | selected and then over in the
toolbar selecting the Free Transform Tool.
| | 02:11 | Transformation handles appear on
your image and you can then resize it.
| | 02:14 | I am going to approach the upper right-hand
corner of the image and you'll see a
| | 02:18 | double-headed arrow appear.
| | 02:19 | This allows me to change the width and
the height of the image at the same time.
| | 02:23 | If you hold down the Shift key
while clicking and dragging with the
| | 02:26 | double-headed arrow, the width and
height stay in proportion to each other as
| | 02:29 | the image is made bigger or smaller.
| | 02:32 | Go ahead and make your image really big.
| | 02:34 | See how the image quality kind of
degrades as the image gets bigger?
| | 02:38 | The trees, leaves, and other items in the
image start looking blocky or pixelated.
| | 02:43 | This is because as the bitmap scales,
there's not defined information to fill in
| | 02:46 | the extra pixels you're
asking the image to include.
| | 02:49 | Pictures you take with a camera are a
great example of imagery captured as a
| | 02:53 | bitmap, and you'd use a program like
Adobe Photoshop to be able to resize
| | 02:57 | bitmaps without getting that pixelation.
| | 02:59 | So the conclusion to take away about
bitmap images is that it's best to have
| | 03:03 | them sized at the correct dimension you
need before importing them into Flash.
| | 03:07 | So now that we've sufficiently messed
up our image, let's change back to our
| | 03:11 | Arrow Selection Tool and click on the
image to make sure it's still selected.
| | 03:15 | In the Property Inspector, I am going to
restore it to its correct dimensions by
| | 03:19 | typing 550 for the width and 400 for the height.
| | 03:22 | I actually didn't have to type in the 400
because the little chain for linkage is here.
| | 03:28 | It's locking the width
and height values together.
| | 03:30 | To place it so it sits squarely in the
middle of the screen, I am going to type
| | 03:33 | 0 for the X position and 0 for the Y.
So we're back to where we started and the
| | 03:38 | pixelation we saw, when we
stretched the image out, has gone away.
| | 03:41 | Let's move on and import a vector file.
| | 03:44 | I am going to go to the File menu again,
scroll down to Import, and this time
| | 03:48 | select Import to Library.
| | 03:50 | Navigate to the start folder for this
movie's Exercise Files and choose the file
| | 03:54 | called CarWithDriver.ai.
| | 03:57 | This is an Adobe Illustrator file.
| | 03:59 | We're presented with some
options before we import our file.
| | 04:02 | Down in the left-hand side, you can
select or deselect which layers from the
| | 04:06 | Illustrator file you want
to include in the import.
| | 04:09 | We want them all, so I am just
going to leave them all checked.
| | 04:11 | In the Convert to layers dropdown, you
can choose to have Flash preserve the
| | 04:15 | layers by choosing Flash Layers.
| | 04:17 | You can also have Flash squish all the
layers into one by choosing Single Flash
| | 04:21 | Layer or you could have it
convert all layers to keyframes.
| | 04:24 | We haven't discussed keyframes yet,
but that's okay because we want to go
| | 04:28 | ahead and preserve the layer set up in
Illustrator, so let's just leave this at Flash Layers.
| | 04:32 | Leaving these other checkboxes at their
defaults is fine as well, so let's click OK.
| | 04:37 | It doesn't look like much has happened
because we imported the stage into the
| | 04:40 | library, not to the stage.
| | 04:42 | Click to open your library and indeed
the car image is there as a graphic symbol.
| | 04:46 | We'll cover symbols in detail later,
but for now, think of symbols as a
| | 04:50 | reusable blueprint.
| | 04:52 | Having the items in our library named
something that describes what the item
| | 04:55 | actually is, is a good practice.
| | 04:58 | CarWithDriver.ai is pretty intuitive,
but let's double-click on the current name
| | 05:03 | and change it to just plain CarWithDriver.
| | 05:04 | So you've probably noticed that
importing something to the library does not
| | 05:09 | automatically place it on the stage.
| | 05:11 | If it's in the library but not on the
stage, it's not included in the final SWF.
| | 05:15 | Well, we need our car image on the stage,
so I am going to scroll down a little
| | 05:19 | bit and drag it out from
the library onto the stage.
| | 05:22 | It's a little too big, so I am going
to head over to the toolbar and grab my
| | 05:26 | Free Transform tool or you
could just hit Q on your keyboard.
| | 05:30 | Notice that you can change the
dimensions as much as you want and the image
| | 05:34 | always stays looking sharp and non-pixelated.
| | 05:36 | That's because this is a vector graphic.
| | 05:38 | Instead of storing information about
the image like a grid, like bitmaps do,
| | 05:43 | vectors instead use mathematical
equations to describe the shapes and curves.
| | 05:47 | As you change the image, the shapes of
the image are simply recalculated, so it
| | 05:52 | always appears crisp.
| | 05:53 | While it's a good idea to have that
vector imagery already sized correctly
| | 05:57 | before you import it into Flash, you
can see that adjusting the size after the
| | 06:01 | fact works just fine.
| | 06:02 | So I am going to change my car and
driver by opening the Property Inspector and
| | 06:07 | making sure that the icon of the chain
here still looks like a linked chain.
| | 06:11 | This way we're locking the
width and height values together.
| | 06:13 | I am going to type in 345 for
the width and the height should
| | 06:16 | automatically update to 140.
| | 06:17 | I am also going to reposition the driver by
giving here an X position of 114 and a Y of 216.
| | 06:24 | Now using my Arrow tool, I am going to
double click on the image of the car.
| | 06:29 | You'll notice that the screen has changed.
| | 06:31 | The top left of the screen says
Scene 1 and then CarWithDriver and the
| | 06:36 | background image is grayed out.
| | 06:37 | What we've done is stepped
into the car image itself.
| | 06:40 | Notice how you can click on each one
of the wheels individually as well as
| | 06:43 | the body of the car.
| | 06:44 | Now double-click on the body of the
car and see now how the wheels are grayed
| | 06:48 | out since we've stepped into the
group of shapes that make up the body.
| | 06:53 | Notice also how the upper left
of the screen now says Scene 1,
| | 06:55 | CarWithDriver, and then Group.
| | 06:58 | You can drill down even further by double-
clicking on part of the car such as the door.
| | 07:02 | What we're seeing here is all the
individual layers from the original
| | 07:06 | Illustrator file that have been preserved.
| | 07:08 | This is going to prove useful down the
line since we're going to animate the wheels.
| | 07:12 | But for now, I am going to click on
Scene 1 on the upper left to return to the
| | 07:15 | main timeline and save my file.
| | 07:18 | There's one last vector image that
we'll use later on in our fast car movie, so
| | 07:22 | one last time, I am going to go to the
File menu, Import to Library, and from
| | 07:26 | the start folder for this movie choose face.ai.
| | 07:30 | In the Import dialog box, I am just going to
leave all the defaults as they are and click OK.
| | 07:35 | In the Library, you can now
click face.ai to see a preview.
| | 07:39 | It's the face for the sun that we'll draw
later on, so for now we'll just leave it here.
| | 07:43 | Let's change the name of it
however from face.ai to just plain face.
| | 07:47 | So you can see that importing imagery
into Flash whether it's vector or bitmap
| | 07:52 | requires only the simple steps of
going to File and then Import and then
| | 07:56 | choosing if you want to
import to the library or the stage.
| | 07:59 | Both types of images are okay to use,
but remember as a best practice to
| | 08:03 | have your imagery, especially bitmaps,
sized correctly before bringing them
| | 08:07 | into Flash.
| | Collapse this transcript |
| Organizing layers| 00:00 | One really good way to organize all your
visual assets on the stage is by using layers.
| | 00:05 | If you've used layers before in
programs like Adobe Photoshop or Illustrator,
| | 00:09 | the concept will transfer easily for you.
| | 00:11 | To explore this, I am back in that
fastCar project we started earlier.
| | 00:15 | In Flash, the layers are
controlled from the Timeline.
| | 00:18 | Look at the bottom left of your screen
next to the Timeline and you'll see that
| | 00:21 | we currently have one layer in the Flash movie.
| | 00:23 | Our background image and the
car are both on this layer.
| | 00:26 | A best practice while working in
Flash is to have each visual item on the
| | 00:30 | stage have its own layer.
| | 00:31 | That way you can work with one
individual asset at a time and not
| | 00:35 | accidentally affect other items.
| | 00:36 | As we progress further into Flash and
start working with animation, you have to
| | 00:40 | have individual assets on their
own layers to create the animation.
| | 00:44 | So organizing your movie layers
is a good habit to get into early.
| | 00:47 | A handy technique to know when you have
multiple items on one layer like we do
| | 00:51 | is to have Flash separate them out for you.
| | 00:53 | To try this, hit Command+ or Ctrl+A on your
keyboard to select all the items on our layer.
| | 00:59 | You can see that both the car and the
background image have a thin blue line
| | 01:03 | around them to show they're selected.
| | 01:05 | Now right-click somewhere on your
selected objects and choose Distribute to
| | 01:08 | Layers from the context menu that appears.
| | 01:11 | You can alternatively go to the Modify
menu, go to Timeline, and then select
| | 01:15 | Distribute to Layers.
| | 01:17 | Notice that we now have three layers.
| | 01:19 | You can turn the visibility of layers on and
off as an easy way to see what's on each layer.
| | 01:24 | So on the layer where it says
CarWithD, click on the little Dot (.)
| | 01:28 | in the column under the icon of the eye.
| | 01:30 | The car disappears, so this is the cars layer.
| | 01:33 | Now I am going to click on the Dot (.)
| | 01:34 | next to the background layer and we'll see
the background image appear and disappear.
| | 01:38 | You can click on the eye icon itself to
affect the visibility of all the layers at once.
| | 01:43 | The original layer that that
background and the car were on is now empty.
| | 01:48 | Besides the fact that we just saw what
layers the car and background are on, you
| | 01:52 | can tell the layer is empty in two other ways.
| | 01:55 | First, turn the visibility of the
layer on and off and nothing happens since
| | 01:59 | there's nothing on the layer.
| | 02:00 | Also, notice how the car and
background layers have the first frame in the
| | 02:04 | timeline filled in with a gray
background and a filled-in black Dot (.).
| | 02:08 | Having that color indicates
there's something on the layer.
| | 02:11 | The Layer 1 layer doesn't have
the shading or a filled-in Dot (.)
| | 02:15 | and that indicates the layer is empty.
| | 02:17 | Since we're not using that
layer anymore, we can delete it.
| | 02:20 | Just click once on it and then click the
little trashcan at the bottom of the Timeline.
| | 02:24 | Another best practice is to name
your layer something intuitive.
| | 02:28 | With only two items on the stage, this
may not seem that important, but when you
| | 02:32 | have Flash projects with tens or
hundreds of layers, you'll appreciate layer
| | 02:35 | names that make sense as
opposed to Layer 1, Layer 2, Layer 3.
| | 02:40 | To change a layer name, simply double-
click on the name and type in a new one.
| | 02:43 | Let's name the top layer
"stationaryCar" and the bottom layer "bgImage."
| | 02:48 | To avoid moving things around on the
stage by accident when you've got them
| | 02:51 | positioned just right, you can lock your layers.
| | 02:54 | Just like the eye, you can click on
the Lock to toggle all layers between
| | 02:58 | locked and unlocked.
| | 03:00 | With them locked, try selecting
anything on the stage and, indeed, you can see we
| | 03:04 | can't move anything.
| | 03:05 | Since the background layer isn't going
to change, let's leave that locked but
| | 03:09 | we'll soon be doing things to the car,
so let's unlock just that layer by
| | 03:12 | clicking on the little lock in the Lock column.
| | 03:15 | The column underneath the little
rectangle to the right of Lock allows you to
| | 03:19 | view some or all of the layers as outlines.
| | 03:22 | This can come in handy at times, for
instance, if you're trying to line up one
| | 03:25 | item precisely behind another.
| | 03:28 | You can easily change the stacking
order of your layers by dragging and
| | 03:31 | dropping a layer up or down.
| | 03:34 | As I drag the background layer above
the car, you'll notice a dark black
| | 03:37 | line appears to indicate where the layer is
going to be placed when I release the mouse.
| | 03:42 | You can see that the car disappears
on the stage now because it's behind
| | 03:45 | the background image.
| | 03:46 | Since we want to see our car, I am just
going to move the background layer back down.
| | 03:50 | If you need more layers, simply click on the
icon that looks like a little piece of paper.
| | 03:55 | New layers are added above
whatever layer you have selected.
| | 03:58 | So let's select our stationaryCar
layer and add two new layers that we'll use
| | 04:02 | later on in the course.
| | 04:04 | Rename the bottommost one "audio"
and the topmost one "actionscript."
| | 04:09 | You can further organize your
layers by creating and using folders.
| | 04:12 | Click on the Folder icon at the bottom
of your layers to create a new folder.
| | 04:17 | You can drag and drop folders just like
you can layers, so let's drag the folder
| | 04:21 | just above the stationaryCar layer.
| | 04:22 | I am going to put the stationaryCar
layer into the folder by clicking and
| | 04:27 | dragging the layer up and slightly to the right.
| | 04:29 | You can see it's now indented under
the folder to indicate it's inside.
| | 04:33 | Let's move the background
layer into the folder too.
| | 04:36 | You can also rename folders,
I'll call this one "visualContent."
| | 04:41 | Clicking on the little arrow to the left
of the folder name allows you to expand
| | 04:45 | and contract the contents in the folder.
| | 04:47 | There's a special type of layer called a
Guide layer that may prove useful to you.
| | 04:51 | On the bgImage layer, double-click on
the icon that looks like a piece of paper
| | 04:55 | to open the Layer Properties box.
| | 04:58 | Using the radio buttons, change this
layer from a Normal layer to a Guide
| | 05:01 | layer and click OK.
| | 05:03 | Notice how the icon on the Timeline
has changed from a piece of paper to what
| | 05:06 | looks like a T-square to
indicate this is a Guide layer.
| | 05:09 | Guide layers are visible while working
in your FLA and let's test our movie.
| | 05:14 | You'll see that the
background image no longer appears.
| | 05:17 | That's what Guide layers are for.
| | 05:18 | Maybe you want to put a comp in this
layer to help you arrange things on the
| | 05:22 | stage or maybe you want to type
instructions to another developer who will also
| | 05:26 | be working on your Flash file.
| | 05:28 | Whatever the reason for using the
guide layer, another advantage is that
| | 05:31 | this file size associated with the content in
the layer is not included in the resulting SWF.
| | 05:37 | Click on your stage and then
open up the Properties panel.
| | 05:40 | Here in the SWF History, you can see that
the size of the SWF we just created is 3.8K.
| | 05:45 | Double-click on the icon next to the
Guide layer name again and change it
| | 05:49 | back to a Normal layer.
| | 05:50 | Test the movie again, close the SWF, and
then open up the Properties Inspector again.
| | 05:55 | My file size has jumped up to 95.3k
because the size of the background image is
| | 06:00 | now included in the SWF.
| | 06:02 | The little yellow exclamation point (!)
| | 06:03 | next to the file size is just an
indicator that the SWF size has increased over
| | 06:07 | 50% which in our case is okay.
| | 06:10 | Use Guide layers to your advantage, but
I would recommend that once you're done
| | 06:13 | with them, delete them even though
they're not included in the final SWF.
| | 06:16 | That way your FLA files include only
layers with content that's actually used
| | 06:20 | on the stage.
| | Collapse this transcript |
| Introducing the Timeline and frames and keyframes| 00:00 | Controlling animation and the
appearance and disappearance of objects on the
| | 00:04 | screen over time is a big
part of the appeal of Flash.
| | 00:07 | Understanding how to use the Timeline,
Frames, and Keyframes is integral to
| | 00:11 | this type of control.
| | 00:13 | To practice this I've created a
test file called travelPhotos.fla.
| | 00:17 | It's a pretty simple file with only
five layers and four images in the library.
| | 00:23 | Before we start working, in
your Exercise Files, pop open the
| | 00:26 | travelPhotosPreview.swf to
see what we're building toward.
| | 00:32 | This is a short movie, only 5 seconds long.
| | 00:35 | Four images appear in succession with
a short piece of text appearing at the
| | 00:38 | same time as the last image,
then the movie starts over.
| | 00:42 | So close this preview file and return
to your travelPhotos.fla file in Flash.
| | 00:48 | Before starting, I'm going to use the
View dropdown on the upper right of the
| | 00:51 | stage and choose Fit in Window
so we can see the entire stage.
| | 00:56 | The Flash Timeline, which appears
across the bottom of the screen, is
| | 01:00 | measured in frames.
| | 01:01 | You can see the frame numbering
across the top of the Timeline.
| | 01:05 | How fast those frames are played is
determined by the frames per second.
| | 01:08 | To remind ourselves what our FPS is,
click on your Property Inspector.
| | 01:12 | We're at 24 frames per second.
| | 01:14 | Our movie currently only has one frame.
| | 01:17 | So to have a movie that's 5 seconds long,
we need to extend our Timeline out to
| | 01:22 | 120 Frames, since 5 seconds
multiplied by 24 frames per second equals 120.
| | 01:29 | Click on Frame 1 on the image1 layer.
| | 01:32 | You can add frames one at a time
by pressing F5 or right clicking and
| | 01:38 | choosing Insert Frame.
| | 01:40 | Of course, adding frames one at a time
is pretty tedious, so grab the slider bar
| | 01:45 | that appears under the Timeline and
slide over so you can see Frame 120.
| | 01:50 | Click on Frame 120, making sure that
you're selecting 120 on the image1 layer,
| | 01:56 | and now right-click on the
frame and choose Insert Frame.
| | 02:00 | Alternatively, you could select
Frame 120 and press the hot key of F5.
| | 02:05 | You can see that image1 now has 120 frames.
| | 02:09 | Now, open up your Library and drag-and-
drop vacation_1.jpg to the stage, kind
| | 02:14 | of over on the left.
| | 02:17 | You can see that if you try to drag it
to the Timeline, Flash doesn't let you.
| | 02:21 | You can only drag things onto the stage.
| | 02:23 | Notice, our frames now all turn gray to
indicate there's something on the stage.
| | 02:28 | Notice also the vertical red line
that now appears over the Timeline.
| | 02:33 | This is called the playhead and you can
drag it across the Timeline to preview
| | 02:37 | what your Flash movie looks like so far.
| | 02:39 | Dragging the playhead is better
known as scrubbing the Timeline.
| | 02:42 | I'm going to scrub my
Timeline all the way back to Frame 1.
| | 02:45 | Of course the stage looks the same no
matter what frame we're on so far since
| | 02:49 | the image just stays in the
same place for all the frames.
| | 02:52 | Now, if you'd like to see more or less
of the Timeline at once, click on this
| | 02:56 | little dropdown at the upper
right of the Timeline window;
| | 02:59 | choosing Tiny, shrinks the view of
the frames so you can see more at once.
| | 03:04 | Conversely, choosing Medium makes it
so you can only see maybe 45 frames.
| | 03:08 | You can experiment with what works
best for you, but I'm going to stick with
| | 03:12 | the default of Normal.
| | 03:14 | Now, let's extend our
other layers out to Frame 120.
| | 03:17 | Use the scroller so you can see that frame
and then click on Frame 120 on the image2 layer.
| | 03:24 | Instead of extending each layer out
individually, you can multiple-select by
| | 03:28 | holding down the Shift key on your
keyboard and selecting Frame 120 for the
| | 03:32 | image3 and image4 layers as well.
| | 03:35 | Add your frames by pressing F5 or
right clicking and choosing Insert Frame.
| | 03:39 | We now have 120 frames on these layers
as well, but you'll notice that they all
| | 03:44 | have a white background instead of gray,
because there's nothing on the stage
| | 03:47 | for these layers yet.
| | 03:48 | So move your playhead over to Frame
1 and press Enter on your keyboard.
| | 03:52 | You'll see the playhead move and also
two counters on the bottom that show what
| | 03:57 | frame the playhead is on and how
many seconds that corresponds to.
| | 04:01 | The playhead stops when it gets to the end.
| | 04:03 | Now in the text layer select
Frame 125 and Insert Frames.
| | 04:08 | Scrub your Timeline near the end of the
frames and you'll see the stage update
| | 04:12 | appropriately depending on
what frame your playhead is on.
| | 04:15 | The stage is of course empty from
Frames 121 to 125 since there's only
| | 04:21 | blank frames there.
| | 04:22 | And let's test our movie.
| | 04:24 | And as expected, the SWF behaves
pretty much the same way, but you'll see the
| | 04:29 | little blip at the end.
| | 04:32 | In the SWF the playhead returns to Frame 1
as soon as it's reached the end of the frames.
| | 04:37 | So we see 5 seconds worth of seabird
and then five frames worth of blank frame,
| | 04:42 | and then back to Frame 1 where
the bird image appears again.
| | 04:47 | So now we've seen how the playhead runs
over the Timeline and shows you what's
| | 04:51 | on stage, but we don't need
those blank frames anymore.
| | 04:54 | So to get rid of them, click on Frame
121 in the text layer, then hold down the
| | 04:58 | Shift key on your keyboard and select
Frame 125, so you have all the blank
| | 05:03 | frames selected, then right-
click and choose Remove Frames.
| | 05:07 | Let's move on to the idea of keyframes.
| | 05:10 | One way that may be helpful to think of
keyframes is to think about stop frame
| | 05:14 | animation as used in Claymation.
| | 05:16 | If you've watched shows like the
California Raisins or Shaun the Sheep or
| | 05:20 | Wallace & Gromit, you can imagine how
the clay characters are put into position,
| | 05:24 | an image is snapped, and then the
character is repositioned and another image
| | 05:28 | taken, and so on and so on in succession.
| | 05:31 | Keyframes are the equivalent of this.
| | 05:33 | Each keyframe shows the specific
starting position, size, and other attributes
| | 05:38 | of items on the screen.
| | 05:40 | When you need new
positioning, you need a new keyframe.
| | 05:43 | Keyframes in Flash are indicated by a circle.
| | 05:45 | Move your playhead to Frame 1 of your
Timeline and you'll notice that all our
| | 05:50 | layers have a keyframe on Frame 1.
| | 05:52 | However, image1 is the only layer that
actually has anything on the keyframe and
| | 05:57 | you can tell because this circle is
filled in and the background's gray.
| | 06:01 | A non-filled in circle and white
background indicates a blank keyframe.
| | 06:06 | Frames 2 through 120 on the image1
layer all look the same as the keyframe on
| | 06:12 | Frame 1, because they're
just frames, not keyframes.
| | 06:16 | They simply extend over time
whatever the keyframe defines.
| | 06:20 | If you wanted the seabird image to be
in a different position on say Frame 20,
| | 06:25 | you need to add a new keyframe by right
clicking on Frame 20 and choosing Insert Keyframe.
| | 06:31 | What Flash does is copy the information
from the most previous keyframe, in this
| | 06:36 | case Frame 1, and stick it in the new keyframe.
| | 06:39 | You can then move the bird image on
Frame 20 to a different position and you can
| | 06:43 | see the effect of this change
when you scrub the playhead.
| | 06:47 | Since this new keyframe was just for
demonstration, let's get rid of it by right
| | 06:51 | clicking on Frame 20 and
choosing Clear Keyframe.
| | 06:54 | Now all of our frames are restored back
to the positioning defined in keyframe one.
| | 06:59 | Let's rotate our image slightly to
give it a little more visual interest.
| | 07:03 | Click on the image to select it and
you'll notice that all the frames in the
| | 07:06 | Timeline are now highlighted.
| | 07:08 | We only have one keyframe that all
the other frames look exactly alike.
| | 07:13 | So what we're about to do will affect
the image all the way across the Timeline.
| | 07:16 | Now, choose the Free Transform tool or
press the hot key of Q. Rotate your image
| | 07:22 | to the left a bit, as
much as you think looks good.
| | 07:26 | So our little project here is meant to have a
succession of images appear on top of each other.
| | 07:30 | Let's go ahead and lock our image1
layer because we're done with that, and have
| | 07:34 | the second image appear in the
image2 layer at one second into the movie.
| | 07:38 | At a Frame Rate of 24 frames per
second that would be, of course, Frame 24.
| | 07:43 | So find Frame 24 in the image2 layer,
and it may help to look at the little
| | 07:47 | number underneath the Timeline to see
exactly which frame you've selected.
| | 07:51 | Right-click and choose Insert Blank Keyframe.
| | 07:54 | You can also go to the Insert Menu, then
Timeline, and then Insert Blank Keyframe.
| | 08:00 | You may be wondering if you could
have chosen Insert Keyframe instead.
| | 08:04 | Remember that inserting a keyframe
creates a new keyframe with the information
| | 08:09 | from the previous keyframe copied over into it.
| | 08:12 | Since our previous keyframe is a blank
keyframe, it doesn't really matter if you
| | 08:16 | choose to insert a keyframe or a blank
keyframe, you end up with the same thing.
| | 08:21 | From your Library, drag-and-drop
image2 onto the stage offsetting it from the
| | 08:26 | other image a little bit.
| | 08:27 | We should rotate this a little bit too.
| | 08:29 | So move your playhead to a
point where you can see both images.
| | 08:33 | Select the image of the tree, press Q
on the keyboard to bring up the Free
| | 08:36 | Transform tool, and rotate and
reposition it as much as you think looks good.
| | 08:42 | This looks good so far, so I'm going
to lock our image2 layer and add a third
| | 08:46 | image in at 2 seconds into
the movie, which is Frame 48.
| | 08:49 | So I'm going to right-click and
choose Insert Keyframe and now
| | 08:53 | drag-and-drop vacation_3.jpg onto the
stage and position it so it's offset
| | 08:58 | from the other images.
| | 09:00 | That's all we have to do for this layer.
| | 09:02 | So I'm going to lock the image3 layer
and repeat one more time for the fourth
| | 09:06 | image, but this time we'll make a
mistake on purpose so we can see how to easily
| | 09:10 | move keyframes around.
| | 09:12 | Select Frame 1 of the image4 layer and
drag-and-drop vacation_4.jpg from the
| | 09:17 | Library onto Frame 1.
| | 09:20 | This is obviously not the right place
to put this image if we want it to be our
| | 09:24 | fourth image to appear in the succession.
| | 09:26 | It should appear at 4 seconds
into the movie, which is Frame 72.
| | 09:30 | This is easy enough to fix.
| | 09:32 | Simply select the keyframe on Frame
1 and then drag-and-drop to Frame 72.
| | 09:37 | This looks more correct.
| | 09:39 | So let's reposition the image so it
looks good and lock the layer since
| | 09:42 | we're done with it.
| | 09:43 | Scrubbing your playhead, we can see that
this image will appear for 48 frames or
| | 09:47 | 2 seconds, allowing the user a little
more time to see it than the others.
| | 09:51 | The extra layer is there because the
last item is to type the greeting that
| | 09:55 | appears at the same moment as the last
image, and 2 seconds is better than 1 if
| | 09:59 | you expect people to actually be
able to read what the greeting says.
| | 10:02 | So on the text layer I'm going to
select Frame 72 and insert a blank keyframe.
| | 10:08 | Now, I'm going to use my Text tool and
in the Property Inspector make sure that
| | 10:12 | under the very first
dropdown Classic Text is selected.
| | 10:15 | Under the second dropdown choose Static Text.
| | 10:19 | We'll talk about all the
options in these dropdowns later on.
| | 10:22 | In the Character option for my Font I'm
going to choose Arial Bold Italic at 16
| | 10:27 | point, and have the Color of the text be white.
| | 10:30 | You can choose something else if you wish.
| | 10:37 | Under the Paragraph section I'm
going to have my text be entered.
| | 10:41 | Now, I'm going to click on the
stage once and type the greeting.
| | 10:44 | I'm going to put, "Having a great time!
| | 10:46 | Wish you were here! Love, Uncle Chris."
| | 10:53 | Reposition the textbox with your Arrow
tool if you need, and when you're happy
| | 10:57 | with your layout, lock the
layer and let's test our movie.
| | 11:00 | It takes a total of 5 seconds and the
images and text appear in succession.
| | 11:04 | Now, that's a job well done.
| | 11:06 | Close your SWF file and let's take a
moment to play with the Frame Rate.
| | 11:10 | Open your Property Inspector and click
on the stage somewhere if need be, so you
| | 11:14 | can see the Document Properties.
| | 11:16 | We laid out our Flash movie with the
understanding that we were at 24 frames per second.
| | 11:21 | Try changing the Frame
Rate to 12 and publish again.
| | 11:24 | As you'd expect, the playhead is
moving half as fast as it did before and the
| | 11:29 | movie now takes 10 seconds to run.
| | 11:32 | Let's close our SWF and
change our Frame Rate back to 24.
| | 11:36 | Frame rates between usually 12 and 30
are commonly accepted, so it's fine to
| | 11:40 | choose the frame rate that works for you.
| | 11:42 | If you're working on a piece that might
interact with or be loaded in by another
| | 11:46 | Flash movie, or one that needs to sync
up with a video, be sure to agree with
| | 11:51 | your colleagues ahead of time what the
frame rate is so all the pieces match.
| | 11:55 | The best practice is to choose your
frame rate ahead of time and position items
| | 11:59 | on the Timeline accordingly.
| | 12:01 | Positioning on the Timeline first
and changing the frame rate later can
| | 12:04 | sometimes be a disaster.
| | 12:06 | Changing the frame rate to adjust one
part of the movie may adversely affect
| | 12:10 | other parts you designed at a different rate.
| | 12:13 | One last thing, when testing our movie
you may have noticed that the first two
| | 12:16 | images, the bird and the tree, look a
little bit jagged, because they're bitmaps
| | 12:20 | that have been rotated.
| | 12:22 | There's an easy way to fix this.
| | 12:24 | Close the SWF file and open up your Library.
| | 12:27 | Next to vacation_1.jpg, double-click
on the little icon of the tree, which
| | 12:32 | indicates it's a bitmap.
| | 12:34 | In the resulting Bitmap Properties box,
find and check the box next to Allow
| | 12:39 | smoothing and click OK.
| | 12:41 | Let's do the same one for vacation_2.jpg.
Double-click on the icon to open,
| | 12:46 | check the box, and click OK.
| | 12:47 | Publish your SWF one last time and
you'll see that the images now appear
| | 12:52 | crisp and sharp.
| | Collapse this transcript |
| Using frames and keyframes in a project| 00:00 | In our fastCar.fla project, let's apply
some frames and keyframes to the movie
| | 00:06 | to control the Timeline and get the car moving.
| | 00:09 | This piece is going to be a
total of eight seconds long.
| | 00:12 | The first four seconds will have some
intro text that says "The really fast new
| | 00:16 | sports car" with a lady in car
sitting in the middle of the screen.
| | 00:19 | The last four seconds will have the car
driving by, and some lyrics to a pretend
| | 00:23 | song displayed at the same time.
| | 00:25 | Let's see what our frame rate is.
| | 00:27 | If you can't see it, click on the Property
Inspector and then click somewhere on the stage.
| | 00:31 | It's currently set to 24, but let's
change it to 12, for no other reason than to
| | 00:36 | practice with a different frame rate.
| | 00:37 | Eight seconds multiplied by the
frame rate of 12 equals 96 frames.
| | 00:43 | So let's extend all the layers at once
by selecting frame 96 on the top layer,
| | 00:47 | holding down the Shift key and then
selecting frame 96 on the bottom layer.
| | 00:51 | Right-click and choose
Insert Frame or just hit F5.
| | 00:56 | Let's add our intro text
for the first four seconds.
| | 00:59 | We need a new layer for this.
| | 01:01 | So select the stationary car layer, add
a new layer and rename it to introText.
| | 01:06 | Now select frame 1 of the introText layer
and choose the Text tool from your Toolbar.
| | 01:12 | In the Property Inspector, choose
Arial font, Bold Italic and a font size of
| | 01:17 | 24 and center-aligned.
| | 01:18 | Let's also change the Color to red of CC0000.
Click on the stage and type the word "The."
| | 01:28 | Now for the rest of the phrase, click
on the stage once to deselect the textbox
| | 01:32 | and then a second time to create a new textbox.
| | 01:35 | Let's adjust our text settings
to be 36 point font and yellow.
| | 01:39 | Then type "Really Fast New" and
then "Sports Car" on a second layer.
| | 01:46 | Use your Arrow tool to
adjust the text as needed.
| | 01:50 | You can see that our
introText spans across all 96 frames.
| | 01:54 | Since this text should only appear for
the first four-second intro, we need to
| | 01:58 | insert a blank keyframe halfway through.
| | 02:00 | Frame 48 would be a full four seconds
so let's right-click on Frame 49 and
| | 02:05 | choose Insert Blank Keyframe.
| | 02:07 | Scrub your Playhead across the Timeline.
So far so good, so I'm going to lock this layer.
| | 02:12 | Now we should modify the movie so
that the car that appears on Frame 1 also
| | 02:16 | lasts for only four seconds.
| | 02:18 | In the second half of the movie, the car
will drive across the stage from right to left.
| | 02:23 | So I will move it to its starting
position now and set up the animation later.
| | 02:27 | Let's start by splitting the
Stationary Car layer into two parts.
| | 02:31 | Select Frame 49 for this layer and insert a
keyframe not a blank keyframe, a keyframe.
| | 02:36 | The car is in the right position
for Frames 1 through 48 already.
| | 02:40 | Move the Playhead to Frame 49 or later,
if it's not already and then move the
| | 02:44 | car off the screen to the right.
| | 02:46 | If you hold down the Shift key while
moving the car, it won't float up or down
| | 02:49 | as you move it off screen.
| | 02:51 | Make sure it's totally off-stage. This
will be the starting position for the
| | 02:54 | animation from right to left.
| | 02:56 | Keeping with our best practice of
having individual things on individual layers,
| | 03:00 | let's split up our stationary car and
are not quite yet moving car onto their
| | 03:04 | own layers, so it's easy to differentiate.
| | 03:07 | Select the introText layer in the
Timeline, add a new layer above it and
| | 03:11 | rename it "movingCar."
| | 03:13 | On the new movingCar layer, create
a new blank keyframe on Frame 49.
| | 03:18 | We can cut and paste the soon-to-
be moving car onto this keyframe.
| | 03:23 | So click on the car, go to the Edit
menu and then choose Cut or you can press
| | 03:28 | Ctrl+ or Command+X on your keyboard to cut.
| | 03:31 | Now select Frame 49 on the
movingCar layer and go to the Edit menu and
| | 03:35 | then Paste in Place.
| | 03:37 | You could also use the hotkeys of
Command or Ctrl+Plus+Shift+V. Go ahead and
| | 03:44 | lock your movingCar layer and save your work.
| | 03:48 | Scribe your Playhead to see the clear
differentiation we set up between the
| | 03:51 | introductory four seconds with the
introText in the stationary car, and the last
| | 03:56 | four seconds where the car will
eventually move across the stage.
| | 03:59 | Notice also how the background layer
remains constant regardless of where in
| | 04:03 | the Timeline you are.
| | 04:04 | So now we've seen how to use a
combination of frames, keyframes and blank
| | 04:09 | keyframes, to give us complete
control over what appears when, and for how
| | 04:12 | long on the Timeline.
| | 04:14 | The interaction between the number of
frames and the frame rate also determines
| | 04:18 | how fast or slow the movie will play.
| | Collapse this transcript |
|
|
3. Creating GraphicsCreating shapes in Merge Drawing mode| 00:00 | There are two drawing modes available to
you when using the drawing tools in Flash.
| | 00:04 | Merge Drawing mode and Object Drawing mode.
| | 00:07 | To explore Merge Drawing mode, let's
create a blank FLA document in Flash and
| | 00:11 | select one of the drawing tools.
| | 00:12 | I am going to choose the Rectangle.
| | 00:15 | When you do, the Property Inspector should open.
| | 00:18 | Like other drawing programs, Flash
lets you choose what color the outline or
| | 00:21 | stroke is going to be as well as the fill.
| | 00:24 | Click once on the color chip next to
the icon of the pencil to expand the
| | 00:27 | color palette for stroke.
| | 00:29 | And let's make our stroke be black.
| | 00:31 | Clicking once on the color chip next to the
paint bucket, let's make our fill be red of CC0000.
| | 00:39 | Before drawing our rectangle, let's make
sure that we're using Merge Drawing mode.
| | 00:43 | When you select a tool, the properties
area underneath the toolbar also changes
| | 00:47 | to show you more options
available for that tool.
| | 00:49 | For our rectangle, we see a little icon
that looks like a circle within a square.
| | 00:55 | This icon is how to toggle
between Merge and Object drawing modes.
| | 00:58 | Merge Drawing mode is the default when
you start a new FLA and you can see that
| | 01:03 | the icon is kind of a light gray color.
| | 01:05 | If you click on the icon, it turns
to a darker gray and puts you into
| | 01:08 | Object Drawing mode.
| | 01:11 | The difference between the light gray
and the dark gray can be kind of subtle.
| | 01:14 | It's not the strongest mnemonic device
but to try and help remember which is
| | 01:19 | which, I say that the medium gray is
for Merge Drawing and the dark or more
| | 01:23 | opaque gray is for Object Drawing,
so medium for merge opaque for object.
| | 01:29 | We want Merge Drawing mode so make
sure the icon is the lighter gray color.
| | 01:33 | If you're still not sure which one you
have got, just draw a rectangle on the
| | 01:36 | screen by clicking and dragging.
| | 01:38 | Then use your Arrow tool
and select the rectangle.
| | 01:43 | If your Property Inspector shows that
the selected object is the shape, then you
| | 01:47 | know you're in Merge Drawing mode.
| | 01:49 | If your Property Inspector says drawing
object, you are in Object Drawing mode.
| | 01:53 | So if you have got a drawing object,
please delete it and redraw the rectangle
| | 01:57 | in Merge Drawing mode.
| | 01:58 | And shapes are basically
what Merge Drawing mode is.
| | 02:01 | It just creates blobs of color on the
stage in different shapes depending on
| | 02:05 | which tool you've chosen.
| | 02:06 | Now one thing about drawing in Flash is
that the stroke or outline of a shape is
| | 02:10 | treated separately than the fill.
| | 02:12 | Click once somewhere outside of your
rectangle to make sure nothing is selected
| | 02:16 | and now click just once in the middle
of your rectangle and notice that only
| | 02:20 | the fill is selected.
| | 02:22 | You can tell because it has that
kind of stippled pattern of white dots.
| | 02:25 | If you drag and drop the rectangle
somewhere else on the stage, only the fill goes.
| | 02:29 | I am going to hit Ctrl+Z to undo this move.
| | 02:33 | Now, double-click on the rectangle and
you will see that both the fill and the
| | 02:36 | stroke are selected
allowing you to move both together.
| | 02:40 | It's a common mistake to click only
once on a shape and take just the fill
| | 02:44 | so try to remember that you have to click
twice to get both the stroke and the fill.
| | 02:48 | Affecting the stroke by
itself is, of course, just as easy.
| | 02:51 | Click on the stage somewhere away
from the rectangle, again to deselect
| | 02:54 | everything or you could also hit
Command+ or Ctrl+Shift+A to deselect.
| | 03:00 | Now try clicking once on
the top line of the stroke.
| | 03:04 | Notice that just the top line is
selected and you can move that section away.
| | 03:07 | I am going to hit Ctrl+Z to undo that.
| | 03:10 | If you want to select all of the
stroke you have to double-click somewhere on
| | 03:14 | the stroke and then move
it wherever you'd like to.
| | 03:16 | But I am not going to move it right now.
| | 03:19 | I want to show you a nifty technique.
| | 03:21 | Click on the stage somewhere away from
the rectangle again to deselect and now
| | 03:25 | approach one of the edges of
the rectangle with your mouse.
| | 03:28 | You will notice how a small
icon of a curved line appears.
| | 03:32 | While that's visible, you can change
your rectangle shape by clicking and
| | 03:35 | dragging out the edge.
| | 03:37 | Similarly, if you approach a corner of
your shape with a mouse, you will see
| | 03:41 | a little angle icon appear which allows
you to click and drag the angles to modify.
| | 03:46 | If you select and move your fill away
from your stroke, like this, you will see
| | 03:52 | that this technique still works on
both the fill and the stroke separately.
| | 03:56 | Let's try a different shape.
| | 03:58 | In the toolbar, click and hold down on
the Rectangle tool and some additional
| | 04:02 | tools open in a little dropdown.
| | 04:05 | Select the Oval tool and then in the Property
Inspector, let's choose yellow for the fill.
| | 04:09 | This time let's not have any stroke.
| | 04:12 | When you expand the color palette for
stroke, choose the icon of the white
| | 04:15 | rectangle with a red diagonal line
across it to indicate no stroke, and now draw
| | 04:20 | an oval on the stage.
| | 04:26 | It's time now to see a few behaviors that are
perhaps where Merge Drawing mode got its name.
| | 04:31 | Drag your circle so it's positioned
partially over your red rectangle fill.
| | 04:35 | You will notice that if you leave
the yellow fill selected, you can just
| | 04:41 | continue moving it around.
| | 04:43 | However, try placing it over the red
and then deselect the yellow either by
| | 04:47 | clicking on the stage or pressing
Command+ or Ctrl+Shift+A. Now click on the
| | 04:53 | yellow fill again and move it elsewhere
and you can see that the yellow has kind
| | 04:57 | of cut it shape out of the red.
| | 04:59 | This behavior can be useful or annoying
depending on what you are trying to do.
| | 05:03 | So try to remember that this is how
shapes drawn in Merge Drawing mode behave.
| | 05:07 | You can also kind of work
in the opposite direction.
| | 05:10 | Select your circle and in the Property
Inspector, change the fill color from
| | 05:13 | yellow to the same red as the
rectangle which should be CC0000.
| | 05:19 | Move your red circle over the red
rectangle, the positioning doesn't have to be
| | 05:23 | precise and deselect
everything by clicking on the stage.
| | 05:26 | Now select the red fill again and
you'll see that the two shapes have been
| | 05:30 | fused or merged together.
| | 05:33 | So what if you want to be able to move
all of your shapes on the screen as a unit.
| | 05:38 | This is easily achieved by selecting
all which is Command+A or Ctrl+A on your
| | 05:42 | keyboard and then going to the
Modify menu and choosing Group.
| | 05:47 | You can also hit Command+G or
Ctrl+G on your keyboard to Group.
| | 05:53 | Now when you select any of your
shapes, you select the whole group.
| | 05:57 | And indeed the Property Inspector no
longer shows you've clicked on a shape,
| | 06:00 | instead you've clicked on a group.
| | 06:02 | You can move the group around as you
wish and you can even double-click on the
| | 06:06 | group to step inside of it
to edit the individual shapes.
| | 06:10 | Notice how above the Timeline it
now says Scene 1 and then Group.
| | 06:14 | Your shapes behave just as
they did before they were grouped.
| | 06:17 | You can move them around individually,
you can change their shape, and so on.
| | 06:21 | Just be sure to click Scene 1 to step back
out of the group when you're done modifying.
| | 06:27 | Ungrouping is just as easy.
| | 06:29 | You just select your group and go to
the Modify menu and then choose Ungroup.
| | 06:35 | Now that we've seen Merge Drawing mode,
you might be wondering how to keep
| | 06:39 | your individual shapes and strokes
from cutting each other out or merging
| | 06:42 | unintentionally while drawing, as we saw
the rectangle and the circle do earlier.
| | 06:47 | The solution to this is our best
practice of keeping individual visual items on
| | 06:51 | the screen on their own separate layers.
| | 06:54 | So that's the basics of
working with Merge Drawing mode.
| | 06:57 | Let's go ahead and now practice
with this in our fastCar project.
| | 07:00 | So you can go ahead and close this FLA
since it just has practice shapes in it.
| | Collapse this transcript |
| Working with shapes in Merge Drawing mode| 00:00 | Let's practice adding some Merge
Drawing mode shapes to our fastCar project.
| | 00:05 | So go ahead and open that file if you don't
have it already, from your Exercise files.
| | 00:10 | We're going to draw the sun and our
sun is going to have four elements;
| | 00:13 | yellow points to look like sun's rays,
orange points to look like more sunrays,
| | 00:18 | a yellow circle for the face and
finally, the face itself, made up of
| | 00:22 | sunglasses and a smile.
| | 00:24 | Each item will have its own layer.
| | 00:25 | So we need four new layers.
| | 00:28 | The sun should appear
throughout our entire 96-frame movie.
| | 00:31 | So let's select the background layer
and insert four new layers above it.
| | 00:35 | I'm going to expand my timeline,
so we can see them all at once.
| | 00:40 | Let's rename our new layers bottom to top as
"yellowSun," "orangeSun," "sunCircle" and "sunFace."
| | 00:46 | So with our layers like this, all five
of them that are going to exist for all
| | 00:51 | 96 frames are kind of visually
grouped together on the timeline.
| | 00:55 | Now let's select Frame 1 of the
yellowSun layer and in the toolbar, click and
| | 00:59 | hold down the Oval or the Rectangular,
whichever one you got showing there, and
| | 01:03 | choose the PolyStar tool.
| | 01:05 | This tool allows us to choose
between drawing polygons and stars.
| | 01:09 | So in the Property Inspector under Tool
Settings, click on the Options button.
| | 01:14 | Under the Style dropdown, choose Star;
| | 01:17 | for Number of Sides, choose 7.
| | 01:19 | So we get seven points.
| | 01:21 | For Star point size, type in 0.5 if
it's not already there and click OK.
| | 01:25 | For our star's stroke, let's choose
black and for the sill, let's choose yellow.
| | 01:32 | Click and drag to draw your star and
before you release the mouse, try to have
| | 01:35 | one of the seven points pointing straight down.
| | 01:38 | You can rotate your star afterward with
the Free Transform tool if you don't get
| | 01:42 | the rotation right off.
| | 01:44 | Don't worry too much about the size.
| | 01:46 | Once you've got your star, switch to
your Arrow tool and double-click the star,
| | 01:50 | so you're sure to get the fill and the stroke.
| | 01:52 | Than in the Property Inspector, under
Position and Size, make sure the little
| | 01:56 | icon of the chain looks like a connected chain.
| | 01:59 | If it's a broken chain, click it so that
as we change the width, the height will
| | 02:02 | change proportionally.
| | 02:04 | Type in 100 for your width.
| | 02:11 | Let's zoom in on our star for the next step.
| | 02:15 | Now we'll copy our yellowSun and then rotate
and change the color to orange for the copy.
| | 02:20 | Go ahead and select your star and then hit
Command+ or Ctrl+C on your keyboard to copy.
| | 02:26 | Now lock your yellow star layer and
click in Frame 1 in the orangeSun layer.
| | 02:32 | Go to Edit menu and choose Paste in Place.
| | 02:35 | Press Q on your keyboard to bring up
the Free Transform handles on the star and
| | 02:40 | then rotate it so the points are
juxtaposed with the star behind it.
| | 02:43 | If you can't get the star to line up
just how you'd like, go to the Window menu
| | 02:51 | and choose Transform.
| | 02:54 | The Transform panel comes up and next
to Rotate, you can click and drag the
| | 02:57 | number indicating the rotation to the
right or to the left to rotate the star slowly.
| | 03:02 | Once you're happy with your rotation,
grab the Arrow tool, click on a blank part
| | 03:06 | of the stage to deselect
everything and then click once on the fill.
| | 03:10 | In the Property Inspector, change
the Fill color to orange FF9900.
| | 03:15 | Now we need the circle for the sun's face.
| | 03:18 | Lock the orangeSun layer and
select Frame 1 of the sunCircle layer.
| | 03:22 | This part will be easy.
| | 03:23 | In your tools, choose the Oval tool.
| | 03:25 | The stroke is already set to black, so
just change the fill to the same yellow
| | 03:29 | color we used for our star, FFFF00.
| | 03:31 | Draw a circle that nestles
in the center of the sun.
| | 03:36 | Remember that you can hold down the
Shift key as you draw to have the dimensions
| | 03:39 | of the circle remain
proportionate to each other.
| | 03:45 | Adjust the position of your circle and
when you're done, lock your sunCircle layer.
| | 03:49 | All we have left to do is
to place the sun's face.
| | 03:52 | We imported this into our library, as
a vector Illustrator file previously.
| | 03:57 | So select Frame 1 of the sunFace layer,
open your Library and drag face to the stage.
| | 04:03 | Use your mouse or your Arrow keys to
position the face to your liking and we're done.
| | 04:08 | So our sun looks good and if you've
zoomed in as you worked, now might be a good
| | 04:12 | time to change the zoom back to Fit in Window.
| | 04:17 | Let's test our movie and indeed the
sun appears and persists during the
| | 04:21 | entire 96-frame movie.
| | 04:29 | Go ahead and close your SWF.
| | 04:30 | Now there's only one thing we
might want to do as we go along.
| | 04:33 | While it's good that each part of the
sun has its own layer, if you don't like
| | 04:37 | the position of your sun, you have to
unlock all four layers, hit Command+ or
| | 04:41 | Ctrl+A to select all of the sun
assets and then move them all at once.
| | 04:46 | While that's okay, a better solution
would be to have all the shapes move as a
| | 04:49 | group to prevent accidents. So let's try it.
| | 04:54 | With all of the sun assets selected on
all four of the layers, hit Command+ or
| | 04:59 | Ctrl+G. Now try to move the sun using
your arrow keys and you can see there just
| | 05:04 | one of the layers moves.
| | 05:07 | Our sun pieces weren't grouped
together because they're on different layers.
| | 05:10 | So grouping only works
for items all on one layer.
| | 05:13 | We really do want to keep things on
separate layers because we're going to
| | 05:17 | animate the sun down the line.
| | 05:18 | So for now we're just going
to leave it the way it is.
| | 05:21 | So go ahead and lock all of your
sun layers again and we're done.
| | 05:25 | We've used a lot of the different
drawing tools here, but if you want a
| | 05:28 | detailed explanation of all the drawing
tools and all their options, check out
| | 05:32 | the Flash Essential Training courses
by Todd Perkins here in the lynda.com
| | 05:36 | Online Training Library.
| | Collapse this transcript |
| Creating shapes in Object Drawing mode | 00:00 | Object Drawing mode essentially draws
shapes on the stage that are already
| | 00:04 | grouped together for you.
| | 00:06 | To explore Object Drawing mode, I'm
going to add a speed limit sign to our
| | 00:10 | fastCar project to tell the car
driver that the speed limit is 40.
| | 00:14 | Here I'm working in my
fastCar.fla file from before.
| | 00:18 | The first thing to check is to make
sure that all the layers under the
| | 00:21 | visualContent folder are locked.
| | 00:24 | Our speed limit sign should appear in
the second half of the movie that begins
| | 00:28 | on Frame 49 and also have its own layer.
| | 00:31 | So I'm going to find and select my
movingCar layer and add a new layer above it.
| | 00:36 | Then rename it, to "speed limit sign."
| | 00:39 | Now I'm going to select Frame 49, right-
click and choose Insert Blank Keyframe.
| | 00:46 | Now I'm going to use my Rectangle tool
but before drawing, make sure that we're
| | 00:49 | using Object Drawing mode.
| | 00:51 | Notice the little icon that looks like
a little circle within a square in the
| | 00:55 | Properties area, underneath the toolbar.
| | 00:58 | Remember that this icon is how to toggle
between Merge and Object Drawing modes,
| | 01:02 | and that the lighter color of the
icon indicates Merge Drawing mode.
| | 01:07 | Click on the icon to make sure it's
darker gray, so that you're in Object
| | 01:10 | Drawing mode, and with that done,
let's set the stroke for our rectangle to
| | 01:15 | black and the fill to white.
| | 01:18 | Let's make the stroke for
our sign little bit thick.
| | 01:21 | So use the Strokes slider to change it to
3 or you can just type in 3, if you prefer.
| | 01:27 | Also under Rectangle options, we can make a
rectangle corners be more or less rounded.
| | 01:33 | Make sure the little image of
the chain looks like it's unbroken.
| | 01:37 | This way all the corners will use the
same value for their corner radius and
| | 01:41 | now type 5 in the box.
| | 01:43 | The others should follow suit.
| | 01:45 | Draw a vertical rectangle on the stage
kind of over on the left side about yea big.
| | 01:50 | The size doesn't have to be exact.
| | 01:53 | Notice immediately in the Property
Inspector that we're looking at a drawing object.
| | 01:58 | If this were Merge Drawing
mode that would say shape.
| | 02:01 | So now when I use my Arrow tool and
drag the rectangle around, you'll notice
| | 02:05 | that the outline or the stroke
and the fill move around together.
| | 02:10 | You can't select either one of them
separately like you can with Merge Drawing mode.
| | 02:13 | Now I'm going to click on a different
part of the stage to deselect and get
| | 02:18 | ready to draw a pole to hold the sign up.
| | 02:21 | We've talked about how a best
practice is to have each visual piece on the
| | 02:24 | screen be on its own layer.
| | 02:26 | In this case, I'm going to break
this guideline and have the pole and the
| | 02:29 | sign in the same layer.
| | 02:31 | My reasoning is that I don't
anticipate animating the sign in any way so we
| | 02:35 | don't mean to maintain
individual layers for that.
| | 02:38 | If I want to move the sign around on the stage,
I'll want to move all the pieces together.
| | 02:42 | By having them all on one layer, I can
easily group them and move them around.
| | 02:47 | So in this case, having related visual
objects all together in the same layer
| | 02:51 | seems like an okay thing.
| | 02:53 | This is going to be a wooden pole.
| | 02:55 | So I'm going to go back to my
Rectangle in the toolbar and in the Property
| | 02:58 | Inspector change the fill to brown.
| | 03:00 | I'm going to choose 663300.
| | 03:04 | The stroke thickness can be made very thin.
| | 03:06 | So let's type in 0.10 here.
| | 03:10 | Also let's change the corner radius
setting down at the bottom back to 0, so our
| | 03:14 | rectangle pole has sharp corners.
| | 03:17 | Now I'm going to draw the
pole underneath the sign.
| | 03:20 | I'm going to use the Arrow tool to move
the pole on top of the sign and then I'm
| | 03:25 | going to click a blank part of
the screen to deselect everything.
| | 03:28 | Now I'm going to move the pole away again.
| | 03:32 | Notice that both rectangles
remain in their own discrete shapes.
| | 03:35 | If this were a Merge Drawing mode, the
area of the sign that had been covered by
| | 03:39 | the pole would have been chopped out.
| | 03:42 | You can see how Object Drawing
mode really lives up to its name.
| | 03:45 | Each shape you draw is its own individual
shape, unaffected by others on the same layer.
| | 03:50 | This is unlike Merge Drawing mode.
| | 03:52 | Even though it's a discrete object, you
can still modify a drawing object easily.
| | 03:56 | For instance, I can click on the white
rectangle and in the Property Inspector
| | 04:00 | easily change the fill to something else.
| | 04:02 | I'm going to change it back to white.
| | 04:06 | Now I'm going to click on the stage to
deselect everything and approach one side
| | 04:10 | of the rectangle with the mouse.
| | 04:12 | Notice the little icon of
the curved line that appears.
| | 04:16 | This allows me to drag the edge
of the shape out to modify it.
| | 04:21 | I'm going to undo this change, but know
that you can further edit your drawing
| | 04:24 | objects by double-clicking on
them to step into the group.
| | 04:29 | Notice how at the upper left of
the timeline, it now says Scene 1 and
| | 04:32 | then Drawing Object.
| | 04:34 | Additionally, everything back up on
the main timeline looks faded out.
| | 04:37 | Now that we stepped into the drawing object,
I'm going to select the fill of the rectangle.
| | 04:42 | Look in the Property
inspector, it says Drawing Object.
| | 04:46 | Now I'm going to select one side of
the stroke and notice that the Property
| | 04:49 | inspector still says Drawing Object.
| | 04:52 | However, the behavior is
really that of simple shapes.
| | 04:55 | I can select and move the stroke away
to the right all by itself, or I could
| | 05:00 | select the fill individually
and move that away as well.
| | 05:03 | I'm going to try moving the fill on
top of some of the stroke and then click
| | 05:07 | the stage to deselect.
| | 05:09 | I'm going to move the fill away and
you'll see that the stroke that was covered
| | 05:12 | up is now cropped off.
| | 05:14 | Indeed, our items on the screen
here are behaving like shapes.
| | 05:17 | I'm going to undo all of these changes
and then click Scene 1 to return to the
| | 05:22 | main timeline again.
| | 05:24 | So you can see that what Object
Drawing mode really does for you is group the
| | 05:28 | fill in stroke of a shape for you
automatically when you draw the shape, instead
| | 05:32 | of you having to do it yourself.
| | 05:34 | This can be a great convenience, but
if you find yourself wanting a drawing
| | 05:37 | object to behave more like a merge
drawing object, after you've created it,
| | 05:41 | simply select the shape, right
click and choose Break Apart.
| | 05:45 | When you do this, the fill and the
stroke are both turned into shapes which we
| | 05:49 | can see by looking in the Property inspector.
| | 05:51 | So I'm going to adjust my pole as
necessary to make sure that it looks good and
| | 05:56 | then click somewhere on the stage to deselect.
| | 05:58 | I'm going to finish out
the sign by adding some text.
| | 06:01 | We'll go into the details of
using the Text tool a little later on.
| | 06:05 | For now, I'm going to type Speed Limit 40.
| | 06:20 | Our final step is to group
all the sign parts together.
| | 06:23 | You can use your Arrow tool to draw
a box around all three objects, which
| | 06:26 | selects all of them.
| | 06:28 | Or you could use Command+A or Ctrl+A on
your keyboard to select all on this layer.
| | 06:34 | With the sign parts selected, I'm going
to go to Modify menu and choose Group.
| | 06:38 | Alternatively, you can hit Command+
or Ctrl+G to group the pieces together.
| | 06:42 | I'm going to adjust the final position
of my sign and notice in the Property
| | 06:47 | Inspector that it shows
we're working with a group.
| | 06:49 | If you want to adjust the
individual pieces again, you can either go to
| | 06:53 | Modify and then Ungroup or you can just double
- click on the group to step into it, like so.
| | 06:59 | Since I'm done with my adjustments, I'm
just going to click on Scene 1 to return
| | 07:03 | to the main timeline and now
lock the speed limit sign layer.
| | 07:07 | I'm going to go ahead and test the
movie to see the finished result.
| | 07:10 | The entered text appears for the first
four seconds, and then for the last four
| | 07:15 | seconds we see the speed limit
sign ready to warn our driver.
| | 07:18 | She'll be animating onto the
screen from right to left soon.
| | 07:23 | So Object Drawing mode is really just a
convenient way to have a shape's stroke
| | 07:27 | and fill grouped together for
you when you draw the shape.
| | 07:30 | If you want a detailed explanation
of all the drawing tools and all their
| | 07:34 | options, check out the Flash Essential
Training courses by Todd Perkins here in
| | 07:39 | the lynda.com Online Training Library.
| | Collapse this transcript |
| Transforming visual objects | 00:00 | So far we've seen a few different
ways to transform objects on the stage.
| | 00:04 | We will take a more in-depth look here
at different ways to transform visual
| | 00:07 | objects, so you can add
more tools to your toolbox.
| | 00:10 | Open the file called
rocketToMars.fla in your Exercise Files.
| | 00:15 | First we will look at some of
the options under the Modify menu.
| | 00:19 | Click on one of the big yellow
stars on the right side of the stage.
| | 00:22 | If you open your Property Inspector,
you'll notice that this is just a shape.
| | 00:26 | Note that the top point of the star is
kind of pointing to the right and now go
| | 00:30 | to Modify menu and then choose
Transform and then Flip Horizontal.
| | 00:36 | The stars flipped over and
it's the mirror image of itself.
| | 00:38 | Note that the top point is now
kind of pointing to the left.
| | 00:41 | You can compare it to the other
big stars if you need to as well.
| | 00:44 | So now I'll select the rocket on the
stage and to do a similar thing, go to the
| | 00:49 | Modify menu, choose Transform and Flip Vertical.
| | 00:52 | Now that seems pretty
straightforward so let's move on and I'm going to
| | 00:57 | select the big star again.
| | 00:58 | I am going to open the Modify
menu and then Transform again.
| | 01:03 | The choices of Distort and Envelope
give you slightly different options for
| | 01:07 | different ways you can
change the shape of your star.
| | 01:09 | All of the other options left here
you can also access by using the Free
| | 01:13 | Transform tool from the toolbar.
| | 01:14 | So I am going to go ahead and select my
star and grab the Free Transform tool.
| | 01:20 | You could also just hit Q on
your keyboard and you will see the
| | 01:23 | transformation handles appear.
| | 01:25 | You can use those Free Transform
handles to Scale, Rotate and Skew.
| | 01:29 | I am going to mouse over this control
point with my mouse and wait for that
| | 01:33 | double-headed arrow to appear.
| | 01:35 | You can drag like so to scale
the vertical dimension or the
| | 01:38 | horizontal dimension.
| | 01:40 | If you want to scale both dimensions at
once, you can do that, and if you hold
| | 01:43 | down the Shift key, both dimension
scale in proportion to each other.
| | 01:49 | I can rotate an object by approaching
one of the corners until I see the
| | 01:53 | circle arrow and then just drag around.
| | 01:57 | Finally to skew, approach one of the
edges with the mouse until you see the Skew
| | 02:01 | icon appear and skew away.
| | 02:05 | Making sure my star is still selected you
could go to the Window menu and choose Transform.
| | 02:13 | Alternatively, you could hit Command+
or Ctrl+T. The Transform panel appears
| | 02:18 | and you can control the scale,
skew and rotation from here as well.
| | 02:22 | I will make sure that my star ends up
a little bit smaller than the others.
| | 02:26 | So you can see there's a lot of control
and information offered to you through
| | 02:31 | the panels and the Free Transform tool.
| | 02:33 | So moving on, lining up things in
your Flash movie is easy as well.
| | 02:38 | To get out of Free Transform mode, just
click on your Arrow tool in the toolbar.
| | 02:42 | Now I am going to hold down my Shift
key and select all three of the big stars
| | 02:45 | at the same time so we can align them.
| | 02:48 | The Align panel is under the Window
menu then Align or you could hit Ctrl+ or
| | 02:53 | Command+K on your keyboard.
| | 02:55 | There are a lot of choices in
the Align panel as you can see.
| | 02:59 | For instance, you could align
your stars left, center or right.
| | 03:06 | Let's have an even amount of
space between all the stars.
| | 03:09 | For this, I am going to
choose Distribute Center.
| | 03:12 | You also have some
interesting controls in Match size.
| | 03:16 | Flash looks at all the selected
objects and then has all of them match the
| | 03:19 | size of the largest.
| | 03:21 | So here I will match the width and then
match the height and you can see the effect.
| | 03:26 | Finally notice this little
checkbox that says Align to stage.
| | 03:30 | When I've aligned my stars so far,
Flash aligns them relative to each other.
| | 03:34 | If you check Align to stage and then
align left, the objects are left aligned
| | 03:38 | relative to the dimensions of the stage.
| | 03:41 | Let's now play a little bit with fills.
| | 03:44 | You've probably already seen how you
can select an object like our red Mars
| | 03:48 | planet and in the Properties panel
click on the fill color chip to change the
| | 03:52 | fill to something like yellow.
| | 03:55 | Now with my planet still selected, I
am going to pop open the Color panel by
| | 03:58 | clicking on the icon of the Paint palette.
| | 04:02 | Notice the top dropdown which says
Solid and this makes sense since Mars is
| | 04:06 | currently a solid yellow color.
| | 04:08 | When I change my dropdown to Linear
Gradient, then you will see that we now have
| | 04:12 | a gradient blend of two colors
that go from one into the other.
| | 04:17 | You could also try changing your
Gradient dropdown from Linear to Radial to make
| | 04:21 | the gradient more circular.
| | 04:24 | You could also change the colors used
by clicking on the color indicators here.
| | 04:31 | I think Mars should be a little bit more
red so I am going to swap the positions
| | 04:35 | of these two color indicators.
| | 04:36 | There are a lot more controls
available to you regarding gradient fills here
| | 04:42 | and in the Gradient Transform tool, which is
under the regular Free Transform tool here.
| | 04:48 | You can play with these on your own
or for an in-depth guided tour, check
| | 04:52 | out the Flash Essential Training courses
here in the lynda.com Online Training Library.
| | 04:56 | I am going to open my Color panel
one more time and in the Gradient
| | 05:02 | dropdown, choose Bitmap fill.
| | 05:06 | As the name implies, this allows you to
use a bitmap fill to fill up your object.
| | 05:11 | Flash asks you where the image you want
to use is located and there's an image
| | 05:15 | called mars.png in the start
folder in the Exercise Files.
| | 05:25 | Click Open and then click on the stage
to deselect and that now you can really
| | 05:29 | see the image applied is the fill for Mars.
| | 05:32 | So we have seen here some of the main ways
you can transform visual objects in Flash.
| | 05:36 | Using panels, as well as all the
options for the Free Transform tool, and
| | 05:40 | gradients, are all powerful ways to
make your visual objects engaging for
| | 05:44 | your users.
| | Collapse this transcript |
|
|
4. Understanding SymbolsIntroducing symbols| 00:00 | One core concept that you'll use
over and over again in Flash is Symbols.
| | 00:04 | Symbols are basically reusable visual
assets and you'll see them as building
| | 00:08 | blocks for animation and interaction.
| | 00:10 | Let's jump in and practice with symbols.
| | 00:13 | So, our first step is to
open a new blank FLA document.
| | 00:16 | Now, I am going to draw a simple circle
shape on the stage and make it a symbol.
| | 00:20 | I'll select the Oval tool and for this
example I am going to have a circle with
| | 00:24 | a red fill and a black stroke.
| | 00:26 | Now, I'll draw my circle on the stage,
and if you click on your shape and
| | 00:30 | open the Property Inspector, it tells us that
this blob of color on the stage is indeed a shape.
| | 00:36 | This is what we're using for our
example here but know that you can make almost
| | 00:40 | anything into a symbol; shapes drawn
and Merge or Object drawing modes, bitmap
| | 00:44 | images or whatever else.
| | 00:46 | So, notice that the Library remains empty.
| | 00:48 | We won't actually see anything in the
Library until we convert our shape into a symbol.
| | 00:53 | So, there are multiple ways you can do this.
| | 00:55 | The first is to select the entire shape,
being careful to select the fill and
| | 01:00 | stroke, and then dragging it to the Library.
| | 01:02 | You get a dialog box asking for
information about the new symbol.
| | 01:06 | I am going to cancel out of the box for now.
| | 01:09 | You could also select the entire shape and
then right-click to choose Convert to Symbol.
| | 01:16 | I'll cancel out of the dialog box again.
| | 01:19 | You can also select the shape on the
stage, then go to the Modify menu, and
| | 01:23 | choose Convert to Symbol, or of
course, you could just press F8.
| | 01:27 | Any of those methods work, and so now we'll
give Flash some information about the symbol.
| | 01:32 | Let's give it a name of "Circle," and in
this dropdown, let's make it a Movie Clip.
| | 01:36 | Also notice the
Registration point of our new symbol.
| | 01:40 | The X and Y position on the stage is
going to be measured from this point.
| | 01:45 | The default is the upper-left corner.
| | 01:47 | You can make your symbols have their
registration point anywhere you want to, but
| | 01:51 | I'd recommend picking one and sticking
with it for all symbols you create, so
| | 01:55 | the registration point is
consistent across all of them. Now click OK.
| | 02:00 | You should notice that two things have happened.
| | 02:02 | One is that we now have circle
show up as a symbol in the Library.
| | 02:06 | The second is that when we click on
our new movie clip symbol and open the
| | 02:09 | Property Inspector, it shows us that this
is an instance of that Circle movie clip.
| | 02:15 | It also tells us the X position
of 239 and the Y of 134.
| | 02:21 | Remember that we chose to have the
Registration point beyond the upper left of
| | 02:25 | the symbol and if we quickly turn on
our rulers by going to the View menu and
| | 02:29 | choosing Rulers, you can confirm the X
and Y position by looking at that upper
| | 02:34 | left-hand corner registration point. So cool!
| | 02:37 | We have this symbol but why is it useful?
| | 02:40 | Let's try dragging and dropping another
two copies of this circle out of the Library.
| | 02:45 | Think of this symbol in the
Library as a blueprint for the circle.
| | 02:49 | Each time you drag a new one out to the
stage, you're making another copy, or as
| | 02:53 | the nomenclature is in Flash,
you're creating another instance.
| | 02:56 | It's the same concept as
maybe a blueprint for a house.
| | 03:00 | You have one set of plans for a house
and if your neighborhood is like mine
| | 03:04 | you'll have several instances or copies
of that house built in the neighborhood.
| | 03:08 | Instead of drawing items on the stage
over and over like a bunch of raindrops or
| | 03:12 | an army of robots, you can
just use copies of the blueprint.
| | 03:15 | This not only saves you some work
but it can also save you on file size.
| | 03:19 | Let's delete two instances of our
circle from the stage to demonstrate this.
| | 03:24 | Now, publish your movie.
| | 03:27 | You can close the SWF file right away.
| | 03:29 | What we're interested in is the
final file size of this baseline movie.
| | 03:33 | So, we can do that by clicking on the
stage and opening the Property Inspector.
| | 03:37 | Here, in SWF History, we see that
our movie was 656 bytes. All right!
| | 03:42 | So, let's say we need two more circles.
| | 03:44 | I am going to grab my Oval tool again and draw
a second circle and of course a third circle.
| | 03:49 | I am not going to turn them into symbols,
just leave them as shapes on the stage.
| | 03:54 | Now, I am going to republish and
again close the SWF right away.
| | 03:59 | Back in the FLA, I am going to
click on the stage and look at the
| | 04:02 | Property Inspector.
| | 04:03 | Our final file size with the
three circles is 818 bytes.
| | 04:07 | So, now I am going to compare using symbols.
| | 04:09 | I am going to delete the two shapes
off of the stage and now drag two more
| | 04:13 | instances of this Circle
movie clip from the Library.
| | 04:16 | I am going to publish the SWF,
close the SWF, and then open the
| | 04:23 | Property Inspector.
| | 04:24 | Our final file size this time is 680
bytes, smaller than when we had circles we
| | 04:29 | had just drawn on the stage and
that's part of using the power of symbols.
| | 04:33 | Our file size is smaller when using
multiple instances of the symbol because
| | 04:37 | Flash only has to remember the
definition of the circle once.
| | 04:41 | Each copy on the stage points back to
the symbol as opposed to Flash having to
| | 04:45 | remember a separate definition for each circle.
| | 04:47 | Of course, in our example here the
difference in file size is not all that
| | 04:51 | dramatic but hopefully you can project
that file size savings could really add
| | 04:55 | up when you're dealing with maybe
multiple copies of complex artwork or bitmaps
| | 05:00 | or in a case where you need a whole
colony of prairie dogs or maybe a forest.
| | 05:04 | So, there's another thing to know about symbols.
| | 05:06 | Each individual instance can be
modified but they're all still tied back to the
| | 05:10 | blueprint in the Library.
| | 05:12 | Just like you can have three houses
built from the same blueprint but paint each
| | 05:16 | one a different color, so
they all look different.
| | 05:19 | Here's what I mean.
| | 05:20 | Let's select one of our Circle
symbols on the stage and modify it.
| | 05:23 | I am going to press Q on my keyboard,
so the transformation handles appear
| | 05:27 | around the instance of the circle and I am
going to shrink it a little bit and skew it.
| | 05:30 | Now, I am going to grab my Arrow tool
and selecting a second instance of this
| | 05:36 | circle, I am going to open my Properties panel.
| | 05:39 | Under Color Effect, I am going to choose Alpha.
| | 05:42 | I'll change the Alpha to 50%,
so the circle looks faded out.
| | 05:47 | You can see here that each one of the
instances of this symbol can be modified,
| | 05:51 | so they each look different but they're all
still tied back to the symbol in the Library.
| | 05:56 | You can see this when you double-click
on one of the instances on the stage.
| | 06:00 | Any one of the three is fine.
| | 06:02 | The screen changes and you'll notice
that at the top of the screen it says
| | 06:06 | Scene 1 and then Circle.
| | 06:07 | This is indicating that we stepped
into the timeline of this Circle symbol.
| | 06:11 | You can also see the other instances of this
circle on the stage are now kind of faded out.
| | 06:16 | This is called Edit In-Place mode.
| | 06:18 | I am editing the Circle symbol definition
right in place where it was on the stage.
| | 06:22 | Yet, we can still see where that instance
is relative to the other stuff on the stage.
| | 06:27 | So let's change our Circle symbol definition.
| | 06:29 | I am going to click on the fill of
the circle and change it to blue.
| | 06:34 | And as soon as we do that, you'll
see that all the instances on the stage
| | 06:37 | reflect the change made to the blueprint.
| | 06:39 | To step out of Edit In-Place mode, let's
just click on Scene 1 at the top of the
| | 06:43 | screen, so we're back on the main timeline.
| | 06:46 | There's also another way to edit a symbol.
| | 06:48 | Instead of double-clicking on an
instance on the stage, I am going to
| | 06:51 | double-click on the symbol in the Library.
| | 06:53 | Be sure to click on the little picture
of the cog not the name, otherwise Flash
| | 06:57 | will think you're trying to rename the symbol.
| | 07:00 | Here, you can see that once again
we're in Scene 1 and then Circle.
| | 07:04 | So, we've stepped into the timeline
of this Circle blueprint, but since we
| | 07:08 | double-clicked on the symbol in the
Library to edit, this time we don't see all
| | 07:11 | the other stuff sitting on
the stage in the background.
| | 07:14 | This is called Symbol Editing mode.
| | 07:17 | So, let's select the fill of our circle
again and this time change it to green.
| | 07:23 | Now, click on Scene 1 at the top of the
screen to go back to the main timeline
| | 07:27 | and you'll see yet again how our changes
to the blueprint have been reflected in
| | 07:30 | each one of the copies, and then of
course, each one of the copies can be
| | 07:34 | further modified individually but the
basic structure of each one points back to
| | 07:39 | the Circle movie clip symbol sitting in
the Library, which now has a green fill.
| | 07:43 | One best practice to keep in mind as
you work on projects is to periodically
| | 07:47 | clean out and organize your Library symbols.
| | 07:49 | For instance, here I am going to click
the Folder icon in the Library to create
| | 07:53 | a Shapes folder and drag
my Circle symbol into it.
| | 08:00 | If you come to the end of a project
and have Library symbols that aren't
| | 08:03 | actually used in your movie, deleting
them out of the Library will make it much
| | 08:07 | easier to figure out what's actually
used in the movie than when you open the
| | 08:10 | FLA, say, four months down the road.
| | 08:13 | Also, naming each symbol something
intuitive and descriptive like "Circle" is much
| | 08:18 | better than the default name Flash will
come up with, which is usually something
| | 08:21 | not very unique like
symbol 1, symbol 2, symbol 3.
| | 08:25 | I once bought a Flash template that had
been originally developed by someone else.
| | 08:29 | Not only were the symbols named things
like symbol 1, symbol 2, symbol 3 but
| | 08:33 | there were multiple copies
of the symbols in the Library.
| | 08:36 | The symbol copies were almost all
exactly alike, so it was really hard to tell
| | 08:40 | what was actually being used in the SWF.
| | 08:42 | It was a horrible time
waster to sort that out all.
| | 08:45 | So, whether you need to have a bunch
of Smurfs on the stage or just need a
| | 08:49 | good way to organize your movie's
content, I hope you can see some of the
| | 08:53 | advantages of using symbols.
| | 08:55 | There's more than just one kind of
symbol in Flash and we'll explore the
| | 08:58 | differences between them in the next movie.
| | Collapse this transcript |
| Working with movie clips and graphic symbols| 00:00 | There are three different
types of symbols in Flash.
| | 00:03 | Let's take a look at two of them
that are similar to each other;
| | 00:05 | Movie Clips and Graphic symbols and
discuss why you would use each one.
| | 00:09 | Let's start with a new blank FLA document
and examine the Movie Clip symbol first.
| | 00:14 | Let's draw our star so I'm going to
grab my PolyStar tool and now in the
| | 00:18 | Property Inspector under the
Tools Settings, choose Options.
| | 00:23 | Under the dropdown, I'm going to
choose star since I don't want a polygon and
| | 00:27 | I'll make it have five sides or points.
| | 00:29 | Let's give it a black stroke and a
yellow fill and draw the star on the stage.
| | 00:36 | Now to convert it to a symbol, you may
remember from the previous video that
| | 00:40 | there are a lot of ways to do this.
| | 00:41 | For now, I'm going to select the
shape with my Arrow tool, right-click and
| | 00:45 | choose Convert to Symbol.
| | 00:46 | The Convert to Symbol dialog box appears.
| | 00:49 | So I'm going to give my symbol a name
that makes sense, so "star" and make sure
| | 00:54 | the dropdown is set to Movie Clip and click OK.
| | 00:58 | So now if you open your Library, you see
the star movie clip appearing there and
| | 01:03 | if I select the Movie Clip symbol on
the stage and open the Property Inspector,
| | 01:07 | yeah, it tells me that this is a
movie clip and it's an instance of star.
| | 01:11 | There is one other important thing
to note here and that's the spot where
| | 01:15 | it says Instance Name.
| | 01:17 | I can type in a name here
for my symbol, maybe "myStar."
| | 01:22 | And what this does is give Flash a
hook into the symbol instance if I want to
| | 01:27 | control it using ActionScript.
| | 01:29 | Say I had five different stars on the
stage and I wanted to control only one of
| | 01:33 | them with ActionScript.
| | 01:34 | Well, how is Flash going to
know which one I want to control?
| | 01:37 | The Instance Name is the hook you use
to connect ActionScript and individual
| | 01:41 | movie clips on the stage.
| | 01:42 | Once Flash knows which symbol on the
stage you are trying to talk to, you can
| | 01:46 | move it, rotate it, scale it, make it
fade in and out, make it clickable and a
| | 01:50 | number of different other
things with ActionScript.
| | 01:53 | We don't need to control the star with
ActionScript right now, but there's one
| | 01:56 | more thing to note about the Movie Clip symbol.
| | 01:59 | Let's double-click on the star movie
clip and you will notice on the upper-left
| | 02:02 | hand of the screen it now
says Scene 1 and then star.
| | 02:07 | As we've seen before, we've actually
stepped inside our star movie clip.
| | 02:11 | You can see that it has its own
timeline just like the main timeline, it can
| | 02:15 | have its own set of layers so we
can add an extra layer or two here.
| | 02:19 | It can have its own keyframes, its
own animation, whatever you want.
| | 02:23 | Each movie clip having its own
timeline is a really powerful feature, both in
| | 02:27 | terms of ActionScript and animation.
| | 02:30 | Breaking things into individual
pieces as movie clips means you can control
| | 02:34 | different parts of your Flash movie
separately and we will explore that a little later on.
| | 02:38 | For now, let's click on Scene 1, back on the
upper-left again and go back to the main timeline.
| | 02:43 | For now, know that Movie Clip symbols
are useful because they have their own
| | 02:47 | timelines, they can be animated and
ActionScript can communicate to them via an Instance Name.
| | 02:53 | In fact, the entire Flash FLA
document is a movie clip of sorts.
| | 02:58 | Movie Clip is the most versatile and
powerful of the three symbol types.
| | 03:02 | Let's move on now to our second
type of symbol, a Graphic symbol.
| | 03:06 | For this, I'm going to draw
another shape, this time a circle.
| | 03:09 | So grab your circle or Oval tool and
give it a red fill with a black stroke.
| | 03:13 | Draw your oval and then select it and
now I'm going to right-click and choose
| | 03:21 | Convert to Symbol and give it an
intuitive name so how about "Circle" and this
| | 03:26 | time make it a Graphic symbol.
| | 03:30 | Open your library and the Circle symbol appears.
| | 03:34 | Notice also the difference in
the icons, next to the symbols.
| | 03:38 | The star movie clip has an icon that
looks like a gear the circle is more like a
| | 03:42 | conglomeration of shapes.
| | 03:44 | Now double-click on the Circle instance
on the stage and you will annual notice
| | 03:48 | again how at the top-left it
says, Scene 1 and then Circle.
| | 03:50 | So once again, we have stepped
inside the symbol to its own timeline.
| | 03:55 | So I can select my fill
here and change it to green.
| | 03:57 | I could make the circle bigger I
could skew it, rotate it, do all kinds
| | 04:01 | of different things.
| | 04:02 | The thing to notice here is that
Graphic symbols just like Movie Clip symbols,
| | 04:07 | have their own timeline and you can edit the
content on that timeline as well as animate it.
| | 04:12 | So let's click Scene 1 back in the
upper left again, to step out of that
| | 04:16 | Graphic symbols timeline.
| | 04:19 | So what's really the difference between
Movie Clip symbols and Graphic symbols?
| | 04:22 | So far they look about the same and
they both have their own timeline, and they
| | 04:27 | can both be animated.
| | 04:28 | Well, one big difference is that
Graphic symbols can't be directly
| | 04:32 | manipulated by ActionScript.
| | 04:34 | For instance, if I wanted to make my
circle clickable, well, I can't, because
| | 04:39 | it's a Graphic symbol.
| | 04:40 | To prove it to you, click on that
Circle instance to make sure it's selected
| | 04:44 | and open up the Property Inspector,
and indeed, here it shows it's a Graphic
| | 04:48 | symbol called Circle, but there's no
field to type in an Instance Name like
| | 04:53 | there was for movie clips.
| | 04:54 | If there's no Instance Name, Flash
can't identify it to manipulate it with
| | 04:58 | ActionScript, and that is really the biggest
difference between movie clips and graphics.
| | 05:03 | There are some other differences and
tricks between movie clips and graphics,
| | 05:06 | when it comes to control of timeline
animation and we'll talk about that later
| | 05:10 | in this section about tweening.
| | 05:12 | So when you're trying to decide, should
I make my new symbol a movie clip or a
| | 05:17 | graphic, just keep in mind if you think
you might ever want to make the symbol
| | 05:21 | clickable or otherwise control it
with ActionScript, make it a movie clip.
| | 05:25 | Graphic symbols are a better choice to
contain maybe something like a background
| | 05:29 | graphic that's just going to do
something simple, like fade in and out or an
| | 05:33 | animation that's very simple.
| | 05:35 | So there we have two very commonly used
symbol types, Movie Clips and Graphics.
| | 05:40 | To review, they both have their own
internal timelines and are best for creating
| | 05:44 | animation or acting as
containers for visual elements.
| | 05:48 | But only Movie Clips can be given
Instance Names in order to become clickable or
| | 05:53 | otherwise be controlled by ActionScript.
| | Collapse this transcript |
| Introducing buttons | 00:00 | Let's take a look at the third and final
type of symbol in Flash, the Button symbol.
| | 00:05 | Open up a blank FLA file, and let's
create a button by grabbing our Rectangle
| | 00:09 | tool, choosing a blue fill, and then
under Rectangle Options, I'm going to bump
| | 00:14 | up my rounded corners measurement here,
so we get slightly rounded corners.
| | 00:18 | Then, we'll draw a rectangle on the stage.
| | 00:20 | Now, with my Arrow tool, I'm going to
select the rectangle shape, right-click,
| | 00:24 | and choose Convert to Symbol, and
let's give it a name of Rectangle.
| | 00:28 | Make sure you've selected
Button from the Type dropdown.
| | 00:33 | Flip over to your Library
really quick and you will see, aha!
| | 00:35 | Yup, there is my new Button symbol.
| | 00:39 | Now, let's double-click on the instance on
the stage to go into the button's own timeline.
| | 00:45 | You'll notice that just like with the
other symbol types, on the upper-left it
| | 00:48 | says Scene 1 and then Rectangle.
| | 00:51 | So we've stepped into the
button, we're editing its timeline.
| | 00:54 | You can see that a button timeline is different
than that of a movie clip, or a graphic symbol.
| | 00:59 | We've got four frames here, each one that
has to do with what the user's mouse is doing.
| | 01:04 | So the first keyframe shows what the
button will look like when the user's mouse
| | 01:07 | is up, or unclipped.
| | 01:09 | Basically, what the button looks like
when it's just hanging out on the stage.
| | 01:13 | The next frame is for what that button
will look like when the user's mouse is
| | 01:16 | hovering over the rectangle.
| | 01:18 | Well, let's give our users some nice
visual feedback when they mouse over our
| | 01:22 | button by changing the color.
| | 01:24 | So the way we do that, is in the Over
frame, we will right-click and choose
| | 01:28 | Insert Keyframe, and indeed, Flash
created the keyframe, you can tell by the
| | 01:32 | filled in black circle in the Over state.
| | 01:35 | Flash copied the information from
the Up frame into the Over frame.
| | 01:39 | So right now, Up and Over look exactly the same.
| | 01:43 | So making sure you have the Over frame
selected, let's click on the fill of the
| | 01:47 | rectangle, and change it to red.
| | 01:52 | Now, let's do the same
thing for the Down keyframe.
| | 01:54 | Let's change the color of the button
when the user's mouse is pressed down.
| | 01:58 | Right-click on the Down keyframe, choose
Insert Keyframe, and select the fill in
| | 02:03 | the rectangle, this time,
change it to green. Voila!
| | 02:06 | Let's test our movie by pressing Ctrl+
Enter and indeed, when the mouse is up or
| | 02:12 | just not touching the rectangle, it's
blue, when it's over, our button turns
| | 02:16 | red, and when I click down
with my mouse, it's green.
| | 02:20 | So what if you want your
button to have some text?
| | 02:22 | Well, that's easily done.
| | 02:23 | So let's close the preview, and back
on our Button timeline, let's add a
| | 02:27 | layer to our button.
| | 02:30 | You can have as many layers in the
timeline of your button symbol as you want,
| | 02:33 | just like the main timeline.
| | 02:35 | Let's grab our Text tool, and set some settings.
| | 02:38 | I'm going to choose Arial, Bold, Italic,
16 points is fine, and then I am going
| | 02:46 | to make my text black.
| | 02:47 | Move your playhead to the Up keyframe,
and now click on the stage and type the
| | 02:52 | words Click Me on top of your button.
| | 02:55 | Go ahead and adjust the position
with your mouse or your Arrow keys.
| | 03:02 | So you can see that Flash filled-in
the words Click Me on the Over and Down
| | 03:07 | frames as well and now if you hit
Command+ or Ctrl+Enter to test your movie, you
| | 03:12 | now see your nice button
with the text working properly.
| | 03:14 | So that's a handy way to quickly create a
button that reacts to what the user is doing.
| | 03:22 | Let's close our preview and go back to
the Button timeline and delete the text
| | 03:26 | layer, so we can look at something else.
| | 03:28 | So we've got Up, Over, and Down,
what about the Hit state of the button?
| | 03:33 | Hit, as the name kind of implies, defines
what area of the button is hot or clickable.
| | 03:39 | Notice that even though there is no
keyframe in the Hit frame, Flash is
| | 03:43 | looking back to the closest previous keyframe
that has something drawn in it, and using that.
| | 03:49 | So in our case, it's
looking at the Down keyframe.
| | 03:52 | And you know, it's fine
to leave a button this way.
| | 03:54 | You don't have to define the Hit state.
| | 03:56 | You don't even have to define
Over and Down if you don't want to.
| | 04:00 | If you just have a keyframe on the
Up state, and nothing on the other
| | 04:03 | frames, your button will just always be blue
or whatever you have defined in the Up keyframe.
| | 04:09 | Having that Hit state can be nice
for some alternative options though.
| | 04:13 | Maybe you want the button to
highlight when the mouse just gets close to it
| | 04:17 | but not on it, so the Hit area being
a little bit bigger than the actual
| | 04:22 | colored part of the button.
| | 04:23 | This can be useful in maybe something
like a children's game where the child is
| | 04:27 | still practicing using the mouse, and
having that extra hit area makes it easier
| | 04:31 | for them to actually get the
mouse on the button. So let's try it.
| | 04:35 | Right-click in the Hit state,
and choose Insert Keyframe.
| | 04:41 | Now, select the rectangle and let's
Hit Q on our keyboard to bring up the
| | 04:45 | Free Transform handles.
| | 04:46 | I am going to scale my Hit area a
little bit bigger, and then use my Arrow keys
| | 04:53 | to center it on the stage.
| | 04:55 | Now, if you test, you can see that
when the mouse gets close to the colored
| | 04:58 | area, but not quite on top of it, the
button starts reacting because the Hit
| | 05:03 | state is bigger than the colored area.
| | 05:05 | Let's close the SWF and go back to the FLA.
| | 05:08 | Another thing you could do is go back
to your Hit state and move the rectangle
| | 05:12 | to a totally different area of the screen.
| | 05:14 | Now, publish and see what happens.
| | 05:16 | The button doesn't react until I touch
the Hit state way over here with my mouse.
| | 05:21 | This could be really useful or really
annoying to your user, depending on what
| | 05:25 | you're trying to do.
| | 05:26 | One more useful thing, kind of building
on that, about the Hit state is being able
| | 05:30 | to create an invisible button.
| | 05:33 | Invisible buttons can be very useful.
| | 05:35 | You can use them to make
any area of your screen hot.
| | 05:38 | So maybe you have an area of text
that you want to be clickable, or if the
| | 05:42 | user clicks on a certain part of an
image and a sound is played, or text
| | 05:45 | appears or whatever.
| | 05:47 | If you've ever studied banner ads
like advertisements you see on websites,
| | 05:51 | you've probably noticed how you can
click on almost any part of the ad and
| | 05:54 | then something happens.
| | 05:55 | Well, banner ads usually have the
whole ad or at least a large part of it
| | 05:59 | covered with an invisible button, so
it's super easy for the user to click on.
| | 06:04 | So I'm going to close my preview and
go back to my Button timeline and hit
| | 06:08 | Ctrl+Z to undo my Hit state.
| | 06:11 | It should be back in its original
position and the same size as the rectangles
| | 06:15 | on the Up, Over, and Down stages.
| | 06:18 | Now, I'm going to right-click on the
Up frame, and choose Clear Frames which
| | 06:22 | clears out the frame's content.
| | 06:23 | Then, I will do it two more times to
get rid of the other two keyframes.
| | 06:28 | So now Up has a blank keyframe, Over
and Down have nothing in them at all, and
| | 06:32 | Hit is the only keyframe that
actually has something on the stage.
| | 06:36 | Now, in the upper-left, click Scene 1
to go back to the main timeline, and
| | 06:39 | you'll see that your
button appears as a light blue.
| | 06:42 | This is only for you as the
developer to remind you that there's an
| | 06:45 | invisible button there.
| | 06:47 | If you test your movie, you will see
that the button doesn't appear at all.
| | 06:51 | However, I know it's still there,
because when I mouse over where the button is,
| | 06:54 | my cursor turns into the
little hand instead of the arrow.
| | 06:59 | Button symbols just like movie clips
can be controlled by ActionScript too.
| | 07:03 | Close your test movie, then grab your
Arrow tool and click on your button.
| | 07:08 | Open the Property Inspector and you'll see
the field for adding an Instance Name appears.
| | 07:14 | Again, that's Flash's hook into the
symbol to control it with ActionScript.
| | 07:18 | This makes sense, our button already
changes color, but if you want the button
| | 07:22 | to actually do something when someone
clicks on it, like open a new window or
| | 07:26 | make your Flash movie do something,
you need to have ActionScript.
| | 07:30 | Here's a quick tip for you.
| | 07:32 | If you're like me and you aren't good
at drawing buttons that look pretty, you
| | 07:35 | can go to the Window menu, then
choose Common Libraries and then Buttons.
| | 07:40 | A panel opens up with a library
of buttons you can choose from.
| | 07:43 | So you can go ahead and just
browse through them at your leisure.
| | 07:47 | Click on any of them to preview.
| | 07:59 | Once you've found one that you like,
simply drag it and drop it to the stage.
| | 08:03 | If you look in your Library, you will
see that there's now a folder that has the
| | 08:06 | assets that make up that button.
| | 08:09 | So here in Arcade Buttons, there
is the actual button symbol itself.
| | 08:13 | So there we have it, the Button symbol.
| | 08:15 | The Button symbol special timeline
makes it easy to create buttons that respond
| | 08:19 | in a visual way to user interaction.
| | 08:23 | And by giving buttons an Instance
Name, they can also be controlled
| | 08:26 | by ActionScript.
| | Collapse this transcript |
| Adding buttons to a project| 00:00 | Let's use all the background
information we've seen about symbols to make some
| | 00:03 | buttons for our lady driving the fast car.
| | 00:06 | Open fastCar.fla, and to refresh
ourselves on what we have so far, let's test
| | 00:11 | our movie by pressing Ctrl+Enter.
| | 00:14 | We have our 4 second intro with the
title text, and the lady in her car in the
| | 00:17 | middle of the screen.
| | 00:18 | Then, we have 4 more seconds where the
speed limit sign is displayed and a blank
| | 00:22 | spot in the middle where the car will drive.
| | 00:24 | The buttons need to appear
during that last 4 seconds.
| | 00:30 | In your FLA, move your playhead over to
Frame 49 where the last half of the movie begins.
| | 00:36 | Remember, we have our moving car layer,
even though the car doesn't move yet,
| | 00:41 | and the speed limit sign layer.
| | 00:43 | Make sure all the layers in the visual
content folder are locked, and now since
| | 00:48 | we want the buttons to appear at the
same time as these items, click the title
| | 00:53 | of the speed limit sign layer
and then add a new layer above it.
| | 00:58 | Let's rename this new layer, "Buttons."
| | 01:01 | Now, on Frame 49, add a blank keyframe.
| | 01:06 | We need 4 buttons that are
just going to have text in them.
| | 01:09 | Let's type the text first
and then convert into buttons.
| | 01:12 | So grab your Text tool from The toolbar,
and in the Property Inspector, make
| | 01:16 | sure you have Classic Text selected in the
first drop-down, and Static Text in the second.
| | 01:21 | For your Font, I suggest Arial Bold at
18 points and the color being yellow.
| | 01:26 | On your stage, type "stop,"
then in a new textbox, type "go."
| | 01:32 | In the third textbox, type "start over," and
the final box should have "buy action figure."
| | 01:46 | Double-check at this point that your
text is on the Buttons timeline during the
| | 01:49 | last half of the movie;
| | 01:51 | so Frame 49 and later.
| | 01:54 | If you've somehow got the text
appearing on Frames 1 through 48, cut and paste
| | 01:57 | it over to begin at Frame 49.
| | 01:59 | Now, let's line these up.
| | 02:01 | Position your start, so that it's
roughly lined up with the speed limit sign,
| | 02:05 | and then move "buy action figure" over,
so the white line in the road is about
| | 02:10 | even with the letters ct in action.
| | 02:13 | Now, select all of your text pieces
and open up your Align panel by going to
| | 02:18 | Window, and then Align, or
hitting Command or Ctrl and then K.
| | 02:25 | In the Align panel, make sure that the
Align to stage checkbox is unchecked.
| | 02:31 | Then, let's align bottom edge.
| | 02:34 | To spread these out evenly,
let's space evenly horizontally.
| | 02:39 | With all of the pieces of text still
selected, you can use your Arrow keys to
| | 02:42 | move them up or down as needed, so
they're positioned about the same spot that
| | 02:46 | I've got on my screen, and when
you're done, click off stage to deselect.
| | 02:51 | Let's convert these each to a Button symbol.
| | 02:53 | Right-click on "stop" and
choose Convert to Symbol.
| | 02:57 | Give the new symbol a name of "Stop,"
and be sure that button is selected in
| | 03:01 | the Type drop-down.
| | 03:03 | Do the same for "go," convert it to a
symbol, give it a name of "go," and make
| | 03:07 | sure that it's a button.
| | 03:11 | We'll do the same for "start
over," and "buy action figure."
| | 03:24 | Open up your Library, and
you'll see your 4 new buttons.
| | 03:27 | To keep the library organized, let's
add a folder by clicking on the Folder
| | 03:31 | icon at the bottom, and double-clicking the
name of untitled folder 1 to change it to "Buttons."
| | 03:37 | Then, drag-and-drop all 4 of your buttons into
the new folder, and that's all we have to do.
| | 03:45 | If you go ahead and test your movie,
you'll see that once the intro finishes
| | 03:48 | playing, our buttons appear.
| | 03:50 | When you mouse over them, the arrow
turns into a hand indicating you can
| | 03:53 | click on the button.
| | 03:54 | Of course, nothing actually happens
when you click as we have to write some
| | 03:59 | ActionScript for that.
| | 04:01 | But, our buttons are set
up and ready for the script.
| | 04:03 | Of course, the movie also
does what it always does.
| | 04:09 | After the playhead gets to the end
of the timeline, it starts over at the
| | 04:12 | beginning, and we see the intro scene again.
| | 04:14 | It's about time to stop that, so the
buttons and the animated car--that we
| | 04:18 | haven't animated yet--will just
stay on screen once they appear.
| | 04:22 | Let's do this with a
simple line of ActionScript.
| | 04:25 | So close your test SWF, and return to Flash.
| | 04:28 | First, make sure your Buttons layer is locked.
| | 04:33 | So we know that the playhead starts at
Frame 1, runs all the way to Frame 96,
| | 04:37 | and then starts over again.
| | 04:39 | We need to change it so that once it hits
Frame 96, it jumps instead back to Frame 49.
| | 04:43 | How we're going to do this is write
ActionScript on Frame 96 that says, hey!
| | 04:49 | Playhead, go to Frame 49.
| | 04:50 | This script will run only when the
playhead hits Frame 96 and every time it
| | 04:55 | does, the line of ActionScript will run
again, returning the playhead once again
| | 04:59 | to Frame 49, and creating an
infinite loop. So let's do it.
| | 05:03 | On Frame 96 of the ActionScript
layer, insert a blank keyframe.
| | 05:10 | Then, with your new keyframe selected in
the timeline, open up your ActionScript
| | 05:14 | window by pressing F9 or going to
the Window menu, and choosing Actions.
| | 05:23 | The window appears and the line of
code we need is this, gotoAndPlay (49).
| | 05:30 | The command is just as it implies, hey playhead!
| | 05:33 | Go to Frame 49, and resume playing.
| | 05:36 | It's very important that you
type this exactly as shown.
| | 05:39 | There should be no extra spaces that A
and the P need to be capitalized and the
| | 05:43 | parentheses and the
semicolon also need to appear.
| | 05:46 | One clue is that the gotoAndPlay word will
turn blue when you've typed it correctly.
| | 05:52 | Hit F9 again to close your Actions window
or click the Close button at the upper-right.
| | 05:57 | Test your movie again, and this time,
we should see the intro scene appear, but
| | 06:02 | then the scene with the buttons and
the speed limit sign stay on perpetually.
| | 06:05 | Again, each time the Playhead hits
the end of the movie at Frame 96, it's
| | 06:09 | commanded by ActionScript to
return to Frame 49 and keep on playing.
| | 06:13 | If you wish to see this visually,
under the View menu in your Preview window,
| | 06:17 | choose Bandwidth Profiler.
| | 06:21 | Here, you have a little graph that
shows the length of your movie with frame
| | 06:24 | numbers across the top.
| | 06:26 | You can see the position of the playhead
indicated by the moving gray arrow at the top.
| | 06:30 | The playhead's position is also
indicated under the state heading.
| | 06:35 | To close the Bandwidth Profiler, go to View,
and then choose Bandwidth Profiler again.
| | 06:41 | Close your test SWF, and
congratulations on your first practical application
| | 06:45 | of Button symbols.
| | Collapse this transcript |
| Transforming symbols| 00:00 | The transformations we looked at so
far like affecting the SKU, resize and
| | 00:05 | rotation can be applied to shapes and symbols.
| | 00:08 | However, there are few other
transformations that are worth knowing about that
| | 00:12 | can only be applied to symbols, or a
special kind of text called TLF text, which
| | 00:17 | we'll talk about soon.
| | 00:17 | I'll demonstrate these kinds of
transformations by using the file
| | 00:22 | called rocketToMars.fla.
| | 00:24 | I'm going to start by clicking on the rocket.
| | 00:27 | In the Property Inspector, see at the
top of it that this is a Movie Clip symbol.
| | 00:32 | Further down in the Property Inspector
under the Color Effect heading, I'm going
| | 00:36 | to drop down the Style
dropdown and choose Alpha.
| | 00:39 | Alpha refers to how opaque
or transparent an object is.
| | 00:44 | To fade the rocket out,
slide the slider bar to the left.
| | 00:46 | An Alpha of 0 means that the object is
totally transparent, and an Alpha of 100
| | 00:51 | means the object is totally opaque.
| | 00:54 | You can also type-in an Alpha if you wish.
| | 00:57 | The other options in the Style
dropdown of Advanced, Tint and Brightness all
| | 01:02 | offer you different intuitive ways to
affect the coloring of an individual
| | 01:06 | symbol instance on the stage.
| | 01:08 | You can check these out on your own.
| | 01:10 | So I'm going to set my Style drop-down
back to None, so the rocket is back at
| | 01:13 | its default look, and we can move on.
| | 01:16 | Remember that all the color effects
accessed from this dropdown can be applied
| | 01:20 | to Movie Clips, Graphic symbols,
Button symbols, and TLF text.
| | 01:25 | The next type of transformation we're
going to look at is one that many people
| | 01:29 | get kind of excited about, it's
rotating objects in a 3D manner.
| | 01:34 | The thing to remember about 3D is that it can
only be applied to Movie Clips and TLF text.
| | 01:39 | It won't work on regular shapes,
Button symbols, or Graphic symbols.
| | 01:43 | I am going to make sure my rocket is
still selected and in the Toolbar, choose
| | 01:47 | the 3D Rotation tool.
| | 01:49 | This is the fourth from the top and
looks like a globe with an arrow around it.
| | 01:53 | Notice that we have a series of
control lines over our rocket.
| | 01:57 | I'm going to approach one of the
green lines, and you'll see a little Y
| | 02:00 | appear next to the mouse.
| | 02:02 | This tells us we're about
to manipulate the 3D Y axis.
| | 02:04 | I'm going to click-and-drag
the line to see the effect.
| | 02:10 | Similarly the red line affects the 3D X axis.
| | 02:15 | The blue line affects the 3D Z axis.
| | 02:19 | If you click-and-drag the orange line,
you affect all three axes at once, which
| | 02:24 | I think is a little harder to control
and actually know what you're doing.
| | 02:29 | If you like, you can pop-open your
Transform panel by hitting Command+ or
| | 02:32 | Ctrl+T on your keyboard, and then
either sliding or typing-in a value for
| | 02:36 | each one of the axes.
| | 02:40 | This is also a great way to set
everything back to 0 if you want to start over.
| | 02:44 | I'm done with my rocket, so I'm going to try
clicking on the "rocketToMars" text at the top.
| | 02:51 | In the Property Inspector,
notice that this is TLF text.
| | 02:55 | Remember that you can rotate in 3D
space only TLF text and movie clips.
| | 03:00 | I'm going to use the green line to
rotate the text, so it looks maybe a little
| | 03:04 | bit like the text in the
introduction to Star Wars or Superman.
| | 03:10 | So there we have it, 3D rotation.
| | 03:13 | We'll create a simple
animation using this later on.
| | 03:16 | For now, remember that the 3D effects
can only be applied to movie clips and
| | 03:20 | TLF text, nothing else.
| | 03:22 | The other color effects like Alpha and
Brightness can be applied to all three
| | 03:26 | kinds of symbols and TLF text.
| | Collapse this transcript |
|
|
5. Introducing TweeningDefining motion tweens| 00:00 | Much animation in Flash is built
with what's called the Motion Tween.
| | 00:04 | The term tween comes from the
first days of animated cartoons.
| | 00:08 | Imagine your favorite cartoon
character in one pose with their arms up, then
| | 00:12 | imagine the character in
another pose with their arms down.
| | 00:15 | The senior animators would draw those
main frames, which you can think of like
| | 00:19 | keyframes and then the junior
animators would then draw in all the in between
| | 00:24 | frames, so that when all the frames
were played in quick succession, it looks
| | 00:27 | like the character was moving.
| | 00:29 | In Flash what you as the
developer do is define the keyframes.
| | 00:33 | Flash takes care of the inbetweening for you.
| | 00:36 | To practice with motion tweening,
open up a new blank FLA document.
| | 00:40 | Select your Oval tool and set the fill
to be the gradient red with no stroke.
| | 00:45 | Draw a circle on the stage.
| | 00:51 | It doesn't really matter if you're
using Merge or Object Drawing mode because
| | 00:55 | we're going to make this a symbol.
| | 00:57 | To motion tween something on the stage,
it has to be either a movie clip or a
| | 01:00 | graphic symbol, or oddly enough, TLF text.
| | 01:04 | Anyway, for us, let's
convert our shape to a movie clip.
| | 01:07 | Select your circle and press F8, or
right-click and choose Convert to Symbol.
| | 01:14 | Give your new symbol the name of "ball"
and make sure that Movie Clip is selected
| | 01:17 | in the Type dropdown.
| | 01:20 | The workflow you need to use when
making a Motion Tween is tell Flash where you
| | 01:24 | wanted to start, apply the Motion Tween,
and then tell Flash where you wanted to end.
| | 01:28 | We'll start by telling Flash
where we want the animation to start.
| | 01:32 | We'll have our ball moved from left
to right, so move your ball over to the
| | 01:35 | left side of the stage.
| | 01:36 | The next step is to apply the Motion
Tween, but our movie is only one frame long.
| | 01:41 | Animation, by definition, happens over
time, so we need to extend our Timeline out.
| | 01:46 | Click on your stage and
look in the Property Inspector.
| | 01:49 | We're at a Flash default
of 24 frames per second.
| | 01:53 | Let's go for a 1-second animation.
| | 01:55 | So, let's extend our Timeline out to
24 frames by selecting frame 24 in the
| | 02:00 | Layer and hitting F5 or right-
clicking and choose Insert Frame.
| | 02:07 | Now, we can apply the Motion Tween.
| | 02:09 | Select any of the 24 frames, it
doesn't matter which one, the tween will be
| | 02:13 | applied across all of them.
| | 02:14 | Then go to the Insert menu and choose
Motion Tween or you could right-click on
| | 02:20 | your frame and choose Create Motion Tween.
| | 02:22 | You'll see that your frame span now
turns blue, which is the indication that
| | 02:26 | it's a Motion Tween span.
| | 02:28 | Scrub your playhead across the frames and,
of course, the ball doesn't do anything.
| | 02:32 | We've told Flash where we wanted to
start and apply the tween but we haven't
| | 02:35 | told it where we want it to end.
| | 02:38 | So, move your playhead to Frame 24.
| | 02:42 | Then move your ball over to
the right-hand side of the stage.
| | 02:46 | You'll notice two things.
| | 02:47 | First, a green line across the stage
that indicates the path the ball will take
| | 02:52 | and secondly a new little
diamond on frame 24 in your timeline.
| | 02:56 | Flash creates this ending keyframe for
you automatically when you define the
| | 03:00 | end state of the tween.
| | 03:02 | Go ahead and test your movie to see the result.
| | 03:05 | Indeed, your ball moves from left to
right and plays over and over as the
| | 03:08 | playhead runs out of frames on 24 and starts
back over again at Frame 1. Close your SWF.
| | 03:15 | Now, let's say, you want to change the
position of the ball a little bit on frame 24.
| | 03:20 | That's no problem;
| | 03:21 | just make sure your playhead is
on Frame 24 and then move the ball.
| | 03:26 | The path of the Motion
Tween is updated accordingly.
| | 03:28 | Go ahead and test to see the effect.
| | 03:30 | Now, I'd like to point something out.
| | 03:34 | Close your SWF and in Flash right-
click anywhere in the tween span on the
| | 03:38 | Timeline and choose Remove Tween.
| | 03:41 | The blue color goes away and the ball
is just at the position defined in the
| | 03:44 | keyframe on Frame 1.
| | 03:46 | Remember, how when we made the tween we
had said move the playhead to Frame 24
| | 03:52 | before moving the ball to the
right-hand side of the stage?
| | 03:54 | Well, this is important and I'll show you why.
| | 03:57 | Right-click in the middle of the tween
span around frame 10 and Create Motion Tween.
| | 04:02 | The tween is applied and you can
tell because the Timeline turns blue.
| | 04:06 | This time just leave your playhead
where it is on frame 10 and move the ball to
| | 04:10 | the right-hand side of the stage.
| | 04:12 | See how the keyframe indicating the
end of the tween now appears on Frame 10.
| | 04:17 | Test your movie and see the result.
| | 04:19 | The ball moves all right but it's faster
since it does its motion in only 10 frames.
| | 04:23 | It also hangs out on the right
side of the screen for just a moment
| | 04:27 | before starting over.
| | 04:29 | And this makes sense, since the
ending keyframe is at Frame 10 and the ball
| | 04:33 | stays in the same position until Frame 24.
| | 04:39 | So paying attention to where your
playhead is when you define where you want the
| | 04:43 | Motion Tween to end is pretty important.
| | 04:46 | Even though all 24 frames are motion
tweened, the ball only actually moves for 10.
| | 04:51 | So remember, our workflow is to tell
Flash where you wanted to start, apply the
| | 04:55 | Motion Tween, and then tell it where
you want it to end, but be careful where
| | 04:58 | your playhead is when you define the end.
| | 05:01 | Let's play a little bit here.
| | 05:02 | Move your playhead to Frame 24.
| | 05:05 | These frames are still Motion Tween
frames, so there is no reason we can't make
| | 05:09 | the ball move back to the
left side of the screen.
| | 05:12 | So, move the ball to the left side of
the stage and notice that a new keyframe
| | 05:16 | is added to frame 24.
| | 05:18 | Test your movie and cool.
| | 05:20 | The ball is bouncing back and forth.
| | 05:21 | Now, close the preview.
| | 05:23 | So we've been a little bit clever here
by having the center keyfame act as an
| | 05:28 | ending keyframe and a starting keyframe.
| | 05:30 | You've probably noticed that the
ball's bouncing was a little uneven.
| | 05:34 | It's going to the right over the course of
10 frames but going back to the left over 14.
| | 05:38 | If you'd like to fix this,
select the middle keyframe.
| | 05:42 | You'll notice that when you do
the entire tween span is selected.
| | 05:46 | To get just the keyframe, hold down
the Command or Ctrl button on your
| | 05:50 | keyboard and then click.
| | 05:52 | This will allow you to grab just the
keyframe and move it over to Frame 12.
| | 05:56 | Now test again and the bouncing is more even.
| | 05:59 | If you've made a tween too long, you can
simply grab the end of the tween and shrink it.
| | 06:04 | I'll try this now by making
my tween only 12 frames long.
| | 06:09 | The keyframe in the middle is still at
the same relative spot and so let's test
| | 06:12 | again and now we have a very fast bouncing ball.
| | 06:16 | Now finally, what happens if you
create a tween but later figure out that you
| | 06:22 | wanted to appear just
later or earlier in your movie?
| | 06:25 | Well that's easy enough.
| | 06:26 | Simply click and drag the tween span
down the Timeline to your desired spot.
| | 06:31 | I am going to have my tween start at Frame 24.
| | 06:34 | Test again and we see 24 frames
of nothing then 12 frames of a
| | 06:39 | fast-moving bouncing ball.
| | 06:41 | We're starting to get a little
spastic with our bouncing ball here.
| | 06:43 | So let's close our FLA.
| | 06:45 | There's no need to save it unless you
want to and open up our fastCar file.
| | 06:50 | Let's apply a nice simple Motion Tween
having the car drive from right to left.
| | 06:54 | Unlock your moving car layer, move your
playhead to Frame 48, and select the car on the stage.
| | 07:01 | Remember that Motion Tweens can be
applied to Movie Clips and Graphic symbols.
| | 07:05 | Open up your Property Inspector and note that
our car is conveniently already a Graphic symbol.
| | 07:11 | Flash made it a Graphic symbol when
we imported the car from Illustrator.
| | 07:15 | So, let's do our workflow.
| | 07:16 | Tell Flash where you want the tween to
start, apply the Motion Tween and then
| | 07:20 | tell it where you want it to end.
| | 07:21 | The starting position is already defined.
| | 07:23 | So, let's right-click anywhere on the
moving car layer after Frame 49 and choose
| | 07:28 | Create Motion Tween.
| | 07:32 | Now that's left is to tell
Flash where we want it to end.
| | 07:35 | Move your playhead to Frame 96.
| | 07:38 | Now, move the car way over to the
left side of the stage off screen.
| | 07:43 | You can hold the Shift key down while
dragging to keep the car from floating up or down.
| | 07:49 | Scrub your playhead to view the effect.
| | 07:53 | If you don't like your ending position,
click on the car on Frame 96 and adjust
| | 07:57 | it or just undo and try again.
| | 08:03 | When you're happy with the
positioning, test the movie.
| | 08:06 | The car should run smoothly from right
to left and will start over again once
| | 08:10 | it's driven off stage thanks to the Go to
and Play command that we have on Frame 96.
| | 08:13 | But guess what?
| | 08:19 | See how the Speed Limit sign is
appearing on top of the car when she drives by.
| | 08:23 | Well, that's not good,
but it's easy enough to fix.
| | 08:26 | Back in your FLA simply drag the moving
car layer up above the Speed Limit sign
| | 08:31 | layer and test again.
| | 08:32 | And the problem is solved.
| | 08:44 | Close your SWF file and
lock your moving car layer.
| | 08:46 | Our Motion Tween is complete.
| | 08:48 | So, now you've seen how to create Motion Tweens.
| | 08:52 | Once again, the basic workflow to
remember is tell Flash where you want it to
| | 08:55 | start, apply the Motion Tween and
then tell Flash where you want it to end.
| | Collapse this transcript |
| Motion tweening tips and tricks| 00:00 | There are a number of modifications you
can make to your Motion Tweens to make
| | 00:04 | their effects more complex.
| | 00:06 | To survey these, open the file called tweening
.fla in the Exercise Files for this chapter.
| | 00:11 | The file only has a single layer with
a miniature instance of our familiar
| | 00:15 | red car on the screen.
| | 00:16 | Open the library and you'll see
that we have two Graphic symbols;
| | 00:20 | one of which of course is the lady
in the car and the other is a rocket.
| | 00:24 | The movie is 48 frames long, open the
Property Inspector to find out our frames
| | 00:29 | per second which is 24.
| | 00:32 | So our movie is 2 seconds long.
| | 00:34 | Let's start by creating a simple
Motion Tween with the car on the screen.
| | 00:37 | Remember, our Motion Tween workflow of
telling Flash where you want it to start,
| | 00:41 | applying the Motion Tween, and then
telling it where you want it to end.
| | 00:45 | Where the car is now is fine for the
start position, so let's right-click
| | 00:48 | anywhere in the frames and
choose Create Motion Tween.
| | 00:51 | Now, move your playhead to Frame 48 and move
the car over to the right side of the screen.
| | 00:57 | Test the movie once to see the effect.
| | 00:59 | It's simple, so once you've seen
it, go ahead and close the SWF.
| | 01:03 | Move your playhead back to
Frame 48 and select the car.
| | 01:07 | Now, press Q on your keyboard to bring
up the Free Transform handles on the car
| | 01:11 | and scale the size of the car up.
| | 01:13 | I'm also going to move it over
so it doesn't end up offstage.
| | 01:19 | Now test your movie.
| | 01:23 | And as the car moves, it grows at the same time.
| | 01:26 | So motion tweening can tween more than
just position, you can also tween scale,
| | 01:31 | rotation, and even Alpha which is the opacity.
| | 01:35 | Let's close the SWF and
select the car on Frame 48 again.
| | 01:41 | Use your Arrow tool and then in
the Property Inspector, under Color
| | 01:44 | Effect, choose Alpha.
| | 01:47 | Then, move the slider down to 0 or
just type-in 0, so on Frame 48, the car
| | 01:53 | is totally faded out.
| | 01:55 | Test again to see the effect.
| | 01:58 | Using this technique is very common
for fading items in and out on stage.
| | 02:02 | Now, let's reset so we
can look at something else.
| | 02:10 | Close your SWF and on your timeline,
right-click somewhere in the tween span and
| | 02:14 | choose Remove Tween.
| | 02:15 | We're back to having the car just
sitting stationary on the stage.
| | 02:21 | Now, right-click and choose Create
Motion Tween once again, then move the
| | 02:25 | playhead over to Frame 48 and
move the car over to the right.
| | 02:34 | So we're back to having just a simple
Motion Tween of having the car move from
| | 02:38 | left to right across the stage.
| | 02:40 | Now, our next trick has to do with Easing.
| | 02:43 | Easing affects how fast or slow an object
is moving at the start and end of its path.
| | 02:48 | To change Easing, click once on the
little line on the stage that indicates the
| | 02:53 | path of the car, and notice how the
Property Inspector changes to tell us
| | 02:57 | information about the motion path itself.
| | 03:00 | Under the Ease section, click-and-drag
on top of the 0 to the right, to make the
| | 03:05 | Ease 100, or you could just type it in.
| | 03:10 | Test the movie to see the effect.
| | 03:12 | The car starts off faster and slows
down near the end of the Motion Tween,
| | 03:16 | giving it a pretty realistic
effect of coming to a smooth stop.
| | 03:20 | Close the preview, and
now change the Ease to -100.
| | 03:26 | Test the movie, and you'll
see the opposite effect applied.
| | 03:29 | The car starts out slow,
and speeds up as it drives.
| | 03:35 | Close your test movie and
change the Ease back to 0.
| | 03:37 | Remember that if you don't see those
options, just reselect the path on the stage.
| | 03:44 | Now, in the Rotate area, let's type-in 2.
| | 03:47 | We'll have our car rotate 2
times as it moves along its path.
| | 03:52 | Notice the Direction dropdown
has defaulted to CW for Clockwise.
| | 03:57 | If you open it up, you'll see that CCW
or Counterclockwise is also a choice.
| | 04:03 | Test your movie to see this crazy effect.
| | 04:05 | That's pretty wild.
| | 04:09 | Close your movie and
change your Rotation back to 0.
| | 04:13 | Now, click on the car on the screen, and
under the Window menu, choose Motion Presets.
| | 04:20 | The Presets panel opens up and you can
scroll through a whole bunch of different
| | 04:23 | pre-built effects that you
can apply to your Motion Tween.
| | 04:27 | Click once on any one to see a preview.
| | 04:29 | Now, I'll adjust my window so I
can see the previews a little better.
| | 04:36 | I'm going to choose Wave and click Apply.
| | 04:47 | Flash asks you if you want to
replace the current motion with what you've
| | 04:50 | selected, and well, we can't
stop now, so let's click Yes.
| | 04:54 | You'll see the timeline and the motion path
have been updated for you.
| | 05:02 | Test your movie and when
you're ready, close again.
| | 05:08 | Close your SWF and undo by hitting Ctrl
+Z until you're back to the spot where
| | 05:13 | the car is just driving
straight across the stage.
| | 05:15 | Double-check you haven't backed up too
far by clicking on the motion path, and
| | 05:19 | looking in the Property Inspector.
| | 05:21 | As long as you've got 0 for the
Ease and no rotation, we're set to go.
| | 05:26 | So now let's review a topic from the
previous video which is how to change the
| | 05:31 | ending position of a Motion Tween.
| | 05:33 | Move your playhead to
Frame 48, and click on the car.
| | 05:36 | Move it up, so the net effect is that
the car moves from the lower-left of the
| | 05:39 | stage to the upper-right.
| | 05:42 | Remember that you can change the starting and
ending position of a Motion Tween at anytime.
| | 05:46 | You just have to move your playhead to the
frame in question and then move the graphic.
| | 05:51 | Now, click on a blank spot on the
stage to deselect, and for our next trick,
| | 05:55 | approach the Motion Path with your mouse.
| | 05:57 | You'll see a curved line appear next to
your arrow when you get close to the path.
| | 06:01 | Click-and-drag the path and you can
see that you can actually curve it.
| | 06:07 | Test your movie to see the effect,
which probably looks just as silly as you
| | 06:10 | anticipated since this is an
unnatural movement for a car.
| | 06:15 | There's one other handy-dandy
technique to show you.
| | 06:18 | What if instead of a levitating
car, you want a flying rocket?
| | 06:21 | Well, click on the car.
| | 06:23 | It doesn't matter what frame the
playhead is on, because Flash knows you're
| | 06:26 | talking about the car
during the entire Motion Tween.
| | 06:29 | In the Property Inspector near the
top, click the button that says Swap.
| | 06:34 | Select the rocket, and click OK
to swap the rocket out for the car.
| | 06:40 | Scrub your playhead to see the effect.
| | 06:45 | Now, a rocket could conceivably follow
a path like this in real life, but it
| | 06:49 | would be even more realistic if
the nose of the rocket pointed in the
| | 06:52 | direction of the movement.
| | 06:54 | We can fix this by clicking once
again on the blue motion path, and in the
| | 06:58 | Property Inspector, find a little box
that says Orient to path. Then, click it.
| | 07:05 | Now, when you test your movie, you see
that the rocket moves in a more natural way.
| | 07:09 | Also, notice that the Motion Tween in the
timeline is now a succession of keyframes.
| | 07:17 | Flash has added-in a keyframe on each
frame to account for the unique position,
| | 07:22 | and rotation of the rocket on each frame.
| | 07:25 | Imagine how much time that would
take you to do frame-by-frame by hand.
| | 07:29 | So that's the end of our
Motion Tweening tips and tricks.
| | 07:32 | I hope you'll find some of them
useful in your future animation projects.
| | Collapse this transcript |
| Using motion tweens in 3D space| 00:00 | If you're familiar with Motion Tweens
and you're familiar with rotating items
| | 00:04 | in Flash with the 3D Rotation Tool, you'll
probably enjoy combining these two techniques.
| | 00:09 | We have a spot in our fastCar.fla
project where we can apply this.
| | 00:13 | So open your fastCar project and
make sure your playhead is at Frame 1.
| | 00:17 | Let's have the text that says "The Really
Fast New Sports Car" rotate in a 3D manner.
| | 00:22 | To remind us what layer this is
on I'll turn the visibility of the
| | 00:26 | introText layer off and on.
| | 00:28 | Now unlock the layer and
click on the text on the stage.
| | 00:35 | Open your Property Inspector and
you'll see when clicking both pieces of text
| | 00:39 | that they're both
instances of classic text boxes.
| | 00:45 | To create a Motion Tween you have to
be working with a Movie Clip symbol or a
| | 00:49 | Graphic symbol, so let's select both of
the text boxes and then right-click on
| | 00:53 | top of them to select Convert to Symbol.
| | 00:55 | Let's give our new symbol the name of
"introText" and under the Type dropdown make
| | 01:03 | sure Movie Clip is selected.
| | 01:08 | We know that we have to tell Flash how
we want the Motion Tween to start, apply
| | 01:12 | the tween and then tell
it how we want it to end.
| | 01:15 | Let's have the text start in a
rotated position and move towards facing us
| | 01:19 | head-on as time passes.
| | 01:21 | So grab your 3D Rotation tool and click
on the text if it's not already selected.
| | 01:28 | Our control handles appear, so now
approach the green line on the right side and
| | 01:33 | click and drag it up and to the left a
little bit, until the text looks about
| | 01:37 | like what I've got here.
| | 01:38 | We're set for our starting position, so
now right-click in the Timeline on the
| | 01:44 | introText layer and choose Create Motion Tween.
| | 01:47 | Now move your playhead to Frame 12.
| | 01:50 | The text should still be selected;
| | 01:52 | you can now approach that's in the green
line and rotate the text back so it looks flat.
| | 01:57 | If you can't seem to get it exactly
right, hit Command+ or Ctrl+T on your
| | 02:01 | keyboard to bring up the Transform panel.
| | 02:04 | Under the 3D Rotation section you can
type in 0 for the y-axis rotation and
| | 02:09 | the text will straighten out perfectly.
| | 02:11 | Scrub your playhead to view the
effect and make any changes that you like.
| | 02:20 | When you're satisfied go
ahead and test your movie.
| | 02:24 | I think this is a much more
interesting effect than what we had before;
| | 02:27 | the text rotates in nicely and sets
a kind of dynamic tone for the movie.
| | 02:30 | So you can see that once you've
mastered motion tweening and figured out
| | 02:35 | rotating items in 3D space, combining
the two really just uses the same process
| | 02:40 | as setting up a Motion Tween.
| | 02:42 | By now it probably sounds like a broken
record, but the key is to remember the
| | 02:46 | workflow for creating Motion Tweens.
| | 02:48 | Tell Flash where you want it to start,
apply the Motion Tween and tell it
| | 02:51 | where you want it to end.
| | Collapse this transcript |
| Defining shape tweens| 00:00 | Shape Tweens do exactly what the name implies.
| | 00:03 | They allow you to tween
from one shape into another.
| | 00:06 | Unlike Motion Tweens, which require that
you use a symbol like a Movie Clip or a
| | 00:10 | Graphic symbol, Shape Tweens really
stick to their name and that all you need is
| | 00:14 | a shape just a blob of color on the stage.
| | 00:17 | To practice with Shape Tweens, go
ahead and start a blank FLA file in Flash.
| | 00:23 | The workflow for Shape Tweens is a
little different than that for Motion Tweens.
| | 00:27 | For a Motion Tween, you first tell
Flash where you want it to start, apply the
| | 00:31 | Motion Tween, and then tell
it where you want it to end.
| | 00:34 | For a Shape Tween, you first tell
Flash where you want it to start with a
| | 00:37 | keyframe, then tell it where you want it
to end, and then apply the Shape Tween last.
| | 00:43 | So let's practice.
| | 00:45 | Grab your Oval tool from the
toolbar and set the Fill Color to be blue.
| | 00:49 | Set the Stroke to be No Stroke and be
sure you're using Merge Drawing mode.
| | 00:55 | You can tell you're in Merge Drawing
mode when this little icon here at the
| | 00:58 | bottom is the lighter gray color
as opposed to the darker gray color.
| | 01:02 | So go ahead and draw a circle on your stage.
| | 01:06 | We've told Flash where we want it to
start, so now we have to tell Flash
| | 01:09 | where we want it to end.
| | 01:11 | Right-click on Frame 24
and choose Insert Keyframe.
| | 01:15 | Change from your Oval tool to your
Rectangle tool and draw a rectangle over the oval.
| | 01:22 | Since we're in Merge Drawing mode and
the rectangle is the same color as the
| | 01:26 | oval, the two will fuse together and we
end up with just the rectangle on Frame 24.
| | 01:31 | So our last step is to apply the Shape Tween.
| | 01:35 | To do this, get your Arrow tool and
then right-click anywhere before Frame 24.
| | 01:40 | Choose Create Shape Tween.
| | 01:44 | The frames turn to a light green color
with a little arrow pointing from Frame 1
| | 01:48 | to 24 along the way.
| | 01:50 | You can scrub your playhead to see the
effect, and of course, test your movie to
| | 01:54 | see how the circle morphs into a square.
| | 01:57 | Close your SWF file.
| | 02:00 | Now you can do more with Shape
Tweens than just change the shape.
| | 02:03 | You can change the content of either of
the keyframes to further modify it, so
| | 02:07 | I am going to move my playhead to
Frame 24, select my rectangle, and then
| | 02:11 | change the Fill to red.
| | 02:12 | I am also going to grab my Free
Transform tool from the toolbar and scale my
| | 02:17 | rectangle up so it's bigger.
| | 02:20 | Now when I test my movie, the shape is
changing as well as the color and size.
| | 02:27 | Close the SWF and now select your Arrow
tool, move the big red rectangle over to
| | 02:32 | the right side of the stage.
| | 02:36 | If you scrub your playhead, you'll
see the tween has updated accordingly.
| | 02:40 | Our morphing circle is also moving to
the right as it turns into a rectangle.
| | 02:44 | So you can see that in one way shape
tweening can do what Motion Tweens can
| | 02:51 | do, at least when it comes to making an
object look like it's moving across the stage.
| | 02:57 | So let's practice our new workflow of
tell Flash where you want the Shape Tween
| | 03:00 | to start, tell it where you want it
to end, and then apply the Shape Tween.
| | 03:04 | Go ahead and close your practice
FLA and open up our fastCar project.
| | 03:11 | Scroll to the bottom of our layer stack
in the Timeline and turn the visibility
| | 03:15 | of the yellowSun, orangeSun, sunCircle
and sunFace layers on and off to refresh
| | 03:21 | your memory as to what's
on each one of these layers.
| | 03:25 | Let's use shape tweening to make the
yellow sun rays shrink and grow so the sun
| | 03:29 | has a little bit of motion to it,
maybe almost like it's breathing.
| | 03:33 | So go ahead and unlock the yellowSun
layer and also zoom in a little bit so we
| | 03:37 | can better see what we're doing.
| | 03:39 | Select the sun with your Arrow tool
and look in the Property Inspector;
| | 03:43 | you'll see that it's a group.
| | 03:45 | Shape Tweens don't work on groups;
| | 03:47 | you have to have just plain shapes.
| | 03:49 | So to ungroup our group, all we have to do
is go to the Modify menu and choose Ungroup.
| | 03:55 | Now look in the Property Inspector to
confirm that indeed we've got a shape.
| | 03:59 | So, so far we've told Flash where
we want to start here on Frame 1.
| | 04:02 | Let's tell Flash where we want the Shape
Tween to end by right-clicking on Frame
| | 04:07 | 48 and choosing Insert Keyframe.
| | 04:09 | Then select your sun and use the Free
Transform tool to scale it down to make
| | 04:15 | our yellow rays look like they're shrinking.
| | 04:17 | You'll likely have to use your Arrow keys
to move it back into a centered position.
| | 04:26 | With that done, now apply the Shape Tween.
| | 04:29 | Right-click on the yellowSun layer
somewhere before Frame 48 and choose
| | 04:33 | Create Shape Tween.
| | 04:34 | Scrub your Timeline and you'll see
that over the course of four seconds
| | 04:37 | your sun's rays shrink.
| | 04:40 | We now need to build out
the sun's rays growing again.
| | 04:43 | We already have the shrunken state of
the yellowSun on Frame 48 and that's the
| | 04:47 | starting point, so we just need the endpoint.
| | 04:50 | The end state of the sun should look
just like Keyframe 1, so let's copy what
| | 04:55 | we have on Keyframe 1.
| | 04:56 | Use your Arrow tool and click on frame
1 of the yellowSun layer, the sun shape
| | 05:01 | is selected, so copy it.
| | 05:03 | Now let's set up a Keyframe to paste into.
| | 05:06 | Right-click on Frame 96 and
choose Insert Blank Keyframe.
| | 05:11 | Now, go to the Edit menu
and choose Paste in Place.
| | 05:15 | So we have a starting point and then
ending point, all we have to do right now
| | 05:18 | is right-click somewhere on the
yellowSun layer between Frame 48 and 96 and
| | 05:23 | choose Create Shape Tween.
| | 05:25 | Scrub your Timeline, the sun should
shrink and grow back to its original size
| | 05:29 | over the course of 96 frames.
| | 05:36 | This looks good while scrubbing the
Timeline, so go ahead and test your movie.
| | 05:39 | Now while the Shape Tween works, I
think that the shrink happens so slowly over
| | 05:49 | the course of that introductory
four seconds, it's kind of hard to see.
| | 05:53 | Same for when it starts to grow again.
| | 05:54 | There is also one more problem.
| | 05:57 | You'll remember that we have a line of
ActionScript on the last frame of the
| | 06:01 | Timeline telling the playhead to jump
back to frame 49 every time it gets to
| | 06:05 | the end of the movie.
| | 06:07 | This means that we're looping through
the part where the sun grows over and over;
| | 06:11 | we never see the shrinking part again.
| | 06:12 | It just hiccups back to where it starts growing.
| | 06:15 | We'll fix this in the section about
nesting timelines, so let's go ahead and
| | 06:19 | close our SWF and zoom back
out by choosing Fit in Window.
| | 06:23 | For now, we've seen how you can use
shape tweening to change a shape's shape,
| | 06:28 | color, size, and even position.
| | 06:30 | The thing to remember about shape
tweening is that you must be working with the
| | 06:34 | shape, no grouped objects and no symbols.
| | 06:37 | The workflow, once again, is tell
Flash where you want it to start, tell it
| | 06:40 | where you want it to end,
and then apply the Shape Tween.
| | Collapse this transcript |
| Nesting timelines| 00:00 | By now we've seen how Movie Clip
symbols, Graphic symbols, and Button symbols
| | 00:04 | each have their own timeline.
| | 00:06 | Those symbol timelines can hold
animation which we can use to our advantage to
| | 00:09 | create more detail in our animations.
| | 00:12 | By nesting timelines, a nested
animation can play at the same time but
| | 00:17 | independently of the containing animation.
| | 00:20 | Let's create two examples of nesting
timelines by opening our fastCar FLA project.
| | 00:25 | Unlock your stationaryCar layer and
your movingCar layer and make sure all
| | 00:29 | other layers are locked.
| | 00:31 | Move your playhead to some frame in the
first 48 so we're in the first half of the movie.
| | 00:36 | Click once on the car on the stage.
| | 00:41 | Open the Property Inspector and we're
reminded that the car is an instance of
| | 00:45 | the Graphic symbol called
CarWithDriver, the one in the Library here.
| | 00:50 | Now move your playhead to the last half of the
movie somewhere between Frame 49 and the end.
| | 00:54 | Click once on the moving car and in the
Property Inspector we're reminded that
| | 00:59 | this is also an instance of the
same CarWithDriver Graphic symbol.
| | 01:04 | So both instances of the car in the
stage are pointing to the same blueprint of
| | 01:08 | the Graphic symbol in the Library.
| | 01:10 | If we change the blueprint in the
Library, both of the instances on the stage
| | 01:14 | will update accordingly.
| | 01:16 | So test your movie now and note, if you haven't
already, that of course the wheels don't turn.
| | 01:21 | The car would be more fun if they did,
so close out of the SWF and let's take
| | 01:25 | advantage of nesting
timelines to achieve that effect.
| | 01:31 | With your car graphic still selected, double-
click it to step into Edit in Place mode.
| | 01:38 | Notice that the rest of the stage is
kind of faded out and at the upper left,
| | 01:42 | above the stage, it says Scene 1 and
then CarWithDriver to indicate we've
| | 01:46 | stepped into the Graphic symbols timeline.
| | 01:48 | Right now the Graphic symbols
timeline is only one frame long.
| | 01:52 | The car graphic is really
broken up into three parts.
| | 01:54 | Open your Property Inspector
and click on the body of the car.
| | 01:58 | Note in the Property Inspector
that this is a group of shapes.
| | 02:02 | The front wheel and the back wheel are
also their own distinct groups and each
| | 02:06 | part is on its own layer.
| | 02:10 | Let's make the front and back wheels
their own symbols so we can animate
| | 02:13 | them rotating around.
| | 02:15 | To create animation we're going to need
our timeline to be longer than one frame.
| | 02:19 | Let's extend our timeline out to 12
frames, so one second long since our movie
| | 02:24 | has a frame rate of 12 frames per second.
| | 02:27 | So click Frame 12 on the
CarWithDriver layer and to select the other layers
| | 02:31 | too, hold down the Shift key on your
keyboard, then select Frame 12 on the two
| | 02:35 | Wheel layers as well.
| | 02:37 | Then hit F5 on your keyboard or
right-click and choose Insert Frame.
| | 02:42 | We don't need the body to animate,
so let's just lock that layer.
| | 02:45 | Let's animate the front wheel first.
| | 02:48 | To create a Motion Tween, we need a symbol.
| | 02:50 | The front wheel is currently just a
group of shapes as you remember, so select
| | 02:54 | the front wheel and convert it to a symbol.
| | 02:56 | Give the new symbol the name of "frontWheel,"
and for the Type, make it a Graphic symbol.
| | 03:01 | It could just as well be a Movie Clip,
but since it's going to be appearing
| | 03:05 | nested in the timeline of the CarWithDriver
graphic symbol, we'll just keep the type the same.
| | 03:10 | Now do the same for the back wheel.
| | 03:12 | Convert it to a symbol, give it the name of
"backWheel," and make sure that it's a Graphic symbol.
| | 03:18 | Now we need to create the motion tweens to
make the wheels starting with the front wheel.
| | 03:23 | Remember, once again our workflow of
tell Flash where you want the tween to
| | 03:27 | start, apply the tween, and then
tell it where you want it to end.
| | 03:30 | We already have our initial
position defined in Frame 1.
| | 03:33 | So let's right-click anywhere in the
frames on the Wheel1 layer and choose
| | 03:38 | Create Motion Tween.
| | 03:41 | Now let's tell Flash where you want it
to end by moving our playhead to Frame 12.
| | 03:46 | We don't need to change
the position of the wheel;
| | 03:48 | just have it rotate.
| | 03:50 | You may remember there's a handy
place where Flash can do this for you.
| | 03:53 | It's in the properties for
the tween frames themselves.
| | 03:56 | To access this, click on Frame 12
in the Wheel1 layer and open up the
| | 04:00 | Property Inspector.
| | 04:04 | Under the Rotation heading, type in 1 to
have the wheel rotate one time over the
| | 04:09 | course of the 12 frames.
| | 04:11 | Also change the Direction
dropdown to CCW for counterclockwise.
| | 04:15 | You'll notice that Flash has now
inserted a new keyframe for us on Frame 12.
| | 04:20 | Scrub your timeline to see the effect and
the wheel definitely looks like it's rotating.
| | 04:28 | We need to do the same for the back wheel,
so go ahead and lock your Wheel1 layer.
| | 04:32 | Right-click anywhere within our 12
frames of the Wheel2 layer and choose
| | 04:37 | Create Motion Tween.
| | 04:39 | Click on Frame 12 to move your
playhead and have the properties for the tween
| | 04:43 | show up in the Property Inspector.
| | 04:45 | Type in 1 for the number of times
to rotate and make sure CCW is in
| | 04:50 | the Direction dropdown.
| | 04:51 | Scrub your playhead if you wish to see
the effect and then click Scene 1 at the
| | 04:55 | top of the screen to
return to the Main Timeline.
| | 04:59 | So what we're expecting to see is the
timelines of the nested wheel Graphic
| | 05:03 | symbols playing independently of the
containing CarWithDriver Graphic symbol.
| | 05:08 | Let's test our movie by pressing Ctrl+
Enter and indeed the wheels are clearly
| | 05:13 | rotating during the intro
phase and they look good, I think.
| | 05:18 | The wheels are almost a blur of
motion in the scene where the car is
| | 05:21 | moving across the screen.
| | 05:22 | There's a lot of motion here,
but I think that's okay.
| | 05:25 | I think she's supposed to be speeding.
| | 05:27 | So we're done creating our nested tweens.
| | 05:29 | Let's go ahead and lock the unlocked layers.
| | 05:36 | Now on to our next challenge.
| | 05:38 | Scroll down in your layers to the four
layers that make up the sun and unlock them;
| | 05:42 | yellowSun, orangeSun, sunCircle, and sunFace.
| | 05:48 | Remember our Shape tween that we
applied to the sun, I am going to scrub
| | 05:52 | the Timeline to see it.
| | 05:54 | The sun shrinks from Frames 1 to 48 and then
returns to its original size from 49 to 96.
| | 06:01 | Go ahead and test your movie.
| | 06:03 | I think that the shrink happens so
slowly over the course of that introductory
| | 06:07 | four seconds it's kind of hard to see.
| | 06:10 | Same for when it starts to grow,
but there's also another problem.
| | 06:13 | You remember that we have a line of
ActionScript on the last frame of the
| | 06:15 | Timeline telling the playhead to jump back
to Frame 49 every time it gets to the end.
| | 06:21 | So this means we're looping through the
part where the sun grows over and over.
| | 06:24 | We never see that shrinking part again.
| | 06:27 | Here's how we can fix
this with nested timelines.
| | 06:30 | First, let's just shorten our Shape
tween so that it only takes half the time to
| | 06:34 | play through, so 48 frames instead of 96.
| | 06:36 | Then we'll move all the parts that make
up the sun, all four layers, into their
| | 06:41 | own Movie Clip symbol.
| | 06:43 | That way the shrinking and growing of
the sun will play independently from the
| | 06:46 | main timeline because it will be nested
in the movie clip timeline, so let's do it.
| | 06:51 | To move the keyframes of the
Shape tween, just drag and drop.
| | 06:54 | So my middle keyframe on
Frame 48, I'll move to 24.
| | 07:00 | Then I'll move the last
keyframe to Frame 48. And voila!
| | 07:07 | Our shape tween time is cut in half.
| | 07:10 | We don't want frames 49
to 96 for the sun layers.
| | 07:14 | So let's just get rid of all
those extra frames at once.
| | 07:17 | Hold down Shift and click on
Frame 49 on the sunFace layer.
| | 07:21 | Keep holding down Shift so we can
select multiple frames and select Frame 49 on
| | 07:25 | the yellowSun layer.
| | 07:27 | Keep holding down Shift and
select Frame 96 on the yellowSun layer.
| | 07:31 | Now right-click and choose Remove Frames.
| | 07:37 | Scrub your playhead from Frames 1 to
48 and these frames on these four layers
| | 07:41 | are what we're going to move into a
Movie Clip symbol. So let's do it.
| | 07:49 | Hold down Shift and click on
Frame 1 on the sunFace layer.
| | 07:53 | Keep holding down Shift and
select Frame 1 on the yellowSun layer.
| | 07:57 | Keep holding down Shift and
select Frame 48 on the yellowSun layer.
| | 08:02 | Now right-click and choose Copy Frames.
| | 08:05 | Our frames are placed in our computer's memory.
| | 08:07 | We need a new Movie Clip symbol to
paste that stuff into, so let's create a
| | 08:10 | blank one and then paste in.
| | 08:13 | Go to the Insert menu and choose New Symbol.
| | 08:17 | In the Create New Symbol box,
let's type in a name of just "sun."
| | 08:21 | Under the Type dropdown,
let's make this a Movie Clip.
| | 08:24 | It could be a graphic symbol just as
well, but let's just select Movie Clip.
| | 08:29 | Click OK and the screen changes and
you're presented with a blank timeline of
| | 08:34 | your new sun Movie Clip symbol.
| | 08:36 | To paste in all the stuff we just cut
off the Main Timeline, right-click on
| | 08:40 | Frame 1 of Layer 1 and choose Paste Frames.
| | 08:43 | Now our sun layers
magically appear in all their glory.
| | 08:46 | So click Scene 1 to return to the
Main Timeline and open your Library.
| | 08:50 | See your new sun Movie Clip symbol? Awesome!
| | 08:53 | Let's use it.
| | 08:54 | So now delete these four sun layers and
then let's create a new layer above the
| | 09:01 | bgImage layer and call it sun.
| | 09:08 | Select Frame 1 of the sun layer and
drag the sun to the stage from the Library
| | 09:12 | and it now appears for all 96 frames.
| | 09:15 | Test your movie to see the effect.
| | 09:17 | Watch and you'll see how the sun's
timeline runs independently of what's going
| | 09:21 | on in the Main Timeline.
| | 09:24 | So let's close the SWF and review.
| | 09:27 | The sun's nested timeline is 48
frames for one grow and shrink cycle.
| | 09:32 | Then its playhead runs out
of frames and starts over.
| | 09:34 | Thus, it grows and shrinks once during the 48
frames of the intro scene on the Main Timeline.
| | 09:40 | Then it shrinks and grows again
during the last half of the Main Timeline.
| | 09:44 | Because the Main Timeline and the
sun clip both work in increments of 48
| | 09:48 | frames, they both read 96 total frames
played at the same time and then start
| | 09:53 | over at the same time.
| | 09:54 | So you can see that nesting timelines,
especially when those nested timelines
| | 09:58 | have animation on them, can be a great
technique for adding extra motion and an
| | 10:02 | extra element of reality to your projects.
| | 10:05 | You could use this technique to have a
butterfly fly from left to right on the
| | 10:08 | main timeline and have the wings move up
and down in the nested timeline, or you
| | 10:13 | can have a character move across the
screen on the main timeline and use the
| | 10:17 | nested timeline to make him flap his arms,
or have a train with steam coming out
| | 10:21 | at the top, or a whale who wiggles his
tail, or a cyclist who peddles her legs.
| | 10:26 | The possibilities are endless.
| | Collapse this transcript |
| Using shape hints| 00:00 | When Shape Tweening, sometimes you need
to provide Flash with some hints about
| | 00:04 | how you want your shape to look as it morphs.
| | 00:07 | Shape Hinting is what you can use to
help better control your Shape Tweens.
| | 00:11 | First let's set up an ugly shape tween.
| | 00:13 | So open a new blank document in
Flash and right away grab your Text tool.
| | 00:17 | Choose an easy to read font like Arial at
about 72 points and whatever color you'd like.
| | 00:27 | Now type the number 1 on the stage.
| | 00:30 | Now right-click on Frame 24
and choose Insert Keyframe.
| | 00:34 | A new keyframe is inserted, with the
information from frame 1 copied into it.
| | 00:39 | Use your Text tool to change the 1 into
a lowercase a. Now grab your arrow from
| | 00:45 | the Toolbox and select your a. Go to
the Modify menu and choose Break Apart,
| | 00:51 | once and then do it again.
| | 00:56 | Our letter is now a shape, you can
tell by looking in the Property Inspector.
| | 01:01 | Click over to Frame 1 and
let's do the same for the number 1.
| | 01:04 | Modify Break Apart and then Modify Break Apart.
| | 01:08 | We have a starting and ending state for
our Shape Tween, so all that's left is
| | 01:11 | to actually apply the Shape Tween.
| | 01:14 | So go ahead and right-click anywhere in
your Timeline and choose Create Shape Tween.
| | 01:21 | Scrub your playhead or test your
movie and check out the results.
| | 01:24 | While the one does indeed morph into an a, the
tween may or may not look the way you want it.
| | 01:29 | It's kind of all jumbled up in the middle.
| | 01:31 | So Shape Tween allows you to match up
the edge of an object at the start, to the
| | 01:36 | edge of an object at the end of the tween.
| | 01:38 | To try this, move your playhead to Frame 1;
| | 01:41 | then go to the Modify menu,
choose Shape and then Add Shape Hints.
| | 01:46 | A small red circle appears with an a in it,
move this to the upper left of your number 1.
| | 01:54 | Add another Shape Hint by going to the Modify
menu, choosing Shape and then Add Shape Hint.
| | 02:01 | Move your second shape hint to the
left edge of the number 1 as shown.
| | 02:06 | Just a note, it can be easy to try to
click and drag a shape hint and they
| | 02:10 | all suddenly disappear.
| | 02:12 | If this happens to you, go ahead and
just add another shape hint and they
| | 02:15 | should all reappear.
| | 02:17 | You can move your extra shape hint
just below another one, or you can
| | 02:20 | right-click any shape hints, that
are extra and choose Remove Hint.
| | 02:26 | Now move your playhead to Frame 24
and you probably only see one shape hint
| | 02:30 | marked b. That's okay, move it right
out of the way and you'll see that a was
| | 02:35 | just hidden underneath it.
| | 02:36 | Move you're a and b shape hints into the
positions shown, on the left side of the letter.
| | 02:41 | By positioning the shape hints you're
telling Flash, what edge to match up, with
| | 02:45 | what edge during tweening.
| | 02:47 | The Shape Hints will individually
turn green when Flash recognizes a match
| | 02:51 | between, for example, the b shape hint on
frame 1 and the b shape hint on frame 24.
| | 02:57 | With your shape hints now in place,
scrub your Timeline or test your movie and
| | 03:01 | the tween looks a lot different, doesn't it?
| | 03:03 | And in my opinion it's a more attractive tween.
| | 03:05 | Use Shape Hints whenever you want to help
Flash define how a Shape tween should morph.
| | 03:12 | While you can have a very high number of
shape hints on the stage, remember that
| | 03:16 | the shape hints should only go
on the edges of visual objects.
| | Collapse this transcript |
| Animating with graphic symbols vs. movie clips| 00:00 | We learned earlier in the course that
Graphic symbols and Movie Clip symbols
| | 00:04 | both have their own internal timelines.
| | 00:06 | Because they both have their own
internal timelines, up to this point the main
| | 00:10 | reason to make something a Movie Clip
instead of a Graphic symbol is if you want
| | 00:14 | to control it with ActionScript.
| | 00:16 | Movie Clips can be controlled via
ActionScript and Graphic symbols can't.
| | 00:20 | Other than that at first glance there
doesn't seem to be much reason to pick
| | 00:23 | one over the other.
| | 00:25 | Well, actually there are some kind of
big differences in how graphics versus
| | 00:29 | movie clips behave in terms of animation.
| | 00:31 | So let's take a look at that so you
can choose with confidence which one is
| | 00:35 | going to serve you best in different situations.
| | 00:37 | In your Exercise Files for this chapter,
you can open up butterflyGraphicMC.fla
| | 00:43 | and follow along if you wish, or you
can just watch but not perform the steps.
| | 00:47 | So we've got two layers out our Timeline here.
| | 00:49 | The labels layer is simply some text
to label which of the butterflies is a
| | 00:53 | Movie Clip symbol and which is a graphic.
| | 00:57 | When I click on each of the butterflies,
it shows in the Property Inspector that
| | 01:01 | the left one is an instance of
butterflyMovieClip and the right,
| | 01:05 | butterflyGraphic Graphic symbol.
| | 01:08 | Open up the Library and
you'll see those two symbols there.
| | 01:13 | Here's the Movie Clip and
here's the Graphic symbol.
| | 01:16 | They look exactly alike and
they do the exact same thing.
| | 01:19 | The only difference is that one is a
Movie Clip and one is a Graphic symbol.
| | 01:23 | If I double-click on the movie clip
butterfly to look at its timeline, we see
| | 01:27 | it's got three layers, one that's just
a static body and then the leftWing and
| | 01:32 | rightWing that our movie clip is
being motion-tweened over the course of 24
| | 01:36 | frames to make it look like they're flapping.
| | 01:38 | You probably notice the leftWing and
rightWing symbols in the Library that are
| | 01:42 | being used to make the flapping.
| | 01:45 | The internal timeline of the graphic
butterfly is exactly the same as this, so
| | 01:50 | let's return to the Main Timeline.
| | 01:53 | Notice how the Main
Timeline is only one frame long.
| | 01:56 | When I test my movie, you'll see that
the movie clip butterfly is moving but the
| | 02:00 | Graphic symbol one isn't.
| | 02:02 | That's one main difference right there.
| | 02:04 | The timeline of a movie clip plays
independently from the Main Timeline.
| | 02:08 | It doesn't care if the Main
Timeline has one frame or 100;
| | 02:11 | it just plays on its own.
| | 02:13 | However as you can see, the graphic
symbol is affected by this and basically it
| | 02:17 | just shows the butterfly stuck on its Frame 1.
| | 02:20 | So let's go back to the FLA and
insert frames to extend the timeline out to
| | 02:24 | 24 frames since, if you remember, the
timelines of the butterflies are both 24 frames long.
| | 02:30 | Now let's test again and this time you
can see the Graphic symbol animating, too,
| | 02:35 | because the Main Timeline has enough
frames to show the animation. All right!
| | 02:39 | So that's good to know, right?
| | 02:41 | Well, I want to stress just how
important it can be for the number of frames on
| | 02:45 | your Main Timeline to match or exceed
the number of frames in a Graphic symbol.
| | 02:50 | Let's try removing some of the frames on the
Main Timeline so we only have 16 and test again.
| | 02:59 | The movie clip doesn't even flinch;
| | 03:00 | it just plays on and looks fine.
| | 03:02 | But as you can see, we see a jump in
the Graphic symbol butterfly because while
| | 03:06 | it's trying to play all 24 of its
frames, the Main Timeline only has 16.
| | 03:11 | Graphic symbols are kind of tied to the
parent timeline in that way and it's a
| | 03:15 | common thing for someone to animate
in a Graphic symbol but not have enough
| | 03:19 | frames on the Main
Timeline and then wonder, gosh!
| | 03:22 | What's going on here?
What's wrong with my animation?
| | 03:24 | Is something wrong with the Flash Player?
| | 03:26 | Well, no, it's not that at all.
| | 03:28 | If this happens to you, you just have to
remember to count up the frames in your
| | 03:32 | Graphic symbol and then extend the
Main Timeline out to the same number of
| | 03:36 | frames or more, like this.
| | 03:38 | This time I'll extend it out to 48 frames,
and when we test again, it'll work just fine.
| | 03:48 | So moving on, here's another
difference in behavior between movie clips
| | 03:51 | and Graphic symbols.
| | 03:53 | If you scrub your timeline in your FLA,
you'll notice that you can preview the
| | 03:57 | motion of the Graphic symbol, but
you can't see it for the movie clip.
| | 04:01 | If you're doing a very synced
animation where you want a lot of frame by
| | 04:04 | frame control, the Graphic symbol might be
what you want to use for ease of development.
| | 04:10 | Graphic symbols also offer you
some additional methods for control.
| | 04:14 | Click on the movie clip and you'll
see the options available to you in
| | 04:16 | the Property Inspector.
| | 04:18 | We've seen these things before.
| | 04:19 | You could do things like change the
position and the size, maybe swap out what
| | 04:23 | symbol you're using here,
but that's kind of about it.
| | 04:26 | Now click on the Graphic symbol and
notice this whole loop area in the
| | 04:30 | Property Inspector.
| | 04:31 | Starting with what we've got, our
Graphic symbol is looping through its timeline
| | 04:35 | starting on Frame 1.
| | 04:38 | And if we test the movie,
this is what we've seen before.
| | 04:41 | So let's now go ahead and change our
first frame to Frame 12 and test the movie
| | 04:46 | again, and here the butterfly
loops but it starts from its Frame 12.
| | 04:50 | So they look kind of all set
here and that's a neat effect.
| | 04:53 | Back to our controls, let's change this
to Single Frame and then change it to 7.
| | 05:01 | When we test, the Graphic symbol
is just going to hold on Frame 7.
| | 05:07 | You can further play with the settings
here to see how it affects the Graphic symbol.
| | 05:12 | Imagine you are making a butterfly
forest and you had maybe 24 different
| | 05:15 | instances of the butterfly on the stage.
| | 05:17 | These controls could allow you to
really easily create perceived randomness and
| | 05:21 | offsets with the flapping of
all the different sets of wings.
| | 05:25 | For now, let's set our Graphic symbol
butterfly back to Loop starting on Frame 1.
| | 05:32 | So we've seen how the behavior of
Graphic symbols really depends on what's going
| | 05:36 | on in the Main Timeline and the
settings you've chosen for it.
| | 05:40 | The movie clip just kind
of chugs along unaffected.
| | 05:43 | Now I am going to make a new layer in
our movie and call it "actions," and on
| | 05:46 | Frame 12, I am going to insert a blank keyframe.
| | 05:52 | Now I am going to write one single line
of ActionScript code by going to Window,
| | 05:56 | Actions, and typing in "stop."
| | 06:01 | This command tells the playhead
to stop when it reaches Frame 12.
| | 06:05 | When I test, you'll notice that the
Graphic symbol stops when the playhead gets
| | 06:09 | to Frame 12 and here I'll play it
again for you since it happened so fast.
| | 06:14 | So yet again, we see how the Graphic symbol
is tied to what the parent timeline is doing.
| | 06:18 | The Movie Clip symbols
timeline could care less and it's just
| | 06:21 | playing independently.
| | 06:22 | So you can see there are advantages
and disadvantages to both movie clips and
| | 06:26 | Graphic symbols
depending on what you want to do.
| | 06:28 | Of course, remember the huge
difference between the two that only Movie Clip
| | 06:33 | symbols can have an instance name attached
to them so ActionScript can affect it later.
| | 06:38 | If you're building a game and you
want to count how many butterflies you've
| | 06:40 | caught or maybe you want to make one
of the butterflies clickable, they have
| | 06:44 | to be movie clips.
| | Collapse this transcript |
|
|
6. Using Effects and MasksUnderstanding filters | 00:00 | Filters are special effects you can
apply to movie clip instances or TLF text.
| | 00:05 | They can be a really fast and fun
way to beef up some of your imagery.
| | 00:09 | In your fastCar FLA file, let's add a
filter to the opening text that says, It's
| | 00:14 | The Really Fast New Sports Car.
| | 00:17 | So let's move our playhead to Frame 12
so we can see the text straight on and
| | 00:21 | lock all your layers
except for the introText layer.
| | 00:26 | Click once on the introText movie clip
on the stage and now over in the Property
| | 00:30 | Inspector, open up the Filters dropdown.
| | 00:34 | There's an icon that looks like a
little piece of paper at the bottom left.
| | 00:38 | Click on that once to see the
filters you can choose from.
| | 00:41 | Let's choose Drop Shadow.
| | 00:43 | You'll see immediately that a drop shadow
has been applied to the text of the movie clip.
| | 00:47 | Changing the Blur X and Blur Y setting
affects how diffused the drop shadow is.
| | 00:52 | Notice that you can also click on the
little picture of the chain to unlink the
| | 00:56 | Blur X and Blur Y so you can change
them horizontally or vertically without
| | 01:00 | affecting the other dimension.
| | 01:02 | Changing the Angle property affects
which side of the text the shadow appears on.
| | 01:06 | Notice that you can make
it move from left to right.
| | 01:09 | And changing the Distance affects how far
away from the text the drop shadow lands.
| | 01:14 | I can even change the color of
the drop shadow to something else.
| | 01:18 | You can play around with all of the
other different options to see what they do,
| | 01:21 | but for now I am going to click on the
name of the filter, Drop Shadow, at the
| | 01:25 | top, and then at the bottom of the
Property Inspector, click the little arrow to
| | 01:29 | reset the filter back to the defaults.
| | 01:31 | I am going to link up my Blur X and
Blur Y again, so if I change one, the
| | 01:36 | other moves proportionally and change the Blur
to 6 and the Distance of the Drop Shadow to 7.
| | 01:42 | If you scrub your red playhead across
the timeline, you'll see your drop shadow
| | 01:46 | applied nicely all the way across the tween.
| | 01:50 | So let's say you really like this filter
and you want to apply it somewhere else.
| | 01:54 | You can save the settings that you've
chosen for this filter as a preset to use
| | 01:58 | on another object somewhere else.
| | 02:00 | Click on your introText movie clip on
the stage again so the Filters panel shows
| | 02:05 | in the Property Inspector.
| | 02:06 | Then click the word Drop Shadow.
| | 02:08 | Now click the icon that looks like
multiple pieces of paper and choose Save As.
| | 02:13 | Let's save our preset as myDropshadow.
| | 02:17 | Let's apply our drop shadow to the sun,
so let's unlock the sun layer and click
| | 02:21 | on the sun movie clip instance on the stage.
| | 02:24 | Now you can open up the presets in
the Property Inspector and choose the
| | 02:27 | myDropshadow you just created to
apply it to the sun. And there it is.
| | 02:33 | A movie clip can have more
than one filter applied to it.
| | 02:36 | So since this is the sun,
let's also give him a Glow Filter.
| | 02:40 | Click the Add Filter button, the
one that looks like a single piece of
| | 02:43 | paper, and choose Glow.
| | 02:45 | Let's change the default color from
red to an orange, how about FF3300, and
| | 02:52 | change the Blur to 15.
| | 02:55 | So the sun is glowing and looks good,
but I am actually not sure I want the sun
| | 02:59 | to have a glow and a drop shadow.
| | 03:01 | So let's turn the visibility of
the Drop Shadow off to test this out.
| | 03:05 | I'll click on the Drop Shadow title and
at the bottom of the Property Inspector,
| | 03:09 | click the Enable or Disable
Filter button that looks like an eye.
| | 03:13 | The drop shadow is turned off.
| | 03:15 | If you want to turn it on again, you
have to click Drop Shadow again and then
| | 03:19 | click the eye again.
| | 03:21 | So after looking at this, I've decided
I do want the sun to have just the Glow
| | 03:24 | Filter and not the Drop Shadow.
| | 03:26 | So I am going to click on the Drop
Shadow heading one more time, then click the
| | 03:29 | Delete Filter button.
| | 03:32 | You've probably also noticed the
Clipboard icon at the bottom of the
| | 03:35 | Property Inspector.
| | 03:37 | This is useful for copying and
pasting a filter between items as opposed to
| | 03:41 | using a preset, so let's try it.
| | 03:43 | If you click on the Glow Filter
title and under the Clipboard, notice the
| | 03:47 | options of Copy Selected, Copy All, and Paste.
| | 03:51 | Choose Copy Selected and now your
Glow Filter presets are copied to your
| | 03:54 | computer's memory ready to
paste onto another object.
| | 03:58 | Click on your introText movie clip and
in the Property inspector, we'll go to
| | 04:01 | the Clipboard again and choose Paste. Voila!
| | 04:05 | Our glow is applied to the intro text.
| | 04:07 | So copying and pasting filters
between items is pretty straightforward.
| | 04:11 | Now that we've seen it, the Glow Filter
I think is too much on the intro text.
| | 04:15 | So let's click on the Glow Filter and
then click on the trashcan to delete it
| | 04:19 | leaving our intro text
with only the Drop Shadow.
| | 04:22 | Remember before that we've had
filters can only be applied to Movie Clip
| | 04:25 | symbols and TLF text.
| | 04:27 | To prove it, let's try
adding a filter onto the car.
| | 04:30 | Lock all your layers and now unlock
the stationaryCar layer in the Timeline.
| | 04:34 | Then select the instance
of the car on the stage.
| | 04:37 | And indeed we can't add any filters to the car.
| | 04:40 | The Filters area in the
Property Inspector just doesn't appear.
| | 04:44 | That's because the car is a Graphic symbol.
| | 04:46 | You can tell by looking in the Property
Inspector at the top, it shows that it's
| | 04:50 | an instance of the Graphic symbol.
| | 04:52 | So filters are an easy way to add
some visual depth to your imagery.
| | 04:56 | All you have to do is click on the
item and open the Filters section in
| | 04:59 | the Property Inspector.
| | 05:01 | The thing to remember is that
filters can only be applied to movie clip
| | 05:04 | instances or TLF text.
| | 05:07 | We're done with adding all our filters,
so as the last step, let's lock all
| | 05:10 | of our layers.
| | Collapse this transcript |
| Understanding masks| 00:00 | Masking in Flash is a technique
where you can make only certain parts of
| | 00:04 | the screen visible.
| | 00:05 | You achieve the effect using layers
and is not unlike using masks in other
| | 00:09 | programs like Adobe Photoshop.
| | 00:11 | To practice with masks, open the file called
mask.fla in the Exercise Files for this chapter.
| | 00:18 | The file has three layers in it.
| | 00:19 | If you turn the visibility of the
background layer on and off, you'll see this
| | 00:23 | is where the image of the flower is.
| | 00:26 | This is an instance of the blue-
flowers.jpg in the Library. All right!
| | 00:31 | Let's go ahead and lock this layer
and now let's turn the visibility of the
| | 00:35 | text layer off and on.
| | 00:37 | This is where the word flutterby is
and you can see it's an instance of the
| | 00:41 | movie clip called "text" in
the Library. All right!
| | 00:45 | Let's lock the text layer and this
pretty much leaves us the butterfly.
| | 00:49 | Open the library and you'll
see the butterfly movie clip.
| | 00:52 | The butterfly doesn't just sit there.
| | 00:54 | Go ahead and test the movie by pressing
Command+ or Ctrl+Enter and you'll
| | 00:58 | see the butterfly's wings move.
| | 01:00 | Close the SWF and back in Flash,
let's double-click on the butterfly on the
| | 01:04 | stage to get into Edit in
Place mode to see how it's made.
| | 01:09 | You can see it's got three layers.
| | 01:11 | One that's the body, one that's the
rightWing and one that's the leftWing.
| | 01:16 | The rightWing and the leftWing are both
movie clips that have been motion tweened.
| | 01:19 | Look in the Library and
you'll see those two movie clips.
| | 01:22 | So, now that we know what our movies
made up of, we're ready to create a mask.
| | 01:28 | Let's click on Scene 1 at the upper
left of the screen to return to the Main
| | 01:31 | Timeline and lock the butterfly layer.
| | 01:34 | Let's make our mask, so that only the
butterfly, the text, and part of the
| | 01:38 | flower underneath show.
| | 01:40 | The first step is to create a new layer
above all the other layers and rename it mask.
| | 01:46 | Now, we have to draw a shape to be the mask.
| | 01:49 | What this shape covers will be what
appears on the screen and everything
| | 01:52 | else will be masked out.
| | 01:54 | So grab your Rectangle tool and in the
Property Inspector let's set our Stroke
| | 01:58 | to be null and choose a color for the Fill.
| | 02:01 | I recommend a light color that
will show up easily like light green.
| | 02:05 | I'd also recommend setting the Alpha of your
fill to 50%, so it's a little bit transparent.
| | 02:12 | This will make it easy to see what's
behind the mask as you will soon see.
| | 02:16 | Go ahead and draw a rectangle that
covers your butterfly, the text, and a
| | 02:20 | little bit of the flower.
| | 02:21 | You can see through the
green because the Alpha is 50%.
| | 02:24 | The next step is to change the layer
from a regular layer to a mask layer.
| | 02:29 | To do this, double-click on the icon next to
the layer name that looks like a piece of paper.
| | 02:34 | This opens up the Layer Properties dialog box.
| | 02:37 | Choose the Mask radio button to
change the layer from a Normal layer to a
| | 02:41 | Mask layer and click OK.
| | 02:44 | You'll notice that the icon next to the
layer name has now changed to indicate
| | 02:48 | this is a mask layer.
| | 02:50 | However, nothing else on the
screen looks like it's really changed.
| | 02:53 | And that's because we have yet to
tell Flash what layers we want to be
| | 02:56 | affected by the mask.
| | 02:58 | So, on the butterfly layer, double-
click on the icon next to the layer name,
| | 03:02 | open up the Layer Properties box,
and change it from a Normal layer to a
| | 03:06 | Masked layer and click OK.
| | 03:09 | You'll notice that the layer's icon
has changed to indicate it's masked.
| | 03:13 | It's also indented a bit
underneath the mask layer.
| | 03:16 | To quickly change the other two
layers to mask layers, we could go through
| | 03:19 | the process we just did again or
simply click and drag the layer name to the
| | 03:23 | right until you see a dark black
line appear underneath it, then drop it
| | 03:27 | under the mask layer.
| | 03:28 | Now, the text and
background layers are masked layers.
| | 03:32 | We've set up our mask correctly but
it still doesn't look like any thing's
| | 03:35 | changed on the screen.
| | 03:37 | However, if you test your movie, you'll
see in the resulting SWF that your mask
| | 03:40 | has been successfully applied.
| | 03:42 | We can only see the portion of
the stage covered by the mask.
| | 03:45 | So, here's the secret to be able to
see the effect of the mask in Flash.
| | 03:49 | Go ahead and close your test movie
and back in Flash all you have to do is
| | 03:53 | lock all of the layers. Presto!
| | 03:55 | Our mask effect appears and notice what
happens when you unlock the mask layer.
| | 04:00 | You can still see the shape of the
green mask but the effects doesn't appear.
| | 04:05 | Now unlock and lock each of
the three layers one at a time.
| | 04:09 | You can see that while you can still
kind of see what the mask effect is going
| | 04:12 | to be, because the green square is
visible, it's not the full effect.
| | 04:16 | The point is that when you're working
with masks, if you aren't seeing your
| | 04:19 | full-on mask effect and want to, be sure all
the affected layers are locked and visible.
| | 04:25 | So, this is all very nice but
let's move on and look at one practical
| | 04:28 | application of masks you might like.
| | 04:31 | That's to make the mask animated in
order to reveal different parts of
| | 04:34 | the screen over time.
| | 04:36 | You might have seen this called a Wipe
Effect maybe in places like PowerPoint
| | 04:40 | presentations where words on the
screen reveal from left to right or in photo
| | 04:44 | galleries where an entire picture
is revealed from one site to another.
| | 04:48 | Let's do this to our movie.
| | 04:49 | We'll have the entire flower
background appear all the time and animate the
| | 04:53 | mask, so the butterfly and the word
flutterby are revealed, then disappear over time.
| | 04:59 | Let's have our animated mask
move over the course of 4 seconds.
| | 05:03 | If you click somewhere off the stage
and open the Property Inspector, we see
| | 05:07 | that our frame rate is 24 frames per second.
| | 05:09 | So, to have 4 seconds, we need to
extend our timeline out to 96 frames since 24
| | 05:14 | multiplied by 4 is 96.
| | 05:16 | So, I am going to scroll over and
select all of my layers and Insert Frame to
| | 05:23 | extend the timeline out to 96 frames.
| | 05:27 | We want to make our mask
animate from left to right.
| | 05:30 | So let's build a Motion Tween on the mask layer.
| | 05:33 | Note that we could use a Shape Tween
just as well but for this example we'll
| | 05:36 | use a Motion Tween.
| | 05:38 | Remember, for a Motion
Tween we have to have a symbol.
| | 05:40 | So, unlock the mask layer, select your
green rectangle and convert it to a symbol.
| | 05:46 | Type in the name of mask for your
symbol and let's make it a movie clip.
| | 05:49 | So, be sure Movie Clip is
selected in the Type dropdown.
| | 05:55 | Our workflow to create a Motion Tween
is tell Flash where you want it to start,
| | 05:59 | apply the tween, and then
tell it where you want it to end.
| | 06:02 | So, move your red playhead on the
timeline to frame 1 and now move the green
| | 06:06 | rectangle over to the left
of the butterfly and the text.
| | 06:09 | So, that's where it starts.
| | 06:12 | Now, right-click anywhere on the
mask layer in the timeline and choose
| | 06:15 | Create Motion Tween.
| | 06:18 | Now, to tell Flash where you want the tween to
end, move your red playhead over to Frame 96.
| | 06:25 | Now, move the green rectangle over to
the right-hand side of the butterfly.
| | 06:30 | Go ahead and scrub your playhead to
preview the tween acting as the mask.
| | 06:33 | First, I am going to lock my mask
layer, so I can see what it looks like.
| | 06:38 | This looks pretty good except that
we'd said we want the flower background to
| | 06:42 | appear all the time.
| | 06:43 | This is easy enough to change.
| | 06:45 | All we have to do is make
it a Normal layer again.
| | 06:47 | So, in the Timeline, click the word
background and drag the layer down into
| | 06:51 | the left to unindented.
| | 06:53 | You should see that black underline appear
to guide you as to where you can drop it.
| | 06:57 | When you're done, the layer should
not be indented under the mask title and
| | 07:01 | the little icon should be the piece of
paper again indicating this is a Normal layer.
| | 07:06 | If the dragging doesn't work well for you,
remember you can just double-click on
| | 07:09 | the Layer icon and then
select the Normal radio button.
| | 07:12 | Now, let's go ahead and test our movie
by pressing Ctrl+Enter and our desired
| | 07:17 | effect has been achieved.
| | 07:19 | The butterfly and the text are revealed
and then disappear as the animated mask
| | 07:23 | moves across the screen.
| | 07:24 | You can see that masks can be a very
effective way to create some neat visual effects.
| | 07:29 | Remember that the bare minimum that
you need to create masks are a mask layer
| | 07:34 | and at least one masked layer
that's indented underneath it.
| | 07:39 | The mask layer can be static or have a
Motion Tween or even a Shape Tween in it
| | 07:43 | for a more dynamic fill.
| | Collapse this transcript |
|
|
7. Working with TextUnderstanding classic text| 00:00 | There are two main types of text
you can choose between in Flash;
| | 00:03 | Classic text and TLF text.
| | 00:06 | Which one you pick affects the text
formatting options available to you and the
| | 00:09 | final file size of your SWF.
| | 00:11 | So let's peek at the different types
of text, starting with Classic text.
| | 00:15 | Let's open our fastCar.fla from before
and add some text that will appear in the
| | 00:20 | last half of the movie as
the car goes across the stage.
| | 00:24 | Add a new layer, above the
movingCar layer and rename it "text."
| | 00:28 | Then go ahead and make sure
all your other layers are locked.
| | 00:31 | Now on Frame 49, let's right-click
and choose Insert Blank Keyframe, so our
| | 00:36 | first text will appear as the car starts moving.
| | 00:38 | Now over on your toolbar click on the
Text tool which looks like a capital T. As
| | 00:44 | soon as you click it, you should see
your Properties panel open up with all the
| | 00:47 | different options you can
choose from for your text.
| | 00:50 | The first thing to notice is this first
drop-down at the top, which gives you a
| | 00:53 | choice between TLF Text and
Classic Text, let's choose Classic.
| | 00:58 | Under the next drop-down, you get a
choice between Static, Dynamic and Input Text;
| | 01:03 | we're going to choose Static Text.
| | 01:05 | All we want our text to do is
just appear on the stage, so this is
| | 01:08 | the appropriate choice.
| | 01:10 | You would choose Input Text, if you
wanted to create maybe a text box that
| | 01:14 | collects information from the user, for
instance a place for a person to type in
| | 01:18 | their name or the phone number.
| | 01:20 | Dynamic text is text you would want
to be able to change, based on what's
| | 01:24 | going on in your movie.
| | 01:25 | For instance, maybe you want to output
the result of a calculation that you've
| | 01:30 | done in ActionScripts and
then display it to the user.
| | 01:33 | For now we'll just stick with Static Text.
| | 01:35 | I'm going to choose to have my text be
Arial, Bold, 18 points (18 pt) and choose
| | 01:40 | for the color yellow.
| | 01:41 | I'm also going to make sure
that my Alpha is 100% on the color.
| | 01:45 | I'm also going to have my text be left-aligned.
| | 01:50 | Now I'm going to click once on the
stage and type the phrase, "She got a
| | 01:54 | brand new sports car."
| | 01:56 | You can move your box around if you
want to adjust the position, by selecting
| | 01:59 | your Arrow tool again and moving it around.
| | 02:03 | That's pretty straightforward.
| | 02:04 | So to play a little more grab your Text
tool again and let's make a new text box.
| | 02:09 | This time hold your Mouse button
down and drag it out to the right.
| | 02:13 | This is a great way to create a
text box if you need a specific width.
| | 02:17 | You can just type whatever text you
want into the box and it will wrap the text
| | 02:21 | as needed to keep the width.
| | 02:23 | If you grab your Arrow tool again,
you can click on the edge of the box and
| | 02:26 | adjust the width if needed and
the text will rewrap as necessary.
| | 02:31 | This next part is fun;
| | 02:32 | do you remember our hotkey of Q to
bring up the Free Transform handles?
| | 02:36 | When you do this, you can
stretch, rotate and skew the text.
| | 02:40 | You can see that you can work with text
in Flash, much like you can in programs
| | 02:44 | like Adobe Illustrator or
InDesign. So let's move on.
| | 02:47 | We don't need that bottom text
box, so let's just delete it.
| | 02:51 | But let's quickly add a little more
text to the other parts of our movie.
| | 02:55 | Now I'm going to insert keyframe in three spots-
Frame 61, Frame 73 and Frame 85 for my project.
| | 03:03 | Then I'm going to go back and change
the phrase that appears in each one
| | 03:07 | of those keyframes.
| | 03:09 | Great, you can now drag your mouse
across the top of the Timeline where the
| | 03:13 | numbers are to scrub it and see the effect.
| | 03:16 | The different phrase appears at each
keyframe and stays on the screen for 12 frames each.
| | 03:21 | Go ahead and test your movie and I think it
looks good as the car drives across the stage.
| | 03:27 | That's all we need to do
for the lady and the car.
| | 03:29 | So let's go ahead and save our file and Close.
| | Collapse this transcript |
| Understanding Text Layout Framework (TLF) text| 00:00 | To explore TLF Text, let's go
ahead and start a blank FLA file.
| | 00:05 | Go-ahead and Save the file as TLF.fla
anywhere on your computer.
| | 00:14 | TLF Text stands for Text Layout
Framework and basically it offers a lot more
| | 00:19 | text manipulation
methods than Classic Text does.
| | 00:23 | TLF Text was introduced in Flash CS5 and
your end users must have at least Flash
| | 00:28 | Player 10 for TLF Text to work.
| | 00:31 | Click on your Text tool and in the
Property Inspector if TLF Text is not showing
| | 00:36 | in the Text type dropdown, select it.
| | 00:39 | Under the secondary dropdown you can
see different types of TLF Text available
| | 00:44 | and they're different than what
the Classic Text options are to.
| | 00:48 | With TLF Text, you can have Selectable
text, which means it appears onscreen and
| | 00:53 | users can highlight it with their mouse,
copy and paste the text into something
| | 00:57 | like a Microsoft Word document.
| | 00:59 | You can't do that with Classic Text,
which is why it's an option with TLF.
| | 01:03 | Read Only text is just like it sounds.
| | 01:05 | It's just read-only.
| | 01:06 | You can't copy and paste it
out of the published SWF file.
| | 01:10 | Editable text would be the selection
you choose if you want someone to be able
| | 01:13 | to type in their name, email, or
other information into your SWF.
| | 01:16 | Let's choose Read Only, make sure our
text box is using Arial Regular font and
| | 01:22 | choose 10 points and have the Color be black.
| | 01:25 | Now, let's draw a text box on the stage.
| | 01:31 | You'll notice your Property
Inspector shows you all the different options
| | 01:36 | that TLF Text gives you.
| | 01:37 | I'll quickly demonstrate one of these methods
now by putting a lot of text into the text box.
| | 01:42 | To save typing, I am going to copy and
paste the first paragraph of text from
| | 01:47 | the file called TLF.txt, which
is sitting in your Exercise Files.
| | 01:59 | Now, in the Property Inspector, let's
open up the area called Container and Flow.
| | 02:03 | You see a spot here marked Columns.
| | 02:05 | Let's change this from 1 to 3 and you
can see that we now have our text in a
| | 02:10 | nice three column format.
| | 02:11 | I am going to expand the text box a little bit,
so it's a little easier to see the columns.
| | 02:18 | In our text box, I am going to add a
line break after the existing text and then
| | 02:22 | paste in our text paragraph again.
| | 02:29 | You can see that the layout is gone a
little bit crazy partially because there's
| | 02:33 | too much text for the box and this
little red square at the bottom right of the
| | 02:37 | box is an indicator that the
text box itself needs to be bigger.
| | 02:41 | We can hover over that lower right
corner of the box and click and drag to make
| | 02:45 | the box bigger, but instead of just
making the box bigger, let's grab our Text
| | 02:49 | tool again and draw a second TLF Text
box below the first one and then a third
| | 02:54 | one with a more vertical shape to the right.
| | 02:57 | Then grab your Text tool, select the
first text box, and then click on the
| | 03:02 | little red box at the bottom.
| | 03:04 | As soon as you move your arrow over the
second text box, you'll see this little
| | 03:08 | icon that looks like a linked chain.
| | 03:10 | Go ahead and click on the second text
box and you'll see that the text now flows
| | 03:14 | from the first box to the second.
| | 03:15 | We can do this again by clicking on
the little red box at the bottom of the
| | 03:19 | second text box and then clicking the
third text box to flow the text there.
| | 03:25 | You can continue to play with the
layout options for TLF Text to make further
| | 03:29 | adjustments, but for now, let's
test our movie by pressing Ctrl+Enter.
| | 03:37 | What I want to point out is not the publish SWF.
| | 03:39 | So, let's go ahead and close that right away.
| | 03:42 | The thing to note here is
the size of the published SWF.
| | 03:44 | With my Arrow tool, I am going to click
on the stage and open up the Properties
| | 03:48 | Inspector and you can see that we're about 66k.
| | 03:52 | That's pretty big for
something made up of just simple text.
| | 03:55 | The other thing to know about TLF Text is this.
| | 03:58 | Go to your file explorer where you
saved your Flash file and you'll see a
| | 04:01 | textLayout.swz file next to your SWF.
| | 04:06 | TLF Text depends on a specific
external ActionScript's library to function
| | 04:11 | properly and this is it right here.
| | 04:13 | It's created when you published your SWF.
| | 04:16 | When a SWF with TLF Text is playing
from the Web, it looks for this library in
| | 04:20 | a couple of places.
| | 04:22 | First, the SWF looks on the local
computer it's playing on where often the
| | 04:26 | library is cached from previous internet usage.
| | 04:29 | If the SWF doesn't find it there, it
then looks on Adobe.com for the library
| | 04:33 | file, and if that fails too, then it
looks in the same directory as the SWF.
| | 04:38 | So, to be totally 100% safe when using
TLF Text in your Flash movies, you should
| | 04:43 | be sure this SWZ file is in the same
directory on your local computer while
| | 04:48 | you're developing and then also
uploaded to the same directory as your SWF when
| | 04:53 | you upload it to your Web server.
| | 04:55 | If you go back to Flash, click on
each one of the TLF Text boxes and change
| | 04:59 | it to Classic Text.
| | 05:14 | We lose our multiple columns but when
we publish again, you can see that the
| | 05:17 | file size of our SWF is now about 6k.
| | 05:20 | So, now you have some criteria as to
what type of text you should use when
| | 05:26 | creating Flash movies.
| | 05:28 | If you need more sophisticated
controls for text formatting like multiple
| | 05:31 | columns or wrapping text, use TLF Text.
| | 05:34 | Choose Classic Text if you don't need
that degree of layout control or need to
| | 05:38 | be super careful about
your published SWF final size.
| | Collapse this transcript |
| Embedding fonts| 00:00 | Say you have a text box where the
text can be changed during runtime.
| | 00:05 | For instance, the user can type information
in or the text is changed via ActionScript.
| | 00:10 | There's a technique you need to be aware of.
| | 00:11 | So please open the file called
missingFont.swf in your Exercise Files to
| | 00:17 | see this in action.
| | 00:18 | The FLA also exist for your
reference but the resulting SWF is what
| | 00:22 | we're interested in.
| | 00:27 | This SWF file has input text boxes with
text displayed in two fonts, Arial and
| | 00:32 | Tristan or at least it kind of does.
| | 00:35 | The first line of text tells you that
it's supposed to be displayed in Tristan
| | 00:38 | font but unless you have Tristan
on your computer it's probably not.
| | 00:43 | For me Flash is substituting Arial instead.
| | 00:46 | The second line is just in boring old
Arial and is probably displaying just fine.
| | 00:50 | Now, here's why this is happening.
| | 00:52 | When Flash displays input or dynamic
text boxes on the screen, it looks for the
| | 00:57 | definition of the fonts being used
on the end user's local computer.
| | 01:01 | If it finds those fonts it uses
them and the fonts display just fine.
| | 01:06 | If the fonts aren't found on the
user's local computer, Flash substitutes
| | 01:10 | with something else.
| | 01:11 | As you can see here, this can
lead to some unexpected results.
| | 01:14 | Now notice the last line of text,
which tells you that this is what the font
| | 01:19 | called Tristan looks like.
| | 01:21 | You can see what it looks like,
because I used a trick to make doubly sure it
| | 01:25 | would display as Tristan.
| | 01:26 | I'll demonstrate the trick for you
here by opening up a blank FLA file.
| | 01:30 | I am going to just grab my Text tool and
go ahead and type some text on the stage.
| | 01:37 | Then I am going to go to Modify and Break
Apart and then Modify>Break Apart a second time.
| | 01:46 | Look in the Property Inspector and
notice that these are now shapes.
| | 01:50 | They're just blobs of color that
happen to be in the shapes of letters.
| | 01:57 | So that's what we have in our demonstration SWF.
| | 01:59 | Letters which look like
Tristan but are really shapes.
| | 02:02 | So, they're not editable like regular text is.
| | 02:04 | You can go ahead and close the
FLA file you just created as well as
| | 02:09 | the demonstration SWF.
| | 02:14 | The way to get around this
problem is by embedding fonts.
| | 02:17 | Embedding fonts basically means that
you're including, or embedding, the vector
| | 02:21 | outlines of each character into your SWF file.
| | 02:24 | This way Flash knows how to draw the
characters regardless of what fonts are on
| | 02:27 | the end user's computer.
| | 02:29 | As you can see, embedding fonts
can be a very worthwhile activity.
| | 02:33 | So let's learn how to do it by first
opening another blank FLA file and then
| | 02:37 | saving it somewhere on
your computer as fonts.fla.
| | 02:40 | Now, grab your Text tool and choose
Classic Text if it's not already chosen.
| | 02:50 | Under the next dropdown, choose Input Text.
| | 02:53 | For the font, I am going to choose
Berlin Sans FB, but you should pick a font on
| | 02:58 | your computer that isn't
one that everyone would have.
| | 03:00 | Now, type on the stage a phrase,
such as "I need to embed this font."
| | 03:13 | Let's test our movie by pressing Ctrl+
Enter while it will publish and look just
| | 03:17 | fine to you because you're using a
font on your computer, Flash will give you
| | 03:21 | an output message stating that Fonts should be
embedded for any text that maybe edited at runtime.
| | 03:27 | The output message is here
next to where the Timeline is.
| | 03:31 | It also encourages you to embed
your fonts. So, let's do that.
| | 03:35 | Close your SWF file if you
haven't already and return to Flash.
| | 03:38 | Grab your Arrow tool and be
sure your text box is selected.
| | 03:42 | Then in the Character area of the
Properties panel, click on the button labeled Embed.
| | 03:49 | The Font Embedding dialog comes up.
| | 03:51 | Here in the Name area, you can type a
more descriptive name than the default
| | 03:55 | to identify with the font you're embedding
is meant to be So, I'll type "Berlin Sans."
| | 04:02 | Then in the checkbox area, I am
going to select to embed the Uppercase,
| | 04:06 | Lowercase and Punctuation glyphs.
| | 04:09 | You can also type in any special or
unusual characters you want to use in this area.
| | 04:14 | I'd recommend not selecting all because
as you can see that would be 245 glyphs.
| | 04:20 | You're embedding the vector outline
of each glyph into the SWF file, so the
| | 04:24 | fewer glyphs you embed, the smaller
the file size, and the faster the movie
| | 04:27 | loads for your user.
| | 04:29 | Once you've made your selections, click OK.
| | 04:31 | Let's test our movie by pressing Ctrl+
Enter and note that the little reminder to
| | 04:36 | embed fonts we saw before is gone.
| | 04:38 | We're set for now but know that if
you're using an unusual font in multiple
| | 04:43 | text boxes in your Flash movie, you need to
go through this process for each text box.
| | 04:48 | Here's an alternative you could
use instead of embedding fonts.
| | 04:52 | Using your Arrow tool, select your text
box again and under the font dropdown in
| | 04:56 | the Property Inspector, scroll to
the top and find the top three fonts.
| | 05:01 | These are device fonts and you'll
see out of these three we have Sans,
| | 05:05 | which looks like Arial, Serif,
which looks like Times, and Typewriter,
| | 05:09 | which looks like Courier.
| | 05:11 | By using device fonts, you're telling
Flash to just pick a font on the user's
| | 05:15 | local computer that most
closely resembles the device font.
| | 05:19 | By choosing device fonts, you don't
have to embed and the SWF size is smaller.
| | 05:24 | However, since the font outlines are not
embedded, expect some variation in what
| | 05:29 | your end-users will see, since you
don't know what font they may have installed
| | 05:33 | that corresponds to the
device font that you chose.
| | 05:36 | So, now you've seen why and how to embed fonts.
| | 05:39 | The only thing to remember is that you
should embed fonts for text boxes like
| | 05:44 | input boxes or dynamic boxes
that can change during runtime.
| | 05:48 | You don't have to embed
fonts for static text boxes.
| | Collapse this transcript |
|
|
8. Incorporating Audio in FlashImporting and adding audio| 00:00 | Using audio is a great way to
help bring your projects to life.
| | 00:03 | So let's look at how to
integrate sound into Flash.
| | 00:06 | I'm going to open my
fastCar.fla file from before.
| | 00:10 | I'm going to use three
different sounds in this project.
| | 00:13 | One is a background sound when the
movie starts; one when the Stop button is
| | 00:16 | pressed; and the third when
the Go button is pressed.
| | 00:20 | Bringing sounds into Flash is a
delightfully easy, one-step process.
| | 00:23 | You simply import sounds
directly into the library.
| | 00:27 | Let's try it by going to the File menu
and choosing Import, then Import to Library.
| | 00:32 | In the start folder an Exercise Files
for this movie, you'll find fastStart.wav.
| | 00:38 | Flash can import audio in MP3, WAV, AU,
AIFF and some other formats as well.
| | 00:48 | Once you've imported your sound, open
your Library panel and you'll see it there.
| | 00:52 | Click once on fastStart.wav and
you'll see a little picture of the waveform
| | 00:56 | appear at the top of the library.
| | 00:58 | You can click the tiny Play button at upper
right of the Preview panel to hear the sound.
| | 01:02 | So we've got one out of
three sounds ready to go.
| | 01:05 | Flash comes with a library of free
sounds available, so let's grab our
| | 01:09 | other sounds from there.
| | 01:11 | Go to the Window menu and then hover
over Common Libraries, then choose Sounds.
| | 01:15 | I'm going to expand this window
and as you can see we have a lot of
| | 01:20 | different choices here.
| | 01:22 | Let's scroll down until we find the one
called Transportation Cars Honda Civics
| | 01:27 | Start Idle off Mic Under Hood 01.mp3.
| | 01:31 | Go ahead and click it once to select
and you can see we have a little preview
| | 01:35 | option here as well.
| | 01:36 | Let's click Play to listen.
(clip playing)
| | 01:45 | Alright it's a loud sound, so
we're going to go ahead and stop.
| | 01:48 | But it's a good one to use.
| | 01:49 | So let's drag it from the Sounds,
over to her FLA document library.
| | 01:54 | Back in the library, let's double-
click on the name and rename it, so
| | 01:57 | it's easier to read.
| | 01:58 | How about "startIdle.mp3?"
| | 02:02 | Back in our Sounds library, scroll up
just a little bit and let's preview,
| | 02:06 | Transportation Auto Avalanche
Honk Horn Short 01.mp3.
| | 02:11 | (clip playing)
| | 02:12 | That sounds good, so let's drag that over
to the Library and rename it as "carStop.mp3."
| | 02:19 | We can go ahead and close our Sounds
Library and let's start by having the
| | 02:23 | startIdle.mp3 sound play as
soon as the movie starts playing.
| | 02:27 | Make sure all your layers are
locked, except for the audio layer.
| | 02:32 | Then click on the blank Keyframe on
frame 1 of the audio layer, so Flash knows
| | 02:37 | where to start the sound and now
simply drag-and-drop startIdle.mp3 from the
| | 02:41 | library onto the stage.
| | 02:43 | It may seem counterintuitive
to do this, since audio has no
| | 02:46 | visual representation.
| | 02:48 | But now we can see the waveform of startIdle.
mp3 starting in frame 1 of the audio layer.
| | 02:54 | Notice two other things as we test our movie.
| | 02:56 | First, the sound will start up just fine,
but it will keep on playing on and on
| | 03:00 | and on because it's a very loud sound.
| | 03:02 | Let's go ahead and test our movie.
(clip playing)
| | 03:14 | Close the SWF and then you saw indeed
how the very long sound just keeps playing
| | 03:18 | and playing and playing, even when the
playhead goes all the way down to the end
| | 03:21 | of the movie and starts over at Frame 49.
| | 03:25 | Let's say we want the sound to stop,
when the playhead hits 49, when the little
| | 03:28 | car first comes onto the screen.
| | 03:31 | So first I'll show you
what doesn't work to fix this.
| | 03:33 | Let's add a Blank Keyframe to Frame 49.
| | 03:37 | You'd think that a blank Keyframe would
stop the sound, right? Well it doesn't.
| | 03:42 | If you test the movie even when the
playhead gets there, the sound keeps on playing.
| | 03:46 | (clip playing)
| | 03:53 | We'll experiment with a more
sophisticated way to solve this in the next video.
| | 03:57 | For now so that idling sound doesn't
drive us nuts while we work with our
| | 04:00 | buttons, we're going to
temporarily get rid of it.
| | 04:03 | Let's do this by clicking on Frame 1
in the Audio layer, opening the Property
| | 04:07 | inspector and then in the Name drop-down
under Sound, let's change this from
| | 04:11 | startIdle.mp3 to None.
| | 04:14 | You'll notice that the drop-down lists
all of the audio files in the library.
| | 04:18 | If you're doing something like testing
out different audio tracks in a movie,
| | 04:21 | to see which one works best, this is
an easy way to switch out which sound
| | 04:25 | plays on your Keyframe.
| | 04:27 | Let's go on to the sounds
on the Go and Stop buttons.
| | 04:31 | Since we want to sound to play
whenever someone clicks on the Go button,
| | 04:34 | let's move our playhead to frame 49
on the Timeline, since that's where the
| | 04:37 | buttons first appear.
| | 04:39 | We know that the way you add sound is
by dragging and dropping a sound onto the
| | 04:43 | Timeline where you want it play, so we
need to drop it on the Buttons Timeline.
| | 04:48 | Unlock the layer and then double-click
the Go button to enter its timeline.
| | 04:53 | So far this button only has one
layer that has the text Go on it.
| | 04:57 | Keeping with the best practice of
having each item on the Timeline have its own
| | 05:01 | layer, let's create a new layer in
the Timeline and rename it Audio.
| | 05:07 | We want the sound to play when the user
clicks on the button so the place we add
| | 05:11 | in your keyframe is the down frame.
| | 05:14 | From here all we have to do is
open our library and drag-and-drop the
| | 05:18 | fastStart.wav file onto the stage.
| | 05:21 | Let's have our text layer match the
audio layer, so right-click on the down
| | 05:26 | frame, in the text layer and
choose Insert Frame or hit F5.
| | 05:30 | This button is done, so clicks Scene 1
on the upper left to return to the main
| | 05:34 | Timeline and now let's add sound to Stop button.
| | 05:40 | Double click the Stop button to
enter its Timeline and we're now in edit
| | 05:43 | in-place mode again.
| | 05:45 | Just like the last button let's create a
new layer in the Timeline and rename it audio.
| | 05:51 | We want the sound to play when the user
clicks on the button, so let's add a new
| | 05:54 | blank keyframe on the down
frame in the audio layer.
| | 05:58 | Now all we have to do is open our library
and drag-and-drop carStop.mp3 onto the stage.
| | 06:05 | And again, let's have our
text layer match the audio layer.
| | 06:09 | So right-click on the down frame, in the
text layer and choose Insert Frame or hit F5.
| | 06:15 | So we're ready to test our movie.
| | 06:17 | So we'll just wait through the intro
and now we can click each one of the
| | 06:22 | buttons to hear the sound.
(clip playing)
| | 06:27 | Of course the car doesn't actually
start and stop moving yet, but it sure
| | 06:31 | sounds like it does.
| | 06:32 | So let's close our test movie and click
Scene 1 on the upper left of the screen
| | 06:36 | to return to the main Timeline.
| | 06:38 | We're done with the buttons.
| | 06:39 | Let's just re-add our startIdle
sound back into the main Timeline.
| | 06:44 | Click on the keyframe on Frame 1 of the
audio layer and open the Properties panel.
| | 06:48 | Under the sound area we'll choose startIdle.mp3.
| | 06:52 | Now we're ready to shorten up
that sound in the next video.
| | 06:56 | But before we do, let's clean
up our library a little bit.
| | 06:59 | Open up your Library panel
and let's create a new folder.
| | 07:02 | Re-name it "Sounds" and let's drag all
three of our sounds into the folder.
| | 07:12 | Now we've seen how to quickly and
easily add sound into our Flash movies.
| | 07:16 | To review the steps first,
import the sound into your library.
| | 07:20 | Then you simply drag-and-drop the sound
onto the stage, at the keyframe on the
| | 07:24 | timeline, you want the sound to start playing.
| | Collapse this transcript |
| Working with audio| 00:00 | Sounds that you use in Flash projects
sometimes don't behave exactly the way
| | 00:04 | you'd like him to right off the bat.
| | 00:06 | So let's look at the options available to
you in Flash for controlling and editing audio.
| | 00:11 | Back in our fastCar.fla file, I'm
going to unlock my audio layer and move the
| | 00:16 | playhead to Frame 1.
| | 00:17 | The sound we have here is a good one,
but there's a little problem in that the
| | 00:21 | sound file itself is really long.
| | 00:24 | When you test the movie the
sound plays and plays and plays.
| | 00:27 | Let's just listen to that.
(clip playing)
| | 00:36 | We'd like to have the sound stop by
Frame 48, since the scene changes to the
| | 00:41 | little car driving onto the stage on Frame 49.
| | 00:44 | We have a blank keyframe on Frame 49,
but even that doesn't stop the audio file
| | 00:49 | from playing on and on and on.
| | 00:51 | So a good way to solve this
problem is by shortening the sound.
| | 00:54 | We can do this by clicking on the
keyframe where the sound begins, so Frame 1 of
| | 00:58 | the audio layer and
opening the Property Inspector.
| | 01:01 | In the sound area, next to the Effect
drop-down find and click on the little
| | 01:06 | picture of the pencil, to edit the sound.
| | 01:09 | This brings up what's called the Sound Envelope.
| | 01:12 | The top track represents the left
channel or left speaker or left ear or
| | 01:16 | however it's easiest for you to think about it
and the bottom track represents the right channel.
| | 01:21 | There's some simple controls for
changing your view at the bottom right.
| | 01:25 | Here you can toggle back and forth between
frames in seconds as the unit of measurement.
| | 01:30 | Using the little slider you can scroll
over and see that this sound really is long.
| | 01:34 | It's about 450 or so frames or almost
38 seconds at our current frame rate.
| | 01:39 | So I'm going to make sure that I have
Frames selected for my view, because I
| | 01:44 | know I want the sound to end by about Frame 48.
| | 01:46 | And to cut the sound down, I'm going to
grab this little control handle in the
| | 01:51 | center and move it way over to the left.
| | 01:53 | You can see Flash cutting off the sound.
| | 01:55 | Now it would take me forever to slide
all the way back to the beginning of the
| | 01:58 | sound and keep cutting it off.
| | 02:01 | So I'm going to use the little Zoom tool,
down here in the controls, to zoom out
| | 02:04 | on the sound envelope, so
I can cut more off quickly.
| | 02:10 | Now that I'm down around 50 or 100 frames,
I'll zoom in again for more detailed control.
| | 02:15 | So now I'll slide my little chopper
to just before where 48 frames would be
| | 02:22 | and you can even cut off some of the start of
the sound by using the handle bar on the left.
| | 02:27 | So I'll cut off the left part of the
sound track where the sound hasn't really
| | 02:30 | started out, as well.
| | 02:31 | Let's click OK to apply our changes
and notice how the sound wave on the
| | 02:35 | Timeline is now shorter.
| | 02:37 | Let's test our movie by hitting Ctrl+
Enter and indeed our sound is nice and short.
| | 02:41 | (clip playing)
| | 02:48 | There's more audio controls available
to you and if you'd like to learn more
| | 02:52 | look at the Flash Essential Training
Course for your version of Flash, here in
| | 02:56 | the lynda.com Online Training Library.
| | 02:59 | One more thing to note is that if
you need to do something more complex
| | 03:03 | than this to your audio, like maybe combine
two different sounds into one audio track.
| | 03:07 | You'll need to edit your sound file in
an outside audio editing software and
| | 03:12 | then bring the sound into Flash.
| | 03:13 | A Google search can bring up
several free or inexpensive audio editing
| | 03:17 | programs that you can use.
| | 03:18 | We're going to test our movie one
more time to hear it again, but before we
| | 03:23 | closed the preview, lets test something else.
(clip playing)
| | 03:45 | You'll notice that this sound
can play over the top of itself.
| | 03:48 | You have multiple instances of
the sound playing at the same time.
| | 03:52 | This could be a cool feature depending on
what you're trying to achieve in your movie.
| | 03:56 | But let's close our test movie and
make a quick adjustment so that each
| | 03:59 | sound can play only once.
| | 04:03 | The sounds for the buttons are in the
timelines of the individual buttons, so
| | 04:06 | let's unlock our Buttons layer and go
to Frame 49 on the Timeline where the
| | 04:11 | buttons first appear.
| | 04:12 | Now double-click on the Stop
button to enter its Timeline.
| | 04:16 | Click on the down frame in the audio
layer, since that's where the sound is and
| | 04:20 | now open up your Property Inspector.
| | 04:22 | The Sync drop-down is where we need to
be, it offers you the choices of event,
| | 04:27 | Start, Stop and Sync.
| | 04:31 | The default when you drag and drop
a sound into your movie is Event.
| | 04:35 | Sounds with the Event setting,
trigger when the playhead enters a keyframe.
| | 04:39 | The sound plays immediately until it's
done, but one instance of the sound can
| | 04:44 | still be playing when a second is triggered.
| | 04:46 | That's why our button
behaves the way it does now.
| | 04:49 | For our button sound, we need to choose Start.
| | 04:52 | Sounds with the Start setting, play
only if a previous version of the same
| | 04:56 | sound has completed.
| | 04:57 | The Stop setting is pretty obvious, it
stops playing a specified sound and the
| | 05:01 | stream setting causes the
Timeline to keep up with the sound.
| | 05:05 | You'd use this setting in a
situation like if you had a long voiceover or
| | 05:08 | narration and it's important for the sound to
sync up with the visuals going on, on the stage.
| | 05:13 | So there are all our choices, but
Start is the one we want to keep.
| | 05:17 | With that complete, let's click Scene 1
on the upper left to return to the main
| | 05:20 | Timeline and now double-click on
the Go button to enter its Timeline.
| | 05:25 | We'll do the same thing here
as we did for the Stop button.
| | 05:27 | Click on the down frame of the audio
layer, open the Property Inspector and set
| | 05:32 | this sound Sync to start.
| | 05:34 | With that let's click Scene 1 to go back to
the main timeline again and test the movie.
| | 05:38 | (clip playing)
| | 05:45 | Now when you press to Go and Stop
buttons multiple times in a row, the sound
| | 05:49 | has to wait until the first instance is done
playing, before it'll play the sound again.
| | 05:54 | (clip playing)
| | 06:02 | When you close your
preview, lock the audio layer.
| | 06:05 | So we've seen how to use the Sound
Properties dialog box, which you access by
| | 06:11 | clicking on the sound in the library.
| | 06:13 | We've also seen how to use the Sync
drop-down and Sound Envelope properties
| | 06:17 | that you access on the keyframe where
a sound begins and opening the Property
| | 06:21 | Inspector.
| | Collapse this transcript |
|
|
9. Understanding ActionScriptLinking to an external URL| 00:00 | It's time to make the buttons across
the bottom of the fastCar.fla clickable.
| | 00:05 | So I'm going to have my FLA open, and
then move the playhead to Frame 49 with
| | 00:10 | the Buttons layer unlocked.
| | 00:12 | We'll start with the Buy Action
Figure button at the bottom-right.
| | 00:16 | When the user clicks this button, they
should be taken to a shopping site like
| | 00:20 | Amazon.com to purchase our
fictional fast car action figure.
| | 00:24 | There are two steps we need
to complete to achieve this.
| | 00:28 | The first is to give the button an
instance name, click on the Buy Action Figure
| | 00:32 | button, and open the Property Inspector.
| | 00:35 | You can see the very first box at
the top has the words Instance name.
| | 00:39 | Let's type-in here buyBtn, and press Enter.
| | 00:43 | Take note at the spelling and
capitalization that you use here.
| | 00:47 | The instance name is the hook that
ActionScript needs to know which button on
| | 00:51 | the stage we're trying to control.
| | 00:53 | We have four different buttons in this project.
| | 00:55 | So a unique instance name for each one
is the only way Flash has to know which
| | 00:59 | one we're trying to control.
| | 01:01 | Now, our second step is to add-in
the ActionScript that will respond to a
| | 01:04 | user's button click.
| | 01:06 | We could type this code in by hand,
but Flash CS5 and later has a handy tool
| | 01:11 | called Code Snippets that
can write the code for you.
| | 01:14 | If you have a previous version of Flash,
you can still watch this part and then
| | 01:17 | just type the few lines of code in by hand.
| | 01:21 | Make sure the Buy Action Figure button
is selected, and then go to the Window
| | 01:25 | menu, and choose Code Snippets.
| | 01:27 | Click the arrow next to the
Actions folder to expand it.
| | 01:31 | The action we're going to use is the
first one listed, Click to Go to Web Page;
| | 01:36 | so simply double-click it.
| | 01:38 | The Actions panel suddenly opens up
with the appropriate code written.
| | 01:42 | I'm going to resize it and then close
the side panel, so it's easier to read.
| | 01:47 | You can see that the first eight lines
are grayed out, because they're comments.
| | 01:52 | The /* on line 1 signifies the start of
the comment, and then the */ on line 8
| | 01:58 | signifies the end of the comment.
| | 02:00 | ActionScript doesn't execute
anything in between those signifiers.
| | 02:04 | They're just comments.
| | 02:05 | They're simply for developers to write
documentation or instructions for the
| | 02:09 | code that they've written.
| | 02:10 | And indeed, you can see that our
comments here are telling us what we need to do
| | 02:13 | to make our code work like we want it to.
| | 02:16 | The instructions on line 6 tell us to
replace www.adobe.com with the desired URL
| | 02:23 | address, but be sure to
keep the quotation marks.
| | 02:26 | So that's easy enough.
| | 02:27 | Down here in the actual code, let's
replace adobe.com with Amazon.com, or
| | 02:33 | whatever your favorite online retailer is.
| | 02:36 | Make sure you keep the quotation marks.
| | 02:38 | That's all we need to do.
| | 02:39 | So at this point, let's go ahead and
delete our comments, since we'll be adding
| | 02:43 | more ActionScript for the other buttons
later and it'll make it easier to read.
| | 02:47 | Let's take a quick look at how the code works.
| | 02:50 | Notice here the name of buyBtn, that's
the instance name that we assigned to the
| | 02:55 | Buy Action Figure button on the stage.
| | 02:58 | Notice it's using the exact same
capitalization and spelling that we typed-in.
| | 03:02 | If it didn't, this code wouldn't work.
| | 03:04 | The instance name of the button has to match
exactly the instance name typed in the code.
| | 03:10 | So quickly, what our code here
is basically saying is, hey Flash!
| | 03:14 | Listen for when buyBtn is clicked.
| | 03:17 | When it is, run this function
called fl_clickToGoToWebPage.
| | 03:22 | The next few lines of code are the
actual fl_clickToGoToWebPage function.
| | 03:28 |
| | 03:28 | The first line and the opening curly
brace start the function and the closing
| | 03:32 | curly brace ends the function.
| | 03:34 | The commands in the function tell Flash
to open up a browser, and then point the
| | 03:38 | browser to amazon.com.
| | 03:40 | If you've written HTML before, the target="_
blank' you see here works in a similar way;
| | 03:46 | target="_blank' means open up
Amazon.com in a new browser window.
| | 03:52 | Let's call this ActionScript
good and close the Actions Panel.
| | 03:55 | You can X out of it, or
you can press F9 to close it.
| | 03:59 | So where is the code that we just saw located?
| | 04:03 | Scroll your layers in the timeline up
a little bit, and you'll see that Flash
| | 04:06 | created a new Actions layer for us
when we used the Code Snippets tool.
| | 04:12 | Our playhead was on Frame 49 when we
selected the button, and used the Code Snippets.
| | 04:17 | So Flash made a keyframe on
Frame 49, and added our code there.
| | 04:21 | You can tell this keyframe has
ActionScript on it because of the little A that
| | 04:25 | appears in the frame.
| | 04:26 | Since we already had an ActionScript
layer when we wrote our code before, let's
| | 04:30 | consolidate our code all onto one layer.
| | 04:33 | This is easily achieved if you just drag-
and-drop the new keyframe down onto the
| | 04:38 | ActionScript layer like this, and now
we can delete the new Actions layer.
| | 04:43 | To view your code again, simply
click on the keyframe and hit F9 on your
| | 04:48 | keyboard or go to the
Windows menu and choose Actions.
| | 04:51 | You can resize your Actions panel if you'd like.
| | 04:54 | And by resizing it smaller, I can
still see the timeline at the same time.
| | 04:58 | Now, I'm going to click on Frame 96 to
see the code that we wrote there earlier.
| | 05:03 | Click back on Frame 49 to toggle
back-and-forth to the button code.
| | 05:08 | Go ahead and close your Actions panel
and test your movie.
| | 05:11 | (video playing)
| | 05:15 | Then, click on your Buy Action Figure button.
| | 05:18 | A new browser should open up with
Amazon.com, or whatever URL you put in your
| | 05:23 | code already loaded in.
| | 05:26 | That's all we need to do for this button.
| | 05:28 | Making any button clickable follows a
similar process to what we did here.
| | 05:32 | Remember that first, the button needs to
have an instance name, and then second,
| | 05:36 | you need to either write code yourself,
or use the Code Snippets panel to write
| | 05:40 | ActionScript to respond to the button click.
| | 05:43 | Be sure that the instance name in the
code matches the instance name you gave
| | 05:47 | to the button.
| | Collapse this transcript |
| Controlling the Timeline| 00:01 | Our fastCar project is almost complete,
all that's left is to program the start,
| | 00:05 | stop, and start over buttons.
| | 00:07 | Clicking these buttons will make the
Timeline and the car stop, play, and start
| | 00:12 | over at Frame 49, respectively.
| | 00:15 | We'll add our new code on the same
frame as the already existing code for the
| | 00:18 | buy action figure button.
| | 00:20 | We can copy and modify
the code we've already got.
| | 00:23 | However, first, remember that for
ActionScript to know which buttons we're
| | 00:27 | trying to control, each one needs
to have its own unique instance name.
| | 00:31 | So with your playhead on Frame 49 and
the buttons layer unlocked, click once
| | 00:36 | on the stop button.
| | 00:37 | In the Property Inspector type in an
Instance name of stopBtn, click once on
| | 00:44 | the go button, and in the Property Inspector
give this button an instance name of goBtn.
| | 00:49 | Finally, click once on the start over
button and give this button an instance
| | 00:54 | name of the startoverBtn.
| | 00:56 | Be sure to note the spelling and
capitalization you used for each button.
| | 01:00 | You can even write it down so you're sure
to have the exact form at your fingertips.
| | 01:04 | A quick note about instance names.
| | 01:07 | An instance name can be almost anything
you want, they just can't be a reserved
| | 01:11 | word in ActionScript like go or stop.
| | 01:14 | They should not contain any special
characters like dollar signs ($) or hash
| | 01:17 | marks (#), and they can't start with a number.
| | 01:20 | With our instance name set,
let's now write our code.
| | 01:23 | We'll have the code appear in the same
place as the code that controls the buy
| | 01:26 | action figure button, and that's
on Frame 49 of the actions layer.
| | 01:31 | So select that frame in the Timeline
and open your Actions panel by pressing F9
| | 01:36 | or going to Window and then Actions.
| | 01:38 | Highlight all of the code we've got so far,
Copy it, and then Paste it below the existing code.
| | 01:44 | The first thing to do is tell
Flash what button we want to control by
| | 01:48 | changing the instance name.
| | 01:50 | Let's have this be the code for the
stop button, so replace where it says byBtn
| | 01:54 | with the name stopBtn.
| | 01:57 | Be sure to type it just like you did
when you gave the button the instance name.
| | 02:01 | Okay, so, so far this code is saying,
hey, Flash, listen for when stopBtn is
| | 02:08 | clicked, when it is, run this
function called fl_ClickToGoToWebPage.
| | 02:13 | Well, we've already got an fl_ClickToGoToWebPage
function, the buy action
| | 02:18 | figure button is using it.
| | 02:19 | So we need to change the name of the
function our stop button is running, let's
| | 02:23 | change this to stop function.
| | 02:25 | Now, we need to make sure we actually
have that stop function defined, so on the
| | 02:30 | next line change the fl_ClickToGoToWebPage
to stopFunction.
| | 02:35 | Now, what we want the function to
actually do is stop the Timeline.
| | 02:39 | So in the body of the function,
between the opening and closing curly braces,
| | 02:44 | let's replace the existing line of
code with a simple stop command stop();.
| | 02:48 | Please type this exactly as shown,
including the parentheses and semicolon.
| | 02:53 | Now is a good time to test your movie.
| | 03:00 | And the scene where the lady is
driving, click the stop button.
| | 03:06 | When you do, the playhead
on the main Timeline stops.
| | 03:09 | You can tell because the text at the
top where it says she got a brand-new
| | 03:12 | sports car is holding steady at
whatever frame the playhead happened to be on
| | 03:16 | when you clicked stop.
| | 03:18 | The car also should stop.
| | 03:19 | It's a Graphic symbol and so it's
affected by what the main Timeline is doing.
| | 03:24 | The sun you'll notice
keeps on growing and shrinking.
| | 03:27 | If you remember, the sun is a movie clip.
| | 03:29 | Movie Clip nested timelines run
independently of the main Timeline, so it's
| | 03:33 | behaving differently than the car.
| | 03:35 | If this isn't working for you as shown,
check your spelling and capitalization.
| | 03:40 | For instance, I'm going to go back to
my code and mess up my instance name
| | 03:43 | from stopBtn to stopbtn, with a lower
case b. When I test my movie, right away
| | 03:56 | I see the Output panel pop-up
telling me that on Scene 1, Layer
| | 04:01 | 'actionscript', Frame 49, Line 8, we're
trying to access an undefined property
| | 04:06 | called stopbtn, with a lower case b.
| | 04:11 | Plus, you'll also notice that
the stop button isn't working.
| | 04:14 | So I'll go back to my code and
restore it and the movie will work again.
| | 04:18 | If you're experiencing difficulty, be
sure the instance name you gave your
| | 04:22 | button and the instance name
you're using in your code match exactly.
| | 04:26 | Another spot to check might be that
the function name of stop function is
| | 04:30 | spelled the same in both
places in your ActionScript.
| | 04:34 | So with our stop button working, let's
move on to get the go button working.
| | 04:38 | Back in your Actions panel, Copy the
lines of code that control the stop button
| | 04:42 | and then Paste them below all
the other existing lines of code.
| | 04:47 | Now we have to modify it.
| | 04:48 | First off, change the instance name
we're looking for from stopBtn to goBtn.
| | 04:54 | Now, change the name of the function from
stopFunction to goFunction in both places.
| | 04:59 | goFunction is looking pretty good
except of course that it's still telling the
| | 05:04 | Timeline to stop, so
let's change our stop to play.
| | 05:09 | So now our code is currently saying,
hey, Flash, listen for when goBtn is
| | 05:14 | clicked, when it is, run the
function called goFunction.
| | 05:17 | Go ahead and test your movie.
| | 05:23 | Now, when you click stop, the car stops,
and when you click go, it starts up again.
| | 05:30 | We have one more button to
program, the start over button.
| | 05:34 | This button will start the car over
on the right-hand side of the screen.
| | 05:38 | Basically, we want it to make the
playhead start over at Frame 49.
| | 05:42 | So click on Frame 49 in the actions
layer and open up your Actions panel again,
| | 05:47 | if it's not already open.
| | 05:48 | Let's Copy our lines of code that affect the
go button and paste below all the existing code.
| | 05:55 | So as before, the first thing to do is
specify which button we want to control.
| | 05:59 | Let's change goBtn to startoverBtn.
| | 06:03 | Let's change the function
now to startoverFunction.
| | 06:12 | So our startoverFunction needs
to send the playhead to Frame 49.
| | 06:16 | The command we want to use
here is gotoAndPlay and 49.
| | 06:21 | If this looks familiar, it's because
this is the exact same line of code
| | 06:24 | we're also using on Frame 96 of the
main Timeline to keep the playhead going
| | 06:29 | in an infinite loop. Fantastic!
| | 06:31 | Test your movie and let the lady
drive partway across the screen.
| | 06:38 | Then, click start over to make sure
she's being sent back to the right side of
| | 06:42 | the screen, or rather sending
our playhead back to Frame 49.
| | 06:47 | If it's working correctly, great job, that's
quite a bit of ActionScript we've utilized.
| | 06:51 | If you wish, you can go back to your
Actions panel one more time and change some
| | 06:55 | of the spacing of the lines of code.
| | 06:57 | I think it's easier to read when the
lines of code that are related to each
| | 07:00 | other are next to each other, and there's
a line break between each segment of code.
| | 07:05 | You can add or delete extra lines as you wish
to make it more readable for you. That's it.
| | 07:11 | Our fastCar movie is complete.
| | 07:13 | All four buttons are working, each
using the principle of having the instance
| | 07:17 | name of the button match the
instance name used in the code.
| | 07:20 | We've also utilized some additional
commands to control the timeline, like
| | 07:24 | stop, play and gotoAndPlay, all of
which will come in handy for you in future
| | 07:29 | Flash projects.
| | Collapse this transcript |
|
|
10. Working with VideoAdding video to the Flash project| 00:00 | Flash is the most common method
of delivering video over the web.
| | 00:04 | Sites like the New York Times and
YouTube all rely on Flash to present video.
| | 00:08 | Adding video to Flash is easy, but
before adding it to Flash, the video itself
| | 00:13 | must first be correctly formatted.
| | 00:15 | The appropriate video format for Flash is Flash
Video, which has an extension of .flv or .f4v.
| | 00:22 | F4V is a newer Flash video
format that supports the H.264 or High
| | 00:30 | Definition video standard.
| | 00:32 | Your viewers have to have at least
Flash Player 9 to view H.264 video.
| | 00:37 | So if you already have a video in FLV
or F4V format, you're all set and are
| | 00:42 | ready to use it in your Flash files.
| | 00:44 | If you have a video that's not in those
formats, you're still covered, because
| | 00:48 | when you purchase Flash Professional,
you also get a stand-alone application
| | 00:52 | called Adobe Media Encoder.
| | 00:54 | You can use Adobe Media Encoder to
convert MOV, MPEGs, AVIs, WMVs, and some
| | 01:01 | other video file formats into Flash video.
| | 01:04 | Let's take a quick look at Adobe Media Encoder.
| | 01:06 | So go ahead and find and open
the application on your computer.
| | 01:14 | Once it's opened, click Add, which looks
like a little Plus (+) button to select
| | 01:18 | what video we want to convert.
| | 01:20 | Your screen probably looks a little
different if you're not using Adobe Media
| | 01:24 | Encoder for CS5.5 like I am.
| | 01:27 | But take a look around and you should be
able to find the Add button pretty easily.
| | 01:32 | In the start folder in the Exercise
Files for this unit, choose bikes.mov, or
| | 01:37 | any other video file that
you may have and want to use.
| | 01:41 | Go ahead and select the file and click Open.
| | 01:44 | And next, you can click the Format
dropdown to see the export options we have.
| | 01:47 | We'll go ahead and stick with FLV.
| | 01:51 | Under the Preset dropdown,
let's select 512x288.
| | 01:55 | If you're using Adobe Media Encoder CS5,
you might like the choice second from
| | 02:00 | the bottom, which is called Web Medium.
| | 02:02 | But of course you can pick
whichever setting you'd like.
| | 02:05 | Under Output File, make sure that you
like the spot where Media Encoder will put
| | 02:09 | your converted file.
| | 02:11 | Having it point to the end folder in
the Exercise Files for this chapter
| | 02:15 | will work just fine.
| | 02:17 | There's already an FLV there named
bikes.flv in case Adobe Media Encoder
| | 02:22 | isn't working for you.
| | 02:23 | So you can either overwrite this
file or create a new name for the one
| | 02:27 | you're about to create.
| | 02:29 | Next, click on the video title once and
then go to the Edit Menu, then Export Settings.
| | 02:34 | Here you can edit the length of your
video, resize it, add cue points to it so
| | 02:38 | it can sync with other things going on,
on the screen, affect the quality of the
| | 02:42 | final output, and more.
| | 02:44 | We're only going to make one edit.
| | 02:47 | Here on this Play bar under the video
preview we can see that our video is
| | 02:50 | about 1 minute long.
| | 02:52 | Let's crop it so it's about 45 seconds
long by dragging this white arrow to the
| | 02:56 | left until we get to about 45 seconds.
| | 02:59 | It's just before where the
bike rider starts talking.
| | 03:04 | With that, I'll click OK, and then back
on the main interface, click Start Cue
| | 03:09 | to start the conversion.
| | 03:12 | We can see the progress of the encoder
down here in the Current Encode area.
| | 03:17 | And while this is working, know that
the course Publishing Video with the Flash
| | 03:21 | Platform by Lisa Larson-Kelley here in
the lynda.com Online Training Library
| | 03:26 | will give you excellent detail on all
the options, ins and outs of using the
| | 03:30 | Adobe Media Encoder, much more
than the quick glance we took here.
| | 03:34 | Once the video has done encoding, a
green checkmark appears next to the name of
| | 03:38 | the video, telling us that
the video is done processing.
| | 03:41 | So we're done with the Media Encoder, go
ahead and close out, and now go over to
| | 03:45 | Flash and start a new blank FLA
document by clicking ActionScript 3.0.
| | 03:51 | Save your new file as video.fla.
| | 03:53 | I'd suggest saving it in the same
directory as the FLV video you just converted.
| | 03:58 | So I'll save mine in the end folder
in the Exercise Files for this chapter.
| | 04:03 | Importing our video from here is easy.
| | 04:05 | Go to the File Menu and
choose Import, then Import Video.
| | 04:10 | The Flash Video Import Wizard pops up
and the first question you're asked is,
| | 04:14 | where's your video file?
| | 04:16 | Well, it's on our computer, not already
deployed to a Web server somewhere, like
| | 04:20 | the bottom choice mentions.
| | 04:21 | So click Browse and navigate to
the FLV file you just created.
| | 04:26 | For the next set of radio buttons, you
can choose between Load external video
| | 04:30 | with playback component or Embed
FLV in SWF and play in timeline.
| | 04:35 | For most cases I would recommend Load
external video with playback component.
| | 04:39 | By choosing this you're telling your
FLA file to add a video playback component
| | 04:44 | with controls like Play, Stop, Pause,
Volume Control, etcetera, to the stage.
| | 04:49 | The video playback component will then
point to and play your FLV file, which is
| | 04:53 | sitting in the directory you just specified.
| | 04:56 | The FLV video will not actually be
embedded into your Flash SWF, it won't appear
| | 05:00 | in the library, but your SWF
will know which video file to play.
| | 05:04 | This is advantageous because,
number one, it's very easy to change what
| | 05:08 | video you want to play.
| | 05:10 | You just simply change what FLV
video your SWF is pointing to.
| | 05:13 | You could even create a
playlist of videos to loop through.
| | 05:16 | The second advantage is the file size of the
actual FLV video isn't bundled up into your SWF.
| | 05:22 | If you chose the second option of
Embed FLV in SWF and play on timeline, your
| | 05:27 | FLV is actually physically added onto
your timeline and into your library.
| | 05:32 | If your video file is huge, your SWF
file is huge, and it could take a really
| | 05:35 | long time to download.
| | 05:37 | Embedding video onto the timeline would
be appropriate only in cases such as the
| | 05:41 | video is very, very short, or if for
some reason you want to be able to see what
| | 05:45 | the video is doing on each and every frame.
| | 05:48 | With the availability of cue points
and other controls that exist for video,
| | 05:52 | there's really not much reason to
ever embed your video onto your timeline.
| | 05:57 | So moving on, click Next to go to the
next screen of the Video Import Wizard.
| | 06:01 | Here's where you get to choose what
that video playback component or video
| | 06:05 | controls are going to look like.
| | 06:07 | Take a minute to look through the
different options available to you in the
| | 06:10 | dropdown and what they include.
| | 06:13 | You can also change the background
color of the player component here.
| | 06:16 | I'm going to choose
SkinUnderAllNoVolNoCaptionNoFull and make the Color be gray.
| | 06:24 | When you're ready, click Next.
| | 06:26 | The final page is a review page.
| | 06:28 | Check that the location of the FLV you
want to use is correct and note that the
| | 06:32 | FLV file will be relative to the
SWF file when it's all said and done.
| | 06:37 | The summary says a Flash video
component will be created on the stage and
| | 06:40 | configured for local playback.
| | 06:42 | Okay, that sounds fine.
| | 06:43 | And finally, it's telling us that the
video component uses a skin file that will
| | 06:48 | be published next to our FLA when we
publish or test our movie, and we'll need
| | 06:52 | to deploy that to our Web server. All right!
| | 06:55 | We'll see that file in just a second and
it will become more clear what it means.
| | 06:59 | For now, we're ready, so
go ahead and click Finish.
| | 07:02 | Flash thinks for just a moment and then
magically our video component appears on the stage.
| | 07:07 | You can preview the video, you can
play it, pause it, rewind it to the
| | 07:10 | beginning, turn the volume on and off.
| | 07:21 | Open your Library and you'll see that
all we have in here is an instance of the
| | 07:25 | FLV playback component,
which is the video controller.
| | 07:28 | Notice that the FLV file
itself is not in the library.
| | 07:32 | We're just pointing the
playback component to it.
| | 07:34 | So go ahead and publish your movie
and the SWF file behaves about the same.
| | 07:41 | But we published for a reason.
| | 07:43 | Go ahead and close your SWF file and
now open your file explorer for your
| | 07:46 | computer, navigate to the
location where your FLA is.
| | 07:50 | Here you can see the FLA file and
the video.swf that you just published.
| | 07:55 | If you followed the steps in this
video, your FLV video is also here.
| | 08:00 | You'll also note the
existence of the SkinUnderAll SWF.
| | 08:05 | Remember that last line on the video
review page that talked about a skin file?
| | 08:09 | The FLV component can have many different
skins, or looks, depending on which one you choose.
| | 08:14 | And this is what defines it.
| | 08:15 | The SWF file is used by video.swf to
determine how the video playback component looks.
| | 08:22 | In fact, you can click on the SWF
file just to see what it looks like.
| | 08:27 | When you upload your video.swf file to
your website, or wherever it's going to
| | 08:31 | go, you also need to upload
the SkinUnderAll SWF as well.
| | 08:36 | You also of course need to upload the FLV file.
| | 08:40 | Back in Flash, say you don't like the
layout of your video component anymore and
| | 08:44 | you want to change it.
| | 08:45 | Simply click on the playback
component on the stage and then open the
| | 08:48 | Property Inspector.
| | 08:50 | The Component Parameters area is where
all the options are, so find and click on
| | 08:55 | the little Pencil icon on
the line that says skin.
| | 08:58 | Now you can choose a
different skin for the player.
| | 09:00 | I'll choose the very last option in the list,
SkinUnderPlayStopSeekMuteVol and click OK.
| | 09:07 | You can see that the look of
the player updates immediately.
| | 09:11 | If I publish my movie again and then
close the resulting SWF, and now go back to
| | 09:17 | my file explorer, you'll see that a new
SWF file with the corresponding name for
| | 09:21 | the new skin has been generated.
| | 09:24 | And if this is going to be your final
choice for the skin, then this is the SWF
| | 09:27 | you'd need to upload to your Web
server along with all your other files.
| | 09:31 | Back to Flash one more time, let's say we
want to change what video we're going to play.
| | 09:36 | Back in the Component Parameters area,
click on the little Pencil on the source line.
| | 09:40 | In the Content Path box, navigate to
the Exercise Files for this chapter and
| | 09:45 | choose the FLV file called surf and click OK.
| | 09:49 | You've now changed the video that your
playback component is pointing to, so go
| | 09:53 | ahead and test your movie one
more time to see the change.
| | 09:58 | And the video plays.
| | 10:00 | So we've now seen how to add video
into your Flash pieces, so that's the end
| | 10:04 | of our example here.
| | 10:05 | When using video, you can have as many
other items on your FLA timeline as you wish.
| | 10:11 | But do follow the best practice of
having your video player on its own layer.
| | 10:15 | Again, if you'd like more detail about
using the Flash Media Encoder or more
| | 10:19 | detail on using the FLV playback
component, check out some of the other courses
| | 10:23 | about Flash video here in the lynda.com
Online Training Library, such as
| | 10:28 | Publishing Video with the Flash
Platform by Lisa Larson-Kelley.
| | Collapse this transcript |
|
|
11. Publishing a Flash DocumentCleaning up and optimizing files| 00:00 | When getting ready to publish your
final SWF files, taking a few minutes to
| | 00:04 | clean up your FLA and
optimizing it can be time well spent.
| | 00:07 | So it's easy for yourself and your
colleagues who might work with the file down
| | 00:10 | the line to navigate around it.
| | 00:13 | The first spot to look at is the Library.
| | 00:15 | Take a look at your library items and delete
anything that isn't being used in your movie.
| | 00:20 | If you're not sure if something's being
used, you can go to the Context menu for
| | 00:24 | the Library here at the upper-right
and choose Select Unused Items.
| | 00:28 | I don't have any here but any of
library item not used on the stage at some
| | 00:32 | point will be highlighted.
| | 00:34 | Another best practice is to make
sure all your Library items are named
| | 00:38 | something intuitive.
| | 00:39 | So, when you open the file up maybe
three or four months down the line, you can
| | 00:42 | tell at a glance what each item is.
| | 00:45 | There's nothing worse than a library full of
items named symbol 1, symbol 2, and symbol 3.
| | 00:49 | Also putting related library
items into folders can be helpful.
| | 00:53 | If you followed along with this course
the entire way, we have two Library folders;
| | 00:57 | Sounds and Buttons.
| | 01:01 | To optimize your SWF files to be the
smallest in file size they can, you can go
| | 01:05 | through and compress imported audio and images.
| | 01:08 | For instance, you can double-click on
the icon of the speaker for any of your
| | 01:12 | audio files in the Library and test
different output compression settings to get
| | 01:17 | the right balance of
sound quality and file size.
| | 01:20 | Imported bitmaps can be a big
source of file size bloat in your SWFs.
| | 01:25 | The best way to avoid this is to plan ahead.
| | 01:27 | Import images only at the dimension
and resolution you really need them.
| | 01:31 | That being said, you can ratchet down
the size of your final SWF by affecting
| | 01:35 | the quality compression Flash uses for images.
| | 01:38 | To demonstrate this first publish your
movie and then close the SWF.
| | 01:42 | (video playing)
| | 01:46 | Then look at the SWF History section of the
Property Inspector to see the size of our SWF.
| | 01:51 | You can see that we're at about 132K.
| | 01:55 | Now in your Library, double-click on the
little tree icon next to background.jpg
| | 02:00 | to open up the Bitmap Properties box.
| | 02:03 | Using the Quality radio button, you
can set a custom progression that Flash
| | 02:07 | should use instead of
the default for your image.
| | 02:10 | I'm going to be pretty aggressive and use 40%.
| | 02:15 | Click OK and publish your movie again.
(video playing)
| | 02:26 | The quality of the
background image is clearly reduced.
| | 02:29 | You can see a lot of blockiness, for
instance, around the trees at the top.
| | 02:33 | However, when you close your SWF and
look at the SWF History box, you can see
| | 02:37 | that our file size has been reduced
by more than half, down to about 60K.
| | 02:41 | I'm going to restore my background image
to its original settings, but know that
| | 02:46 | you can play with this to find the right
balance between image quality and final
| | 02:50 | size of the SWF if file
size is a concern for you.
| | 02:55 | If you're building an application
like an image gallery that shows a lot of
| | 02:58 | high-quality images, you might want to
keep studying Flash and try techniques
| | 03:03 | like loading in external images or other
assets one-by-one on demand, instead of
| | 03:08 | embedding them all into a SWF file.
| | 03:10 | Finally, be careful about
the kinds of text you use.
| | 03:13 | As we discussed in this section about
text, embedding fonts and using TLF text
| | 03:18 | can add significantly to your file size.
| | 03:20 | So be sure that you need to use these
features before incorporating them into
| | 03:24 | your Flash projects.
| | 03:25 | With these items considered, we
can now publish our final files.
| | Collapse this transcript |
| Publishing and deploying files | 00:00 | When publishing for the Web you'll
need a SWF file but also an HTML file that
| | 00:05 | embeds the SWF for display.
| | 00:07 | Since we're focusing on Web in this
course, I won't go over what else you might
| | 00:11 | need to do if you're targeting
Adobe AIR or a mobile platform.
| | 00:15 | But there are plenty of other courses
here in the lynda.com Online Training
| | 00:19 | Library that address these topics and
can help you prepare everything you need.
| | 00:23 | Let's practice publishing.
| | 00:25 | With my FLA open, I'm going to go to
the File menu and choose Publish Settings.
| | 00:29 | On the first screen that appears, be
sure that the Flash and HTML checkboxes
| | 00:34 | have both been selected.
| | 00:35 | On this screen for Flash which is the
default view, make sure that the version
| | 00:40 | of Flash Player you want to target is selected.
| | 00:43 | For instance I've got Flash Player 10.2.
Also make sure the right version of
| | 00:48 | ActionScript to targeting is selected as well.
| | 00:50 | We'll leave everything else at
the defaults for a quick publish.
| | 00:54 | On the HTML page we'll leave
everything as it is for the moment as well.
| | 00:58 | Go ahead and click Publish on the
bottom and then OK to close the window.
| | 01:02 | In your file explorer where your FLA
received you'll see this SWF and also the
| | 01:07 | resulting HTML file.
| | 01:09 | The SWF file is not any different than
the SWF you create when you test your
| | 01:13 | movie during development by
pressing Command+ or Ctrl+Enter.
| | 01:17 | So let's check out the HTML file. Pop
it open in a browser and you'll see that
| | 01:22 | as expected the SWF displays.
| | 01:30 | Open the HTML file in Dreamweaver or
your favorite HTML editor and you'll see
| | 01:34 | the code that Flash writes for you
to embed the SWF into the HTML page.
| | 01:40 | If the way it is, is fine all you need
to do is upload the SWF and HTML file to
| | 01:44 | your Web server and you're ready to go.
| | 01:46 | If you want your SWF to appear amongst
other content on a webpage you already
| | 01:50 | have, you'd need to copy and paste
the content in between the opening and
| | 01:55 | closing object tags.
| | 02:01 | I'm using Flash CS 5.5 for this
recording which also uses a DIV and an in-line
| | 02:07 | style called Flash Content to display the SWF.
| | 02:10 | So you can copy and paste that as
well and modify to suit your needs.
| | 02:14 | If you're using a different version of
Flash what you see in the HTML file here
| | 02:18 | may be a little different than what I've got.
| | 02:20 | But the point is that at the bare
minimum copying what's in between those object
| | 02:25 | tags is what's needed to embed
this SWF file onto a webpage.
| | 02:28 | I am going to close my HTML
file and go back to Flash.
| | 02:32 | Now I'm going to open my Publish
Settings again and this time on the HTML tab
| | 02:38 | click the little box next
to Detect Flash Version.
| | 02:42 | What this does is include a little bit
of JavaScript that checks to see what
| | 02:46 | version of the Flash Player your end-user has.
| | 02:49 | If they don't have the correct version
of the player they'll be redirected to go
| | 02:52 | get it before they can view your content.
| | 02:54 | I'm going to go ahead and hit Publish
and then open up this version of the HTML
| | 02:58 | page in Dreamweaver.
| | 03:00 | You'll clearly see the reference to
swfobject.js, which is the JavaScript
| | 03:06 | file we just mentioned.
| | 03:07 | Look in your file explorer and you'll see
it published alongside your SWF and HTML.
| | 03:12 | If you want to use this you'll, of
course, need to upload the js file to your Web
| | 03:16 | server along with the HTML and SWF.
| | 03:19 | Our fastCar project doesn't have any
other files along with it here, but other
| | 03:23 | files that your SWF may depend on to
function could be FLV or F4V video files,
| | 03:28 | SWF files that act as the skin
definition for the video player as discussed in
| | 03:34 | the section about video, or SWZ files
if you're using TLF text in your SWF.
| | 03:40 | As you get more advanced in Flash, you
may start having directories of images or
| | 03:44 | text files that your SWF utilizes as well.
| | 03:47 | The point is, whatever other files your
SWF needs to work, be sure to move all of
| | 03:51 | them up to your Web server for final deployment.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | Thanks for spending these few hours with me.
| | 00:02 | If you feel comfortable with the topics
we've covered, you're now up and running
| | 00:06 | with Flash, with the toolset needed
to utilize animation, timeline control,
| | 00:10 | video, audio, and a number of
other capabilities in Flash.
| | 00:14 | We went from zero to awesome, pretty quickly.
| | 00:16 | So if you're ready for more topics and
example applications in Flash, there's
| | 00:20 | plenty at your fingertips here in
the lynda.com Online Training Library.
| | 00:24 | The Flash Essential Training Course
for your version of Flash will introduce
| | 00:27 | even more features, and go
into depth on how to use them.
| | 00:31 | There's also Essential Training for
ActionScript courses, as well as titles
| | 00:35 | focusing on Flash for games,
animation, mobile, video, and more.
| | 00:40 | The sky is the limit,
| | 00:41 | so enjoy, and I wish you all the best!
| | Collapse this transcript |
|
|
