IntroductionWelcome| 00:00 |
Hi, I'm 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 complete Flash project.
| | 00:16 |
I'll start by showing you how to navigate
around Flash and utilize parts of the work
| | 00:19 |
space 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:26 |
using some of the drawing tools.
I'll show you how to create simple
| | 00:30 |
animation by using motion and shape twins.
And we'll also see how to incorporate
| | 00:34 |
audio and video, as well as interactive
controls using buttons and simple
| | 00:38 |
ActionScripts.
We'll be covering all these features plus
| | 00:42 |
plenty of other tools and techniques.
So, let's get up and running with Flash
| | 00:46 |
Professional.
| | 00:47 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
In this course, most of our time will be
spent building towards a final project.
| | 00:04 |
So, Exercise Files with assets for
building the project exist.
| | 00:08 |
Most of the exercises build on work
completed in previous lessons, but some do
| | 00:12 |
not.
In either case, there's a folder for each
| | 00:15 |
unit of the course where we're building something.
| | 00:18 |
Inside each folder is a start folder, and
then an end folder.
| | 00:22 |
The start folder shows what the project
looks like at the start of that tutorial,
| | 00:25 |
and provides any additional assets you may need.
| | 00:28 |
The end folder shows what the end state of
the project looks like if you follow all
| | 00:32 |
the steps that I show you.
If you don't have access to the exercise
| | 00:36 |
files, you can follow along from scratch
with your own assets.
| | 00:40 |
| | Collapse this transcript |
| Viewing the finished project| 00:00 |
Most of our activity in this course is
going to be building towards a final
| | 00:03 |
piece.
Let's take a look at that piece now.
| | 00:06 |
First, I'm going to open a web browser and
go to art.samoca.org.
| | 00:11 |
This is a website for the fictional San
Angelico Museum of Contemporary Art.
| | 00:16 |
Looking at the home page, we see a
featured exhibit called Bird Watching by
| | 00:19 |
fictional artist Paul Shellington.
What we're going to build in this course
| | 00:24 |
is a Flash piece that would be linked from
this page and perhaps elsewhere on the
| | 00:27 |
Samoca site with a biography of the artist
and more detail about the collection
| | 00:30 |
itself.
To look at that, I've already got Flash
| | 00:34 |
open.
Now, I'm going to go to the File menu, and
| | 00:37 |
then Open.
In the ExerciseFiles for this chapter,
| | 00:40 |
I'll choose BirdWatching.fla.
The file opens up and to see how it works,
| | 00:44 |
I'm going to hit Ctrl+Enter on my keyboard.
| | 00:47 |
That's Cmd+Enter if you're on a Mac. (MUSIC).
| | 00:50 |
In the resulting window, you heard the
little music intro, and the opening screen
| | 00:54 |
presents a picture of the artist and a
brief biography.
| | 00:59 |
The lower buttons that show a little
thumbnail of five images from the
| | 01:02 |
collection.
When I mouse over any of them, the name of
| | 01:05 |
the painting fades in.
Clicking on any of the buttons results in
| | 01:09 |
a little sound effect and we're taken to a
screen with more detail about that
| | 01:12 |
particular painting.
When I'm done reading about the painting,
| | 01:16 |
I can click Exhibit Home to be taken back
to the main screen.
| | 01:20 |
As I click some of the other buttons,
notice how the other pages fade in
| | 01:23 |
smoothly.
However, when you click Exhibit Home, the
| | 01:26 |
detail screen simply disappears.
Also, no matter what you are looking at,
| | 01:30 |
the SAMOCA logo on the upper left, the
Exhibit Home button and the dates and
| | 01:34 |
title of the exhibit always remain on screen.
| | 01:39 |
Also, notice how the short intro music
only played when we first open the
| | 01:42 |
project.
It doesn't play again every time we go to
| | 01:45 |
the home screen.
You probably also notice that when I click
| | 01:48 |
on the buttons, there’s actually two
different bird chirp sounds that exist.
| | 01:52 |
Which one you hear depends on which button
you choose.
| | 01:55 |
The peacock detail screen is a little
different than the others and that it also
| | 01:59 |
includes a video of the actual peacock
that inspired the painting.
| | 02:03 |
I’ll click to pause the video, but notice
how the video started playing
| | 02:06 |
automatically.
Reading the text on this screen explains
| | 02:10 |
that the artist sometimes displays the
video he shot of his subject next to the
| | 02:13 |
actual resulting painting.
That's why this screen contains video, but
| | 02:17 |
the others don't.
Finally, regardless if you're viewing the
| | 02:21 |
home screen or the detail screen of any of
the paintings, when you click the SAMOCA
| | 02:25 |
logo on the upper left, the SAMOCA website
opens up in a browser window.
| | 02:30 |
So, there it is, and I'll go ahead and
close the browser window.
| | 02:35 |
To build this project, we'll introduce a
wide range of fundamental Flash skills
| | 02:38 |
that you'll use over and over in your
Flash career.
| | 02:41 |
We'll also work with a few other smaller
files that aren't related to this project
| | 02:45 |
just to help demonstrate a few different
other topics.
| | 02:49 |
| | Collapse this transcript |
|
|
1. The Role of Flash in Digital DevelopmentIntroducing Flash| 00:00 |
People throw the term Flash around a lot,
which makes sense as Flash is used in many
| | 00:04 |
places in the digital world.
It's used to create everything from
| | 00:08 |
interactive websites to premium video
experiences to all kinds of games that
| | 00:12 |
you've probably played either on your
desktop computer or on your mobile device.
| | 00:17 |
However, there are some important
distinctions to understand between Flash
| | 00:20 |
the authoring tool And the end products
that it can create.
| | 00:25 |
So, let's first talk about Flash the
authoring tool.
| | 00:28 |
This is of course a piece of software that
you pay for and install on your computer
| | 00:31 |
and is what you're watching this course to
learn about.
| | 00:35 |
Here on my screen I've already got the
Flash software opened and it's showing
| | 00:38 |
what's called the start page.
I'm going to create a new Flash document,
| | 00:42 |
as if I was going to create a new project,
by clicking ActionScript 3.0 underneath
| | 00:46 |
the Create New heading.
Now, don't worry about the other types of
| | 00:50 |
documents here, we'll worry about those later.
| | 00:53 |
For now I'm just going to click on
ActionScript 3.0 and Flash opens up a new
| | 00:56 |
black document.
This is our source Flash file, our
| | 01:00 |
authoring document where we'll create all
of our content and animation.
| | 01:05 |
I'm going to go to the File menu and then
Save As.
| | 01:08 |
And save my document with the name of Test.
| | 01:11 |
Notice the file extension of .fla for the
source file.
| | 01:15 |
So as you build your flash piece, you
probably want to test it out and see how
| | 01:19 |
it's working.
A way to do this is to press Ctrl + Enter
| | 01:22 |
on your keyboard or Cmd + Enter if you're
on a Mac.
| | 01:26 |
You'll want to memorize that keyboard
command because you're going to use it
| | 01:29 |
constantly.
Now when I do this, Flash published the
| | 01:32 |
fla file into a format ready for the world.
| | 01:36 |
Now of course, there's not much to see yet
in our blank project, but at least we have
| | 01:40 |
a published file called test.swf, or SWF.
SWF stands for Small Web Format.
| | 01:46 |
And you can recreate your SWF file as you
develop your project for testing and
| | 01:50 |
preview purposes as much as you want.
Now let's say you want to deploy your
| | 01:54 |
project to a website.
That SWF file is the actual thing that you
| | 01:58 |
would upload onto your server.
You'll need some other accompanying files
| | 02:02 |
when you're ready to deploy that SWF out
to the web.
| | 02:05 |
And we'll talk more about that in the
section about publishing.
| | 02:08 |
But the important thing is that by hitting
Ctrl + Enter, we've jumped from Flash, the
| | 02:12 |
authoring tool, to Flash the SWF file
which can be deployed out to the world.
| | 02:17 |
So, say you've uploaded your swf file to website.
| | 02:21 |
For someone to actually be able to view
the SWF on their computer, in a browser on
| | 02:25 |
the web, the Flash player plug-in has to
be installed in their browser.
| | 02:31 |
The SWF file won't play in a browser
unless the plug in is installed.
| | 02:35 |
And you're probably familiar with this already.
| | 02:37 |
When opening a browser or while browsing
the web, you may have been asked to
| | 02:40 |
download the most recent version of the
Flash Player which you can get on the
| | 02:43 |
Adobe website.
And one huge benefit of the Flash Player
| | 02:48 |
is that the vast majority of internet
users, like 99%, already have some version
| | 02:52 |
of it installed on their computer.
And it's been this way for a long time.
| | 02:58 |
Let's check out some history on Wikipedia.
On this page, I'm going to scroll about
| | 03:02 |
halfway down to the section about release history.
| | 03:05 |
I'm interested in this bit about
Macromedia Flash Player Four that came out
| | 03:09 |
in May of 1999.
This was of course before Adobe acquired
| | 03:13 |
Macromedia.
The most important thing here is that the
| | 03:17 |
install base of the Flash Player reached
92% of all internet users at this time.
| | 03:23 |
So the market penetration by Flash Player
is great and it has been that way for a
| | 03:27 |
long time.
You can rest assured that your content
| | 03:30 |
when viewed on a desktop will be viewable
by a lot of people.
| | 03:34 |
So what about the latest and greatest.
As of the recording of this movie Flash
| | 03:39 |
Player 11.7 is the most recent version.
Looking at this statistics page on
| | 03:44 |
www.adobe.com, you can see that more than
400 million connected desktops update to
| | 03:48 |
whatever the newest version of the Flash
Player is within 6 weeks of release.
| | 03:54 |
Now that and other methods are how the
most updated version of the player gets
| | 03:58 |
adopted.
So with the quick adoption rate for
| | 04:01 |
whatever the latest version of the player
is, you can be assured that older versions
| | 04:05 |
of the Flash Player have adoption rates in
the high 90s.
| | 04:09 |
If you want to target the newest version
of the player, the code necessary to
| | 04:13 |
detect an older version and then prompt
the user to get the new one can be
| | 04:16 |
generated by Flash for you when you publish.
| | 04:20 |
And it's up to you as the developer to
choose what version of the FlashPlayer you
| | 04:24 |
want to target when publishing your swif.
You should research your audience.
| | 04:29 |
For instance, it's not uncommon to have
and audience that's a group within a
| | 04:33 |
corporation which has a tightly controlled
IT environment.
| | 04:37 |
Employees might not be allowed to download
things to their work computers without
| | 04:40 |
IT's permission.
So in that case, you might not want to
| | 04:43 |
choose the very latest version of the player.
| | 04:46 |
You should choose whatever version the
company is using.
| | 04:49 |
There's nothing wrong with targeting an
older version of the player to best suit
| | 04:52 |
your audience.
In Flash, if you open up this target
| | 04:56 |
dropdown on the right hand side.
You can see that you could choose to
| | 05:00 |
target a version as old as Flash Player 10.3.
| | 05:03 |
Another reason Flash is a good choice for
delivering content on the web is that it
| | 05:07 |
looks the same across all browsers.
Have you ever built something in HTML,
| | 05:12 |
tested it in IE, Firefox, and Safari and
noticed that it looks different in some or
| | 05:16 |
all of the browsers?
Well now you have to spend your time
| | 05:21 |
making it look the same instead of
focusing on building your next project.
| | 05:25 |
That doesn't happen with Flash.
You aren't targeting a browser with your
| | 05:29 |
SWF, you're targeting the player.
It's Adobe's job to make sure that the
| | 05:33 |
player plugs into the browser and works well.
| | 05:36 |
Your job is just to develop the content
that appears within the player.
| | 05:41 |
As long as someone has the Flash player
installed, your content is going to look
| | 05:44 |
consistent.
That's one reason the Flash player has
| | 05:47 |
been used in so many places across the
web, including sites that feature video.
| | 05:51 |
Indeed, video can be easily converted to
play in the Flash player and there's a
| | 05:55 |
quick way that you can tell if content
you're viewing is using the Flash
| | 05:58 |
platform.
I'm going to go watch a video on YouTube,
| | 06:02 |
and I'm going to right-click on the video.
You'll see right here we have the option
| | 06:07 |
to see about the Adobe Flash Player 11.7.
Now, you may or may not have all of the
| | 06:13 |
other options shown here, but those bottom
three, settings, global settings, and
| | 06:17 |
about Adobe Flash Player, are a surefire
way to tell that you're viewing something
| | 06:20 |
using the Flash platform.
So you might be thinking okay, great.
| | 06:26 |
This is true for the web when you're
looking at a flash swift file from a
| | 06:29 |
computer with a browser.
But how about mobile and tablets?
| | 06:34 |
You may already know that Apple devices
like iPhone and iPad have never played
| | 06:37 |
Flash content through a web browser.
That's more of a policy decision by Apple
| | 06:42 |
than a technological limitation.
As of November 2011, Adobe stopped making
| | 06:47 |
updates to the Flash player for non-Apple
mobile devices like Android.
| | 06:52 |
So, if you want to build for users that
are going to be looking at your content in
| | 06:56 |
the specific case of using a browser on a
mobile device, you should probably not use
| | 07:01 |
flash.
That being said, let's make a distinction
| | 07:05 |
here.
Say you've used your iphone to buy an app
| | 07:08 |
from the Apple app store, or a game from
Google play.
| | 07:12 |
The chances are good that your app was
developed and deployed in Flash.
| | 07:16 |
Indeed, going back to the Statistics Adobe
Web page, more than 20,000 apps in mobile
| | 07:20 |
markets, like the Apple App Store and
Google Play, are built using Flash
| | 07:24 |
technology.
But those absent games aren't just a
| | 07:28 |
(UNKNOWN) file like view web browser.
In this case it's Flash content being
| | 07:33 |
published from Flash to the Adobe Air platform.
| | 07:37 |
Adobe Air is basically what allows you to
install a game or an app on a mobile
| | 07:41 |
device, or onto a computer as a piece of
software for that matter.
| | 07:46 |
Flash and a related software called Flash
Builder, can both easily publish as Adobe
| | 07:50 |
Air files.
So to summarize, if you want to publish a
| | 07:53 |
strait .swf file to be viewed on the web,
through the browser, on a desktop or a
| | 07:57 |
laptop, this video training is the right
place to be to learn the fundamentals of
| | 08:01 |
Flash.
If you want to build things that will
| | 08:05 |
utilmately deploy as an air project,maybe
as an app or a game to be sold in the
| | 08:08 |
android or the apple store or a program
you want people to be able to install on
| | 08:11 |
their computer.
This is still the right place to be.
| | 08:16 |
The fundamentals of offering a flash
presented here pretain in both cases.
| | 08:22 |
Just remember that Flash Player is not
widely supported for mobile browsers.
| | 08:26 |
So you’ll need to have non-Flash content
if your target audience is going to be
| | 08:30 |
viewing your stuff in the specific case of
a browser on a mobile device.
| | 08:36 |
Some companies have a Flash and non-Flash
version of their content and detect what
| | 08:39 |
platform a user is on so they can be
directed to the appropriate version.
| | 08:44 |
Topics like HTML 5 and JavaScript could be
a great place to start if needing a non
| | 08:49 |
flash alternative effects you.
That being said, once you've got some
| | 08:54 |
flash basics down if flash development for
mobile in particular is an interest of
| | 08:58 |
yours there are a number of other courses
here in the lynda.com library that focus
| | 09:01 |
specifically on techniques for that, so
check them out.
| | 09:07 |
So now, let's continue on with our journey
of learning Flash.
| | 09:10 |
| | Collapse this transcript |
| Understanding how ActionScript fits into Flash| 00:00 |
You’ve probably heard that ActionScript is
an important component of Flash.
| | 00:05 |
It is, and it probably won’t take long
until you get to the point where you do
| | 00:08 |
need to know a few things.
So, we’ll cover some very basic
| | 00:11 |
ActionScript in this course, however you
don’t need to know a lot of ActionScript
| | 00:15 |
to be able to create functional Flash pieces.
| | 00:18 |
There's even built-in little snippets of
code available to help you out as well.
| | 00:23 |
Let's take a look at some examples of what
needs ActionScript and what doesn't.
| | 00:27 |
Now, in may cases, but not all, whether
you need script or not, boils down to if
| | 00:30 |
your project is something a person just
watches, or if it's something they need to
| | 00:33 |
interact with.
We'll start with an example where you
| | 00:37 |
don't need ActionScript.
When I double-click the file called
| | 00:41 |
lynda_biker_banner.swf in the
ExerciseFiles for this chapter, you’ll see
| | 00:44 |
a somewhat complex animation with nice
motion of the biker’s legs, her hair
| | 00:48 |
blowing in the wind, and the changing
perspective of the bridge and landscape as
| | 00:51 |
she rides.
None of this is ActionScript based.
| | 00:56 |
It’s all just well-done graphics animated
on what’s called the Flash timeline.
| | 01:01 |
You don't interact with this piece at all,
you just watch it.
| | 01:03 |
So again, you wouldn't need ActionScript
to build this.
| | 01:07 |
Now, I'll open needsActionScript.swf.
Not all of the examples here require
| | 01:11 |
interaction on the part of the user, but
they do all need ActionScript to work.
| | 01:16 |
To start, the click me button is on the
screen, but without ActionScript nothing
| | 01:19 |
would actually happen when you push it.
So, there's some ActionScript listening
| | 01:24 |
for that button to be pressed.
When it is, it either shows or hides the
| | 01:27 |
rocket in response to the click.
Moving on, even though it's not
| | 01:31 |
necessarily interactive, Math also
requires ActionScript.
| | 01:35 |
You can see that the left box is
perpetually counting upward and the right
| | 01:38 |
box is perpetually adding one to the value
in the left box.
| | 01:42 |
In this case, the actual Mathematical
calculation requires ActionScript, as well
| | 01:46 |
as actually outputting those numerical
values to the screen.
| | 01:50 |
Our last example shows taking in user
input and doing different things based on
| | 01:53 |
that input.
First, I'll type in my name in the box
| | 01:56 |
indicated.
Now, if I click Yes, I ate my dinner, my
| | 02:00 |
name is repeated back, and I get to have
some dessert.
| | 02:04 |
If I say No, that I didn't eat my dinner,
I have to eat five more bites.
| | 02:08 |
So, you can see that something as simple
as a button click requires ActionScript.
| | 02:12 |
So, getting to the point of needing to use
it will likely come relatively soon for
| | 02:15 |
you.
Again, a good rule of thumb is that as
| | 02:18 |
soon as you want the user to be able to
interact with your movie, not just watch
| | 02:21 |
it, you need script.
But there is a tool in Flash called Code
| | 02:25 |
Snippets that writes ActionScript for you.
We'll be using Code Snippets in this
| | 02:30 |
course quite a bit.
| | 02:31 |
| | Collapse this transcript |
|
|
2. Introducing the Flash Professional InterfaceChoosing the type of document to work with| 00:00 |
So we're ready to start working in Flash.
I've already launched Flash, and we're
| | 00:04 |
looking at what's called the Start screen.
Right here in the center of the start
| | 00:08 |
screen is where we Create New blank Flash files.
| | 00:12 |
It might look kind of confusing at first,
because you're presented with what looks
| | 00:15 |
like a bunch of different kinds of files
to choose from.
| | 00:19 |
But the first four are not that different
at all.
| | 00:22 |
Regardless of which one of those you
choose, you're going to end up with a new,
| | 00:26 |
blank, unnamed source dot fla document.
The only real difference between these
| | 00:31 |
choice is having Flash set up options
about the final outputted SWF for you.
| | 00:36 |
I'll demonstrate this by choosing the
first option at the top, this is
| | 00:39 |
ActionScript 3.0.
So our new document is created.
| | 00:43 |
Over here on the right, in this area where
it says Property Inspector, there are two
| | 00:47 |
drop-downs.
One for Target, and one for Script.
| | 00:51 |
Right now in our final outputted SWF, we
will target Flash Player 11.7 for the
| | 00:55 |
player, and use ActionScript 3.0.
These are the settings that we're going to
| | 01:00 |
use for this course in general.
But you could open the player drop-down to
| | 01:04 |
see the other options.
You could target your SWF to play on older
| | 01:08 |
version of the flash player if you wanted.
Or output to Adobe AIR 2.5, AIR 3.6 for
| | 01:14 |
Android, AIR 3.6 for Desktop or AIR 3.6
for IOS.
| | 01:19 |
If you pull down the Script drop-down, you
can see that action 3.0 is the only
| | 01:23 |
choice.
In previous versions of Flash, up to Flash
| | 01:27 |
CS6, ActionScripts 1 and 2 were options
here as well.
| | 01:31 |
Even if you never wrote a single line of
ActionScript code in your project, you
| | 01:34 |
still had to tell Flash what version of
ActionScript you wanted to target.
| | 01:38 |
Since this version of Flash only supports
ActionScript 3, you really don't have to
| | 01:42 |
worry about this drop-down at all.
If you have a specific need for
| | 01:46 |
ActionScript 2 or 1 documents, you'll need
to use Flash CS6, or older.
| | 01:51 |
Now I'm going to close out of this
document, to return to the Start page.
| | 01:55 |
This time, I'm going to click on AIR for Desktop.
| | 01:58 |
We get a blank FLA document, and, over in
the target drop down on the right, AIR 3.6
| | 02:02 |
for Desktop, has been preselected for us.
And a similar thing happens if I open
| | 02:08 |
another new file.
This time I won't go back to the Start
| | 02:11 |
page.
I'll just go to the File menu and choose
| | 02:14 |
New.
And this time choose AIR for Android.
| | 02:17 |
And in the new FLA over in the target
drop-down, you'll see that AIR 3.6 for
| | 02:21 |
Android is preselected for us.
The equivalent happens for AIR 3.6 for
| | 02:26 |
iOS, if I choose that when I create a new file.
| | 02:30 |
So you can see that all those first four
choices really do for you, is put that
| | 02:33 |
selection in the target drop-down for you.
So, I'm going to close these blank FLA
| | 02:39 |
files.
Now, I'm going to click on the choice of
| | 02:42 |
ActionScript File from the start page.
This opens yet another blank document.
| | 02:47 |
If I go to the File, and then Save As,
you'll see that instead of being a .fla
| | 02:51 |
document, this is a .as file.
The as stands for Action Script.
| | 02:57 |
This is an external action script file.
You can write action script within your
| | 03:01 |
FLA, like we'll do in this class.
Or you can write your scripts in an
| | 03:04 |
external file like this one, and then hook
it up to an FLA later.
| | 03:08 |
Using external ActionScript files is
probably not something you'll work with
| | 03:12 |
until you become more proficient with
action script.
| | 03:15 |
So, let's just close this document.
The same could be said for the Flash
| | 03:19 |
JavaScript, ActionScript 3.0 class and
ActionScrip 3.0 Interface choices.
| | 03:25 |
You probably won't use them until you're
proficient with ActionScript, so we'll
| | 03:28 |
just leave them for now.
However, if you've programmed in other
| | 03:32 |
languages, like C++ or Java before.
You'll be glad to know that action script
| | 03:36 |
is also a robust object oriented language,
but everything else on the start page here
| | 03:39 |
is mostly for your reference.
The choices down the right hand side lead
| | 03:44 |
to tutorials and help articles about
various topics within Flash.
| | 03:48 |
The upper left shows a clickable history
of FLA files that you've worked on
| | 03:52 |
recently.
The templates in the lower middle are just
| | 03:56 |
like they sound.
They're simple templates for different
| | 03:58 |
types of commonly built projects.
Picking them apart can be a good way to
| | 04:02 |
pick up new ideas on how to construct
things in Flash.
| | 04:06 |
I especially like the ones in the
Animation and Sample Files sections.
| | 04:11 |
So, for our purposes in this course, we're
going to be using a blank ActionScript 3.0
| | 04:16 |
document.
Which as we've seen defaults to publishing
| | 04:20 |
out of SWF, targeting Flash Player 11.7.
| | 04:23 |
| | Collapse this transcript |
| Understanding document settings and orientation| 00:00 |
Let's start getting familiar with some
settings and how to move around in Flash.
| | 00:04 |
We're going to start by opening up a blank
Actionscript 3.0 document.
| | 00:08 |
The first thing you probably notice on
your screen is the big blank rectangle in
| | 00:11 |
the middle.
In Flash this is known as the stage and is
| | 00:14 |
where you'll place all of your content for
your Flash movie.
| | 00:18 |
The grey area around the stage is known as
the pace board.
| | 00:21 |
For an example, I'm going to select my
rectangle tool and quickly draw a
| | 00:24 |
rectangle half on the stage and half on
the pace board.
| | 00:28 |
As you preview our swift file, I'm going
to press Ctrl and Enter on the keyboard at
| | 00:31 |
the same time.
That's Cmd + Enter on a Mac.
| | 00:35 |
As you can see, we can only see half of
the rectangle.
| | 00:38 |
So if you want your content to appear in
your final, finished SWF, it has to be on
| | 00:41 |
the stage.
However, starting visual objects offscreen
| | 00:45 |
on the pasteboard is okay, and it can be a
good way to create an effect, like an
| | 00:48 |
airplane flying onto the screen.
Now there are a few ways to zoom in and
| | 00:53 |
out on the stage.
I like to use hot keys to zoom in and out.
| | 00:57 |
Pressing Cmd or Ctrl and then the Plus
Sign at the same time zooms you in.
| | 01:02 |
Conversely, Cmd or Ctrl and then the Minus
Sign zooms you out.
| | 01:07 |
Another good option for zooming in is the
handy zoom tool over on the tool bar.
| | 01:12 |
Once you've selected the tool near the
bottom in the options area, you can choose
| | 01:15 |
enlarge to zoom in, or reduce to zoom out.
Actually, I can't see those options, so
| | 01:20 |
I'm going to click and drag the edge of
the tool bar to give it a little more
| | 01:24 |
space, and there's my options.
Here's enlarge, or zoom in, and here's
| | 01:29 |
reduce, or zooming out.
I'm going to choose enlarge again and note
| | 01:32 |
that you can also click and drag to zoom
in on a particular spot on your screen so
| | 01:36 |
you can work in detail on your content.
Finally you can use the zoom drop down
| | 01:42 |
menu on the upper right of the interface
to zoom in or out too.
| | 01:46 |
I'm going to go back to 100%.
For re-centering your content on the
| | 01:50 |
screen, you could use the little scroll
handles to scroll right and left or up and
| | 01:54 |
down.
The easiest way, I think, is to use the
| | 01:57 |
center stage button, that appears next to
the zoom drop down.
| | 02:01 |
I'll click it and the stage is centered again.
| | 02:04 |
Moving on, rulers are super useful tool
that you've probably seen in other
| | 02:07 |
softwares, flash has them too.
So to turn the rulers on I'm going to go
| | 02:11 |
to the view menu and choose rulers.
You'll notice that the increment on the
| | 02:15 |
ruler is pixels.
The origin point for the stage is measured
| | 02:19 |
from the upper left hand corner.
In flash the X axis goes horizontally
| | 02:23 |
starting at 0 at the upper left hand corner.
| | 02:26 |
And going across the top of the stage.
The y axis, also starts at zero, at the
| | 02:30 |
upper lefthand corner, and goes down the
lefthand side of the stage.
| | 02:35 |
So, I'm going to choose my arrow tool,
click and drag, to draw a little box
| | 02:38 |
around the rectangle to select it, and now
move it over, so it's fully on the stage.
| | 02:43 |
The position of an object on the stage is,
also measured, from the upper lefthand
| | 02:47 |
corner, of that selected object.
So looking at the upper left hand corner
| | 02:52 |
of the rectangle relative to the rulers
you can see that the x position is about
| | 02:57 |
150 and the y is maybe 20.
If you want to know what it is exactly
| | 03:01 |
just select the object and look in the
properties panel over here on the right.
| | 03:07 |
It tells you the exact x and y position,
to further help you line things up on your
| | 03:10 |
stage, you might like to use guides.
To create a guideline, I'll first click on
| | 03:16 |
the stage to make sure I've deselected the rectangle.
| | 03:19 |
Now I'll click and hold on either one of
the rulers, and now drag a guide out.
| | 03:23 |
You can create as many guides as you wish.
And you can also reposition them, by
| | 03:27 |
simply clicking and dragging them, to a
new location with your mouse.
| | 03:31 |
You could also double click on a guide and
type in the location that you want it to
| | 03:33 |
have.
Guides are only a tool for you as the
| | 03:36 |
developer.
If you test your movie, you'll see that
| | 03:39 |
the guides don't appear in the published SWF.
| | 03:41 |
So I'm going to close the SWF and go back.
Now to get rid of a single guide, I'll
| | 03:46 |
simply click and drag the guide back onto
the ruler.
| | 03:49 |
If you want to lock your guides in place
so you don't accidentally move them, you
| | 03:52 |
can go to the view menu, then guides, then
lock guides.
| | 03:56 |
You can see that now I can't move my
guides at all.
| | 03:59 |
Finally, if you want to get rid of all
your guides at once, go to the view menu,
| | 04:03 |
then guides, and clear guides.
So, I'm going to zoom out a little bit and
| | 04:08 |
center my stage before we set some
properties for the entire document.
| | 04:12 |
I'm going to simply click on the stage
being sure not to click on the rectangle
| | 04:15 |
and look over in the properties panel.
Now, you can set that background color of
| | 04:19 |
your document by clicking on the
background color chip.
| | 04:23 |
For now I'm just going to stick with white.
| | 04:24 |
The FPS setting, which stands for frames
per second, is currently set to 24.
| | 04:29 |
Now this affects how fast or slow your
Flash movie's going to play.
| | 04:33 |
We'll go into a more detailed discussion
of this soon.
| | 04:35 |
But, for now know that setting this to
somewhere between 12 and 30 is generally
| | 04:39 |
considered acceptable.
The default of 24 is just fine.
| | 04:43 |
And we could type in some new stage
dimensions here in the size area, but
| | 04:46 |
instead, I'm going to click on the button
that looks like a wrench so we have access
| | 04:49 |
to some other properties as well.
So, you can see that stage size,
| | 04:54 |
background color, and FPS are repeated here.
| | 04:58 |
Here, you can also change the units of the
rulers to inches, centimeters, or other
| | 05:02 |
choices.
As far as stage dimensions, now let's
| | 05:05 |
change our current stage settings of 550
by 400 by simply typing in new dimensions.
| | 05:11 |
I'm going to put 1000 for the width and
600 for the height.
| | 05:15 |
Now when I do that the Scale Content box
becomes enabled.
| | 05:19 |
Basically, this allows you to scale items
on your stage like the rectangle bigger or
| | 05:23 |
smaller in proportion to the new stage
dimensions if we want to.
| | 05:28 |
I'm not going to do that now.
So, I'm going to click OK and you can see
| | 05:31 |
that our stage size has changed.
The size of the rectangle didn't since I
| | 05:35 |
didn't choose to scale the content.
Now, the final thing to note about your
| | 05:39 |
stage properties is in this little area
labeled SWF History.
| | 05:43 |
We've published our movie once already and
this area shows you the size of that
| | 05:46 |
published SWF.
We're at 100 bytes.
| | 05:50 |
I'm going to go ahead and delete the
rectangle from the stage by drawing a box
| | 05:53 |
around it with the arrow and then hitting
Delete on the keyboard.
| | 05:56 |
Now I'm going to press Ctrl Enter one more
time to preview our now blank SWF.
| | 06:01 |
I'm going to close the SWF and now notice
in the SWF history section that the file
| | 06:04 |
size went down a little bit since we
deleted the rectangle.
| | 06:08 |
So these are the basics that you need to
know about setting up properties for your
| | 06:11 |
flash movie.
Remember that you can change them at any
| | 06:14 |
time by simply clicking on the stage or
the pace board, an then looking in the
| | 06:17 |
property inspector.
| | 06:19 |
| | Collapse this transcript |
| Modifying the workspace| 00:00 |
With a new blank FLA file open let's
further explore the Flash interface so we
| | 00:04 |
can navigate around and make good use of
all the tools available.
| | 00:08 |
We've already identified the blank
rectangle in the middle of the screen as
| | 00:11 |
the stage.
It's like a canvas where we'll put all of
| | 00:14 |
our Flash content.
Above the stage, across the top of the
| | 00:18 |
screen, are all the menus for Flash,
things like File, Edit, View, Insert, and
| | 00:22 |
so on.
We'll explore some of the menus as we need
| | 00:25 |
them throughout the course.
Now, if all your Flash settings are the
| | 00:29 |
defaults, like mine, below the stage,
you'll find the timeline.
| | 00:33 |
Anything that's going to appear on the
stage is also going to appear in the
| | 00:36 |
timeline.
A Flash movie plays in a linear fashion.
| | 00:41 |
A timeline helps you control at what point
in linear time your items will appear and
| | 00:45 |
for how long.
We'll practice using the timeline in
| | 00:48 |
detail in a separate video.
For now know that the timeline will be an
| | 00:51 |
integral part of the setup of all of your
Flash movies.
| | 00:55 |
If you click on the stage or the paste
board with your arrow tool and look to the
| | 00:58 |
right, you'll see the properties panel,
which tells you information about whatever
| | 01:01 |
item you've clicked on.
Since I just clicked on the stage, we can
| | 01:07 |
see our Flash movie has the default frames
per second, or FPS, of 24, a background
| | 01:11 |
color of white and a stage dimension of
550 by 400.
| | 01:16 |
I'm going to move my mouse over to the
right over the very skinny panel which is
| | 01:20 |
the toolbar.
Here's where all the drawing tools are
| | 01:24 |
kept.
I'm going to click on the rectangle tool.
| | 01:27 |
When I do that you'll notice that two
places on the screen change.
| | 01:31 |
The first is the properties panel.
The second place I actually can't quite
| | 01:34 |
see all the way, so I'm going to click and
drag the edge of the tools panel to the
| | 01:38 |
left just a little bit so there's a little
bit more room.
| | 01:43 |
That's what I was looking for.
Having this extra space down here at the
| | 01:46 |
bottom of the tools panel...
So now, for our rectangle tool, in the
| | 01:50 |
properties panel, we see the different
settings that we can set for the rectangle
| | 01:53 |
that we're about to draw, things like the
fill color, the stroke color, which is the
| | 01:57 |
outline color, and also the thickness of
the stroke.
| | 02:02 |
Below all the drawings tool, settings like
fill color and outline color are repeated,
| | 02:06 |
but there's also these two other options
of object, drawing, and snap to objects.
| | 02:12 |
Clicking on several other of the tools in
the tool bar like the text tool, the paint
| | 02:16 |
bucket tool, and the pencil tool, we can
see that the properties panel and the area
| | 02:19 |
below the tool bar change depending on
what options are availble for that
| | 02:23 |
particular tool.
I'm going to chose the rectangle again.
| | 02:28 |
I'm going to change the fill color to be
black and the stroke to yellow.
| | 02:32 |
I'm going to make the stroke thicker,
either by moving the slider, or by just
| | 02:36 |
typing in a value into the box.
I'm going to type in 4.
| | 02:40 |
I'm going to make the stroke a dashed line.
| | 02:42 |
Then I'll bump up the number under
Rectangle options to 10.
| | 02:46 |
The higher the number I type here, the
more rounded the rectangle's corners will
| | 02:50 |
be.
So now I'll draw the rectangle on the
| | 02:53 |
stage.
After it appears, I'm going to go back
| | 02:55 |
over to the tools panel and select the
arrow tool.
| | 02:59 |
Now I'll double-click on that black
rectangle and notice that the properties
| | 03:02 |
panel changes again.
Now, it tells us information about the
| | 03:05 |
shape that we selected on the stage.
For instance, it tells us that the
| | 03:09 |
exposition of our rectangle's 164, and the
Y is 135.
| | 03:14 |
The width is 187 pixels, about.
And the height is 103 pixels.
| | 03:19 |
It also shows us some of the settings that
we chose for the style, the fill and the
| | 03:23 |
stroke.
So now I could go and change, say for
| | 03:26 |
instance, the stroke from a dashed line to
another kind of line.
| | 03:31 |
So, you can see that the properties panel
is a pretty important panel.
| | 03:34 |
You'll use it constantly to check and
update settings for items on y our state.
| | 03:39 |
Now, let's work with the actual panels
themselves a little bit more.
| | 03:42 |
They're designed to be moved around to
best suit your workflow.
| | 03:46 |
You can expand and contract panels by
clicking on the little double arrow at the
| | 03:50 |
top of each panel.
For instance, I can contract an expand the
| | 03:54 |
library an properties panels.
Likewise, I can expand this panel set to
| | 03:59 |
reveal the color, swatches, align, info,
and transform panels.
| | 04:04 |
And when a panel set is open, you can
click the little Context menu on the upper
| | 04:08 |
right to see different additional options
available for that panel.
| | 04:13 |
So for instance, for the Swatches panel, I
could duplicate a swatch, delete a swatch,
| | 04:17 |
add colors, and so on.
Now you could change where an entire panel
| | 04:21 |
group is docked or positioned.
I'm going to collapse the color group.
| | 04:26 |
And see this little, dotted area, at the
top here?
| | 04:29 |
If I click and drag that, I can move the
whole panel set, say, over to the left.
| | 04:33 |
I'm going to hover on the left side of the
screen for just a moment, and you'll see a
| | 04:37 |
blue outline, and a gray shade, pop up.
This is the new spot that I can dock my
| | 04:42 |
panel into.
Now, I'll try clicking on the gray bar
| | 04:45 |
next to the timeline and the output panels.
| | 04:47 |
I can drag this panel set up to the top.
I'll wait for the little blue line to
| | 04:52 |
appear and then go ahead and dock them at
the top.
| | 04:55 |
You could also do something like pull the
toolbar out and have it just float above
| | 04:58 |
everything else.
You can change the panel layouts as much
| | 05:02 |
as you want.
Now, if you move something somewhere you
| | 05:05 |
don't like and you can't get it unstuck,
you can always go to the drop-down at the
| | 05:08 |
upper right of this screen that says Essentials.
| | 05:12 |
If you choose Reset Essentials, your panel
layout will return to the default layout
| | 05:16 |
you see when you first open Flash.
So basically, don't be afraid to move your
| | 05:21 |
panels around, you can't break the interface.
| | 05:24 |
You can always just reset essentials.
You could also check out some of the other
| | 05:28 |
preset layouts.
Here's one that's meant to be useful for
| | 05:31 |
designers, with a timeline at the top, and
the color and the drawing tools very
| | 05:34 |
visible.
Here's another one that's meant to be
| | 05:37 |
useful for developers, and so on.
So let's say you've created a panel layout
| | 05:42 |
that you really love.
For instance, I'll have the toolbar float
| | 05:45 |
above all the other panels and I'll expand it.
| | 05:49 |
Now in the panel layout drop-down, I could
choose New Workspace, type in a name for
| | 05:53 |
the layout and save it.
The new workspace now appears in the list
| | 05:57 |
of possible layouts that you can choose from.
| | 05:59 |
For now, I'm just going to be boring and
reset my work space back to the essentials
| | 06:03 |
layout.
The final thing to know about panels, is
| | 06:06 |
that you don't automatically see all of
them that exist when you open up flash.
| | 06:11 |
If you go to the window menu, you'll see
all of the other ones that exist.
| | 06:15 |
One useful panel is the history panel.
I'm going to resize this just a little
| | 06:19 |
bit.
And now if I slide the little slider bar
| | 06:22 |
up the left-hand side, Flash will step
backward through all of the steps that I
| | 06:25 |
just did to draw the rectangle.
Now this can be a nice way to undo steps
| | 06:30 |
if you want to change your flash file back
to the way it was 5 minutes ago.
| | 06:35 |
And you don't know how many times you'd
have to press Ctrl + Z to get there.
| | 06:38 |
With the History panel, you can also step
back forward through the steps as well.
| | 06:42 |
So we've now heard the most important
terminaology and seen how you can change
| | 06:46 |
the layout of the workspace and different
panels availible in Flash.
| | 06:51 |
So now let's start creating some actual
content.
| | 06:54 |
| | Collapse this transcript |
| Understanding and importing bitmap and vector files| 00:00 |
Well flash provides you a number of
drawing tools.
| | 00:02 |
Using imagery that's been created outside
of Flash is likely going to be something
| | 00:05 |
you'll want to do often.
You can import both bitmap and vector
| | 00:09 |
graphics into flash.
So let's take a look at the import
| | 00:12 |
process.
And talk about the differences between
| | 00:15 |
vector and bitmap.
Here we'll perform the first steps to
| | 00:18 |
create the finished project you previewed
earlier at the start of the course.
| | 00:22 |
It showcases the artwork in the
birdwatching art collection.
| | 00:26 |
As a refresher of what this looks like,
I'm going to open up our final
| | 00:29 |
birdwatching.swf piece for review.
(MUSIC) Right now, we will be working with
| | 00:34 |
the picture of the artist the Samoca logo,
the familiar science images of the
| | 00:38 |
paintings that appear in the buttons below
right here and then the larger size
| | 00:42 |
paintings that appear on the detailed
pages for each painting like this one.
| | 00:50 |
In flash, I'm going to start my creating a
new blink ActionScripts 3.0 file.
| | 00:55 |
I'll save it as bird watching dot fla, in
the n folder in the exercise files for
| | 00:58 |
this chapter.
In the property inspector, notice the
| | 01:02 |
default document settings that have the
staged dimensions as 550 by 400.
| | 01:07 |
The frames per second at 24, and a white
background color.
| | 01:10 |
Let's stage the stage dimensions to 1000
by 600 by typing in those values.
| | 01:16 |
Now I will change my view to 50% so we can
see the whole stage and centre of the
| | 01:19 |
stage, we will start by bringing in the
picture of the artist which is a bitmap
| | 01:22 |
image, I will go the file menu and choose
import then import to stage, I am going to
| | 01:26 |
choose the file called paulshellington.gif
and click Open to import It takes just a
| | 01:30 |
second for the import process to be done.
The image appears on the stage and it also
| | 01:38 |
appears in the library panel.
Click on the LIbrary tab to see it.
| | 01:42 |
You can click on the image listing in the
library to see a preview.
| | 01:46 |
You can think of the library just like a
regular library where you'd go to check
| | 01:49 |
out books.
It contains copies of all the assets you
| | 01:52 |
might use in a project, whether they are
images, sounds, videos or symbols, which
| | 01:55 |
we will talk about later.
And just because something's in the
| | 01:59 |
library doesn't mean it's used on the stage.
| | 02:01 |
Just like the real library, we have lots
of books on the shelf but may only take
| | 02:04 |
one off at a time to read.
Items can be stored in your Flash library
| | 02:09 |
until you're ready to use them later.
We're going to bring in some more assets
| | 02:12 |
for our project now so I'll go to File >
Import again, but this time, instead of
| | 02:16 |
Import to Stage, choose Import to Library.
I'm going to import in ten items at once
| | 02:22 |
here.
So I'm going to hold down the Ctrl key on
| | 02:24 |
the keyboard, so I can select them all together.
| | 02:27 |
That would be the Cmd key on a Mac.
So I'll choose birdonahighwire.jpg and
| | 02:32 |
birdonahighwirethumb.jpg, pinkskies.jpg
and pinkskiesthumb.jpg, thepeacock and
| | 02:37 |
thepeacock thumb, waiting and
waitingthumb, and warning and
| | 02:40 |
warningthumb.
Then click Open.
| | 02:44 |
Our library has suddenly gotten a lot
bigger and you click on each image to see
| | 02:47 |
to see a preview level.
Because we chose to import to library none
| | 02:51 |
of these appear on the stage.
We simply click and drag an item from the
| | 02:55 |
library to the stage to get it to appear.
All drag and drop PinkSkies and
| | 02:59 |
PinkSkiesThumb.
You can have as many copies as you want.
| | 03:03 |
For instance, I'll drag out a second copy
of Pink Skies Thumb.
| | 03:06 |
You might be wondering why we have a large
and a small version of each of the
| | 03:09 |
paintings.
If we can have multiple copies of
| | 03:12 |
something on the stage, why not just
import one and re-size it.
| | 03:15 |
Well, the reason is that all of the items
we just brought into flash are bit maps.
| | 03:20 |
Bit map images don't scale up and down easily.
| | 03:23 |
You can think of image information for
bitmaps kind of like colors on a grid.
| | 03:27 |
For instance, in the pink skies image, one
pixel is pink.
| | 03:30 |
Then the pixel next to it could be brown.
With the pixel next to that being beige,
| | 03:33 |
and so on.
If you need to scale a bitmap image so
| | 03:37 |
it's bigger your image program has to
guess what color to use to fill in the
| | 03:40 |
extra space you've added to the grid.
Likewise, scaling a bitmap image down also
| | 03:46 |
requires some guesswork as to what color
to make each pixel.
| | 03:50 |
Sine you're essentially making the area of
the grid smaller.
| | 03:52 |
You can see this behavior by clicking on
an image.
| | 03:55 |
I'll choose a small version of the
painting and then over in the toolbar,
| | 03:58 |
selecting the free transform tool.
Transformation handles appear on the image
| | 04:03 |
and now I can resize it.
I'm going to approach a corner of the
| | 04:06 |
image and you'll see a double headed arrow appear.
| | 04:10 |
Clicking and dragging allows me to change
the width and the height of the image.
| | 04:13 |
If you hold down the Shift key while
clicking and dragging with the double
| | 04:16 |
headed arrow, the width and height stay in
proportion to each other as the image is
| | 04:19 |
made bigger or smaller.
Go ahead and make the image really big.
| | 04:24 |
That doesn't take long and you an easily
see how the image quality degrades and
| | 04:28 |
it's pixelated.
That 's because as he bitmap scales, there
| | 04:31 |
not defined information to fill in the
extra pixels you're asking the image to
| | 04:35 |
include.
So flash is just guessing.
| | 04:39 |
I'll delete this image since we don't need it.
| | 04:41 |
And to see the opposite scenario, now
select and scale down the large version of
| | 04:44 |
the image.
It looks OK for a while, but as it gets
| | 04:47 |
close to the size of the small version, it
starts to look kind of squished and not
| | 04:50 |
very smooth anymore.
The pictures you take with a camera are a
| | 04:55 |
great example of imagery captured as a bitmap.
| | 04:58 |
You'd use a program like Adobe Photoshop
to be able to resize bitmaps without
| | 05:01 |
getting that pixelation.
So the conclusion to take away about
| | 05:04 |
bitmap images, is that it's best to have
them sized at the correct dimensions you
| | 05:08 |
need, before importing them into Flash.
Even though it means we'd have two
| | 05:14 |
versions of each painting, having those
two versions assures us a decent quality
| | 05:17 |
image at both sizes.
>> I'm going to delete those two versions
| | 05:21 |
of the pink skies painting.
And now let's move on and import a vector
| | 05:24 |
file.
I'm going to go to file menu again, scroll
| | 05:28 |
down to import and this time select import
to stage.
| | 05:31 |
I'll choose the file in our start folder
called SAMOCA_bldg_logo.ai.
| | 05:37 |
This is an Adobe Illustrator file that has
a number of layers in it if you're
| | 05:40 |
familiar with the concept of layers.
I'll click OK and we're presented with
| | 05:44 |
some options before we import our file.
Under layer conversion I'm going to choose
| | 05:49 |
maintain editable pass and effects.
I don't want this to be a flattened bitmap
| | 05:53 |
since I want this to be able to scale up
and down without pixelation.
| | 05:58 |
Under text conversion, I'm going to choose
vector outline.
| | 06:01 |
That's fine instead of editable text,
since I don't anticipate needing to edit
| | 06:05 |
any of the text in this Imoca logo.
Finally, under convert layers to, we'll
| | 06:10 |
stick with Flash layers.
You could have Flash squish all the layers
| | 06:14 |
into one, by choosing single Flash layer,
but I'd like to maintain the layers
| | 06:17 |
defined in the Illustrator document.
For that reason, converting layers to
| | 06:22 |
keyframes is also not the best choice.
We’ll discuss keyframes a little later.
| | 06:27 |
So I’m ready to click OK and the Samoca
logo is imported onto the stage.
| | 06:31 |
It’s a little bit small so, making sure
the logo is selected, I’m going to head
| | 06:34 |
over to the toolbar and grab my free
transform tool.
| | 06:38 |
Or you could just hit Q on your keyboard
and the transformation handles will appear
| | 06:42 |
that way as well.
I'll hold down the Shift key as I enlarge
| | 06:45 |
and shrink the logo.
And you'll notice that I can change the
| | 06:48 |
dimensions as much as I want and the image
always stays looking sharp and non
| | 06:51 |
pixelated.
So instead of storing the information
| | 06:55 |
about the image like a grid like bitmaps
do, vector graphics like this one instead
| | 06:59 |
use mathematical equations to describe the
shapes and curves.
| | 07:04 |
As you change the image, the shapes of the
image are simply recalculated, so it
| | 07:07 |
always appears crisp.
So while it is a good idea to have vector
| | 07:11 |
imagery already sized correctly before you
imported into flash, you can see that
| | 07:14 |
adjusting the size after the fact works
pretty well.
| | 07:18 |
So i am going to change my logo to some
specific demesions by opening the property
| | 07:22 |
inspector and making sure the icon of the
chain here looks like a linked chain.
| | 07:27 |
That locks the width and height values
together so that if you change one the
| | 07:30 |
other changes proportionally.
I'm going to type in 190 for the width and
| | 07:35 |
the height should automatically update to 141.9.
| | 07:38 |
That looks good, and I'll just move this
(UNKNOWN) logo onto the stage.
| | 07:44 |
So we've seen that importing imagery into
flash, whether its vector or bitmap, is
| | 07:47 |
pretty simple.
Flash can import in Photoshop psd files as
| | 07:51 |
well.
Just remember as as a best practice to
| | 07:53 |
have your imagery, especially bitmaps,
sized correctly before bringing them into
| | 07:57 |
flash.
We'll end with just one more best
| | 08:00 |
practice.
And that's to organize our library a
| | 08:02 |
little bit.
I'm going to grab my arrow tool from the
| | 08:05 |
tool bar and click on the library tab.
Now you can create folders to help
| | 08:09 |
organize your library by clicking on the
new folder icon at the bottom of the
| | 08:12 |
library panel.
I'm actually going to click it twice so we
| | 08:16 |
have one folder for the thumbnail size
images, and another for the large size
| | 08:19 |
images.
Now you probably noticed that you can
| | 08:22 |
rename those folders as you create them or
you can rename anything in your library by
| | 08:26 |
double-clicking on the name and typing in
a new one.
| | 08:30 |
The first folder I'll call paintings the
second paintings thumbnails.
| | 08:35 |
Now making sure everything in your library
has an intuitive name is a great idea.
| | 08:39 |
Libraries can get quite large and its
helpful to be able to tell at a glance to
| | 08:42 |
tell what something is from a descriptive name.
| | 08:46 |
Now I'll just drag my thumbnail images
into the paintingsThumbnails folder, and
| | 08:49 |
the large-size images into the paintings folder.
| | 08:53 |
Clicking on the arrow to the left of a
folder lets you expand or collapse the
| | 08:56 |
folder.
With that, we're ready to move on to our
| | 08:59 |
next task.
| | 09:01 |
| | Collapse this transcript |
| Understanding and organizing layers| 00:00 |
One really good way to organize all your
visual assets on the stage is by using
| | 00:04 |
layers.
If you've used layers before in programs
| | 00:07 |
like Adobe Photoshop or Illustrator, the
concept will transfer easily for you.
| | 00:12 |
To explore this, I'm back in the
birdwatching.fla project that we started
| | 00:15 |
earlier.
In Flash, the layers are controlled from
| | 00:18 |
the timeline.
Looking at the bottom left of the screen
| | 00:22 |
next to the timeline, you will see that we
currently have two layers in this flash
| | 00:25 |
project.
One is the default layer you get when you
| | 00:29 |
open up a new project, and we placed the
picture of Paul Shellington there.
| | 00:33 |
The second layer was created for us when
we imported in the SAMOCA logo.
| | 00:37 |
That's great, because one best practice
while working in flash is to have each
| | 00:41 |
visual item on the stage on its own layer.
That way you can work with one individual
| | 00:46 |
asset at a time and not accidentally
affect other items.
| | 00:49 |
It also makes it easier for animation.
So organizing your movie layers is a good
| | 00:53 |
habit to get into early.
You can turn the visibility of layers on
| | 00:58 |
and off as an easy way to see what's on
each layer.
| | 01:01 |
So on the bottom layer I'm going to click
on the little dot in the column underneath
| | 01:05 |
the icon of the i.
The picture of the artist Paul Shellington
| | 01:09 |
disappears, so that's what's on this layer.
| | 01:12 |
Now I'm going to click on the dot next to
the top layer and we see the samoca logo
| | 01:15 |
appear and disappear.
You can click on the eye icon itself to
| | 01:18 |
affect the visibility of all the layers at once.
| | 01:22 |
So another best practice is to name your
layers something intuitive with only two
| | 01:25 |
items on the stage this may not seem that important.
| | 01:29 |
But when you have a Flash project with
tens or hundreds of layers you'll
| | 01:32 |
appreciate layer names that make sense as
opposed to layer one layer two layer
| | 01:35 |
three.
So to change a layer name, simply double
| | 01:38 |
click on the name and type in a new one.
I'll name the top layer Samoca and the
| | 01:43 |
bottom layer Home Content.
You can easily change the stacking order
| | 01:47 |
of your layers by dragging and dropping a
layer up or down.
| | 01:50 |
To illustrate, I'm going to move the image
of Paul Shellington up on the stage just a
| | 01:54 |
little bit, so the picture and the logo overlap.
| | 01:57 |
Now in the Timeline, I'm going to click
and drag the Home Content layer above
| | 02:00 |
SAMOCA.
As I do, notice the dark black line that
| | 02:03 |
appears to indicate where the layer's
going to be placed when I release the
| | 02:07 |
mouse.
I release the mouse, and now with the
| | 02:11 |
homeContent layer on the top, you can see
that part of the SAMOCA logo's disappeared
| | 02:14 |
because it's underneath the artist's photo.
| | 02:17 |
It's actually fine to leave our layers
stacking this way since these two visual
| | 02:20 |
items aren't going to overlap in our final project.
| | 02:24 |
We'll actually fix their positioning in
just a minute.
| | 02:27 |
However, if you're ever in a situation
where you aren't seeing something on the
| | 02:30 |
stage that you're pretty sure was there,
one way to hunt it down would be to turn
| | 02:33 |
the visability of your layers on and off.
The item might be below something on one
| | 02:38 |
of the other layers.
You can then rearrange your layer stacking
| | 02:41 |
in the timeline if necessary.
Let's add two new layers to our project in
| | 02:45 |
anticipation of content that we'll be
adding soon.
| | 02:49 |
New layers are added above whatever layer
you've got selected.
| | 02:52 |
So now, let's select our home content
layer and simply click on the icon that
| | 02:55 |
looks like a little piece of paper.
It's at the very bottom left of the
| | 02:59 |
timeline layers.
I'll do it twice.
| | 03:02 |
Now I'll remain.
Besides the fact that I just created this
| | 03:04 |
layer.
And now I'll rename it the bottom most new
| | 03:06 |
layer background and the top most one by tenths.
| | 03:08 |
And besides the fact that we just created
these layers, you can tell nothing happens
| | 03:11 |
since there's two other ways.
First turn the invisibility of these
| | 03:15 |
layers on and off and nothing happens
since there's nothing on either layer.
| | 03:19 |
Also, notice how the home content and
samoca layers have the first frame in the
| | 03:23 |
timeline filled in with a grey background
and a filled in black dot.
| | 03:28 |
Having that coloration indicates there's
something on the layer.
| | 03:32 |
The background and buttons layers don't
have the shading or filled in dot, that
| | 03:35 |
indicates the layer's empty.
Now, if for some reason you've got a layer
| | 03:39 |
that you don't need anymore, it's easy to
delete by just selecting the layer and
| | 03:42 |
then clicking the little trash can at the
bottom of the timeline.
| | 03:46 |
I recommend getting rid of layers you
aren't using so you don't clutter up your
| | 03:50 |
timeline with unused stuff.
But, we're going to keep these two new
| | 03:53 |
layers and further organize them by using folders.
| | 03:57 |
I'll click on the new folder icon at the
bottom of the layers to create a new
| | 04:00 |
folder.
I had the buttons layer so notice how the
| | 04:03 |
new folder was added in.
You can add and drop layers just like
| | 04:08 |
folders so I'll drag content layer.
I'm also going to rename is by double
| | 04:14 |
clicking the folder and call it bg for background.
| | 04:18 |
I'm going to put the background layer into
the background folder by clicking and
| | 04:21 |
dragging the layer down and slightly to
the right.
| | 04:25 |
Notice how the black line that indicates
where the layer is going to drop indents a
| | 04:28 |
little bit since I've dragged it to the right.
| | 04:31 |
When I release the mouse, you can see the
background layer is now indented under the
| | 04:35 |
folder to indicate that it's inside.
Let's move this smoke layer into the
| | 04:40 |
folder too above the background layer.
Clicking on the little arrow to the left
| | 04:44 |
of the folder name allows you to expand
and contract the contents in the folder.
| | 04:48 |
Finally I'm just drag and drop the home
content layer below the buttons layer.
| | 04:53 |
So we have all the layers and folders for
our content that we need for now but
| | 04:56 |
there's a special type of layer called a
guide layer that may prove useful to you.
| | 05:02 |
I'm going to create a new layer and call
it guide.
| | 05:04 |
Now I'll drag it down to the very bottom
of the layer stack below the folder.
| | 05:08 |
Make sure you drag that layer down and to
the left so it doesn't end up indented
| | 05:11 |
inside the BG folder.
You can double click by closing the BG
| | 05:15 |
folder and making sure the guide layer is
still visible.
| | 05:19 |
Now I'm going to double click on the piece
of paper next to the word Guide, this
| | 05:22 |
opens up the Layer Properties box.
And using the radio buttons, I'll change
| | 05:27 |
this layer from a normal layer to a guide layer.
| | 05:30 |
Now I'll click OK.
Notice how the icon on the timeline has
| | 05:32 |
changed from a piece of paper to what
looks like a t-square.
| | 05:36 |
That indicates that this is a guide layer.
Guide layers are visible when working in
| | 05:40 |
your FLA but not in the SWF.
This makes them a useful tool to help you
| | 05:44 |
through the development process.
For example, maybe you want to put a comp
| | 05:48 |
in this layer that you or a designer
you're working with has created to help
| | 05:52 |
you place things on the stage in the exact
right spot.
| | 05:56 |
Or maybe you want to type instructions to
another developer literally on the stage.
| | 06:01 |
Let's try it out.
I'm going to import a guide image that
| | 06:03 |
shows us where all the elements on our
stage are meant to be placed.
| | 06:07 |
So making sure the guide layer's selected,
I'll go to file > import > import to
| | 06:11 |
stage.
I'm going to choose the image called
| | 06:14 |
guideimage.jpg, and click open.
Flash brings it in, and notice when I
| | 06:18 |
click on the background image and look at
the property inspector, Flash has placed
| | 06:22 |
it at an X and Y of 00.
Since the image happens to be the same
| | 06:27 |
size as our stage dimensions, 1000x600, it
lines up perfectly square.
| | 06:33 |
Clearly the SAMOCA logo in the picture
don't line up exactly with what the final
| | 06:36 |
layout is supposed to be, so I'm going to
click offstage on the pasteboard to make
| | 06:40 |
sure nothing is selected.
Now I'll click on the SAMOCA logo.
| | 06:45 |
When I do, notice how the Samocha layer in
the timeline becomes highlighted.
| | 06:49 |
That's one way to tell what layer an item
is on.
| | 06:52 |
Now, in the Property Inspector on the
right, I'm going to type in 21.95 for the
| | 06:57 |
x, and 15.5 for the y.
Now I'll click on the image of Paul
| | 07:01 |
Shellington.
The property inspector opens to show
| | 07:04 |
information about this image and I'll type
in 27.5 for the exposition and 163.35 for
| | 07:09 |
the y.
Now when I turn the visibility of the home
| | 07:13 |
content and samoca layers on and off it
looks almost as if nothing is happening
| | 07:17 |
and that's what we want.
Those items line up exactly with the
| | 07:21 |
background image.
Since we've just positioned these things
| | 07:25 |
so specifically, it would be nice to avoid
moving them around on the stage by
| | 07:28 |
accident.
So we can lock the layers.
| | 07:31 |
Just like the eye, you can click on the
dot in the column under the lock to lock
| | 07:34 |
each layer, one by one.
Or you could click on the lock itself to
| | 07:39 |
toggle all layers between locked and unlocked.
| | 07:42 |
With the layers locked, try selecting
anything on the stage.
| | 07:45 |
And of course, you can't move anything.
You might be wondering about the column to
| | 07:49 |
the right of lock, with the little rectangle.
| | 07:52 |
This column allows you to view some or all
of the layers as outlines.
| | 07:56 |
This can come in handy at times for
instance if you're trying to line up one
| | 07:59 |
item precisely behind another.
For now we'll just leave everything on as
| | 08:03 |
normal.
So let's test our movie by hitting Control
| | 08:06 |
Enter.
You'll see that the guide image does not
| | 08:09 |
appear in the preview SWF.
And that's what guide layers are for to be
| | 08:12 |
something to help the developer but not
appear in the SWF.
| | 08:16 |
That way it doesn't confuse your
colleagues or clients who may be reviewing
| | 08:19 |
your piece during development.
Another advantage is that the file size
| | 08:23 |
associated with the image in the guide
layer is not included in the resulting
| | 08:27 |
SWF.
To show this, I'm going to click somewhere
| | 08:30 |
on the paste board, and now open up the
Properties panel, so we see the properties
| | 08:34 |
for the document itself.
The swiff history section, you can see
| | 08:38 |
that this size of the swiff that we just
created is 57.3 K.
| | 08:42 |
Now, I'll double click on the icon next to
the guide layer name again.
| | 08:46 |
And change it back to a normal layer.
I'll test the movie again, immediately
| | 08:50 |
close the swiff, and then open up the
properties inspector again.
| | 08:54 |
My file size has jumped up to 201.4K,
because the size of the guide image is now
| | 08:58 |
included in the SWF.
The little yellow exclamation point next
| | 09:03 |
to the file size is just an indicator that
the SWF size has increased over 50%, and
| | 09:07 |
in this case, that's all right.
You can see it's much better when this
| | 09:12 |
layer is a guide, so as a final step, I'm
going to change the guide layer back into
| | 09:15 |
a guide layer.
So use guide layers to your advantage, but
| | 09:19 |
I would recommend that once you're done
with them, delete them, even though
| | 09:22 |
they're not included in the final SWF.
That way, your FLA files include only
| | 09:26 |
layers with content that's actually used
in your project.
| | 09:30 |
| | Collapse this transcript |
| Introducing the Timeline, frames, and keyframes| 00:00 |
Controlling the appearance and
disappearance of objects on the screen
| | 00:03 |
overtime is that basic Flash skill.
You'll need to understand how to use the
| | 00:08 |
Timeline, Frames and Keyframes.
To practice these concepts I have created
| | 00:12 |
a test file called travelPhotos.fla.
Its a pretty simple file with only five
| | 00:17 |
layers and four images in the Library.
Before we start working, in the Exercise
| | 00:21 |
files I'm going to pop open the
travelPhotosPreview.swf to see what we are
| | 00:25 |
building toward.
It's a short movie.
| | 00:28 |
Only five seconds long.
Four images appear in succession, with a
| | 00:32 |
short piece of text appearing at the same
time as the last image.
| | 00:36 |
Then the movie starts over.
So, when I close this Preview file and
| | 00:39 |
return to travelPhotos.fla and Flash.
Before starting, I'm going to use the View
| | 00:44 |
drop-down on the upper right of the stage
and choose Fit in Window, so we're sure to
| | 00:48 |
see the entire stage.
The Flash Timeline, which appears across
| | 00:53 |
the bottom of the screen, is measured in frames.
| | 00:56 |
You can see the frame numbering across the
top of the timeline.
| | 00:59 |
How fast those frames are played is
determined by the frames per second.
| | 01:02 |
To see what our frames per second is,
click on your Stage and then open the
| | 01:05 |
Property Inspector.
We're at 24 frames per second.
| | 01:09 |
Well, our movie currently only has one
frame, so to have a movie that's five
| | 01:13 |
seconds long, we need to extend our
timeline out to 120 frames.
| | 01:18 |
Five seconds multiplied by 24 frames
equals 120.
| | 01:22 |
So I'll click on frame one of the image1 layer.
| | 01:25 |
You can add frames one at a time by
pressing F5.
| | 01:28 |
You could also right-click and choose
Insert Frame.
| | 01:32 |
Of course adding frames one at a time is
pretty tedious, so I'm going to grab the
| | 01:36 |
slider bar that appears under the Timeline
and slide over to frame 120.
| | 01:41 |
I'm going to choose frame 120 making sure
I've got the one on the image1 layer and
| | 01:44 |
now right-click on the frame and choose
Insert Frame.
| | 01:48 |
Or of course you could have pressed F5.
So the image1 layer has 120 frames.
| | 01:53 |
I'm going to open the Library and Drag and
Drop vacation_1.jpg to the stage kind of
| | 01:57 |
over on the left.
You can see that if you try to drag
| | 02:01 |
something to the time line Flash doesn't
let you.
| | 02:04 |
You have to drag things onto the stage.
So, with the picture on the stage, the
| | 02:08 |
frame and the Timeline now all turn gray
to indicate that there's content on the
| | 02:11 |
screen.
When I click the top of the Timeline, also
| | 02:15 |
notice the vertical red line that appears.
This is called the Playhead.
| | 02:19 |
You can drag it across the time line to
preview what your Flash movie looks like
| | 02:22 |
so far.
Dragging the playhead is better known as
| | 02:25 |
scrubbing the Timeline.
Of course, right now all of the frames
| | 02:28 |
look the same for the entire movie, so
let's extend our other layers out to frame
| | 02:32 |
120.
I'll click on frame 120 on the image2
| | 02:35 |
layer.
But instead of extending each layer out
| | 02:38 |
individually you can multiple-select by
holding down the Shift key on your
| | 02:42 |
keyboard.
Then I'll select frame 120 for the image3
| | 02:46 |
and image4 layers as well.
I'll add the frames by pressing F5.
| | 02:50 |
We now have 120 frames on these layers
too, but you'll notice that they all have
| | 02:54 |
a darker gray background instead of the
lighter gray like the image one layer.
| | 02:58 |
That's because there's nothing on the
stage for these layers yet.
| | 03:01 |
So I'm going to scroll over to the
beginning of the Timeline and click just
| | 03:05 |
above Frame 1.
Now I'm going to press Enter on the
| | 03:08 |
keyboard.
You'll see that the Playhead moves.
| | 03:10 |
And also there's two counters on the
bottom that show what frame the Playhead
| | 03:14 |
is on and how many seconds that
corresponds to.
| | 03:18 |
Notice that the Playhead stops when it
gets to the end.
| | 03:21 |
Now in the text layer I'm going to select
frame 125 and Insert Frames.
| | 03:26 |
And I'm going to scrub the Timeline near
the end of the frames.
| | 03:29 |
We'll see the stage update appropriately
depending on what frame the playhead's on.
| | 03:33 |
The stage of course is empty from frame
121 to frame 125, since there's only blank
| | 03:37 |
frames.
Anything before frame 120 has the picture
| | 03:41 |
of the bird, so let's test the movie.
It looks just about like it did when we
| | 03:46 |
scrubbed the play head, but at the end
you'll see the little blip.
| | 03:50 |
What's happening is that we see five
seconds worth of seabird and then the five
| | 03:53 |
blank frames at the end.
Well on the Timeline, when working in the
| | 03:57 |
FLA, when we pressed Enter, the Playhead
stopped at the last frame.
| | 04:01 |
In the SWF, the Playhead reaches the last
frame and then returns to Frame 1.
| | 04:06 |
So now that you've seen this, we don't
need those blank frames anymore.
| | 04:10 |
To get rid of them, I'll click on Frame
121 in the text layer, hold down the Shift
| | 04:13 |
key, select Frame 125, and then
right-click and choose Remove Frames.
| | 04:19 |
Let's move on to the idea of Keyframes.
One way that might be helpful to think of
| | 04:23 |
Keyframes is to think about stop frame
animation as used in Claymation.
| | 04:27 |
If you've watched shows like The
California Raisins, or Shawn the Sheep, or
| | 04:30 |
Wallace and Gromit.
You can imagine how the clay characters
| | 04:34 |
are put into position, and image is
snapped, and then the characters
| | 04:36 |
repositioned.
Another image is taken, and so on and so
| | 04:40 |
on in succession.
Keyframes are a lot like this.
| | 04:43 |
Each key frame shows the starting
position, size, and other attributes of
| | 04:47 |
items on the screen.
When you need new positioning you need a
| | 04:51 |
new Keyframe.
Keyframes and Flash are indicated by a
| | 04:54 |
circle.
Looking at Frame 1 of the Timeline, you'll
| | 04:57 |
notice that all our layers have a Keyframe
on Frame 1.
| | 05:00 |
However image one is the only one that has
anything on the keyboard.
| | 05:05 |
You can tell because the circle is filled
in and the background is light grey.
| | 05:09 |
A non filled-in circle and a dark grey
background indicates a blank keyframe.
| | 05:15 |
Regular frames simply copy everything from
the closest previous keyframe.
| | 05:20 |
For instance, Frames 2 through 120 on the
image1 layer all look exactly the same as
| | 05:24 |
the keyframe on Frame 1.
Those are frames, not keyframes.
| | 05:29 |
So they simply extend over time whatever
the keyframe defines.
| | 05:34 |
If you wanted the seabird image to be in a
different position on say, frame 20.
| | 05:38 |
You'd need to add a new keyframe by
right-clicking on Frame 20 and choosing
| | 05:42 |
Insert Keyframe.
What it first does is copy the information
| | 05:46 |
from the most previous keyframe.
In this case, Frame 1 and stick it in the
| | 05:49 |
new keyframe.
I can then move the bird image around on
| | 05:52 |
frame 20 to a different position.
You can see the effect when you scrub the
| | 05:57 |
playhead.
By the way, this little rectangle on Frame
| | 06:00 |
19 is basically saying, I'm the last
regular frame before a new keyframe is
| | 06:04 |
defined.
Personally, I think it's a little
| | 06:07 |
annoying, since the keyframe on Frame 20
to me seems obvious.
| | 06:11 |
But Flash puts them in automatically, you
can ignore them.
| | 06:14 |
Since the keyframe on 20 was just for
demonstration, lets get rid of it by
| | 06:17 |
right-clicking and choosing Clear Keyframe.
| | 06:20 |
Now all of our frames are restored back to
the positioning defined in keyframe 1.
| | 06:24 |
I am going to rotate the image slightly to
give it a little more visual interest.
| | 06:29 |
So I am going to click on the image to
select it, you will notice that all the
| | 06:31 |
frames in the timeline are now highlighted.
| | 06:34 |
That's because we only have one keyframe
and all the other frames look exactly like
| | 06:38 |
it.
What we're about to do, will effect the
| | 06:40 |
image all the way down the Timeline.
I'm going to choose the Free Transform
| | 06:44 |
tool, or just press the hot key of Q.
I'm going to rotate the image to the left
| | 06:48 |
a little bit.
So our project here is meant to have a
| | 06:51 |
succession of images appear on top of one another.
| | 06:54 |
I'm going to go ahead and lock image1,
because we're done with that.
| | 06:57 |
I'm going to have the second image appear
in the image2 layer at one second into the
| | 07:01 |
movie.
At a frame rate of 24 frames per second
| | 07:04 |
that would be of course, Frame 24.
So I'll find Frame 24 in the image2layer.
| | 07:09 |
And it may help to look at the little
number under the timeline to see exactly
| | 07:13 |
which frame you've selected.
I'm going to right-click, and choose
| | 07:17 |
Insert Blank Keyframe.
You could also go to the Insert menu, then
| | 07:22 |
Timeline then Insert Blank Keyframe.
You may be wondering if you can choose
| | 07:28 |
Insert Keyframe instead.
Remember that inserting a key frame
| | 07:32 |
creates a new keyframe but, with the
information from the previous keyframe
| | 07:36 |
copied over into it.
So, to start out they look exactly the
| | 07:40 |
same.
Well in our case on the image2 layer,
| | 07:42 |
since the previous keyframe is a blank keyframe.
| | 07:46 |
It doesn't really matter if you choose to
Insert a Keyframe or a Blank Keyframe, you
| | 07:50 |
end up with the same thing.
From the Library I'm going to Drag and
| | 07:54 |
Drop image2 onto the stage offsetting it
from the other image a little bit.
| | 07:59 |
Notice that the keyframe on the image2
layer is now filled in.
| | 08:01 |
The rest of the frames on down the
timeline are the lighter gray, since they
| | 08:04 |
display the image as well.
I am going to rotate this image a little
| | 08:08 |
bit too.
If you don't have your Free Transform tool
| | 08:11 |
going already, select the image of the
tree and then press Q on the keyboard.
| | 08:15 |
Now I am going to rotate and position this.
| | 08:18 |
This looks good so far.
I'm going to lock our image2 layer and add
| | 08:21 |
that third image in at two seconds into
the movie, that's Frame 48.
| | 08:26 |
Similar to what we just did I'm going to
right-click and choose Insert Keyframe on
| | 08:30 |
Frame 48.
Now I'm going to Drag and Drop
| | 08:33 |
vacation_3.jpg on to the stage.
And I'm going to position it so it's
| | 08:38 |
offset from the other images.
I'll rotate it just a little bit as well.
| | 08:42 |
That's all we have to do for this layer.
I'm going to lock the image3 layer and
| | 08:46 |
repeat one more time for the fourth image.
But this time we'll make a mistake on
| | 08:50 |
purpose so we can see how to easily move
keyframes around.
| | 08:53 |
I'm going to select Frame 1 of the image4 layer.
| | 08:57 |
Now I'll Drag and Drop vacation_4.jpg from
the Library.
| | 09:00 |
Well, this is obviously not the right
place to put this image if we want it to
| | 09:03 |
be our fourth image to appear in the succession.
| | 09:07 |
It should appear at four seconds into the
movie, which is Frame 72.
| | 09:10 |
Well, this is easy enough to fix.
I'll simply select the keyframe on Frame
| | 09:14 |
1, and then Drag and Drop it to Frame 72.
Now, this looks more correct, so I'm
| | 09:18 |
going to reposition the image so it looks
good and then lock the layer.
| | 09:23 |
The text layer is where we'll type the greeting.
| | 09:25 |
If we were to follow the pattern we've
done so far, the text should appear one
| | 09:29 |
second after the last image, so at Frame 96.
| | 09:32 |
But one second is not long if you expect
people to actually be able to read what
| | 09:36 |
the greeting says.
So we will have it appear at the same time
| | 09:40 |
as the last image.
So on the Text layer I am going to select
| | 09:43 |
Frame 72 and Insert a Blank Keyframe.
Now I am going to use my Text tool and in
| | 09:47 |
the property inspector I am going to make
sure that under the drop down at the top
| | 09:50 |
static text is selected.
We'll talk about the other options in this
| | 09:55 |
drop-down later.
In the Character options, for my Font, I'm
| | 09:59 |
going to make sure that I have Arial.
We're going to work with Bold Italic, 16
| | 10:03 |
point Font, and the Color is going to be White.
| | 10:06 |
I'm also going to make sure, in the
Paragraph section, that I've got Align
| | 10:09 |
Center.
I'm going to click on the stage once and
| | 10:12 |
type the greeting.
I'm going to put, Having a great time,
| | 10:15 |
wish you were here.
Love, Uncle Chris.
| | 10:18 |
I'm going to reposition the text box with
the Arrow tool.
| | 10:21 |
And now I'm happy with the layout.
I'm going to lock the layer.
| | 10:24 |
And let's test the movie.
It takes a total of 5 seconds and the
| | 10:27 |
images and text appear in succession.
So this piece is done.
| | 10:32 |
I'm going to close the SWF file and lets
take a moment to look at frame rate again.
| | 10:37 |
Open the Property Inspector and click on
the stage or the pace board somewhere if
| | 10:40 |
you need to.
So you can see the document properties
| | 10:43 |
we've laid out our flash movie with the
understanding that we're at 24 frames per
| | 10:46 |
second.
I'm going to try changing the frame rate
| | 10:49 |
to 12 and Publish again.
As you'd expect, the playhead is not
| | 10:53 |
moving half as fast as it did before.
The movie now takes ten seconds to run.
| | 10:58 |
If I close the SWF and change the frame
rate to 48 and then Publish, the movie
| | 11:02 |
plays a little too fast, taking only two
and a half seconds for one loop.
| | 11:08 |
So I'll close this SWF and change the
Frame Rate back to 24.
| | 11:12 |
(SOUND).
Frame rates between 12 and 30 are commonly
| | 11:14 |
accepted, so it's fine to choose the frame
rate that works best for you.
| | 11:19 |
If you're working on a piece that might
interact with or be loaded in by another
| | 11:22 |
Flash movie.
Or, you're working with something that
| | 11:25 |
needs to sync up with a video, be sure to
agree with your colleagues ahead of time
| | 11:28 |
what the frame rate is so all the pieces match.
| | 11:32 |
The best practice is to choose your Frame
Rate ahead of time, and position items on
| | 11:35 |
the Timeline accordingly.
Positioning on the timeline first and
| | 11:39 |
changing the framerate later can sometimes
be a big disaster.
| | 11:43 |
That's because changing the Frame Rate to
adjust one part of the movie may adversely
| | 11:46 |
affect other parts you designed at a
different Frame Rate.
| | 11:50 |
So using Frames and Keyframes is how you
control what appears when.
| | 11:54 |
And for how long in Flash.
Remember that Keyframes define the
| | 11:58 |
positioning and other properties of
content on the screen.
| | 12:01 |
Frames copy the content from the closest
previous Keyframe.
| | 12:05 |
| | Collapse this transcript |
| Using frames and keyframes in a project| 00:00 |
In order bird watching project, let's
apply some frames and key frames to the
| | 00:03 |
movie to control the timeline, and set up
the home screen versus the detail pages
| | 00:07 |
about each individual painting.
I'm going to pop open the finished version
| | 00:12 |
of BirdWatching.swf, so we can remind
ourselves how this works, and mentally get
| | 00:15 |
an idea of what we need to set up.
(MUSIC) We're going to set it up so that
| | 00:25 |
on frame one, you see the picture of Paul
Shellington and the textual biography,
| | 00:28 |
which of course we haven't added in yet.
Then we'll add in different key frames
| | 00:33 |
with the appropriate content detailing
each painting.
| | 00:36 |
So for example, we'll have a separate key
frame that shows the information on the
| | 00:40 |
Pink Skies image.
Then we'll have another key frame that
| | 00:44 |
shows the content for Bird on a High Wire.
Then we'll have another key frame that
| | 00:51 |
shows the content for a waiting painting,
and so on for the other two paintings.
| | 00:56 |
Now, notice that when we go to the detail
content for any of the paintings, the
| | 00:59 |
content fades in over the home page
content with Paul and the textual
| | 01:02 |
biography.
(SOUND) So Paul and the text are actually
| | 01:08 |
going to always be onscreen, they'll just
be covered up by the painting detail
| | 01:11 |
content when it fades in.
Let's start building it and it'll all come
| | 01:16 |
together.
Working in BirdWatching.fla, this piece is
| | 01:19 |
going to be a total of 59 frames long.
So we'll start by making sure in the
| | 01:25 |
timeline the BG folder is expanded.
Now I'll extend all of the layers at once
| | 01:29 |
by selecting frame 59 on the top layer,
holding down the shift key and then
| | 01:33 |
selecting frame 59 on the bottom layer.
Now I'll just hit F5 to insert some
| | 01:38 |
frames.
So the SAMOCA logo and the picture of Paul
| | 01:41 |
appear just as soon as the piece opens on
frame one.
| | 01:45 |
Those layers are fine.
Now we'll start adding in the images for
| | 01:48 |
the detail pages for each painting.
Since this content will fade in over the
| | 01:52 |
home page content, I'm going to create a
new layer above all the other layers and
| | 01:56 |
call it content.
I'm going to have the first painting
| | 02:01 |
detail appear at frame ten.
So I'll right click on frame ten on the
| | 02:04 |
content layer and insert a blank key frame.
| | 02:07 |
Since the detail content's going to cover
up the home page content, for now I'll
| | 02:11 |
turn off the visibility of the guide layer
so we don't get confused.
| | 02:16 |
I'll also turn off the visibility of the
home content layer so it's just out of the
| | 02:20 |
way.
The SAMOCA layer with the logo we'll leave
| | 02:23 |
as is, since the logo appears regardless
of what else you're looking at onscreen.
| | 02:27 |
And we imported the images of the
paintings earlier in the course, so making
| | 02:31 |
sure that frame 10 on the content layer is
still selected, I'll open my library and
| | 02:35 |
open up the paintings folder.
From there, I'll drag and drop
| | 02:39 |
pinkskies.jpg to the stage.
With the image selected, I'll go to the
| | 02:45 |
property inspector, and type in an x, of
27.5, and a y, of 163.
| | 02:50 |
This image is ready to go.
For the second painting detail, we'll have
| | 02:54 |
that, show up on frame 20.
So I'll select frame 20, right-click and
| | 02:58 |
choose Insert Keyframe.
Notice that we get the new keyframe, but
| | 03:02 |
we still have the pink skies image.
Remember that inserting a keyframe, not a
| | 03:07 |
blank keyframe but a keyframe, creates a
new keyframe with the content from the
| | 03:11 |
closest previous keyframe copied into it.
That's okay, because now we're going to
| | 03:17 |
use a trick.
With Pink Skies selected, in the Property
| | 03:20 |
Inspector, I'm going to click the Swap button.
| | 03:23 |
Flash opens up a dialogue box that shows
me all the items in the library that I
| | 03:27 |
could swap this image out with.
The one I want to choose is bird on a
| | 03:31 |
highwire dot jpeg.
That's in the paintings folder.
| | 03:35 |
When I click OK, the image is swapped out
and retains the correct X and Y position.
| | 03:40 |
If I had chosen insert blank key frame
instead of just insert key frame, I would
| | 03:44 |
have gotten a new blank key frame all right.
| | 03:47 |
But I would have had to drag, drop, and
type in the X and Y for the image again.
| | 03:52 |
This way was a little bit faster.
So we'll rinse and repeat for the next
| | 03:56 |
image, I'm going to right click on frame
30, on the content layer, and choose
| | 03:59 |
insert key frame.
Now I'm making sure the image is selected,
| | 04:03 |
I'll click the swap button in the property
inspector and swap this image out with
| | 04:07 |
waiting.jpg, same thing for the next image.
| | 04:11 |
I'll right click on frame 40 and enter the
key frame.
| | 04:14 |
Now I'll swap the image with warning.jpeg.
Finally, I'll right click on frame 50.
| | 04:19 |
Insert the key frame.
And swap the image with the peacock.jpeg.
| | 04:23 |
So that's all we have to do for now.
I'm going to lock the content layer.
| | 04:27 |
Turn on the visibility of the home content layer.
| | 04:30 |
And now, scrub my playhead.
It's very clear to see the homepage
| | 04:34 |
content.
And then, the detail content for each
| | 04:36 |
image appear over Paul as we go on down
the timeline.
| | 04:40 |
Now don't worry that you can still see a
little bit of Paul as we go down the
| | 04:43 |
timeline.
We still have explanatory text for each
| | 04:46 |
image, as well as a background to go
behind the image and text to add in later.
| | 04:51 |
That will cover up the picture of Paul.
Also, if I test the movie, don't worry
| | 04:55 |
that the playhead just runs on down the
timeline and zips through all the images
| | 04:58 |
without any control.
We'll fix that later on.
| | 05:02 |
Also, just because we happen to have 10
frames between each keyframe doesn't mean
| | 05:06 |
it has to be that way.
You can have 20 frames in between them, or
| | 05:11 |
30 frames, or even the key frames right
next to each other.
| | 05:14 |
It doesn't matter because we can control
where the frame head goes and stops with
| | 05:18 |
action script.
But with a little bit of visual space
| | 05:21 |
between each key frame, I think it helps
to separate in your head the different
| | 05:25 |
pieces of content that appear at different times.
| | 05:29 |
For now, we've used Frames and Key Frames
to set up the structure for controlling
| | 05:33 |
what content appears in our project one.
| | 05:36 |
| | Collapse this transcript |
|
|
3. Creating Graphics in Flash ProfessionalCreating shapes in the Merge and Object Drawing modes| 00:00 |
There are two drawing modes available to
you when using the tools in Flash: Merge
| | 00:04 |
Drawing mode and Object Drawing mode.
To explore these two modes, I've created a
| | 00:09 |
blank FLA document in Flash and simply
typed Merge on the top left, and object on
| | 00:12 |
the top right so we can compare the two
side by side.
| | 00:17 |
To start, I'm going to choose the oval.
When I do that, the property inspector
| | 00:21 |
should open.
And, like many other drawing programs,
| | 00:23 |
Flash lets you choose what color the
outline is going to be, as well as the
| | 00:27 |
fill.
I'm going to click once on the color chip,
| | 00:30 |
next to the icon of the pencil to expand
my color palette for stroke.
| | 00:34 |
I'm going to make the stroke be black.
The fill I'm going to make blue of 0066FF.
| | 00:40 |
Before drawing our oval, let's make sure
that we're using merge drawing mode.
| | 00:44 |
When you select a tool, the properties
area underneath the toolbar also changes
| | 00:48 |
to show you more options available for the tool.
| | 00:52 |
I can't quite see all my options, so I'm
going to expand my toolbar just a little
| | 00:56 |
bit.
Before the oval, we see this icon that
| | 00:59 |
looks like a circle within a square.
This icon is how to toggle between merge
| | 01:03 |
and object drawing modes.
Merge drawing mode is the default when you
| | 01:07 |
start a new fla and you can see that the
icon is kind of a light grey color.
| | 01:12 |
When you click the icon, it turns to a
darker grey and puts you into object
| | 01:15 |
drawing mode.
Admittedly the difference between the
| | 01:18 |
light gray and the dark gray can be kind
of subtle.
| | 01:20 |
Well, I want merged drawing mode, so I'm
going to make sure the icon is the lighter
| | 01:24 |
gray color.
If you're still not sure which one you've
| | 01:27 |
got, just draw an oval on the screen by
clicking and dragging.
| | 01:30 |
I'm actually going to draw two ovals.
I'm going to switch to my arrow tool and
| | 01:34 |
select one of the shapes.
The property inspector shows that the
| | 01:38 |
selected object is a shape.
When you see that you know you're in merge
| | 01:42 |
drawing mode.
That's what we want.
| | 01:45 |
Now I'm going to switch to Object Drawing
Mode by clicking the oval tool, pressing
| | 01:49 |
the icon below and drawing two more ovals.
Using the Arrow tool, when I click one of
| | 01:54 |
the ovals, the Property inspector says,
Drawing object.
| | 01:57 |
So we know for sure, we're on Object
Drawing Mode.
| | 02:00 |
Also notice the box that appears around
the oval.
| | 02:03 |
Merge Drawing Mode doesn't have that.
I'm going to click once on the pasteboard
| | 02:06 |
to deselect.
And now I'm going to choose my Polystar
| | 02:09 |
tool.
And the Property inspector I'll choose
| | 02:11 |
yellow for the fill.
Under tools settings, there's this button
| | 02:15 |
called options.
The resulting box allows you to choose
| | 02:18 |
between drawing a polygon and specifying
how many sides it should have, or star.
| | 02:22 |
I'm going to choose star and stick with
five points.
| | 02:25 |
I'm still in the object drawing mode, so
I'll draw this star on the right side.
| | 02:29 |
Now I'll toggle back to Merge Drawing Mode
and drawer another yellow star.
| | 02:33 |
Using my Arrow tool I'm going to click on
the pace board one time just to make sure
| | 02:37 |
everything's deselected.
Now I'm going to approach one of the edges
| | 02:41 |
of a merge drawing mode oval with the mouse.
| | 02:44 |
You'll notice how a small icon of a curved
line appears.
| | 02:47 |
While that's visible, you can change the
oval shape by clicking and dragging out
| | 02:50 |
the edge.
Similarly, if I approach a corner of a
| | 02:53 |
shape with the mouse like on a star, you
will see a little angle icon appear that
| | 02:57 |
allows me to click and drag the angles to modify.
| | 03:01 |
Here's an example of how merge drawing
mode really does, treat shapes just like
| | 03:05 |
blobs of color.
If I click and drag my mouse over parts of
| | 03:08 |
the shapes, you can see that just what
I've highlighted as selected and I could
| | 03:11 |
move it away.
I'm going to undo that move.
| | 03:16 |
You could also select the stroke of the
shape separately than the fill.
| | 03:19 |
I"m going to click on the stage to
deselect everything and now click just
| | 03:22 |
once in the middle of an oval.
Only the fill is selected, and you can
| | 03:26 |
tell because it has that kind of stippled
pattern of white drops.
| | 03:30 |
If I drag and drop the oval somewhere else
on the stage, only the fill goes.
| | 03:34 |
I'm going to hit control z to undo that.
Now, if I double click on the oval, both
| | 03:38 |
the fill and the stroke are selected,
allowing you to move both together.
| | 03:43 |
It's a common mistake, to click only once
on a shape and take just the fill.
| | 03:47 |
So try to remember that you have to click
twice, to get both the stroke and fill.
| | 03:51 |
Selecting the stroke by itself is of
course just as easy.
| | 03:54 |
I'm going to click on the stage somewhere
away from the oval to deselect.
| | 03:58 |
And now I'll click on the stroke of one of
the ovals and do something with it, like
| | 04:01 |
delete it.
On the star, I can click just one line and
| | 04:05 |
I'll delete that.
If you want to select all of the stroke on
| | 04:08 |
the star, you have to double-click it.
I'll delete that stroke as well.
| | 04:13 |
So, compare the Merge drawing mode shapes
to the object drawing mode shapes.
| | 04:18 |
When I drag and object drawing mode shape
around, you'll notice that the stroke and
| | 04:21 |
the film move around together.
You can't select them separately, like you
| | 04:25 |
can with Merge drawing mode.
You can still change the stroke and fill
| | 04:29 |
colors.
For instance, on this oval, I'll use the
| | 04:31 |
property inspector to change the stroke to
no stroke.
| | 04:35 |
You do that by choosing the white box with
the red line through it.
| | 04:38 |
Notice how I can still even approach one
of the edges of my ovals or the star, and
| | 04:42 |
get those same little line indicators, so
I can change teh object shape.
| | 04:46 |
By now, you've seen that one of the
bigggest differentces between merge and
| | 04:50 |
object drying modes is that object drying
groups the fill and stroke of a shape for
| | 04:53 |
you automatically.
When you draw the shape.
| | 04:57 |
There's one more significant behaviour
that's different between merge and object
| | 05:00 |
draw modes.
It's perhaps where merge drawing mode got
| | 05:03 |
its name.
I'll select and drag my merge drawing mode
| | 05:06 |
so it's positioned partially over the blue oval.
| | 05:10 |
Now I'll click the stage to deselect.
Now I'll click the yellow fill again and
| | 05:14 |
move it elsewhere.
You can see that the yellow has, kind of,
| | 05:18 |
cut it's shape out of the blue.
That behavior can be useful or annoying
| | 05:21 |
depending on what you're trying to do.
You can also, kind of, work in the
| | 05:25 |
opposite direction.
I'm going to move one lue oval over the
| | 05:28 |
other.
The positioning doesn't have to be
| | 05:30 |
precise.
Then I'll deselect.
| | 05:32 |
Now I'll select the blue fill again and
you'll see that for the parts that were
| | 05:36 |
the same color, the two shapes have been
fused or merged together.
| | 05:40 |
The object drawing mode shapes don't do this.
| | 05:42 |
You can drag and drop them on top of each
other all you want and they still remain
| | 05:45 |
discrete objects.
There's lots of other ways you can
| | 05:49 |
manipulate your shapes ,regardless of if
they're merged drawing shapes or object
| | 05:52 |
drawing shapes.
1 tool you'll probably use a lot is the
| | 05:55 |
free transform tool.
Using my mouse, I'm going to select one of
| | 05:58 |
my object drawing ovals and I'll select
the free transform tool or you could just
| | 06:02 |
press Q on your keyboard.
Control handles appears around the shape
| | 06:06 |
and I can rotate by approaching the corner
with the mouse watching for the circular
| | 06:09 |
arrow and then clicking and dragging.
I could skew by approaching an edge and
| | 06:14 |
watching for the skew icon, then clicking
and dragging.
| | 06:18 |
Or I could scale it by grabbing one of the corners.
| | 06:20 |
When scaling you can scale horizontally or
vertically or if you hold down the Shift
| | 06:24 |
key it will constrain the proportions as
you scale.
| | 06:27 |
You could also hold down the Ctrl key, the
Cmd key on a Mac, and affect just one
| | 06:31 |
corner.
There's lots of other things you can do to
| | 06:34 |
effect the shape and coloration of objects
on the screen.
| | 06:37 |
We'll look at one mroe example in the next movie.
| | 06:40 |
If you want a detailed explanation of all
the drawing tools and all their options,
| | 06:43 |
check out the course called flash
essential training here in the lynda.com
| | 06:46 |
library.
For now, you know the differences between
| | 06:50 |
merge and object drawing modes.
Merge treats fill and stroke separately,
| | 06:54 |
and depending on the color, you can cut
out or glue together two different shapes.
| | 06:59 |
Object drawing mode basically groups
together shapes for you as you draw them
| | 07:04 |
| | Collapse this transcript |
| Using the primitive and Gradient Transform tools| 00:00 |
In this movie, we're going to take what
we've learned about drawing in Flash,
| | 00:03 |
along with a few other things.
And draw a background for the entire Bird
| | 00:07 |
Watching project.
We'll also draw a background for the
| | 00:10 |
screens where we see the details of
individual paintings.
| | 00:13 |
We'll start with a background for our
entire piece.
| | 00:16 |
In our BirdWatching.fla file from before,
we have a folder called bg.
| | 00:21 |
Within the file, a layer called background.
| | 00:23 |
I’m going to right-click on the layer and
say Lock others.
| | 00:26 |
Then I’ll right-click and say Hide others.
So all we can see is this layer and not
| | 00:30 |
accidentally move anything else around.
Now I’m going to choose the Rectangle
| | 00:34 |
tool, but before drawing, make sure that
we’re using merge drawing mode.
| | 00:39 |
You might have to resize your toolbar a
little bit, just in case you can’t see the
| | 00:42 |
drawing mode icon near the bottom.
I’m going to make sure the icon is the
| | 00:46 |
lighter gray as opposed to the darker
gray, so we’re sure to be in merge drawing
| | 00:49 |
mode.
Now I’ll set the stroke for our rectangle
| | 00:53 |
to have no stroke and the fill to a blue color.
| | 00:56 |
Now I’ll draw a rectangle about the size
of the stage but I’m not going to worry
| | 00:59 |
about being exact.
That’s because when I’m done drawing, I’ll
| | 01:03 |
use the arrow tool to select the rectangle.
| | 01:05 |
And then use the property inspector to
give it the same size as the stage.
| | 01:10 |
So, I'll type in an x of 0, and a y of 0.
A width of 1,000, and a height of 600.
| | 01:16 |
I'd like this background to fade from
White, to Blue.
| | 01:19 |
So let's see how to do that.
Next to the property inspector is an icon
| | 01:22 |
that looks like an artist's palette.
I'll click that to open the Color panel.
| | 01:27 |
Under this drop-down marked fill, I'll
change if from solid color, to linear
| | 01:31 |
gradient.
You can see that Flash changed it
| | 01:34 |
automatically to a black to white gradient.
| | 01:37 |
I'm going to Drag and Drop the little
color crayons to swap them, so the white's
| | 01:40 |
on the left and the black on the right.
Now I'll double click the Black Crayon to
| | 01:46 |
open up the color pallete.
I could choose one from the swatches of
| | 01:49 |
colors, but I happen to have a specific
blue that I want to use, so I'll type in
| | 01:54 |
2795CO.
So my colors now fade from White to Blue
| | 01:58 |
and I want to make a few more adjustments
so I take the bluest part of the stage,
| | 02:01 |
it's on the lower right.
To do this with the rectangle still
| | 02:06 |
selected up to the rectangle gradient
transform tool.
| | 02:09 |
It's located under the free transform tool.
| | 02:12 |
You can see two related groups together,
because the tiny arrow at the bottom of
| | 02:15 |
the free transform for my icon.
So with the gradiant transform tool some
| | 02:20 |
control handles pop up on the gradient.
First, I'll use the arrow icon to shrink
| | 02:25 |
the amount of surface area the gradient covers.
| | 02:28 |
You can see the effect when you stretch it
out or shrink it.
| | 02:31 |
I'm going to shrink it down pretty far.
Now I want to move the center point of the
| | 02:34 |
gradient, so I'll click and drag the white
circle in the center of the gradiant over
| | 02:37 |
to the right.
Finally, I'll grab the Circle at the upper
| | 02:41 |
right to rotate the gradient, so the blue
is at the bottom right of the screen.
| | 02:47 |
You can continue to adjust your gradient
so it suits you.
| | 02:49 |
I'm going to leave mine about like this.
And when I'm done, I'll grab my Arrow tool
| | 02:53 |
again and click Offstage.
There we have it, a rectangle with a
| | 02:57 |
gradient fade.
Notice how our background first appears in
| | 03:00 |
the background layer at Frame 1.
The Frames continue on for the entire
| | 03:04 |
duration of the project.
I'll turn on the visibility of all the
| | 03:08 |
other layers and scrub the playhead.
Indeed, you can see that the background
| | 03:12 |
appears throughout the entire project.
This looks good, so I'll lock my
| | 03:15 |
background layer and collapse the bg folder.
| | 03:19 |
Now we're ready to draw a second background.
| | 03:21 |
When I move my playhead to frame 10, or
any of the later frames, we see the
| | 03:24 |
painting details, but the picture of Paul
is still sticking out behind them.
| | 03:30 |
We want a nice background behind the
pictures to cover up Paul, and also to
| | 03:33 |
give a some space to add in some text to
accompany each image.
| | 03:38 |
Paul is on the Home Content layer.
The images are on the Contents layer.
| | 03:43 |
We want the new background to be in
between them.
| | 03:46 |
So I'm going to create a new layer, rename
it to Content Background, and drag it
| | 03:50 |
below the Content layer.
I'll also turn off the visibility of the
| | 03:54 |
homeContent layer just so Paul is out of
the way as we work.
| | 03:59 |
The background is just going to be another
rectangle with rounded corners.
| | 04:02 |
Frame 10 is the first frame that the image
of the birds with the pink background
| | 04:06 |
appears.
So, that's the first frame where you need
| | 04:08 |
the rectangle to show up on.
I'm going to right-click on frame ten on
| | 04:12 |
the content background layer and choose
Insert Blank Keyframe.
| | 04:16 |
I'm going to choose my rectangle and give
it a light grey fill of CCCCCC.
| | 04:21 |
I'll also give it No Stroke.
I want this rectangle to have rounded
| | 04:25 |
corners.
The place to control that is under
| | 04:27 |
Rectangle Options.
The higher the number you type in, the
| | 04:30 |
more rounded your corners will be.
I'm going to put mine at 5 and, with that,
| | 04:35 |
draw a rectangle about this size.
So that's a good start.
| | 04:39 |
But now having drawn this I realize that
the corners are still pretty pointy.
| | 04:43 |
I want them to be more rounded.
Unfortunately there's not a way to change
| | 04:47 |
the corners once the rectangle's been drawn.
| | 04:50 |
Notice how when I select the rectangle
with the Arrow tool, the Property
| | 04:52 |
Inspector tells me stuff like the X and Y
position, and the width and height.
| | 04:57 |
But nothing about the corners.
And that's where the rectangle primative
| | 05:00 |
tool comes in.
I'm going to Delete the rectangle I just
| | 05:03 |
drew and choose the Rectangle Primitive tool.
| | 05:05 |
It's hiding under the Rectangle tool.
I'll leave all the settings the way they
| | 05:10 |
were from before, No Stroke, Gray Fill,
and corners at 5.
| | 05:13 |
I'll redraw the rectangle.
Now I'll switch to my Arrow tool and click
| | 05:17 |
on the Paste board.
We still have the pointy corner problem
| | 05:20 |
with the settings of 5.
But since we're using the rectangle
| | 05:23 |
primitive tool, now we can go to the
Property Inspector in the rectangle
| | 05:26 |
options area.
And change the radius of those corners.
| | 05:31 |
You can see how you can have rounded
corners or even inverted corners when you
| | 05:34 |
slide the slider bar.
I'm going to be really specific and type
| | 05:38 |
in 20.
You can see how all four of the corners
| | 05:41 |
updated.
This little icon that looks like a chain,
| | 05:43 |
is what applies the value of 20.00 to all
of the corners.
| | 05:47 |
You can also click the chain and set a
value for each corner specifically, but
| | 05:49 |
I'm not going to do that.
So our corners look good.
| | 05:53 |
I have some specific dimensions for the
rectangle prepared.
| | 05:56 |
So with it still selected, I'll give it an
X of 20.00 and a Y of 162.00.
| | 06:01 |
Next to width and height I'm going to make
sure the icon of the chain looks like its
| | 06:04 |
broken so I can change width and height
without contstraining proportions.
| | 06:09 |
Now I'll type a width of 960.2 and a
height of 418.15.
| | 06:15 |
The last thing to do is give this a
Gradient Fill.
| | 06:18 |
I want it to fade from light grey at the
bottom to white at the top.
| | 06:22 |
So just like we did earlier in this movie,
I'll select the icon of the artist pallet
| | 06:26 |
to open up to the Color Panel.
Under the Fill drop-down I'll change it
| | 06:30 |
from solid color to Linear Gradient.
Watch again changed it automatically to a
| | 06:35 |
gradient that we don't want.
That's fine all we have to do is double
| | 06:39 |
click the blue crayon to open up the color
pallet and I'll choose the light grey of
| | 06:43 |
CCCCCC.
We need to rotate the gradient, so the
| | 06:47 |
gray's on the bottom.
So, once again, we'll go to the Gradient
| | 06:50 |
Transform tool.
First, I'll shrink the Control bars, and
| | 06:53 |
then rotate it, so the white's on the top.
Now, I'm going to shrink the Gradient down
| | 06:58 |
just a little bit more, to about like that.
| | 07:00 |
Basically I want the white at the top of
the rectangle, to blend into the white
| | 07:03 |
background behind it.
That's about it.
| | 07:07 |
We'll add a Drop Shadow and do some other
stuff to this later.
| | 07:09 |
For now, I want to point out that in the
Property Inspector, it shows that this
| | 07:12 |
shape is a rectangle primitive.
It's not a drawing object like one we get
| | 07:17 |
in object drawing mode.
It's not a shape like we get in merge
| | 07:20 |
drawing mode.
It's just it's own thing, it's a Rectangle
| | 07:23 |
Primitive.
It's fine to leave it like this,
| | 07:25 |
especially if you think you might want to
change the corners again later.
| | 07:29 |
However, you could right-click and choose
Break Apart if you want to change it to a
| | 07:32 |
shape like you get in merged drawing mode.
So I'm going to turn on the visibility of
| | 07:37 |
all the layers again.
As we scrub the Timeline, our background
| | 07:40 |
is doing its job.
From frames one through nine, we see Paul
| | 07:44 |
Shellington, from Frames 10 and on, the
background covers up Paul.
| | 07:47 |
And delineates a nice space that will
eventually contain the images we've
| | 07:51 |
already got and the appropriate text for each.
| | 07:54 |
I'm going to lock this Content Background
layer, so I don't accidentally screw it
| | 07:57 |
up.
So in this movie we explored using the
| | 08:00 |
Gradient Filled tool, as well as the
Rectangle Primitive tool.
| | 08:03 |
The Oval and Oval Primitive tools work
similarly to the Rectangle tools and
| | 08:07 |
they're a great choice if you anticipate
needing to modify a basic shape later on.
| | 08:13 |
If you want a detailed explanation of all
the drawing tools and all their options,
| | 08:16 |
check out the Flash Essential Training
course here in the Lynda.com library.
| | 08:21 |
| | Collapse this transcript |
|
|
4. Working with Text in a Flash Professional DocumentUsing classic text| 00:00 |
When working with text in Flash, there are
three types you can choose from, Static,
| | 00:04 |
Input, and Dynamic.
Let's take a quick look at the differences
| | 00:08 |
in the file called text.fla.
This file already has some text boxes and
| | 00:12 |
a button set up for us.
We'll start by adding some static text.
| | 00:17 |
On my Toolbar, I'm going to click on the
Text tool which looks like a T.
| | 00:21 |
As soon as I click it, the Properties
panel opens up with all the different
| | 00:24 |
options you can choose for your text.
The first thing to notice is the drop down
| | 00:29 |
at the top, which gives you a choice
between Static, Dynamic, and Input Text.
| | 00:33 |
We're going to choose Static text.
All we want our text to do right now, is
| | 00:37 |
just appear on the stage, so this is the
appropriate choice.
| | 00:41 |
I'm going to choose to have my text to be
Arial, regular, 16 point font, and choose
| | 00:44 |
for the color something blue.
I'm also going to have my text be
| | 00:48 |
left-aligned, which is the default that's
already chosen.
| | 00:52 |
You'll also notice the options for spacing
and margins, which work pretty much like
| | 00:56 |
they do in text editing programs.
Now, I'm going to click once on the stage
| | 01:00 |
and type the phrase Unselectable static text.
| | 01:03 |
That's pretty straight-forward.
So, to move on, I'm going to make a new
| | 01:07 |
text box.
This time, I'll hold the mouse button down
| | 01:10 |
and drag it out to the right.
This is a great way to create a text box
| | 01:14 |
if you need a specific width.
In the box, I'm going to type a text box
| | 01:17 |
with a preset size that wraps automatically.
| | 01:20 |
It will wrap the text as needed to keep
the width.
| | 01:23 |
When I grab the Arrow tool again, I can
click on the edge of the box and adjust
| | 01:26 |
the width, if needed.
The text will rewrap as necessary.
| | 01:30 |
In the character section, I'm also
going to push this little button to make
| | 01:34 |
the text selectable.
Now, I'll test my movie.
| | 01:37 |
And we see our absolutely scintillating
static text.
| | 01:41 |
The thing I want to point out, is that if
you try to select the text in the first
| | 01:44 |
box, you can't.
But you can in the second, since we turned
| | 01:47 |
on the Selectable option.
If you want users to be able to copy and
| | 01:50 |
paste text out of your SWF, be sure to
turn that on.
| | 01:54 |
Back in the FLA, I'm going to click on the
box that says Type your name here.
| | 01:58 |
And the Property Inspector, notice that
this box has been set to be an input box.
| | 02:04 |
You'd use this type of text to collect all
kinds of user data, like maybe their name
| | 02:07 |
or their email address.
To make it a little more obvious what the
| | 02:11 |
user's supposed to do, you can
pre-populate the box like we did here with
| | 02:14 |
a text that says Type your name here.
You don't have to do that though.
| | 02:19 |
The box could just have no text in it.
Also notice in the Property Inspector, in
| | 02:23 |
the Character section, I've turned on the
Show Border Around Text button, so it's
| | 02:26 |
clear where the user is supposed to type.
Finally, clicking on the last text box in
| | 02:32 |
the Property Inspector, note that it's a
dynamic text box.
| | 02:36 |
Dynamic text is used for what it sounds
like, text that's going to change
| | 02:39 |
dynamically depending on what the user is doing.
| | 02:43 |
Examples of things you could use dynamic
text boxes for would be outputting user
| | 02:46 |
score while playing a game or how much
time they have left to complete a task, or
| | 02:49 |
if you're building something like a
mortgage calculator, how much their
| | 02:52 |
monthly payment would be...
There's already some ActionScript written
| | 02:57 |
for us on the ActionScript layer, that's
going to take what the user types into the
| | 03:00 |
input text box.
And then, output it along with an
| | 03:03 |
additional message in the Dynamic text
box, once the user clicks the Submit
| | 03:07 |
button.
So, let's try it out.
| | 03:09 |
I'm going to type in my name in the input
text box, and click Submit.
| | 03:13 |
And the dynamic text box now says good
day, plus the name that I typed in.
| | 03:18 |
As you can see, using text and Flash is
pretty straightforward.
| | 03:22 |
It's good to know however, that in
previous versions of Flash, there was also
| | 03:25 |
a different type of text besides Classic Text.
| | 03:29 |
It's called TLF text, or Text Layout
Framework text.
| | 03:33 |
TLF text has been dropped from Flash Pro
Creative Cloud.
| | 03:37 |
If you open a file built in an older
version of Flash that uses TLF text and
| | 03:41 |
Flash Creative Cloud, Flash will warn you.
Then, the text will be retained as classic
| | 03:46 |
text but will lose the formatting that was
applied with TLF.
| | 03:50 |
For now, we've seen the difference between
Static, Input, and Dynamic Text.
| | 03:55 |
So, you can choose which one is
appropriate for your needs.
| | 03:58 |
| | Collapse this transcript |
| Structuring text placement in a project| 00:00 |
Now, that we've seen how to add basic text
to our Flash FLA, there's quite a bit of
| | 00:03 |
content we can add to our Bird Watching piece.
| | 00:07 |
We'll also be using what we learned about
layers and key frames to structure the
| | 00:10 |
text placement in a way that makes sense.
So, let's dive in.
| | 00:14 |
Let's start with what the viewer will see
when they first view our Bird Watching
| | 00:17 |
piece.
If you watched the movie about layers
| | 00:20 |
earlier in the course, you'll remember
that we had added a guide layer to our
| | 00:23 |
project.
It shows where content on this opening
| | 00:26 |
screen should go.
That guide layer is the one at the bottom
| | 00:29 |
of the Layer stack, in the Timeline marked guide.
| | 00:33 |
We can't see what's on it because it's
covered up by a layer higher up in the
| | 00:36 |
Layer stack.
If I expand the BG folder, the layer
| | 00:39 |
that's blocking our view is the background layer.
| | 00:43 |
Earlier in the course, we drew the
rectangle that fades from blue to white
| | 00:46 |
that appears as a background for the whole
project in this layer.
| | 00:49 |
If I turn off the visibility of that
layer, voila we can see everything in the
| | 00:53 |
Guide layer just fine.
So, what we need to add to this screen is
| | 00:57 |
the date, the line that says Paul
Shellington Bird Watching, the two
| | 01:00 |
paragraphs that serve as the biography
about Paul Shellington.
| | 01:05 |
And the line that says Preview the Collection.
| | 01:07 |
Let's start with the biography paragraphs
and the Preview the Collection line.
| | 01:12 |
So, what layer should we put this text on?
A new one, or one that already exists?
| | 01:17 |
Well, we could make a new layer, but we
already have one that will work.
| | 01:21 |
I'm going to unlock the Home Content layer.
| | 01:24 |
When I hit Ctrl+A on my keyboard, which is
the hot key for select all that's on
| | 01:27 |
unlocked layers, the picture of Paul
Shellington is highlighted.
| | 01:32 |
That's currently the only thing on this layer.
| | 01:34 |
As I scrub the Timeline, the picture of
Paul Shellington is covered up by what we
| | 01:37 |
put in the Content and Content Background
layers earlier.
| | 01:41 |
I'll put my play head at frame ten, and
turn the visibility of those layers on and
| | 01:44 |
off for a moment.
And indeed, you can see Paul on the Home
| | 01:47 |
Content layer again.
So, the Home Content layer is a perfect
| | 01:51 |
place to put the biography text and a line
that says Preview the Collection.
| | 01:56 |
When I click on frame one on the Home
Content layer and start with the biography
| | 01:59 |
text.
We have the Guide layer to help us place
| | 02:02 |
this correctly.
So, selecting my Text tool, I'm going to
| | 02:05 |
choose Static Text, Arial, Regular, black
in color, 15 point font, a line spacing of
| | 02:11 |
2.
And then, I'll draw a text box with a
| | 02:15 |
width as close as I can get to the size
shown in the Guide layer.
| | 02:18 |
So, instead of typing in all that content,
I'm going to copy and paste it from the
| | 02:22 |
Word document called biographyText that's
in the ExerciseFiles for this movie.
| | 02:27 |
So, the text box expands to accommodate
all my text, but it looks like the
| | 02:30 |
formatting didn't make it through.
So, I’m going to turn off the Guide layer
| | 02:34 |
visibility just for the moment, so I can
see what I’m doing.
| | 02:37 |
Then, I’ll insert a line break before the
paragraph that begins this exhibit.
| | 02:41 |
There’s also six places where text needs
to be italicized.
| | 02:46 |
So, I’m going to go ahead, in the first
paragraph, and italicize the words Bird
| | 02:49 |
Watching, The New Yorker, The Atlantic,
and A Balloon from Our Cell.
| | 02:54 |
In the second paragraph, I'm going to
italicize Art 950 and Bird Watching.
| | 03:00 |
Turning the Guide layer on again, I'll
move the text box with my arrow keys to
| | 03:03 |
match the guide.
And it still doesn't quite match up.
| | 03:07 |
Changing the format to Justified Text
instead of Left Aligned should really
| | 03:11 |
help.
Looks like I also need to re-size the text
| | 03:14 |
box just a little bit.
You might to need to do some more
| | 03:17 |
adjusting and positioning of the box as
well, to get it to line up just perfectly.
| | 03:21 |
That was pretty painstaking, but when I
turn the visibility of the Home Content
| | 03:24 |
layer on and off, I've got a pretty darn
exact match to the Guide layer.
| | 03:28 |
And that should make the client happy.
If you're positioning in dimensions, don't
| | 03:32 |
match mine exactly, but your text still
looks good.
| | 03:35 |
I wouldn't sweat it.
The text for the Preview the Collection
| | 03:38 |
Line is a lot easier.
Selecting the Text tool again, I'm going
| | 03:41 |
to change my settings to Static Text,
Arial, Bold Italic, 18 point and left
| | 03:46 |
aligned.
Now, just click and type preview the
| | 03:50 |
collection.
Then, I'll switch to my Arrow tool, select
| | 03:52 |
the text box and use the arrow keys to
move it into place.
| | 03:56 |
Again, when I turn the visibility of the
Home Content layer on and off, I've got a
| | 03:59 |
great match to the Guide layer.
Great, there's only two more lines to go,
| | 04:03 |
the date, and the Paul Shellington Bird
Watching title.
| | 04:07 |
These will go on the Home Content layer, too.
| | 04:09 |
But instead of making you do more typing
and lining up, we're going to use a
| | 04:12 |
shortcut.
I'm going to open the file called copyMe
| | 04:15 |
from the ExerciseFiles.
This file has the same screen dimensions
| | 04:19 |
of the Bird Watching project, 1000 pixels
wide by 600 pixels high.
| | 04:23 |
On frame one, the dateline of April 5th
through June 30th and Paul Shellington:
| | 04:27 |
Bird Watching are already typed with the
correct formatting and placement.
| | 04:31 |
So, I'm just going to select both lines of
text with my Arrow tool and hit Ctrl+C to
| | 04:35 |
copy them to my clipboard.
Now, I'll paste it into BirdWatching.fla.
| | 04:41 |
So, I'll click on Frame One of the Home
Content layer, just to make sure the text
| | 04:44 |
is pasted in the right layer.
Then, I'll go to the Edit menu and Paste
| | 04:48 |
In Place.
Note, the keyboard shortcut of
| | 04:51 |
Ctrl+Shift+V as well.
That would be Cmd+Shift+V on a Mac.
| | 04:56 |
Using paste in place retains the
positioning of the text boxes as opposed
| | 04:58 |
to just plain paste, which would dump them
in the middle of this screen.
| | 05:03 |
You always won't have a cut and paste
cheat file like we did here, but copy and
| | 05:06 |
paste in place will likely come in handy
for you if you need to move assets between
| | 05:09 |
files or from layer to layer.
Turning the Home Content layer on and off
| | 05:14 |
again, you should have an exact match to
the Guide layer.
| | 05:18 |
We're done with the Guide layer for now,
so let's cover it up again by turning on
| | 05:22 |
the visibility of the Background layer in
the BG folder.
| | 05:26 |
Now, we have a true view of what the user
would see if we published our project at
| | 05:29 |
this point, I'm also going to lock the
Home Content layer.
| | 05:33 |
We have five more bits of text to add in.
Don't worry, I'm not going to make you
| | 05:37 |
type it in or do a bunch of formatting.
We're going to copy and paste again.
| | 05:41 |
I'm going to unlock the Content Layer.
Again, this is the one that has the
| | 05:45 |
individual paintings on frames 10, 20, 30,
40 and 50.
| | 05:48 |
On frame 10, we're going to put in the
text about this painting, which is called
| | 05:53 |
Pink Skies.
So, in copyme.fla, I’m going to go to
| | 05:57 |
frame 10 and copy the text box that
appears here.
| | 06:00 |
Back in BirdWatching.fla, I’ll select
frame 10 on the Content layer, and then go
| | 06:04 |
Edit > Paste In Place.
Now, I’ll go to frame 20.
| | 06:09 |
This painting is called Bird on a Highwire.
| | 06:11 |
In copyme.fla, I’ll go to frame 20 and
copy the text box that appears here.
| | 06:16 |
Back in BirdWatching.fla making sure we
are on frame 20 of the Content layer, I
| | 06:20 |
will go Edit > Paste In Place.
So, now we'll rinse and repeat.
| | 06:24 |
I'll go to frame 30 and the same thing.
The text for this screen appears a little
| | 06:28 |
smaller and in a different place than the
other screens that's because we need a
| | 06:32 |
little extra room to add in a video later on.
| | 06:36 |
So, I'll scrub the play head, and indeed,
we can see that the individual paintings
| | 06:39 |
appear alongside the explanatory text for
each of them.
| | 06:44 |
This looks good, so I'm going to go ahead
and lock the Content layer, since we're
| | 06:47 |
done with it.
So, the text itself that we placed in this
| | 06:49 |
movie is pretty simple.
It's just classic, static text with some
| | 06:53 |
specific formatting.
Using layers and key frames to control
| | 06:57 |
when that text appears is where you have
to think a little bit about what goes
| | 07:01 |
where.
| | 07:02 |
| | Collapse this transcript |
| Embedding fonts| 00:00 |
Now that we've discussed Classic Text,
you're familiar with what Input and
| | 00:04 |
Dynamic Text boxes do.
They're basically for text that can be
| | 00:08 |
changed while the user is using your
published file.
| | 00:11 |
For instance, where user types in their
name or phone number or where gain built
| | 00:14 |
with Flash displays the user's current score.
| | 00:18 |
There's a technique you need to be aware
of, for text boxes like these, whose
| | 00:21 |
content can change during run time.
Please open the file called
| | 00:25 |
missingFont.swf in your ExerciseFiles to
see this in action.
| | 00:30 |
The FLA also exists for your reference,
but the resulting SWF is what we're
| | 00:33 |
interested in.
This SWF file has input text boxes with
| | 00:37 |
text displayed in two fonts, Arial and Tristan.
| | 00:41 |
Or at least, it kind of does.
The first line of text tells you that it's
| | 00:44 |
supposed to be displayed in Tristan font,
but unless you have Tristan on your
| | 00:47 |
computer, it's probably not.
For me, Flash is substituting Arial
| | 00:52 |
instead.
The second line is just in boring old
| | 00:55 |
Arial Bold, and it's probably displaying
just fine.
| | 00:59 |
Now, here's why this is happening.
When Flash displays Input or Dynamic Text
| | 01:03 |
boxes on the screen, it looks for the
definition of the fonts being used on the
| | 01:07 |
end users local computer.
If it finds those fonts, it uses them, and
| | 01:12 |
the fonts display just fine.
If the fonts aren't found on the users
| | 01:16 |
local computer, Flash substitutes with
something else.
| | 01:19 |
As you can see with that top text box,
this can lead to some unexpected results.
| | 01:24 |
Now, notice the last block of text which
tells you that this is what the font
| | 01:27 |
called Tristan really looks like.
You can see what it looks like because I
| | 01:32 |
used a trick to make doubly sure it would
display as Tristan.
| | 01:36 |
I'll demonstrate the trick for you here by
opening up a blank FLA file.
| | 01:40 |
I'm just going to grab my Text tool and go
ahead and type something on the Stage.
| | 01:43 |
I'm going to resize the text box, so I can
see all of the text.
| | 01:47 |
Now, I'm going to go to the Modify menu
and choose Break Apart.
| | 01:51 |
The text box breaks into individual text
boxes for each letter.
| | 01:56 |
Now, I'll go to Modify > Break Apart a
second time.
| | 01:59 |
Now, I'll select one of the letters.
In the Property Inspector, notice these
| | 02:03 |
are now shapes.
These are just blobs of color that happen
| | 02:06 |
to be in the shapes of letters.
I can change them just like any other
| | 02:10 |
shape.
So, that's what we have in the
| | 02:12 |
demonstration SWF letters which look like
Tristan but are really shapes.
| | 02:17 |
So, being they're not editable like
regular text is.
| | 02:20 |
I'm going to close the FLA I just created.
A way to get around this problem is by
| | 02:24 |
embedding fonts.
Embedding fonts basically means that
| | 02:28 |
you're including, or embedding, the vector
outlines of each character into your SWF
| | 02:31 |
file.
That way, Flash knows how to draw the
| | 02:35 |
characters regardless of what fonts are on
the end user's computer.
| | 02:39 |
As you can imagine, embedding fonts can be
a very worthwhile activity, so let's learn
| | 02:43 |
how to do it by first opening another
blank FLA file.
| | 02:47 |
Now, I'm going to grab my Text tool again
and under the drop-down choose Input Text.
| | 02:52 |
For the font I'm going to choose Berlin
Sans FB, but you should pick a font on
| | 02:55 |
your computer that isn't one that everyone
would have.
| | 03:00 |
Now, on the Stage I'm going to type a
phrase like, I need to embed this font.
| | 03:04 |
Let's test our movie by pressing Ctrl+Enter.
| | 03:07 |
Now, while it will publish and look just
fine here, because I'm using a font on my
| | 03:11 |
computer, Flash will give an output
message stating that fonts should be
| | 03:14 |
embedded for any text that may be edited
at run time.
| | 03:19 |
That output message is here in the Output
panel, next to the Timeline tab.
| | 03:23 |
So, let's do that.
I'll close the SWF and return to Flash.
| | 03:26 |
I'm going to grab my Arrow tool and be
sure that the text box is selected.
| | 03:30 |
Then, in the character area of the
Properties panel, I'll click on the button
| | 03:33 |
labeled Embed.
The Font Embedding dialogue comes up.
| | 03:38 |
Here in the Name area, you can type a more
descriptive name than the default to
| | 03:41 |
identify with the font you're embedding.
I'll type in Berlin Sans.
| | 03:47 |
Then, in the check box area, I'm going to
select to embed the Uppercase, Lowercase,
| | 03:51 |
and Punctuation glyphs.
You can also type in any special or
| | 03:55 |
unusual characters that you want to use in
this area.
| | 03:59 |
I'd recommend not selecting all because as
you can see, that would be 245 glyphs.
| | 04:05 |
You're embedding the vector outline of
each glyphs into the SWF file.
| | 04:09 |
So, the fewer glyphs you embed, the
smaller the file size, and the faster the
| | 04:12 |
movie loads for your your user.
Once you've made your selections, click
| | 04:16 |
OK.
I'll test the movie again by pressing
| | 04:18 |
Ctrl+Enter.
Note, that the little reminder to embed
| | 04:21 |
fonts that we saw before, is gone.
We're set for now.
| | 04:24 |
But know that if you're using an unusual
font in multiple text boxes in your Flash
| | 04:28 |
piece, you need to go through this process
for each text box.
| | 04:33 |
Here's an alternative you could use,
instead of embedding fonts.
| | 04:37 |
Using the Arrow tool, I'll select the text
box again.
| | 04:39 |
Then, under the Font drop down, in the
Property Inspector, scroll to the top, and
| | 04:43 |
find the top three fonts.
These are Device Fonts, and you'll see,
| | 04:47 |
out of these three, we have Sans, which
looks like Arial, Serif, which looks like
| | 04:51 |
Times, and Typewriter, which looks like Courier.
| | 04:55 |
By using Device Fonts, you're telling
Flash to just pick a font on the user's
| | 04:58 |
local computer that most closely resembles
the Device Font.
| | 05:02 |
By using Device Fonts, you don't have to
embed, and the SWF size is smaller.
| | 05:07 |
However, since the font outlines are not
embedded, expect some variation in what
| | 05:11 |
your end users will see.
You don't know what font they may have
| | 05:15 |
installed that corresponds to the device
font that you chose.
| | 05:19 |
So, now you've seen why and how to embed fonts.
| | 05:23 |
The only thing to remember is that you
should embed fonts for text boxes like
| | 05:26 |
Input Boxes that can change during run time.
| | 05:30 |
You don't have to embed fonts for Static
Text boxes.
| | 05:34 |
| | Collapse this transcript |
|
|
5. Understanding Symbols in Flash ProfessionalIntroducing 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.
| | 00:07 |
And you'll use them as building blocks for
animation and interaction.
| | 00:11 |
Let's jump in and practice with symbols.
The first step is to open a new blank FLA.
| | 00:15 |
Now, I'm going to draw a simple circle
shape on the stage and turn it into a
| | 00:19 |
symbol.
I'll select the Oval tool, and choose a
| | 00:22 |
blue fill and a black stroke.
Now, I'll draw my circle on the Stage.
| | 00:27 |
You can make almost anything into a symbol.
| | 00:30 |
Shapes drawn in Merge, or Objects Drawing
modes, Bitmap Images, or whatever else.
| | 00:35 |
I'm going to pop open the Library, and
note that it's empty.
| | 00:38 |
We won't actually see anything in the
Library until we convert our shape into a
| | 00:42 |
symbol.
There's multiple ways you can do that.
| | 00:45 |
You could select the entire shape, and
then right-click to choose Convert to
| | 00:48 |
Symbol.
I'm going to Cancel out of that dialog
| | 00:51 |
box.
You could also go to the Modify menu and
| | 00:54 |
choose Convert to Symbol there.
Notice also the keyboard shortcut of F8.
| | 01:00 |
Any of those methods work, I'll just
choose Convert to Symbol here, and now
| | 01:03 |
we'll give Flash some information about
the symbol.
| | 01:06 |
Let's give it the name of Circle.
In the Type drop down, let's make sure
| | 01:10 |
that this is a Movie Clip.
Also, notice the registration point of the
| | 01:14 |
new symbol.
The X and Y positioning on the stage is
| | 01:17 |
going to be measured from this point.
The default is the upper left corner.
| | 01:23 |
You can make your symbols have their
registration point anywhere you want to.
| | 01:26 |
But I'd recommend picking one and sticking
with it for all symbols you create, so the
| | 01:30 |
registration point is consistent across
all of them.
| | 01:34 |
So, I’ll click OK, and you should notice
that two things have happened.
| | 01:37 |
One is that we now have the circle show up
as a symbol in the Library.
| | 01:41 |
The second is that when we click on the
New Movie Clip symbol on the Stage and
| | 01:44 |
open the Property Inspector, it shows us
that this is a Movie Clip.
| | 01:49 |
More specifically, it’s an instance or
copy of the Circle Movie Clip.
| | 01:53 |
It also tells us the X position of 100 and
the Y position of 68.95.
| | 02:00 |
Remember that we chose to have the
registration point on the upper left of
| | 02:03 |
the symbol, it's indicated by that little
black cross.
| | 02:07 |
If we quickly turn on our rulers by going
to the View menu and choosing Rulers, you
| | 02:10 |
can confirm the X and Y position by
looking at that upper left hand corner
| | 02:14 |
registration point.
So, great.
| | 02:18 |
We have this symbol.
But why is it useful?
| | 02:21 |
Let's try dragging and dropping another
two copies of the circle out of the
| | 02:24 |
Library.
Think of this symbol in the Library, as a
| | 02:27 |
blueprint for the circle.
Each time you drag a new one out to the
| | 02:31 |
Stage, you're making another copy.
Or as the nomenclature is in Flash, you're
| | 02:35 |
creating another instance.
It's the same concept as maybe a blueprint
| | 02:40 |
for a house.
You have one set of plans for a house and
| | 02:42 |
if your neighborhood's like mine, you'll
have several instances or copies of that
| | 02:46 |
house built in the neighborhood.
Instead of drawing items on the Stage over
| | 02:51 |
and over like a bunch of rain drops or an
army of robots, you could just use copies
| | 02:54 |
of the blueprint.
This not only saves you some work, it can
| | 02:58 |
also save you on file size.
I'll delete two instances of the circle to
| | 03:02 |
the Stage to demonstrate this.
Now, I'm going to publish the movie, and
| | 03:06 |
I'll close the SWF file right away.
What I'm interested in is the final file
| | 03:10 |
size of that baseline movie.
I can check that by clicking on the Stage
| | 03:15 |
opening the Property Inspector.
Here, in SWF history, we see that our
| | 03:19 |
movie was a 172 bytes.
Alright, so let's say we need two more
| | 03:24 |
circles.
I'm going to grab the Oval tool again and
| | 03:27 |
draw a second circle, and of course, a
third circle as well.
| | 03:30 |
I'm not going to turn them into symbols,
just leave them as shapes on the Stage.
| | 03:34 |
Now, I'll republish and again close the
SWF right away.
| | 03:37 |
Clicking on the Stage and looking in the
Property Inspector our SWF history says we
| | 03:42 |
are now at 312 bytes.
So now, I'm going to compare using
| | 03:46 |
symbols.
I'll delete those two shapes off the Stage
| | 03:49 |
and drag two more instance of the Circle
Movie Clip from the Library.
| | 03:53 |
I'll publish the SWF, close the SWF, and
then open the Property Inspector.
| | 03:58 |
Our final file size this time is 191 bytes.
| | 04:02 |
Smaller than when we had circles we had
just drawn on the Stage.
| | 04:06 |
That's part of the power of using symbols.
Our file size is smaller when using
| | 04:10 |
multiple instances of the symbol because
Flash only has to remember the definition
| | 04:13 |
of the circle once.
Each copy on the Stage points back to the
| | 04:18 |
symbol as oppose to Flash having to
remember a separate definition for each
| | 04:21 |
circle.
Of course, in our example here, the
| | 04:24 |
difference in file sizes is not all that
dramatic since we're talking about bikes.
| | 04:29 |
But hopefully you can project that file
size savings could really add up when you
| | 04:32 |
are dealing up with maybe multiple copies
of complex art work or bitmaps.
| | 04:37 |
Or, in a case where you need a whole
colony of prairie dogs or maybe a forest.
| | 04:42 |
So, there's another thing to know about symbols.
| | 04:45 |
Each symbol instance can be modified, but
they're all still tied back to the
| | 04:48 |
blueprint in the Library.
Just like you can have three houses built
| | 04:52 |
from the same blueprint, but paint the
outside of each one a different color, so
| | 04:55 |
they all look different.
Here's what I mean.
| | 04:58 |
I'll select one of the circle symbols on
the Stage, and modify it.
| | 05:02 |
I'm going to press Q on my keyboard, so
the transformation handles appear.
| | 05:06 |
I'm going to shrink it a little bit, and
skew it a little bit.
| | 05:09 |
Now, I'll grab my Arrow tool and selecting
a second instance of the circle, I'm going
| | 05:13 |
to open up the Properties panel.
Under Color Effect, I'm going to choose
| | 05:18 |
Alpha.
I'll change the Alpha to 50%, so the
| | 05:21 |
circle looks faded out.
You can see here that each one of the
| | 05:24 |
instances of the symbol are modified, so
they each look different.
| | 05:29 |
But they're all still tied back to the
symbol in the Library.
| | 05:32 |
You can see this when you double-click on
one of the instances on the Stage any one
| | 05:35 |
of those three is fine.
The screen changes, you'll notice that at
| | 05:39 |
the top of the screen it says scene one
and then circle.
| | 05:42 |
This is indicating that we've stepped into
the timeline of this circle symbol.
| | 05:47 |
You can also see that other incenses of
this circle on the Stage are now kind of
| | 05:51 |
faded out.
This is called Edit in Place mode since
| | 05:55 |
we're editing the symbol, well, in place.
Yet, we can still see where the instance
| | 05:59 |
is relative to the other copies that are
up on the main timeline.
| | 06:03 |
So, let's change our circle symbol definition.
| | 06:06 |
I'm going to click on the fill of the
circle and change it to yellow.
| | 06:10 |
As soon as we do that, you'll see that all
the instances on the Stage reflect the
| | 06:13 |
change made to the blueprint.
To step out of Edit in Place mode, I'll
| | 06:17 |
just click on scene one at the top of the
screen, so we're back on the main
| | 06:20 |
timeline.
There's also another way to edit a symbol.
| | 06:25 |
Instead of double-clicking an instance on
the Stage, I'm going to double-click on
| | 06:28 |
the symbol itself in the Library.
Be sure to click on the little picture of
| | 06:33 |
the cog, not the name, otherwise Flash
will think that you're trying to rename
| | 06:36 |
the symbol.
Here, you can see that once again, we're
| | 06:40 |
in scene one, and then circle.
So, we've stepped into the timeline of the
| | 06:44 |
circle blueprint, but since we
double-clicked on the symbol in the
| | 06:47 |
Library to edit, this time we don't see
all the other stuff sitting on the stage
| | 06:50 |
in the background.
This is called Symbol Editing mode.
| | 06:55 |
So, let's select the fill of our circle again.
| | 06:57 |
This time we'll change it to green.
Now, I'll click on screen one at the top
| | 07:01 |
of the screen to go back to the main timeline.
| | 07:03 |
And you'll see, yet again, how our changes
to the blue print have been reflected in
| | 07:06 |
each one of the copies.
Of course, each one of those copies can be
| | 07:10 |
further modified individually, the shape,
the size rotations, and so on and so
| | 07:13 |
forth.
But the basic structure of each one points
| | 07:17 |
back to the Circle Movie Clip symbol
sitting in the Library, which of course,
| | 07:21 |
has a green fill.
One best practice to keep in mind as you
| | 07:25 |
work on projects is to periodically clean
out and organize your Library symbols.
| | 07:30 |
For instance, here I'm going to click on
the new folder icon in the Library to
| | 07:33 |
create a Shapes folder, and I'll drag my
circle symbol into it.
| | 07:38 |
If you come to the end of a project and
have Library symbols that aren't actually
| | 07:41 |
used your movie, deleting them out of the
Library will make it much easier to figure
| | 07:44 |
out what's actually used in the movie.
If you come to the end of a project and
| | 07:50 |
have Library symbols that aren't actually
used in your movie, deleting them out of
| | 07:54 |
the Library will make it much easier to
figure out what's actually used when you
| | 07:57 |
open up the FLA four months down the road.
Also, naming each symbol's something
| | 08:04 |
intuitive and descriptive like circle is
much better that the default name Flash
| | 08:07 |
will come up with.
It's usually something not very unique.
| | 08:11 |
Like symbol 1, symbol 2, symbol 3.
I once bought a Flash template that had
| | 08:15 |
been originally developed by someone else.
Not only were the symbols named things
| | 08:20 |
like symbol 1, symbol 2, symbol 3 but,
they were multiple copies of the symbols
| | 08:23 |
in the library.
The symbol copies were almost all exactly
| | 08:27 |
alike so, it was really hard to tell what
was actually being used in the SWF.
| | 08:33 |
It was a horrible time waster to sort that
all out.
| | 08:36 |
So, whether you need to have a bunch of
smurfs on the Stage or just need a good
| | 08:39 |
way to organize your movie's content, I
hope you can see some of the advantages of
| | 08:42 |
using symbols.
There's more than just one kind of symbol
| | 08:46 |
in Flash, and we'll explore the
differences between them in the next
| | 08:49 |
movie.
| | 08:50 |
| | Collapse this transcript |
| Comparing movie clips and graphic symbols| 00:00 |
There are three different types of symbols
in Flash.
| | 00:02 |
Let’s take a look at two of them that are
similar to each other, Movie Clips and
| | 00:05 |
Graphic Symbols.
We’ll discuss why you would use each one.
| | 00:10 |
Let’s start with a new blank FLA document
and examine the Movie Clip symbol first.
| | 00:15 |
I’m going to draw a star, so I’m going to
grab my Polystar tool, and now in the
| | 00:19 |
Property Inspector, under Tool Settings,
choose Options.
| | 00:23 |
Under the drop down, I'm going to choose
Star and I'll make it have five sides, or
| | 00:27 |
points.
I'll give it a black stroke and a yellow
| | 00:30 |
fill and draw the star on the stage.
Now, to convert it to a symbol, I'm going
| | 00:35 |
to select a shape with my Arrow tool,
right-click and choose Convert to Symbol.
| | 00:40 |
I'm going to give my symbol a name that
makes sense.
| | 00:42 |
So, how about Star.
And make sure the drop down is set to
| | 00:45 |
Movie Clip.
And click OK.
| | 00:47 |
Now, when I open the Library, we see the
Star Movie Clip appearing there.
| | 00:52 |
If I select the Movie Clip symbol on the
Stage and open the Property Inspector.
| | 00:55 |
Yep, it tells me it's a Movie Clip, and
it's an instance of star.
| | 01:00 |
There's one other important thing to note
here, and that's the spot where it says
| | 01:03 |
Instance Name.
I can type a name in here for my symbol,
| | 01:06 |
maybe My Star.
What this does is give Flash a hook into
| | 01:11 |
the symbol instance, if I want to control
it using ActionScript.
| | 01:15 |
Say I have five different stars on the
Stage, and I wanted to control only one of
| | 01:19 |
them with ActionScript.
Well, how is Flash going to know which one
| | 01:23 |
I want to control?
The instance name is the hook you use to
| | 01:26 |
connect ActionScript and individual Movie
Clips on the stage.
| | 01:30 |
Once Flash knows which symbol you're
trying to talk to, you can move it, rotate
| | 01:34 |
it, scale it, make it fade in and out,
make it clickable, and a number of
| | 01:37 |
different other things with ActionScript.
We don't need to control the star with
| | 01:42 |
ActionScript right now, but there's one
more thing to note about the Movie Clip
| | 01:45 |
symbol.
I'll double-click on the Star Movie Clip
| | 01:48 |
and you'll notice how on the upper left
hand of the screen it now says scene one,
| | 01:52 |
and then star.
As we've seen before, we've actually
| | 01:56 |
stepped inside our Star Movie Clip.
You can see, it's got it's own timeline,
| | 02:00 |
just like the main timeline.
It can have it's own set of layers, so we
| | 02:03 |
can add an extra layer or two here.
It could have it's own key frames, it's
| | 02:08 |
own animation, whatever you want.
Each Movie Clip having it's own timeline
| | 02:12 |
is really a powerful feature, both in
terms of ActionScript and animation.
| | 02:17 |
Breaking things into individual pieces as
Movie Clips means you can control
| | 02:20 |
different parts of the Flash movie separately.
| | 02:23 |
We'll explore that later on.
For now, let's click on scene one.
| | 02:27 |
Back on the upper left again, go back to
the main timeline.
| | 02:31 |
So, Movie Clip symbols are useful because
they have their own timelines, they can be
| | 02:35 |
animated, and ActionScript can communicate
to them via an instance name.
| | 02:40 |
In fact, the entire Flash FLA document is
a Movie Clip of sorts.
| | 02:44 |
Movie Clip is the most versatile and
powerful of the three symbols.
| | 02:48 |
Let's move on now to our second type of
symbol, a Graphic symbol.
| | 02:52 |
For this, I'm going to draw another shape,
this time a circle.
| | 02:55 |
So, I'll grab the Oval tool, give it a
blue fill with a black stroke.
| | 03:00 |
I'll draw the oval, select it with the
Arrow tool, and then hit F8 to convert it
| | 03:03 |
to a symbol.
I'll give it an intuitive name, like,
| | 03:07 |
Circle.
And this time, make it a Graphic symbol.
| | 03:11 |
Open your Library, and the circle symbol appears.
| | 03:14 |
Notice, the difference, in the icons next
to the symbols.
| | 03:17 |
The Star Movie Clip has an icon that looks
like a gear.
| | 03:21 |
The symbol for the circle, that's a
Graphic symbol is more like a
| | 03:24 |
conglomeration of shapes.
Now, I'll double-click on this circle
| | 03:28 |
instance on the Stage, and you'll again
notice how at the top left it says scene
| | 03:31 |
one, and then circle.
So, once again we've stepped inside the
| | 03:36 |
symbol to its own timeline.
I could select my fill here and change it
| | 03:40 |
to green.
I could make the circle bigger.
| | 03:43 |
I could skew it.
I could rotate it.
| | 03:44 |
I could put animation on its own timeline.
All kinds of different things.
| | 03:48 |
The thing to notice here is that Graphic
symbols, just like Movie Clip symbols,
| | 03:52 |
have their own timeline and you can edit
the content on that timeline as well as
| | 03:55 |
animate it.
So, let's click scene one back on the
| | 03:59 |
upper left again, to step out of the
Graphic symbol's timeline.
| | 04:02 |
So, what's really the difference between
Movie Clip symbols and Graphic symbols?
| | 04:07 |
So far, they look about the same.
They both have their own timeline.
| | 04:10 |
They can both be animated.
Well, one big difference is that Graphic
| | 04:13 |
symbols can't be directly manipulated by ActionScript.
| | 04:17 |
For instance, if I wanted to make my
circle clickable, well I can't because it
| | 04:20 |
is a graphic symbol.
To prove it to you, I'll click on the
| | 04:23 |
circle instance to make sure it's selected
and open up the Property Inspector.
| | 04:28 |
Indeed, here it shows it's a Graphic
symbol and it's an instance of circle, but
| | 04:31 |
there is no field to type in an instance
name like there was for Movie Clips.
| | 04:37 |
If there's no instance name, Flash can't
identify it to manipulate it with
| | 04:40 |
ActionScript.
That's really the biggest difference
| | 04:43 |
between Movie Clips and Graphics.
There are some other differences and
| | 04:47 |
tricks between Movie Clips and Graphics
when it comes to controlling and
| | 04:50 |
previewing timeline animation.
But for now, if you're trying to decide,
| | 04:54 |
should I make my new symbol a Movie Clip
or a Graphic symbol?
| | 04:58 |
Just keep in mind if you think might ever
want to make the symbol clickable, or
| | 05:01 |
otherwise control it with ActionScript,
make it a Movie Clip.
| | 05:05 |
Graphic symbols are a better choice to contain.
| | 05:08 |
Maybe something like a background graphic
that's just going to do something simple,
| | 05:11 |
like fade in or maybe an animation, that's
very simple.
| | 05:15 |
| | Collapse this transcript |
| Using movie clips in a project| 00:00 |
Let's convert some of the content in our
Bird Watching project into Movie Clips.
| | 00:04 |
Remember that one of the capabilities of
movie clips is that they can be animated.
| | 00:08 |
To refresh ourselves on what parts of our
Bird Watching project are animated, I'm
| | 00:12 |
going to open the finished version. (MUSIC).
| | 00:18 |
The detail image and text for each one of
the paintings animates in using a fade in
| | 00:22 |
effect.
We're going to need the image, and the
| | 00:25 |
text, and the background behind them to be
all sewn together in a movie clip.
| | 00:30 |
We'll actually need five movie clips.
One for the Pink Skies image.
| | 00:34 |
One for the Bird on the Highwire image.
One for the Waiting image, and so on.
| | 00:39 |
In our BirdWatching file, we already have
all of those elements for all five
| | 00:42 |
paintings ready to go.
The images and the accompanying text are
| | 00:46 |
in the Content layer, starting on frame ten.
| | 00:49 |
The background rectangle behind them is in
the Content Background layer.
| | 00:53 |
So, I'm going to unlock both of those
layers and just make sure that all the
| | 00:56 |
other layers are locked before proceeding.
So, I'll click above frame ten to glue all
| | 01:01 |
three visual objects together.
I'm going to hit Ctrl+E on my keyboard to
| | 01:06 |
select all.
That's Cmd+A on a Mac.
| | 01:09 |
All three elements are selected even
though they're on different layers.
| | 01:12 |
And now, I'm ready to convert them into a
movie clip.
| | 01:15 |
Actually, what I'm about to do is going to
be a mistake made on purpose.
| | 01:19 |
You can just watch this part, if you don't
want to make the mistake, too, and then
| | 01:22 |
have to back out of it.
So, with all three of the elements
| | 01:25 |
selected, I'll right-click on any of them
and choose convert to symbol.
| | 01:29 |
I'll type in the name of pinkSkiesContent
and make sure Movie Clip is selected in
| | 01:33 |
the type drop down.
The new movie clip has been created, here
| | 01:37 |
it is in the Library.
The problem is that when I move to frame
| | 01:41 |
20 or 30 or 40 or 50, all we have left is
the image and text for each painting.
| | 01:47 |
The background images gone.
It got sucked up from the Content
| | 01:50 |
background layer into the movie clip we
created on frame ten.
| | 01:54 |
Well, we could try going in to the
pinkSkiesContent movie clip and copying
| | 01:58 |
and pasting that background rectangle back
into the right spot on the Content
| | 02:01 |
Background layer.
That sounds like a lot of work, and a pain
| | 02:06 |
in the neck to try to get to line up perfectly.
| | 02:09 |
Instead, I'm going to go to the Window
menu, and then choose History.
| | 02:13 |
The History panel opens up, and lists for
us every action that we've made since
| | 02:16 |
opening the FLA.
I'm going to scroll down to the bottom.
| | 02:19 |
The most recent actions are here.
Then, I'm going to move the slider up,
| | 02:23 |
until I get to the step where I selected all.
| | 02:26 |
At this point, we've backed out of that
movie clip.
| | 02:29 |
Indeed, check out the Library and you'll
see it's gone.
| | 02:32 |
Looking at the timeline, we also have the
picture and image in the Content layer,
| | 02:35 |
plus the background image back on the
Content Background layer.
| | 02:40 |
You can tell because the key frame on
frame ten has the filled in black circle.
| | 02:43 |
Not to mention, I can see the rectangle
appear and disappear when I turn off the
| | 02:46 |
layer.
We're ready to try again, so I'm going to
| | 02:49 |
close the History panel.
Instead of using History, I could've also
| | 02:53 |
just used the Undo command.
That's Ctrl+Z in Flash, Cmd+Z on a Mac,
| | 02:57 |
just like it is in a lot of other programs.
| | 03:00 |
So, how to do this so each one of our
movie clips gets a copy of that background
| | 03:03 |
image?
There's a couple of different options, and
| | 03:07 |
I'm going to go the route of making
additional key frames.
| | 03:09 |
For instance, I'm going to click on Frame
20 of the Content Background layer, right
| | 03:14 |
click, and choose Insert Key Frame.
The new key frame appears with a copy of
| | 03:18 |
the content from the most previous key
frame in it.
| | 03:22 |
So, it's got a copy of the rectangle.
I'll do the same thing again on frames 30,
| | 03:27 |
40 and 50.
Now, I have a copy of the background
| | 03:30 |
rectangle available to go in each one of
the five movie clips I want to create.
| | 03:35 |
So now, I'll go back to frame ten, press
Ctrl+A on my keyboard to select all,
| | 03:39 |
right-click and choose Convert To Symbol.
I'll type in the name of pinkSkiesContent,
| | 03:45 |
and make sure the drop down is set to
Movie Clip, and click OK.
| | 03:48 |
There we go.
The background, image, and text, are all
| | 03:51 |
buttoned up into the pinkSkiesContent
movie clip.
| | 03:54 |
Notice again, how the rectangle from the
Content Background layer got sucked up
| | 03:58 |
into the movie clip.
So now, it's just a matter of rinse and
| | 04:01 |
repeat for the rest of the key frames.
Now, that they each have their own copy of
| | 04:05 |
the background and the appropriate image
and text.
| | 04:09 |
With that, I'm going to clean up the FLA a
little bit.
| | 04:11 |
The Content Background layer is now empty.
All it's got left is blank key frames
| | 04:15 |
where the background rectangle used to be.
So, I'll delete this layer.
| | 04:20 |
In the Library, I'm going to create a
folder and call it paintingsContentDetail.
| | 04:24 |
Now, I'll drag all my newly created movie
clips into this folder to keep them
| | 04:28 |
together.
There's one more thing I'm going to do to
| | 04:31 |
my newly created movie clips to add some
visual depth to them.
| | 04:34 |
Add a drop shadow.
That's another great thing about symbols.
| | 04:38 |
Besides being able to do things like
control them with ActionScript, and build
| | 04:41 |
animation.
You also have a whole menu of different
| | 04:44 |
visual effects called Filters that you can apply.
| | 04:47 |
I'll move back to frame ten, and select
the pinkSkiesContent movie clip.
| | 04:52 |
Now, in the Property Inspector, near the
bottom, I'm going to expand the Filters
| | 04:55 |
area.
Clicking once on the Add Filter button
| | 04:58 |
that looks like a plus sign, displays all
the different types of effects you can
| | 05:01 |
choose from.
I'll choose Drop Shadow.
| | 05:03 |
I'll click once on the pasteboard, and you
can see the Drop Shadow.
| | 05:08 |
I actually think it looks a little bit too
dark, so I'll select the Movie Clip again.
| | 05:12 |
And back in the Filters area, click the
Color Chip at the bottom to change the
| | 05:15 |
color of the Drop Shadow to a lighter gray.
| | 05:19 |
I'm going to choose 666, 666.
I'm not going to change any of these other
| | 05:24 |
settings that are options because when I
click on the pasteboard I think the drop
| | 05:27 |
shadow looks fine.
Now, we need to go and apply the drop
| | 05:31 |
shadow to all the other movie clips, so
I'll move to frame 20 and select the Bird
| | 05:34 |
Highwire Content movie clip.
Just this before in the Filters area, I'll
| | 05:39 |
add a drop shadow and change the color to
666 666.
| | 05:43 |
Instead of doing this three more times for
the remaining movie clips there is a
| | 05:47 |
shortcut that might save us a little bit
of time.
| | 05:51 |
With my movie clip on frame 20 still
selected, I'm going to go to the Options
| | 05:54 |
menu in the Filters area and choose Copy
All Filters.
| | 05:58 |
Now, when I move to frame 30 and select my
movie clip on the Stage here, I can go to
| | 06:02 |
the Options area again and paste filters.
Now, I'll do that again for frames 40 and
| | 06:09 |
50.
So, we're all done for now, scrubbing the
| | 06:12 |
timeline we have a nice setup of Paul
Shellington and his bio on frame one.
| | 06:16 |
Then, the painting details at intervals of
ten as we go on down the timeline.
| | 06:20 |
We'll be able to animate those painting
detail movie clips, so they fade in nicely
| | 06:24 |
a little later on.
For now, I'm just going to lock the layer.
| | 06:28 |
| | Collapse this transcript |
| Introducing buttons| 00:00 |
Let's take a look at the third and final
type of symbol in Flash, the Button
| | 00:03 |
symbol.
I'll open up link FLA and create a button
| | 00:07 |
by choosing the Rectangle tool.
I'm going to choose a blue fill with no
| | 00:11 |
stroke, and then under Rectangle options,
bump up my rounded corners measurement
| | 00:15 |
here.
So we get slightly rounded corners.
| | 00:18 |
Now I'll draw a rectangle on the stage.
With the Arrow tool I'll select the
| | 00:22 |
rectangle shape, right-click and choose
Convert to Symbol.
| | 00:26 |
I'll give it a name of Rectangle Button.
Under the Type drop-down I'm going to make
| | 00:30 |
sure that I've got Button selected and
click OK.
| | 00:33 |
Here's my new button in the library.
Now I'll double-click on the Instants on
| | 00:37 |
the stage to go into the button's own timeine.
| | 00:40 |
You'll notice that just like with the
other single types, on the upper left of
| | 00:43 |
the screen, it says screen one and then
rectangle button.
| | 00:47 |
So we've stepped into the button.
We're editing its Timeline.
| | 00:50 |
We can see that the button timeline is
different than that of a movie clip or a
| | 00:53 |
graphic symbol.
We've got four frames here.
| | 00:57 |
Each one has to do with what the user's
mouse is doing.
| | 01:00 |
The first keyframe shows what the button
will look like when the user mouses up not
| | 01:03 |
touching the button.
Basically its what the button looks like
| | 01:07 |
when its just hanging out on the screen.
The next frame is for what that button
| | 01:11 |
will look like when the users mouse is
hovering over the rectangle.
| | 01:15 |
Well, we give our users some nice visual
feedbacks when they mouse over the button
| | 01:19 |
by changing the color.
So the way we do that is in the Over
| | 01:22 |
Frame, right-click and choose Insert Keyframe.
| | 01:25 |
Flash created the keyframe, you can tell
by the filled in black circle in the
| | 01:29 |
overstate.
Flash also copied the information from the
| | 01:33 |
up frame into the overframe.
So right now, up and over look exactly the
| | 01:37 |
same.
So making sure I have the Over Frame
| | 01:40 |
selected, I'll click on the Fill of the
rectangle and change it to green.
| | 01:44 |
Now lets do a similar thing for the Down
Keyframe, I'll change the color of the
| | 01:47 |
button for when the user's mouse is
pressed down.
| | 01:51 |
So I'll right click on the key frame,
chose Insert Keyframe, select the fill in
| | 01:55 |
the rectangle and this time change it to orange.
| | 02:00 |
All right, let's test our movie by
pressing Ctrl+Enter.
| | 02:03 |
Indeed, when we're in the up state, or
just not touching the rectangle, it's
| | 02:06 |
blue.
When we're over the button, out button
| | 02:09 |
turns green.
And when I click down with my mouse, it
| | 02:12 |
turns orange.
So what if you want your button to have
| | 02:15 |
some text?
That's easily done.
| | 02:18 |
Back on the Button Timeline, I'll add a Layer.
| | 02:20 |
You can have as many layers in the
Timeline of your Button symbol as you
| | 02:23 |
want, just like the main timeline.
I'll grab the Text tool and choose some
| | 02:27 |
settings.
I'm going to choose Arial, Bold Italic, 16
| | 02:30 |
points is fine, Centered Text and I'm
going to make my text bBlack.
| | 02:35 |
I'll move the playhead to the up keyframe
and now click on the stage and type the
| | 02:38 |
words Click Me on top of the button.
I'll grab my Arrow tools, and use it to
| | 02:43 |
reposition the click me text.
Or, you could also use your Arrow keys.
| | 02:47 |
So, you can see that Flash filled in the
words click me on the over and down frames
| | 02:50 |
as well.
Now, when I test the movie, you'll see the
| | 02:54 |
button and the text working properly.
So, that's a handy way to quickly create a
| | 02:58 |
button that reacts to what the user's doing.
| | 03:01 |
I'm going to go back to the Button
Timeline an Delete the Text layer, so we
| | 03:03 |
can look at something else.
So we've got up, over, an down states.
| | 03:08 |
What about the Hit state?
Hit as the name kind of implies, defines
| | 03:11 |
what area of the button is hot or clickable.
| | 03:15 |
Notice that even though there's no
keyframe in the headframe, Flash is
| | 03:18 |
looking back to the closest previous
keyframe that has something drawn in it
| | 03:22 |
and using that.
So in our case, it's looking at the down
| | 03:26 |
keyframe, and you know, it's fine to leave
a button this way.
| | 03:29 |
You don't have to define the Hit state,
you don't even have to define over and
| | 03:32 |
down if you don't want to.
If you just have a keyframe on the up
| | 03:37 |
state and nothing on the other frames, our
button would just always be blue.
| | 03:41 |
Anyway, having the Hit state can be nice
for some alternative options.
| | 03:46 |
Maybe you want the button to highlight
when the mouse just gets close to it, but
| | 03:50 |
not right on it.
The hit area being a little bit bigger
| | 03:54 |
than the actual colored part of the button
would be that scenario.
| | 03:58 |
It could be useful in maybe something like
a children's game where the child is still
| | 04:01 |
practicing how to use the mouse.
Having that extra hit area makes it easier
| | 04:05 |
for them to actually hit the mouse on the button.
| | 04:08 |
Let's try it.
I'll right click on the Hit state.
| | 04:12 |
I'll choose Insert Keyframe, Flash copies
and the envelope from the down frame in
| | 04:15 |
the Hit frame.
Now I'll select the rectangle and hit Q on
| | 04:18 |
the keyboard to bring up the Free
Transform handles.
| | 04:21 |
I'm going to scale my hit area a little
bit bigger.
| | 04:25 |
Now when I test, you can see that when the
mouse gets close to the colored area, but
| | 04:28 |
not quite on top of it, the button starts reacting.
| | 04:32 |
Because the Hit state is bigger than the
colored area.
| | 04:35 |
Back in the FLA, one more useful thing in
the Hit state is being useful to create an
| | 04:39 |
invisible button.
Invisible buttons are great since you can
| | 04:43 |
use them to make any area of our screen
name hot.
| | 04:46 |
For example, maybe you have a map for a background.
| | 04:49 |
If a user clicks on a certain part of it,
it takes about that certain map appears.
| | 04:54 |
How about banner ads, like advertisements
you see on websites.
| | 04:57 |
You've probably noticed how you can click
on almost any part of an ad and then
| | 05:00 |
something happens.
Well banner ad or usually have the whole
| | 05:04 |
ad, or at least a large part of it,
covered with an invisible button so it's
| | 05:07 |
super easy for the user to click on.
So I'm going to Hit Ctrl+Z to undo my Hit
| | 05:13 |
state.
It should be back in its original position
| | 05:17 |
and same size as the rectangles in the Up,
Over, and Down stages.
| | 05:21 |
Looks good, so now I’m going to
right-click on the Up frame and choose
| | 05:24 |
Clear Frames.
That’s going to clear out the frames
| | 05:28 |
content.
I’ll do it two more times to get rid of
| | 05:30 |
the content in the Over and Down frames,
as well.
| | 05:34 |
So now Up has a blank keyframe, over and
Down have nothing in them at all, and hit
| | 05:37 |
is the only keyframe that actually has
something on the stage.
| | 05:42 |
On the upper left, I’ll click Scene 1 to
go back to the main Timeline.
| | 05:46 |
You’ll see that the button appears as a
light blue.
| | 05:49 |
That’s just for you, as the developer, to
remind you that there’s an invisible
| | 05:53 |
button there.
When we test the movie, we'll see the
| | 05:56 |
button doesn't appear at all.
However, I know its still there because
| | 06:00 |
when I mouse over where the button is my
cursor turns into the little hand instead
| | 06:03 |
of the arrow.
Another important attribute of Button
| | 06:07 |
Symbols is that just like movie clips they
can be controlled by ActionScript.
| | 06:12 |
I'm going to click on the button, and when
I open the Property Inspector, you'll see
| | 06:15 |
the field for adding an instance name appear.
| | 06:19 |
Again, that's Flash's hook into the symbol
to control it with Action Script.
| | 06:23 |
This kind of makes sense.
Our button already changes color, but if
| | 06:26 |
you want the button to actually do
something when someone clicks on it.
| | 06:30 |
Like open a new window or make something
else in your Flash movie do something you
| | 06:34 |
have to have ActionScript.
We'll create some buttons and write
| | 06:38 |
ActionScript for them later in the course.
To summarize button symbols they have a
| | 06:43 |
special Timeline that makes it easy to
respond in a visual way to user
| | 06:46 |
interaction.
By giving Buttons an Instance name they
| | 06:50 |
can also be controlled by ActionScript.
| | 06:53 |
| | Collapse this transcript |
| Adding buttons to a project| 00:00 |
We have almost all of the elements for our
Bird Watching piece ready.
| | 00:04 |
The last visual elements we have to add
are the Buttons.
| | 00:07 |
Remember that we have a Guide layer that
shows us what this first screen is
| | 00:10 |
supposed to look like.
It's the bottom layer in our layers stack,
| | 00:14 |
and the content in the background layer in
the bg folder is currently covering it up.
| | 00:19 |
I'm going to turn off the Visibility of
that Background layer.
| | 00:22 |
So we need to add the Exhibit Home button,
as well as to build the five Preview the
| | 00:26 |
Collection buttons that allow the user to
navigate around the project.
| | 00:31 |
Let's start with the Exhibit Home button.
We already have a layer that would be good
| | 00:35 |
to put the buttons on, which is the
Buttons layer, so I'll Unlock that.
| | 00:40 |
Notice how it's underneath the Content layer.
| | 00:42 |
So it's at Frames 10 and beyond the
Exhibit Home button will always be
| | 00:45 |
visible.
But the thumbnail buttons will be covered
| | 00:48 |
up by the movie clips containing the info
each individual painting.
| | 00:51 |
Drawing this button would not be all that
hard but in the interest of time we are
| | 00:55 |
just going to copy it from another file.
There's a file called buttonParts.fla in
| | 01:00 |
the Exercise files for this chapter.
So I'll open that up.
| | 01:04 |
We're looking for the button called
Exhibit Home button in the library.
| | 01:08 |
I'll right-click on the button in the
library and choose Copy.
| | 01:11 |
Now I'll switch back to Bird Watching, and
in the library here, right-click and
| | 01:15 |
choose Paste.
I'm going to double-click on the button in
| | 01:19 |
the library so we can check it out.
This button is very similar to the
| | 01:22 |
Demonstration button we looked at in the
last movie, it only has two layers.
| | 01:27 |
The text layer has this exhibit home text,
I'll lock that Text layer and then I'll
| | 01:31 |
Click and Drag with my mouse, around the button.
| | 01:36 |
Looking in the Property Inspector this is
just made up of colored shapes.
| | 01:40 |
Notice there is also slightly different
colors on the Over and Down states, I will
| | 01:44 |
click on Scene 1 to go back up to the main Timeline.
| | 01:48 |
I will make sure I've got frame one on the
Buttons layer selected and now drag in
| | 01:51 |
drop a copy of the Exhibit Home button out
to the stage.
| | 01:55 |
You could Zoom In and use the arrow keys
to try and line it up with the Guide
| | 01:58 |
Image.
Or you could use the Property Inspector
| | 02:02 |
and type in an x of 846.05 and a y of 24.
That button is done.
| | 02:08 |
Let's now build the Preview, that
Collection buttons.
| | 02:11 |
I'll start by Zooming In, so we can take a
look at the visual elements that we'll
| | 02:14 |
have to use.
So it's got a gray border, a white
| | 02:17 |
background, a thumbnail size of the
painting, and then this inner gray border.
| | 02:21 |
That's more of a hard line that's right on
the edge of the white.
| | 02:25 |
The whole thing also has a Drop Shadow.
So I'm going to change my View back to Fit
| | 02:29 |
in Window, so I can see the whole stage.
We'll start by grabbing the shapes that
| | 02:33 |
make up the gray and white background
which I drew ahead of time in merge
| | 02:37 |
drawing mode in buttonparts.fla.
This is just sitting on the stage.
| | 02:42 |
So, using my Arrow tool I'll click and
drag to select then use Ctrl+C to Copy.
| | 02:47 |
Back in birdwatching.fla, I'll Paste it
onto the stage.
| | 02:51 |
I'll move it more or less over where the
Guide layer shows it should go but at this
| | 02:54 |
time I'm not going to worry too much about
the placement.
| | 02:57 |
I'm going to turn off the Visibility of
the Guide layer just for now.
| | 03:01 |
This is a good start for the button so
with that shape still selected I'll right
| | 03:05 |
click and choose convert to Symbol.
I'll give my new button the name of Pink
| | 03:09 |
Skies button.
And I'll also make sure that Button is
| | 03:12 |
selected from the Type drop-down.
I'll click OK and here's our button.
| | 03:17 |
I'll double-click on it so I can enter the Timeline.
| | 03:21 |
Now, the first thing I'll do is rename
Layer 1 as bg for background.
| | 03:25 |
Now, I'll create a new layer and call it image.
| | 03:28 |
We imported in the thumbnail images that
go here awhile back in the course.
| | 03:32 |
So, I'll open up the Library and then the
Paintings Thumbnails folder Drag and Drop
| | 03:36 |
pinkskiesthumb.jpeg to the stage.
The image kind of automatically just drops
| | 03:41 |
in place but, if you want to use the
property inspector you can give it an x of
| | 03:45 |
six and a y of zero.
By the way since we are working on the
| | 03:50 |
Timeline of the Button, not the main Timeline.
| | 03:53 |
This x and y position is measured relative
to the registration point of the button
| | 03:57 |
that indicated by this small cross on the
upper left.
| | 04:02 |
If I go the View menu and then Rulers.
The ruler show the scale for the main
| | 04:06 |
Timeline, you can see that 00 for main
timeline as way off to the upper left 00
| | 04:10 |
for the button is indicated by this small cross.
| | 04:14 |
So an x of 6 and a y of 4 makes sense
relative to that spot.
| | 04:19 |
Now, I'll add another layer on top of the
existing ones and rename it Outline.
| | 04:24 |
This already exists for us in
buttonParts.fla, so I'll select and Copy
| | 04:28 |
the outline then click on the up state of
the Outline layer and Paste it in.
| | 04:34 |
Its pretty easy to move this into position
but if you want to use the Property
| | 04:37 |
Inspector and X of 5.65 and a Y of 4.5 are
the coordinates.
| | 04:42 |
This looks pretty good, but so far there
is only content for the up frame.
| | 04:46 |
We need all of this to appear on the rest
of the frames as well, so I will click the
| | 04:49 |
hit state in the Outline layer, hold down
the Shift key on my keyboard.
| | 04:55 |
Click the head state in the BG layer to
multiple select, and then press F5 to
| | 04:58 |
Insert Frames.
I'm going to add in two more layers now,
| | 05:02 |
Text and Sound.
Sound, we'll add later in the course, but
| | 05:06 |
in the text layer, I'm going to type in
the name of the painting, starting in the
| | 05:09 |
over state.
That way, users will see the name when
| | 05:12 |
they mouse over the Button.
So I'll select the Over State of the Text
| | 05:16 |
layer, right click and choose Insert Blank Keyframe.
| | 05:19 |
Now I'll choose my Text tool ,and choose
the settings of Static Text, Ariel, Bold
| | 05:24 |
Italic, 16 point, Black Color and Center Aligned.
| | 05:30 |
Now I'll click on the stage and type in
Pink Skies.
| | 05:33 |
I can use the arrow keys to center it
visually or to get super specific, the
| | 05:37 |
coordinates are x of 15.6 and y of 91.
This button, I think, is looking pretty
| | 05:42 |
good.
So I'll click on Scene 1 to return to the
| | 05:45 |
main Timeline.
If I hit Ctrl+Enter to test my movie, so I
| | 05:48 |
can try out the button, well, the movie
goes a little crazy.
| | 05:53 |
Remember that the payhead starts at Frame
1 of the main Timeline and just runs on
| | 05:56 |
down until it gets to the end, then it
starts over again on Frame 1.
| | 06:01 |
To test out our Button, we need to get
that playhead to stop.
| | 06:05 |
This requires a simple line of Action
Script, it's a good idea to follow our
| | 06:08 |
best practice of keeping things on their
own separate layers.
| | 06:12 |
So I'm going to create a new layer above
all the others and rename it Actions.
| | 06:17 |
It's also kind of an unwritten practice
that your Action Script layer should
| | 06:20 |
always be the top most layer in the Timeline.
| | 06:23 |
The code will still work if it's not, but
following this rule of thumb makes it
| | 06:26 |
easier for you and other developers who
might work with your FLA later.
| | 06:31 |
To easily find where the Action Script's located.
| | 06:34 |
You can attach Action Script to frames
that have a key frame in them.
| | 06:37 |
We end the playhead to stop at play one,
so we can see the buttons working there.
| | 06:41 |
And immediately there's already a keyframe.
| | 06:44 |
So I'll just select that frame and open up
the Selections panel where I'll type my
| | 06:48 |
code by pressing the F9 key.
You can also go to the Window menu and
| | 06:54 |
choose Actions.
This very first line where I can enter
| | 06:57 |
text is where I'll type Stop, open
parentheses, close parentheses, and then a
| | 07:01 |
semicolon.
It's important to make sure that what you
| | 07:05 |
type matches this exactly.
It should all be lower case, the opening
| | 07:09 |
and closing parentheses both need to be
there as well as the semicolon at the end.
| | 07:14 |
The word Stop will turn blue for you when
it's typed correctly.
| | 07:18 |
That's all we need so I'll click the Close
button on the upper right to close the
| | 07:21 |
panel.
Now when I click once on the stage you can
| | 07:24 |
see that Frame 1 of the Actions layer now
has a small lower case a that appears in
| | 07:28 |
it.
That indicates there's Action Script
| | 07:31 |
attached to that keyframe.
With that, I'll test the movie again, and
| | 07:35 |
this time the play head stays on Frame 1.
Now I can try the button, and indeed, when
| | 07:40 |
I mouse over it, the Pink Skies content appears.
| | 07:43 |
I'll close this one.
Great, so we basically need four more
| | 07:46 |
buttons just like this to round out the
choices for the user.
| | 07:50 |
But don't worry, we'll do this relatively
quickly by duplicating and then modifying
| | 07:53 |
this button.
Before we do, there's one thing missing.
| | 07:57 |
Remember that the buttons are meant to
have a Drop Shadow.
| | 08:00 |
The simplest way to do this is to select
my button and then, in the Property
| | 08:04 |
Inspector, Add the Drop Shadow in the
Filters area.
| | 08:08 |
I'm going to change the color of the Drop
Shadow to 666666 and leave all the other
| | 08:12 |
settings the way they are.
This button is done.
| | 08:16 |
Now it's time to create four more just
like it.
| | 08:19 |
I'll turn on the Visibility of the Guide
layer again.
| | 08:22 |
So we're reminded of what we need.
And then I'll turn it off again.
| | 08:26 |
We'll create these buttons by duplicating,
and then modifying the Pink Skies button.
| | 08:31 |
This is not only a time saver, it will
also insure that all the buttons are the
| | 08:34 |
same.
I'll start by finding the button I just
| | 08:37 |
created, Pink Skies button, in the Library.
| | 08:40 |
Then I'll right-click it, an choose Duplicate.
| | 08:43 |
The resulting dialogue box asks me, what I
want to call this duplicate button?
| | 08:48 |
I'll type birdHighWireButton, and I'll
make sure that button is selected in the
| | 08:52 |
type drop-down.
When I click Ok, we see the new button
| | 08:56 |
appear in the library.
Of course when I click on it to Preview we
| | 09:00 |
can see that it looks just like the Pink
Skies button.
| | 09:03 |
To change this I'm going to double-click
birdHighWireButton in the Library to
| | 09:07 |
change it's Timeline.
There's two things we have to change.
| | 09:11 |
The Thumbnail image, and the Text.
I'll start by clicking the thumbnail image
| | 09:15 |
of the Pink Skies Painting.
Then in the Property Inspector, click the
| | 09:18 |
button labeled Swap.
Flash opens up the library and chose all
| | 09:22 |
the possible things I could swap this
image out with.
| | 09:25 |
I'll select the BirdOnAHighWireThumb in
the Paintings Thumbnails folder.
| | 09:30 |
Now I'll click on the Over Frame in the
Text layer and double-click in the text
| | 09:34 |
box to modify the text itself.
I'll type in Bird On A High Wire, and
| | 09:40 |
that's it for this button.
I'll switch to my Arrow tool and then
| | 09:46 |
click on Scene 1 to get out of the Buttons timeline.
| | 09:49 |
I’ll make sure that my Button layer is the
only one on the main Timeline that’s
| | 09:52 |
unlocked.
So I’ll right-click and say Lock Others.
| | 09:57 |
Now I’ll Drag and Drop a copy of my newly
created button to the stage.
| | 10:01 |
I’m not going to worry about Placement at
this point.
| | 10:04 |
So we’ll do the same thing now for the
next button.
| | 10:07 |
In the library, I’ll right-click on Pink
Skies Button again.
| | 10:10 |
I’ll choose Duplicate, and this button
I'll give the name of Waiting Button.
| | 10:15 |
Button is already selected in the Type
drop-down so I'll click OK.
| | 10:19 |
Now I'll double-click on Waiting Button in
the library and I'll select the image, so
| | 10:24 |
I can swap it out.
I'll go to the Property Inspector, click
| | 10:28 |
Swap and this one wants WaitingThumb.jpg,
now I'll click to the over frame.
| | 10:34 |
Double-click on the text that says Pink
Skies, and replace it with the word
| | 10:37 |
waiting.
That's it for this button, so I'll click
| | 10:41 |
Scene 1, to go back up to the main timeline.
| | 10:43 |
And in my library, find my waiting button,
and Drag and Drop it to the stage.
| | 10:48 |
We'll do it again, I'll right-click on
Pink Skies button.
| | 10:52 |
Duplicate, and call this one warning button.
| | 10:55 |
Flash knows I want it to be a Button, so
I'll click OK.
| | 10:58 |
I'll double-click on Warning Button in the library.
| | 11:01 |
I'll click the image, go the Property
Inspector, and Swap it out with
| | 11:05 |
WarningThumb.jpeg.
I'll move to the Over Frame.
| | 11:10 |
I'll double-click on the word Pink Skies,
type in Warning, I'll grab my Arrow tool,
| | 11:14 |
and go back up to Scene 1.
This button is done.
| | 11:18 |
I'll Drag and Drop an instance of the
Warning button to the stage.
| | 11:22 |
One last time, right-click on Pink Skies
Button > Duplicate.
| | 11:27 |
This one I'll call ThePeacockButton.
Button is selected in the Type drop down,
| | 11:32 |
click OK.
I'll double-click on Peacock Button in the
| | 11:36 |
library, Swap out the image, go to the
Over Frame.
| | 11:41 |
Change the text, switch to my Arrow tool,
go back to the main Timeline, Scene 1.
| | 11:49 |
And finally Drag and Drop thePeacockButton
to the stage.
| | 11:53 |
So now we're all done.
I'm going to turn on my guide layer again
| | 11:57 |
and make sure my first and last buttons
line up with the Guide image.
| | 12:02 |
Then to quickly align all the other
buttons, first I'll select them all then
| | 12:06 |
go to the Window menu and choose Align.
In the Align panel I'll choose Align Top.
| | 12:12 |
Then I'll align using Distribute
Horizontal Center.
| | 12:16 |
This gets the buttons to spread out evenly
over the space between the first and last
| | 12:20 |
buttons.
At this point we're done with the Guide
| | 12:23 |
Layer.
We shouldn't need it from hereon now.
| | 12:25 |
So I'm going to Delete it.
There's nothing really wrong with keeping
| | 12:28 |
it, since it doesn't appear in the SWF,
but I like to delete unneeded layers form
| | 12:31 |
the Timeline.
I'll also turn the Visibility of the
| | 12:34 |
Background layer back on.
Since we're cleaning up I'm going to
| | 12:38 |
Delete, guideImage.jpeg out of the library.
| | 12:41 |
I'll also create a new folder to organize
all our new button symbols.
| | 12:46 |
So here's my new folder, and I'll call it buttonsAndParts.
| | 12:50 |
I'm going to drag all of the buttons we
just created, including the Exhibit Home
| | 12:54 |
button, into the folder.
I'll also drag in the paintingsThumbnails
| | 12:58 |
folder, since all of the thumbnails are,
parts of the buttons.
| | 13:02 |
There's one last thing, the Pink Skies
Button has a Drop Shadow, the others
| | 13:06 |
don't.
To quickly apply a Drop Shadow to all, I'm
| | 13:10 |
going to select the Pink Skies button in
the Property Inspector in the Filter's
| | 13:13 |
area.
Under the Options button I'm going to Copy
| | 13:18 |
All Filters.
Now I'll deselect Pink Skies.
| | 13:22 |
I'll hold down the Shift key so I can
multiple select the other buttons all at
| | 13:26 |
once, and then in the filters section
under options, I'm going to Paste Filters.
| | 13:31 |
Now they all magically have the Drop Shadow.
| | 13:33 |
I'm going to test my movie and hover over
each of the buttons to make sure they're
| | 13:36 |
working.
They are, and this looks great.
| | 13:40 |
Of course the buttons don't actually do
anything when you click on them, that
| | 13:42 |
requires Action Script and that's what
we'll work on next.
| | 13:46 |
But for now we've successfully applied the
creation of button symbols from scratch
| | 13:50 |
using Duplicate.
Good job.
| | 13:52 |
| | Collapse this transcript |
|
|
6. Understanding ActionScriptTimeline control| 00:00 |
ActionScript is one of the main ways you
can build interactivity into your Flash
| | 00:03 |
pieces.
Flash provides a tool called Code
| | 00:06 |
Snippets, that can write the code
necessary for commonly used actions.
| | 00:10 |
We'll use Code Snippets in this movie to
write our code.
| | 00:14 |
So, ActionScripts can be added to the
Timeline if the frame contains a key
| | 00:17 |
frame.
In our Bird Watching piece, we’ve already
| | 00:20 |
added one tiny piece of ActionScript code
on frame one of the Actions layer.
| | 00:25 |
It does have a key frame and you can tell
that there’s code attached to the key
| | 00:28 |
frame because of the little tiny A that
appears in the frame.
| | 00:32 |
It’s also kind of an unwritten practice
that your ActionScript layer is the
| | 00:36 |
topmost layer in your Timeline.
The code will still work if it's not, but
| | 00:41 |
following this rule of thumb makes it
easier for you and other developers to
| | 00:45 |
easily find where the ActionScript is located.
| | 00:49 |
If I select frame one and open the Actions
panel by choosing Window > Actions.
| | 00:54 |
Or just using the hot key of F9, we can
see the code.
| | 00:57 |
The stop action that we wrote here
instructs Flash that, when the play head
| | 01:01 |
reaches this frame, it should stop.
When I test the movie, that's indeed, what
| | 01:05 |
it does.
The play head stops on frame one.
| | 01:08 |
And we perpetually view the content on
this frame.
| | 01:11 |
While we can hover over and click on the
Preview the Collection buttons and the
| | 01:14 |
Exhibit Home button, nothing actually
happens when we click.
| | 01:19 |
Let's add the code necessary to do this.
To have ActionScript controlled items on
| | 01:23 |
the screen, like buttons or movie clips,
you have to give each item what's called
| | 01:27 |
an instance name.
The instance name is basically the hook
| | 01:31 |
ActionScript has into the visual elements
in your project.
| | 01:35 |
We have a total of six different buttons
on the Stage here.
| | 01:38 |
How's Flash supposed to differentiate
between them, and perform the correct
| | 01:41 |
action when each one's clicked?
The instance name is the key.
| | 01:45 |
Assigning instance names is easy.
Making sure my Buttons layer is unlocked,
| | 01:49 |
I'm going to click on the Pink Skies button.
| | 01:53 |
In the Property Inspector near the top,
the field to type in the instance name
| | 01:55 |
appears.
And I'll give this button an instance name
| | 01:59 |
of pinkskie_btn.
Note that instance names can be almost
| | 02:03 |
anything you want.
I used the _btn at the end of my instance
| | 02:07 |
name just to give a hint that the thing
we're naming is a button symbol.
| | 02:12 |
But that's not necessary, the biggest
guidelines to remember about instance
| | 02:15 |
names is that they shouldn't contain
characters like asterisks or question
| | 02:19 |
marks.
Underscore is okay, and so are letters and
| | 02:22 |
numbers.
However, an instance name should not start
| | 02:26 |
with a number.
For example, a name like button4 using the
| | 02:29 |
number four would be okay.
But, 4button would not.
| | 02:35 |
Instance name should also not contain any spaces.
| | 02:38 |
It's also good to come up with instance
names that are intuitive and descriptive.
| | 02:42 |
PinkSkies_btn, for example, does a better
job at telling us what the thing is
| | 02:46 |
supposed to do, as opposed to something
like item four.
| | 02:51 |
Anyway, I'll go onto the next button and
give it an instance name of
| | 02:53 |
BirdHighwire_btn.
The third button I'll call Waiting_btn.
| | 03:01 |
The next button I'll call Warning_btn.
And finally, the last button I'll call
| | 03:09 |
peacockbtn.
Don't forget the Exhibit Home button, I'll
| | 03:14 |
give that an instance name of ExhibitHome_btn.
| | 03:18 |
So, when someone clicks on the Pink Skies
button, what we want to happen is have the
| | 03:22 |
play head jump to, and then remain where
the detail content for the pink skies
| | 03:25 |
painting is.
That happens on frame ten.
| | 03:29 |
So, now that we know how we want the play
head to behave, let's get some code going.
| | 03:33 |
I'm going to move my play head back to
frame one, and then select the Pink Skies
| | 03:37 |
button, so Flash knows I want to insert
code that controls this item.
| | 03:42 |
Now, I'll go to the Window menu and choose
Code Snippets.
| | 03:45 |
The available Code Snippets are divided up
into folders depending on what they do.
| | 03:50 |
The code we want is in the Timeline
navigation folder, the one we're looking
| | 03:53 |
for is Click to Go to Frame and Stop, so
I'll double-click on that.
| | 03:58 |
When I do, Flash automatically inserts the
ActionScript for us on frame one and opens
| | 04:02 |
up the Actions panel, so we can see it.
Our stop action from before has been
| | 04:07 |
retained and is at the very top.
The new step's been inserted below it and
| | 04:11 |
I'll click once in the code to get rid of
the highlighting, so we can actually read
| | 04:15 |
it.
Now, all the stuff that's grayed out is
| | 04:18 |
Code Comments.
It's technically a multi-line comment
| | 04:21 |
because it covers everything that appears
between the opening forward slash and
| | 04:25 |
asterisk, and then the asterisk and
forward slash multiple lines further down.
| | 04:30 |
Code Comments are a great place where,
you, the developer, can write some notes
| | 04:34 |
and comments about what blocks of code do.
You could also give instructions to
| | 04:38 |
someone else here.
Using Code Comments is highly recommended.
| | 04:41 |
It can really help you remember what's
going on in your code when you haven't
| | 04:44 |
worked with a certain FLA in a while.
The Code Comments that Flash inserted also
| | 04:49 |
give us some instructions.
It tells us replace the number 5 in the
| | 04:53 |
code below with the frame number you would
like the play head to move to when the
| | 04:56 |
simple instance, the button is clicked.
That's easy enough.
| | 05:01 |
When someone clicks the Pink Skies button,
we want the play head to go to and stop
| | 05:05 |
frame ten, so I will replace the five with
a ten.
| | 05:09 |
Don't worry about understanding the syntax
and how the code is structured.
| | 05:12 |
What this code is actually saying is, hey
Flash, listen for when the Pink Skies
| | 05:17 |
button is clicked.
When it is run this function called
| | 05:22 |
fl_ClickToGoAndStopAtFrame.
That name is really a mouthful, we could
| | 05:27 |
change it if we wanted, but it's
descriptive, so I'll just leave it.
| | 05:31 |
Here is the actual
fl_ClickToGoToAndStopAtFrame function, and
| | 05:35 |
of course, this is what tells Flash to go
to and stop frame 10.
| | 05:39 |
It's pretty cool that Flash used the
correct instance name for the button in
| | 05:43 |
this code, that's because we had selected
the button on the Stage.
| | 05:47 |
Before we added the Code Snippet.
So, when I test my movie by pressing
| | 05:51 |
Ctrl+Enter and I click the Pink Skies
button, indeed the play head jumps to
| | 05:54 |
frame ten and stays there, so I can view
the content.
| | 05:59 |
So, I'm going to repeat this process again
for the next button.
| | 06:01 |
I'm going to close the Actions panel,
select the Bird Highwire button.
| | 06:05 |
Now, I'll go back to my Code Snippets and
double-click on Click to Go to Frame and
| | 06:09 |
Stop.
The Actions panel opens up again with the
| | 06:13 |
new code added in.
I'm going to delete this new set of Code
| | 06:16 |
Comments because it's exactly like the one above.
| | 06:20 |
But just to make things easier to read
down the line, I'm going to replace it
| | 06:23 |
with a single line comment.
You start a single line Code Comment with
| | 06:28 |
two forward slashes like this.
Everything else after it on this line
| | 06:32 |
appears in gray and is the comment.
I'll type in Bird on a Highwire button
| | 06:37 |
code.
This new block of code is a little
| | 06:39 |
different than the one at the top.
Hey, Flash, listen for when
| | 06:42 |
BirdHighwire_btn is clicked.
When it is, run this function,
| | 06:48 |
ClickToGoToAndStopAtFrame_2.
And then, here's the _2 function.
| | 06:54 |
I need to modify this function, so that
instead of go to and stop frame five, it
| | 06:58 |
goes to frame 20.
By now, you've seen how the code snippets
| | 07:02 |
work.
So, instead of going through the exact
| | 07:04 |
same process for the remaining buttons,
I'm going to highlight all the code that
| | 07:08 |
controls BirdHighwire_btn.
I'm going to make sure I've got that
| | 07:12 |
closing curly brace at the bottom, and
then I'll paste it below the existing code
| | 07:16 |
four more times.
If you need to expand the size of your
| | 07:20 |
Actions panel, so you can see all of the
code, go ahead and do that.
| | 07:24 |
You can also move this splitter bar here
so you have more room in the Actions
| | 07:27 |
panel.
So now, we need to modify this code, so it
| | 07:31 |
works for the remaining four buttons.
The first thing to change is the comments
| | 07:35 |
and then, of course, the instance names.
This block of code is going to be for the
| | 07:40 |
waiting painting, so I’m going to change
the comment.
| | 07:44 |
I’m also going to change the instance name.
| | 07:47 |
I’ll do it for the next button.
This one is for the Warning button, so
| | 07:51 |
I’ll change the Code Comment, and also the
instance name.
| | 07:55 |
This one is for the Peacock button, and
this one's for the Exhibit Home button.
| | 08:01 |
The thing to be careful about here is to
make sure that the instance names you type
| | 08:04 |
matched the instance names you assigned
earlier to the buttons on the Stage.
| | 08:09 |
The names have to match exactly, nothing
can be different.
| | 08:13 |
Incorrect capitalization, spelling, extra spaces.
| | 08:16 |
Any of that will cause your code to break.
The next thing to change is the function
| | 08:20 |
names.
Now, this line of code for the waiting
| | 08:23 |
button says when the button is clicked,
run the function called
| | 08:26 |
fl_ClickToGoToAndStopAtFrame_2.
Well, that's not right.
| | 08:31 |
That's the function name that the above
block of code uses.
| | 08:34 |
So, I'll change the name of this to fl_ClToGoToAndStopAtFrame_3.
| | 08:39 |
Notice, I have to change it into places.
Right here, where the function is called,
| | 08:43 |
and then in the actual function definition itself.
| | 08:46 |
For the Warning button, I'm going to have
to change the 2 to a 4 in two places.
| | 08:51 |
Where the Peacock button we'll have to
change 2 to 5 in two places.
| | 08:55 |
And, for the Exhibit Home button, we'll
have to change the 2 to a 6 in two places.
| | 09:00 |
And we're almost done.
The last thing that we have to change is
| | 09:04 |
what frame we want the play head to go to
and stop at.
| | 09:07 |
So, we've already got frame 10 and frame 20.
| | 09:10 |
For the Waiting button, we want to go to
and stop frame 30.
| | 09:14 |
For the Warning button, go to and stop
frame 40.
| | 09:17 |
For the Peacock button go to and stop
frame 50.
| | 09:20 |
For the Exhibit Home button, we want the
play head to return back to the beginning
| | 09:24 |
of the movie, so we can see the intro.
So, frame one would be the logical choice
| | 09:29 |
here.
It's up to you if you think copying and
| | 09:32 |
pasting the code is easier, or if using
the Code Snippets tool every time is
| | 09:35 |
easier.
Whatever works for you is fine as long as
| | 09:38 |
you end up with ActionScript to control
each of the individual buttons.
| | 09:43 |
At this point, I'm going to test my movie.
We already know that Pink Skies works, so
| | 09:47 |
I'll click on the next button.
That works, so does Exhibit Home, Waiting
| | 09:52 |
works.
Warning works and The Peacock works.
| | 09:57 |
If you're satisfied with your project so
far, congratulations.
| | 10:00 |
If yours isn't working, it's probably
because of an ActionScript error.
| | 10:04 |
I'm going to open my code and mess up
something on purpose to maybe help you
| | 10:07 |
troubleshoot.
Back in my code, I'm going to change the
| | 10:12 |
name of Peacock_btn to Peacock_btn1.
Now, when I test the movie, the SWF goes
| | 10:17 |
crazy.
I'll close the SWF, so it doesn't drive us
| | 10:20 |
nuts, but I can see in this panel called
the Output panel that there's an
| | 10:23 |
ActionScript error, it's very helpful.
It tells me that on the layer actions on
| | 10:28 |
frame 1, on line 42, I've got access of
undefined property Peacock_btn1.
| | 10:33 |
Well, yeah, of course that's giving us an error.
| | 10:37 |
The code is looking for Peacock_btn1.
But when I move my Actions panel out of
| | 10:43 |
the way and click on the actual Peacock
button, of course, the instance name is
| | 10:47 |
Peacock_btn.
So, if you're getting ActionScript errors,
| | 10:52 |
checking to make sure that each of your
buttons first of all have instance names
| | 10:55 |
is a good place to start.
Then, check to make sure that the instance
| | 10:59 |
names match what's typed in the code exactly.
| | 11:02 |
I'm going to go back into my code and
change Peacock_btn1.
| | 11:07 |
To remove the one.
Other things that you could check if your
| | 11:10 |
still getting errors are to make sure that
you have unique function names for each
| | 11:14 |
block of code.
And also, to make sure that you are
| | 11:17 |
sending the play head to the correct frame
in each block of code.
| | 11:21 |
So, regardless of how you get your
ActionScript written, remember that
| | 11:24 |
ActionScript is required to make visual
elements like buttons react to what the
| | 11:27 |
user's doing.
Instance names, as you've seen, are also
| | 11:32 |
key.
Without an instance name, flash doesn't
| | 11:34 |
know what visual element on the screen
you're trying to write code for.
| | 11:38 |
| | Collapse this transcript |
| Linking to an external URL| 00:00 |
In our bird watching project, it would
make a lot of sense to have the Samoca
| | 00:04 |
logo be clickable.
A user cold click on it and be taken to
| | 00:07 |
the webpage with more information about
the museum its location hours and so on.
| | 00:13 |
Wanting to make links out to an external
URL is a pretty common thing to want to do
| | 00:17 |
so Flash has a code snippet for it.
We'll practice using that now with the
| | 00:21 |
Samoca logo.
The logo is in a layer by itself called
| | 00:25 |
Samoca.
It's in the BG folder on the timeline.
| | 00:29 |
So I'll open the folder, right click, and
choose Lock others, so it's the only
| | 00:32 |
unlocked layer.
Clicking on the logo and looking in the
| | 00:36 |
Property Inspector, we see that it's a group.
| | 00:39 |
If you were to double click on the logo
and drill down further into it, you see
| | 00:42 |
that it's a group of different shapes that
we brought into our project earlier from
| | 00:45 |
an illustrator file.
Well, you can't make a group clickable, a
| | 00:49 |
visual element has to be either a movie
clip symbol or a button symbol in order to
| | 00:52 |
make it clickable.
So I'm going to click scene one to go back
| | 00:57 |
to the main timeline.
Making sure that the Samoca logo is still
| | 01:01 |
selected, I'll right-click and choose
Convert To Symbol.
| | 01:05 |
Let's give it a name of logo Samoca.
In the type drop-down, I'll make sure this
| | 01:09 |
is a movie clip.
Our newly created movie clip is now left
| | 01:12 |
selected on the screen.
To make it clickable, remember that we
| | 01:16 |
need to give it an instance name, so Flash
has a way to identify what thing on the
| | 01:19 |
stage we're talking about.
In the Property Inspector, I'll give the
| | 01:24 |
logo movie clip an instance name of Samoca.
| | 01:27 |
All we have to do now is find the right
code snippet to make this clippable.
| | 01:31 |
So I'm going to make sure the Samoca logo
is still selected.
| | 01:34 |
It is and then go to the Window menu then
Code Snippets.
| | 01:38 |
The code snippet we need is the folder
called Actions.
| | 01:40 |
It's actually the first one in the folder,
called Click to Go to Webpage.
| | 01:45 |
I'll double-click on that and Flash will
insert the code for me as well as open up
| | 01:48 |
the Actions panel so I can see it.
It has added the code underneath the
| | 01:52 |
already existing code that we have on
frame one in the actions layer, so that's
| | 01:56 |
convenient.
The code comments instruct us that we need
| | 02:01 |
to replace www.adobe.com with the desired
URL address...
| | 02:06 |
But keep the quotation marks.
That's easy enough.
| | 02:09 |
I'll replace adobe.com with art.samoca.org.
| | 02:10 |
And that's it.
The code's saying, hey Flash, listen for
| | 02:14 |
when the thing on the stage called Samoca
is clicked.
| | 02:19 |
When it is, run the function called ClickToGoToWebpage.
| | 02:23 |
ClickToGoToWebPage does this thing called
new URL request, opening up art.samoca.org
| | 02:28 |
in a blank browser window.
I'll close the Actions panel as well as
| | 02:33 |
the Code Snippets panel and try this out.
In the SWF file, I'll click on the Samoca
| | 02:38 |
logo and after a few seconds,
art.samoca.org opens up in a new window.
| | 02:43 |
So this looks great but there’s only one
catch that I want to point out.
| | 02:47 |
Back in the SWF, if I click on any area of
the white area of the logo, nothing
| | 02:50 |
happens.
A new browser window only opens if I click
| | 02:54 |
on a part of the logo that’s blue.
It’s a subtle thing, but Flash is
| | 02:57 |
differentiating between the blue shapes
and the negative white space.
| | 03:02 |
It's easy enough to fix.
I'll close the SWF, and back in the FLA,
| | 03:05 |
double-click on the Samoca movie clip to
enter it's timeline.
| | 03:08 |
Currently, the group of shapes that makes
up the logo is on layer one.
| | 03:12 |
I'm going to lock that layer.
Now, I'll create a new layer and put it
| | 03:15 |
underneath Layer 1.
I'll give it a name of Background, just so
| | 03:18 |
we know what's on it.
Now, I'll grab my rectangle tool, choose
| | 03:22 |
No Stroke and a white fill and just draw a
white rectangle behind the blue logo.
| | 03:28 |
I'll highlight it so you can see it.
Now, I'll test the movie again and now
| | 03:31 |
when I click on some of the white in
between blue and the logo the Samoca
| | 03:34 |
website opens up in a new browser just fine.
| | 03:38 |
So back in the FLA, I'll click Scene 1 to
go back up to the main timeline, then lock
| | 03:42 |
the Samoca layer again.
So linking out to an external URL is a
| | 03:47 |
pretty simple deal in Flash, thanks to
code snippets.
| | 03:51 |
The things to remember are that only movie
clip symbols or button clip symbols can be
| | 03:54 |
clickable.
You might also really want to double check
| | 03:58 |
all parts of the thing you're wanting to
make clickable, just to make sure that
| | 04:01 |
there are no holes.
| | 04:03 |
| | Collapse this transcript |
|
|
7. Understanding Tweening in Flash ProfessionalDefining 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 imagine
| | 00:11 |
the character in another pose with their
arms down.
| | 00:15 |
Senior animators would draw those main
frames, which you can think of like
| | 00:18 |
keyframes.
The the junior animator would then draw in
| | 00:21 |
all the in between frames.
When the frames were played in quick
| | 00:24 |
succession, it looks like the character
was moving.
| | 00:27 |
In flash, what you as the developer do is
define the key frames, Flash takes care of
| | 00:32 |
the in betweening for you.
To practice with motion tweening, I'll
| | 00:36 |
open up a new, blank FLA document.
I'll select the Oval tool and set the fill
| | 00:41 |
to be Gradient blue with no stroke.
Now I'll draw an oval on the stage.
| | 00:46 |
To motion tween something on the stage, it
has to either be a movie clip or a graphic
| | 00:49 |
symbol.
So I'll use my Arrow tool to select the
| | 00:53 |
circle and then press F8.
I'll give the new symbol the name of Ball
| | 00:57 |
and to make sure that movie clip is
selected in the Type drop-down.
| | 01:01 |
The workflow you need to use when making a
motion tween, is to tell Flash how you
| | 01:05 |
want the tween to start.
Apply the motion tween and then tell Flash
| | 01:09 |
how you want it to end.
So we'll start by telling Flash how we
| | 01:12 |
want the animation to start.
We'll have our ball move from left to
| | 01:16 |
right.
So I'll just move the ball over to the
| | 01:18 |
left side of the stage.
The next step is to apply the Motion
| | 01:21 |
Tween.
However, our movie's only one frame long.
| | 01:25 |
Animation, by definition, happens over time.
| | 01:27 |
So we need to extend our Timeline out.
I'll click on the stage, and look in the
| | 01:31 |
Property Inspector.
We're at the Flash default of 24 frames
| | 01:34 |
per second.
Let's go for a one second animation.
| | 01:38 |
So let's extend our timeline out to 24
frames by selecting Frame 24 in the layer
| | 01:43 |
and then hitting F5.
So we've added some frames, and now we can
| | 01:48 |
apply the Motion Tween.
I'll select any of the 24 frames.
| | 01:52 |
It doesn't matter which one.
The tween will be applied across all of
| | 01:55 |
them.
Now I'll go to the Insert menu and choose
| | 01:58 |
Motion Tween.
You can also right-click on the frame and
| | 02:02 |
choose Create Motion Tween.
You'll see that the Frame span now turns
| | 02:06 |
blue, which is the indication it's a
Motion Tween span.
| | 02:10 |
I'll scrub the timelines across the frames
and of course the ball doesn't do
| | 02:13 |
anything.
We've told Flash where we want it to start
| | 02:16 |
and applied the tween, but we haven't told
it where we want it to end.
| | 02:20 |
So I'll move the playhead to Frame 24, and
then I'll move the ball over to the right
| | 02:23 |
hand side of the stage.
You'll notice two things.
| | 02:27 |
First, a blue line across the stage that
indicates the path the ball will take.
| | 02:32 |
Secondly, there's a new little diamond on
Frame 24 in the Timeline.
| | 02:37 |
Flash creates that ending keyframe for you
automatically when you define the end
| | 02:40 |
state of the tween.
So I'll go ahead and test the movie to see
| | 02:43 |
the result.
And indeed the ball moves from left to
| | 02:47 |
right and plays over and over as the
playhead runs out of frames on 24 and then
| | 02:50 |
starts back over again at Frame 1.
So I'm going to close this SWF.
| | 02:56 |
Now, let's say we want to change the
position of the ball a little bit on Frame
| | 02:59 |
24.
That's no problem.
| | 03:02 |
Just make sure your play head is on Frame
24 and then move the ball.
| | 03:06 |
The path of the Motion Tween is updated
accordingly and I'll go ahead and test to
| | 03:09 |
see the effect.
Now, I'd like to point something out.
| | 03:13 |
In Flash, I'm going to right click
anywhere in the Tween Span on the Timeline
| | 03:16 |
and choose Remove Motion.
The blue color goes away and the ball is
| | 03:20 |
just at the position to find in the
keyframe on Frame 1.
| | 03:24 |
So remember how then we made the tween and
had said move the playhead to Frame 24y
| | 03:28 |
four before moving the ball to the right
hand side of the stage.
| | 03:33 |
Well that's important and it'll show you why.
| | 03:35 |
I'm going to right click in the middle of
the Tween Span at Frame 10 and create a
| | 03:39 |
Motion Tween and twieens apply.
You can tell because the Timeline is
| | 03:43 |
turning blue.
And this time, I'll just leave the
| | 03:46 |
playhead where it is on Frame 10 and move
the ball to the right hand side of the
| | 03:49 |
stage.
See how the keyframe indicating the end of
| | 03:53 |
the tween now appears on Frame 10.
I'll test the movie and see the result.
| | 03:58 |
The ball moves all right, but it's faster
since it does it's motion in only 10
| | 04:02 |
frames.
It also hangs out on the right side of the
| | 04:05 |
screen for just a moment before starting over.
| | 04:08 |
That makes sense.
The ending keyframe is at Frame 10 and
| | 04:11 |
then the ball stays in the same position
until Frame 24.
| | 04:15 |
So remember, our workflow is to tell Flash
how you want to start, apply the motion
| | 04:18 |
tween, and then tell it where you want it
to end.
| | 04:22 |
But be careful where your play head is
when you define the end.
| | 04:25 |
Let's expand on all this a little bit more.
| | 04:27 |
I'm going to move the play head to Frame 24.
| | 04:30 |
But these frames are still Motion Tween
frames so there's no reason we can't make
| | 04:33 |
the ball move back to the left side of the screen.
| | 04:37 |
I'll move the ball to the left side of the
stage and notice the new keyframe that's
| | 04:40 |
added to Frame 24.
I'll test the movie and, cool, the ball is
| | 04:44 |
bouncing back and forth.
I'll close the Preview.
| | 04:47 |
So we've been a little bit clever here by
having the center keyframe act as an
| | 04:51 |
ending keyframe and a starting keyframe.
You probably noticed that the ball's
| | 04:56 |
bouncing was a little uneven.
It's going to the right over the course of
| | 05:00 |
ten frames, but going back to the left
over the course of 14.
| | 05:03 |
I'll fix this by selecting the Middle
keyframe and moving it over to Frame 12.
| | 05:07 |
To grab just that keyframe I have to hold
down the Ctrl key on the keyboard.
| | 05:13 |
Once its selected now I can release the
key and Click and Drag.
| | 05:17 |
Now I'll test again and the bouncing is
more even.
| | 05:20 |
What if you've made a tween too long?
Well, you can simply approach one of the
| | 05:24 |
ends, wait for the double headed arrow and
Click and Drag to shrink.
| | 05:28 |
I'll try this now by making my tween only
12 frames long.
| | 05:31 |
The keyframe in the middle is still at the
same relative spot.
| | 05:35 |
Let's test again and now we have a very
fast bouncing ball.
| | 05:39 |
Now finally, what happens if you create a
tween but later figure out that you just
| | 05:42 |
want it to appear later or earlier on the timeline?
| | 05:46 |
Well, that's easy enough.
I'll click on Frame 1, then hold down the
| | 05:49 |
shift key on the keyboard so I can
multiple select.
| | 05:52 |
And now I'll click on frame 12 to get the
whole tween span.
| | 05:55 |
Now, I'll simply Click and Drag down the
timeline, so the tween starts at Frame 24.
| | 06:00 |
I'll test again, and we see 24 frames of
nothing and then 12 frames of a fast
| | 06:04 |
moving bouncing ball.
We're starting to get a little spastic
| | 06:08 |
with the bouncing ball here, so I'll close
the FLA.
| | 06:12 |
There's no need to save unless you want to.
| | 06:14 |
So now you've seen how to create Motion Tweens.
| | 06:17 |
Once again, the basic workflow is to tell
Flash how you want it to start, apply the
| | 06:21 |
Motion Tween, and then tell Flash how you
want it to end.
| | 06:26 |
| | Collapse this transcript |
| Combining motion tweens and ActionScript| 00:00 |
Let's apply what we've learned about how
to create Motion Tweens, to our Bird
| | 00:03 |
Watching project.
I'll test the movie quickly.
| | 00:07 |
When we click on any of the preview, the
Content Buttons, the Detail Content for
| | 00:10 |
the selected painting, just appears on the stage.
| | 00:13 |
Let's instead have that content fade in.
A Motion Tween can be used to animate more
| | 00:17 |
than just the position of something.
It can be used to animate things like
| | 00:22 |
Alpha, or Opacity, Size, Rotation, and more.
| | 00:26 |
Remember that Motion Tweens can be applied
to movie clips and graphics symbols.
| | 00:30 |
I'm going to unlock the Content layer,
which contains all the movie clips with
| | 00:33 |
the detail content about each individual painting.
| | 00:38 |
I'll move the play head to Frame 10 and
start with the pink skies content movie
| | 00:41 |
clip.
So, remember our work flow.
| | 00:44 |
We have to tell Flash how we want the
tween to start, apply the Motion Tween and
| | 00:47 |
then tell Flash how we want it to end.
I want the movie clip to start out
| | 00:51 |
completely transparent.
So, I'll select the movie clip and then
| | 00:55 |
the Property Inspector in the Color Effect
area which is right here.
| | 00:59 |
In this drop-down next to Style I'm
going to choose Alpha.
| | 01:03 |
I'm going to move the slider, down, to 0.
Now the movie clip is completely
| | 01:07 |
transparent.
So now I'm going to, apply the Motion
| | 01:10 |
Tween, by right-clicking anywhere between
frames, 10 and 19, and choosing, Create
| | 01:15 |
Motion Tween.
Now all that's left is to Flash how we
| | 01:18 |
want it to end.
So I'll move the playhead, to the last
| | 01:21 |
frame the movie appears on, Frame 19.
Now I'll click the invisible movie clip
| | 01:26 |
again to select it and turn the Alpha
slider up to 100.
| | 01:31 |
I'll scrub the Timeline to do the effect.
It looks good.
| | 01:34 |
That Motion Tween is complete, so we just
have to do this again for the other four
| | 01:38 |
content movie clips.
So it's scrubbing my playhead down the
| | 01:42 |
Timeline.
It look like all of the tweens are working
| | 01:44 |
well.
Let's test it out.
| | 01:47 |
And when I click any of the buttons, oh,
it looks like something's wrong.
| | 01:51 |
We don't see the fading in effect.
Trying any of the buttons in fact we don't
| | 01:55 |
see any of the painting detail content at all.
| | 01:58 |
There is a reason, remember in our
ActionScript on Frame 1.
| | 02:02 |
When someone clicks on a button, we tell
them to go to and stop on a particular key
| | 02:06 |
frame.
For instance, clicking on on the pink
| | 02:09 |
skies tells the play head to go to and
stop frame 10.While moving the playhead to
| | 02:12 |
play 10.
The pink skies movie content is there, its
| | 02:16 |
just at the start of its fade in tween
where it is completely faded out.
| | 02:21 |
So what we need to do is change our Action
Script so that instead of go to and stop
| | 02:25 |
we tell the play head to go to and play.
Here in the code for he pink skies button
| | 02:30 |
I'll change the go to and stoop to go to
and play, and yes.
| | 02:34 |
The play has to has to have a capital P.
Now the play head will jump to Frame 10.
| | 02:38 |
And then keep on playing down the timeline.
| | 02:40 |
So we'll see the fade in effect that we
just built.
| | 02:43 |
So, we'll have to change go to and stop,
to go to and play for all of the Painting
| | 02:46 |
buttons.
So, I'll do that now.
| | 02:49 |
Just be sure to leave the code for the
exhibit Home button and the Samoca logo
| | 02:53 |
button alone.
Those don't need any changes.
| | 02:56 |
Now, I'll test again.
This time when I click on Pink Skies, I
| | 02:59 |
see the fade in effect.
And the movie still acts like it's broken.
| | 03:04 |
In fact, when I click on any of the
buttons we see the initial fade and
| | 03:07 |
effect, but then we see the other detail
content pieces fading in and out.
| | 03:13 |
What's going on here?
Lets go back to the FLA.
| | 03:16 |
We just told Flash to have the playhead go
to and play.
| | 03:19 |
That means it goes to say frame ten, and
does exactly what we told it to, play.
| | 03:24 |
It just keeps on running down the Timeline
until it gets to the very end and runs out
| | 03:28 |
of frames and then it jumps back to frame one.
| | 03:32 |
Remember on frame one, we have a stop
action so the playhead stops there until
| | 03:36 |
we click another button.
So maybe you have an idea of what we need
| | 03:40 |
to do to the timeline to get this to
behave like we want once and for all.
| | 03:45 |
We need additional stop actions on the
time line at frames 19, 29, 39, 49, and
| | 03:49 |
59.
Basically, all of the different points
| | 03:53 |
where our content detail movie clip has
faded in, and we want to user to actually
| | 03:57 |
be able to read it.
So let's do it.
| | 04:02 |
On the actions layer, I'm going to right
click and add a blank keyframe on frames
| | 04:05 |
19, 29, 39, 49, and 59.
Now I'll click on Frame 19 and open the
| | 04:11 |
Actions panel.
This is a blank keyframe, so we don't see
| | 04:16 |
the code that we wrote before here.
I'll type in Stop and remember it has to
| | 04:20 |
have the opening parenthesis, the closing
parenthesis and the semicolon.
| | 04:24 |
Exact capitalization and syntax are
important with Action Script.
| | 04:30 |
So, I'm going to Copy that little bit of code.
| | 04:32 |
So, now I can click on the keyframe on
Frame 29 and Paste it here too.
| | 04:36 |
I'll do the same thing for Frame 39, and
49 and 59 as well.
| | 04:41 |
I'll close the Actions panel and click
somewhere on the Paste Board to deselect.
| | 04:47 |
Notice the tiny little letter a that now
appears on all the frames where we just
| | 04:50 |
added code.
That's just a visual indicator to us that
| | 04:54 |
there's code attached to each one of those keyframes.
| | 04:57 |
Finally I'll test again.
This time everything should work as
| | 05:00 |
planned.
And indeed clicking on any of the Preview,
| | 05:03 |
the collection buttons result in the playhead.
| | 05:06 |
Jumping to the appropriate keyframe,
playing on down the Timeline to show in
| | 05:09 |
the fade and affect and then stops.
And our fade ins look good, I'll close the
| | 05:14 |
SWF and finally Lock the Content layer.
So we really capitalized on that basic
| | 05:18 |
workflow of telling Flash how you want a
motion tween to start applying the tween.
| | 05:24 |
And then telling Flash how you want it to end.
| | 05:26 |
You've now seen how Motion Tween can be
used, not only to affect a basic motion,
| | 05:30 |
but other attributes as well, like
Opacity.
| | 05:33 |
| | 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:03 |
their effects more complex.
To survey some of these, I've opened the
| | 00:07 |
file called tweening.fla in the
ExerciseFiles for this chapter.
| | 00:12 |
The file only has a single layer with an
instance of a lady driving a red car on
| | 00:15 |
the screen.
I'll open the Library and you'll see that
| | 00:19 |
we have two Graphic symbols.
One, of course, is the lady in the car and
| | 00:23 |
the second is a rocket.
The movie is 48 frames long.
| | 00:27 |
If I click on the Stage and open the
Property Inspector, we see our frames per
| | 00:30 |
second is 24.
So, our movie is two seconds long.
| | 00:34 |
Let's start by reviewing how to create a
simple motion tween with the car on the
| | 00:38 |
Stage.
Remember, our motion tween workflow of
| | 00:41 |
telling Flash how you want the tween to
start, applying the motion tween, and then
| | 00:44 |
telling Flash how you want it to end.
Where the car is now is fine for the start
| | 00:49 |
position.
So, I'll right-click anywhere in the
| | 00:52 |
frames and choose Create Motion Tween.
Now, I'll move the play head to frame 48
| | 00:56 |
and move the car over to the right hand
side of the screen.
| | 01:00 |
I'll test the movie just once to see the
effect and it's pretty simple, so now that
| | 01:04 |
we've seen it, I'll go ahead and close the
SWF and make sure the play head is back on
| | 01:08 |
frame 48.
Now, I'll select the car.
| | 01:12 |
I'm going to now press Q on the keyboard
to bring up the free transform handles.
| | 01:16 |
Now, I'm going to scale the size of the
car up.
| | 01:19 |
I'll also move it off Stage, so she drives
away as she gets bigger.
| | 01:24 |
Now, I'll test the movie.
And as the car moves, it grows at the same
| | 01:27 |
time.
So, motion tweening tweens more than just
| | 01:30 |
position.
You can also tween alpha, like we did
| | 01:33 |
earlier in the course, rotation, and
scale, like we did here.
| | 01:38 |
I'm going to click Ctrl+Z a few times, so
we're back to having just the simple
| | 01:41 |
motion tween of the car moving from left
to right, no scaling and no driving off
| | 01:44 |
the Stage.
Our next technique has to do with easing.
| | 01:49 |
Easing effects how fast or slow an object
is moving at the start and end of its
| | 01:54 |
motion.
To change easing, I'll click once on the
| | 01:58 |
little line on the stage that indicates
the path of the car.
| | 02:02 |
Notice how the Property Inspector changes
to tell us information about the motion
| | 02:05 |
path itself.
Under the ease section, I’ll click and
| | 02:09 |
drag on top of the zero to the right.
I’m going to make the Ease 100.
| | 02:13 |
You could just also type it in.
I’ll test the movie to see the effect.
| | 02:18 |
The car starts off faster and slows down
near the end of the motion tween, giving
| | 02:21 |
it a pretty realistic effect of coming to
a smooth stop.
| | 02:26 |
I'll close the Preview and now change the
Ease to negative 100.
| | 02:29 |
When I test, you'll see the opposite
effect applied.
| | 02:32 |
The car starts out slow and speeds up as
it drives.
| | 02:35 |
I'll close the SWF and change the Ease
back to zero.
| | 02:39 |
Remember that is you don’t see those
options, just reselect the path on the
| | 02:42 |
Stage.
Now, in the rotate area, I’m going to type
| | 02:46 |
in 2.
Notice the direction drop down has
| | 02:49 |
defaulted to CW for clockwise.
But if you open it up, you’ll see that
| | 02:53 |
CCW, or counter-clockwise, is also a choice.
| | 02:56 |
I’ll test the movie to see this crazy effect.
| | 02:59 |
That’s pretty wild.
I'll close the SWF, and change the
| | 03:02 |
rotation back to zero.
So now, let's review a topic from earlier
| | 03:05 |
in the course, which is how to change the
ending position of a motion tween.
| | 03:09 |
I'm going to make sure my play head's
still on frame 48, and now click on the
| | 03:13 |
car.
I'll just move it up, so the net effect is
| | 03:16 |
the car moving from the lower left of the
Stage to the upper right.
| | 03:20 |
Remember that you can change the starting
and ending position of a motion tween at
| | 03:24 |
any time.
You just have to move the play head to the
| | 03:27 |
frame in question, and then select and
move the graphic.
| | 03:30 |
Now, I'll click on a blank spot on the
Stage to deselect, and for the next
| | 03:34 |
technique, I'll approach the motion path
with the mouse.
| | 03:38 |
You'll see a curved line appear next to
the arrow when I get close to the path.
| | 03:42 |
And I'll click and drag and you can see
that you can actually curve the path.
| | 03:46 |
I'll test to see this effect which
probably looks just as silly as you
| | 03:49 |
anticipated since this an unnatural
movement for a car.
| | 03:54 |
There's one other handy dandy technique to
show you, one that we've actually used.
| | 03:59 |
What if instead of a levitating car, you
want a flying rocket.
| | 04:02 |
Back in the FLA, I'll click on the car.
It doesn't matter what frame the play
| | 04:06 |
head's on.
Flash knows you're talking about the car
| | 04:09 |
during the entire motion tween.
Notice how the whole tween span is
| | 04:12 |
highlighted in the Timeline.
In the Property Inspector near the top,
| | 04:16 |
I'm going to click the button that says Swap.
| | 04:18 |
I'll select the rocket, and click OK to
swap it out with the car.
| | 04:23 |
Now, I'll scrub the Timeline to see the effect.
| | 04:26 |
Now, a rocket could conceivably follow a
path like this in real life.
| | 04:29 |
But it would be even more realistic if the
nose of the rocket pointed in the
| | 04:32 |
direction of the movement.
We can fix this by clicking once again on
| | 04:37 |
the blue motion path.
In the Property Inspector, I'm going to
| | 04:40 |
find and click the little box that says
orient to path.
| | 04:44 |
Now, when I test the movie, you'll see
that the rocket moves in a natural way.
| | 04:48 |
Back in the FLA, notice the motion tween
in the Timeline is now a succession of key
| | 04:52 |
frames.
Flash has added in a key frame on each
| | 04:56 |
frame to account for the unique position
and rotation of the rocket on each one.
| | 05:02 |
Imagine how much time that would take you
to do frame by frame by hand.
| | 05:06 |
So, that's the end of our motion tweening
tips and tricks.
| | 05:09 |
I hope you'll find some of them useful in
your future animation projects.
| | 05:13 |
| | Collapse this transcript |
| Defining shape tweens| 00:00 |
Shape tweens do exactly what their name implies.
| | 00:03 |
They allow you to tween from one shape
into another.
| | 00:06 |
Unlike Motion Tweens which require you use
a symbol like a movie clip or a graphic
| | 00:10 |
symbol.
Shape Tweens really stick to their name in
| | 00:13 |
that all you need is a shape, just a blob
of color on the stage.
| | 00:18 |
To practice with shape tweens, I'll start
a blank FLA in Flash.
| | 00:22 |
The work flow for shape tween is a little
different from that of your Motion Tweens.
| | 00:26 |
For emotion tween you tell flash how you
want it to start, apply the Motion Tween
| | 00:29 |
and then tell it how you want it to end.
For a Shaped Tween, you first tell Flash
| | 00:35 |
how you want it to start with a keyframe
and then tell Flash how you want it to end
| | 00:38 |
with another keyframe.
And then apply the Shape Tween last.
| | 00:43 |
So let's practice.
I'll choose the Oval tool from the toolbar
| | 00:46 |
and set the Fill Color to be blue with No Stroke.
| | 00:49 |
I'm also going to be sure that I'm using
Merge Drawing mode.
| | 00:53 |
You can tell you're in Merge Drawing mode
when this little icon here at the bottom
| | 00:56 |
is the lighter gray color as opposed to
the darker gray color.
| | 01:01 |
I'll go ahead and draw a circle on the stage.
| | 01:03 |
We've told Flash how we want it to start
so now we have to tell Flash how we want
| | 01:07 |
it to end.
So I'll right-click on Frame 24 and choose
| | 01:11 |
Insert Keyframe.
Now I'll change from the Oval tool to the
| | 01:15 |
Rectangle tool and draw a rectangle over
the oval.
| | 01:19 |
Since we're in Merge Drawing mode, and the
rectangle is the same color as the oval,
| | 01:23 |
the two will fuse together and we end up
with just the rectangle on Frame 24.
| | 01:28 |
So our last step is to apply the Shape Tween.
| | 01:31 |
To do this, I'll get my arrow tool and
then right click anywhere before Frame 24
| | 01:35 |
on the timeline, then choose Create Shape Tween.
| | 01:39 |
The frames turn to a light green color
with a little arrow pointing from Frame 1
| | 01:43 |
to 24 along the way.
I'll test the movie to see how the circle
| | 01:47 |
morphs into a square.
I'll close the SWF file.
| | 01:54 |
Now you can do more with Shape Tweens than
just change the shape.
| | 01:58 |
You can change the content of either of
the keyframes to further modify it.
| | 02:01 |
So I'm going to move my playhead to Frame
24, select my rectangle, then change the
| | 02:05 |
fill to green.
I am also looking to grab my Free
| | 02:08 |
Transform tool from the toolbar and scale
my rectangle up so its bigger.
| | 02:13 |
Now when I test my movie the shape is
changing as well as the color and size,
| | 02:17 |
back in the FLA I'll select my Arrow tool.
And move the big green rectangle over to
| | 02:22 |
the right side of the stage, when I test
again, you will see the tween has updated
| | 02:26 |
accordingly.
The morphing circle is also moving to the
| | 02:30 |
right as it turns into a rectangle and
changes color and scale.
| | 02:35 |
So, you can see that in one way, Shape
Tweening can do what Motion Tweens can do.
| | 02:39 |
At least when it comes to making an object
look like it's moving across the stage.
| | 02:44 |
We won't be using Shape Tweening in our
BirdWatching project.
| | 02:47 |
But for now, we've seen how you can use
shape tweening to change a shape's Shape,
| | 02:51 |
Color, Size, and even Position.
The thing to remember about Shape Tweening
| | 02:56 |
is that you must be working with a shape.
No grouped objects, and no symbols.
| | 03:01 |
The world flow once again is to tell Flash
how you want it to start.
| | 03:05 |
Tell Flash how you want it to end, and
then apply the Shape Tweening.
| | 03:09 |
| | Collapse this transcript |
| Nesting timelines| 00:00 |
By now, we've seen how Movie Clip symbols,
Graphic symbols, and button symbols each
| | 00:03 |
have their own timeline.
Those nested symbol timelines can hold
| | 00:08 |
animation, which we can use to our
advantage to create more detail in our
| | 00:11 |
animation.
Let's try using nestedTimelines to animate
| | 00:15 |
this monkey.
The monkey is a movie clip.
| | 00:18 |
I'm going to double-click to enter the
monkey's timeline.
| | 00:21 |
You'll notice that the top left of the
screen says scene one, and then monkey
| | 00:25 |
since we've stepped into the monkey's timeline.
| | 00:29 |
So, this timeline has three layers.
One that contains the right arm, one that
| | 00:31 |
contains the body and the head and then,
of course, the left arm.
| | 00:35 |
Let's animate the arms, so they lift up
over the course of 24 frames.
| | 00:40 |
So, we'll need to extend the timeline out
to 24 frames.
| | 00:42 |
I'll select frame 24 on the top layer,
hold down the Shift key and select 24 on
| | 00:47 |
the bottom layer, and then hit F5 to
extend our frames.
| | 00:52 |
To animate the monkey's right arm, I'll
right-click anywhere in the frames on the
| | 00:56 |
right arm layer, and choose Create Motion Tween.
| | 00:59 |
We've told Flash where we want the tween
to start, and applied the motion tween, so
| | 01:03 |
now, I'll tell Flash how I want it to end,
by moving the play head to frame 24.
| | 01:08 |
Making sure the monkey's arm is selected,
I'll hit Q on the keyboard to bring up the
| | 01:11 |
Free Transform tools.
I'll rotate his arm up and that's how I
| | 01:15 |
want his arm to end.
I'll do the same thing for the left arm.
| | 01:19 |
I'll right-click and choose Create Motion Tween.
| | 01:22 |
I'll move to frame 24 and rotate the arm up.
| | 01:25 |
So, I'll grab my Arrow tool and scrub the
Timeline and you can see the effect.
| | 01:30 |
I'm going to click back to scene 1, so we
go back to the main timeline.
| | 01:34 |
Notice the main timeline only has one
frame, but of course, we just animated the
| | 01:37 |
frames on the nestedTimeline over the
course of 24 frames.
| | 01:42 |
That's part of the power of nestedTimelines.
| | 01:44 |
A nested animation can play at the same
time, yet independently of the main
| | 01:48 |
timeline.
Even though the main timeline has one
| | 01:52 |
frame, the nested animation plays its 24
frames, regardless.
| | 01:56 |
I'll test the movie, and you can see the
arms lifting up.
| | 01:59 |
So, that's great.
Now, let's animate the Monkey Movie Clip
| | 02:02 |
on the main timeline.
Back in the FLA, I'm going to extend the
| | 02:06 |
timeline on both layers out to frame 48.
Now, I'll create a motion tween on the
| | 02:11 |
Monkey layer, and then move the play head
over to frame 48.
| | 02:15 |
Here, I'll just move the monkey over to
the right side of the screen.
| | 02:18 |
When we test the movie now, we see the
main timeline animation of the monkey
| | 02:21 |
sliding to the right and the nested
timeline animation of the arms moving up.
| | 02:27 |
So, you can see that nesting timelines can
be a great technique for adding extra
| | 02:30 |
motion to your projects.
You could use this technique to have a
| | 02:34 |
butterfly flying from left to right on the
main timeline, and have the wings move up
| | 02:38 |
and down in the nestedTimeline.
Or you could have a train, with steam
| | 02:42 |
coming out the top.
Or a whale, who wiggles his tail.
| | 02:45 |
The possibilities are endless.
You're also not constrained to just one
| | 02:49 |
level of nestedTimelines.
You could nest multiple levels, if you
| | 02:52 |
wish.
So, let's use nesting timelines and add on
| | 02:55 |
to what we've seen so far to create an
effect for our Bird Watching project.
| | 03:01 |
I'll open our Bird Watching project FLA
this far and hit Ctrl+Enter to test it
| | 03:05 |
out.
The state of our project is in is that
| | 03:08 |
when we mouse over any of the buttons, the
name appears, but it doesn't fade in.
| | 03:13 |
It just abruptly shows up.
So, we're going to nest a movie clip
| | 03:16 |
timeline onto the timeline of those buttons.
| | 03:19 |
To achieve the fade in effect.
All the buttons are on the Buttons layer,
| | 03:23 |
so I'll unlock it.
Now, I'll double-click on the Pink Skies
| | 03:26 |
button on the Stage to enter its timeline.
I'm also going to zoom in just a little
| | 03:31 |
bit.
If you watched the movies on button
| | 03:34 |
symbols earlier in the course, you'll
recall that the text that says Pink Skies
| | 03:37 |
is on its own layer, the text layer, and
it first appears on over state.
| | 03:42 |
So, when a user mouses over a button.
The text that says Pink Skies, is really,
| | 03:47 |
just a Static text box.
I'm going to right-click the text box and
| | 03:51 |
say, Convert to Symbol.
I'll give the symbol a name of Pink Skies
| | 03:55 |
Over and make sure that it's a Movie Clip.
To create the nestedTimeline, I'm going to
| | 04:00 |
double-click on the newly created Pink
Skies Over movie clip, and check out its
| | 04:04 |
timeline.
It is not surprisingly only one frame
| | 04:07 |
long.
I want the text to animate in over the
| | 04:10 |
course of ten frames.
So, I'll right-click on frame ten and
| | 04:14 |
choose Insert Frame.
So, I want to make a Motion Tween here,
| | 04:17 |
but you can't Motion Tween a textbox.
You have to have a Movie Clip symbol or a
| | 04:21 |
Graphic symbol.
So, I'll right-click on the text box
| | 04:24 |
again, and convert it to a symbol again,
this time giving the name of Pink Skies
| | 04:29 |
text wrapper.
I'm going to make sure it's a Movie Clip
| | 04:32 |
in the type drop down, and click OK.
Now, I've got a movie clip I can work
| | 04:37 |
with.
So, I'll create the motion tween to fade
| | 04:39 |
it in by moving by play head to frame one.
I'll tell Flash how I want the motion
| | 04:44 |
tween to start by selecting the movie clip
and in the Property Inspector, turning the
| | 04:47 |
alpha down to zero.
Now, I'll apply the motion tween by
| | 04:51 |
right-clicking anywhere between frames one
and ten on the timeline.
| | 04:55 |
And choosing create Motion Tween.
Now, I'll tell Flash how I want the motion
| | 05:00 |
tween to end by moving the play head to
frame ten, selecting the now invisible
| | 05:03 |
Pink Skies Text movie clip on this frame
and bumping the Alpha back up to 100.
| | 05:10 |
Scrubbing the timeline, the fade in effect
looks fine.
| | 05:12 |
So, let's test this out.
When I mouse over the Pink Skies button,
| | 05:16 |
the text fades in all right, but it fades
in over and over and over without
| | 05:19 |
stopping.
Remember that we're working with a movie
| | 05:23 |
clip timeline.
The play head starts at frame one, runs on
| | 05:25 |
down the timeline until it runs out of
frames, and then starts over again.
| | 05:30 |
If we want the fade in effect to stop at
frame ten, we have to add in a bit of
| | 05:33 |
ActionScript that tells the play head to stop.
| | 05:36 |
We've done this before.
I'm going to create a new layer above the
| | 05:39 |
existing layer, rename it ActionScript,
and insert a blank key frame on frame ten.
| | 05:44 |
Now, I'll open up my Actions panel and
type in the stop command.
| | 05:48 |
That should do it.
I'll test my movie again.
| | 05:50 |
And this time, when I mouse over the
button, the title of the painting fades in
| | 05:54 |
nicely just one time.
Back in the FLA, I'll click on the Pink
| | 05:58 |
Skies button at the upper left, so I can
get back to the timeline of the button
| | 06:02 |
symbol.
So, we've really used the concept of
| | 06:06 |
nesting timelines here.
We've got a button nesting a movie clip
| | 06:09 |
that nests yet another movie clip.
It can be confusing to think about
| | 06:13 |
multiple levels of nestedTimelines,
containers within containers.
| | 06:16 |
In this case, especially, because when I
click on my movie clip here, it doesn't
| | 06:19 |
look like there is anything there.
Remember, on the first frame of the nested
| | 06:24 |
movie clip timeline, the text has an Alpha
of 0.
| | 06:28 |
It can take practice and mistake to really
master in nesting timelines.
| | 06:32 |
But as you can see, it can create some
need effects.
| | 06:35 |
I'm going to click scene one to step back
up to the main timeline.
| | 06:38 |
Now, if you want to practice what we just
did again, you can try it on any one of
| | 06:41 |
the remaining four, preview the
collections buttons here.
| | 06:46 |
If not in the end folder of the Exercise
Files for this chapter there is a file
| | 06:49 |
called BirdWatchingButtonFades that has
the nested timelines already created and
| | 06:53 |
placed for you.
This is the FLA that I'll be building on
| | 06:57 |
going forward through the rest of the course.
| | 07:00 |
When I test this movie, you'll see that
all five buttons have the fade in effect
| | 07:04 |
on the text.
In addition, the movie clips that are used
| | 07:07 |
on the button timelines to do that are in
the Library in a new folder called Text
| | 07:11 |
Over buttons.
That folder is sitting within the buttons
| | 07:16 |
and parts folder.
| | 07:18 |
| | Collapse this transcript |
|
|
8. Understanding How Audio Works with Flash ProfessionalImporting 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 use three different sounds in
the Bird Watching project, one's a
| | 00:09 |
background sound when the movie starts,
the other two will play when a user clicks
| | 00:12 |
on one of the Preview the Collection buttons.
| | 00:16 |
Bringing sounds into Flash is a
delightfully easy one step process.
| | 00:20 |
You simply import sounds directly into the Library.
| | 00:24 |
Flash can import audio and MP3, WAV, AU,
AIFF, and some other formats as well.
| | 00:30 |
Let's try it by going to the File menu and
choosing Import > Import to Library.
| | 00:35 |
And the Exercise Files for this movie,
you'll find canary1.mp3, canary2.mp3 and
| | 00:41 |
CurlingPondWoodsClip.mp3.
We want to bring in all three, so I'll
| | 00:46 |
hold down the Shift key on my keyboard, so
I can multiple select and click Open.
| | 00:50 |
Once they're all imported, I'll open the
Library panel and we can see them there.
| | 00:55 |
The first thing I'm going to do is create
a new folder in the Library.
| | 00:58 |
I'll rename it Sounds and drag and drop
all three of the sounds into the folder.
| | 01:02 |
I'll click on canary1, and you'll see a
little picture of the waveform appear in
| | 01:06 |
the Preview window at the top of the Library.
| | 01:09 |
You can click the tiny Play button at the
upper right to hear the sound.
| | 01:14 |
Let's go ahead and listen to canary2 as well.
| | 01:18 |
Okay, CurlingPondsWoodClip we'll hear in a moment.
| | 01:21 |
The way you add sound into a Flash
timeline is by dragging and dropping it
| | 01:24 |
from the Library onto the Stage.
That may seem counter intuitive since
| | 01:28 |
sound has no visual representation, but
that's what we do.
| | 01:32 |
CurlingPondsWoodsClip is going to be a
kind of background sound for the whole
| | 01:35 |
project, so we'll start with that.
We'll need a new layer to put this on, so
| | 01:40 |
I'll create a new layer for my main
timeline, rename it sounds and move it
| | 01:43 |
just below the Actions layer.
I'll quickly right-click and choose Lock
| | 01:48 |
Others just to make sure this is the only
unlocked layer.
| | 01:51 |
Looks like it is.
Now, I'll click on the blank key frame on
| | 01:54 |
frame one of the Sound layer and drag and
drop CurlingPondWoodsClip mp3 from the
| | 01:58 |
Library onto the Stage.
Even though audio has no visual
| | 02:03 |
representation on the Stage, we can see
that waveform appear on the Sound layer in
| | 02:06 |
the timeline.
Now, I'll test the movie, so we can hear
| | 02:10 |
the sound.
You'll notice this sound will start up
| | 02:12 |
just fine, but it keeps playing for a long time.
| | 02:15 |
It's kind of a long background music. (MUSIC).
| | 02:18 |
Indeed, you heard how the sound just keeps
playing, and playing, and playing
| | 02:22 |
background music is great, but its
generally accepted that having background
| | 02:27 |
music that you can't turn off even calm
music like ours is not a good user
| | 02:31 |
experience.
We'll experiment with a good way to solve
| | 02:37 |
this in the next video.
For now, so the background music doesn't
| | 02:41 |
drive us nuts while we work with our
buttons, we're going to temporarily get
| | 02:46 |
rid of it.
I'll do this by clicking on frame one in
| | 02:50 |
the Sound layer, opening the Property
Inspector, and then in the name drop down
| | 02:54 |
under sound, choosing None.
You'll notice the drop down lists all of
| | 02:59 |
the audio files in the Library.
If you're doing something like testing out
| | 03:03 |
different audio tracks in a movie to see
which one works best, this is an easy way
| | 03:06 |
to switch out which sounds to play on your
key frame.
| | 03:10 |
So, let's go onto the sounds for the
Preview of the Collections buttons.
| | 03:13 |
We know the way we add sounds by dragging
and dropping onto the Timeline.
| | 03:17 |
So, we need to drop sounds on the
Timelines of the buttons themselves.
| | 03:22 |
The buttons are on the Buttons layer.
So, I'm going to unlock that layer.
| | 03:25 |
I'll start by double-clicking the Pink
Skies button, to enter its Timeline.
| | 03:30 |
This button already has a Sound layer that
we created a long time ago.
| | 03:33 |
We want the sound to play when the user
clicks on the button.
| | 03:37 |
So, the place to add in a key frame to
drop the sound on is the down frame.
| | 03:42 |
I'll do that by right-clicking the down
frame, and choosing, insert blank key
| | 03:45 |
frame.
From here, all we have to do is open the
| | 03:48 |
Library, and drag and drop canary1.mp3,
onto the Stage.
| | 03:52 |
You can see the waveform up here in the
down frame on the Sound layer.
| | 03:57 |
I'll test the movie to see how it works.
When I click on the Pink Skies button, we
| | 04:01 |
hear the canary chirp. (SOUND).
| | 04:04 |
That works well.
So now, we just have to go and add in the
| | 04:06 |
canary sound onto the other four buttons.
So, I'll click Scene 1 on the upper left
| | 04:11 |
of the screen to return to the main Timeline.
| | 04:14 |
Now, I'll double-click on the Bird on a
Highwire button to enter its Timeline.
| | 04:18 |
Again, we already have a Sound layer that
we added in, so I'll right-click on the
| | 04:22 |
down frame and insert a blank key frame.
Now, I'll drag and drop canary2.mp3.
| | 04:29 |
It could be the canary1 sound just as
well, but since we have five buttons, we
| | 04:32 |
might as well alternate between the two
canary sounds just to mix it up a little
| | 04:35 |
bit.
I'll click scene one on the upper left of
| | 04:39 |
the screen to return to the main Timeline.
Now, double-click to enter the Timeline of
| | 04:43 |
the waiting button.
Same thing.
| | 04:45 |
I'll right-click on the down frame and
insert a blank key frame.
| | 04:49 |
This time, drag and drop canary 1.
I'll click scene 1 to go back to the main
| | 04:53 |
timeline and double-click on the Warning
button on the Sound layer.
| | 04:57 |
I'll insert a blank key frame on the down
frame and drag and drop canary2.mp3.
| | 05:03 |
Back up to the main timeline.
Last one double-click on the Peacock
| | 05:07 |
button, insert the blank key frame and
drag and drop canary1.
| | 05:11 |
We're done with the buttons, so I'll go
back up to the main timeline one last time
| | 05:15 |
and test the movie. (SOUND).
| | 05:26 |
Everything looks or rather sounds great.
So, now you've seen how to quickly and
| | 05:31 |
easily add sounds into Flash projects.
To review the steps, first import the
| | 05:35 |
sound into your Library, then simply drag
and drop the sound onto the Stage at the
| | 05:39 |
key frame on the Timeline you want the
sound to start playing.
| | 05:43 |
| | Collapse this transcript |
| Editing audio| 00:00 |
Sounds that you use in Flash projects
sometimes don't behave exactly the way
| | 00:03 |
you'd like them to right after the bat.
Let's look at the options available to you
| | 00:08 |
in Flash for controlling and editing audio.
| | 00:11 |
Back in our Bird Watching file I'm
going to right-click my Sound layer and
| | 00:14 |
choose Lock others.
And I'll make sure the playhead is at
| | 00:17 |
Frame 1.
The sound we want to play here is
| | 00:20 |
CurlingPondsWoodclip.mp3.
So I'm going to drag a copy of that from
| | 00:24 |
the library out onto the stage.
A wave form appears on the sound layer so
| | 00:28 |
we know its been added.
Its a good sound but there's a problem in
| | 00:32 |
that the sound itself is too long.
When you test the movie the sound plays
| | 00:36 |
and plays and plays.
We'd like to have the sound stop a lot
| | 00:40 |
earlier like after the very first musical
phrase finishes.
| | 00:44 |
A good way to solve this problem is by
shortening the sound.
| | 00:47 |
We can do this by clicking on the keyframe
were the sound begins, so Frame 1 of the
| | 00:51 |
Sound layer.
And opening the property inspector in the
| | 00:55 |
sound area next to the effect drop-down I
will find and click on the little picture
| | 00:59 |
of the pencil to edit the sound.
This brings up what's called the Sound
| | 01:04 |
Envelope.
The top track represents the left channel
| | 01:07 |
or left speaker left ear however its
easiest for you to think abou tit.
| | 01:11 |
The bottom track represents the right channel.
| | 01:13 |
There's some simple controls for changing
your view at the bottom right.
| | 01:17 |
Here you can toggle back and forth between
frames or seconds as the unit of
| | 01:20 |
measurement.
Here's Frames and here's Seconds.
| | 01:24 |
I'm going to stick with Seconds.
You can also zoom in and out on the
| | 01:28 |
waveform, to see more or less of it at one time.
| | 01:31 |
I'll zoom out so I can see the entire sound.
| | 01:34 |
To cut down the sound, I'm going to grab
this little control handle in the center,
| | 01:37 |
on the right, and move it to the left.
I'll cut off about half of it, and click
| | 01:43 |
the Play button on the lower left to hear
what I've got.
| | 01:48 |
(MUSIC),
that's good.
| | 01:56 |
But I only want about half of what we
still have.
| | 02:00 |
So maybe just to the end of the first
musical phrase.
| | 02:02 |
You can kind of get an idea where that
would be just by looking at the waveform.
| | 02:07 |
So I'll move the chopper in between the
two spikes.
| | 02:10 |
You could even cut off some of the start
of the sound by using the handlebar on the
| | 02:13 |
left.
You could of course zoom in and out for
| | 02:16 |
more or less detail if you really needed
to, but I think what I've got here is
| | 02:19 |
fine.
I'll Play the sound again.
| | 02:25 |
(MUSIC), that's better.
Nice and short, enough to set the tone for
| | 02:29 |
the project but not continue on forever
and get annoying.
| | 02:33 |
The only thing I don't like is how the
sound drops off to silence at the end.
| | 02:37 |
I think it would be better if the sound
faded out near the end so the background
| | 02:41 |
noise of the birds chirping and the faded
twang of the guitar, don't just end
| | 02:44 |
abruptly.
That's easily done.
| | 02:48 |
The lines over the waveform indicate the volume.
| | 02:51 |
You can drag existing transition points,
or click to add more if you need.
| | 02:55 |
And drag them as needed on each channel
separately to create your own custom
| | 02:59 |
volume effect.
I'll fix it so that near the end, the
| | 03:03 |
volume goes from full on, down to
completely quiet.
| | 03:07 |
If I play the sound again, you can hear
that fade out effect.
| | 03:12 |
(MUSIC), I think it sounds good.
Notice there are also some preset effects
| | 03:19 |
available to you in the Effect drop-down.
Like Fade In, Fade Out, or having just one
| | 03:23 |
channel play while the other's quiet.
We'll stick with what we've got, so I'll
| | 03:28 |
click OK, and test the movie by hitting Ctl+Enter.
| | 03:31 |
(MUSIC), indeed, the sound's nice and
short and it fades out at the end.
| | 03:40 |
So one more thing to note is that if you
need to do something more complex than
| | 03:43 |
what we just did to the audio.
Maybe you need to combine two different
| | 03:47 |
sounds into one audio track or edit out a
lot of background noise.
| | 03:52 |
You'll need to edit your sound file in an
audio editing software and then bring the
| | 03:55 |
sound into Flash in a case like that.
A Google search can bring up several free
| | 04:00 |
or inexpensive audio editing programs that
you coud use.
| | 04:04 |
I'm going to test the movie one more time
to hear it again.
| | 04:07 |
But this time look for something else.
I'm going to really fast click on the
| | 04:11 |
buttons at the bottom then go back to
Exhibit Home, then click to another
| | 04:14 |
button, then go back to Exhibit Home.
So you probably noticed that we had
| | 04:20 |
multiple instances of the sound playing at
the same time.
| | 04:28 |
That could be a cool feature depending on
what you're trying to achieve.
| | 04:36 |
But in our case let's make a quick
adjustment so the sound can't overlap
| | 04:39 |
itself.
I'm going to click on Frame 1 of the Sound
| | 04:42 |
layer since this is where the sound
starts, and look in the property inspector
| | 04:45 |
for the Sync drop down.
It offers you the choices of Event, Start,
| | 04:50 |
Stop, and Stream.
The default when you drag and drop a sound
| | 04:55 |
into your movie is Event.
Sounds with the Event setting play when
| | 04:58 |
the playhead hits the keyframe the sound's
attached to.
| | 05:02 |
One instance of the sound can still be
playing when a second instance is
| | 05:04 |
triggered and that's why our sound behaves
the way it does now.
| | 05:09 |
When we first enter the piece, the sound plays.
| | 05:11 |
We click one of the buttons to move
elsewhere in the timeline, and quickly go
| | 05:14 |
back to Exhibit Home.
And the playhead jumps back to Frame 1,
| | 05:18 |
and with the setting at Event, the sound
starts playing another copy.
| | 05:22 |
So for our sound, we need to choose Start.
Sounds with the Start setting play only if
| | 05:28 |
a previous version of the same sound has completed.
| | 05:31 |
The Stop setting, by the way is pretty obvious.
| | 05:34 |
It stops playing a specified sound.
The Stream setting causes the Timeline to
| | 05:38 |
keep up with the sound.
You'd use Stream in a situation like if
| | 05:42 |
you had a long voiceover or narration, and
it's important for the sound to sync up
| | 05:46 |
with the visuals going on on the stage.
So we're going to stick with Start.
| | 05:51 |
And with that complete, I'll test the
movie again.
| | 05:53 |
(MUSIC), so now when I jump away from
Frame 1 by clicking a button and jump back
| | 06:03 |
home, I can't get more than 1 instance of
the sound playing at a time.
| | 06:15 |
That's a big improvement, but I'm still
not happy.
| | 06:19 |
You probably noticed that the background
sound did start over sometimes.
| | 06:23 |
It seems like it would be confusing or
annoying to a user to have the background
| | 06:26 |
music start playing again just sometimes
when they click Exhibit Home.
| | 06:31 |
I want to make it so that the intro
background music only ever plays once,
| | 06:35 |
when you first enter the piece and never again.
| | 06:39 |
To fix this, I'm going to change my Action
Script that controls the Exhibit Home
| | 06:42 |
button.
I'll open the code by unlocking the
| | 06:45 |
Actions layer, clicking the keyframe on
Frame 1 and opening the Actions panel by
| | 06:49 |
pressing F9.
I'll scroll down to the code that controls
| | 06:52 |
the Exhibit Home button.
Here where it says, go to and Stop Frame
| | 06:56 |
1, I'll change it so that it goes to and
Stop Frame 2.
| | 07:01 |
Frame 2 visually looks exactly the same as
Frame 1, so the user won't know the
| | 07:04 |
difference.
The audio is attached to Frame 1 though,
| | 07:08 |
so if the exhibit home button sends the
playhead to Frame 2, the audio attached to
| | 07:12 |
Frame 1 will never get triggered.
The only time that music will play is the
| | 07:17 |
very first ever time that the user opens
the piece in the first place, and that's
| | 07:21 |
what we want.
Because of this it doesn't really matter
| | 07:25 |
if the audio attached to Frame 1 is set to
event or start since the playhead only
| | 07:28 |
ever goes there once.
I am going to put a little comment in our
| | 07:33 |
code as to why we're going to Frame 2.
I'm going to test one last time.
| | 07:45 |
And indeed the intro background music only
ever plays once and never again.
| | 07:50 |
So with that I will Lock all of my layers.
So in this movie we've seen how to use the
| | 07:55 |
Sync, Drop-Down and the Sound Envelope
Properties to help control audio that you
| | 07:59 |
add into your Flash pieces.
we also used action scripts to manipulate
| | 08:04 |
audio behaviour
| | 08:06 |
| | Collapse this transcript |
|
|
9. Understanding How Video Works in Flash ProfessionalConverting video with Adobe Media Encoder| 00:00 |
Adding video to Flash is easy.
Flash Pro Creative Cloud can use video
| | 00:05 |
formats like MP4 but the best video format
for flash is Flash Video.
| | 00:10 |
It has an extension of FLV or F4V.
One reason these are good formats to use
| | 00:16 |
is that the file size of the video is
smaller than other formats.
| | 00:20 |
Of the two, F4V is the newer flash video
format, and supports the h.264, or high
| | 00:25 |
definition video standard.
If you already have a video in FLV or F4V
| | 00:30 |
format, you're all set and they're ready
to use it in your flash files.
| | 00:36 |
If you have a video that's not in that
format, you're still covered.
| | 00:39 |
Because when you have a licensed copy of
Flash, like when you get, when you
| | 00:42 |
subscribe to Creative Cloud.
You also get a standalone application
| | 00:45 |
called Adobe Media Encoder.
You can use Media Encoder to convert MOVs,
| | 00:50 |
MP4s, MPEGs, AVIs, WMVs, and some other
video file formats into Flash video.
| | 00:58 |
Let's take a quick look at it.
So, I'm going to go ahead and close Flash,
| | 01:01 |
just so that it's out of the way, and then
open up Adobe Media Encoder.
| | 01:05 |
Once it’s open, I’ll click Add, which
looks like a little plus button, to select
| | 01:09 |
what video we want to convert.
Media Encoder now wants to know what video
| | 01:14 |
file we’re going to work with.
In the exercise files for this chapter,
| | 01:18 |
I’m going to choose ThePeacock.mp4 and
click open.
| | 01:22 |
Next, you can click the format drop-down
to see the export options we have.
| | 01:27 |
I'll go ahead and choose F4V.
Under the Preset drop-down I'm going to
| | 01:31 |
stick with match source attributes.
Our source file already has the dimensions
| | 01:36 |
we want of 320 by 240, but if you need to
resize your video during the conversion
| | 01:40 |
process you can do that here.
Under Output File I'll make that I like
| | 01:45 |
the spot where Media Encoder will put the
converted file.
| | 01:49 |
Having it point to the end folder in the
exercise files for this chapter, will work
| | 01:52 |
just fine.
There's already an f4v there named
| | 01:56 |
Peacock, in case Adobe Media Encoder isn't
working for you.
| | 02:00 |
So you can either oOverwrite this file, or
create a new name for the one you're about
| | 02:03 |
to create.
Next, I'm going to click on the line under
| | 02:07 |
Preset, the one that says, Match Source Attributes.
| | 02:11 |
Here you can Edit the length of your
video, Resize it, Add Filters, affect the
| | 02:15 |
quality of the final output and more.
We're not going to make any edits so, I'll
| | 02:19 |
click Cancel.
Back in the main interface I'll click the
| | 02:23 |
Start Queue button.
It looks like a play button to begin the
| | 02:26 |
conversion.
We can see the progress of the encoder
| | 02:29 |
down here in the encoding area.
Once the video is done encoding Media
| | 02:33 |
Encoder let's us know with a little sound.
(NOISE), now we're ready to incorporate
| | 02:38 |
the finished video into our Flash project.
If you need it the course Publishing Video
| | 02:43 |
with the Flash Platform by Lisa
Larson-Kelley here the Lynda.com Library.
| | 02:48 |
Will give you excellent detail on all the
options ins and outs of using Adobe Media
| | 02:52 |
Encoder.
That course uses an older version of the
| | 02:56 |
software, but it's still relevant.
| | 02:58 |
| | Collapse this transcript |
| Integrating video| 00:00 |
Now that we have a video in Flash video
format ready to go, let's incorporate it
| | 00:04 |
into our Flash project.
The video exists in the start directory in
| | 00:08 |
the ExerciseFiles for this chapter.
I'm going to save a copy of it at the end
| | 00:12 |
directory as well, so it's in the same
spot as our completed FLA.
| | 00:16 |
That way they're easily kept together.
So, in the BirdWatching project, I'm
| | 00:21 |
going to click to frame 59.
We're going to have the video appear here,
| | 00:25 |
adjacent to the painting and text.
The text explains that the artist, Paul
| | 00:29 |
Shellington, often creates artwork from
video he's shot.
| | 00:33 |
Sometimes he displays the original video
along with the finished painting.
| | 00:37 |
So, this is a good place to display the
peacock video.
| | 00:40 |
That painting and accompanying text
content appear on the Content layer.
| | 00:45 |
They're glued together as a movie clip.
They start fading in at frame 50 and are
| | 00:49 |
fully visible by frame 59.
Well, I don't want to embed the video
| | 00:53 |
within the movie clip that fades in.
That makes things a little complicated.
| | 00:58 |
It's also good to follow the best practice
of having the video player on its own
| | 01:01 |
layer.
So, I'm just going to create a new layer
| | 01:04 |
above the Content layer, call it Video,
and create a new blank keyframe on the
| | 01:08 |
last frame of the project.
We'll put the video on that layer in this
| | 01:13 |
keyframe.
While the video won't fade in like the
| | 01:16 |
rest of the content, the fade in happens
so fast, and the video will appear above
| | 01:19 |
the rest of the content at a point where
the content's fully visible.
| | 01:25 |
The user shouldn't really notice any
strangeness about when the video appears.
| | 01:29 |
So, I'll be sure I have the keyframe on
frame 59 and the Video layer selected.
| | 01:33 |
And importing our video in from here is easy.
| | 01:37 |
I'll go to the File menu and choose Import
> Import Video.
| | 01:41 |
The Flash Video Import Wizard pops up.
And the first question you're asked is
| | 01:45 |
where is your video file.
Well, it's on our computer.
| | 01:48 |
It's not already deployed to a web server
somewhere, like the bottom choice here
| | 01:52 |
mentions.
So, I'll click Browse and navigate to the
| | 01:56 |
f4v file that we created earlier.
For the next set of radio buttons, you can
| | 02:01 |
choose between Load external video with
playback component or Embed FLV in SWF and
| | 02:05 |
play in timeline.
For most cases, I would recommend Load
| | 02:09 |
external video with playback component.
By choosing this, you're telling your FLA
| | 02:15 |
file to add a video playback component
with controls like play, stop, pause,
| | 02:19 |
volume control, etcetera, to the Stage.
The video playback component will then
| | 02:25 |
point to and play your video file which is
sitting in the location we just specified.
| | 02:30 |
The video itself will not actually be
embedded into the Flash SWF.
| | 02:35 |
It won't appear in the Library either.
Your SWF will know which video to play
| | 02:39 |
though.
This is advantageous because number one,
| | 02:42 |
it's very easy to change what video you
want to play.
| | 02:45 |
You just simply change what video your SWF
is pointing to.
| | 02:48 |
You could even create a playlist of videos
to look through.
| | 02:52 |
The second advantage is the file size of
your actual video is not bundled up in
| | 02:56 |
your SWF.
If you chose the second option of Embed
| | 03:00 |
FLV in SWF and play in timeline, your FLV
is actually physically added onto your
| | 03:04 |
timeline and into the Library.
If your video file's huge, your SWF file
| | 03:09 |
is huge, and it could take a really long
time to download for your users.
| | 03:14 |
Embedding video onto the timeline would
only be appropriate in cases like the
| | 03:18 |
video is very very short.
With the availability of other controls
| | 03:22 |
that exist for video, there's not really
much reason to ever embed your video onto
| | 03:26 |
the timeline.
So, moving on.
| | 03:29 |
I'll click Next to go to the next screen
of the video Import Wizard.
| | 03:33 |
Here's where you get to choose what that
video playback component or video controls
| | 03:36 |
are going to look like.
Take a minute to look through the
| | 03:40 |
different options available in the
drop-down and what they include.
| | 03:43 |
You can also change the background color
of the player component here.
| | 03:48 |
I'm going to choose skin over all, no
full, no caption, then click Next.
| | 03:54 |
The final page is the Review page.
First, check that the location of the
| | 03:58 |
video you want to use is correct.
The summary says a Flash video component
| | 04:02 |
will be created on the stage and
configured for local playback.
| | 04:06 |
Okay.
That sounds fine.
| | 04:07 |
It also tells us that the video component
uses a skin file that will be published
| | 04:11 |
next to our FLA.
When we publish or test the movie, we need
| | 04:14 |
to deploy that to our web server. Okay.
| | 04:17 |
We'll see that file in just a second and
it will become more clear what it means.
| | 04:21 |
For now, we're ready.
So, go ahead and click Finish.
| | 04:23 |
Flash thinks about it for just a moment,
and then magically our video component
| | 04:27 |
appears on the Stage.
I'm going to click on it once to select
| | 04:30 |
it, and then the Property Inspector, give
an x position of 494 and a y position of
| | 04:35 |
162.
If you open the Library, you'll see that
| | 04:39 |
all we have in here that's new is an
instance of the FLV playback component,
| | 04:42 |
which is the video controller.
Notice the video itself is not in the
| | 04:48 |
Library.
We're just pointing the playback component
| | 04:51 |
to it.
So, I'll go ahead and test the movie.
| | 04:53 |
(MUSIC).
I'll click the Peacock button, and we
| | 04:58 |
should see our video. (SOUND).
| | 05:04 |
We can pause it, we can fast forward it or
rewind it, and so on.
| | 05:20 |
I'll close the Preview, and now I'll open
my File Explorer.
| | 05:23 |
I'll navigate to the location where the
FLA is.
| | 05:26 |
Here, you can see the FLA file and the
BirdWatching.swf we created when we tested
| | 05:30 |
the movie.
If you followed the steps in this video,
| | 05:33 |
your video file is also here.
Note, the existence of the
| | 05:37 |
SkinOverAllNoFullNoCaption SWF.
Remember the last line on the Video Review
| | 05:42 |
page that talked about a skin file?
The FLV component can have many different
| | 05:47 |
skins, or looks, depending on which one
you chose.
| | 05:51 |
This is the SWF that defines it.
This SWF file is used by BirdWatching.swf
| | 05:55 |
to determine how the video playback
component looks.
| | 05:59 |
In fact, you can double-click on the SWF
file and open it up just to see how it
| | 06:02 |
looks.
When you upload your BirdWatching.swf file
| | 06:07 |
to your website or wherever it's going to
go, you also need to upload the
| | 06:11 |
SkinOverAllNoFullNoCaptions SWF as well.
If you don't, the video player won't work.
| | 06:18 |
You also, of course, need to upload the
video file itself.
| | 06:21 |
Back in Flash, say you don't like at the
video component anymore and you want to
| | 06:24 |
change it.
Simply click o the play back component on
| | 06:28 |
the Stage, and then open the Property Inspector.
| | 06:31 |
The Component Parameters area is where all
the options are.
| | 06:35 |
I'll find and click on the little Pencil
icon on the line that says Skin.
| | 06:39 |
Now, I could choose a different skin for
the player.
| | 06:43 |
If you choose a different skin, when you
retest or republish your Flash piece
| | 06:46 |
again, a new SWF file with the
corresponding name to the new skin will
| | 06:49 |
have been generated.
If that's going to be the final choice for
| | 06:54 |
your skin, then that new SWF with the
corresponding skin name is what you'd need
| | 06:57 |
to upload to the web server, along with
all your other files.
| | 07:01 |
Back in Flash one more time, let's say we
want to change what video we're going to
| | 07:04 |
play.
Back in the Component Parameters area,
| | 07:07 |
I'll click on the little Pencil on the
Source line.
| | 07:10 |
In the Content Path box, you can then
navigate to a different video that you
| | 07:14 |
might want to play instead of the peacock.
We're fine with our current video, but you
| | 07:19 |
can see how easy it is to change it if you
need to.
| | 07:22 |
Notice you could also play around with
having the video auto play or not by
| | 07:26 |
checking or unchecking this box.
There's one quick problem we need to fix
| | 07:31 |
before we call this file all done.
I'll test my project and click to the
| | 07:35 |
peacock content.
While the video is still playing, I'll
| | 07:39 |
then click the Exhibit Home Button. (MUSIC).
| | 07:44 |
The screen updates, but you saw that the
video sound is still playing.
| | 08:00 |
There's a quick line of ActionScripts that
we can add to fix this that basically
| | 08:03 |
shuts off all sounds.
So, I'll go to frame one of the Actions
| | 08:07 |
layer and open up the Actions panel.
This is where we added the code that
| | 08:10 |
controls the Exhibit Home button, so I'll
scroll down to the code for that.
| | 08:15 |
Just above the line where it says
GoToAndStop, I'm going to type in
| | 08:19 |
SoundMixer.stopAll.
I'll also type in a little comment about
| | 08:24 |
it, so we know later down the line what
this line of code does.
| | 08:27 |
SoundMixer line ensures that audio from
the peacock video stops when you go back
| | 08:34 |
to the home screen.
And that is what the code does.
| | 08:41 |
Now, whenever someone clicks on the
Exhibit Home button, the
| | 08:43 |
SoundMixer.StopAll code, will make sure
that sounds Including sound from the video
| | 08:47 |
has stopped.
I'll test the project one more time.
| | 08:51 |
This time when I go to the peacock
painting and back to Exhibit Home, the
| | 08:54 |
sound from the video stops appropriately. (MUSIC).
| | 08:58 |
So, adding video to your Flash projects is
relatively easy, thanks to the fact that
| | 09:05 |
all you really have to do is have a video
file, and then use the FLV playback
| | 09:11 |
component to play it.
With that, I'm going to lock my Video
| | 09:19 |
layer and call the Bird Watching piece
complete, ready to publish for the world.
| | 09:24 |
| | Collapse this transcript |
|
|
10. Publishing a Flash Professional DocumentCleaning up and optimizing your file| 00:00 |
When getting ready to publish your final
SWF files, taking a few minutes to clean
| | 00:03 |
up your FLA and optimizing it can be time
well spent.
| | 00:08 |
That way it's easy for yourself and your
colleagues who might work with the file
| | 00:10 |
down the line to navigate around it.
The first spot to look is your library.
| | 00:15 |
Delete anything that isn't being used in
your movie.
| | 00:18 |
If you're not sure if something is being
used you can go to the context menu for
| | 00:21 |
the library here at the upper right and
choose select unused items.
| | 00:26 |
I don't have any unused items but any
library item not used on the stage at some
| | 00:30 |
point in a project would be highlighted.
Another useful for information about your
| | 00:35 |
library items is the use count column.
You might have to resize some of the
| | 00:40 |
columns in the library to see it but it
can be a helfpful way to identify what's
| | 00:43 |
going on with your library items.
Another best practice is to make sure all
| | 00:48 |
your library items are named somethng
intuitive that way maybe when you open up
| | 00:51 |
the file maybe three or four months down
the line you can tell at a glance what
| | 00:54 |
each item is.
There's nothing worse than a library full
| | 00:58 |
of items named symbol one symbol two
symbol three.
| | 01:02 |
Also putting related library items into
folders can be helpful.
| | 01:06 |
If you followed along with this course the
entire way we have a number of folders and
| | 01:10 |
subfolders.
Similar to the library you'll want to make
| | 01:13 |
sure that your timeline is organized with
layer names that make sense, unused layers
| | 01:17 |
deleted and maybe folders to group related
layers together.
| | 01:21 |
To optimize your swif files to be the
smallest in file size they can be, you can
| | 01:25 |
adjust the compression of imported audio
and images.
| | 01:29 |
If I look in the property inspector in the
swif history section, we see that our
| | 01:33 |
final published swif file is right at 800k.
| | 01:37 |
I happen to know that a lot of that final
swif size is coming from the curling pond
| | 01:41 |
woods mp3 sound.
Just for fun I'm going to delete the sound
| | 01:45 |
out of the library and publish the movie.
I'll close the SWF right away and go back
| | 01:50 |
to the SWF history.
The SWF now is only at 452 K.
| | 01:55 |
Wow.
I'll hit Ctrl+Z to restore the sound back
| | 01:57 |
into the library and onto the timeline.
But obviously this could be one spot to
| | 02:02 |
look at if final file size is a concern.
To experiment with the compression
| | 02:07 |
settings on audio files, you double click
on the icon of the speaker for the sound
| | 02:10 |
in question in the library.
In the Sound Properties box, notice this
| | 02:14 |
compression drop down.
The default compression Flash uses is mp3,
| | 02:19 |
but another one that might work to try out
for this sound is 80 PCM.
| | 02:23 |
Speech is a good one to try if you're
doing something like adding a voiceover to
| | 02:26 |
your timeline and trying to get it to sync
up with action on the scene.
| | 02:31 |
Raw is good for really short sounds like
button clicks on a door slam.
| | 02:35 |
You could also try adjusting different
settings like the sample rate below.
| | 02:39 |
But for now, I'll click okay and publish
the movie again and see what happens.
| | 02:44 |
Listen to the quality of the background
sound and see if it sounds okay.
| | 02:47 |
(MUSIC) The background sound sounded fine
to me.
| | 02:52 |
I'll close this SWF and look at SWF
history again, and wow, 675 is a lot less
| | 02:58 |
than our earlier measurement of 800.
So you can see that testing the different
| | 03:06 |
output compression settings to get the
right balance of sound quality and file
| | 03:09 |
size can really be worth it.
Another thing to try with our curling pond
| | 03:14 |
woods sound in particular is to have
brought it in cropped to the correct
| | 03:17 |
length in the first place.
The version we've got is about 22 seconds
| | 03:22 |
long.
We used the sound envelope in a previous
| | 03:25 |
movie to shorten up what's actually used
in the flash piece to about four seconds.
| | 03:30 |
A shortened version of this sound exists
in the start files for this chapter.
| | 03:34 |
Hint hint, using that one saves a lot of filesize.
| | 03:38 |
Experimenting with the compression
settings saves even more filesize if you
| | 03:41 |
want to take the time to try it out.
Imported bitmaps can be a big source of
| | 03:46 |
file size bloat in your SWFs as well.
The best way to avoid this is to plan
| | 03:51 |
ahead.
Import images only at the dimension and
| | 03:54 |
resolution that you really need them.
That being said, you can ratchet down the
| | 03:58 |
size of your final SWF by affecting the
quality compression Flash uses for images.
| | 04:04 |
In the library, I'll double-click on the
little icon next to pinkskies.jpg to open
| | 04:08 |
up the Bitmap Properties box.
Using the Quality radio button, you can
| | 04:13 |
set a custom compression that Flash should
use instead of the default for your image.
| | 04:18 |
I'm going to be pretty aggressive and use
the 50%.
| | 04:22 |
I'll click OK and publish the movie again.
So, I'll click to where the big version of
| | 04:28 |
Pink Skies is displayed.
The quality of the image is reduced.
| | 04:35 |
You can see some blockiness and
pixelation, for instance, around the head
| | 04:38 |
of the bird on the left.
However, when you close your swiff and
| | 04:42 |
look at the swiff history box, you can see
that our final file size has been reduced
| | 04:46 |
by maybe 35K.
I'm going to restore my background image
| | 04:50 |
to its original setting.
I'm sure Paul Shellington would want his
| | 04:53 |
paintings to look the best possible.
But now you know that you can play with
| | 04:57 |
the compression for each image to find the
right balance between image quality and
| | 05:00 |
final size of the swf.
If you're building an application like an
| | 05:05 |
image gallery that shows a lot of high
quality images, you might want to keep
| | 05:09 |
studying action script.
You can learn techniques like loading in
| | 05:13 |
external images or other assets one by one
on demand instead of embedding them all
| | 05:17 |
into a single SWF file.
Finally, be careful about the kinds of
| | 05:22 |
text that you use.
As we discussed in the section about text,
| | 05:26 |
embedding fonts can also add a little
weight to your file size.
| | 05:29 |
With these items considered, we can now
publish our final files.
| | 05:33 |
| | Collapse this transcript |
| Publishing and deploying for desktop browsers| 00:00 |
When publishing for the web, you'll need a
SWF file but also an HTML file that embeds
| | 00:04 |
the SWF for display.
I've opened the version of
| | 00:08 |
birdwatching.fla from the Start folder in
the Exercise files for this chapter.
| | 00:13 |
Now I'm going to Save a copy of it in the
End folder.
| | 00:16 |
In the FLA, I'm going to go to the File
menu and choose Publish Settings.
| | 00:20 |
On the first screen that appears, I'll be
sure that the HTML and Flash checkboxes
| | 00:24 |
have both been selected so we get both
file types.
| | 00:28 |
You can switch between the settings for
both by simply clicking on the name.
| | 00:32 |
On the screen for Flash, which is the
default view, I'll make sure that the
| | 00:35 |
version of Flash Player that I want to
target is selected.
| | 00:39 |
I've got Flash Player 11.7.
Leave everything else at the defaults, for
| | 00:43 |
a quick publish.
I'll click to the HTML Settings screen,
| | 00:45 |
and we'll leave everything as it is for
the moment here as well.
| | 00:48 |
I'll go ahead and click Publish on the
bottom, and then OK to close the window.
| | 00:53 |
It may not look like much happened, but in
my File Explorer where the FLA is, you'll
| | 00:56 |
see birdwatching dot swf.
The SWF file is not any different than the
| | 01:01 |
SWF you create when you test your movie
during development by pressing Cmd or
| | 01:04 |
Ctrl+Enter.
Also there's the
| | 01:07 |
SkinOverallNoFullNoCaption SWF.
Remember that this is the SWF that makes
| | 01:12 |
up the video player that plays the Peacock file.
| | 01:15 |
So let's check out the HTML file.
I'll pop it open in a browser and you'll
| | 01:19 |
see that when the SWF displays, it looks
just like it did when we were testing it
| | 01:22 |
out in Flash.
The biggest difference here is that we're
| | 01:26 |
looking at the SWF embedded within an HTML file.
| | 01:29 |
So we're using the Flash Player plug-in to
view it.
| | 01:31 |
This is good since browsers like Internet
Explorer and Chrome read HTML.
| | 01:36 |
There's one problem though,when I click to
the peacock picture, the video of the
| | 01:39 |
peacock doesnt appear.
If you watched the tutioral about adding
| | 01:43 |
video, you'll remember that we built our
piece to look in the same directory as the
| | 01:47 |
SWF for the video.
Since the video isn't there obviously it
| | 01:51 |
doesn't work.
To fix this I'll just grab a copy of the
| | 01:54 |
video from the start folder and Paste it
into the End folder.
| | 01:58 |
Now when I Refresh the browser the video
works just fine.
| | 02:01 |
So that's a good lesson about what you to
your web server.
| | 02:06 |
You'll want to upload the HTML file and
the two SWFs you should also put up the
| | 02:10 |
video file in the right spot too.
Again, we build RP's to look in the same
| | 02:14 |
directory as the Swift for the video.
However, the video could live in a
| | 02:19 |
different spot in the SWF, if you've got
video already deployed to the Web for
| | 02:22 |
instance.
You just have to know what the URL is for
| | 02:25 |
the video, when you incorporate it into Flash.
| | 02:28 |
There's two more things I want to do.
I want my SWF file to appear centered in
| | 02:32 |
the browser, instead of on the left.
I also want to make it so that if the user
| | 02:36 |
doesn't have Flash player 11.7, they're
informed of that, and provided a link to
| | 02:39 |
go download it.
So, back in Flash, I'm going to open up my
| | 02:43 |
Publish settings again, and this time, on
the HTML tab, click the little box next to
| | 02:47 |
Detect Flash Version.
What this does is create some Javacript
| | 02:52 |
that does the Flash Player version check.
Now to center the SWF in the HTML, I'll
| | 02:57 |
change the Size drop-down to Percent, with
a Width and Height of 100.
| | 03:02 |
Now the Scale drop-down down here at the
bottom, should be set to No Scale.
| | 03:06 |
Finally, Flash Horizontal alignment should
be set to Center, it already is.
| | 03:11 |
And Flash Vertical alignment should also
be set to Center.
| | 03:15 |
I'm going to go ahead and hit Publish, and
then open up this version of the HTML page
| | 03:18 |
in Dreamweaver.
On my line six, you'll clearly see the
| | 03:22 |
reference to swiffobject.js, which is the
JavaScript file we just mentioned.
| | 03:28 |
Look in your file explorer and you'll see
it published alongside your SWF and HTML.
| | 03:33 |
If you want to use this, you'll of course
need to upload the js file to your web
| | 03:36 |
server along with the other files.
So basically, you'll need to upload
| | 03:41 |
everything in this directory except the
FLA to your web server.
| | 03:46 |
As you get more advanced in Flash, you may
start having directories of images, or
| | 03:49 |
text files, that your SWF utilizes as well.
| | 03:51 |
Whatever other files your SWF needs to
work, be sure to move all of them up to
| | 03:55 |
your web server for final deployment.
Finally, I'll Refresh my browser.
| | 04:00 |
I already have Flash Player 11.7, so I
don't get the message about needing to
| | 04:03 |
download the latest version.
But the Flash piece appears centered in
| | 04:07 |
the browser instead of to the left.
Congratulations, your Flash Piece is on
| | 04:12 |
the web.
| | 04:12 |
| | Collapse this transcript |
| Understanding Adobe AIR| 00:00 |
So, let's say you've got a really neat
piece that you've developed in Flash.
| | 00:03 |
And you want to be able to deploy it to
more places than just a SWF file that's
| | 00:07 |
viewed in a web browser.
Adobe AIR, or Adobe Integrated Runtime,
| | 00:11 |
allows you to take content you've
developed in Flash, and make it
| | 00:15 |
installable on the desktop, or on mobile devices.
| | 00:19 |
Here's an overview of how it works.
Instead of starting with an FLA file in
| | 00:22 |
publishing a SWF that's viewed through the
Flash player in a browser, AIR packages up
| | 00:26 |
the Flash content and makes it something
you install.
| | 00:30 |
Think about when you buy Microsoft Word,
or a tax preparation program, or any
| | 00:33 |
software program at all.
You might get a disk and put it on your
| | 00:37 |
computer's disk drive and install the software.
| | 00:41 |
Or, so you don't have to have the physical
disk, you might get a digital version of
| | 00:44 |
the installer online.
In any case, you install the program on
| | 00:47 |
your computer.
Once it's installed, you can open up the
| | 00:50 |
software and use it.
That's what Adobe AIR allows you to do.
| | 00:54 |
You author something in Flash, the
authoring program.
| | 00:57 |
But when you publish, you publish an AIR project.
| | 01:00 |
Instead of being a SWF that's viewed
through the Flash player in a browser, the
| | 01:04 |
AIR project is published as a .air file.
And it contains your Flash content that
| | 01:09 |
can be installed on your computer like any
other program.
| | 01:13 |
The great thing is you can also use AIR to
publish to mobile devices too.
| | 01:17 |
The end files for mobile are still AIR
projects, but they do have a different
| | 01:21 |
extension than .air.
Here's a quick overview of how publishing
| | 01:26 |
for AIR works.
You, as the developer, can choose to
| | 01:29 |
publish your project your FLA file as an
AIR file.
| | 01:33 |
Before being able to install and use your
AIR project, the end user must download
| | 01:37 |
the AIR runtime from adobe.com.
It's kind of like the key that unlocks the
| | 01:42 |
box your application is wrapped up in.
The great thing is, the end user only has
| | 01:46 |
to download it once.
Once the AIR runtime is installed on
| | 01:50 |
someone's computer, phone, or other mobile
device, they can use it to unlock and run
| | 01:54 |
as many AIR executables or programs as
they wish.
| | 01:58 |
With Flash Professional CS6 and Flash Pro
Creative Cloud, there's also another
| | 02:02 |
option.
You, as the developer, still publish your
| | 02:06 |
FLA as an AIR file.
But you can choose to have the AIR runtime
| | 02:10 |
wrapped up with the rest of your application.
| | 02:13 |
This eliminates the need for the end user
to have the AIR runtime downloaded
| | 02:16 |
separately first.
It's kind of like including the key with
| | 02:20 |
the box, instead of the user having to get
the key separately first.
| | 02:24 |
Wrapping up the AIR runtime with the rest
of your project is called captive runtime.
| | 02:29 |
And again, you can't do this with versions
of Flash older than CS6.
| | 02:33 |
If you can build it in Flash, you can
deploy it as an AIR project, and make it
| | 02:37 |
an installable application for the
desktop, or for mobile devices.
| | 02:41 |
In the next movies, we'll take a look at
how to do this.
| | 02:45 |
| | Collapse this transcript |
| Publishing mobile and desktop applications| 00:00 |
Let's take a look at how to test and
publish your flash pieces as an Adobe AIR
| | 00:03 |
File for mobile that can be uploaded to
places like Google Play or the Apple apps
| | 00:07 |
store.
We'll also touch on publishing AIR files
| | 00:12 |
to be deployed and installed on a Desktop.
This movies meant to give you just a taste
| | 00:16 |
of what this process is like.
There are entire courses here in the
| | 00:20 |
lynda.com library that focus specifically
on developing and deploying Air
| | 00:23 |
applications.
So let's take a look at testing and
| | 00:27 |
deploying from mobile.
So we have this piece that showcases some
| | 00:30 |
of Paul Shellington's art as a kind of gallery.
| | 00:33 |
It's a different piece than the Bird
Watching piece we built during the course,
| | 00:36 |
but it uses some of the same content.
This piece, by the way, was built using
| | 00:41 |
one of the templates that come with Flash.
You can find it by going to the File menu,
| | 00:45 |
then New, Templates, AIR for Android, and
then Swipe Gallery.
| | 00:50 |
I'm going to save a copy of this in the
end folder in the exercise files for this
| | 00:54 |
chapter so we can clearly see all the
resulting files that we get when we
| | 00:57 |
publish.
Looking in the Property Inspector, this
| | 01:02 |
piece is targeting AIR 3.6 for Android.
Note that AIR 3.6 for IOS is a choice for
| | 01:07 |
mobile as well.
Now, before you actually publish an
| | 01:10 |
application for mobile, you can test it
out and simulate how it will behave on a
| | 01:13 |
mobile device.
You can do this by hitting Ctrl+Enter or
| | 01:18 |
Control > TestMovie > In AIR Debug Launcher.
| | 01:22 |
What's called the content simulator comes up.
| | 01:24 |
The content Simulator shows you what your
appllication will look like on a device.
| | 01:28 |
You can test out things like how the
application affects the accelerometer
| | 01:31 |
which referes to when the device is tilted.
| | 01:35 |
Our application doesn't utilize
accelerometer, but you may have played
| | 01:38 |
some games on a mobile phone or tablet at
one point that do.
| | 01:41 |
You can also test things like various
gestures and movements you make with your
| | 01:45 |
finger.
I'll move to the Touch and Gesture area
| | 01:48 |
and then Check to activate the Touch Layer.
| | 01:52 |
Now I'll select Swipe.
I can use the mouse to simulate what it's
| | 01:55 |
like to actually use this on my mobile.
Once you're happy with your piece in the
| | 02:00 |
content simulator, you can test it out on
an actual mobile device.
| | 02:04 |
To do that, first we have to set some
settings in Flash.
| | 02:07 |
I'll click on the wrench icon next to the
Target drop-down where we've chosen Air
| | 02:11 |
3.6 for Android.
Know that the process we go through here
| | 02:15 |
is similar for Android and iOS devices.
Although the resulting files are different
| | 02:19 |
depending on which platform you're targeting.
| | 02:22 |
So on the General tab we see right away
the name of our end output file for
| | 02:26 |
Android.
It will be birdwatching_mobileApp.apk.
| | 02:32 |
The App name, we'll leave as it is, the
App ID, we'll put
| | 02:35 |
com.lynda.birdWatchingMobile.
For this application, we'll leave the
| | 02:41 |
Aspect ratio at Portrait.
On the Deployment tab, you're asked to
| | 02:44 |
provide a Certificate and a Password for
that certificate.
| | 02:48 |
The Certificate is basically like using,
yes I am the creator of this application.
| | 02:53 |
I am responsible for what's in it and what
it does and I promise I am not trying to
| | 02:56 |
do something nasty like break into your
bank account and steal all your money.
| | 03:02 |
Now, you can create a certificate right
here by clicking Create and filling up
| | 03:05 |
this form.
So I will fill out my name, the
| | 03:08 |
organization unit I will put lynda.com,
the organization Lynda as well and I’ll
| | 03:12 |
create a Password.
I’ll click Browse to tell the computer
| | 03:16 |
where I want to save my certificate.
I’ll put mine on the Desktop.
| | 03:20 |
Now I’ll click Save and then click OK to
actually create the certificate.
| | 03:25 |
Flash says the self-signed certificate has
been created.
| | 03:28 |
It is a .p12 file.
So this works fine, but when a user
| | 03:33 |
installs this application, they'll be
warned that the certificate is unknown.
| | 03:38 |
Basically it means that there's not a way
for Flash or the application you're
| | 03:41 |
creating to verify that you really are who
you say you are.
| | 03:45 |
If your looking to create applications
that you want to sell for money or deploy
| | 03:48 |
to a public audience or something similar.
You might want to look into getting a
| | 03:52 |
certificate from a certificate authority.
The process of getting a certifecate for
| | 03:57 |
iOS is more complex than this and it does
cost some money.
| | 04:00 |
There is also a registration process for
the actual devices you might want to test
| | 04:04 |
on like an iPhone or an iPad.
The course, Building Mobile Apps for
| | 04:09 |
Multiple Devices by Paul Trani, here in
the lynda.com library goes through that in
| | 04:13 |
detail.
Anyway, the p12 has been created, and I'll
| | 04:16 |
type in the Password I just set.
I'll also click to remember my password
| | 04:20 |
for this session, so if I accidentally
close this dialog, I don't have to retype
| | 04:24 |
it again.
Lower on this screen, in the AIR runtime
| | 04:28 |
section, you can choose your AIR Runtime
to be captive runtime, so, embed AIR
| | 04:31 |
runtime with application.
Or have the user get it from Google Play
| | 04:36 |
or the Amazon App Store.
We'll stick with Google Play.
| | 04:40 |
If you are not sure what this means,
please refer to the movie about Adobe AIR
| | 04:43 |
just a little bit early in this course.
Now on the Icons tab, you have the option
| | 04:48 |
of including icons for your application.
So these will be used in different places,
| | 04:53 |
like when the app is installed in your
phone and you touch the icon representing
| | 04:56 |
the app to open it up.
I have icons for this in the Start folder
| | 05:00 |
in the exercise files, so I will add them in.
| | 05:04 |
Here's the one for 36 by 36.
Flash is asking me here, is it okay if I
| | 05:08 |
copy the icons over to the end folder in
the exercise files?
| | 05:13 |
Yes, that's fine.
I'll do it for 48 by 48, and 72 by 72.
| | 05:23 |
The permissions has some things that you
can decide if you want the user to be
| | 05:26 |
notified about or not when they install
the app.
| | 05:29 |
I'll check Internet.
The Languages tab is about what other
| | 05:33 |
languages you want your application to be
able to support.
| | 05:36 |
So now I'm ready to connect my Android phone.
| | 05:39 |
First I need to change something on the
actual phone itself before I can test the
| | 05:43 |
app.
So on the phone I'll access the sub-menu
| | 05:46 |
button and go to Settings and Applications.
| | 05:50 |
Then check Unknown sources.
That allows for the installation of
| | 05:57 |
non-market applications.
Then you can also go to Development and
| | 06:02 |
check USB debugging, if you want to be
able to debug on the device as well.
| | 06:10 |
Lastly you can always check Allow for mock
locations in case you need that for GPS.
| | 06:16 |
So the phone is ready and I'll connect it
via USB to the computer.
| | 06:20 |
I'm going to go back to the Deployment tab
and near the bottom make sure that Install
| | 06:24 |
application on the connected Android device.
| | 06:28 |
And launch application on the connected
Android device are both checked.
| | 06:32 |
Edbe7a45 is the serial number of my phone.
Flash actually just detected that my phone
| | 06:38 |
is connected to the computer, so I'll
check the checkbox.
| | 06:42 |
If you don't see your mobile device listed
in the box, you can click the Refresh
| | 06:46 |
button.
If you're clicking Refresh and your device
| | 06:49 |
still doesn't show up, you might want to
try downloading and installing the USB
| | 06:52 |
device drivers for your mobile.
You should be able to find them for free
| | 06:56 |
from the manufacturer of your device.
So, I'll click Publish.
| | 07:00 |
We wait for just a minute and we're told
that the APK file has been created.
| | 07:06 |
That's the installable air file for
Android devices.
| | 07:11 |
The app also appears on my phone.
I can swipe between the different images
| | 07:16 |
and when I'm done I can hit the submenu
button and exit out of my app.
| | 07:22 |
So that's really cool.
Now let's say I'm now ready to put the app
| | 07:25 |
up on Google Play.
Well, what you need is for Flash to create
| | 07:30 |
an APK file.
I already did that when I published to my
| | 07:33 |
phone.
Here it is in my File Explorer.
| | 07:36 |
Notice also the supporting XML file called
the application descriptor file.
| | 07:40 |
But I'll unplug the phone to simulate the
situation where I didn't deploy it to the
| | 07:44 |
phone first and I just want to publish out
the APK file.
| | 07:49 |
Back in Flash I'll click on the icon of
the wrench again to open up the Settings
| | 07:52 |
box.
Basically what you have to do to publish
| | 07:55 |
an APK file for upload is what we just did
with the certificate and setting up the
| | 07:58 |
icons the permissions everything.
Since we already did all of that the only
| | 08:03 |
thing different is that I'll go to the
deployment tab and uncheck install
| | 08:07 |
application on connected Android device.
So I'll click Publish and wait for it to
| | 08:13 |
finish, and my APK file has been recreated.
| | 08:17 |
From here you'll use the APK file and the
XML file and upload it to your favorite
| | 08:20 |
app store and you can try to get a million downloads.
| | 08:25 |
So I'll close this file.
Publishing to make an application for
| | 08:28 |
desktop is just as easy, and we have an
example that's already done.
| | 08:32 |
If you look in the end folder in the
exercise files for this unit, you'll find
| | 08:36 |
a subfolder called birdWatchingForDesktopInstall.
| | 08:40 |
The FLA here is the same one that we spent
our time building in this course, just
| | 08:43 |
with the peacock video taken out.
You'll notice that in the target drop down
| | 08:48 |
it says AIR 3.6 for Desktop.
If you click on the wrench icon, you'll
| | 08:52 |
see that I already filled out all of the
information in the AIR Settings boxes for
| | 08:56 |
you.
And I also already published out the end
| | 08:59 |
AIR file.
If you want to try publishing this out on
| | 09:02 |
your computer, you'll just need to change
the P12 Certificate file on the Signature
| | 09:06 |
tab to a P12 you have on your computer.
Instead of pointing to my P12 that isn't
| | 09:11 |
included in the exercise files.
It's also possible that the icons may not
| | 09:16 |
be remembered by Flash.
If that's the case you can go through and
| | 09:20 |
just add them again.
Anyway, the end AIR file is this one.
| | 09:25 |
It has an icon that looks like a box with
Air written on it, and you can see that
| | 09:28 |
it's an installer package.
I'll double click on it to install it.
| | 09:33 |
So first I'm warned that the signer of
this certificate Is an unknown possibly
| | 09:36 |
scary person.
That's okay, I'll click Install and we'll
| | 09:40 |
go ahead and click Continue here, and it
takes just a second and the application is
| | 09:43 |
installed in my computer.
Now this is running just like any other
| | 09:48 |
application on my computer like Word or
Photoshop or Flash.
| | 09:52 |
You can see I have a short cut here on my
Desktop and it also shows up in my System
| | 09:56 |
Tray, and there we have it.
You can create and deploy AIR projects
| | 10:00 |
within Flash Professional and make them an
installable application for the desktop
| | 10:04 |
and for mobile.
The Publish process is very similar for
| | 10:08 |
both.
The thing to take away from this, is that
| | 10:10 |
you have everything you need within Flash
to develop for desktop and mobile.
| | 10:15 |
If you feel comfortable with the basics of
creating content.
| | 10:18 |
Using things like movie clips and
tweening, that we've seen in this course,
| | 10:22 |
you're well positioned to go on to other
courses in the lynda.com training library.
| | 10:27 |
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 |
Thanks for spending these few hours with me.
| | 00:03 |
If you feel comfortable with the topics
we've covered, you're now up and running
| | 00:06 |
with Flash, with the tools that 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:17 |
So, if you're ready for more topics and
example applications, there's plenty at
| | 00:20 |
your fingertips here in the lynda.com library.
| | 00:24 |
The Flash Essential training courses
introduce even more features.
| | 00:28 |
And go into depth on how to use them.
There's also essential training for
| | 00:32 |
ActionScript courses, as well as titles
focusing on Flash for games, animation,
| | 00:36 |
mobile, video, and more.
The sky's the limit.
| | 00:40 |
So enjoy, and I wish you all the best.
| | 00:42 |
| | Collapse this transcript |
|
|
