IntroductionWelcome and overview| 00:00 |
So you have used Flash to create some
graphics and animation before, but want
| | 00:05 |
to learn how to do more. Well, it's
time to bring it to the next level.
| | 00:09 |
(Music playing.)
| | 00:13 |
Welcome to creating your first
web site with Flash CS4 Professional.
| | 00:18 |
I'm Paul Trani. I know making your first
Flash site can seem really daunting since it's
| | 00:24 |
so flexible, allowing for so many
different ways to do things. But what I offer you
| | 00:28 |
is a chance to really cut through
all that clutter, to build a really
| | 00:31 |
clean, sexy Flash site that focuses on results.
| | 00:35 |
It's going to be complete with:
dynamic animation, creative use of video and
| | 00:40 |
audio to make your site sing
and of course, interactivity.
| | 00:45 |
To top it off, we'll also create a
gallery that pulls in images dynamically and
| | 00:50 |
is easily scalable as your portfolio grows.
| | 00:54 |
And no site would really be complete
without a customizable contact form allowing
| | 00:58 |
viewers to e-mail you compliments on your site.
| | 01:01 |
Lastly, I have included multiple bonus
sites and each one leveraging the power
| | 01:06 |
of Flash and really creatively using the
same code you will learn in this course.
| | 01:11 |
So get ready to go to a whole new level
of web design using Flash CS4 Professional.
| | 01:17 |
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the
lynda.com Online Training Library or if
| | 00:05 | you are watching this tutorial on a disc,
you have access to the Exercise Files
| | 00:09 | used throughout this title.
| | 00:11 | Exercise Files for this title are
arranged by chapter, as you can see.
| | 00:15 | Mostly containing fla Flash source files.
Here is also an Assets folder, which
| | 00:20 | contains audio, design, and video files.
But everything is neatly organized and
| | 00:25 | ready for you to use.
| | 00:26 | If you are a monthly or annual
subscriber to lynda.com, you don't have access
| | 00:30 | to the Exercise Files but you can
follow along with your own if you like.
| | 00:34 | So let's go ahead and get started.
| | Collapse this transcript |
|
|
1. The Basics of Web DesignPlanning a successful web site| 00:00 |
What will determine the success of your
web site? A very important question and
| | 00:05 |
the answer to this question is really
going to determine every decision we make
| | 00:08 |
when creating our site, because this is
really going to determine our goal for the site.
| | 00:13 |
So what is your goal for your site?
Is it to get a job? Is it to make money
| | 00:17 |
selling a product or a service? Or you
are just expressing yourself creatively?
| | 00:22 |
It could be any one of these or you
can make up your own. But if your goal is
| | 00:27 |
to get a job, for instance,
you want to list your credentials.
| | 00:30 |
So whatever credentials you have that
qualify you for this job, you definitely
| | 00:35 |
want to play those up and
list those on your site.
| | 00:38 |
You will also want to show your
experience, not just talk about what you can do,
| | 00:42 |
but if you are a great photographer,
of course, you are going to show your
| | 00:45 |
best work on your site.
| | 00:47 |
Lastly, you want to give your users
the ability to get in touch with you. So,
| | 00:52 |
you've got to keep your users' goal in
mind as well, because they are there to
| | 00:55 |
learn something about you. Once they
have learned all this great information
| | 01:00 |
about you, you have to give
them the ability to contact you.
| | 01:04 |
Now the user also has a list of
expectations in mind as well. One of those is,
| | 01:08 |
of course, is the site easy to find?
If I type it in Google, does your site
| | 01:13 |
come up? Once I'm at your site,
is it easy to navigate? Is your content
| | 01:17 |
grouped logically, does it make sense?
Does it deliver the information that's
| | 01:21 |
expected from a user's standpoint?
Is the information given concise and is it
| | 01:27 |
given in a timely manner as well?
| | 01:29 |
So keep all of these user expectations
in mind along with their goals as well
| | 01:33 |
as your site goals and your site has a
great chance of being an awesome success.
| | 01:40 |
| | Collapse this transcript |
| Creating a site map| 00:00 |
Having determined the goal of your web
site, you can then move on to creating a sitemap.
| | 00:04 |
Well, what is a sitemap? Well,
a sitemap is generally a diagram of all
| | 00:09 |
the pages of your site and how they
are linked together. We want to map this out.
| | 00:13 |
Not only do we need to map out how
they are link together, but we need to
| | 00:17 |
map out what the content is.
| | 00:20 |
So we are going to determine our
content and then figure out how it links
| | 00:24 |
together. Take for example, John Doe's
web site. John Doe is a designer and on
| | 00:29 |
his site, we want to make sure we
include an introduction to John Doe,
| | 00:33 |
all about John Doe and his skills. We want
to show off his portfolio and then we
| | 00:38 |
want to have contact information or a
contact form, so potential employers can
| | 00:43 |
a get a hold of him.
| | 00:44 |
So you take all of that information
and in essence put it in buckets.
| | 00:49 |
These could very well end up being all
the pages of your site. So you want to
| | 00:53 |
determine how to navigate this
information once it's in these buckets.
| | 00:56 |
Now you can do this a number of ways.
| | 00:58 |
You could have all of the information
on one page, you could have multiple
| | 01:02 |
pages that link together, you can even
do a search field, a search engine that
| | 01:07 |
would actually search the content and
pull up the appropriate content. You can
| | 01:10 |
do a combination of any of the above
or something totally different, which is
| | 01:14 |
nice because Flash really
gives you the power to do so.
| | 01:17 |
There are plenty of examples out there
of this. We have everything from blogs,
| | 01:21 |
to craigslist, to Ben & Jerry's, but let's
go ahead and take a look at some of those.
| | 01:25 |
A blog is an example of an all-in-one
page where all the content is on one page
| | 01:30 |
ready to read. That's one approach you
can take. Next up is an index approach
| | 01:35 |
where all the pages are listed on the
home page and then I can click through to
| | 01:40 |
get to the various pages within this
site, such as how craigslist is built.
| | 01:45 |
Next up is a flat view. So, in essence
I can go from any one page to any other
| | 01:51 |
page in this site and it's pretty easy
because this content isn't that robust.
| | 01:56 |
So it only wants one page for each one
of these sections. Or you can go with
| | 02:01 |
strict hierarchy, which this Ben &
Jerry's example shows that if you want to
| | 02:05 |
get to the Products page, you have to
go through Our Products. So it's a strict
| | 02:09 |
hierarchy of information.
| | 02:11 |
Lastly, there is the multi-dimensional
hierarchy, like amazon.com, which allows
| | 02:16 |
me to search and pull up titles that
way or I can go through the various
| | 02:20 |
categories to find the same content.
Lots of information heavy sites are often
| | 02:26 |
multi-dimensional in hierarchy.
| | 02:28 |
For our needs we are going to go with
the flat structure. As you can see, we
| | 02:31 |
are going to start out on the home
page and from any one page you can get to
| | 02:36 |
any other page with one click. So you
really want to pick the navigation that
| | 02:41 |
is going to be best for your content,
starting with your content and then
| | 02:45 |
decide what's going to be easiest for
the user and often simpler is going to be
| | 02:49 |
a lot better.
| | 02:50 |
So with our information in place and
our structure set up, we can then work on
| | 02:55 |
the technical requirements for our site.
| | 02:58 |
| | Collapse this transcript |
| Technical requirements| 00:00 | What are your site's technical
requirements? Well, the site's technical
| | 00:04 | requirements are really determined by
your audience. Whatever your audience has,
| | 00:09 | we want to make sure our site
plays well on it. So whatever computer they have,
| | 00:14 | browser, whatever, internet
connection, we want to make sure our site
| | 00:18 | plays well with all of those specifications.
| | 00:21 | For instance, we want to make sure
pages appear quickly. We need to make sure
| | 00:26 | that initial download is between 100-
400 kilobytes. So that is somewhat small
| | 00:32 | but we want to make sure they see
something within the first 5 seconds.
| | 00:35 | Now you can then have other things load
as well and at the very least, we want
| | 00:40 | to at least show a progress bar of the
site downloading, but we need to need to
| | 00:44 | show something
immediately upon entering the site.
| | 00:48 | Now once they see your site, we
want to make sure the site fits well on
| | 00:51 | standard monitors. That means standard
monitors are roughly 1024 pixels wide x
| | 00:57 | 768 pixels high. Now that's the monitor
itself, but we need to account for the
| | 01:03 | browser, the browser chrome that is.
All of the buttons and trim on the browser.
| | 01:08 | So that means making our site a little
smaller, roughly about 1000 pixels X 700
| | 01:13 | pixels high and then smaller from
there. But don't go larger than that size
| | 01:18 | unless you want to make your users
scroll, which study show that really people
| | 01:23 | just don't like scrolling. So put
your critical content within this first
| | 01:27 | viewable area, if not
your whole site in that area.
| | 01:31 | Next, we'll need to make sure that our
site is compatible with major browsers.
| | 01:35 | So that means Firefox, Internet
Explorer or Safari. We need to make sure our site
| | 01:40 | shows up in those various browsers.
But what's great is that Flash sites
| | 01:44 | work well across different browsers.
All you need is the Flash Player.
| | 01:49 | There is about a 93% chance that users
have the Flash Player installed.
| | 01:54 | Most people in general do have the Flash
Player installed. So in essence, we create
| | 01:59 | SWF content that plays in a browser
and as long as that browser has the Flash Player,
| | 02:05 | they are going to be able to
get the full experience of our site,
| | 02:08 | which is great.
| | 02:10 | So once we have these technical
requirements hammered out, we can then work on
| | 02:14 | the design of the site.
| | Collapse this transcript |
| Web design considerations| 00:00 | What to consider when designing your
web site? Well, the first thing you want
| | 00:04 | to consider is your information and
make sure the hierarchy of information is
| | 00:10 | perfectly clear. Often times, the
logo or name of the site might be in the
| | 00:14 | upper-left portion of the screen,
which is a very important spot. We know
| | 00:18 | everybody can see that spot and
that's pretty much where the site goes.
| | 00:22 | So we know we are here on John Doe's
web site. He is a designer for hire.
| | 00:26 | We can easily see the navigation and
it flows right into the content.
| | 00:30 | So we need to make sure the information
is perfectly clear and the site flows well.
| | 00:35 | We also want to keep the text
legible and the font consistent because
| | 00:40 | we want to have consistency not only
on this page but from page to page.
| | 00:45 | So they know that they are on the same
site when going from page to page.
| | 00:49 | We also want to keep the body copy
bite-sized. So we want to keep it tight.
| | 00:53 | We know people usually scan pages and in
essence, don't stay on a page for longer
| | 00:59 | than 30 seconds. So that's why we
want to keep our body copy short.
| | 01:03 | We also want to keep our navigation
consistent and clear. You can see easily
| | 01:07 | see that we have a navigation bar at
the top. I know those four links are
| | 01:11 | basically buttons. We want to clearly
differentiate these as buttons because
| | 01:16 | they are in a separate area,
separate from the content below.
| | 01:19 | Now the content below does have
hyperlinks and we want to clearly differentiate
| | 01:23 | hyperlinks from the text. This is
often done with an underline and with a
| | 01:28 | change of color. So you really want to
keep the metaphor, since its own known
| | 01:32 | throughout the web.
| | 01:33 | You also want to indicate what clicking
a link will do. In this case, clicking
| | 01:38 | a link will open up a PDF file. So
if you keep all of these web design
| | 01:43 | considerations in mind, you will be
able to design not only a very well
| | 01:47 | designed site but a site that's easy to use.
| | Collapse this transcript |
|
|
2. Setting Up Your WebsiteImporting a design from Photoshop | 00:00 |
There are a number of ways you can create
the design for your Flash web site.
| | 00:04 |
Of course you can use Flash to create the
design, or you can use the program you
| | 00:09 |
are most comfortable in and then just
import that design you have created.
| | 00:14 |
Now this works exceptionally well when
creating the design in another program,
| | 00:18 |
such as Photoshop, Photoshop Elements,
Illustrator, or Fireworks. As you can see
| | 00:24 |
I have this file open in Photoshop
Elements and I have all the sections for my site
| | 00:28 |
laid out in various folders. So
I can turn on the About folder, I can turn
| | 00:36 |
on the Portfolio folder to see the
Portfolio section and then you can also see
| | 00:41 |
the Contact section in here as well.
| | 00:44 |
So everything is laid out in here and
I have done nothing tricky at all in this
| | 00:49 |
version of Photoshop. So all I need
to do is make sure it's saved and this
| | 00:53 |
document is saved and then I can go
into Flash. So here I'm in Flash, I just
| | 01:00 |
have a blank document opened. It's an
empty document, there is nothing in it,
| | 01:04 |
and all I have done to create that is
I went to File > New and just created a
| | 01:08 |
new Flash file. But what I want to do
now, since the layout currently isn't in
| | 01:13 |
here, I want to go ahead and import it.
So I'm going to File > Import down to
| | 01:18 |
Import to stage. From here I want to go
into the Assets folder, into the Design
| | 01:25 |
folder, and want to locate
that design file we just reviewed.
| | 01:30 |
And if just for reference I can
expand this out and show you all different
| | 01:34 |
formats that Flash can accept and as
you can see I can import Illustrator's
| | 01:39 |
files, freehand files, pink files,
Photoshop files. The bragging list is quite
| | 01:44 |
long. But in this case, it's just
going to be a PSD file that I'm going to
| | 01:48 |
open. So I'm going to select Open and
then I'm given this import wizard.
| | 01:55 |
This is great, because it allows me to
control how I want these different layers
| | 01:59 |
imported and you can see that they
mirror the same folders and same individual
| | 02:05 |
layers that were in my Photoshop files.
| | 02:10 |
So all I need to do is if I want to
include this Menu folder, is I need to
| | 02:15 |
check that box and then it will import
this folder. And I can twirl this down
| | 02:21 |
just to take a look at the content
within it. So I can see that I have this
| | 02:25 |
Contact layer and I can control how
it's imported on the right side here.
| | 02:31 |
So I don't want to import it as a
flattened Bitmap image. I want to import it as
| | 02:36 |
editable text, since it is text, and
I can see it's changed the icon here.
| | 02:42 |
So I want to do that for all of these
text elements in this folder. So now this
| | 02:51 |
editable text I can edit once it's in
Flash. I'm going to twirl that back up
| | 02:56 |
and then I'm going to go to the
Contact section. I'm going to make sure it's
| | 02:59 |
checked, because I want it to import.
And in this case I actually want to
| | 03:06 |
create a movie clip for this layer.
I'm going to explain that more, but in
| | 03:10 |
general what a movie clip is, it's a
self contained item that can be graphics,
| | 03:16 |
it can be sound, it can be a video, it
can be anything. It is the most flexible
| | 03:21 |
type of symbol that you can have in Flash.
| | 03:25 |
So that's why I want to import it as
a movie clip. So when in doubt, make
| | 03:30 |
something a movie clip. So again, the
entire Contact section is going to be a
| | 03:36 |
movie clip and if I twirl that down
I can see this movie clip is going to
| | 03:42 |
contain all of this subject matter.
I want to make sure that the text is
| | 03:47 |
editable. I want to import this
Contact man, which is actually going to be a
| | 03:55 |
bitmap image with editable layer
styles. Because I want to be able to go in
| | 04:01 |
maybe later on and change that
content there. So I'm going to make it an
| | 04:06 |
editable file.
| | 04:08 |
With this panel as well, I want to
make it editable paths and layer styles,
| | 04:12 |
because this is actually vector shape
from Photoshop. So I'm trying to keep all
| | 04:16 |
of my elements as flexible as possible
when importing them. Okay, lastly for
| | 04:23 |
this movie clip, I want to give it an
instance name. So here I'm giving it a
| | 04:28 |
unique name, so I can reference it in
ActionScript. So in general I'm going to
| | 04:33 |
give it a unique name of Contact_mc to
be used later. I don't have to do this,
| | 04:40 |
but this does have to be done if
I want to control it with code. So now that
| | 04:45 |
the Contact section is done I want
to do the same for the other sections.
| | 04:50 |
Make sure Portfolio is a movie
clip and it has an instance name of
| | 04:56 |
Portfolio_mc. Twirl that down.
Everything looks pretty good. I'm going to bring
| | 05:06 |
in this frame as in editable path and
layer style, because again this is a
| | 05:10 |
vector shape in Photoshop and I want
to make sure all my text is going to be
| | 05:16 |
editable text. Twirl that back up. The
About section, I'm going to check that.
| | 05:24 |
I'm going to create a movie clip for
this layer as well. About_mc. Mc stands
| | 05:30 |
for movie clip. That is its instance
name, so I can reference it later.
| | 05:36 |
And notice how I have kept the registration
point in the upper left for all of these.
| | 05:41 |
That's just a good practice. This is
basically the rotation point if you will,
| | 05:46 |
but in general, most of the time you
want to leave it in the upper left. In the
| | 05:51 |
About section, I'm going to make sure
the text is editable. This billboard,
| | 05:56 |
I do want to make sure it's bitmap
image with editable layer styles, and this
| | 06:00 |
panel as well, editable paths and
layer styles. So everything is pretty darn
| | 06:06 |
flexible now. Lastly, I want to do
the Home section. I'm going to create a
| | 06:10 |
movie clip for this layer. I'm going
to call it Home_mc, twirl that down.
| | 06:18 |
Bring in all of the text as editable
text, and this Home man is going to be an
| | 06:27 |
editable layer style, as well as
this panel here. And now that section is
| | 06:36 |
looking pretty good. The top bar, I'm
just going to go ahead and create a movie
| | 06:42 |
clip for this layer as well. In the
Background, I'm going to go ahead and
| | 06:50 |
create a movie clip for this layer
too. This time I'll only give this an
| | 06:54 |
instance name of bkgd background_mc.
| | 07:00 |
Now I'm calling everything that's movie
clip an _mc for its instance name, and
| | 07:08 |
this is just a common practice, but it
isn't necessary. In general, I'm just
| | 07:13 |
defining that this is a movie clip
for use later. So everything is looking
| | 07:18 |
really good as I click back up through
all of them. This is the folder. That's
| | 07:22 |
the only folder that is going to be a
folder in my Timeline as you will see in
| | 07:26 |
a second. The rest are movie clips. Now
I want to direct your attention down to
| | 07:30 |
this lower portion. So I want to
convert all the layers to Flash layers. So all
| | 07:35 |
the Photoshop layers are going to be
Flash layers, and I want to place all
| | 07:39 |
these layers at their original
positions. So everything is lined up where it
| | 07:43 |
should be. And the last
thing I need to check is this.
| | 07:46 |
I want to set the stage size to the
same size as the Photoshop canvas, which is
| | 07:51 |
1000 pixels X 700 pixels high. I'm
going to go ahead and select OK. And it
| | 07:57 |
brings in all of my elements onto the
stage. In fact, I'm going to click here
| | 08:02 |
and view everything in window. So
Fit in Window, so we can see all of the
| | 08:08 |
content. And everything is overlapped
on top of one another. But if I expand
| | 08:13 |
out this Timeline, we can see
everything that was imported.
| | 08:16 |
Just like I mentioned earlier, this
Menu folder is the only thing that came in
| | 08:21 |
as a folder, and I can twirl that up,
but we can see that each one of these
| | 08:27 |
layers is a Menu item. As I turn those
off, and turn them back on, you can see
| | 08:33 |
what they are. I'm going to go ahead
and twirl that up. You can see all the
| | 08:40 |
other various sections. Let me go ahead
and turn off some of these, except for
| | 08:43 |
the Home section, and if I select this
Home section, and direct your attention
| | 08:52 |
over the Properties panel, you can see
that its instance name is Home mc.
| | 08:57 |
So now I can control this. It's setup
to be controlled with ActionScript.
| | 09:00 |
And all of these sections are setup
that way. About mc, and this is the way
| | 09:05 |
we want to work. We want to make sure
everything comes in correctly, Portfolio mc,
| | 09:10 |
and then Contact mc. Like I said,
I brought it in as a movie clip. It says
| | 09:18 |
it's a movie clip and its instance name is
Contact mc. Okay, the last area I want to
| | 09:22 |
point us to here is the Library panel.
So if I go to Window, when twirl the way
| | 09:29 |
down, you will see Library. I'll just
open that up. I can see that I have this
| | 09:35 |
Design psd assets folder. So this
contains everything that I just imported.
| | 09:40 |
If I twirl that down, here's all of the content.
| | 09:43 |
So if I want to see what's used in the
Home section, I can twirl that down, and
| | 09:47 |
see that there is the Adobe
Certified Expert logo, and some of the other
| | 09:51 |
elements. And again, these are all
movie clips, because that's what I defined
| | 09:55 |
them as when I imported them But
I really love how it kept everything organized
| | 10:00 |
in the Library panel, as well as everything
organized in the Timeline panel as well.
| | 10:07 |
So really your goal is to design in
the program you are comfortable with,
| | 10:10 |
import it, and then you'll be ready
to go to start animating and adding the
| | 10:14 |
functionality to your web site that you need.
| | 10:18 |
| | Collapse this transcript |
| Creating sections| 00:00 |
Once I have my design in place, I can
then start mapping out all the various
| | 00:04 |
sections for this site. I'm going to do
this by spacing out all of the content
| | 00:09 |
and using frame labels, so the entire site
is going to exist within this timeline.
| | 00:16 |
So the first thing I want to do is
I want to extend the timeline for all of
| | 00:23 |
these layers. So I'm going to go down
to frame 40, and I'm just going to click
| | 00:28 |
and drag to select those multiple
frames. This allows me to do a right-click
| | 00:36 |
and then insert a frame for all of
those layers. So it's going to extend the
| | 00:41 |
timeline for all of those layers. So
let's watch it. Insert Frame and now it
| | 00:46 |
extends the timeline.
| | 00:48 |
Currently, nothing is happening
because there is no animation going on,
| | 00:52 |
but I have extended the timeline and if
I hit the Enter key, I can watch it play through.
| | 00:57 |
But in general this allows me to space
out all of my sections within this area.
| | 01:04 |
Now what I want to do first off is I'm
going to add a new layer now, because
| | 01:08 |
I want to add a layer that has frame
labels for each of the sections.
| | 01:12 |
So I'm going to go down here to the bottom
of the Timeline panel and I'm going to
| | 01:17 |
click New Layer, and I actually created
a new layer inside of this folder.
| | 01:22 |
But I can click and I can move any layer
I want just by clicking and dragging it.
| | 01:27 |
So I can drag this layer outside of
this Menu folder and put it up on top,
| | 01:33 |
the very top layer, I want this to be my
Actions/Labels. That's what I want to call it.
| | 01:41 |
Notice how it actually cuts off
the name. Well, if I just roll over this
| | 01:45 |
very edge, I can grab that and extend
that out so that I can read that label
| | 01:52 |
for that layer.
| | 01:53 |
All right, here's my Actions and Labels
layer, and what I want to do here is
| | 01:58 |
I want to add some various labels to
different parts of this timeline. So
| | 02:03 |
starting with this first frame, I'm
just going to click on that first keyframe
| | 02:07 |
there and in the Properties panel,
under Label, for the name I want to type in
| | 02:13 |
Home, and then hit Enter. As soon as
I hit Enter, I can see that it says Home,
| | 02:18 |
right here. So this is my Home section.
| | 02:22 |
The other sections we have are the
About section, Portfolio, and the Contact
| | 02:26 |
section. So let's go in ten frames to
the tenth frame, and what I need to do is
| | 02:32 |
I need to insert a keyframe, because
on this keyframe I want to go ahead and
| | 02:36 |
add a new frame label. So I'm going
to right-click and I'm going to go to
| | 02:42 |
Insert Keyframe this time. And it
gives me this empty dot that inserted a
| | 02:48 |
keyframe. It's a blank keyframe. If
I select it, I can go over to my Properties
| | 02:55 |
panel under Label to the Name and
I can type in about and hit Enter. So now
| | 03:00 |
I have two frame labels, Home and about.
| | 03:04 |
I am going to do this two more
times. So in Frame 20 I'm going to do
| | 03:08 |
right-click, and Insert Keyframe, and
it inserts the keyframe and allows me to
| | 03:13 |
add a label in Frame 20 as well,
Portfolio. And frame 30, right-click, Insert
| | 03:24 |
Keyframe, and I can type in Contact
in the Properties panel under the Label
| | 03:30 |
section. So those are all my
sections. It's mapped out correctly.
| | 03:35 |
Now all I need to do is adjust my
content so it appears in that defined area.
| | 03:42 |
So let me close this Menu folder, and
now I want to go ahead and extend out the
| | 03:48 |
appropriate content to the appropriate
area. So I'm going to turn off Content,
| | 03:53 |
and I'm going to turn on the Home
section, and turn on the About section.
| | 03:59 |
It really doesn't matter whether these are
turned on or turned off. What I want to
| | 04:03 |
do now is I want to grab the
appropriate section and in this case the About
| | 04:06 |
section. I'm going to grab that
keyframe just by doing a click and drag, and
| | 04:11 |
dragging it down ten frames in.
Now it exists at this point in time.
| | 04:18 |
In fact, let me turn off these other
two layers just so see you can see it.
| | 04:22 |
There is my Home section, here is my
About section. At frame 10 we see the
| | 04:27 |
About section. But look what's
happening, as these two are actually on top of
| | 04:33 |
one another. I can still see, if you
look right there and if you look at this
| | 04:37 |
character here, he is the man on Home
page, so it actually shows both at the
| | 04:42 |
same time. So what I need to do is
I want to make sure the Home section doesn't
| | 04:46 |
exist at this point in time. So what
I need to do is click in that frame there,
| | 04:51 |
just right underneath the frame label
About, and do a right-click and this time
| | 04:58 |
I'm going to go ahead and insert a
blank keyframe. So that item will no longer
| | 05:02 |
exist and you will see
that silhouette disappear.
| | 05:05 |
Insert Blank Keyframe, he goes away. So
one second he is there, next second he
| | 05:10 |
isn't and that's what I want to do
for all these sections, make sure the
| | 05:14 |
appropriate movie clip exists for its
point in time and then the next ones
| | 05:18 |
exist in its point in time where it
needs to. So let's go ahead and take the
| | 05:22 |
Portfolio section, I'll turn that on,
I can grab that keyframe and click and
| | 05:27 |
drag it down to frame 20, the Portfolio
label should be right above it and now
| | 05:33 |
it appears at that point in time.
| | 05:35 |
I did the same for Contact, click
and drag that down, just like that.
| | 05:41 |
And again, just like I did before, if
I don't want the About section to exist
| | 05:45 |
beyond frame 20, I just do the right-
click, Insert Blank Keyframe. Same thing
| | 05:52 |
for the Portfolio section. I don't want
it to exist in the Contact section, so
| | 05:58 |
right-click, Insert Blank Keyframe.
| | 06:03 |
And there we are. So now if I just
jump around in this timeline, I can see
| | 06:08 |
here's my Home section, my About
section, my Portfolio section and my Contact
| | 06:13 |
section. Notice how you don't see it
here, because I have it turned off, but if
| | 06:16 |
I turn that on, we can see out Contact
section. So this is great, great for my
| | 06:22 |
site, great to set it up this way,
with frame labels I can easily see all the
| | 06:27 |
sections defined and what's in those
particular sections, and this is real easy
| | 06:31 |
to navigate the site.
| | 06:32 |
But now watch what happens when I hit
Play. In fact, if I do a Control > Test
| | 06:37 |
Movie, I can watch the SWF, and I can
see it at its actual size. We can see
| | 06:46 |
it's flashing through all of the
sections, which we know is unacceptable.
| | 06:49 |
I actually wanted just to stop on
that Welcome frame, right here.
| | 06:56 |
So this is your introduction to
ActionScript, if you are not familiar with it.
| | 07:00 |
I'm going to select that first frame
and I'm going to go to Window > Actions,
| | 07:07 |
to open up the Actions panel. Here is
my Actions panel, and all I need to do
| | 07:14 |
here is type in the word stop();. This
is the code I want to write if I want to
| | 07:29 |
stop a timeline. So let's take a look
what happened. Because I put it actually
| | 07:33 |
in this very first frame and you can
see there is a little lower case 'a' that
| | 07:38 |
appears, it says "hey, you know what,
there is an Action that exists here and
| | 07:41 |
it's just a stop action," because I want
the timeline to stop when it hits this first frame.
| | 07:47 |
So let's go ahead and test this now.
I'm going to go to Control, down to test
| | 07:52 |
movie, and we can see that it has
stopped on the first frame, perfect, ready to
| | 08:00 |
go, turn off all of our sections, our
setup to where I can start adding some
| | 08:05 |
various buttons and the navigation here,
but you can see how easy this is and
| | 08:10 |
how intuitive it is to basically add
labels and then add content to these
| | 08:14 |
sections as well. It makes it really easy to
make and to develop a Flash web site this way.
| | 08:21 |
Now there are other ways to do it,
but this is the most user friendly.
| | 08:25 |
| | Collapse this transcript |
|
|
3. Adding NavigationCreating menu buttons | 00:00 |
What I want to do now is create menu
buttons that will eventually go to the
| | 00:04 |
various sections of the site and I'm
going to do that in a very intelligent way
| | 00:09 |
by making a reusable button.
| | 00:11 |
So here are my text items up at the
top here. These are basically static text
| | 00:16 |
fields and I can click on them and
I can see in the Properties panel it is a
| | 00:21 |
Static Text item. Now I don't want to
have this text as part of the button.
| | 00:27 |
I want to put a button behind this text,
so I can use this button across all four text items.
| | 00:36 |
So the first thing I need to do is
twirl down this Menu folder, because I want
| | 00:41 |
to create a new layer in this Menu
folder that's going to hold our button.
| | 00:45 |
I'm going to click New Layer in the
Timeline panel and I want to rename this layer
| | 00:50 |
by double-clicking on it and typing
in Buttons. Now I can drag this Buttons
| | 00:56 |
layer down to the bottom of this Menu
folder below all the other text. And just
| | 01:01 |
it keep me from accidentally selecting
this text, what I can do is I can lock
| | 01:07 |
down those layers. So don't want to
accidentally select that text and move it;
| | 01:12 |
I want to lock it down, because I'm
going to be creating my button in this layer.
| | 01:17 |
All right, now what I want to do is
in my toolbar, halfway down I want to
| | 01:24 |
select the Rectangle tool. The first
one in this list, Rectangle tool, and then
| | 01:31 |
what I want to do is I want to choose
my Stroke and Fill Color. And for my
| | 01:35 |
Stroke color I'm not going to pick a
color at all, I'm going to select this box
| | 01:40 |
with a line through it, because
I don't want there to be a stroke.
| | 01:42 |
So I'll select that and I want to go ahead
and select the Fill color. I can pick any
| | 01:47 |
color I want if I just click and hold
that down, in this case I'm just going to
| | 01:51 |
select black and now I'm ready to go.
| | 01:54 |
So make sure you are on the appropriate
layer, in this case the Buttons layer,
| | 01:58 |
because whatever layer you are on is
which you are going to end up drawing on to.
| | 02:01 |
So now I can just go ahead and
click and drag to draw a box around that
| | 02:07 |
Home text, roughly about that size.
That looks pretty good. If you want to
| | 02:12 |
reposition that, you can always
select your Selection tool, select your box
| | 02:17 |
that you have just drawn and you can
use your Arrow keys on your keyboard to
| | 02:21 |
line it up just right.
| | 02:22 |
All right, so here's our shape that has
just been drawn. If I select it, I can
| | 02:27 |
see in my Properties panel, it's just
a shape, sort of a raw shape, and I can
| | 02:32 |
change the color and do some other
things with it, if I want. But what I want
| | 02:35 |
to do is I want to turn this into a
button symbol and the easiest way to do
| | 02:40 |
that is go to Modify and make sure
it's selected. I want to go to Modify >
| | 02:46 |
Convert to Symbol. Now this allows me
to convert this shape to a symbol and
| | 02:51 |
I'm going to call this Generic Button,
because it's not going to have any text in
| | 02:57 |
it, it's just going to be our standard
generic button for all of our navigation
| | 03:01 |
items at the top, so we'll
just call it Generic Button.
| | 03:03 |
I want to make sure the type is a
Button and the registration point can be in
| | 03:08 |
the upper left, and select OK. All
right, now we can see in our Properties panel,
| | 03:14 |
it says that it's a button instead of
being a shape. But know where I put it.
| | 03:19 |
Let's take a look at where
I put this file. I'm going to go down to
| | 03:23 |
Library and open up my Library panel
and I can see that here is my Generic
| | 03:29 |
Button. So any time you make a symbol,
it's going to put it in your Library panel,
| | 03:34 |
there it is.
| | 03:35 |
All right, so actually I want to edit
this button now and the easiest way to do
| | 03:40 |
that is just by double-clicking it.
Now look what happens, it washes out
| | 03:45 |
everything else, scales it back, so
you can focus on what you have just
| | 03:50 |
selected. In this case it's this
Generic Button. So it tells me right here,
| | 03:54 |
this is a Generic Button and let's
take a look at my timeline. My timeline
| | 03:59 |
shows this keyframe here and it says
Up, Over, Down, and Hit. So I can put
| | 04:05 |
different items in these various frames.
That's what I want to do. I want to go
| | 04:11 |
ahead and insert some additional
keyframes. So for the over frame, I'm going to
| | 04:15 |
right click and I'm going to insert a keyframe.
| | 04:21 |
Now I can go ahead and modify this. So
in this case, maybe if I want to select
| | 04:28 |
this shape, I can select the Free
Transform tool, the third item down in our
| | 04:35 |
Tools panel, and I can go ahead and
scale it like that. Because on the over
| | 04:41 |
state, I just want to show this thin
little bar. So what's going to happen is
| | 04:45 |
when the user rolls over this word Home,
they are going to get this thin bar
| | 04:49 |
across the top.
| | 04:50 |
For the down state, I want to do a right
-click and insert a keyframe there as well.
| | 04:56 |
That's where I want to get my
full Fill Color covering behind the word
| | 05:03 |
expanding down. So if you're over
state, you are going to see the bar.
| | 05:08 |
Down state, that means when you click down,
your mouse down, it's going to show this
| | 05:13 |
full black area. And your hit state is
the last area I want to add a keyframe too.
| | 05:21 |
I'm going to insert a keyframe
here and what this says is this is your
| | 05:24 |
active area. So if I expand this out,
this is going to help users to interact
| | 05:30 |
with this button. So now the Active Area,
when the user rolls their cursor over
| | 05:35 |
this button, it's actually going to be
active in a larger area as opposed to
| | 05:40 |
this smaller area.
| | 05:42 |
So it's always good idea to make your
hit area larger just to make it easy for
| | 05:46 |
people to click on your buttons. All
right, so there it is. The last thing
| | 05:52 |
I'm going to do is I actually don't want
anything in this first frame. So I'm going
| | 05:56 |
to select that shape and I'm just going
to hit the Delete key. So now there is
| | 06:02 |
nothing in the first frame, there is
something in the over frame, there is
| | 06:05 |
something in the down frame, that full
square and then the hit area is larger.
| | 06:12 |
To get back out to the main timeline
all I need to do, since I'm done editing
| | 06:16 |
this button, is I click on
Scene 1 and now I'm back out here.
| | 06:22 |
It's interesting to note that it now
turned our black square into this teal
| | 06:29 |
color and that just shows you that it
gives a reference color even though there
| | 06:33 |
is nothing in the first frame. So if
I double-click on it, it's basically
| | 06:37 |
showing that there is nothing in this
first frame, but an item does exist. So
| | 06:42 |
that's why it makes it teal. You will
never see the teal color. They are just
| | 06:45 |
giving you a generic color so you know
that this is a button here. So what
| | 06:51 |
I want to do now is I want to
go ahead and test this for you.
| | 06:55 |
So I'm going to go to Control > Test
Movie. I expand this out and when I roll
| | 07:02 |
over this area, I can see that black
bar up here at the top. And when I click
| | 07:07 |
down, so mouse down, I can see the
full black square and then it will take me
| | 07:11 |
wherever I need to go once I add the
action to it. But you can see once I click,
| | 07:16 |
I can get the full square and
then when I release it goes back to that
| | 07:21 |
over state. Keep in mind my hit area,
so that last keyframe I added, is that
| | 07:26 |
larger square. So when I'm actually
out a little further, it still activates
| | 07:31 |
the button. So that makes it easier
to click on any button that you'd like.
| | 07:35 |
Now remember the text is actually not
part of this button and that allows me to
| | 07:39 |
reuse this button for these other
navigation items as well. So I'm going to
| | 07:45 |
close this and I'm going to go ahead
and duplicate this button. An easy way to
| | 07:52 |
do that is just go to Copy and then
Paste in Center and I have just copied and
| | 08:01 |
pasted that item. Now I can place
that right here. Another way to actually
| | 08:07 |
bring out items from your library is
if I expand this out and I go to my
| | 08:14 |
library, here is my Generic Button.
I can easily drag this onto my document as
| | 08:21 |
well. So now I have three buttons and
let's do that for the last one, drag out
| | 08:26 |
my Contact button there.
| | 08:27 |
If I want to adjust these I can use my
Arrow keys, line them up however I want,
| | 08:34 |
like that. It looks pretty good and
let's go ahead and go to Control > Test
| | 08:40 |
Movie. So now when I roll over Home
I get that button, About, Portfolio,
| | 08:46 |
Contact, and when I click on each one,
I can see that I get that hit area as well.
| | 08:53 |
I do need to adjust these two a little
more. So that's what I'm going to do,
| | 08:57 |
adjust them a little more and I can
scale them if I want to. I can manipulate
| | 09:02 |
these buttons more if I want to, but
in general they are looking pretty good.
| | 09:07 |
But that's just to show you. I'll close
that panel, so we can see all of these.
| | 09:13 |
You can see that I can make one
button and reuse it four different times in
| | 09:18 |
this case, and the great thing about
this is if I want to change the look in
| | 09:22 |
any way, it's really a matter of
changing that one instance. In fact, if I go
| | 09:28 |
to the hit area for instance, I can go
ahead and resize it to maybe something
| | 09:34 |
smaller, and I can see how it's changed
it across the board. In fact, if I make
| | 09:42 |
this a little smaller, you can see
that it changed in all those instances as well.
| | 09:52 |
So again, one symbol is all I need to
edit and it edits across all three. I can
| | 09:58 |
then go ahead and add some actions to
it and actually have these buttons work
| | 10:01 |
when I'm ready to do that.
| | 10:04 |
| | Collapse this transcript |
| Adding button events| 00:00 |
Once you have created some buttons, the
next step you would want to do is make
| | 00:04 |
the buttons work by adding some
ActionScript code to them. And that's what
| | 00:08 |
I'm going to do with these buttons here.
I'm going to make it so when you click on
| | 00:12 |
the About button, it's going to jump
to the about label. So that's the code
| | 00:17 |
I need to write.
| | 00:18 |
But the first thing I need to do is
make sure it has an instance name. In fact,
| | 00:23 |
I want all of the elements I want to
listen for to have a unique name. That's
| | 00:30 |
what a unique name really is.
It's an instance name is what it is.
| | 00:34 |
So I'm selecting the generic button
that's underneath the Home text. I can see
| | 00:38 |
that it's an instance of the
GenericButton and for the instance name, which
| | 00:43 |
means the unique name, I'm going to
give it the name home. That GenericButton
| | 00:47 |
is now the home button.
| | 00:48 |
For this About GenericButton, I'm going
to make sure it has an instance name of
| | 00:54 |
about. Selecting the Portfolio button,
I'm going to call it portfolio. At this
| | 01:01 |
time you are probably noticing a
pattern. This last instance name is going to
| | 01:05 |
be Contact, and now each instance of
this GenericButton has a unique name. So
| | 01:14 |
now I can listen for it, because I want
to do is I want to listen for the click
| | 01:19 |
of this about instance and I want to
jump to the About section. In fact, let me
| | 01:26 |
scroll up, here is my about
label that I want to jump to.
| | 01:30 |
All right. I'm going to add this code
in the very first frame, because I want
| | 01:34 |
this to happen immediately, as soon as
you come to the site. So in this first
| | 01:38 |
keyframe, I'm going to select it,
go to Window, down to Actions.
| | 01:43 |
Now, this is where I'm going to write
my code. So we are going beyond a stop
| | 01:47 |
action, and we are going to write an
event handler. So bear with me here.
| | 01:53 |
This is some great powerful code and as
soon as you learn how to write code by
| | 01:58 |
handling events and listening for events,
you can listen for any type of event
| | 02:03 |
you want, it's really powerful.
| | 02:05 |
First thing I'm going to do is I'm
going to do with two forward slashes.
| | 02:08 |
This allows me to write a comment in here
as to what's going to take place. So
| | 02:11 |
I'm going to do two forward slashes and
I want to handle events for buttons. So
| | 02:20 |
this code here is going to handle
events for buttons. So a click is an event,
| | 02:26 |
a rollover is an event, and I'm going to handle
the events for buttons in this code right here.
| | 02:32 |
So Flash will ignore anything with
these two forward slashes; it's a way to
| | 02:37 |
comment your code, to basically
explain what's going to happen.
| | 02:41 |
So the next thing I need to do is
define what I want to add an event listener to.
| | 02:47 |
So let me just type in about.
about is the instance name. Here is my
| | 02:52 |
instance name. It's called about and
I'm going to add an event listener to this
| | 02:59 |
instance name. It's going to
listen for something specific.
| | 03:03 |
In fact, since I did this open
parenthesis, I can see that it's going to listen
| | 03:07 |
for a certain type of mouse event.
So I'm going to type in MouseEvent.
| | 03:11 |
It's going to listen for a mouse
event called CLICK. There it is.
| | 03:19 |
Notice how I always get this pop-up as
well. That allows me to select any one
| | 03:24 |
of these items as well. In this case,
all I need to do is escape out of that,
| | 03:30 |
since I have already typed in CLICK.
| | 03:32 |
Let me expand my Actions panel here.
So we are listening for a Mouse CLICK on
| | 03:42 |
this about button. That's what we are doing.
| | 03:45 |
So the next thing I need to do is
add a comma, because I want to add the
| | 03:49 |
function that's going to happen once
you click on this about instance. So
| | 03:55 |
I'm just going to call it clickSection
for now. So it's going to jump to this
| | 03:58 |
specific section. Close parenthesis,
end with a semicolon. I'm going to hit
| | 04:04 |
Enter to start a new line.
There is my event listener.
| | 04:08 |
So the about instance has an event
listener attached to it that's listening for
| | 04:14 |
the CLICK sound. As soon you click on
this instance, it's going to fire off
| | 04:19 |
this clickSection function. So
now we need to write this function.
| | 04:24 |
So I'm just going to go down to a new
line and I'm going type in function,
| | 04:28 |
clickSection, and its going to expect
an evtObj: Mouse; This is what it needs
| | 04:40 |
to listen for. Again, anytime you get
this pop-up window, it allows you to
| | 04:45 |
select the code you want so you don't
have to type it out and so there is no
| | 04:49 |
mistyping. I'm going to select
MouseEvent, because that's what this function is
| | 04:53 |
listening for. It's listening for a
mouse event. What's the mouse event? Well,
| | 04:57 |
it's listening for the CLICK.
| | 04:59 |
Next, I'm going to add an opening
curly brace and I'm going to go down two
| | 05:04 |
lines and add a closing curly brace,
because anytime you click on this button,
| | 05:08 |
it's going to execute anything that
goes on between these two curly braces
| | 05:13 |
right here. So whatever you put in
here is going to happen when you click on
| | 05:16 |
the about button.
| | 05:17 |
I am going to add another comment, and
this is just going to describe what's
| | 05:22 |
going to happen next. So I'm going to
add a trace action, and this trace is
| | 05:27 |
going to show what's happening in the
output window. Let me expand this panel
| | 05:39 |
out a little more.
| | 05:41 |
So let's go ahead and write this trace
function. trace. Trace is a way to show
| | 05:48 |
something in this output window
without affecting the design or anything like
| | 05:53 |
that. It's great for testing.
| | 05:55 |
So I'm adding this trace, ("The About
button was clicked!") That's what we are
| | 06:02 |
doing. This is the phrase we want to
print out, if you will, in the output
| | 06:07 |
window, which you are going to see in a second.
| | 06:10 |
So let's just go ahead and do that.
This is looking great. I'm going to go
| | 06:13 |
ahead and go to Control > Test Movie.
Here is my Home, here is my About, and
| | 06:20 |
I'm going to click on it, and let's
take a look at our Output panel.
| | 06:27 |
Sure enough, The About button was clicked!
And maybe I'll click it a couple of more
| | 06:32 |
times. Yes, it prints out every single
time I click on that button. So you can
| | 06:40 |
see I have clicked on it for
about seven or eight times.
| | 06:43 |
So this is working great. This
basically helps to show me that this button is
| | 06:48 |
working. Very helpful. Trace is very
helpful. My code is working great.
| | 06:54 |
My function is working great. But nothing
happened there. I didn't actually jump
| | 06:58 |
to that section, and that's the
line of code I want to add next.
| | 07:02 |
So I want to go to the section clicked
on, which in this section is going to be
| | 07:09 |
the About section. So gotoAndStop is
the function I want to call. And within
| | 07:17 |
these two parenthesis is where I'm
going to put the label name. So within
| | 07:23 |
quotes, within my parenthesis,
I want to add the word about.
| | 07:28 |
So this has to match up with, if
I click to my Timeline, with this frame label
| | 07:35 |
right here. So I can see that says about.
Well, in my code I need to make sure
| | 07:40 |
this says about, because
this is the frame label.
| | 07:44 |
Now, I'm going to go ahead and go to
Control > Test Movie, and we can try this
| | 07:52 |
out again. So now when I click the
about button, it should not only print out
| | 07:57 |
the phrase that you are going to the
about section, it should actually change
| | 08:00 |
the scene here and show the About section.
| | 08:03 |
Click. Sure enough, it shows the
About section. It still has my trace,
| | 08:08 |
everything is working
beautifully, and it's good to go.
| | 08:12 |
Now, I know this might seem like a lot
of code, but this is really powerful,
| | 08:16 |
because I can deal with many different
mouse events and I can listen for many
| | 08:20 |
different items. So as soon as you get
comfortable with these lines of code,
| | 08:25 |
you can really extend all the
functionality of Flash and to really make a
| | 08:30 |
powerful web site.
| | 08:32 |
| | Collapse this transcript |
| Reusing functions | 00:00 |
Now the goal is to have each button
jump to its particular section with as
| | 00:04 |
little code as possible, because the
less code, the easier it is to maintain
| | 00:09 |
and the less errors I'll have. So
you will definitely find this useful.
| | 00:13 |
So let's just review, because I do have
this instance name called home and it's
| | 00:22 |
an instance of the GenericButton. So
the instance name is called home and then
| | 00:26 |
I have this GenericButton. Its
instance name is called about.
| | 00:31 |
So the about button does have code
attached to it, if you will, and I just need
| | 00:37 |
the Home section to work. In fact, I'll
go to Control > Test Movie. You can see
| | 00:44 |
if I click on About, I'll jump to the
About section but nothing happens when
| | 00:48 |
I click the Home button. I even get in
the Output panel 'The About button was clicked!'
| | 00:54 |
So I want to do the same thing for
the Home button and all the other buttons.
| | 00:58 |
So let me close that. Let me scroll
up to the top and click on that first
| | 01:03 |
keyframe there, where all my code is.
I'm going to go to Window, down to the
| | 01:08 |
Actions to open up the Actions panel,
and here is my code to make the about button work.
| | 01:14 |
I can see the about instance has an
event listener attached to it that listens
| | 01:19 |
for the CLICK. As soon as you click on
that button, it's going to fire off this
| | 01:23 |
function called clickSection right
here, and thus that gives us the trace
| | 01:29 |
statement that we saw on the Output
panel. The About button was clicked! And it
| | 01:33 |
goes to and stops the About section.
| | 01:36 |
So again, I want to do the same thing
for the Home button. So an easy way to do
| | 01:41 |
this is just to select all this code,
right-click, Copy, and then just beneath
| | 01:48 |
that last function, I can click Paste
and then modify this accordingly for
| | 01:55 |
the Home button.
| | 01:56 |
So instead of listening for the about
instance, I want to listen for the home
| | 02:01 |
instance. It's going to listen for the
mouse event CLICK and then it's going to
| | 02:08 |
fire off this section.
| | 02:09 |
I don't want to fire off this
clickSection this up here. I want to modify this
| | 02:15 |
function here. So I want to actually
call this function here. So clickHome.
| | 02:20 |
I am going to double click on this word
to select it and I'm going to copy it.
| | 02:25 |
I'm going to double click this word
just to right-click and paste that name. So
| | 02:30 |
it's going to clickHome function, it's
what's going to be fired off. It gives
| | 02:36 |
me a trace statement, where I want to
change out the about word in here and
| | 02:41 |
type in home to replace it. It's
going to trace out The Home button was
| | 02:45 |
clicked! and it's going to
gotoAndStop the home label.
| | 02:51 |
So this function is going to jump
and go to the home label. This function
| | 02:57 |
actually calls and goes to the about
label. If I minimize, click that gray bar
| | 03:03 |
to minimize the Actions panel, I can
see that we have this home label and we
| | 03:07 |
have the about label.
| | 03:09 |
So let's go ahead and test this out
now. I'm going to go to Control > Test
| | 03:13 |
Movie and let's watch this. I'm going
to click on the About button. It jumps to
| | 03:20 |
the About section. Click the Home button,
it jumps to the Home section and it's
| | 03:24 |
working great. I can click back and
forth between them as many times as I want
| | 03:30 |
and it works great.
| | 03:31 |
So let me close that test and let's go
back to our code. Because what I want to
| | 03:37 |
do with this code, if we go back to the
Actions panel, is I want to shorten it.
| | 03:42 |
Because, as you can see, I have
duplicated a lot of elements. These are highly
| | 03:47 |
similar. Any time you find yourself
duplicating code, you should really look at
| | 03:53 |
how you can modify them in order to
make them shorter and I'm going to show you
| | 03:57 |
exactly how to do that.
| | 03:58 |
So what I want to do is I want to
have this home event listener call this
| | 04:04 |
clickSection. So I'm first off just
going to select it and click and drag it up
| | 04:11 |
to Line 5. I'm going to hit Return. So
here are my two event listeners. I want
| | 04:17 |
both event listeners to call this
clickSection. So I'm going to change this
| | 04:23 |
from clickHome to clickSection.
| | 04:26 |
Now that this clickHome function is not
being called, I can select it and then
| | 04:32 |
just hit Delete because it is no
longer needed. Both this home and about
| | 04:37 |
instance are calling this clickSection
function. Now I'm going to show you how
| | 04:40 |
to modify this for both buttons.
| | 04:43 |
I am going to start with this trace
statement. I'm going to swap out this word
| | 04:48 |
for the target name, so I'm going to
go ahead and add two quotes and within
| | 04:55 |
those two quotes I'm going to add two
plus signs. So I'm concatenating some
| | 04:58 |
phrases together.
| | 05:01 |
What I want to show in the output
window, it's going to say the home or about
| | 05:05 |
section button was clicked. So within
those two plus signs I want to type in
| | 05:11 |
this magic line of code, which I find
very powerful, evtObj. So the EventObject
| | 05:21 |
hits target name so whatever called
this function, grab its name, whether it's
| | 05:30 |
home or about, and put it right in here.
So this is either going to say home or
| | 05:36 |
it's going to say about.
| | 05:38 |
The next thing I want to do is make
sure it jumps to that particular label as
| | 05:44 |
well. So I'm going to take the same
phrase, I'm going to select it and I'm just
| | 05:50 |
going to copy it and I'm going to
replace this about in quotes. I'm going to
| | 05:57 |
right-click and paste the
EventObject target name.
| | 06:01 |
Now, not only is it going to trace out
what was clicked, either home or about,
| | 06:07 |
but it's going to gotoAndStop either
the word home or about. So what I want to
| | 06:13 |
double check is; if I minimize this
Actions panel and go to the Timeline,
| | 06:18 |
I want to make sure that the label
says home and the label says about.
| | 06:22 |
So I have verified everything. I have
gone back to this first frame. My code is
| | 06:27 |
looking good. Now I want to test it.
I'm going to go to Control > Test Movie
| | 06:34 |
and now when I click on About, it jumps
to the About section. Home, it jumps to
| | 06:40 |
the Home section. Very powerful!
| | 06:43 |
Again, the same functionality is going
on here. You can check and can toggle
| | 06:49 |
between these two sections and yet if
I close this test file, you can see my
| | 06:55 |
code is only half as long as it was,
which is great, makes it easy to update.
| | 07:01 |
In fact, let's go ahead and do that.
Maybe we can have our other buttons work
| | 07:04 |
this exact same way.
| | 07:06 |
Well, my other buttons are Portfolio.
Again, this is an instance name and for
| | 07:12 |
this Portfolio Instance Name button,
I want to right-click and copy that event
| | 07:19 |
listener, paste it for the
portfolio button, and the contact button,
| | 07:26 |
right-click, Paste.
| | 07:30 |
Now all of the buttons are calling
the same function and as long as I have
| | 07:34 |
instances in my document called
Portfolio and Contact and that there is labels
| | 07:41 |
on the stage called Portfolio
and Contact, I should be good.
| | 07:45 |
So let's double-check that. Minimize
my Actions panel. Go to the Timeline.
| | 07:50 |
I can see here is my labels called
portfolio and contact and here are my instance
| | 07:55 |
names called contact and here
is my instance called portfolio.
| | 08:01 |
All right. We are looking good. Last
thing we need to do is just go back to our
| | 08:06 |
Actions panel to make sure that's open,
but really I just need to test my movie.
| | 08:12 |
All right. Let's check these event
listeners now. About section, Home section,
| | 08:19 |
Portfolio section. There we are, it's
looking great. It even says portfolio
| | 08:24 |
over here and then Contact. That's
working wonderfully. Again, not a lot of
| | 08:29 |
code to make every single one of these
buttons work. If I close down that test
| | 08:34 |
file, you can see how short my code is.
Very powerful and I was able to reuse
| | 08:39 |
this function four different
times or as many times as I want.
| | 08:44 |
So your goal is to really condense
your code down as much as you can to
| | 08:48 |
eliminate any errors and also
to make it easier to update.
| | 08:52 |
| | Collapse this transcript |
|
|
4. Adding MediaImporting and manipulating video| 00:00 | Video does add a new dimension to
your site that viewers have really come to
| | 00:04 | expect these days. Luckily, it's so
easy to add video to a Flash web site with
| | 00:10 | full creative control; it's going to
be hard not to add it to your site.
| | 00:13 | So you can see that's what I want to
do in this area. So I click on frame 10,
| | 00:18 | the About section. Right here is a
perfect spot for video. In this About
| | 00:23 | section, I want a video to
play right on this billboard.
| | 00:26 | So the first thing I need to do is
scroll down in my Timeline and locate this
| | 00:32 | movie clip. So if I select it, it's the
About movie clip. Inside of that movie
| | 00:37 | clip is where I want to add the video.
| | 00:39 | So I'm going to double-click to enter
the About section as you can see. I'm now
| | 00:43 | in the About section inside of this
About movie clip. So from here, I want to
| | 00:49 | go ahead and add a new layer.
| | 00:51 | In the Timeline, I click this New
Layer icon and then I'm going to change its
| | 00:55 | name to video. This is where I'm going
to add my video. So I'm going to go to
| | 00:59 | File > Import, and I'm going to import
this video that I have located on my computer.
| | 01:07 | I have different options here. But I'm
just going to Browse to my file first.
| | 01:12 | Now, notice inside of your Exercise
Files folder, there is an Assets folder,
| | 01:16 | and inside of there, there is a Video
folder. Inside of this Video folder,
| | 01:21 | you will find this FLV file for Flash video.
| | 01:25 | But note that I can also import other
formats as well. So if I twirl down this
| | 01:30 | dropdown menu, I can see that I can
add an FLV, an F4V, MPEG files, even a
| | 01:36 | QuickTime Movie file as well, or even
Mobile Device files in addition to all
| | 01:41 | these other ones.
| | 01:42 | So really if I'm even using a QuickTime
Movie or any of these, I can grab them,
| | 01:49 | select it, select Open, and now it's
ready to pull it in. But I'm given some
| | 01:53 | additional options. What I have
currently selected is loading this external
| | 01:58 | video with the playback component.
I do want to use this playback component
| | 02:03 | because it's really powerful, and
I want to make sure that it's not embedded,
| | 02:07 | but it's an external
video that's being loaded in.
| | 02:10 | Now, if I did want to embed it, I would
select the Embed FLV in SWF and play in
| | 02:15 | the Timeline, but that's going to make
my file size really large. Lastly, this
| | 02:19 | is if I was going to make a video for
Mobile Devices, I would select that last option.
| | 02:24 | But most of the time, you are going
to load in an external video with the
| | 02:27 | playback component. So that's what
I have selected. If I had a video already on
| | 02:31 | a web server, I would select this last
option. But again, most of the time you
| | 02:36 | want to load in an
external video and select Next.
| | 02:40 | Now, what you are given is this
Skinning menu. From here, if I click on that
| | 02:46 | dropdown list, I can select the
different types of skins that are available. So
| | 02:51 | I have the SkinOverAll, which are
basically all the buttons available in this
| | 02:56 | skin, or I can say, Hey! Use them
all except for the caption, NoCaption.
| | 03:03 | If I just start clicking my down-arrow,
I can start toggling through all these
| | 03:07 | different types. In fact, here is a
real simple one with just a Play button.
| | 03:11 | Well, in my case since I'm given the
illusion this is on a billboard, I don't
| | 03:16 | want to have any skin whatsoever. So
I'm going to select None. Even though
| | 03:20 | I can easily change the color of the skin,
that really doesn't help me either.
| | 03:25 | In this case, I want to select None.
| | 03:29 | Okay. With None selected, I'm going to
click Next and it just reminds me where
| | 03:34 | my video is located. It gives me some
other helpful tips as well. I'm going to
| | 03:39 | click Finish, and now my video is in my
Timeline. It's in the About movie clip
| | 03:46 | and I can click and drag it and move it over.
| | 03:48 | Now, notice that the billboard is at
an angle. Sure enough, I can treat video
| | 03:53 | that's loaded in here, just like I can
any other element. So with this video
| | 03:58 | selected, I can choose my Free
Transform tool and I can rotate it to make it
| | 04:05 | match that angle better.
| | 04:06 | Not only that, if I roll over this
edge, I can skew it by clicking and
| | 04:12 | dragging. So it's even more in line
with how the billboard is. So let's go
| | 04:19 | ahead and get that closed. I think
that's looking pretty good, but I really
| | 04:22 | won't know until I test it.
| | 04:23 | So let's go to Control > Test Movie,
and let's see how this looks. Again, it's
| | 04:29 | in the About section. There is my video,
and it's playing at the correct angle
| | 04:36 | of that billboard. But still the
illusion isn't fully there because it's not
| | 04:42 | sitting perfectly on that billboard.
| | 04:44 | So what I want to do next is mask out
this video, so it works out perfectly and
| | 04:50 | fully. You get the idea that it is on
the billboard. All right, so here
| | 04:57 | I'm back in the About movie clip. I'm going
to click on the Timeline and here is my video.
| | 05:02 | It is on the Video layer and in
order to mask out part of it,
| | 05:07 | I'm just going to add a new layer, and
I'm going to call this New Layer Mask.
| | 05:14 | Now from here, I want to go ahead and
create my mask. But I need to see the
| | 05:18 | billboard in the background. So I need
to turn off that Video layer. Now,
| | 05:23 | if I select the Pen tool, I can draw my mask.
| | 05:27 | Now, the color doesn't matter at all
because again it's a mask. But I can come
| | 05:32 | in here and click, and create a mask by
outlining the billboard including these
| | 05:43 | little lights down there too. It truly
shows that it's on that billboard.
| | 05:50 | This is really the power of Flash being
able to modify video and integrate a video
| | 05:55 | into a web site as if it is any other element.
| | 05:59 | So I have created my outline, and in
order to make it a mask, I need to select
| | 06:03 | the Paint Bucket tool, and I need to
fill this stroke that I just made with Pen
| | 06:08 | tool, just by clicking. Now, there is a
slight gap in the edge of one of these.
| | 06:17 | I can always adjust my Paint Bucket
tool using these properties down here.
| | 06:24 | So I'm going to change this to Close
Large Gaps. So if there is any space in my
| | 06:29 | line, apparently there is, I can take
care of that by selecting Close Large
| | 06:33 | Gaps. Now, when I click, it fills that
area entirely. Sure enough, if I click
| | 06:40 | that mask layer, there is my Fill Color
and my mask is good to go, but it's not
| | 06:45 | a mask yet. I need to do this one step
to make it a mask, which is right-click
| | 06:50 | on the layer and select Mask. Now, it
masks out that layer below it. In fact,
| | 06:56 | it gives me the icon that shows me
it's masking out this layer below it.
| | 07:02 | So let's go ahead and see if this works.
If I turn that back on, I can see that
| | 07:07 | it is masking it out. Lastly, let's
test it, Control > Test Movie. I'm going to
| | 07:17 | go to the About section. There is
my video, playing perfectly on that
| | 07:21 | billboard, and it looks great.
| | 07:24 | As you can see incorporating and
manipulating video is as easy as manipulating
| | 07:29 | any other graphic in Flash,
giving you total creative control.
| | Collapse this transcript |
| Importing audio| 00:00 |
One way you can really bring your site
to life is with audio. That's exactly
| | 00:05 |
what I want to do here. I want to add
some audio feedback to these buttons.
| | 00:10 |
I want to add a sound when you roll over
it and then when you also click on each button.
| | 00:16 |
So the first thing I need to do is
I need to go ahead and import the files I want.
| | 00:20 |
So I'm going to File > Import >
Import to Stage. I'm just going to select
| | 00:26 |
multiple files. These are WAV files,
but if you have an AIF or any other sound
| | 00:32 |
format, well, Flash can
take care of that as well.
| | 00:36 |
So whatever sound format you have, even
if its mp3, I can import it. All I have
| | 00:40 |
to do is select them and click Open.
Notice now nothing happened on my stage,
| | 00:45 |
even though I did an Import to Stage.
I did that to show you that with sound
| | 00:50 |
files, since they are not visual
files, it will put them in the library.
| | 00:55 |
So if I open up the Library just by
clicking these books here, I can see that
| | 00:59 |
there is my click.wav and my rollover.
wav. So my sound files are in there.
| | 01:04 |
Now what I want to do is I want
to add them to this button.
| | 01:08 |
Great thing is this button is a
generic button. It's just being used four
| | 01:14 |
different places. So I only need
to add the audio to one file.
| | 01:18 |
So if I double-click on that generic button,
it will bring me into the GenericButton's Timeline.
| | 01:24 |
So here I'm in the GenericButton. Here
is the unique Timeline at the top and
| | 01:28 |
this is where I want to add my audio
sounds. So in my Timeline panel, I'm going
| | 01:33 |
to click here to create a new layer
and I'm going to call this layer Audio.
| | 01:40 |
For the over and down states is where
I want to add the audio. So I'm going to
| | 01:44 |
right-click and Insert Keyframe. So at
this point in time on the rollover of
| | 01:50 |
this button, I want to play an audio sound.
| | 01:53 |
So with that frame selected, I want to
go to my Properties panel and I want to
| | 01:57 |
click on this Name field here to let
me access any audio file available in my
| | 02:03 |
library. As we can see, we have both
of them in here that I can choose from.
| | 02:08 |
I'm going to select rollover. As
you can see, it gives me that visual.
| | 02:14 |
One thing I want to make sure is set
correctly is the Syncing information. So
| | 02:18 |
if I click on this dropdown, I can
see that I have Event, Start, Stop and
| | 02:23 |
Stream. I want to make sure this is
either at Event or Start, because I want it
| | 02:28 |
to play immediately.
| | 02:29 |
If it's set to Stream, it will lock the
playability of the sound file with the Timeline.
| | 02:35 |
So in general, make sure it's set to
Event or Start and you'll be good to go.
| | 02:41 |
Next step, I'm going to go ahead and
insert another keyframe by right-clicking,
| | 02:45 |
inserting a keyframe in the down state.
At this point, this is where I want to
| | 02:50 |
include the click.wav file. So in my
Properties panel, in the Name field,
| | 02:56 |
I want to select click.wav. There it is.
| | 03:00 |
Even if I want to hear what this
sounds like or even edit it, I have the
| | 03:05 |
ability to select this Edit Sound
Envelope. So if I click that button, I can play it.
| | 03:11 |
(High pitched zing.)
| | 03:14 |
That's what it sounds like.
I can raise or lower each sound channel,
| | 03:18 |
one is left, one is right, without
having to edit it in another program.
| | 03:23 |
So if you want to adjust the audio,
you can do that in here or you can listen
| | 03:26 |
to it if you want. But in general, this
sounds pretty good. So I'm going to go
| | 03:30 |
with it. In fact, let's just double-
check this rollover.wav. If I select that
| | 03:34 |
over frame, let's click this Edit
Sound Envelope and play this one.
| | 03:39 |
(High pitched beeping.)
| | 03:41 |
So that's the rollover sound.
| | 03:43 |
All right, they both sound great. They
are in the correct spot. Now, all I need
| | 03:47 |
to do is go to Control and test my
movie. Now, when I rollover, you can hear it.
| | 03:57 |
(High pitched beeping.)
| | 03:58 |
It sounds great, when I click.
| | 04:00 |
(High pitched zing.)
| | 04:06 |
Every single one works great. So as you can see,
| | 04:08 |
I can import an audio file, just
like I can import any other file to add
| | 04:13 |
some life to my web site.
| | 04:16 |
| | Collapse this transcript |
|
|
5. Creating TransitionsAdding tweens using ActionScript | 00:00 |
Since I'm making a Flash site, I want
to use Flash for what it's really good
| | 00:04 |
at, which is animating. In this
particular case, I want to create some
| | 00:10 |
transitions that are going to
be animating in each section.
| | 00:15 |
So if I click on Home, we can watch
the transition that I'm about to build.
| | 00:19 |
Click on Home. That slides in along
its X-axis. So it's X position is moving,
| | 00:26 |
it's starting on the right side and
it's sliding in with a really cool bounce
| | 00:30 |
effect. So let's go back to About and
let's jump to Home again, so you can
| | 00:34 |
watch it again.
| | 00:35 |
You can see it bounce and something
pretty tricky to do if you are using the
| | 00:41 |
timeline. So let's take a look at our
timeline. Let me close this file down.
| | 00:46 |
In my timeline, you can see that
absolutely nothing is going on in this timeline.
| | 00:50 |
There is no motion tween.
| | 00:51 |
So I did not use the timeline for this
animation. If I did, you could expect it
| | 00:56 |
to be really complex because of the
bouncing that was going on. That elasticity
| | 01:01 |
of it kind of going back and forth
and then finally resting into place.
| | 01:05 |
What I have used instead and what
I want to use now is a tween using
| | 01:11 |
ActionScript. So I want to use
ActionScript code because it's going to give me
| | 01:14 |
a lot of control, some flexibility as
well. I can control many properties with
| | 01:21 |
a tween using ActionScript.
| | 01:23 |
Okay, the first thing I want to note is
this movie clip. So if I click on this
| | 01:27 |
movie clip, know that its instance
name is home_mc. So I want to keep that in
| | 01:32 |
mind because this is its unique name
for controlling it. I need to make sure it
| | 01:37 |
has a unique name.
| | 01:38 |
So I'm going to this first layer here,
this first frame, the Actions and Labels
| | 01:44 |
layer. I'm going to Window, down to
Actions to open up my Actions panel.
| | 01:49 |
This is where I'm going to write my code.
So I'm going to write in a comment.
| | 01:52 |
So I'm just going to do two forward slashes
to type in a comment of what I want to happen.
| | 01:56 |
So I want to animate in the home_mc
from right to left using the tween class.
| | 02:10 |
So I'm going to use this Tween class.
I'm going to just select that word and if
| | 02:18 |
I right-click, I can go and View Help.
| | 02:22 |
So what happens is Help will open up.
Here we are in ActionScript 3.0 Language
| | 02:27 |
and Components Reference, which is
awesome. It pulls up exactly what I just
| | 02:32 |
searched on. Not only does it describe
what it does, because it does say the
| | 02:37 |
Tween class, lets you move, resize
and fade in movie clips by specifying
| | 02:42 |
certain properties.
| | 02:44 |
But what I'm going to do is I'm
actually going to take this code right here and
| | 02:48 |
I'm going to use it in Flash. The Help
is helpful. When it comes to code, I can
| | 02:53 |
actually take this code and bring it
into Flash. So I'm going to right-click,
| | 02:57 |
Copy, and go back into Flash.
| | 03:00 |
All right, so this is great. I'm going
to right-click and Paste. Here is the
| | 03:07 |
code from the Flash Help that I want
to go ahead and modify, but first,
| | 03:12 |
I'm going to describe what's going on here.
| | 03:15 |
If I just do two forward slashes,
I can add in comment for these first two
| | 03:19 |
lines. Because all that's happening
here, we are just telling Flash, we are
| | 03:22 |
saying, hey Flash! Go get code that's
going to make the tween work. More or
| | 03:32 |
less, that's all that's happening here.
I get almost careless about what the
| | 03:35 |
code is. All I care is that it works.
| | 03:39 |
So what this allows Flash to do is go
and grab the code that's going to make
| | 03:43 |
this line of code work. All right, so
that's what's going on there. Let's go to
| | 03:47 |
this line here. Let me add another
comment. So again, I want to move the
| | 03:53 |
home_mc, animate in is
what's going to happen here.
| | 03:59 |
All right, I've got to give it a unique
name is where I want to start. So it's
| | 04:04 |
the first thing I'm going to do.
I want to replace myTween with homeTween.
| | 04:07 |
It could be whatever you want it to be
called. But I'm just giving it a unique
| | 04:11 |
name just so I can differentiate it
from other tweens that are going to be happening.
| | 04:16 |
So homeTween, this identifies it as a
tween and this New is the magic word
| | 04:22 |
because this is what happens. I have
the word new. It's actually going to
| | 04:26 |
create a new tween. It's going to
create this new tween with all of these
| | 04:31 |
various parameters or properties.
| | 04:34 |
All right, you probably are wondering
what all this stuff is. Now, the Help can
| | 04:38 |
tell me, but what I can also use is
Flash. So all I need to do is place my
| | 04:43 |
cursor anywhere in here and then in my
Actions panel I can click this little
| | 04:47 |
bubble, Show code hint. If I click
there, it tells me what everything is.
| | 04:53 |
So I can start typing in this. This
object is going to be home_mc. If I go over
| | 04:59 |
to this "x", well again, this "x" is
the X position. It's its position from
| | 05:04 |
left to right. Okay, and that's what
I want to animate. Whatever property
| | 05:08 |
I want to animate, I want to put in these quotes.
| | 05:12 |
Next up is this elasticity. So this
is what makes it bounce and move really
| | 05:17 |
smoothly. So there is a lot of power
that happens with that parameter there.
| | 05:22 |
Next up is this begin number. So where
do we want it to start? Well, I wanted
| | 05:28 |
to start off the stage and
I want it to animate into position.
| | 05:33 |
So let me just move down my Actions
panel, so we can see our stage here.
| | 05:38 |
If I click that dropdown, I can fit this in
window, just to show you that if I click
| | 05:42 |
and drag it, I want it to start over here.
| | 05:45 |
So I want it to start its X position.
If I click on that number to be about
| | 05:51 |
1000 pixels so it starts off the stage,
it's going to start there and I want it
| | 05:57 |
to end at 0 into position right here.
So really reference your Properties panel
| | 06:04 |
for the numbers you want to get.
| | 06:06 |
So it's going to start at 1000 pixels
and move it to 0 pixels. So let's select
| | 06:13 |
our first frame there in the Actions/
Labels layer and go to my Actions panel
| | 06:17 |
again. With those two numbers in mind,
I can type in 1000. It's going to move
| | 06:22 |
it into 0. It's the end position. Again,
I can always use my Show code hint to
| | 06:30 |
identify this as the finishing position.
It's going to do this for a duration
| | 06:35 |
of 3 seconds. Use seconds that's equal to true.
| | 06:40 |
So that's the animation. Let's see if
it bounces on in. it should be pretty
| | 06:44 |
slick. I'm going to go to Control >
Test Movie and let's watch it. It's going
| | 06:48 |
to happen right away. We can see it
bounce in. Let's go to another section and
| | 06:55 |
then click back on Home and
watch it bounce in, very slick.
| | 07:02 |
Again, I didn't have to use the
timeline in at all, because doing an animation
| | 07:06 |
like that in the timeline would take
some time and wouldn't be as flexible.
| | 07:11 |
But you can see, with one line of code,
I was able to add a really slick, elastic
| | 07:17 |
movement to that Home movie clip, very powerful.
| | 07:21 |
| | Collapse this transcript |
| Reusing tween code| 00:00 |
What's really powerful about
ActionScript is I can reuse the code and apply it
| | 00:05 |
to different elements. For instance,
I have a tween and this tween is basically
| | 00:13 |
being applied to multiple movie clips.
For instance, I can click the About
| | 00:17 |
section and I can see that tween bounce
up. If I go to the Home section, I can
| | 00:23 |
see that home movie clip
slide in along its X-axis.
| | 00:27 |
So it's really just the same lines
of code duplicated and then modified
| | 00:32 |
slightly to give me a totally
different results. In fact, if I go to the
| | 00:36 |
Portfolio section, we'll see that fade
in. Again it's the same chunk of code
| | 00:43 |
copied and then modified as well.
Contact will stretch out.
| | 00:48 |
So let's watch this one.
| | 00:50 |
So that's the result I'm going for.
I want to take this code that's in this
| | 00:54 |
sliding in and I want to modify it
for these other three sections. So let's
| | 00:59 |
take a look at reusing my code.
| | 01:00 |
So I'm going to the Timeline, select
that first frame in Actions/Labels layer.
| | 01:05 |
Let's go to Window, down to Actions
and let's take a look at what's going on.
| | 01:10 |
We are pulling in all the code that
makes the tween work and here is the Tween
| | 01:18 |
call. So in general here is a variable,
so here's a container. Its specific
| | 01:23 |
name is the homeTween. I'm calling it a
tween explicitly saying, hey, this is a
| | 01:29 |
tween, I'm making new one
with all of these new parameters.
| | 01:34 |
So in general, take this Home movie
clip, move it from the right to the left
| | 01:40 |
with elasticity, so it kind of bounces
in. It's going to move it starting off
| | 01:44 |
the stage on the right side so this
first parameter; if I put my cursor right
| | 01:49 |
in there I can click on Show code hint.
So as you know what, it started 1000
| | 01:55 |
pixels off the screen because this is
the X position so that's 1000 pixels to
| | 02:00 |
the right and then if I just scroll
down, use my arrow keys, I can see the
| | 02:04 |
finish position in 0 over
the course of 3 seconds.
| | 02:07 |
It works great for the Home section
but I want to use the same code for the
| | 02:11 |
About section. So let me just copy this
line of code, right-click, Copy and let
| | 02:16 |
me move this Actions panel down. So
I want to go to frame 10 in this layer
| | 02:22 |
here, select that About label and on
this frame this is where I want the action
| | 02:27 |
to take place to bounce this in. So I'm
going to bring it in and it's going to,
| | 02:31 |
with elasticity, come up from the
bottom. So I'm going to change its Y
| | 02:36 |
position. It's going to move in.
| | 02:39 |
All right, so let me select that first
frame there, go to my Actions panel,
| | 02:44 |
you can see there is nothing in here.
I just need to right-click and select Paste
| | 02:49 |
and now I can modify this code. So the
variable name is going to be aboutTween.
| | 02:54 |
That's its explicit name and for the
aboutTween, we are not going to move the
| | 02:58 |
Home movie clip. We are going
to move the About movie clip.
| | 03:02 |
I need to make sure that that's its
correct instance name; I think this is very
| | 03:06 |
important. I want to make sure this is
about_mc. If I click on this movie clip
| | 03:12 |
and go to the Properties
panel, that does say about_mc.
| | 03:15 |
All right let me click that frame again
and go back to my code. Here we are in
| | 03:20 |
about_mc. I want to move its Y
position so it's going to move up and down
| | 03:25 |
that's what the Y does. It's
going to do with elasticity.
| | 03:30 |
Now let's take a look at where we are
going to move it from. If I move that
| | 03:33 |
down, it's going to start out at 1000
pixels below sort of outside of your
| | 03:38 |
viewable area and it's going to bring
it into position where it is currently.
| | 03:43 |
So let's look at where it is currently.
| | 03:44 |
If I select the About movie clip in
my Properties panel, I can see the Y
| | 03:48 |
position is at 112. So that's its
final resting position and it is going to
| | 03:55 |
start off at 1000 pixels, way down
below there. We bring that back up. Let me
| | 04:01 |
select that frame, come back and here
it's going to start right of there and
| | 04:07 |
it's going to end about 112 pixels and
it's going to do over the course of 3 seconds.
| | 04:13 |
So there is my aboutTween. Let me go
ahead and do a Control > Test Movie to
| | 04:17 |
watch it. Home section slides in
because that's the X position since we are
| | 04:25 |
dealing with the Y position it's going
to move up and down, let's click About,
| | 04:30 |
sure enough it bounces in.
| | 04:32 |
So again, Home section, About section
works great. Same line of code, modifying
| | 04:38 |
some parameters, some properties,
dealing specifically with the Y property and
| | 04:44 |
you can see, you can get
a totally different look.
| | 04:46 |
Now for the Portfolio section,
I want this to fade in. So we are going to
| | 04:51 |
modify its Alpha. So I'm going to
close this and I'm going to go back to the
| | 04:56 |
Timeline and I'm going to add
this code to the Portfolio sections,
| | 05:00 |
so I'm clicking on frame 20 in the Actions/
Labels layer and this is where I want to
| | 05:05 |
add my code. If I move down that
Actions panel, I'm going add this code to this
| | 05:10 |
Portfolio movie clip. If I select it,
I can see that it does say portfolio_mc.
| | 05:15 |
Let's go back to frame 20 and I'm
going to right-click and I'm going to paste
| | 05:18 |
in that same chunk of code that
I copied earlier that homeTween and I'm going
| | 05:23 |
to call this Portfolio. This is the
portfolioTween. It's going to animate the
| | 05:32 |
Portfolio movie clip. It's not going
to animate its position it's going to
| | 05:37 |
animate its alpha. Alpha means transparency.
| | 05:42 |
Now we don't want it to elastically
animate the alpha, we just wanted to just
| | 05:47 |
do a regular fade in. So I'm going to
change this Elastic word to Regular.
| | 05:54 |
Just faded in at a steady pace.
| | 05:57 |
All right these are the two parameters
and again I can click anywhere in this
| | 06:01 |
code and select my code hint, just to
see what it's referring to. Its beginning
| | 06:07 |
numbers is going to be 0. That's going
to start out 100% transparent and that's
| | 06:13 |
going to end up opaque and if I want to
end up opaque, I just need to type in 1 there
| | 06:18 |
and that's going to do
over the course of 3 seconds.
| | 06:21 |
So that's looking pretty good, in
fact, let's go ahead and do the Contact
| | 06:25 |
section now as well. So let me click
this last frame here and go down to my
| | 06:31 |
Contact section. Let me select that
movie clip. It is the contact_mc and for
| | 06:37 |
this one, I'm going to adjust its scale.
So it's going to start out squeezed on
| | 06:43 |
the left side and then it's going to
stretch out and with elasticity it's going
| | 06:49 |
to rest in the place.
| | 06:50 |
So let's go back to our Contact
frame. That's the frame 30 in our
| | 06:54 |
Actions/Labels layer, go back to our
Actions panel, right-click and paste.
| | 07:00 |
Again, the same chunk of code for
the Contact section. Creating this
| | 07:05 |
contactTween, it's going to modify
the contact_mc. It's going to modify its
| | 07:15 |
scale so it's X scale and again X
means it's right to left position. So it's
| | 07:22 |
going to modify how wide it is. It's
going to do with elasticity, this is the
| | 07:28 |
starting number, let me click code
hint and the starting number is actually
| | 07:33 |
going to be 0. In fact, let me expand
out this panel a little bit more so we
| | 07:40 |
can see everything on one line for
the most part, all right there we are.
| | 07:49 |
Now I didn't remove some spaces and
spaces in this case isn't going to break
| | 07:55 |
the code or anything like that.
Sometimes it is a good practice but in this
| | 07:59 |
case I want to show everything on one
line. It's going to start out at 0 and
| | 08:04 |
it's going to go up to 1, so it's
going to stretch it out fully from 0-1. So
| | 08:12 |
it's going to restore it to 100%
over the course of 3 seconds.
| | 08:17 |
All right so code looks pretty good,
I'm going to go ahead and test this now.
| | 08:21 |
I'm going to click, go to Control >
Test Movie. That slides in the About
| | 08:28 |
section which we did earlier, bounces
up Portfolio, we have modified the alpha,
| | 08:34 |
so it should fade in when I click on
it, sure enough it does fade in really
| | 08:38 |
smooth because it happens
over the course of 3 seconds.
| | 08:41 |
Contact section stretches out, so let's
try this one. Click and it does stretch
| | 08:47 |
out and it has some bounciness, going
on some elasticity but it looks great and
| | 08:52 |
all I did is I took one line of code
that was for the home section and modified it
| | 08:58 |
for these three other sections. So
again, the power of ActionScript being
| | 09:02 |
able to reuse one line of code by
copying it, pasting it and then modifying
| | 09:06 |
the parameters is really powerful.
| | 09:09 |
| | Collapse this transcript |
| Getting creative with the Tween class | 00:00 |
You can get really creative when it
comes to ActionScript animation, such as
| | 00:04 |
creating something that has depth. So
for instance, I'm going to show you this
| | 00:08 |
final file. Watch when I click on the
About section. You are going to notice
| | 00:12 |
this depth that goes on between the
foreground content and then the background,
| | 00:17 |
and also a panning effect.
| | 00:18 |
So if I click About, see the
background moves and so does the foreground.
| | 00:25 |
Foreground slides in that content and
the background moves as well and I can
| | 00:30 |
jump from section to section. In fact,
if I go from the Portfolio section to
| | 00:35 |
the Home section, you can see the
About section slide around. That's pretty
| | 00:40 |
darn cool, because I have everything
being controlled through ActionScript,
| | 00:46 |
through roughly a couple lines of code.
But all that's really going on here is
| | 00:50 |
all of this content that you see
sliding by; this is all in one movie clip. So
| | 00:57 |
that's how I want to
modify my current Flash file.
| | 01:01 |
So I'm going to close this final file
and in this 05_03_AdvancedTween file,
| | 01:06 |
you can see how its set up currently,
it's just a straight jump from frame to
| | 01:11 |
frame. We can see that each section
really is in its own movie clip and they
| | 01:16 |
are all separate. Well, I want to
combine all of these and put them all in one
| | 01:21 |
movie clip spaced out horizontally.
All right, so in order to do that,
| | 01:27 |
I actually have to bring
them all into the first frame.
| | 01:30 |
So I'm going to grab this first
keyframe for the About movie clip and click and
| | 01:34 |
drag it forward, so that it appears in
the first frame. I'm going to grab that
| | 01:39 |
Portfolio movie clip, bring it forward
and I'm going to grab the Contact movie
| | 01:43 |
clip and bring it forward as well. Next
thing, I want to do is I want to space
| | 01:47 |
these out. Okay, so I can select this
first one and I can click and drag it
| | 01:52 |
further down here, or I can get more
exact because I want to actually position
| | 01:56 |
this exactly at 3000 pixels to the right.
| | 02:02 |
So if I want to work on exact
positioning, I can select whatever I have that
| | 02:06 |
I want to move. I can go to the Properties
panel, and I want to change its X position.
| | 02:10 |
So I just click on that number and
I can type in 3000 and hit Enter.
| | 02:16 |
Now where it moved it to-- let me
minimize that Actions panel and scroll down.
| | 02:22 |
There it is. It moved it clear down here.
| | 02:25 |
So I'm going to do that for these
others as well. I want exact positioning for
| | 02:29 |
the Portfolio section. It's going to be
at 2000, positioned there. And then the
| | 02:34 |
About section. If I click on the X
property, I can change that to 1000 and
| | 02:40 |
the Welcome screen is going to
stay exactly where it is.
| | 02:42 |
All right, next thing I want to do is
I want to select all of these movie clips
| | 02:47 |
and I want to put them all in a new
movie clip called content. So with all of
| | 02:53 |
them selected I'm going to go to
Modify > Convert to Symbol. All right,
| | 03:00 |
I'm converting these all into one
symbol called content, and select OK.
| | 03:07 |
Now the reason I did that is because
I want to control this as one unit.
| | 03:12 |
They are all in one instance but it still
needs an instance name to control it with
| | 03:17 |
ActionScript. So with that instance
selected, in the Properties panel, I want
| | 03:22 |
to call this content_mc. So this is
what I'm going to move around. I'm going to
| | 03:28 |
move it to its X position.
So if I can scrub over here.
| | 03:33 |
When you click on the About section,
I want this whole content_mc to slide this
| | 03:39 |
way and it's going to have a position
of roughly -1000 pixels because it's
| | 03:46 |
moving it over to the left and again,
if you click on the Welcome button, it's
| | 03:53 |
going to move this content movie clip X
position back to 0. So I'm just typing
| | 03:57 |
that in just to show you how that's
going to move. So it's going to pan back
| | 04:01 |
and forth. All right, let's do an undo
to make sure it's at its 0,0 point.
| | 04:07 |
It's looking great.
It has its instance name.
| | 04:09 |
Now let's go ahead and go into our
Actions panel and take a look at the code,
| | 04:13 |
what we have in there currently. So I'm
going to select the first frame here in
| | 04:17 |
the Actions and Labels layer and open
up the Actions panel, and here we are.
| | 04:23 |
Here is the current line of code which
is a homeTween that moves the home movie
| | 04:28 |
clip, its X position. Well, the home
movie clip isn't on the main timeline
| | 04:33 |
anymore. It's actually now the
content_mc. So that's what this is.
| | 04:41 |
This is the content_mc.
| | 04:42 |
It's still going to move its X position,
the elasticity, well I don't really
| | 04:47 |
want it to have a bounce, I want to
change this to Regular, just like that.
| | 04:53 |
Now this is where it gets a little tricky
and really powerful, because right here,
| | 04:57 |
this parameter, if I click on this
code hint box here, I can see that this is
| | 05:03 |
the beginning point. Well, I don't
really know what section we are in but I do
| | 05:09 |
just want to take the X position
of the content_mc wherever it is.
| | 05:14 |
So in place of this number I want to
type in content_mc. I want to take its X
| | 05:21 |
position. So wherever it is, I don't
really care where it is, but wherever it
| | 05:25 |
is, that's where I want it to start from.
And this second parameter again,
| | 05:31 |
if I click on that code hint, this is the
finish position which is 0. So it's going
| | 05:37 |
to animate it to the right place,
so it's showing the Home section.
| | 05:41 |
Okay, so that's what it is. content_mc,
really powerful. It's going to animate
| | 05:45 |
it to the 0 position and I don't
want to do this over the course of three
| | 05:49 |
seconds. I want to change that to one
second. In fact, let me just get rid of
| | 05:54 |
some of these spaces which doesn't hurt
anything but allows you to see all the
| | 05:59 |
code on one line a little easier. All
right, there we are. I want to take the
| | 06:05 |
same line of code, this new tween, and
I want to use it for all of the various sections.
| | 06:11 |
So if I select the new tween and
all of these parameters, I can do a
| | 06:15 |
right-click and Copy, so let's copy
that code. Let's go to frame 10 in our
| | 06:22 |
Actions and Labels layer and we can
see we have this code for the aboutTween.
| | 06:26 |
So if I select that current tween, and
do a right-click and Paste, I can paste
| | 06:33 |
in this tween now.
| | 06:35 |
Now the only parameter I need to change
here is going to be the position.
| | 06:40 |
So I still want to animate the content_mc.
Wherever it is, it doesn't matter, and
| | 06:45 |
I want to move this content_mc, its final
position, to -1000. So which direction
| | 06:54 |
does this go? Well, it moves it if
I can move down my Action panel, it's going
| | 06:58 |
to slide it this way into negative.
Negative is always going to be moving to
| | 07:03 |
the left. In fact, if you can look at
the Position and Size, this is where
| | 07:07 |
I got that number.
| | 07:08 |
If I can type in 1000, that's where
it's going to move it to. I can see the
| | 07:14 |
About section is clearly visible right
here. All right, so let me change this
| | 07:18 |
back to 0. So it's showing the Home
section and go back to my code by clicking
| | 07:23 |
on that frame 10 in the Actions and
Labels layer. So that's where this number
| | 07:28 |
came from. Now that we have that down,
we can change the other two areas.
| | 07:33 |
So I'm clicking on frame 20 in the
Actions and Labels layer and I want to
| | 07:38 |
select that tween there and paste in
the content_mc, this movie clip tween now.
| | 07:47 |
And again, I just want to change this
finish, sort of final resting place for
| | 07:52 |
this Portfolio tween as well. And in
this case, it's not going to be 0, it's
| | 07:56 |
not going to be -1000, it's going to be -
2000. So it moved it over even further.
| | 08:01 |
I am going to click on frame 30 in the
Actions and Labels layer. I'm going to
| | 08:06 |
select this tween and I'm going to
paste in that content_mc tween again and
| | 08:10 |
again it's this last parameter. If
I can show you a code hint, it 's the final
| | 08:16 |
resting place. When you click on
the Contact button, I want to move the
| | 08:20 |
content_mc -3000, over 3000 pixels.
It's going to move it to the left.
| | 08:28 |
All right, everything is looking pretty
good, but really I want to test this now.
| | 08:33 |
So let's watch this magic happen. I'm
going to go to Control > Test Movie,
| | 08:40 |
it's looking great. When I click the
About section, we should see the Welcome,
| | 08:43 |
this Home section, transition off because
they were all part of that one movie clip.
| | 08:50 |
It's looking great and working great.
In fact, if you jump from Contact clear
| | 08:55 |
down to Home, we should see the other
sections slide by. They move kind of fast
| | 09:00 |
but this is great. This gives me some
nice movement. Transitioning out sort of
| | 09:06 |
the previous section, and transitioning
to the section you clicked on, and it's
| | 09:10 |
because everything is in one movie clip
and I'm just modifying the position of
| | 09:14 |
that movie clip.
| | 09:15 |
But now let's work on the depth as well
because as you saw in the final version
| | 09:20 |
that you show earlier, the background
moved as well, and I want this to move
| | 09:23 |
slower but it's going to be the same
code. So this is great. I get to use the
| | 09:27 |
same code modifying some parameters to
give it some nice depth. So let's close
| | 09:32 |
that file, let's go back our first
frame in our Actions and Labels layer.
| | 09:39 |
This is actually where we started. I opened
up the Actions panel, now what I want to
| | 09:44 |
do here is I'm just going to do
another right-click and Paste, because I want
| | 09:51 |
to use the same tween modifying two parameters.
| | 09:57 |
The first parameter is the name of the
background. So this is where I moved the
| | 10:01 |
background. I need to know the
background's name, so let's take a look at that.
| | 10:05 |
Move down my Actions panel, if I click
on that background, we can see the name
| | 10:11 |
is bkgd_mc. That's what I want to use.
| | 10:15 |
So let's go back to our Actions panel,
click on that first frame, so our code
| | 10:19 |
shows up. Move this up a little higher
and bkgd_mc. We are going to move its X
| | 10:27 |
position and instead of this being the
content_mc, this is going to be bkgd_mc.
| | 10:33 |
We are going to move its X position to
the 0 point, and that's all we need to do.
| | 10:42 |
And a good practice is to always
add comments. So I'm going to add two
| | 10:46 |
forward slashes and this is
move the background into place.
| | 10:52 |
All right, so what I can do is I can
copy both these lines of codes. Select
| | 10:58 |
Copy, I'm going to frame 10. In frame 10,
I want to move the background into a
| | 11:06 |
different location. So I'm going to
paste this code in. So again, it's still
| | 11:10 |
going to move the background movie
clip from wherever it is to a final
| | 11:17 |
position, and in this case, the
background is going to move slower. So you
| | 11:21 |
notice in a distance, if you are ever
driving down the road, and you look out
| | 11:25 |
of your window to the left or right,
the further out you look, the slower it's
| | 11:29 |
going to move. That's why our
background is not going to move as far.
| | 11:34 |
So this background is going to move -
100 pixels. It's going to move it to the
| | 11:41 |
left. Again if we can look at the
content_mc, it's going to move it 1000
| | 11:45 |
pixels. This one is only going to move
100 pixels, giving us that depth that we
| | 11:49 |
are after. All right, frame 20. I'm
going to select that keyframe there in the
| | 11:55 |
Actions and Labels layer, and I'm going
to hit Return a couple times. I'm going
| | 12:00 |
to right-click and paste in the
code one more time, and again it's this
| | 12:04 |
finished position. Instead of moving
this 2000 pixels, it's going to move it
| | 12:09 |
200. That's looking great.
| | 12:12 |
And frame 30 is the last place we need
to paste this code in the Actions and
| | 12:17 |
Labels layer. If I click Paste, and
instead of moving this say 3000 pixels,
| | 12:26 |
I'm going to move it 300. All right, so
our background should be shifting not as
| | 12:32 |
much as the foreground, the Content
area, but it should still be moving
| | 12:36 |
creating a nice depth of field look.
| | 12:38 |
So let's go to Control > Test Movie.
Let's click the About section and we can
| | 12:47 |
see the background move as well. A
really nice effect, pretty subtle, but you
| | 12:52 |
get that sense of depth with the site
and something Flash is really good at,
| | 12:56 |
which is creating depth, creating
unique experiences with a little bit of
| | 13:01 |
ActionScript and creativity.
| | 13:04 |
| | Collapse this transcript |
| Controlling elements after transitions | 00:00 | Once you have added some ActionScript
tweens you'll realize that you are going
| | 00:04 | to have to listen for the end of these
tweens or wait for the transition to end
| | 00:10 | before having something else happen.
In our case if I go to Control > Test Movie
| | 00:16 | you can see that when I go to
the Portfolio section or the Contact section,
| | 00:22 | even when I'm going to these
other sections what's really going on is
| | 00:27 | in this About section this video was
playing. Not only that the video stopped
| | 00:31 | even though I didn't even get to see most
of it, because I was in these other sections.
| | 00:36 | So really what I want to do is when
you click on the About section I want to
| | 00:41 | transition in the About section and then play
the video so I can see the full video play.
| | 00:47 | All right, so I need to listen for a
tween to complete. So let me close that
| | 00:54 | file. Let's go to the Timeline and
right in here this is my content_mc.
| | 01:03 | If I double-click on it I can see that
within my Content movie clip there is this
| | 01:08 | About movie clip and it is called about_mc.
| | 01:14 | If I double-click on it I can see the
video. So here's where my video is.
| | 01:18 | It's clear down in here and that's
what I need to control, okay.
| | 01:23 | So let's start off by going back out to
our main Timeline going to Frame 10 in
| | 01:28 | the Actions and Labels layer
and going to Window > Actions.
| | 01:32 | All right, so this About tween
basically animates in the content_mc over the
| | 01:40 | course of one second and I want to
listen for when this tween is done animating.
| | 01:48 | So I'm just going to go ahead and hit
Return a couple of times and I'm going to
| | 01:52 | add that code in here. So I'm
listening for the About tween. So I'm going to
| | 01:56 | type in aboutTween. That's the name of
this tween. And I want to add a listener
| | 02:01 | to it. So I'm going to add an event
listener. Notice when I start typing that
| | 02:06 | in I get code hinting that allows me
to pick this addEventListener. I'm going
| | 02:11 | to hit Enter and then I need to type
in the type. Well, it's going to be a
| | 02:15 | TweenEvent. And I'm going to
listen for the motion to finish.
| | 02:23 | Again I get code hinting so I can
select MOTION_FINISH. But notice there are
| | 02:28 | quite a few things that I can listen
for and it's going to be the same code
| | 02:32 | that I would write. But in this case
I'm listening for the motion finish.
| | 02:36 | Selecting that. All right, so that's
what I'm listening for and once Flash
| | 02:42 | hears the motion finishing then
I want to fire off this function called
| | 02:46 | donePlaying. We need to make sure we
have open and closing parenthesis there.
| | 02:51 | Now let's go ahead and write our
function. function donePlaying. It's going to
| | 03:02 | be a tween event. It's what it's
listening for so I need to make sure of these
| | 03:06 | two words match up. And then I need to
close that parenthesis and I'm going to
| | 03:11 | type in void because I don't want to
return anything. So I typed in void so
| | 03:17 | I don't need to pass anything back
out to this listener. But in general
| | 03:23 | I'm building the structure for this function.
I'm adding an opening curly brace and
| | 03:29 | a closing curly brace. Keep in mind
once you open the curly brace you need to
| | 03:32 | close it just like as if you open a
parenthesis you need to close it as well.
| | 03:36 | All right, in this function all I'm
going to add is a trace statement.
| | 03:41 | I'm going to type in trace and I'm going
to type in done playing. So I should see
| | 03:48 | this in the Output window when this
aboutTween is done playing. It's going to
| | 03:54 | say done playing.
| | 03:56 | Okay I need to do one more thing here
because just like with the tween function
| | 04:01 | here that is being called I need to
add code to this Flash file. So I need to
| | 04:08 | basically include code that's going
to make this work this motion finish.
| | 04:13 | All right so tween events that's what
I need to keep in mind because that's
| | 04:17 | what I need to add. So I'm going to
go to my first frame in my Timeline and
| | 04:22 | just to review what we had before,
I selected that first frame in
| | 04:26 | Actions/Labels layer. You can see that
this is importing the tween but it's not
| | 04:32 | importing the tween event. Since I'm
using that code I need to import it as
| | 04:36 | well. So import fl transitions TweenEvent.
| | 04:45 | Again I can use code hinting.
Select what I need, hit Enter, end with
| | 04:50 | semicolon. So I have imported that code
which means it's available for fast use
| | 04:56 | so that's going to make the code
I added in the About section work.
| | 05:00 | So if I click on frame 10
we can review that code.
| | 05:03 | It's all looking pretty good and as
you start writing code more and more it
| | 05:07 | might be helpful to check Syntax. So in
the Actions panel I can always hit this
| | 05:13 | Check button and it checks and it
makes sure the script doesn't contain any errors.
| | 05:19 | Sure enough it doesn't. It's looking great,
so let's go to Control > Test Movie.
| | 05:23 | Now the video will stop play because
we haven't done that part, but when
| | 05:27 | I click the About section I should get
a printout in the Output panel if I move
| | 05:32 | the Actions panel down. In my Output
panel it should say done playing up here.
| | 05:39 | So I have clicked About and there it
was. So there was a delay before done
| | 05:45 | playing! appeared because the
transition was still happening. So let's go ahead
| | 05:48 | and click Home. I'm going to click
back on About and we should see done
| | 05:51 | playing! pop up after one second.
| | 05:54 | There it is, done playing! So it looks
like it's working. That's great. Now we
| | 05:58 | just need to control this video.
Let's go back to out Timeline and before I
| | 06:03 | even show you the code we need to focus
on the video itself. So I'm going to go
| | 06:09 | through, I'm going to double-click on
this content_mc. I'm digging down to the
| | 06:15 | video. So I have clicked on Content.
I have clicked on the About movie clip and
| | 06:19 | I can see in the Timeline here there
is my video. It's currently locked down.
| | 06:24 | So let me just turn off that mask and
unlock the video and I can select it.
| | 06:31 | So the key thing I need to do here is
I need to give this an instance name
| | 06:35 | because how else I'm going to call it
with ActionScript if it doesn't have any.
| | 06:39 | So in the Properties panel with that
video selected I'm going to call this
| | 06:44 | video my video. Keeping it simple.
Just calling it my video. It could be any
| | 06:50 | name you want. I'm going with a sort of
camel case where it's lowercase letter
| | 06:54 | and then in uppercase for subsequent words.
| | 06:57 | So that's called my video. Let' keep
that in mind and let's go back to scene 1
| | 07:04 | and go back to frame 10 in our Actions
and Labels layer because that's where
| | 07:08 | our code is. And let me open up the
Actions panel. And here's my trace
| | 07:14 | statement. So remember we call that my
video. Remember it was pretty deep in
| | 07:19 | there. It was actually inside of
content_mc. So let's type that in.
| | 07:23 | It's inside content_mc. Inside of
there is the about_mc. So notice how I just
| | 07:31 | added a couple of periods and that's
how I dig down into various movie clips.
| | 07:36 | So within content_mc there is the
About movie clip and inside of about_mc
| | 07:41 | that's where myVideo exists.
| | 07:45 | Great! I'm able to target it. I got
real clear down into it and specify exactly
| | 07:49 | where it is and what the name is. I'm
going to add another period and type in
| | 07:54 | play. That's all I need to do because
I wanted to play when the motion has
| | 07:59 | finished and I just need to do open
and close parenthesis. Okay, so it will
| | 08:05 | play when you click on that button,
but I want to make sure it doesn't play
| | 08:08 | until you click on the button
because it's already auto-playing.
| | 08:13 | So let me move back down this
Actions panel, double-click on content_mc,
| | 08:19 | double-click again and
let's go back to my video.
| | 08:23 | Now there is additional parameters
available that I can modify for this video.
| | 08:29 | This video is a component and it's
really powerful and I can modify plenty of
| | 08:34 | the parameters. So what I usually like
to do is select that video component and
| | 08:38 | I'm going to go to Window and I'm going
to go down to Component Inspector,
| | 08:43 | so I want to inspect and see what
this video component is all about.
| | 08:48 | If I expand this out I can see sure
enough autoPlay is set to true. So this is
| | 08:55 | very handy. I can go in here and change
any of the parameters I want. I want to
| | 08:59 | change autoPlay to false. So it
doesn't play initially. There is a lot more
| | 09:04 | I can do in here as well.
| | 09:05 | So now autoPlay is set to false. I can
close the Component Inspector. My code
| | 09:10 | should be fine. So I'm going to
go to Ctrl and test this movie.
| | 09:13 | All right, here we are. Now when
I click the About section we shouldn't see the
| | 09:21 | video. We might even see a gray or a
white box there. But when it's done
| | 09:25 | transitioning that's when the video is
going to play. So I'm clicking About.
| | 09:29 | It actually pauses on that first frame
and then immediately starts once the
| | 09:35 | animation or the transition is done
and I can sit and watch the full video.
| | 09:40 | Now if I go to Portfolio and then
I go back to the About section, it should
| | 09:46 | play the video again. Starts it from
the top and plays through. It's great that
| | 09:51 | I can listen for other events by
adding an event listener and that code was
| | 09:56 | similar to the code you'd write for
a button. It's just that you are not
| | 10:00 | listening for click you are listening
for the completion of an animation.
| | 10:06 | Very powerful and very handy and I'm sure
you'll find and use for that in many cases.
| | Collapse this transcript |
|
|
6. Creating a Portfolio SectionDynamically loading images | 00:00 |
Ultimately what Flash is going to
produce is an SWF file. This is great.
| | 00:06 |
It's usually a really small file and I can
see there is this floating image file.
| | 00:10 |
It's 279 kilobytes. So it's pretty
small and let's go ahead and take a look at
| | 00:15 |
what is contains. I open it up. There
are all the sections in here including
| | 00:22 |
this Portfolio section.
| | 00:24 |
Now what's going on here is this
image is actually embedded within the SWF file,
| | 00:29 |
but what I want to do is I want
to make this SWF smaller so it's faster
| | 00:34 |
to download and quicker for people to
see. But I still want to keep all the
| | 00:38 |
content in it, so I don't want
this to affect content at all.
| | 00:41 |
So I'm going to dynamically pull in
this image. I'm going to take it out of
| | 00:46 |
Flash. I'm going to dynamically pull
it in from this folder. So I'm going to
| | 00:50 |
close this. I'm going to pull in that
image from the Images folder. If I look
| | 00:54 |
in here, this is the image I want to
pull in. And again the reasons I want to
| | 00:58 |
do that is it's going to make my file
size smaller for my SWF, and it's going
| | 01:03 |
to enable me to update my web
site without going into Flash.
| | 01:09 |
Okay, so in Chapter 6 I'm dealing
with this LoadingImage FLA file and
| | 01:17 |
if I scroll down to this Portfolio section,
here is the image that I want to change.
| | 01:24 |
So I need to double-click in the
content_mc, double-click again to enter
| | 01:29 |
the Portfolio movie clip, and right here
you can see this is the image that I want
| | 01:35 |
to dynamically pull in.
| | 01:37 |
In fact what I'm going to do now is
I'm just going to delete it. There we go.
| | 01:41 |
Just deleted that image. Now in
place of that image I'm going to use a
| | 01:46 |
component. I'm going to use the
UILoader component, very powerful and really
| | 01:51 |
easy to use. So with that example-lg
layer selected, that's where I'm going to
| | 01:57 |
put my component. Let's go to Window,
down to Components, and in the Components
| | 02:04 |
panel, if you twirl down user
interface, near the bottom is this UILoader
| | 02:09 |
component. Very powerful and all
I need to do is click and drag it onto my
| | 02:15 |
stage and position it where
I want this image to load into.
| | 02:20 |
All right, now he is roughly in
position. I can go ahead and close the
| | 02:25 |
Components panel and let's take a look
at the different parameters and settings
| | 02:29 |
I have for this UI Loader. So let's
go to Window, down to the Component
| | 02:34 |
Inspector and take a look at what
this component contains and what we can
| | 02:39 |
modify. So from the Component Inspector
I can auto-load it. I want to make sure
| | 02:45 |
I'm maintaining the aspect ratio.
I don't want to scale down the content.
| | 02:48 |
I want it to appear at actual size, and
not scale down to this little square.
| | 02:55 |
Even though what I sometimes will do
is select the Free Transform tool and
| | 03:00 |
scale it out a little larger. I can do
that if I want to. But in general if I
| | 03:05 |
undo that scale, just know that it
doesn't matter, the size of this UILoader
| | 03:10 |
component, because anything that gets
pulled in it's going to keep its content
| | 03:15 |
exactly at 100%. So I'm
changing this scale content to false.
| | 03:21 |
The most important parameter in here
is this source parameter. Now remember
| | 03:26 |
I went into the images folder and
I want to target the portfolio01.jpeg.
| | 03:36 |
That's the image I want to target, and hit
Enter. So that's what's going to be loaded
| | 03:41 |
in right in here.
| | 03:42 |
All right, so let me close the
Component Inspector and let's go to Control >
| | 03:47 |
Test Movie. Now when I go to the
Portfolio section, what's interesting in it is
| | 03:53 |
it should look exactly the same, and
it does. And that's what you want your
| | 03:57 |
users to experience. You want them to
experience the full site, but not have to
| | 04:02 |
deal with a huge download at the
beginning. In fact, if I close this and
| | 04:08 |
I minimize Flash, I can see that this SWF
file is smaller as well. It's not down
| | 04:13 |
to 213 K.
| | 04:15 |
So again that's your goal, make
your initial site a quick download and
| | 04:19 |
dynamically load as much content as
you can, especially when it comes to the
| | 04:24 |
user first initiating the
content before downloading it as well.
| | 04:28 |
But again, this is going to keep your
file size really small and it's not going
| | 04:32 |
to sacrifice any of your content, if
you do things this way. Very powerful!
| | 04:37 |
| | Collapse this transcript |
| Using assets from the common library| 00:00 | There are many different ways that you
can make buttons. You can design them
| | 00:04 | from scratch in Flash, you can import
buttons from other programs or you can
| | 00:10 | use buttons that already made within Flash.
| | 00:13 | So if I go to Window, down to Common
Libraries, you can see that I have these
| | 00:18 | different items: Buttons, Classes,
and Sounds. So these are libraries of
| | 00:23 | elements that I can go ahead and use
and add to my project. So in my case
| | 00:28 | I want to go ahead and
access the Buttons library.
| | 00:34 | So if I expand this out, I can see that
there are many folders full of buttons
| | 00:39 | that I can take a look at. Everything
from these two buttons, to even classic
| | 00:45 | buttons as well. So I encourage
you to just spend some time looking at
| | 00:50 | this library of buttons that
you can use in your project.
| | 00:55 | I want to use the flat blue play for my
project. If I move this to the side,
| | 01:01 | I want to use this button in my
Portfolio section. So if I scroll down to the
| | 01:10 | Portfolio section, I can double-
click on this content movie clip and
| | 01:14 | double-click again to add this button
to this movie clip. So what I want to do
| | 01:20 | is I want to go ahead make a new layer
and I'm going to call this Buttons and
| | 01:26 | right in this frame is where I want to
add this button from this Common Library.
| | 01:32 | So all I need to do is it works like
another library. I can click and drag it
| | 01:36 | out onto my stage. Now if I scroll
down a little more, what I want to do is
| | 01:41 | I want to add this button right within
this little curl, right here.
| | 01:45 | And I'm going to go ahead and zoom in using
the Zoom tool, so I can see this button better,
| | 01:50 | and I can edit this button
just like I can any other element.
| | 01:54 | All I have to do is double-click
on it and I can enter its Timeline.
| | 01:58 | So in this case I want to make this
button similar to the other buttons.
| | 02:02 | I'm not going to modify it visually,
because I think it looks great. I want to add
| | 02:05 | a new layer and I'm going to call this
layer Audio. So I want to add some audio
| | 02:11 | to this button. So in the over state I'm
going to right-click and insert a keyframe,
| | 02:18 | and in this over state in my
Properties panel, I'm going to locate the Sound
| | 02:24 | section and using the name dropdown
I'm going to locate the rollover wave.
| | 02:29 | So this lists out every single sound
file that's in my current library. I can
| | 02:35 | select it and it adds it to my over
state. I'm going to do the same for the
| | 02:38 | down state by inserting a keyframe
and going to the Properties panel under
| | 02:44 | Sound, the name should be click. So
I have added two sound files to this button
| | 02:51 | that was copied from my Common Library.
| | 02:53 | All right, let me click out on the
Portfolio movie clip and let me give this an
| | 02:59 | instance name of next_btn. So there
is my Next button. Now let me use this
| | 03:08 | dropdown to jump out to 100%, so I can
move this button, basically duplicate it
| | 03:15 | for my Back button.
| | 03:17 | Now the first thing I need to do is
I need to copy it, so I'm going to
| | 03:19 | right-click, Copy and then I'm going
to click anywhere on the stage and click Paste.
| | 03:26 | So now I have just duplicated
that button for the Back button.
| | 03:29 | So I'm dragging it over here to this
curly cue and I'm going to use the Zoom
| | 03:35 | tool to zoom in there. Click back on
my Selection tool. Make sure that button
| | 03:40 | is selected and I'm going to give
it an instance name of back_btn.
| | 03:47 | Okay, with this back_btn still
selected I'm going to go to my Free Transform
| | 03:52 | tool and make sure it's pointing the
other direction. I can hold down the Shift key
| | 03:56 | to lock it into place. So it's
going to be pointing directly to the left.
| | 04:01 | So that's all I need to do. I have
been able to easily drag a button from the
| | 04:06 | Common Library and modify it
accordingly so it fits my design and then even
| | 04:11 | duplicate it as well and use it in
multiple places. All really fast and that's
| | 04:16 | what the Common Library does. It
allows me to add elements quickly to my
| | 04:20 | project so I then can move on to adding
functionality to a button such as this one.
| | Collapse this transcript |
| Adding multiple images to the portfolio section| 00:00 | Up to this point we've been able to
modify movie clips using ActionScript, such
| | 00:05 | as navigating through the different
sections. But we can also modify the
| | 00:09 | parameters of components as well.
So here is a UILoader component and
| | 00:14 | if I click on this button here,
it's going to load in another image.
| | 00:19 | If I click on this Back button, it's
going to load in the previous image as well.
| | 00:23 | So it's really just loading in
Portfolio image 1 and then image 2, but
| | 00:29 | it's dealing with this same component.
That's what I want to do now is modify
| | 00:33 | that component based on what you
click on. So I'm going to close that final
| | 00:37 | file and I'm going to go into my
current project and I'm going to scroll down
| | 00:43 | to the Portfolio section.
| | 00:45 | If I double-click on this content
movie clip and double-click again to enter
| | 00:49 | this Portfolio movie clip, this is
where my buttons exist. As we can see,
| | 00:56 | I have this next_btn and this back_btn as
they're known by their instance names.
| | 01:03 | Now if I click on my Timeline, in my
Timeline this is where I want to add my
| | 01:08 | ActionScript to change this component.
But notice how this component currently
| | 01:14 | does not have a name, and I want to
make sure I give it a name. I'm going to
| | 01:17 | call it largeImageLoader. That's what
we'll call it and I'll even select this
| | 01:24 | name and right-click to copy it,
so I want to keep that name in mind.
| | 01:29 | Now, I'm going to create a new layer
and I'm going to call this ActionScript,
| | 01:37 | right on this first frame in this
layer is where I'm going to write my
| | 01:40 | ActionScript that's going to be
applied to these buttons. So selected that
| | 01:44 | first frame, go to Window, to Actions.
| | 01:47 | So if you recall the button called next_
btn and I want to add an event listener
| | 01:54 | for it and the type is going to be a
mouse event and I'm going to listen for
| | 02:02 | the CLICK. Notice how I get this code
hint. Well, I can use my Arrow keys to
| | 02:06 | move down to the CLICK mouse event to select it.
| | 02:11 | Add a comma, and then I need to
reference the function that's going to fire off
| | 02:15 | when you click on this button, and
this function is going to be called
| | 02:18 | nextImage. End with a semicolon.
| | 02:22 | So down three lines total, I'm going
to add the function, nextImage and it's
| | 02:33 | expecting this Event object, this mouse
event. So I want to make sure this name
| | 02:39 | matches up with this name. So it's
expecting a mouse event. I don't want to
| | 02:44 | return anything, so traditionally
you'll just add the word void at the end with
| | 02:49 | a colon. And then within these two
curly braces, this is where my function
| | 02:54 | calls are going to be. Anytime you call
this function, whatever is within these
| | 02:59 | two curly braces is
going to be what is executed.
| | 03:02 | So what I want to start with is just a
trace, so I'm going to trace out next
| | 03:07 | image. So I have encompassed that with
quotes in parenthesis and that's what
| | 03:13 | will be traced out, nextImage, so
I know that function is being called.
| | 03:18 | Now, this second line that I'm going to
type in, if I move my Actions panel, is
| | 03:23 | I want to go ahead and change the
parameter of the UILoader component.
| | 03:29 | So I'm going to move my Actions panel down
and I'm going to locate my UILoader.
| | 03:35 | Now I'm going to go to Window. All
the way down near the bottom is the
| | 03:40 | Component Inspector panel. So if
I open that up you can see the different
| | 03:45 | parameters that are available for this
UILoader. As you can see there is many
| | 03:49 | different parameters, but I'm most
interested in this source parameter.
| | 03:54 | Its name is source and it is
equal to images/portfolio01.
| | 03:57 | Well, for my Next button, I want to
make the source parameter equal to the
| | 04:06 | value images/portfolio02.jpg. So let's
do that. I'm going to keep this name in
| | 04:12 | mind. Source, select that first frame.
Go to my Actions panel and I'll just
| | 04:19 | type in the name of the UILoader
component. Remember, I copied it earlier. So
| | 04:25 | I'm going to right-click and I'm going to paste.
| | 04:28 | So that's the name of the UILoader
component. I'm going to add a period and
| | 04:33 | then I'm going to type in that
parameter name, which was source. So the source
| | 04:37 | is going to be equal to images/
portfolio02.jpg. So we just changed that source
| | 04:46 | parameter with ActionScript.
| | 04:48 | So let's try that out now. If I move
that panel down, I'm going to go to
| | 04:53 | Control > Text Movie. I'm going to
click on the Portfolio section; I'm going to
| | 05:02 | move this down, because we should see
a trace statement as well. When I click
| | 05:06 | on this button, we get portfolio02.
jpg and we also get that trace statement
| | 05:13 | that says nextImage. Because remember
that's the name of the function that was
| | 05:17 | called. And it works great, but
our Back button does not work yet.
| | 05:21 | So I'm going to go ahead and add that
functionality right now. And luckily, if
| | 05:26 | I close that test file, the code
is going to be the same with some
| | 05:31 | modifications. So I'm going to select
all of this code and I'm going to copy it
| | 05:38 | and then I'm going to right-click
and paste this code just beneath it.
| | 05:42 | Now I'm going to modify this code for
the Back button. So back_btn. I'm going
| | 05:47 | to add an event listener. It's a CLICK
event listener and it's going to fire
| | 05:51 | off this function called backImage. So
backImage is going to be this function
| | 06:00 | here, so I need to change this name,
backImage, and then I need to modify these
| | 06:07 | two statements as well. backImage is
where it gets traced out and then I want
| | 06:14 | to change the source back to portfolio01.
| | 06:16 | All right, with that set up and it's
looking good and often when I'm doing a
| | 06:22 | lot of typing or coding, I might want
to check the syntax, so I can hit that
| | 06:27 | little Check button. And it does say
this script doesn't contain any errors. So
| | 06:32 | it should work just fine, I'm going to
go to Control > Test Movie, and go to Portfolio.
| | 06:42 | Now if I click on this Next button,
it loads in image number 2, Back button
| | 06:47 | loads in image number 1. So it works
out great, and as you are able to see,
| | 06:53 | I was easily able to use a similar button
function like I would if I'm jumping to
| | 06:59 | a new section. In this case what I'm
doing is I'm modifying a parameter for the
| | 07:05 | component which works quite well,
I can use that same component for as many
| | 07:10 | images as I want to.
| | 07:11 | This is very useful. I was able to
change a parameter of a component to load in
| | 07:16 | a different image.
| | Collapse this transcript |
| Adding unlimited images to the portfolio| 00:00 | ActionScript also allows you to use one
button and have it do different things.
| | 00:05 | Let me show you what I'm talking about.
If I go to the Portfolio section,
| | 00:10 | I have two buttons here. This
Forward button and a Back button.
| | 00:14 | So if I click this Forward button, it
loads in this portfolio02.jpg, regardless
| | 00:20 | of how many times I click it. Back
button does the same thing. It just opens
| | 00:25 | up, loads in portfolio image 1.
I basically want to have a dynamic variable in
| | 00:32 | here that loads in different images
and not just one. So each time I click on
| | 00:37 | the button, it's going to load in a new
image. So that's going to mean creating
| | 00:41 | a variable and adding or
subtracting from that variable.
| | 00:45 | So I'm going to close this test file.
I'm going to go to my Timeline; I'm going
| | 00:49 | to scroll down to the Portfolio
section. I'm going to double-click on this
| | 00:57 | content_mc and double-click again to
enter the Portfolio movie clip Timeline.
| | 01:03 | At the top of that movie clip, we can
see in the Timeline panel, we have this
| | 01:07 | ActionScript layer, and first frame is
where my ActionScript is going to live.
| | 01:12 | I'm going to go to Window, down to Actions.
| | 01:14 | So here is what's already in there. We
have these functions. So this next image
| | 01:21 | function loads in portfolio02. This is
what you would call hard-coding a link.
| | 01:28 | So that's what's going on here. Same
thing with the Back image. It's loading in
| | 01:32 | portfolio01.
| | 01:34 | So that's what I need to change, I want
this to be 02, 03, that sort of thing.
| | 01:39 | The way to do that is creating a
variable. Now variable is going to be that
| | 01:46 | container that holds some sort of value,
whatever it is. And in this case, my
| | 01:54 | variable I'll have to start with
the word var. It's going to be called
| | 01:59 | imageNumber.
| | 02:00 | So the container is called imageNumber0
and inside of this container it's going
| | 02:05 | to contain a number. So I'm telling
Flash numbers going here and that's it. So
| | 02:12 | the number that's contained in here
initially is going to be 1. So to the right
| | 02:17 | of the equal sign is the value. So
this is known as a name value pair.
| | 02:23 | So now that we have this imageNumber
equal to 1, I want to use this variable
| | 02:29 | name right in here, actually explicitly
on this number. So I'm going to replace
| | 02:35 | that too with couple plus signs
allowing me to add imageNumber. So I need to
| | 02:44 | make sure this variable name
is exactly the same as this.
| | 02:48 | So this allows me if I have a plus
sign on either side of this variable and
| | 02:54 | quotes around these strings, then it's
going to give me the equivalent of the
| | 03:02 | number 1. Let me undo that.
| | 03:05 | All right, I need to do one more thing,
because it's going to continually load
| | 03:15 | in portfolio image 1. So within this
function, I want to add to the imageNumber
| | 03:22 | and I can add to the imageNumber by
typing in there imageNumber and then two
| | 03:26 | plus signs and this does the equivalent
of-- let me add a comment here-- add a
| | 03:33 | number to the current value, more or
less. So we're adding to the current value
| | 03:40 | +1.
| | 03:40 | All right, current number is going to
add 1, so it's going to be equal to 2,
| | 03:49 | then it's going to be equal to 3,
and it's going to load in that into our
| | 03:54 | ImageLoader. So let's go to Control
> Test Movie. Click on the Portfolio
| | 04:01 | section, let's click this Next button,
click one more time, oh, and it is
| | 04:06 | working. There we are in the last image.
| | 04:10 | So if I go in my images folder, you
can see it's loading in all of these
| | 04:13 | images, just exactly the way I wanted
to work. Now the issue still is this Back
| | 04:19 | button. If I click on it, it's always
going to load in that image. So let's
| | 04:24 | modify that function. Let me close my
test file, move this Actions panel up,
| | 04:32 | and I want to do the same thing,
I want to subtract 1 from the current value.
| | 04:43 | So whatever imageNumber is,
subtract 1 from it is what this is doing.
| | 04:49 | I am going to replace this number 1
the same way I've replaced number 2 up
| | 04:56 | above and that's by adding imageNumber.
| | 04:59 | All right. That's all I have to do.
imageNumber. That looks good. That looks
| | 05:04 | good. I'll check the syntax. It says
there are no errors. So let's go ahead and
| | 05:09 | go to Control > Text Movie.
Portfolio section, Next, Next, and then Back.
| | 05:26 | We can see that it works great, and you
can see how powerful that is, changing
| | 05:33 | something that's hard-coded to a
variable makes this so much more powerful in
| | 05:40 | both cases. So really, variables are
really the backbone of anything that you
| | 05:46 | write in Flash or with any programming language.
| | Collapse this transcript |
| Dynamically showing and hiding graphic elements| 00:00 | When you are creating any site,
you always need to keep usability in mind and
| | 00:05 | this site is no different. If I go to
the Portfolio section, you can see that
| | 00:10 | that's pretty usable. I know this
forward button is going to load in more
| | 00:14 | images but it breaks at some point.
It breaks when I click on this one more time.
| | 00:20 | Because it's trying to load in
an image that doesn't exist within my folder.
| | 00:27 | In fact, if I go back the same thing
happens with the back button. If I click
| | 00:32 | once more, it's trying to load in an
image that doesn't exist. So that's just
| | 00:37 | bad usability because if there is no
more images I need to hide this button.
| | 00:44 | So let's close that test file and let me
go back and let me actually jump to the
| | 00:53 | Portfolio section.
| | 00:55 | And I double-click on this content
movie clip; I'm going to scroll down.
| | 01:00 | There is my Portfolio movie clip. If
I double-click, I'm now within my Portfolio
| | 01:06 | movie clip. So I'm going to select that
first frame, this is where all my code
| | 01:10 | exists. I'm going to go to Window,
down to Actions and here is all my code.
| | 01:16 | So it's working out great. It loads in
images and it will continue to add to
| | 01:21 | this imageNumber and that's what's
going on. Every single time you click the
| | 01:26 | next button, it's always going to add
one to the imageNumber. Same thing for
| | 01:31 | the back button. Every time you click it,
it's going to subtract one from the imageNumber.
| | 01:36 | So we need to fix this and the way to
fix this is to create a new function and
| | 01:42 | this function is going to check the
current number and make sure it's not too
| | 01:46 | high or it's not too low. I'm going to
add that function up near the top here.
| | 01:52 | I'm just going to hit Return a couple
times. I'm going to add this function and
| | 01:57 | it's going to be called checkNumber
and it's not going to accept anything but
| | 02:05 | it's always going to be checking for
the correct number. I'll add my open curly
| | 02:11 | brace and my closing curly brace and
from within those two that's what I want
| | 02:18 | to call, as I want to check for the
visibility. I also want to check the
| | 02:22 | numbers as well.
| | 02:23 | So the first thing I'm going to do is
I'm going to add an If statement. So
| | 02:26 | I'm going to add this comment first,
say If the imageNumber is = 5 then do
| | 02:36 | something. That's basically what I want
to add now. So I'm going to write this
| | 02:43 | if statement. if imageNumber-- I'm
making a condition here. If it's equal to, ==.
| | 02:52 | If it's one equal sign, it's going
to set imageNumber equal to 5.
| | 02:57 | But in this case, I want to
check it against the number 5.
| | 03:00 | So if the imageNumber is = 5, then do
what's ever within these two curly braces
| | 03:08 | and for now, all I'm going to is type
in a trace statement that checks the
| | 03:14 | imageNumber. So it's going to print
out the number 5 in the Output window,
| | 03:23 | if this is called.
| | 03:24 | All right, so that's what I want to
happen. I'm doing this checkNumber.
| | 03:32 | Now I'm going to call this function from my
nextImage function. So anytime you click on
| | 03:39 | the next button, I want to call this
checkNumber function. So right after this
| | 03:45 | ImageLoader parameter that I'm changing,
but before the closing curly brace,
| | 03:50 | I want to add checkNumber. I'm going
to check the number. I'm calling this
| | 03:55 | function and that's how I call
function is I just list out the name.
| | 03:58 | So you click the button, it's going to
check against the number and see if the
| | 04:03 | imageNumber is = 5. All right, let me
check my syntax. Okay, my script doesn't
| | 04:11 | contain any errors. So let's try this.
Control > Test Movie. Portfolio section.
| | 04:22 | One, actually this is image number two,
three, four, and let me show my Output
| | 04:31 | panel right here. Click one more time
and then it prints out the number 5.
| | 04:37 | So that shows me that the function is
working. That's wonderful because that's
| | 04:42 | exactly what I want. So let's
actually have something visual happen now.
| | 04:49 | So from within this if statement, I want
to change the visibility of that next button.
| | 04:54 | So next_btn. I want to change its
visibility and again I get this code hint
| | 05:02 | that pops up and hit Enter. Change the
visibility to false. So when you reach
| | 05:08 | the end of all of these images, I want
to make that next button disappear and
| | 05:13 | that's what this does here.
| | 05:15 | Let's go ahead and write the
conditional statement, as this is known,
| | 05:21 | for the back button. So if the imageNumber
is = 1, then don't show the back button.
| | 05:33 | That's what I want to happen. If
imageNumber==1, open curly brace, closing
| | 05:43 | curly brace. Don't forget about those
and I'm going to add a trace statement
| | 05:47 | just like I did above. imageNumber
and in this case, I'm going to make
| | 05:54 | the back_btn visibility = false.
| | 06:02 | There is an issue with this code which
I'm going to show you in a second but if
| | 06:06 | the imageNumber is = 1 then it's
going to make this button invisible, or if
| | 06:12 | it's equal to 5, it's going to
make the next button invisible.
| | 06:14 | All right, so let's test out.
| | 06:21 | Portfolio section.
I have trace statements so let me
| | 06:25 | move this Actions panel down.
| | 06:31 | Click, click, click and there is my last image.
| | 06:37 | It's equal to 5. My next button
disappears. Perfect! That's exactly what
| | 06:42 | I want, very usable. The user
knows that there is no more images.
| | 06:45 | Let me click the back button. When
I get to this equaling one, it should
| | 06:54 | disappear. But there is an issue with
that and I'll show you what that is.
| | 06:58 | Let me close that. Because one thing
I didn't add is I need to make sure I'm calling
| | 07:03 | the checkNumber function from both of
these functions. So that line of code
| | 07:10 | I need to add right down here. Just like that.
| | 07:19 | Let's test this one more time.
Portfolio section, the forward button,
| | 07:29 | the next button disappears and now when
I go back, the back button disappears.
| | 07:38 | Now they are both gone. That's an issue because
I should be able to go forward at least at this point.
| | 07:44 | So let's resolve that right now.
Let's close that test. Now let's go to our
| | 07:50 | function here, this checkNumber
function, and what I want to do-- anytime
| | 07:55 | you call this function I want to set
the visibility of both the next button,
| | 08:01 | its visibility to true and the
back button's visibility to true.
| | 08:09 | So both of them are set to true when
you first call this function and then if
| | 08:14 | the imageNumber is = 5, it will turn
off the next button or if it's equal to 1,
| | 08:19 | it's going to turn off the back
button. But these will turn it back on.
| | 08:24 | All right, let's go Test Movie.
| | 08:30 | Portfolio section. Let me go forward.
| | 08:39 | It disappears. Now it should come back
when I click Back and it does. It does come
| | 08:44 | back. Let's see if this one does it.
If it's equal to one, it's invisible but
| | 08:50 | if it's equal to anything else
it should reappear and it does.
| | 08:54 | But I don't know if you notice the
initial issue. The issue is that I actually
| | 08:58 | do have the back button when I first
come to this Portfolio section. So I need
| | 09:02 | to call this function in this Timeline.
So let's close this and just below the
| | 09:09 | checkNumber function I need to call the
function itself. This will turn off the
| | 09:16 | back button because the initial value
is set to 1. And this should be
| | 09:23 | the last test I need to do.
| | 09:28 | Portfolio section.
I can see that back button is shut off.
| | 09:31 | So very awesome, very easy to use
these conditional statements to check for
| | 09:36 | things and have your graphics
basically be modified in whatever way you want
| | 09:42 | depending on any user
interaction that might happen.
| | Collapse this transcript |
| Creating 3D tweens | 00:00 | When you are using Flash you always
want to think about what Flash is good at
| | 00:05 | and use those features such as its
ability to animate. And we do have some
| | 00:10 | smooth animations between sections
but when we get to our Portfolio section
| | 00:17 | these images just load in like any
other image. Not super sexy and that's what
| | 00:23 | we want to do. We want to add some
sexiness and really a 3D tween to bringing
| | 00:29 | in these images.
| | 00:30 | So let me close that test file. Go to
my Timeline. Let me double-click on this
| | 00:37 | content movie clip and I'm going to
scroll down to the Portfolio movie clip and
| | 00:43 | double-click on it and that first
layer is my ActionScript layer. If I select
| | 00:50 | that first frame, I can then go open
up my Actions panel. So here is all the
| | 00:57 | code that's currently written and
it's really making everything work and
| | 01:00 | everything is looking great,
but I want to add a tween to this.
| | 01:05 | So let me just hit Return a couple
times to give myself some space. In fact,
| | 01:11 | what I want to do is I want to listen
for the completion of the load of this
| | 01:18 | image. So this largeImageLoader is the
loader component and I want to listen
| | 01:23 | for the completion of any load.
| | 01:26 | So let me just take this name and I'm
going to right-click and copy it and
| | 01:32 | I'll paste it just below, down here and
I want to add an event listener to it.
| | 01:40 | I'm going to add an event listener. This
listener is going to listen for an event
| | 01:45 | and the event it's going to listen to
is the COMPLETE event. There it is.
| | 01:52 | It pops up in my code hint. I can hit Enter.
It's going to listen for the complete
| | 01:57 | of any image that's loading and once
it does that, it's going to call the
| | 02:03 | imageLoaded function.
| | 02:05 | All right, function imageLoaded is what
I need to code now. It's going to be an
| | 02:16 | Event type. So it's not going to be a
mouse event, just a regular event, and
| | 02:22 | I'm going to had an open curly brace
and a closing curly brace. Okay, so in
| | 02:27 | this function, I'm going to have two
lines of code. I'm going to have a trace
| | 02:33 | that says image has been loaded, and
then I'm going to another line of code.
| | 02:43 | But let's make sure this is working.
| | 02:44 | All right, I'm going to go to Control
> Test Movie. Portfolio section. Let me
| | 02:54 | move down this Actions panel so we can
take a look at our Output panel.
| | 03:00 | When I click the next button, I should see
images loaded and there it is. In fact, if
| | 03:06 | I click it multiple times I'm going to
see that printed out in my Output panel.
| | 03:12 | So it is working and it's looking great.
| | 03:15 | Well, I want to add some cool tweens
like I have with these other sections.
| | 03:22 | I want to add a 3D tween. In fact, I'm
going to use these tweens as an example or
| | 03:28 | at least the starting point for my 3D
tween. So I'm going to close my test file
| | 03:35 | and what I want to do is I'm going to
go out to Scene 1. And in Scene 1,
| | 03:44 | if I go to my Timeline to that very first
frame in the Actions/Labels layer, I can
| | 03:51 | take a look at that code because
I want to do the same thing. I want to add a
| | 03:55 | very nice tween.
| | 03:57 | In fact, I'm just going to copy this
tween format of moving the background. So
| | 04:02 | I'm going to select it. I'm going to
copy it and now I'm going to show you a
| | 04:06 | nice shortcut because you have seen
me bounce around and dig into different
| | 04:10 | movie clips to access different
ActionScript. When really what you have is you
| | 04:15 | have all that available right here.
You can see this is my navigator for
| | 04:19 | ActionScript and it shows me everywhere
where there is ActionScript and what
| | 04:24 | I want to do is I want to go back into my
Portfolio movie clip to the code there.
| | 04:30 | You can see this Code Navigator lets me
jump right to that place as opposed to
| | 04:35 | navigating through the Timeline like
I was doing before. All right, I'm exactly
| | 04:40 | where I want to be. In fact, I can
close that just by hitting that arrow and
| | 04:44 | open it as well that same way. But I'm
going to nest that back on the side and
| | 04:50 | I'm going to right-click and
paste in the code I just copied.
| | 04:54 | So what I want to do is I want to
modify this tween call. I want to animate
| | 05:00 | this largeImageLoader. In fact, I'll
copy that name and replace the background
| | 05:07 | and see with the instance
largeImageLoader and instead of animating its X
| | 05:14 | position, I'm going to type in rotationX.
So it's going to rotate on an X-axis,
| | 05:22 | flipping as if it was maybe something
on a close line, forward and back is how
| | 05:27 | it's going to work.
| | 05:28 | In fact, if I change Regular to
Elastic, we'll get a nice bouncing effect
| | 05:34 | there. And again, I want to replace
this bkgd_mc with its starting point, which
| | 05:41 | is going to be 90 degrees, and it's
going to end up at 0 degrees. And if I ever
| | 05:46 | need to remember what these different
properties are, I can always come up here
| | 05:51 | and show the code hint. So that's the
finish point. So it's going to animate
| | 05:55 | this from 90 degrees to 0 degrees. It's
going to make it flat and it's going to
| | 06:01 | do it over the course of two seconds.
| | 06:02 | All right, let's try this out. It
should do it for every single image, each
| | 06:07 | time one is loaded, it will call the
trace statement and we'll animate it in.
| | 06:11 | So let's go ahead and try this. Control
> Test Movie. I'm getting an error and
| | 06:23 | I know exactly what that is and I'm
glad it came up because it's a call to a
| | 06:29 | possibly undefined method tween. So
this is an error you get if you use the
| | 06:36 | tween class without
importing the code that it uses.
| | 06:43 | So let me jump out and again, I'm
going to use my Code Navigator to jump back
| | 06:50 | to my main Timeline, that first frame.
So that's the equivalent of going to the
| | 06:55 | main Timeline clicking on that first
frame and in here it says it's looking for
| | 07:01 | this undefined method called Tween.
And the reason it's asking for that is
| | 07:05 | because that information is right here.
| | 07:08 | So Flash is getting the code but it's
only getting the code for everything on
| | 07:13 | this current Timeline. So I need to
copy this. Right-click, Copy.
| | 07:20 | Code Navigator, I'm going to jump back out
into the Portfolio movie clip and right
| | 07:27 | in here just above my function,
I can right-click and paste in that code.
| | 07:33 | Now because this is using the tween
and this is using the easing. And I don't
| | 07:40 | need this line but I'll keep it there.
And I go to Control > Test Movie, click
| | 07:51 | Portfolio. Now let's take a look at
our tween and it swings in. A very nice
| | 07:57 | look. It was one line of code,
actually a total of three, but in general it's
| | 08:03 | that one tween call that animates
every single image swinging in, in a 3D
| | 08:09 | fashion. Very nice, very sleek and very useful.
| | Collapse this transcript |
|
|
7. Creating a Contact FormCreating input text fields| 00:00 | At some point you will want to create a
contact form so users can get in touch
| | 00:05 | with you and this is done pretty
easily using input text fields, because
| | 00:09 | currently if I go to the Contact
section these are just static graphics. So we
| | 00:15 | are going to replace
these with input text fields.
| | 00:18 | Let me close that test file and go the
Timeline. I'm going to double-click on
| | 00:25 | this content movie clip and I'm
going to scroll clear down to the Contact
| | 00:31 | section. I double-click on that contact
movie clip. I can see that here is the
| | 00:36 | graphic. It's just some example boxes.
I want to turn these into input text
| | 00:42 | fields. What I need to do is
just delete what's currently there.
| | 00:46 | Now what I want to do is I want to
select the Text tool and in order to make an
| | 00:52 | input text field, I need to change
the property of this text tool to Input
| | 00:59 | Text. So from that dropdown I'm going
to select Input Text. Something else
| | 01:04 | I'm going to change is I'm going to show
border around the text as well. So with
| | 01:10 | that pressed it is going to show a
black border around each one of these boxes.
| | 01:17 | Keep in mind the fonts as well. In
fact let me change this font to something
| | 01:24 | easier to read such as Arial. So
I'll just type in Arial and hit Enter.
| | 01:31 | Now I can go ahead and click and drag
to create my input text field. As soon as
| | 01:38 | I release, I can see there is my input
text field. Now I'm going to select my
| | 01:44 | Selection tool and adjust this with my
arrow keys and move it down. What I can
| | 01:51 | even do is double-click on it and type
in my name just to see how it will be
| | 01:57 | displayed and in my opinion that's a
little small and I want to left justify
| | 02:03 | that text as well. So just with that
text selected, I can go into the Paragraph
| | 02:10 | area of the Properties panel and
change the format to Align left and I'm also
| | 02:17 | going to increase the size of this
font by typing in 14. It's much better.
| | 02:23 | Now if I want to resize this I want to
grab this node down here in the lower
| | 02:28 | right and that's what that node is for,
just resizing. So I'm going to slim it
| | 02:32 | up just a touch and let go and that's
what I want it to look like. It's looking
| | 02:37 | great, good to go, I think for the most part.
I can give this an instance name as well.
| | 02:43 | So I'm going to clear out this text
and the instance name for this text field
| | 02:49 | is going to be name_txt, all right.
Now what I want to do is I want to do the
| | 02:55 | same thing for the email area and the
message area. So I can click and drag
| | 03:03 | using the Text tool to make the email
area. It keeps all of my settings that
| | 03:10 | I have just changed and all I need to do
is give it an instance name of email_txt.
| | 03:17 | All right, lastly I want to do the
message text field. So I'll just click and
| | 03:23 | create that. Select my Selection tool
and move it up and with that input text
| | 03:35 | field selected I can give it
an instance name of message_txt.
| | 03:40 | All right now they are ready to go.
They are not fully aligned so I think
| | 03:44 | I'll select all three by holding down the
Shift key and I can go to Window, down to
| | 03:51 | Align and align them on their left edge.
I can even space them out evenly as
| | 03:58 | well, just by clicking that button. And
if I want to further adjust them I can,
| | 04:05 | I can use different rulers. But for
the most part I want to see if this is
| | 04:08 | working. So I'm going to go
ahead and publish this file.
| | 04:13 | I am going to go Control > Test Movie.
Now when I go to the Contact section,
| | 04:19 | there is my text boxes, I can click
inside of it and I can type in each one.
| | 04:27 | In fact, I can even hit the Tab key and
it will tab down to the nearest text
| | 04:33 | field, just like that. Hit Tab again
and type in whatever I want. And then you
| | 04:43 | would hit Submit. But you can see if
I close that file it's easy to make input
| | 04:47 | text fields. It's really just a
matter of using your Text tool and then
| | 04:52 | adjusting the dropdown to input text
and that will users the control to type in
| | 04:59 | whatever they want. The next step
would be to make this Submit button work to
| | 05:04 | send that data out of Flash.
| | Collapse this transcript |
| Passing data out of Flash| 00:00 | Once you have created some input text
fields, you want to be able to take that
| | 00:04 | content that is in here, whatever the
user types in, and you want to pass it out
| | 00:16 | of Flash. So I need an Enter button and
I need to take whatever data is in here
| | 00:22 | and pass it out of Flash and I can do
that if these are input text fields.
| | 00:27 | So let me close down that text file.
And let me go to my Timeline. I'm going to
| | 00:34 | double-click on this content movie
clip. I'm going to scroll down to the
| | 00:42 | Contact section. So if I double-click
on it. This is where I want to add my code.
| | 00:47 | And just to review, I can
select any of these input text fields.
| | 00:54 | The first one is called name_txt,
second one is email_txt, third one is
| | 01:02 | message_txt. So here are my text fields.
I now need to create a button that is
| | 01:09 | going to pass that data out. So I'm
going to delete this Submit text and
| | 01:15 | I'm going to go to Window, down to Common
Libraries, and I'm going to go to Buttons
| | 01:24 | and I'm going to go ahead and grab a
button from this Common Library. I'm going
| | 01:30 | to go with this buttons rounded and
I can select any one of these. I like this
| | 01:37 | blue one at the top, so I'm just going
to click and drag it into my Timeline,
| | 01:41 | into my Contact movie clip. I can
close that Common Library and position this
| | 01:48 | button just below those input text fields.
| | 01:50 | All right, with that button selected
I'm going to give it an instance name.
| | 01:56 | I'm going to call enter_btn. That is my
Enter button. Now I need to create an event
| | 02:03 | listener for that button. So at the
very top of all my layers, in my Contact
| | 02:09 | movie clip, I'm going to create a
new layer and I'm going to call it
| | 02:14 | ActionScript. And in this very first
frame, that where I'm going to add my
| | 02:19 | code, I'm going to go to Window, to
Actions. So I'm going to create this
| | 02:24 | button, as if I'm creating any button,
it's going to be the same way. I first
| | 02:32 | need to state what I need to listen for.
It's going to be the Enter button and
| | 02:35 | I need to add an event listener. Soon
as that's highlighted I could hit Enter
| | 02:41 | to add it. I'm going to listen for a
mouse event. That Click in particular.
| | 02:48 | And once you click on this button, it's
going to fire off this function called sendData.
| | 02:56 | Now let's write the function to
sendData. It's going to be a mouse event and
| | 03:10 | it's not going to return anything. I'm
going to add an open curly brace and a
| | 03:15 | closing curly brace and within those
curly braces that's where I'm going to
| | 03:20 | write more code. And I'm going to
start out with some trace calls. So for
| | 03:25 | instance I want to trace out whatever
is in the name text field. So name_txt is
| | 03:33 | the name of that movie clip and
I want to take anything that's in the text
| | 03:38 | property. The name_txt.text. That's
going to be traced out. It's going to be
| | 03:44 | put in my Output panel.
| | 03:46 | So I'm going to do that for the name
_txt. I also want to trace out the
| | 03:50 | email_txt.text just to make sure
this is working. I'll trace out the
| | 03:59 | message_txt, whatever property is in
that. Text property for a message_txt as
| | 04:07 | well. Now it doesn't matter whether
there are spaces in here or not. People
| | 04:11 | prefer it different ways. I'll just
space it out a little bit. But in general
| | 04:15 | this is ready to go. So when I click
on the Enter button, it's going to fire
| | 04:19 | off this sendData function and in my
Output panel it will trace whatever is in
| | 04:25 | these text fields.
| | 04:27 | So the first thing I want to do is
just double-check my code. So I'm going to
| | 04:31 | click the Check syntax, it does say
this script contains no errors.
| | 04:35 | So I'm going to go ahead and run this.
Control > Test Movie. Contact section, so
| | 04:43 | whatever I type in here, and here,
and here is what should be shown in my
| | 04:55 | Output panel. So when I click this
button, I can see that it did, take whatever
| | 05:01 | was in those fields and it prints
out in my Output panel. Paul Trani,
| | 05:06 | paul@paultrani.com, and then the
message, whatever message that might be.
| | 05:10 | So we know everything is working, it's
working great. Now I just need to pass
| | 05:14 | that data out. Now there are many
different ways to do this. There are more
| | 05:18 | complex ways, using some server-side
scripts, some middleware pages, using PHP,
| | 05:23 | JSP that sort of thing. But for our
needs I'm just going to pass this data out
| | 05:30 | and it's going to open up your default
email application with this information
| | 05:35 | already in it.
| | 05:37 | So this is going to be done by
creating a variable called mailAddress.
| | 05:42 | So I need to type in the mailAddress.
This could be anything. I could call this theEmail.
| | 05:51 | It doesn't matter. But this
is what matters is the URLRequest.
| | 05:58 | Because that's what I'm doing. I'm
making a URLRequest. I'm passing all this data
| | 06:03 | through a URL string. I'm going to
make this really clear in a second.
| | 06:07 | I'm going to create a new URLRequest and
this is the string. I want to pass all
| | 06:18 | this information to this specific
email address. And I'm going to say mailto,
| | 06:24 | you might be familiar with mailto, it's
a Web term, HTML. I'm going to mail to
| | 06:29 | john@johndoe.com. That's where it's
going to be sent, and this is where the
| | 06:36 | magic happens, because I want to not
only open up your default email client
| | 06:42 | such as Outlook, but I want to pass
all of this data into their perspective
| | 06:48 | fields in that email.
| | 06:51 | So it's going to open up a new email.
It's going to have john@johndoe as the
| | 06:54 | To, so it's going to send that email
to john@johndoe and the From, if I do
| | 07:01 | ?from=, that's where I want to add
the email text that you have typed in.
| | 07:10 | So I need to take this same chunk of code.
So I'm actually going to select it, copy
| | 07:16 | it and write down here, as part of
this string I'm going to add it, plus and
| | 07:26 | then paste it and now whatever they
type in here is going to appear in this URL
| | 07:34 | request in their email client. So email
_txt.text +. I want to add a couple of
| | 07:42 | more items to this string. The next
thing is going to be the subject. And in
| | 07:48 | the subject I want to include that this
is from the Web site. So that's just a
| | 07:55 | personal message. So John knows that
this email came from someone who visited
| | 08:01 | his web site and the body of the email
is going to equal whatever they have in
| | 08:08 | this message text field. So again I'm
going to select this. I'm going to copy
| | 08:12 | it and I'm going to body. I'm going
to make that equal to, paste the text
| | 08:23 | whatever is in the message text field.
| | 08:26 | And lastly I needed to type in the
From and this is just a simple message
| | 08:30 | saying 'this is from,' and this is
going in the body as well. It's from whoever
| | 08:37 | typed in the name in the From field,
name_txt.text. And again, this matches up
| | 08:45 | with what's right here. If they type
in their name here, it's going to appear
| | 08:50 | in the message body is what's going to
happen. And what I did here is I have
| | 08:54 | added also an extra little note saying
that this is from this person.
| | 08:59 | So I'm actually going to see whatever I type
in here is going to be in the body of the email.
| | 09:03 | So that is looking pretty good but keep
in mind any parenthesis that I open,
| | 09:09 | I have to close. So down here at the end,
I want to close that parenthesis.
| | 09:13 | Now I have just made a URL request but
I have not sent it yet. And that's what
| | 09:18 | I need to do now is I want to navigate
to that specific URL and the URL in this
| | 09:28 | case happens to be the email. So I'm
going to select that, right click, Copy,
| | 09:35 | click in here and paste it, just like that.
| | 09:39 | So again we are tracing everything.
We did that earlier, we know it works.
| | 09:44 | I take all that information and make it
part of this mailto string right in here,
| | 09:51 | and all this information does is it
populates the email that pops up, whatever
| | 09:57 | the default email client is. So in this
case it's Outlook and you will see what
| | 10:02 | that looks like right now. Last thing
I need to do is make navigateToURL call
| | 10:06 | that takes all that information that's
in here and passes it along that URL.
| | 10:14 | So let me go to Control > Test Movie.
Contact section, type in my name, email
| | 10:26 | address and the message, just like that.
Click the Enter button. I should still
| | 10:35 | get the trace statement but I should
also see my Outlook email pop open.
| | 10:40 | And sure enough it does say that it's
going To John Doe, from the Web site,
| | 10:45 | personal message I have added, and
this is whatever they typed in the message
| | 10:50 | text input text field, and then
lastly is of course their name.
| | 10:55 | Again this is a simple way to send
someone an email to have it somewhat
| | 10:59 | customized and this doesn't require
backend programming. So this is really the
| | 11:03 | simplest way you want to do things. Of
course there are other ways but for our
| | 11:07 | needs right now this works out perfect.
| | Collapse this transcript |
| Linking to external web sites| 00:00 | Since this is a web site, chances are
you are going to want to link out to
| | 00:04 | other web sites. So that's what I want
to do here. I want to add a logo and
| | 00:09 | I want to link out to that site.
I'm going to do that to this Home section. So,
| | 00:14 | I'm going to go ahead and double-
click on this content_mc and double-click
| | 00:18 | again to enter this Home movie clip.
And in here this is where I'm going to add
| | 00:25 | a logo. So I'm going to add a new layer,
first of all and I'm going to go ahead
| | 00:30 | and call it lynda.com and that's the
logo that I'm going to add. And I'm going
| | 00:37 | to go ahead and go to File >
Import and Import to Stage.
| | 00:43 | Now I need to navigate in our
Exercise Files to our Assets folder into the
| | 00:48 | design folder. Now notice that says No
items your search. Well, because I'm not
| | 00:54 | showing All Formats. And I can
easily show All Formats and there is my
| | 00:58 | LyndaLogo. So I can select that logo
and select Open and it pastes my logo in
| | 01:07 | and there it is, lynda.com.
| | 01:10 | So now that my logo is imported, I can
go ahead and turn this into a button. So
| | 01:14 | with that graphic selected, I'm going
to do to Modify > Convert to Symbol.
| | 01:19 | I'm going to make sure the Type is a
button and I'm just going to call this Lynda
| | 01:24 | button. All right, now I'm going to
double-click this button and I'm going to
| | 01:30 | give it some different states. For
instance, I'm going to insert a keyframe and
| | 01:37 | in this case all I'm going to do is
move it a touch. So I'm going to move it up
| | 01:42 | using my arrow keys, just so there is
a little bit of an indication that it's
| | 01:46 | an active button. So when you
roll over it, it will pop-up a touch.
| | 01:51 | All right, that's all I need to do
there inside of that button. Now what I want
| | 01:55 | to do is I want to have this button
selected and I want to give it an instance
| | 01:58 | name. I'm going to call it lynda_btn,
lynda_btn. Now I need to add code to it.
| | 02:06 | So I'm going to add a new layer
and this layer is going to be called
| | 02:10 | ActionScript, it's going to be at the
very top and in that first frame.
| | 02:16 | I'm going to go to Window, down to
Actions to open up my Actions panel.
| | 02:21 | And my comment, Go to the lynda.com
web site. That's what this event listener
| | 02:28 | is going to do and so will the function.
The name of the button is lynda_btn.
| | 02:33 | We are going to add an event listener
for it and this event listener is going
| | 02:39 | to listen for a mouse event and it's
going to listen for the CLICK. All right,
| | 02:45 | add a comma. At this point, gotoLynda,
that's going to be the function that is called.
| | 02:55 | So let's make that function now,
function gotoLynda. It's an Event.
| | 03:09 | I don't want it to return anything so
I'm just going to type in void, a common
| | 03:13 | practice, and then I need to add my
opening curly brace and my closing curly
| | 03:16 | brace. Now within those curly braces
I want to add the call to the web site.
| | 03:21 | So what I need to do first is create a
variable and this variable is going to
| | 03:26 | be called theSite. It could be called
anything but I do need to make sure this
| | 03:32 | is an URLRequest. As soon as I start
typing it in, I get my hint. I can hit
| | 03:37 | Enter to select it. It's going to be a
URLRequest, it's going to equal to a new
| | 03:41 | URLRequest and within these two
parenthesis that's where I'm going to put the
| | 03:48 | web site. So right in here, I'm
going to go ahead in quotes, type in
| | 03:53 | http://www.lynda.com the URL.
| | 04:00 | All right. So the URLRequest has been
established and now I need to go ahead
| | 04:06 | and use it. So I'm going to add a
navigateToURL and I need to type in the
| | 04:15 | variable for that URLRequest which
is theSite. Now notice I can also add
| | 04:20 | another parameter. So if I add a comma
there, I can open up a new window and
| | 04:25 | that's exactly what I want to do.
I want to open up a blank window. So I don't
| | 04:31 | want them to navigate away from my
site, I just want it to open up a new
| | 04:34 | window. So it's looking really good.
And that's how I jump to another site.
| | 04:38 | Let me check the syntax and it doesn't
return any errors, which is really good
| | 04:43 | to see. I'm going to go to Control and
Test Movie. Now I'm on the Home page,
| | 04:51 | when I roll over this button, sure
enough, it pops up and then when I click it
| | 04:55 | jumps out to lynda.com. Perfect, new
browser window and everything. Exactly the
| | 05:01 | URL I asked it to. Flash makes it easy
to add this essential functionality to
| | 05:07 | your web site.
| | Collapse this transcript |
|
|
8. Finalizing the WebsiteCreating a preloader| 00:00 | One thing you need to do with any site
is view it from the users' perspective,
| | 00:06 | and download times come into play
when you think from users' perspective.
| | 00:11 | So in general, what I have here is a
site and I want to check out the file size
| | 00:15 | because if this site is pretty large in
file size, it might take a little while
| | 00:20 | for the users to see it.
| | 00:22 | So I'm going to go to View and what I
want to do is I want a simulate a download.
| | 00:27 | So I'm going to go down to Download
Settings, and notice I have this set to DSL.
| | 00:32 | Well, in order to see what this looks
like on a DSL connection, I can go up here
| | 00:36 | and to Simulate Download.
| | 00:38 | So again, from users' perspective, I can
see that they'll see white for a little bit,
| | 00:43 | for about five to eight seconds,
and really what I want to do there is I
| | 00:50 | don't want my design to suffer.
| | 00:52 | So I don't want to crunch down my site
so much in file size, but what I want to
| | 00:57 | do is I want to provide some feedback
within those first five to eight seconds.
| | 01:01 | And that feedback is going to
come in the form of a preloader.
| | 01:04 | So what I want to do is I'm first just
going to select all of these frames, and
| | 01:09 | in this first frame here, that's
where I'm going to add my preloader.
| | 01:13 | So I'm just going to click-and-drag all of those
keyframes to move them over. So it's that easy.
| | 01:19 | I've basically cleared out this first keyframe.
| | 01:23 | And as you'll notice, the Stage is
white and really, I'd love to change that
| | 01:29 | to more of a black.
| | 01:30 | So in the Properties panel,
I can change that to Black.
| | 01:33 | Next thing I need to do is create my text
field that's going to hold my preloader text.
| | 01:39 | The type of preloader I'm building is
just going to be a Percentage preloader
| | 01:44 | that's going to populate this text field.
| | 01:46 | So if I just do click-and-drag, I can
draw that text field and I'll go ahead and
| | 01:51 | position it kind of more to the center.
| | 01:53 | Now, I'm going to look at the Properties panel.
| | 01:55 | The font looks good, make sure the
color is say, a medium gray because in
| | 02:00 | essence, what they are going
to see is something like that.
| | 02:03 | I might say, 100% when it's done.
| | 02:06 | But what I need to do is I need to make
sure this is Dynamic Text because this
| | 02:10 | is dynamically going to be
populated from ActionScript.
| | 02:15 | Next thing I need to do is make sure it
has an instance name of preloader_txt,
| | 02:22 | so that's the instance name.
| | 02:23 | I'm in fact going to do a Command+C to copy
that because I'm going to need that in a second.
| | 02:29 | Now in this very first frame, what I want
to do is I want to write some ActionScript.
| | 02:34 | So I'm going to go to Window, down to
Actions and I'm going to open up the Actions panel.
| | 02:41 | So the first thing I need to do is
stop the Timeline from playing because
| | 02:45 | otherwise, it's going to start running
through all these sections or until I hit
| | 02:48 | some other stop action.
| | 02:50 | Let's type-in stop and then I want
to go ahead and build my preloader.
| | 02:57 | I'll just add in a comment here, Preloader.
| | 03:00 | Well, I want to get a built-in function,
a loaderInfo on this file which is this
| | 03:07 | SWF file, and I want to
add an EventListener to it.
| | 03:14 | So it's going to listen for the
ProgressEvent, more specifically the current PROGRESS.
| | 03:24 | Notice, I can go ahead and do some
other things in here, but if I just use my
| | 03:28 | arrow keys, I can select PROGRESS.
| | 03:31 | Alright, so this is the
specific method that I'm listening for.
| | 03:36 | And loaderInfo is just referring
to my SWF file once it's published.
| | 03:41 | Next, what I'm going to need to do
is add a comma, and then I need to
| | 03:43 | type-in the name of the function that I want
to execute at the progress of this SWF file.
| | 03:50 | So I'm going to type-in updatePreloader,
because that's what it's going to do.
| | 03:56 | And now, I can write that function.
| | 03:58 | So function updatePreloader, I'm going
to type-in Event ObjectProgressEvent.
| | 04:10 | So I need to make sure,
these two words match up.
| | 04:13 | And Event Objectagain
just refers to this SWF file.
| | 04:18 | I need to add a closing parenthesis,
and then structure for a function which is
| | 04:25 | going to be an open curly brace
and then a closing curly brace.
| | 04:29 | Alright, so inside of this function,
I'm going to have a container for the
| | 04:37 | progress of the site, so
for the download of the site.
| | 04:43 | And what this container is,
is it's going to be a variable.
| | 04:46 | So I'm going to add a line, and I'm
going to create this variable and it's going
| | 04:50 | to be called percent because
that's what it's going to hold.
| | 04:55 | I do need to tell Flash
to expect a number in here.
| | 05:00 | So that's what's going in this
container is a number and I'm going to make it
| | 05:04 | equal to the Event Object's byteLoaded.
| | 05:16 | So here's the byte's loaded.
| | 05:17 | So what it does is that it
determines the bytes loaded of the site at the
| | 05:22 | PROGRESS as it downloads.
| | 05:24 | So it gets the current bites loaded.
| | 05:26 | But what I need to do here is I
need to go ahead and multiply it by 100
| | 05:34 | because little bytesLoaded is really
just a number between 0 and 1, so it
| | 05:39 | could have a decimal point.
| | 05:40 | I really don't know what it is in
general, but I want to round it and I want
| | 05:44 | to multiply it by 100.
| | 05:46 | Alright, so once that's calculated, I'm
going to put this in parenthesis because
| | 05:52 | this needs to be calculated first.
| | 05:55 | But then what I want to do is I want to
divide it by Event Objects bytesTotal.
| | 06:04 | So as it downloads, it starts giving me
what in essence is a percentage and then
| | 06:10 | it also is divided by the total bytes.
| | 06:14 | Now, remember these aren't whole numbers.
| | 06:17 | I in fact need to round this to a
whole number, and how I'm going to do that
| | 06:21 | is I'm going to surround this with
parenthesis because I want to create a math
| | 06:28 | function to round to the floor, so as
soon as I type-in f, it rounds to the floor.
| | 06:36 | Alright, there it is.
| | 06:38 | I'm going to make sure, two parenthesis
are right here, another one is here and
| | 06:42 | another one is here.
| | 06:43 | Just keep an eye out for that
because that's an easy mistake to make and
| | 06:48 | something easy to overlook.
| | 06:50 | But this floor just rounds
down to the nearest number.
| | 06:52 | So I want whole numbers in my text
field, not any sort of you know, 32.75%.
| | 06:59 | I'm going to end this just by adding
a semicolon, and what I'm going to do
| | 07:05 | is I'm going to go ahead and out this number
whatever is in this variable in my preloader_txt.
| | 07:13 | And I'm going to type-in text because
it's going to put it in the text field, so
| | 07:18 | this is a text property, and then I
just need to make that equal to percent.
| | 07:24 | I am going to do more than just
that because I just don't want the
| | 07:27 | numbers sitting there.
| | 07:28 | I want to do a plus sign and then in
quotes, I want to add the percentage
| | 07:34 | sign, just like that.
| | 07:36 | And I'm going to end this line with a semicolon.
| | 07:40 | Alright, everything seems to check out
and one thing I encourage you to do is
| | 07:45 | click the Auto format button and it will
nest everything accordingly, or you can
| | 07:51 | come in and adjust it anyway you want,
but I do want to check the syntax.
| | 07:56 | So this is a quick check, it says there are
no errors, I'm feeling pretty good about this.
| | 08:02 | I'll do a control test movie
and let's see what happens.
| | 08:07 | Notice, that says 100.
| | 08:08 | Now, that's fine, but let's do a download
setting of DSL and let's simulate this download.
| | 08:22 | So as you'll notice, it does count up, it's
working great and then it stops on a 100 percent.
| | 08:28 | So really what I need to do is I
need to then jump to the next frame once
| | 08:33 | it's totally loaded.
| | 08:34 | So that's what I'm going to do now.
| | 08:36 | Just right after this preloader_txt,
I'm going to create an if statement.
| | 08:41 | I'm going to say, hey, if the percent
is equal to, you need two Equal signs
| | 08:49 | because I need to compare these two.
| | 08:51 | The two Equal signs.
| | 08:53 | If the percent is equal to 100,
then go ahead and do this.
| | 08:58 | So open curly brace and then closing curly
brace, and right in here, I'll Tab in a touch.
| | 09:08 | I just wanted to go to the
nextFrame, just like that.
| | 09:12 | This is looking really
good, but till you test it.
| | 09:18 | And there we are, jumps right to the
frame I needed to which is the next frame.
| | 09:23 | And I can always simulate download and
you'll see of course the numbers again,
| | 09:27 | and as it hits 100, you'll see the Home screen.
| | 09:31 | So it's looking really good.
| | 09:33 | I'm really liking how this is working,
but there is another quick little check
| | 09:37 | you need to make, and this is for
Internet Explorer, I'll just type-in IE.
| | 09:42 | There's just an extra little check we
need to do because if you've visited the
| | 09:47 | page already, then what's going to
happen is there is not going to be anything
| | 09:53 | to download because it's already downloaded.
| | 09:55 | So this check never runs, so
it never reaches the next frame.
| | 09:59 | So I need to do this extra little check,
just for IE browsers and again, it's
| | 10:04 | going to be this same logic.
| | 10:07 | In fact, for the most part, I
can even just copy all of this.
| | 10:11 | So I'm just going to select it all and
I'm going to copy it and line 17, I'm
| | 10:18 | just going to go ahead
and paste it, there it is.
| | 10:21 | And I'll just bring this back in touch.
| | 10:26 | And I don't need this at all, in fact, I'm
just going to remove it, just like that, okay.
| | 10:32 | Now, of course the reason why I
duplicated this and pulled it out is, again, IE
| | 10:38 | browsers are never going to execute
this progress, this function because there
| | 10:45 | is nothing to progress because the
site has already been visited, so it's
| | 10:49 | already sort of in their browser.
| | 10:52 | So if that's the case, then just perform this
extra little check and you'll be perfectly fine.
| | 10:58 | And notice, it doesn't affect
anything else, it will work exactly the same.
| | 11:03 | One thing that will come up is right in here.
| | 11:08 | Now I want to show you this because
it's going to look for this Event Object.
| | 11:13 | Now this evtObj was defined right in here.
| | 11:18 | Well, this never really exists outside of here.
| | 11:21 | So that's one last little thing I need
to do, this.loaderInfo, just refers to
| | 11:30 | this SWF file, just kind of like I call
it out up here, that's what I need to do
| | 11:35 | and I need to also copy
that and paste it right here.
| | 11:39 | So again, if it's looking for
something undefined, know that you just need to
| | 11:43 | replace that information and make
sure it says this.loaderInfo and let's go
| | 11:47 | ahead and test this, and it runs great.
| | 11:52 | And lastly, let's do the
Simulate Download one more time.
| | 12:00 | So again, if your content is fairly
large in file size, consider adding a
| | 12:05 | preloader, and the reason I love this
preloader is I can easily copy this code
| | 12:11 | and take the text field and pretty much
put it in any Flash file I want to put
| | 12:15 | it in and of course I'll get that preloader.
| | Collapse this transcript |
| Publishing for the web | 00:00 | Once you are done creating your site in
Flash, you then get the opportunity to
| | 00:04 | publish it for the world to see.
| | 00:06 | This is a very exciting step, because
you can see my site is looking beautiful
| | 00:10 | and I want to go ahead and add it to a
webpage and then ultimately upload it.
| | 00:15 | So I'm going to close that test file
and I'm going to review the Publish Settings.
| | 00:20 | So I want to go to File,
down to Publish Settings, so then here as
| | 00:26 | you can see, I do have different
types that I can publish to. I do want to
| | 00:31 | publish an SWF for sure, because that's
made for the web, but what I can do in
| | 00:35 | here is change the name as well. And
even publish it to a different folder if I want to.
| | 00:41 | But in this case, I'm going to call it
index, index being the homepage for the site,
| | 00:47 | and that I also want to publish
an HTML page as well. HTML page, I want
| | 00:53 | to rename to index as well.
| | 00:57 | So both files are called index and they
are ready to be published. Let's take a
| | 01:02 | look at some of the settings we have
available. If I click this Flash tab,
| | 01:06 | I can see that I'm given a quite a
few settings in here. One of the more
| | 01:10 | important options in here is the
Flash Player version. In general what you
| | 01:15 | would want to do is Publish to the
lowest version of the Flash Player available.
| | 01:19 | But for the most parts, so many
people have Flash Player 9 and 10, I'm just
| | 01:24 | going to leave that alone, but if I do
have different requirements, I can drop
| | 01:28 | the Flash Player type down. In this
case I'm going to leave it as Flash Player 10.
| | 01:34 | You can see that I can crunch down
the JPEG quality more, I can increase or
| | 01:40 | decrease the Audio levels and I can
also check some of these other options as well.
| | 01:47 | Everything is pretty self-explanatory
and you should really leave the defaults
| | 01:51 | checked. So I really couldn't think of
the case where you do not want to not
| | 01:55 | compress the movie, but in general
that's always going to be checked.
| | 01:59 | So everything looks really good in here.
I'm going to go the HTML tab and in
| | 02:04 | the HTML tab, you can see that I have
other options as well. I can match the
| | 02:08 | movie size (Match Movie). I can make it
larger. But for the most part, you are
| | 02:12 | not going to even need to
touch any of these options either.
| | 02:16 | So I want to make sure that Quality is
High, it's going to play in a window and
| | 02:20 | the HTML alignment is going to be set
to Default. And all I need to do is click
| | 02:26 | Publish. Now what happens is it
generates the SWF file and the HTML file.
| | 02:33 | I'm going to select OK. Now what I can do
is I can open up that HTML file in a
| | 02:40 | program such as Dreamweaver. So I'm
going to File > Open, to my Exercise Files
| | 02:48 | folder. I'm going into Chapter_08
and there is my index.swf file that's
| | 02:56 | created. If I double click it, it
opens up that HTML file. Now I can actually
| | 03:04 | crack the hood open if you will,
by clicking this Code button here in
| | 03:09 | Dreamweaver. Just to take a look at
all the codes that was generated, that
| | 03:14 | I didn't have to write but is generated,
and allows me to play this Flash File on a webpage.
| | 03:20 | I am going back to Design View. You can
easily select that SWF file and modify
| | 03:26 | some of the settings further down here
as well, just as easily. So these are
| | 03:30 | the similar settings that were also
in your Publish Settings dialog box.
| | 03:34 | So all I need to do is go to File
and Preview in Browser, I'll Preview in
| | 03:39 | Firefox, there's my site. It opens and
it doesn't look pretty good, and I like
| | 03:46 | the black background. The only
thing I'm going to do is recenter it.
| | 03:52 | So with my cursor set to this side, I'm
going to add some CSS that is going to
| | 03:59 | center all the content. So when I click
that center button, it's going to allow
| | 04:03 | me to center this side and any content
that's on here. So I'm using Dreamweaver
| | 04:08 | CS4. I can go down to Tag because
that's what I want to modify. I want to
| | 04:12 | modify the body tag and that's all
I need to do. Anything with a body tag is
| | 04:17 | going to be centered. That's all I need
to do. Select OK. Go to File > Preview
| | 04:23 | in Browser > Preview in Firefox. It
asks me if I want to save it because I did
| | 04:28 | not save it, and there it is,
beautifully centered and looking great.
| | 04:34 | So as you can see it's really simple,
all I need to do is check my Publish
| | 04:38 | Settings in Flash, and do further
modifications in HTML program of your choice,
| | 04:44 | to really get it the way you want it.
But as you can see the full experience is here,
| | 04:48 | looking great and ready to be uploaded.
| | Collapse this transcript |
|
|
9. Additional Sample SitesReviewing bonus web sites | 00:00 | I also encourage you to check out
what's in the Chapter_09 folder, inside of
| | 00:05 | your Exercise Files folder. In those
there's three additional sites in there
| | 00:09 | that you can go ahead and crack open,
and just experience and play with.
| | 00:13 | For instance, there's is this sort of a
sliding side version that you can check out,
| | 00:19 | all based on code you would have
learned throughout this course. There's
| | 00:23 | even this sort of 3D Rotating version,
which would make for a great menu, using
| | 00:29 | the 3D tween, very fancy, and there's
even this Card Flip version allowing you
| | 00:35 | to navigate the information by
flipping over these various cards.
| | 00:38 | So I encourage you to go ahead and
take a stab at all of these, have some fun
| | 00:42 | with them, take any of the code that
you want, and really make something
| | 00:46 | awesome of your own.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thank you so much for joining me.
I hope you learned a lot. We were able to
| | 00:04 | create a dynamic site and now really
it's your turn to go out there and make
| | 00:08 | your own Flash site.
| | Collapse this transcript |
|
|
