IntroductionWelcome| 00:00 | (Music playing)
| | 00:04 | Hello! My name is Paul Trani and welcome to Creating a
Portfolio Website with Flash CS4 Professional.
| | 00:10 | Now, are you interested in creating
a website to show off your work?
| | 00:14 | Then this course is for you.
| | 00:16 | I am going to be really walking you
through all of the ins and outs of how to
| | 00:19 | create a robust, flexible portfolio
website in Flash from the ground up.
| | 00:24 | I will show you how to incorporate good
web design principles, how to create a
| | 00:28 | user-friendly site, including dynamic
navigation, eye-catching transitions,
| | 00:35 | multiple content sections, sound to
bring your site to life, and of course, I
| | 00:41 | will show you how to display an
unlimited number of images, complete with
| | 00:45 | supporting text and links.
| | 00:47 | Or, what if you want to show off some
of your video or film work? No problem,
| | 00:52 | because you will also see how
to create a video portfolio.
| | 00:55 | I will even include some of my bonus sites
that you can take and modify to your liking.
| | 01:01 | Now, let's get started Creating a
Portfolio Website in Flash CS4 Professional.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the
lynda.com Online Training Library, or if you
| | 00:04 | are watching this tutorial on a disk,
you have access to all of the exercise
| | 00:08 | files used throughout this title.
| | 00:10 | So I am going to open up this Exercise
Files folder, and as you can see, all the
| | 00:14 | Chapter content is in here,
as well as the Final site.
| | 00:17 | I have included some Bonus Sites, and
even some various Assets that you will
| | 00:21 | need throughout this title.
| | 00:23 | Now, if you are a monthly or annual
subscriber to lynda.com, you actually don't
| | 00:27 | have access to the exercise files, but you
can always follow along with your own files.
| | 00:32 | So let's get started.
| | Collapse this transcript |
|
|
1. Getting StartedUnderstanding web design| 00:00 | I would like to start off by giving
you a good understanding of web design.
| | 00:04 | First of all, what is web design?
| | 00:06 | Well, it's all about creating visual
content, placed on a web server and served
| | 00:11 | through the Internet to somebody's web browser.
| | 00:14 | So we need to keep in mind the context
as in which this content is being shown.
| | 00:19 | And I am not just talking about websites.
This could be banners. This could be
| | 00:22 | interactive presentations.
| | 00:23 | It could be anything.
| | 00:24 | The principles of web design carry
across all those different types.
| | 00:28 | But why a portfolio website?
| | 00:30 | Well, it's all about convenience.
| | 00:32 | Being able to give somebody my URL and
having them check out my work is the best
| | 00:36 | way to pretty much get my work in front of them.
| | 00:38 | And it's a great way, not only through
my portfolio to show my design skills,
| | 00:42 | but through the website itself, it enables
me to show off my web design skills as well.
| | 00:47 | But really where you want to start
is with the goal of your website.
| | 00:51 | So if you are making a
portfolio website, what's your goal?
| | 00:54 | In this case, and probably in
your's, potentially, is to get a job.
| | 01:00 | So I want to keep that in mind as
I make decisions about my website.
| | 01:05 | And I want to develop all content
around this goal of getting a job.
| | 01:09 | Now, the website checklist are things I
want to keep in mind as I start to design.
| | 01:13 | I want to make sure that, of course,
my site is available and accessible.
| | 01:16 | So do I have a URL?
| | 01:18 | Do I have website hosting set up?
| | 01:20 | I want to make sure my site is easy to use.
| | 01:23 | Does it fit on the user's screen?
| | 01:25 | Are links clearly identified?
| | 01:27 | Is it browser compatible?
| | 01:28 | Does it download quickly?
| | 01:30 | Are users able to see the content quickly?
| | 01:32 | Does it deliver the information expected?
| | 01:35 | Are links clearly defined?
| | 01:37 | Are buttons clearly defined on what they do?
| | 01:39 | And, of course, is this
appropriate for the audience?
| | 01:42 | If I am after a creative job, I want
to make sure that my website might be as
| | 01:46 | creative as possible in order for me to
get that particular job or just geared
| | 01:49 | toward that audience.
| | 01:51 | And, of course, I want to make
sure my site is owner-friendly.
| | 01:53 | So is it easy to update?
| | 01:55 | That's probably the most important
thing, easy to use, easy to update.
| | 01:58 | But I want to keep all of these goals in
mind, my personal goals as getting a job
| | 02:03 | and then the user's goal, which is
going to be finding out content about you.
| | 02:07 | You want to keep these two
things in mind as you design.
| | 02:10 | And what you come up with
will be based on those goals.
| | 02:14 | So in this case, as you can see, there
is an image in the background. This could
| | 02:17 | be a portfolio piece to show off my work.
| | 02:20 | I can clearly see that
there's a hierarchy of information.
| | 02:23 | I know I am on John Doe's website.
| | 02:25 | I can see that the copy is
clearly legible, easy to read, and there
| | 02:29 | is navigation as well.
| | 02:30 | If this is for a, say, creative job,
I can get more creative with the
| | 02:35 | navigation or the content.
| | 02:37 | It's all centered around what I am
trying to do, in the design of the site as
| | 02:40 | well as making sure it's
usable for the end user.
| | Collapse this transcript |
| Creating a Flash file| 00:00 | I would like to start off by giving you
an overview of Flash CS4 Professional.
| | 00:05 | Obviously, I have it open right now.
| | 00:07 | You can see, from this start up panel,
I can go ahead and Create a New File.
| | 00:12 | So that's the first thing I want
to do is Create a New Flash File (ActionScript 3.0).
| | 00:16 | If I select that, a new Untitled file opens up.
| | 00:21 | It's just a document that just
has a white background right here.
| | 00:26 | And what I am going to do is I am
going to go ahead and save this.
| | 00:29 | So I am going to go to File>Save and I
am going to save it to my Desktop, in my
| | 00:36 | Exercise Files folder, Chapter01,
and I am going to save it in 02 final.
| | 00:44 | So I am going to change this title
from Untitled-1 to index, because when you
| | 00:49 | are making your website, the root file,
the main file of your website, is going
| | 00:54 | to be called index, and
that's what I am calling it here.
| | 00:57 | This is going to be more
or less like my homepage.
| | 01:00 | It's going to be index.fla, and I
am going to go ahead and select Save.
| | 01:04 | Now I have it saved correctly
and now I am ready to do some work.
| | 01:07 | So there is plenty of panels around here,
and your setup might be different from
| | 01:11 | mine, so what I would like for you to do
is go to Window, down to Workspace, and
| | 01:18 | change your Workspace to
something else, change it to Classic.
| | 01:22 | If I change it to Classic, you
can see how all the panels adjust.
| | 01:25 | I have the Tools panel on left side. I
have the Timeline at the top. I have the
| | 01:29 | Properties panel on the right side.
| | 01:33 | The only other panel that I know I am
going to use a lot is the Library panel.
| | 01:37 | So if I go to Window, down to Library,
it will open up that Library panel.
| | 01:42 | In fact, it was nested right here.
| | 01:44 | But I can go ahead and select
that tab and pull that panel out.
| | 01:48 | Now I can position this wherever I want,
but I can also nest it over here in
| | 01:52 | the Properties panel.
| | 01:53 | And that's what I want to do, nest it
clear down here at the bottom, so the
| | 01:57 | Library panel is just
beneath the Properties panel.
| | 02:00 | And I can go ahead and close that panel
if I want to see more of the properties.
| | 02:03 | But in general, this is set up the
way I want to set up my document.
| | 02:07 | And sure enough, if I twirl that
Library panel down, I can change the
| | 02:11 | Properties for this document.
| | 02:14 | So this white stage area, well, I can
easily change that to a medium blue if I want to.
| | 02:21 | I could even change the Size of this document.
| | 02:23 | I am going to click Edit, and
I can adjust the Dimensions.
| | 02:27 | So since this is for a web page, I want to
make sure it fits a web browser perfectly.
| | 02:32 | Now, the smallest common denominator
for a monitor is going to be 1024x768.
| | 02:39 | So 1024x768 would be the size, but I
have to subtract some to account for the
| | 02:45 | browser scrollbars and buttons.
| | 02:48 | So I will just make this 1000 pixels
wide, and instead of it being 768, I want
| | 02:55 | to take off and make that about 700, make it
a little smaller to account for the buttons.
| | 02:59 | But sure enough, I can control the
dimensions, I can hit select, and then we
| | 03:02 | will go ahead and change it, and I can
see that this is ready to go, and I can
| | 03:06 | go ahead and Save this file.
| | 03:08 | And sure enough, I can go ahead and use
any of these tools to create what I need
| | 03:12 | to, but in general, that's the short
of creating your very first Flash File.
| | Collapse this transcript |
| Importing a design from Photoshop| 00:00 | One of the great things about Flash is
that you can import content in from other
| | 00:04 | programs that you might be more familiar with.
| | 00:07 | So if you are familiar with
Illustrator or Fireworks, even Photoshop, you can
| | 00:11 | import that content and still
maintain the integrity of the design.
| | 00:16 | For instance, I have Photoshop open,
and I want to import all of this
| | 00:19 | content from this Photoshop file
into Flash, but I first want to explore
| | 00:24 | some of this content.
| | 00:25 | In the Layers panel, you can see that
there's this image layer and I can turn that off.
| | 00:29 | You can see that's the
large image in the background.
| | 00:32 | There's a content folder.
| | 00:34 | I can twirl that down and you can see
that it contains text layers in here.
| | 00:40 | And if I turn those on and off, you
can see that this is the navigation.
| | 00:45 | I then have this Logo folder that
holds the logo, and then I have this
| | 00:50 | background folder, and I
will turn that on and off.
| | 00:53 | That provides the texture and
some additional text for this file.
| | 00:57 | So if I zoom out, you can see
there's some additional text out here.
| | 01:02 | If I just select this content folder,
so what I want to happen for this design
| | 01:07 | is I want this content to rotate
around and then display, say, the Portfolio
| | 01:13 | section or the About
section or the Video section.
| | 01:16 | It's all going to be like
twirling and rotating to reveal the
| | 01:20 | appropriate section.
| | 01:21 | So that's what I want it to do, and those
extra items are all in the background folder.
| | 01:28 | All right. I am not going to do anything tricky.
All I am going to do is Save, and I am
| | 01:33 | going to make sure it's saved in the
Exercise Files folder/Assets/design, and
| | 01:41 | that's the Design.psd.
| | 01:43 | That's where this file is being saved, so I
know where to get it from when I go into Flash.
| | 01:50 | So with my index.fla opened, what I
want to do is I want to go to File >
| | 01:56 | Import > Import to Stage.
| | 02:01 | From there, I can dig into the Exercise
Files folder/Assets/design, and select
| | 02:07 | that PSD, and click Import.
| | 02:11 | I love how Flash gives me this wizard
for importing files, so I can click on all
| | 02:17 | of these various layers and I
can decide what I want to import.
| | 02:21 | Say, for instance, I don't need to import this
black background, so I will just uncheck that.
| | 02:26 | For the image layer, I can
make sure that gets imported.
| | 02:30 | And then I have this content folder.
| | 02:32 | Well, I can import that content folder,
but I can import it as a movie clip, so
| | 02:38 | I am given multiple options
over here on the right-hand side.
| | 02:42 | I am going to create a
movie clip for this layer.
| | 02:44 | So when in doubt, make it a movie clip,
because it's going to give you more flexibility.
| | 02:49 | But what a movie clip is, it's just a
container for any content you want.
| | 02:54 | So I can animate movie clips. I can
add interactivity to them. I can do lots
| | 02:57 | of things with them.
| | 02:59 | So when in doubt, just make it a movie
clip and it will give you lots of flexibility.
| | 03:03 | And within this content movie clip,
there's going to be additional items.
| | 03:07 | So I can select this Portfolio layer, which is
a text layer, and I can make it Editable text.
| | 03:13 | And I might want to make
this a movie clip as well.
| | 03:16 | So that's what I want to do for each
one of these text items, make it a text
| | 03:20 | layer, and then make it a movie clip.
| | 03:23 | In general, there's going to be a text
field that exists inside of this movie clip.
| | 03:28 | The Logo folder, if I twirl that down,
you can see that it contains many
| | 03:34 | different items as well, but for this
Logo folder, I want to create a movie clip
| | 03:37 | for it, and I want to make sure this
text is Editable as well, just in case I
| | 03:43 | misspelled something or
whatever the case may be.
| | 03:46 | I could even import Vector objects,
so I am going to select this Cross, so
| | 03:52 | these are the different
crossbars that make up the Cross.
| | 03:55 | I can import it as
Editable paths and layer styles.
| | 03:59 | So in general, if it says import is
Editable, you probably want to do that.
| | 04:04 | Our last area is this background.
| | 04:07 | Again, I am inside of this content
movie clip. Here are some additional text
| | 04:12 | items, and I want to import as Editable text.
| | 04:15 | Again, if I misspelled something or
if I decide I need to change it, I can
| | 04:19 | go ahead and do that.
| | 04:20 | Here's my gradient, so this is the big
gradient. I can just go ahead and leave
| | 04:24 | that as is, but be aware that it is in
the background folder. All right.
| | 04:29 | Everything is looking great
and it's ready to be imported.
| | 04:32 | Last thing I want to do is
to review this bottom area.
| | 04:34 | I want to Convert all the layers to
Flash layers, and place those layers at
| | 04:39 | their original position.
| | 04:41 | I am not going to worry about the stage
size, because I already have that set up.
| | 04:43 | Go ahead and select OK, and
it will import the design.
| | 04:49 | Now, I can use this Navigator to change
my viewable area, say down to 25%, and I
| | 04:57 | can see that here's all of my content.
| | 05:01 | Quite frankly, I do need
to move this into position.
| | 05:04 | I can select this content
and I can move it around.
| | 05:09 | In general, everything has been
placed at its original position.
| | 05:13 | And instead of using this Navigator,
I can go ahead and use Command+Plus to
| | 05:17 | zoom in and Minus to zoom out, but in general,
I want to start to align this up in my stage area.
| | 05:23 | Now, I can kind of eyeball it and see
if I can get it close, or I can go to
| | 05:27 | Window, down to the Align panel, and I
can go ahead and align it to the stage.
| | 05:32 | So Align panel, I am going to
make sure this is depressed.
| | 05:36 | I pressed that down and it's going to
Align Vertical to the stage and then I want
| | 05:41 | to go ahead and Align Horizontal to the stage.
| | 05:44 | So you see it shift a little bit, and in
general, that's what the Align panel does.
| | 05:49 | So it's looking good. I have
that stuff positioned appropriately.
| | 05:52 | Take a look at the Timeline panel.
| | 05:54 | Sure enough, it imported
those layers appropriately.
| | 05:56 | Turn off that content layer and you
can see the image layer, there it is.
| | 06:02 | I can turn that on and off.
| | 06:03 | If I select this content layer and I
look at my Properties panel, you can see
| | 06:08 | that it is a movie clip, it came in as a
movie clip, and it's an instance of the content.
| | 06:13 | And I can double-click on it and start
to take a look at all the different items
| | 06:17 | within this movie clip.
| | 06:19 | I can see that this About button is
an instance of the movie clip, and if I
| | 06:23 | double-click on it, I can see that
there's the text and I can go ahead and edit it.
| | 06:27 | All right.
| | 06:29 | Notice how deep I am, and I want you to
be aware of these breadcrumbs, because I
| | 06:34 | am actually inside of the About movie clip.
| | 06:37 | Well, to get back out, to edit
anything else in the previous movie clip, I
| | 06:42 | would click content.
| | 06:43 | Now I can adjust anything
else I may need to adjust.
| | 06:47 | And then I can go out, again, to Scene 1,
otherwise known as your stage, to work on the stage.
| | 06:54 | But in general, that's how it works.
If I want to edit a movie clip, it's just a
| | 06:58 | matter of double-clicking on it and
then you will be inside of that movie clip.
| | 07:01 | In this case, I am inside
of content_mc. All right.
| | 07:05 | There's another way to do that as well.
| | 07:07 | There's all this content that I have
imported. If I open up my Library panel,
| | 07:11 | you can see, here's my Library folder and
here's all of my content that I have imported.
| | 07:17 | So again, I can just double-click on this
movie clip and then edit content in here as well.
| | 07:23 | And again, just be aware of where you
are. Always click on Scene 1 to go back,
| | 07:28 | but in general, you can see that you
can easily import any design from other
| | 07:33 | programs, such as
Illustrator or Fireworks or Photoshop.
| | 07:37 | You can import them. It maintains the
integrity of the design, so you can then
| | 07:41 | start animating or adding
interactivity, if you want to, in Flash.
| | Collapse this transcript |
| Optimizing the design| 00:00 | As you start to import graphics into
Flash, it's important to be aware that the
| | 00:04 | more graphics you import, the larger your
file size is going to be, and the larger
| | 00:09 | your file size is, the longer it's going
to take to download, and the longer it
| | 00:14 | takes for your users to see your content.
| | 00:17 | So you want your file size
to be as small as possible.
| | 00:20 | And what I want to do is I want to
take this design down to be about of 10th
| | 00:26 | of its current size.
| | 00:27 | So what you're going to want to do is explore
what got imported and how you can optimize it.
| | 00:33 | First off, there is just this extra layer,
just hanging out down here. He doesn't
| | 00:36 | add any file size, but I'm just going to
perform some clean up by selecting that
| | 00:41 | layer and hitting the delete button. All right.
| | 00:44 | Next up, I do have this image.
| | 00:45 | Well, quite frankly, I do need that
image, so I'll just leave it there for now.
| | 00:49 | Let me go into my content movie clip,
and as I double-click into that, I can see
| | 00:55 | that I have these text items.
| | 00:59 | These are movie clips and then there's
texts inside of them, so they're fine.
| | 01:03 | This I imported as text, so that's looking
pretty good, but if I zoom out, I can see
| | 01:09 | that there's this really large image,
and this is probably my biggest issue, is
| | 01:15 | this big background.
| | 01:18 | So I have this gradient, vertical, and
horizontal, as wells as this gradient
| | 01:22 | burst, and then this pattern in there.
| | 01:24 | So what I want to do, instead of this
being a really large file, I want to make
| | 01:29 | this in vector format, because if it's a
vector, it's going to be a lot smaller.
| | 01:34 | But first, let's explore the file size
of this file, so this is an index.fla
| | 01:40 | file, the .fla file is the working file.
| | 01:43 | But what I want to do is I want to go
to Control and I want to do a Test Movie,
| | 01:48 | which you will do this a lot in Flash.
| | 01:50 | If you go to Test Movie, what actually
happens is it creates an SWF file, small
| | 02:00 | web format file, so Flash does a good
job of making your files small, but in
| | 02:06 | general, this is the file
that would go on the Web.
| | 02:08 | You're probably wondering
"How small is this SWF file?"
| | 02:12 | Well, if I go to View, and I select
Bandwidth Profiler, you can see that I'm
| | 02:18 | given this graph right here.
| | 02:21 | So this animation is only one frame long,
but I can see, down here at the bottom
| | 02:25 | of this panel, it says that it's about
1400KB, about one-and-a-half megabytes, so
| | 02:32 | which is pretty darn large.
| | 02:34 | So I'm going to take this one-and-a-
half megabytes and crunch it down.
| | 02:37 | So I want to close that file, and again,
this is probably my biggest offender if
| | 02:41 | you will, and what I want to do is
recreate some of these elements.
| | 02:45 | So I'm just going to create a new
layer. With this new layer, I'm going to
| | 02:48 | select the rectangle tool, and what I
want to initially select is the Fill
| | 02:54 | color, and instead of it being a
solid color, it's going to be this burst,
| | 02:58 | this radial burst, like that.
| | 03:01 | Okay, so when I draw the circle, I am
going to draw it from this upper corner, in
| | 03:08 | fact, I'll scale that out a little bit
and maybe zoom out and touch more, but
| | 03:14 | I'm just going to go ahead and
draw this radial burst, like that.
| | 03:18 | There is my radial burst. I can select
this item, and what I want to do is I
| | 03:25 | want to modify it, Color.
| | 03:28 | So I'm going to expand out this panel,
and I'm basically going to the Color panel.
| | 03:33 | You can always get to it
through Window, going down to Color.
| | 03:36 | But in general, this fades to white.
The center points a white, when really, I
| | 03:40 | want the center point to be, not
necessarily black, but I want it to be
| | 03:45 | transparent, just like that.
| | 03:47 | So there's my gradient.
| | 03:49 | It's looking pretty good. In fact,
I can even call this layer just by
| | 03:53 | double-clicking in it. I can call it
gradient, and that's now a vector item.
| | 03:58 | But I'm still creating different parts here.
| | 04:00 | So I'm going to create a new layer,
and this time, I want to duplicate this
| | 04:04 | gradient bar, so I'll zoom in a touch,
and I'm going to select the Rectangle
| | 04:09 | tool again, and instead of using the
burst, I'm going to use this linear
| | 04:14 | gradient, and I'll just
click and drag, like that.
| | 04:19 | So if I select the Selection tool,
you can see that I can start to align
| | 04:24 | this appropriately.
| | 04:25 | But it's going the wrong direction,
so the first thing I'm going to do is
| | 04:28 | I'm going to fix the color. I'm going
to have it fade to black, and I'm going
| | 04:32 | to make fades to transparent, and then what
I want to do is I need to adjust the angle.
| | 04:39 | One easy way to do that is just to use
the Paint Bucket tool, because if I click
| | 04:43 | and drag with the Paint Bucket
tool, it starts to manipulate -
| | 04:46 | let me just change this color for you -
| | 04:49 | it starts to manipulate the angle
of your linear burst, so let me just
| | 04:55 | change that to Red. There we go.
| | 04:57 | You can start to see it work, but in
general, I can go ahead and make sure this
| | 05:02 | is fading the right direction
and sort of the right degree.
| | 05:06 | So using your Paint Bucket tool, you
can add that gradient, and again, I just
| | 05:09 | changed it to red, so I can see it, but
I can easily change that back to black,
| | 05:13 | just like that, and there is my gradient.
| | 05:17 | Now, I need to create the same
gradient right here, okay, vertically.
| | 05:21 | Well, anytime you find yourself doing
something twice, think about converting it
| | 05:25 | to a movie clip, and I'm going to show
you how to make something a movie clip.
| | 05:29 | Right now, I'm going to open up the
Library panel, and with this gradient
| | 05:34 | selected, I'm just going to click
and drag it right into the Library.
| | 05:39 | Once I drag something into the
Library, in essence, what I'm doing is I'm
| | 05:43 | converting it to a symbol, and I want
to call this symbol 'gradient,' and I'm
| | 05:51 | going to keep it as a movie clip,
| | 05:52 | but I can some other things as well.
| | 05:54 | I'm going to just keep it
as movie clip, select OK.
| | 05:59 | And sure enough, if I select it,
and look at my Properties panel,
| | 06:02 | it says that it's an instance
of the gradient, but there it is.
| | 06:06 | It's in my Library now, and what I can
do from here is I can drag out another
| | 06:11 | instance of that gradient, and I can
use my Free Transform tool, third one from
| | 06:20 | the top, to rotate that
around like so and line it up.
| | 06:27 | So when you find yourself doing
something more than once, think about
| | 06:30 | converting it into a symbol and
having multiple instances on your stage,
| | 06:36 | because what this means is that Flash
is only storing one version of it, and
| | 06:41 | then it just duplicates it.
| | 06:42 | So it makes your file size smaller when you
use symbols, and really, you need to get
| | 06:47 | in the habit of making things symbols.
| | 06:50 | So, I'm going to go ahead and select
this, and these are also gradients, but
| | 06:54 | this is the layer, so
these are my linear gradients.
| | 06:58 | Let me just turn off these two layers,
because you can see I still have this
| | 07:04 | pattern, and this is where things get a
little tricky, because how am I suppose
| | 07:09 | to recreate this pattern? Am I
suppose to draw little squares? Well, no.
| | 07:13 | It is a pattern, so I want to use a
pattern to cover that entire area.
| | 07:19 | So I'm going to zoom in a touch. I'm going to add
another new layer and this is going to be
| | 07:26 | my pattern, and I'm going to go to File,
and I'm going to Import the pattern.
| | 07:32 | So I'm going to Import to the Library a pattern.
| | 07:39 | So this is just a really simple file.
| | 07:41 | It's really small. It's just a PNG, so
it's a file with transparency that just
| | 07:46 | has four little dots in it, but this
could be whatever type of pattern you want.
| | 07:50 | It could be anything.
| | 07:51 | In general, I want to take this and
import this pattern into my library, and I'm
| | 07:58 | going to go ahead and Import this,
everything set to the defaults, select OK.
| | 08:05 | So I have it imported. There is my
pattern PNG, and now what I can do, if I
| | 08:11 | minimize that Color panel and expand
this out some, and zoom out, because what
| | 08:16 | I want to do is want to draw another rectangle.
| | 08:20 | And instead of using these Fills, what
I want to use is that imported pattern,
| | 08:26 | and if I twirl this open,
just so you can see where it is,
| | 08:30 | it's actually clear down in
here, and it's called Bitmap 5.
| | 08:34 | It's actually this one right here.
It's that graphic, so I'm just going to go ahead
| | 08:38 | and select that file, and with that
pattern selected, I can go ahead and draw
| | 08:45 | with the Rectangle tool, and
it recreates that pattern.
| | 08:49 | So let me go ahead and turn off this
gradient layer. Again, all this stuff was imported,
| | 08:56 | but you know what? I don't need this
layer anymore, so I can select that layer I
| | 09:00 | was trying to recreate, hit delete, and
twirl up some of these things. Actually, let me make
| | 09:10 | sure everything is showing appropriately.
| | 09:11 | You can see that there's the pattern, and
I've recreated the look of that pattern.
| | 09:17 | So let me go ahead and do a Control>
Test Movie, just so we can check the file
| | 09:24 | size, and sure enough, we're actually
down to 4KB for this file, so we've
| | 09:32 | drastically decreased the file size,
and if I turn that on, you can see my
| | 09:37 | image is actually still in there.
| | 09:39 | So let me just turn that on, because
this is ultimately the look I want.
| | 09:43 | Let's go to Test Movie.
| | 09:44 | You can see with that image back there,
I have a file that's 100KB, quite a bit
| | 09:51 | smaller than the original file, all by
sort of recreating elements that were
| | 09:56 | imported, which you might have to do on
occasion, depending on what you import.
| | 10:01 | But again, it can all be done in
Flash, and if you're given the choice,
| | 10:05 | recreate it in a vector format, and
it's really going to make your files
| | 10:10 | smaller and provide for
a better user experience.
| | Collapse this transcript |
|
|
2. Creating a Unique Web ExperienceDynamically loading an image| 00:00 | One thing you might want to consider
when optimizing your site is determining
| | 00:04 | what information is important and
needs to be seen immediately, and then what
| | 00:08 | information can be loaded later.
| | 00:10 | Take, for instance, this design. What I
want the user to see, initially, is, of
| | 00:16 | course, JOHN DOE, the text, as well as the
navigation, but the background can be loaded later.
| | 00:22 | So really, I don't want this
background to be part of the Flash file.
| | 00:27 | So what I am going to do is I am just
going to turn off that content layer.
| | 00:31 | I am going to select that graphic,
and I am just going to delete it.
| | 00:34 | So I am going to replace that graphic
with a UILoader component that's going to
| | 00:41 | dynamically load an image.
| | 00:42 | So the first thing I need to
do is go out and find my image.
| | 00:47 | So I am going to go to Exercise Files/
Assets/design/and I'm going to
| | 00:51 | select this images folder, and I am just
| | 00:54 | going to Copy all of these images,
but most importantly, I need this first
| | 00:59 | image, background1.jpg.
| | 01:01 | So I am going to be aware of this
filename, and I am going to put it in the
| | 01:05 | Chapter02/01 begin folder, paste
everything in there, and again, that's the
| | 01:12 | image I want to load in.
| | 01:13 | So, let me go back into Flash
and I am going to use a component.
| | 01:18 | So I am going to go to Window>
Components, and what Components are are assets
| | 01:24 | that I can use where most of
the code is written for me.
| | 01:29 | So they basically extend the
functionality of my Flash file, without me
| | 01:34 | having to write code.
| | 01:36 | So this UILoader component is one of
them, because it will load in images, or SWF
| | 01:42 | files, or Bitmaps, or JPEGs.
| | 01:44 | If I want, all I have to do is drag
it right onto your stage to add it.
| | 01:51 | So I'm going to close the COMPONENTS panel,
and I might want to put it in the upper
| | 01:56 | corner, right there, all right.
| | 01:57 | So next thing I need to do is define
its properties, so I am going to go to the
| | 02:03 | PROPERTIES panel and what I need to
do is just go ahead and open up the
| | 02:09 | COMPONENT INSPECTOR panel to view the
different components options that I have
| | 02:15 | available for this UILoader.
| | 02:17 | So with it selected, I can take a
look at my COMPONENT INSPECTOR panel.
| | 02:21 | I want to autoLoad.
| | 02:23 | I want to scale the Content.
| | 02:25 | Well, do I really want to scale the content?
| | 02:27 | No, I wanted to load in at its actual size.
| | 02:31 | So I am going to change scaleContent to false.
| | 02:34 | Next thing I need to do is type in the
source. Remember that we did put an
| | 02:40 | images folder in the same folder as
this fla, and in this images folder is the
| | 02:47 | background1.jpg. That's where the file is.
| | 02:50 | Of course, we want to make it visible,
but in general, that's all I need to do.
| | 02:54 | So now when I go to Control>Test Movie,
it loads in that background, and now my
| | 03:01 | file size in only 15K.
| | 03:04 | So if I just turn on this content layer,
you can see, if I go to Control>Test
| | 03:09 | Movie, that I do get the full experience.
| | 03:12 | Now the file that was 100K is only 20K
now, so this content is going to load
| | 03:19 | pretty much in a split second for most users.
| | 03:23 | But it's all about keeping the user
in mind and making sure they can see
| | 03:26 | content, and get to content
right away, without having to wait.
| | 03:30 | And all this is done using the UILoader
component, and pointing to the specific
| | 03:35 | image that you want to load in.
| | Collapse this transcript |
| Loading random images| 00:01 | One thing you will always want to
consider is how to keep your site fresh
| | 00:03 | and visitors returning.
| | 00:05 | One easy way to do this is by loading
in different content for each visit.
| | 00:10 | And that's what I want to do, in this case.
| | 00:12 | I want to load in a different
background each time the page is refreshed.
| | 00:17 | Okay, and I really want to pick
from a pool of about 10 backgrounds I
| | 00:20 | already have set up.
| | 00:22 | So let's go ahead and take a
look at how this is currently set up.
| | 00:27 | The background is being loaded
in, using this UILoader component.
| | 00:32 | So if I go to Window down to Component
Inspector, you can see that the source
| | 00:38 | says that it's pulling from images/Bkgd1.jpg.
| | 00:42 | Well, it's not realistic from you to
come in here and change this every 15
| | 00:45 | minutes and then republish the file.
| | 00:48 | But I could, I guess, do that,
but what you're probably thinking,
| | 00:50 | "There should be an easier way," and there is.
| | 00:52 | And this way is done in ActionScript.
| | 00:56 | Okay, so I'm going to use Flash's
programming language to change this number here.
| | 01:03 | I'm going to pick a random number
from 1-10, and then replace that number.
| | 01:08 | Okay, so just close that panel.
| | 01:11 | First thing you need to do, if
you're going to write ActionScript, is put
| | 01:14 | ActionScript in a layer, and create a new
layer just by clicking this Page icon, and call AS.
| | 01:23 | And all of your ActionScript should
really go on one frame in your Timeline,
| | 01:28 | preferably in your main
Timeline, just right here.
| | 01:30 | That's where I want to keep all of my code.
| | 01:33 | So with that frame selected, I'm going
to Window, down to Actions, and that will
| | 01:37 | open up the Actions panel. All right.
| | 01:41 | First off, notice that there
is this panel off to the side.
| | 01:44 | I could use some of that content, but
I'm going to do is I'm going to type in,
| | 01:47 | right in this area, I'm going to
write my ActionScript to right in here.
| | 01:51 | And what I want you to get used to
doing is start just typing in, in Plain
| | 01:55 | English what you want to do.
| | 01:57 | And in this case, what I want to do is I want
to LOAD A RANDOM BACKGROUND (FROM 1 TO 10).
| | 02:07 | That's basically what I want to do.
| | 02:08 | So just in Plain English,
type in what you want to do.
| | 02:12 | And if you highlight that line, what
you can do is tell Flash to ignore this
| | 02:17 | line by selecting Apply line comment.
| | 02:22 | That will enable Flash to just ignore
that line, and then move on down to what
| | 02:25 | you wanted to render out.
| | 02:28 | So in this case, what I want to do
is I need to create a Random number.
| | 02:32 | And this Random number is really going
to go in a container called a variable.
| | 02:37 | So I'm going to create this var
randomNumber, and what's going in this
| | 02:44 | container is a number,
| | 02:46 | so I need to tell Flash to expect a Number.
| | 02:51 | So again, think of a variable as just
an empty box that you can put anything
| | 02:55 | into, and in this case, I am telling
Flash that it's going to contain a number,
| | 02:59 | and sure enough, that's going to be
equal to whatever number you want it to
| | 03:03 | contain, but I want it to be a Random Number.
| | 03:06 | So first thing you might want to
consider is just typing in 'random.'
| | 03:10 | And notice that it's a keyword, and if
it changes colors, it means that it's a
| | 03:16 | keyword, and you really
explore what it really does.
| | 03:20 | So I'm going to go ahead and View Help,
just by right clicking on that word, and
| | 03:25 | it will open up Flash's Help,
and it tells me what random is.
| | 03:29 | Now if I scroll up near the top,
notice that it's part of the Math Class.
| | 03:34 | And the Math Class has many methods,
one of them being the random method, but
| | 03:41 | you can do so many different things.
| | 03:43 | So again, if I select that, it's just
going to tell me that it's going to pick a
| | 03:46 | random number between 0 and 1.
| | 03:48 | It's not going to be a whole number.
| | 03:49 | It's going to be like 0.3258,
something like that.
| | 03:53 | But it does generate a random
number, and that's what I want.
| | 03:57 | So I want to use Math.random.
| | 04:00 | So let me just minimize that, go back
in Flash and type in Math, because
| | 04:07 | again, it's part of the Math Class.
| | 04:09 | It's this random method, and then just
like it showed me in help, I need to have
| | 04:14 | open and close parentheses.
| | 04:16 | Now, this will return a random number,
and it puts it in this container.
| | 04:21 | All right!
| | 04:22 | Now for testing purposes, what you're
going to want to do is use a trace statement.
| | 04:28 | And all this does is helps me
check what's inside of random number.
| | 04:34 | Just for my purposes, the end-user will
never see any sort of trace statement,
| | 04:38 | but it really helps me figure out
sort of how my code is working.
| | 04:41 | So I'm going to go to Control and
Test Movie, and we're going to see what
| | 04:46 | happens with the trace
statement when I add that in.
| | 04:49 | What happens with the trace statement
is it prints out what was in that trace
| | 04:54 | statement, and this is what that
random number is .63 yada, yada.
| | 05:01 | So let's just do a Test Movie, and
I'll show you that it does generate
| | 05:03 | a different number.
| | 05:05 | So it is picking your random number each time.
| | 05:06 | It's working great.
| | 05:07 | But this is really random, and isn't
really useful for my specific case.
| | 05:11 | So I need to do some more things with it.
| | 05:12 | In fact, I need it to pick from a
number, say, between 1 and 10, Okay?
| | 05:16 | So what I can do is say,
"Hey, Math.random? I need to multiply you by 10."
| | 05:24 | Now if I run it, it's going to
pick a number between 1 and 10.
| | 05:28 | So I'm just going to hit Command+Enter,
or Ctrl+Enter if you're on a PC, and you
| | 05:34 | can see, in the Output Panel, it's showing
me that it is actually picking a random
| | 05:40 | number between 1 and 10.
| | 05:41 | But I still have an issue, because
I don't have my image named this.
| | 05:45 | I just have one background, two
background, three background, or background
| | 05:50 | three, but I don't have their whole numbers,
| | 05:54 | so I need to round this to a whole number.
| | 05:57 | And again, this - if I check out the Math
Class again, I can see what else I can do.
| | 06:05 | For instance, I can round down, maybe
using floor, or I can even, Returns the
| | 06:11 | ceiling, I can round up using ceil, so
that's what I want to do. I want to round up.
| | 06:18 | So 1.5 will actually become 2. 2.9
will actually become 3, and so on.
| | 06:24 | So Math.ceil, and then within those
parentheses, it will go ahead and round up
| | 06:34 | anything that's in there.
| | 06:35 | Let's check this out now, Test Movie.
| | 06:38 | Finally, a whole number, and I'll just
hit Command+Enter a couple more times, and
| | 06:44 | you can see it's generating a whole number.
| | 06:46 | Finally, something pretty useful.
| | 06:49 | So now that it's returning a whole
number between 1 and 10, let's make sure I
| | 06:53 | have my images in place.
| | 06:55 | Because here is my images,
Background 1 through 10.
| | 06:58 | Great, they are all set up.
| | 07:00 | I need to be aware of how this is named,
because now I need to use this random number.
| | 07:08 | So another line and what I'm going to
do now is I'm going to pin my code, and
| | 07:15 | what pinning your code does
is it just always keeps it up.
| | 07:19 | So if I actually click off in the
Timeline anywhere, in some other location,
| | 07:24 | my code disappears,
| | 07:25 | But if you're always writing code in
one place, what you want to do is bring up
| | 07:32 | that code and hit this little push-pin,
Pin active script, because I always want
| | 07:37 | this to be up, regardless
of what I am clicking on.
| | 07:40 | In this case, I want to click on the
UILoader component, because I want to kind
| | 07:43 | of compare what that
component is doing with my code.
| | 07:48 | So UILoader component selected. I'm
going to go to Window>Component Inspector.
| | 07:53 | Here is my Component Inspector panel,
source, images/Bkgd1.jpg. All right.
| | 07:59 | I need to write this in ActionScript,
and the first thing I need to do is I need
| | 08:04 | to give that UILoader an instance name.
| | 08:07 | I need to give it a specific name, so
I can reference it in my ActionScript.
| | 08:11 | Just close that, select my UILoader component.
| | 08:14 | Right up in here, I want to type 'bkgdImage.'
| | 08:19 | This is known as an instance name.
| | 08:21 | It's just a specific name.
| | 08:23 | And what I encourage you to do is just
do Command+C, just to copy it, because
| | 08:27 | I'm going to use that in my
ActionScript, Command+V, bkgdImage.
| | 08:33 | So now that UILoader has a
specific name. I can reference it.
| | 08:37 | I can change its source to
"images/Bkgd1.jpg," just like that.
| | 08:47 | All right.
| | 08:48 | So it's doing an exactly the same thing
as this Component Inspector panel is doing.
| | 08:53 | What I want to do is I want to
replace this number with a random number.
| | 08:57 | So in order to do that, I am just
going to make sure this is text, and then I
| | 09:03 | want to add this random number,
so I'll, again, Copy, Paste.
| | 09:09 | I encourage you to copy and paste, just to
eliminate any sort of mistypes or typos.
| | 09:14 | But now what's going on is it's
going to look in the images folder for a
| | 09:18 | background, whatever random
number we pick .jpg. All right.
| | 09:23 | Everything is looking good, and one
thing you can do is, in your Actions panel,
| | 09:29 | you can check the syntax.
| | 09:30 | So I can go ahead and hit that checkbox.
| | 09:33 | And say this script contains no errors.
| | 09:34 | That's great, but I really won't know
if it's working until I do a Test Movie.
| | 09:39 | Sure enough, there it is, looks like a
different background to me, and it's bkgd6.jpg.
| | 09:44 | And I can do a Command+Enter, or
Ctrl+Enter if you're on a PC, and you can see a
| | 09:50 | different background 8, background 5
loading in, so each time the user visits
| | 09:55 | the site, it's going to go ahead and
pull up a different image, which works out
| | 09:59 | great, a great way to keep your site
fresh, and hopefully, visitors returning.
| | 10:04 | It really does a good job of just
really appealing to your portfolio as well,
| | 10:09 | seeing as you can have sort of an
unlimited, virtually unlimited number of
| | 10:13 | images as your background that you can
pull from, and again, the fact that your
| | 10:17 | site is fresh just really
enhances the experience for the user.
| | Collapse this transcript |
|
|
3. Adding NavigationCreating menu buttons| 00:01 | One of the fundamental things you'll
want to do in Flash is create a button
| | 00:05 | and eventually add interactivity to it, and
that's what I want to do with this project.
| | 00:09 | I want to have each one of these items a
button, as well as this John Doe be a button.
| | 00:16 | This is going to be my home button and
this is the one I'm going to start with.
| | 00:20 | What I want to happen is I'm first
going to give everything a Drop Shadow, just
| | 00:25 | to set it off from the background.
| | 00:27 | Then I want it to highlight red when you
move your cursor over that particular item.
| | 00:34 | Next, the down state when you click
down on it, I want it to highlight white,
| | 00:39 | give it this white glow as well.
| | 00:41 | So that's what I want to do for the
buttons is add a Drop Shadow, a roll over
| | 00:45 | red color, and a click white
color to each one of these,
| | 00:49 | but the first thing I need
to do is make it a button.
| | 00:53 | So that's what I want to do.
| | 00:56 | In my Timeline, in the content movie
clip, I'm just going to double-click.
| | 01:00 | What I want to do is I want to take
this text and convert it to a button.
| | 01:05 | Currently, it's about three different
things all grouped together, and that's
| | 01:11 | what you might need to do in some
cases is break something apart in order to
| | 01:16 | control it a little more.
| | 01:17 | So Modify, go down to Break Apart and
you can break apart that cross from the
| | 01:25 | text, because I just want this text
here to be the home button. All right.
| | 01:30 | With these two items selected, what I
can do is just click and drag it right
| | 01:35 | into the Library and then I get
the Convert to Symbol dialog box.
| | 01:39 | I can go ahead and give it a Name.
| | 01:41 | I will call this home button.
| | 01:42 | I'm going to make sure the Type
is a Button and then select OK.
| | 01:48 | Notice in the Library panel, here is
my home button and sure enough, it has an
| | 01:52 | icon that looks like a
button as well. All right.
| | 01:56 | I want to edit this button now.
| | 01:57 | So I'm going to double-click on it and now
I'm in Symbol Editing mode for this button.
| | 02:04 | Notice the Timeline.
| | 02:06 | I have an Up, Over, Down and Hit state,
and what I want to do is I want to modify
| | 02:11 | this text for each state.
| | 02:13 | So I'm going to start with the Up state.
| | 02:14 | I'm going to select that text.
| | 02:16 | In the Properties panel, I'm going to
show how you can give something a glow.
| | 02:21 | So down here, near the bottom, I'm going
to click this Add Filter button and I'm
| | 02:26 | going to give this a Glow.
| | 02:28 | By default, it gives it a fairly nice
red glow but again, I just want to make
| | 02:32 | this black just to kind of set it
off from the background. All right.
| | 02:37 | So that's the initial state, the Up
state, sort of the untouched state.
| | 02:41 | The next it is the Over state.
| | 02:43 | This is going to be the touched state.
| | 02:45 | For the Over state, what I want to
do is I want to Insert a KeyFrame.
| | 02:49 | So when I Insert a KeyFrame, it
actually gives me a keyframe and allows me to
| | 02:53 | modify the contents in here at this
point in time, or at this state, in this case.
| | 03:00 | So John Doe, instead of it having this
black glow, I can go ahead and change the
| | 03:04 | Color to red and change
the Strength to, say, 200%.
| | 03:09 | I can adjust the Blur radius and
different things as well, but I really want it
| | 03:13 | to pop when you rollover or
when your cursor touches this item.
| | 03:18 | So typical state, Over state turns red.
| | 03:21 | I'm going to insert another KeyFrame
and instead of this being red, I'm going
| | 03:26 | to change it to white.
| | 03:28 | So it's going to have this white pop
when you click on it, so the Down state.
| | 03:33 | Lastly, I'm going to Insert a KeyFrame
for the Hit area and what the Hit area
| | 03:39 | is is just a larger area and I'm going to
select just pink, for instance, this hot pink.
| | 03:44 | I'm going to draw a box.
| | 03:46 | I picked hot pink because you're never
going to see what's in this Hit frame.
| | 03:51 | All it does is it extends
out the size of this button.
| | 03:55 | So if you have small text, or you just
need a bigger Hit area, you can draw
| | 03:59 | whatever you want in here and that will be
your active area for your button. All right.
| | 04:04 | So far, so good!
| | 04:06 | Let's just do a Control > Test Movie.
There we are, and when I roll over it, it turns red.
| | 04:12 | If I click on it, it gives it that
white glow and it's working pretty well.
| | 04:17 | Notice that when I will roll over even
close to it, I'm going to hit that Hit area.
| | 04:22 | So out here, this is my Hit area.
| | 04:25 | It activates the button.
| | 04:27 | So that's looking pretty good.
| | 04:29 | It even has that nice black glow as well.
| | 04:32 | So I want to apply this same method,
I want to convert all three of these into
| | 04:36 | buttons and I want to give each one these
same settings, so the same effects. Okay.
| | 04:43 | Since these effects are working out so
well for me, I actually want to save them.
| | 04:47 | So with John Doe selected in the
Properties panel, down here in Filters, what I
| | 04:52 | can do is Save Presets.
| | 04:55 | Notice I already have some saved here,
but I could just do a Save As and I'll
| | 04:59 | call this one, say, 'Black Glow.'
| | 05:03 | The Over state is nice red.
| | 05:04 | I'd say it looks pretty good.
| | 05:07 | Properties panel, Save As 'Red Glow.'
| | 05:11 | Down state, there is my white.
| | 05:14 | Save As 'White Glow,' just like that.
| | 05:18 | So you can have as many as you want and
really, you can build up a nice library
| | 05:23 | of effects to use anytime you start a project.
| | 05:27 | In this case, I'd want to do the
same thing for the About button.
| | 05:32 | Currently, it's not a button.
| | 05:33 | So don't forget that you have to drag
it into the Library to make it a button.
| | 05:37 | I'll call this about button, select OK.
| | 05:40 | Double-click that button to enter symbol
editing mode and what I can do is start
| | 05:47 | inserting keyframes and I
can start giving this effects.
| | 05:51 | So you can see the process is going to go
much faster now that I have Filters Presets.
| | 05:57 | So for this Up state, I can select the
Black Glow, Over it's going to be a Red,
| | 06:03 | Down is going to be the White.
| | 06:08 | You don't have to put anything in the Hit area,
| | 06:11 | so you can always skip that step, if you'd like.
| | 06:14 | But really, for each button that you
need to create, you do have to drag it into
| | 06:19 | the Library, 'video button.'
| | 06:22 | It's a Button Type, double-click it
and, again, it's just the matter of inserting
| | 06:27 | keyframes and then adding those effects.
| | 06:32 | So Black Glow, the Red is the Over state.
| | 06:39 | Now, note that if I ever change this
White Glow, it's not going to change
| | 06:44 | it across the board.
| | 06:45 | They're not really linked together.
| | 06:47 | So just keep that in mind for the Down
state that it is going to be that White
| | 06:50 | Glow, just like that.
| | 06:53 | So again, this is probably the
fastest way to make buttons too is just by
| | 06:58 | dragging it right into your
Library and then calling it.
| | 07:02 | Of course, it helps to have some consistency.
| | 07:06 | Each one's named, say,
portfolio button, video button.
| | 07:10 | So double-click it and Insert KeyFrames.
| | 07:15 | Again, anytime you have a keyframe,
you can change that content and it won't
| | 07:20 | affect it in other places.
| | 07:22 | So for the Up state, Black Glow, Over, Red
and the Down state is going to have the White.
| | 07:34 | So I really just used one effect and I
kept modifying it and then I just saved
| | 07:39 | it as Presets, but I encourage you to
really explore this list because there is
| | 07:43 | Drop Shadows, Blurs, some
Gradient Glows you can add.
| | 07:47 | You can even adjust the color of items.
| | 07:49 | It's really helpful when you need to
modify the look of an item, just like I did
| | 07:54 | here with my buttons.
| | 07:56 | It works out great.
| | 07:57 | So with all four of these set up, let's
do a Control > Test Movie, roll over the
| | 08:03 | About, turns red, turns red, turns red.
| | 08:06 | Everything is looking really good.
| | 08:08 | When I select them, they turn White as well.
| | 08:12 | So now my site set up.
| | 08:13 | I have my buttons created, and now I can
go ahead and add functionality to them.
| | Collapse this transcript |
| Adding functionality to buttons| 00:01 | Once you have the buttons created,
the next thing you want to do is add
| | 00:04 | functionality to them,
| | 00:05 | in other words, make them do something.
| | 00:08 | That's what I want to do here is I
want to make these four buttons work.
| | 00:13 | The first place you need to start is to
give them a specific name, an instance name.
| | 00:20 | So I'm going to double-click on this
content movie clip to enter inside of it
| | 00:25 | and notice here are my buttons.
| | 00:27 | I want to go through and give each one
an instance name, starting with this one
| | 00:32 | right here, the John Doe.
| | 00:34 | It is the home button.
| | 00:35 | So in the Properties panel, I'm going
to give it an Instance Name of home_btn.
| | 00:41 | Don't use any special characters or any spaces.
| | 00:44 | It should really just be one word _btn.
| | 00:48 | About is going to follow the same
pattern, btn, video_btn and portfolio.
| | 01:01 | So really be mindful of what you're
calling each button because that's probably
| | 01:06 | where the most errors happen
is with instance names. Okay.
| | 01:11 | So I'm going to start off with this home button.
| | 01:15 | So I'm going to remember home_btn.
| | 01:18 | But let's be aware that we are
actually inside of the content movie clip.
| | 01:23 | So I need to click back out on Scene 1,
because on my main Timeline, all my
| | 01:31 | ActionScript is going to be in this frame.
| | 01:34 | So what I need to do is I need to give
the content movie clip an Instance Name.
| | 01:39 | So with the content movie clip
selected, I'm going to go ahead and type in
| | 01:44 | 'content_mc,' just like that. All right.
| | 01:49 | Now select that first frame in your
ActionScript actions AS layer and go to Window
| | 01:57 | and open up your Actions panel.
| | 01:59 | Here is mine, loading in the random background.
| | 02:03 | The first thing I want to do when I
open up my Actions panel, since I always
| | 02:07 | want this code to appear, I want to pin my code.
| | 02:11 | So it's just pressing this pushpin.
| | 02:13 | Now the code always stays up,
regardless of what I click on.
| | 02:18 | Next thing I want to do is
just add a couple of lines.
| | 02:22 | Two forward slashes will
enable me to add a comment.
| | 02:26 | What I want to do is just go ahead and
type in plain English what's going to happen.
| | 02:31 | So in this case, I want to
Listen For The Click Of The Buttons.
| | 02:37 | These are going to be for all the buttons.
| | 02:40 | Now, the first button I'm going to
deal with is going to be the home button.
| | 02:43 | Let's remember that it's inside of
the content movie clip. So content_mc.
| | 02:49 | That's my Instance Name.
| | 02:50 | Inside of there, so I need to separate
that with a period, is the home_btn.
| | 02:56 | I'm going to hit period again.
| | 03:00 | What I need to do is I need to
listen for the click of the home button.
| | 03:03 | So I need to add an event listener.
| | 03:06 | Again, I love the code hinting I get in
here, because as soon as it highlights
| | 03:11 | right here, I can go ahead
and hit Return and it adds it.
| | 03:14 | I am also given additional hints that
can be pretty convoluted, but they are in
| | 03:20 | there, because it is asking me for
what type of listener I'm listening for.
| | 03:25 | Well, I'm listening for the
MouseEvent.CLICK to be more specific.
| | 03:32 | The great thing about how setting up
listeners works is I can not only listen
| | 03:37 | for a click, but I can also listen for
many, many different things and you can
| | 03:41 | peruse this at your leisure,
| | 03:43 | but, you know, whether it's MOUSE_OVER or
MOUSE_OUT, MOUSE_WHEEL, whatever it may be, it's
| | 03:48 | all available right in here.
| | 03:50 | So, in this case, it's just going to
be the CLICK that I'm listening for.
| | 03:54 | I'm going to add a comma and it's going
to go ahead and listen for some sort of
| | 03:58 | Function is what it's going ask for next.
| | 04:01 | I'm just going to type in 'homeClick.' All right.
| | 04:06 | So homeClick is going to be a function
that fires off when this button is clicked.
| | 04:14 | So I need to create this function.
| | 04:16 | As you start typing ActionScript,
notice you'll quickly run out of space.
| | 04:21 | Well, you can always minimize this
panel off to the side, just by clicking that
| | 04:25 | arrow, and now you have more room. All right.
| | 04:28 | Now again, I want to create
a function called homeClick.
| | 04:31 | So just below that, function homeClick.
It's going to accept a MouseEvent and
| | 04:41 | it's going to be void.
| | 04:43 | as in it's not going to return anything.
| | 04:46 | But in general, this is
the structure for a function.
| | 04:50 | Anything within these curly braces is
going to execute when this function is
| | 04:55 | being called and this function is
being called when you click on the button.
| | 05:01 | Now, I can go ahead and add whatever I
want to add to this when it gets clicked on.
| | 05:05 | And what I'm going to do now
is just add a trace statement.
| | 05:08 | Again, this is just for testing
purposes to make sure everything is
| | 05:10 | working, homeClick.
| | 05:13 | Go ahead and listen for and just
print out in the Output panel, this word
| | 05:19 | homeClick, just so I know that it's
working for testing purposes. All right.
| | 05:23 | It's looking pretty good and anytime
you type a lot of code, feel free to hit
| | 05:27 | this little Check Syntax button and
it'll tell you that it contains no errors.
| | 05:34 | Let's go ahead and test the movie.
| | 05:36 | Now, here is my home button.
| | 05:38 | So if I click on it, I can see that it
says, I will move this out of the way,
| | 05:42 | it says 'homeClick,' right there,
| | 05:44 | so it's working out perfect and, of
course, if I hit it multiple times,
| | 05:48 | that's working great.
| | 05:49 | We're doing quite well.
| | 05:51 | In fact, I want to go ahead and do
the same thing for the other buttons.
| | 05:55 | So I'm just going to condense this down.
| | 05:58 | You can have line breaks all you want.
| | 06:01 | If you want to condense it down, you can
go ahead and remove the spaces if you want,
| | 06:04 | but in order to make the others,
it's going to follow the same format.
| | 06:08 | So I want to just go ahead and Select
All of this and then Copy it and then I'm
| | 06:15 | just going to paste it right below.
| | 06:16 | So I'm going to do the About button next.
| | 06:18 | So for content_mc inside of content,
that movie clip is going to be an about_btn.
| | 06:24 | Of course, it has an
EventListener. I am listening for the click.
| | 06:29 | Well, I don't want it to
fire off this function up here.
| | 06:32 | I want to create a new
function called aboutClick.
| | 06:36 | aboutClick is going to be right here.
| | 06:39 | Then it's going to trace
out aboutClick, just like that.
| | 06:43 | Two event listeners written for two
buttons, and again, it's the same process of
| | 06:50 | just copying and then pasting and then changing,
| | 06:55 | so video_btn, videoClick.
| | 07:00 | It's going to call this
function, called videoClick.
| | 07:04 | Oh, see? I almost mistyped right here.
| | 07:07 | Be really careful that
you don't mistype, of course.
| | 07:10 | What you can always do is do a Copy
and then Paste, literally, which is usually
| | 07:15 | what I like to do, because it eliminates,
or helps eliminate, errors, videoClick.
| | 07:21 | One last time, for the portfolio_btn.
I'll just keep that short and call it
| | 07:35 | 'portClick,' but I want to be aware that
that's what this function needs to be
| | 07:40 | called, just like that, and
then portClick. All right.
| | 07:46 | I want to be aware that these instance
names exist inside of the content movie
| | 07:52 | clip, but let's just go ahead
and Check the Syntax. Great!
| | 07:57 | Doesn't contain any errors, but let's
go ahead and test this. Do our true test
| | 08:02 | by clicking on, sure enough, our home button,
then on the about button, works great,
| | 08:08 | video button works great, and
then, of course, the portClick as well.
| | 08:14 | So again, if I just close this and go
back to my code, what you're going to want
| | 08:20 | to do is just write event listeners
and that's all you need to do in order to
| | 08:24 | make a button work, for the most part.
| | 08:27 | The great thing about event
listeners is you can listen for pretty much
| | 08:32 | anything, whether it's the
clicking or rolling over or something, or
| | 08:35 | potentially, even, say, listening for a
video to complete, or until it's done
| | 08:40 | playing, or a graphic to load.
| | 08:42 | It's all done with event listeners.
| | 08:45 | So as soon as you get comfortable with
writing event listeners, you'll be able
| | 08:49 | to do so much with them.
| | 08:51 | Now, that the buttons are set up,
I'm ready to make them navigate to
| | 08:54 | their particular section.
| | Collapse this transcript |
| Adding navigation| 00:01 | Once the ActionScript structure of a
basic button is in place, I can now
| | 00:05 | navigate to this section selected,
because currently what's going on, if I go to
| | 00:11 | Control>Test Movie, all I have are
these various trace statements that are
| | 00:17 | being shown in the Output panel.
| | 00:19 | But what I want to happen is I want to
actually navigate to the video section
| | 00:24 | when I click on the Video button and
likewise for all the other buttons.
| | 00:29 | So let's take a look at the code.
| | 00:31 | I'm going to go to the AS layer.
| | 00:33 | I'm going to select that first frame.
| | 00:35 | I'm going to go Window and open up the
Actions panel and the first thing I'm
| | 00:39 | going to do is I'm going to pin the
code, because, again, I don't want it to move
| | 00:43 | if I click on something else.
| | 00:45 | I want it to always stay up and available.
| | 00:48 | But as you can see, when you click on
the home button, all I get is the trace
| | 00:52 | statement and same for the
about button and the video button.
| | 00:58 | Now, I'm just going to go ahead and
start with the Video button and what you can
| | 01:01 | do is click in this gray bar.
| | 01:04 | You can just retract the
Actions panel, so it's out of the way.
| | 01:08 | I am going to Command+Minus to zoom out.
| | 01:12 | I want to move this content movie clip
this direction, and I want to change the
| | 01:19 | X and Y position of this
content and see. It starts out.
| | 01:24 | Again, I'm going to do an Undo Move.
| | 01:27 | It's going to start here and
then I want it to end up right here.
| | 01:32 | So let's go ahead and
reference the X and Y position.
| | 01:37 | So in the Properties panel, with the
content movie clip selected, I can see
| | 01:42 | that the Position and Size, the X is
-920. In fact, I'll just round that to 920
| | 01:48 | and then the Y is about 530, maybe I
want to make it about 520 or let's go 540,
| | 01:55 | have it move up a little bit just so we can
make sure we get that Portfolio button down there.
| | 02:02 | That's a pretty good position, -920 by
-550 for the Y position and that's what I
| | 02:07 | want to move the content_mc to.
| | 02:10 | So I'm going to open up my
Actions panel that was currently nested.
| | 02:14 | And I'm going to go to the video button
and when it's clicked on, it's going to
| | 02:19 | fire off this function and then just
below the trace statement, you can type in
| | 02:24 | 'content_mc' and then change, after I type
that period, I can change the property
| | 02:31 | of this movie clip and I
want to change the x position.
| | 02:35 | Okay, so this is going to be
horizontally that it's going to move.
| | 02:38 | So change the x position equal to -920,
just like it shows right over here.
| | 02:46 | The y position, -550.
| | 02:49 | New line, content_mc.y equals,
again, don't forget the -550, just like that.
| | 02:58 | So again, I'm going to click on this gray
bar just to nest the Actions panel into
| | 03:03 | that one bar and I'm going to go
ahead and move this back into position.
| | 03:07 | Now, I could kind of eyeball this, but
what I'd like to do is use the Align panel.
| | 03:13 | So I'm going to go to Window > Align and
make sure this button is depressed, the
| | 03:19 | To-stage button, and I want to center
vertically and horizontally to make sure
| | 03:23 | that is in its exact position.
| | 03:25 | Now, this is the starting point.
| | 03:27 | So the John Doe button,
| | 03:30 | it's the home button, and when you click
on his name, I want to reset the position
| | 03:35 | of the content_mc, back to this
location, which is -600 x -752.
| | 03:43 | So I'm going to remember those numbers
because when I click on the home button,
| | 03:49 | I want to adjust the x and
y position of content_mc.
| | 03:53 | Again, x position is going to be equal
to -600 and content_mc's y position is
| | 04:02 | going to be equal to -752.
| | 04:06 | Now, I'm just going to round that to
a whole number, -752, and with the home
| | 04:12 | button set up and the video button
set up, it should work just fine.
| | 04:18 | So I'm just going to go ahead and
check syntax by clicking that check box and
| | 04:23 | this script contains no errors.
| | 04:25 | Now, let's go ahead and
do the Control > Test Movie.
| | 04:28 | I'll move this into place and now when
I click on video, it pops, changes the x
| | 04:35 | and y position, when I click on that
video_btn and then for the home button,
| | 04:39 | bam, snaps back into place.
| | 04:42 | So it's working quite well, and quite
frankly, I can set up the other two now.
| | 04:47 | So let's close this and go back into my
code and I can start to add some of the
| | 04:53 | code for the other buttons.
| | 04:55 | So let's go ahead and minimize this
Actions panel and what I want to do now is
| | 05:01 | bring in the about section.
| | 05:04 | Now the About section is
actually going to rotate.
| | 05:07 | So I need to do just kind of
minimize, scoot this out of the way.
| | 05:11 | I want to expand out this panel
and I just want to be able to see the
| | 05:17 | Transform panel, because what I need to do is I
need to change the rotation of this content_mc.
| | 05:24 | And what I can do is is I can just
go ahead and click and drag and I can
| | 05:29 | see that rotate around.
| | 05:31 | Now, you can use the Transform
panel to, obviously, transform anything.
| | 05:36 | I could even use, in my Tools panel, the
Free Transform tool, in case I just kind
| | 05:41 | of want to adjust it this way.
| | 05:44 | But I think when you're dealing with
code it's better to do it numerically, so
| | 05:47 | that's why I'm going to use the Transform panel,
just to rotate it a -90 degrees, just like that.
| | 05:54 | So I'll just position it into place.
| | 05:56 | Use my arrow keys to fine-tune it like that.
| | 06:02 | That's a pretty good position. All right.
| | 06:04 | It's a -90 degrees is the rotation.
| | 06:06 | The x and y position, and
I'll just round this up,
| | 06:10 | is going to be -250 and a
positive 1430, just like that. All right.
| | 06:17 | I'm going to remember those numbers and
the 90 degrees when I open up my Actions panel
| | 06:23 | and again, this is for the about button.
| | 06:26 | Make sure you're inside of
this aboutClick function.
| | 06:29 | So just before this closing curly brace,
you can type in content_mc, move its x
| | 06:37 | position to -250, its y position 1430, _mc
rotation, well, I will just start to type in 'rotate.'
| | 06:52 | Oh! Rotation, there it is. I can select it,
| | 06:54 | hit return, and then make that equal to -90 degrees.
| | 07:00 | Now, there is an issue, because I'm
dealing with rotation at this point and
| | 07:04 | these other two are not rotating.
| | 07:07 | In fact, I need to make sure the rotation
gets set back to zero for these other two.
| | 07:13 | So I'm just going to go ahead and copy this.
| | 07:16 | I'm going to select it and copy that line of
code and paste it right into the home
| | 07:22 | button's function and I'm going to
make sure the rotation gets set back to 0.
| | 07:28 | Same thing for the video button, paste
that in there, set the rotation back to 0.
| | 07:33 | All right. It's looking pretty good so far.
| | 07:37 | In fact, I'm just going to go ahead
and do the Portfolio button now as well.
| | 07:41 | So let's see what that looks like.
| | 07:44 | Portfolio button actually shifts over
and is really going to be on the same
| | 07:50 | y-axis, but the x axis is going to change.
| | 07:55 | So I'm just going to position that
accordingly, maybe use my arrow keys to
| | 07:59 | fine tune it. In the Properties panel, maybe
make it -1000 and then this is going to be 1450.
| | 08:09 | All right. So I'm going to open up my Actions
panel for the Portfolio button and again, I
| | 08:16 | can just copy all of the x and y
rotation from a previous function and paste it
| | 08:22 | in and start changing some of these numbers.
| | 08:25 | As for the Portfolio button, it's going
to move to the left -1000 and then the y
| | 08:33 | is going to be 1450 and let's be aware
that the rotation is still -90 degrees, so -90.
| | 08:42 | All right. Everything seems to be looking pretty
good, but you never know until you test it.
| | 08:48 | So I'll do a Control > Test Movie.
| | 08:51 | And as you can see, I didn't move it
back to its original place when I finished
| | 08:59 | getting all my coordinates.
| | 09:00 | So I can go ahead and fix
that just by typing in 0 here.
| | 09:04 | Change the Align panel.
| | 09:06 | Change the Align horizontal center and
the vertical center to reset it back to
| | 09:11 | its original position.
| | 09:13 | Now, Control > Test Movie.
| | 09:16 | It's in its original position.
| | 09:17 | I'm going to go ahead and click About.
I can see that it rotates and then moves the
| | 09:22 | x and y position, and go to
Video and I can even go to Portfolio.
| | 09:28 | So it's looking pretty good so far.
| | 09:30 | I can select any one of these and I
can even reset back to the beginning, just
| | 09:35 | like that, by clicking John Doe.
| | 09:37 | So notice that as I select the button,
it changes the properties for the content
| | 09:42 | movie clip to reveal that section.
| | Collapse this transcript |
| Creating transitions| 00:01 | Flash does many things really well, but
probably at the top of the list is its
| | 00:05 | ability to animate, which is
what I want to do with this site.
| | 00:08 | I want to create some smooth
transitions from one section to the next.
| | 00:12 | Because currently what happens is
if I click on a section, it's just a
| | 00:16 | straight cut from where this navigation was, to
the About section, and really I want it to animate.
| | 00:23 | And what's great about Flash is I can build
some Tweens, so it does all the in between frames.
| | 00:30 | I don't have to move something frame
by frame. I can just tell Flash, "Move it
| | 00:34 | from point A to point B." And that's
what I want to do, going from section to
| | 00:38 | section, move it from point A to
point B, just build out the Tween.
| | 00:43 | So let's take a look at what I currently
have, because in the Timeline I have my
| | 00:49 | AS layer. I can select that first frame.
| | 00:52 | And what I want to do is go to
Window and open up the Actions panel.
| | 00:57 | And if I scroll down, I see that I have
all of my EventListeners that listen for
| | 01:05 | a Click and then fire off this
homeClick function, and then it just pops
| | 01:10 | directly to this position, for
instance, and rotates it as well.
| | 01:14 | So I want to really, ultimately
replace these with some nice Tweens.
| | 01:20 | So I am just going to move to the
very top and just hit Return a couple of
| | 01:24 | times, become I want to do a Tween,
and I will just type in Tween.
| | 01:27 | So this is the keyword you need to remember.
| | 01:30 | It's a keyword in Flash, and you can
select it, do a right-click, and then
| | 01:34 | View the Help for Tween.
| | 01:37 | Here is Flash's Help on the Tween class.
| | 01:41 | It tells me what it does.
| | 01:43 | Well, it lets you use ActionScript to
move, resize, and fade movie clips by
| | 01:49 | specifying a property of the target
movie clip and then animate it over a number
| | 01:54 | of frames or seconds.
| | 01:56 | So here's the code.
| | 01:58 | I love it that they have given me some code
as an example, but this is the code I need.
| | 02:04 | There's some further notes in here, saying that
there's some parameters that I need to modify.
| | 02:09 | So I am going to just take this code, right-
click, copy it, and then go back into Flash.
| | 02:16 | Right here at the top, I am going
to go ahead and paste this code.
| | 02:21 | And now let me just explain what's
going on, because these first two lines,
| | 02:26 | these are import statements.
| | 02:28 | In general, this just TELLS FLASH TO IMPORT
THE APPROPRIATE CODE to make this Tween work.
| | 02:37 | So these two line tells Flash to import
the appropriate code, and here is the Tween.
| | 02:44 | So what this does is there is a
variable called myTween, and what I want to do
| | 02:50 | is I want to move the content movie
clip when that button is selected.
| | 02:56 | So the first thing I need to do is just
cut this and move it to the correct spot.
| | 03:03 | So let's start with the about button.
| | 03:06 | Inside of this aboutClick function,
instead of it just popping directly to the
| | 03:11 | x position, I want to add the Tween, so I
am going to paste this Tween right in here.
| | 03:16 | All right. I am just going to go ahead and type in
'Animate,' because that's what this is going to do.
| | 03:23 | I want to animate the xTween, so I am
going to change this variable to myxTween.
| | 03:30 | And I need to define the
Object to move content_mc.
| | 03:33 | I am going to change the x position.
| | 03:37 | It's going to do this with elasticity,
so it's going to be kind of like a rubber
| | 03:41 | band. I can control this as well.
| | 03:45 | And then I am given some numbers down here.
| | 03:47 | And if you are ever curious as to what
a parameter is, you can always put your
| | 03:51 | cursor in there and then select Show
code hint, and then that will tell you.
| | 03:56 | Well, this is the begin point.
| | 03:59 | Where do I want it to start from?
| | 04:01 | I don't have an exact number I want to
put in here, but wherever the content_mc
| | 04:06 | is, wherever its x position
is is where I want it to start.
| | 04:10 | So I am doing content_mc.x.
| | 04:14 | And where I want it to end up
is this point right here, -250.
| | 04:20 | So I can take this, Command+C,
copy it, paste it right in here.
| | 04:27 | And this is going to happen.
What is this last number?
| | 04:30 | Well it's the duration.
| | 04:32 | It's going to happen over the course of
seconds, because this true means use seconds.
| | 04:38 | Or I can say, "You now what? Animate it
over the course of one second." All right.
| | 04:44 | There's myxTween variable, and I can go
ahead and just Delete that property to
| | 04:51 | change the position of the x, because
now that I have this Tween, it's going to
| | 04:54 | do all the work for me.
| | 04:55 | So Control > Test Movie. I have just
changed one property for the About section,
| | 05:00 | so only one thing is going to move.
| | 05:01 | If I click on it, did you see
that bounce? Click on it again.
| | 05:05 | It does that crazy bounce.
| | 05:08 | I can do it multiple times, and I really
only have one property that's being animated.
| | 05:14 | So let me just expand this out a little
more so I can see this long line, but I
| | 05:19 | want to do the same thing
for these other two properties.
| | 05:22 | So it's just a matter of copying this,
Command+C, Command+V and changing
| | 05:27 | what you need to change.
| | 05:28 | So I am going to change the
yTween, move the content movie clip,
| | 05:31 | its why position, from wherever it
currently is to this point right here.
| | 05:38 | So again, I want to Command+C to copy
that, Command+V, put that right in there,
| | 05:43 | over the course of 1 second. All right.
| | 05:46 | Let's Copy this one again
and let's do the rotation.
| | 05:50 | myrotate, rotate the content_mc, rotation.
| | 05:57 | Its current rotation position to
-90 over the course of 1 second.
| | 06:08 | Now that those are written, I can
Delete that, and you did see the Elastic.
| | 06:12 | You saw how it worked like a rubber band.
| | 06:14 | Well, I am not particularly fond of that
effect. I will just change this to Regular.
| | 06:19 | It's going to be a Regular easing,
so it's going to be really smooth.
| | 06:26 | And what easeOut means is when it
reaches its resting point, it's going to
| | 06:30 | slow down gradually. All right.
| | 06:32 | It's looking pretty good.
| | 06:33 | Now I am going to go ahead and Test my
Movie, click on the About section, and
| | 06:38 | that animates into place. Beautiful!
| | 06:41 | Let's try it again, see it move into place.
| | 06:44 | So I want to do the same thing for all the
others, so I need to do this three more times.
| | 06:52 | So let's expand out this panel some more.
| | 06:54 | So what I want to do is I want to copy
all this code, Command+C, for the Home
| | 07:01 | button inside of this function, so just
before that closing curly brace, I just
| | 07:07 | want to start replacing those numbers.
| | 07:08 | So Command+C, or Ctrl+C if you are
on a PC. I can start replacing these
| | 07:16 | numbers, just like that.
| | 07:21 | And don't forget to remove those first
three lines, so we just have our Tweens
| | 07:27 | in there, and that's
looking pretty good. All right.
| | 07:29 | Let's Copy this again.
| | 07:33 | For the video button, make sure you
get the minus, or the negative, 920 x position,
| | 07:41 | y position, and then the
rotation is just going to be 0.
| | 07:48 | And lastly, this Portfolio section
-1000, 1450, and -90, just like that.
| | 08:03 | And remember, if you forget what
these numbers are, just put your cursor
| | 08:06 | in there and then click Show code
hint and it will tell you, "Oh, this is
| | 08:11 | the finished position."
| | 08:12 | So keep that in mind.
| | 08:14 | I will Delete these three lines.
| | 08:16 | Everything is looking pretty good.
| | 08:19 | In fact, I can go ahead and check syntax.
| | 08:22 | It says the script
contains no errors. That's great,
| | 08:24 | but is everything going to line up
and animate to the correct position?
| | 08:28 | Well, let's check it out and see.
| | 08:30 | Control > Test Movie. Click
the About section, works great.
| | 08:36 | My Home button, it animates back into
place, my Video button does a pop, which I
| | 08:43 | need to fix, and then I have my
Portfolio section, which animates up.
| | 08:47 | So there is some weirdness that goes on.
| | 08:50 | In fact, it looks like I still need
to do -- aha, this is what you might
| | 08:55 | run into, is that it pops directly there,
and it's because I did not remove this code.
| | 09:01 | So I just need to Delete that
and then everything should be fine.
| | 09:05 | So for the most part,
everything is looking pretty good.
| | 09:08 | Control > Test Movie.
| | 09:12 | And looks like I need to fix a couple
of things, because this 'o' is getting
| | 09:16 | cut off, and I want to point this
out, because if you don't have items
| | 09:20 | positioned on whole pixels, on whole
numbers, then you might get this weird
| | 09:24 | sort of cutting effect.
| | 09:26 | So I want to go back in and make sure
the position, the initial position of
| | 09:30 | my content_mc is on a whole number, and that
will alleviate this sort of cut right here,
| | 09:36 | but I am really getting into the
point where I am fine tuning this.
| | 09:39 | If I click on About, yeah,
it rotates into place.
| | 09:42 | This 'o' is getting cut off right
there, so I might need to move its y
| | 09:47 | position down some, so it fits in there fully.
| | 09:50 | In fact, if I click on Portfolio,
that looks a little more appropriate.
| | 09:55 | Maybe I can scoot it over a little bit,
and then if I click back here on the
| | 10:00 | Home button, it navigates back into place.
| | 10:03 | And as you can see, it navigates back
into the center position, and it is on
| | 10:07 | whole pixels, so that's why
you don't see that being cut off.
| | 10:10 | So be aware of that.
| | 10:11 | And what I am going to do is I
am going to fix those two things:
| | 10:13 | the About section, where it's sitting
a little high, and then this Video, how
| | 10:18 | that gets cut off a little bit.
| | 10:20 | And I am going to minimize that Actions panel.
| | 10:22 | I am going to select this content_mc,
and if I look in the Properties panel,
| | 10:27 | Position and Size, -599.15.
| | 10:31 | Well, you know what?
| | 10:32 | Let's just round that up to 600.
| | 10:35 | In fact, this y position, 751.95.
| | 10:38 | Let's just make it 750.
| | 10:39 | We will start to get things sort of
lined up just right, and that's kind of what
| | 10:44 | happens even if you start to sort of
scroll things back and forth, they get a
| | 10:47 | little funky, but feel free to
just type in exactly what you need.
| | 10:52 | And if I zoom in, Command+Plus, you can
definitely see that everything is okay,
| | 10:57 | so it's that positioning that's
getting things a little weird. All right.
| | 11:02 | Let's go back into the Timeline panel.
| | 11:03 | I am going to select that first frame
in the Actions layer, and I am going to
| | 11:07 | look at the About button, and its y position,
it was sitting a little high, so it's 1430.
| | 11:13 | So to move it down I need to add to this
number, so I might want to make that 1450.
| | 11:20 | In fact, I can even compare that
with the Portfolio section, because the
| | 11:25 | Portfolio section is on the same y
position, and that does say 1450.
| | 11:31 | So it's much more appropriate now,
and I am going to go ahead and do a Test
| | 11:34 | Movie, see the Video isn't getting cut
off, that I can see the About section is
| | 11:41 | in a better position, the
same as the Portfolio section.
| | 11:45 | And everything is positioned appropriately.
| | 11:47 | I can even scoot this in a touch if I want to.
| | 11:49 | But this really allows you to give
you a sort of full control over the
| | 11:53 | positioning of items, as well as just
the animating of them, which just really
| | 11:57 | adds just another dimension to your website.
| | Collapse this transcript |
| Simplifying code| 00:00 | Now that you have seen the basics of
ActionScript, I am going to show you how
| | 00:04 | you can simplify your code, which is
going to cut down on errors and make
| | 00:07 | your code more flexible.
| | 00:09 | So I am going to go to this AS layer,
select that first frame, and go to
| | 00:14 | Window, and Actions.
| | 00:17 | And the first thing I am going to
do is pin my code by pressing that
| | 00:19 | little Push-Pin icon.
| | 00:21 | As you can see, as I scroll down, I
am repeating many, many lines of code,
| | 00:27 | this all looks the same. This looks
the same, and it's pretty lengthy, and
| | 00:31 | all that really changes from one function
to the next is this parameter, ok, and
| | 00:41 | this one, and then this one.
| | 00:44 | So what I want to do is create one
major function that's going to accept these
| | 00:50 | parameters and then move the
content movie clip accordingly.
| | 00:54 | So I am going to create that
function right up here, above of
| | 00:56 | the EventListeners.
| | 00:58 | I am just going to go ahead and type in
'function,' and this function is going to
| | 01:02 | be called moveContent, because the
goal of this function is to move content.
| | 01:07 | This function is going to accept
these parameters: the x position, the y
| | 01:12 | position, and then the rotation.
| | 01:14 | So I need to type that right in here,
theX, add a colon, and it's going to
| | 01:22 | accept a number, so type in Number.
| | 01:25 | As soon as that is
highlighted, you can hit Enter.
| | 01:29 | It's going to accept
theXPosition, and theYPosition.
| | 01:36 | That's also going to be a Number, and
it's going to accept theRotation, which is
| | 01:44 | also going to be a Number. All right.
| | 01:48 | All within those parentheses.
| | 01:49 | It's not going to return anything, so
as always, I am just going to type 'void,'
| | 01:53 | open curly brace and then a closing curly brace.
| | 01:57 | So here is my function.
| | 01:58 | Anything in here is going to execute
when this function is being called.
| | 02:02 | And what I want to do is I am just
going to set up some trace statements.
| | 02:06 | So trace is just some testing
statements for me, so I can see that certain
| | 02:11 | things are showing up.
| | 02:13 | I can put whatever I want in here.
| | 02:14 | I really want this letter X to appear,
followed by the position that it
| | 02:19 | receives, so theXPosition.
| | 02:20 | So I am going to do Command+C, just to
copy that, paste that right in there.
| | 02:26 | In the Output panel, it's going to
show me X and then whatever number gets
| | 02:30 | passed into this function.
| | 02:31 | I am going to copy this, paste it a
couple of more times, because all I need to
| | 02:36 | do is modify theYPosition.
| | 02:39 | Again, theYPostion is going to be
displayed in the Output panel as well.
| | 02:44 | And then lastly is theRotation, and
again, I need to use this, theRotation.
| | 02:54 | So my function is set up.
| | 02:56 | It's going to accept these three
parameters, and then it's just going to show
| | 03:00 | the trace statements in my Output
panel, just for testing purposes.
| | 03:05 | But what I need to do now is I need to
call this moveContent function, and I am
| | 03:09 | going to call it when I click on the homeClick.
| | 03:12 | So just below this trace statement, I am
just going to type in 'moveContent,' and I
| | 03:20 | am going to pass three
parameters into that moveContent function.
| | 03:26 | Those three parameters, again, are these three.
| | 03:29 | So I can take this 600, drop it
right in there, add a comma, take this
| | 03:36 | parameter, drop it right in there
as theYPosition, and then lastly, is
| | 03:41 | theRotation, so I need to take
theRotation, which just happens to be 0, and I
| | 03:47 | will drop that right in there.
| | 03:48 | All right, looking pretty good.
| | 03:50 | It's going to pass these
parameters into this function.
| | 03:53 | It's going to show me in the Output window.
| | 03:55 | And what I can do now is move this
content, these three Tweens, and I can just
| | 04:04 | select them all and move them right
up into that function right there.
| | 04:08 | I want to pass these parameters into
this moveContent function, and I want these
| | 04:14 | numbers to appear right here.
| | 04:19 | What I am going to do is I am just
going to take this, theXPosition, and I am
| | 04:23 | going to copy it and paste it right here.
| | 04:26 | I am going to take theYPosition,
because that's going to be its final
| | 04:31 | YPosition, and then theRotation, I am going to
take that and copy it and paste it right in there.
| | 04:37 | All right. So you can see I have basically
eliminated three lines of code from this
| | 04:41 | function and put them up in
this moveContent function.
| | 04:44 | What I am going to see is everything
is going to look the same, but my trace
| | 04:48 | statements will appear in the Output panel.
| | 04:51 | So I am going to do a Control>Test
Movie, and if I go to the About section,
| | 04:58 | everything looks good.
| | 04:59 | I am working with the Home button, so
if I click on it, it rotates back into
| | 05:05 | position, just as I expected.
| | 05:08 | And the Output panel, if I can show you
what that prints out, it gives me what's
| | 05:14 | in that trace statement, this X,
the Y, and then the Rotation.
| | 05:17 | So I will open that up. Sure
enough, this stuff matches up.
| | 05:20 | So it's working really well, but you are
really not seeing the true power of it yet.
| | 05:24 | I mean, you are probably thinking,
"Geez, it did this five minutes ago."
| | 05:28 | Well, let's start eliminating some of
this code, because I want to do the same
| | 05:32 | thing for these other functions when
these other buttons are clicked on.
| | 05:36 | So for the aboutClick, I
want to do the same thing.
| | 05:39 | It's the same function, this moveContent,
moveContent, and in there, it's going
| | 05:45 | to accept these three parameters.
| | 05:46 | So I am just going to drop in these
numbers, just like that, click and drag them
| | 05:53 | over, select them, drag them on over.
| | 05:56 | You can do it how ever you want,
but I am just doing a click and drag.
| | 05:59 | Make sure you have commas separating each one.
| | 06:03 | So that's looking pretty good, and this
is the fun part, because I get to delete
| | 06:07 | those three lines of code, and
I get to simplify everything.
| | 06:10 | I will even delete that comment.
| | 06:12 | So you can see my code
getting smaller and smaller.
| | 06:17 | And the nice thing is is this will
alleviate any errors, because there could be
| | 06:20 | some error right in here.
| | 06:22 | Well, since that's not going to exist
anymore, since these are all parameters
| | 06:27 | that are being passed into the
moveContent function, it doesn't matter that some
| | 06:34 | things might be misspelled, because
the less typing, the less lines of code,
| | 06:40 | probably the less errors there will be.
| | 06:42 | So it's looking pretty good so far.
| | 06:43 | The last one I am going to
do is the Portfolio button.
| | 06:46 | moveContent, these three, and lastly,
this rotation, drop that right in here,
| | 07:01 | and eliminate those three
lines of code. All right.
| | 07:05 | So definitely everything is condensed
down, and if I have these parameters
| | 07:09 | correct, I am going to make sure
I have my commas separating each.
| | 07:12 | Notice that I have three parameters for
this moveContent function, for each one,
| | 07:17 | that then gets passed into here,
and then these Tweens get used.
| | 07:21 | So this is going to work out quite well.
| | 07:24 | Let's just go ahead and test it out.
| | 07:27 | Clock on the About section, works like a charm.
| | 07:34 | Video section, works great.
| | 07:36 | Portfolio section, works great.
| | 07:39 | And then I can click back on John Doe.
| | 07:41 | And again, the great thing is is this
is really flexible, because if I want
| | 07:45 | to go in here and change some of this,
say, for instance, I want to change
| | 07:48 | this, instead of having a Regular
smooth transition, I can change that to
| | 07:53 | something else, like Bounce.
| | 07:54 | I don't have to change it in 12
different places. I can just change it in three
| | 07:58 | different places and then it will affect
all the transitions, and I can see that
| | 08:04 | there's this sort of jarring
bounce that happens with all of these.
| | 08:09 | I don't particularly like it, but again,
the nice thing is I can roll it back to
| | 08:15 | what it was, no problem, because I just
need to change it in these three places.
| | 08:21 | That's the power of making one function
and then just passing in the parameter,
| | 08:26 | the one item you want to change, and
then using it wherever you want to use it.
| | 08:30 | So the more you can simplify your code
this way, the better off you will be, the
| | 08:34 | more flexible your code will be,
and the less errors you will have.
| | Collapse this transcript |
|
|
4. Creating SectionsCreating web site sections| 00:00 | Now I would like to get into
creating content for these various sections,
| | 00:05 | because as you will notice,
nothing is in this area.
| | 00:08 | But I want to go ahead and create the
content, and what I have used to create
| | 00:12 | this content is Photoshop.
| | 00:15 | So in the Assets folder, in the design
folder, you will see three PSD files that
| | 00:23 | all pertain to the various sections.
| | 00:25 | So I am going to go ahead and
open those up with Photoshop.
| | 00:30 | And here are my three sections, already
designed out, I will just start with the About section.
| | 00:37 | Now, I notice that there is this text
layer, I want to import that text layer,
| | 00:42 | and I want to import just this simple
Blog button that just contains this shape
| | 00:47 | right here, and then also
contains this text here.
| | 00:51 | So that's my About section. I want to
import it, and I will start with that one first.
| | 00:57 | Again, I am just going to Save this
file, nothing tricky going on there.
| | 01:01 | But what I want to do is, in Flash,
I don't want to import the content
| | 01:06 | directly into this FLA file. I want
to create a new FLA file, a new Flash
| | 01:14 | file, and import that design,
| | 01:17 | because when the user clicks on this button,
I then want to load in that SWF separately.
| | 01:25 | So if I divide up the content this way,
it just makes it more manageable and
| | 01:30 | just easier to work with.
| | 01:31 | So I am going to create a new file, File>New.
| | 01:35 | It's going to be a new Flash File
(ActionScript3.0), select OK, so these are
| | 01:42 | my default settings.
| | 01:44 | But all I need to do is first Save
this file, and I will go ahead and save it
| | 01:55 | into Chapter 04, and I will
call this 'about.fla.' All right. Here I am.
| | 02:04 | If I click on Timeline, you can see
that there is nothing in this file, and now
| | 02:09 | I can go ahead and Import to Stage the PSD file.
| | 02:17 | And Assets/design/Section_About.psd,
select Import, and I get this wizard,
| | 02:26 | which is nice, because I want to
control how each layer is being imported,
| | 02:30 | starting with this top one.
| | 02:32 | This Text layer, well, I want
to import it as Editable text.
| | 02:36 | This Blog button, I do want to create
a movie clip for this layer, and if I
| | 02:42 | twirl that down, I want to make sure
this text is editable and that this is just
| | 02:47 | a Flattened bitmap image.
| | 02:49 | So in general, this is just
going to be one movie clip.
| | 02:54 | I don't need to import the background,
because the background is already
| | 02:58 | going to exist in the index file
that this file gets loaded up into, so I
| | 03:05 | will just uncheck that.
| | 03:08 | Down here at the bottom, I want to
place everything in its original position,
| | 03:12 | convert layers to Flash layers, and
then I want to set the stage size to the
| | 03:17 | size of the Photoshop canvas. Select OK.
| | 03:21 | The content gets imported, and I can just
change the color of the stage, the background.
| | 03:31 | You can see, there's my text.
| | 03:34 | Reads great, and I can always change
anything I want in here now, because this
| | 03:39 | is editable text, and then here's my button,
that is of course known as the Blog button.
| | 03:44 | So that is set up.
| | 03:46 | I will just Save this file.
| | 03:49 | And now I want to go ahead and open up
the next file, the Portfolio section.
| | 03:57 | Portfolio section has more going on.
| | 04:00 | In fact, if I turn off these layers,
just to show you this Thumbnail layer,
| | 04:04 | notice that it's going to
contain multiple thumbnails.
| | 04:08 | When you click on a thumbnail, a larger
image is going to load, and so will more
| | 04:14 | text pertaining to this image.
| | 04:16 | So that's how this
Portfolio section is going to work.
| | 04:19 | So I have done all the design work in Photoshop.
| | 04:22 | It's looking really good.
I will just Save the file.
| | 04:25 | I am going to go into Flash. Just like
I did for this About section, I am going
| | 04:29 | to create a New File, and I am going
to Save this file as portfolio.fla.
| | 04:41 | Now I am going to File>Import>
Import to Stage, this portfolio.psd file.
| | 04:50 | Select Import, and again,
I get similar settings.
| | 04:54 | I want to make sure my text is going to be
editable, in case I need to change it later.
| | 05:00 | This main image, I will just
leave as a Flattened bitmap image.
| | 05:04 | This thumbnail, I will leave
as a Flattened bitmap image.
| | 05:07 | And the background, again, I don't want
to import it because that background is
| | 05:11 | already in my index.fla file
that this gets loaded into.
| | 05:17 | And then just make sure you set the stage
size to the same size as the Photoshop Canvas.
| | 05:21 | Select OK, and there it is.
| | 05:24 | Everything gets positioned accordingly,
and I can see some text down here as well.
| | 05:30 | Again, I can always change that
background color to see anything else that I
| | 05:35 | might not see initially.
| | 05:37 | I will go ahead and Save this file.
| | 05:39 | Last section is going to be the Video section.
| | 05:42 | Again, this is in the same design folder.
| | 05:46 | I have these thumbnails. As you can see,
I am turning them on and off, and then
| | 05:52 | here is my VideoPlayer folder that
contains this video frame, and then just this
| | 05:58 | little Cross element, the design element.
| | 06:00 | So this is good to go.
| | 06:01 | I will just make sure it's saved.
| | 06:03 | I will go back into Flash and create
my New file, and I am going to Save this
| | 06:10 | file in the same folder, and I
am going to call this video.fla.
| | 06:13 | I am going to import this
file as well, video.psd.
| | 06:22 | So again, I am using this PSD file and I
am going to control its import settings.
| | 06:29 | The VideoPlayer, I am going to go ahead
and just create a movie clip for that layer.
| | 06:33 | This vidThumb1, well, I want to create
a movie clip for it, vidThumb2, create a
| | 06:39 | movie clip for it as well.
| | 06:41 | Lastly, uncheck that background, and
down here, I want to make sure both of
| | 06:46 | these are checked as well,
so the stage size changes.
| | 06:51 | Sometimes you will run into this.
| | 06:53 | It says one or more library
items already exist in the document.
| | 06:57 | I don't want to replace any existing
items, but what's happening is these two
| | 07:04 | files have the same name, and they
kind of want to overwrite one another.
| | 07:08 | So in general, Don't replace existing
items, if you ever get that warning,
| | 07:13 | select OK, and it looks like
everything is in place. This is great.
| | 07:18 | So this section is set up,
and I can Save it as well.
| | 07:24 | So those are my multiple sections all
set up as a separate file in Flash, and
| | 07:31 | when I select the appropriate button,
that's when I want to load in the
| | 07:36 | appropriate section, and that,
obviously, would be my next step.
| | Collapse this transcript |
| Dynamically loading sections| 00:00 | Now, I currently have four
different Flash files created:
| | 00:05 | the main Flash file and
then these different sections.
| | 00:10 | And what I want to happen is I want to,
when you click on a button, to load that
| | 00:15 | particular section in.
| | 00:18 | But I am not going to load in the FLA,
because this is the working file, I need
| | 00:22 | to load in its SWF file,
its Small Web Format file.
| | 00:27 | Now, I am just going to open up my about.fla,
and in order to make an SWF, I can
| | 00:32 | do it a number of ways, but the easiest
way is just to go down to Control > Test
| | 00:37 | Movie, because each time you test
a movie, it creates an SWF file.
| | 00:43 | So this is already generated, and I can
also see what it looks like, so this is
| | 00:47 | what I should expect when it
gets loaded into the index file.
| | 00:51 | Same thing for the portfolio.fla,
portfolio file in that folder, if I do a Test
| | 00:57 | Movie, it will generate that portfolio.swf.
| | 01:03 | And then the video.fla, if I do Control >
Test Movie, it will create this video.swf.
| | 01:10 | Now, just be mindful that the stage
background color is irrelevant, because
| | 01:16 | it's going to be actually transparent,
and it will actually show whatever's in
| | 01:22 | the index.fla file.
| | 01:24 | So this content is going to appear on
top of whatever is in this index.fla.
| | 01:31 | But again, I went ahead and I basically
published out three different SWF files.
| | 01:36 | If I go back to my Desktop, you can see
that these SWF files were generated, and
| | 01:41 | I need to make sure that they are in
the same location as this index.fla.
| | 01:46 | So they are in the correct location
and now I can open up the index.fla file.
| | 01:52 | So what I want to do now is I want
the sections to load in when you select
| | 01:59 | the appropriate button.
| | 02:00 | So I am going to go to the AS
layer, select that first frame.
| | 02:04 | I am going to go to Window, down to
Actions, and I can open up my Actions panel,
| | 02:11 | and here is all of my code.
| | 02:13 | So the first thing I am going to do is
just pin my code by clicking that little
| | 02:17 | Push-Pin icon, move this into place,
and now I can see what I want to happen.
| | 02:25 | So at this point in time for, say for
instance, the About button, when you click
| | 02:31 | on the About button, I want to load in,
and I will just type this in here, as I
| | 02:36 | comment, Load in the about.swf file.
| | 02:41 | And how I am going to do this is I am
going to use the UILoader component.
| | 02:47 | So I am going to just minimize the
Actions panel, and what I am going to do is
| | 02:54 | I am going to go ahead and create a New layer,
and I am just going to call this mainLoader.
| | 03:03 | This is all my main content for
that section. This is my mainLoader.
| | 03:07 | It's going to go right in here.
| | 03:08 | I am going to go to Window, down to
Components, and I am going to go ahead and
| | 03:16 | open up the User Interface components.
| | 03:18 | Now these components, I encourage you
to explore all of them, but they provide
| | 03:22 | additional functionality to your Flash website.
| | 03:25 | So whatever you want to use, check it
out and see if you can just maybe use one
| | 03:30 | of these items as opposed to creating your own.
| | 03:32 | Now, I don't want to write multiple
lines of code to load in my SWF file. What I
| | 03:37 | want to use is of course this you UILoader.
| | 03:39 | I am just going to drag that onto the
Stage, and I will close that Components
| | 03:45 | panel, and I will go ahead and, I will just
put him up here as well, upper left hand corner.
| | 03:53 | And with this UILoader selected, I am
going to go to Window and open up the
| | 03:57 | Component Inspector.
| | 04:00 | I just want to show that I need to
make sure this is set up appropriately,
| | 04:04 | because I don't want to scale
the content down to this size.
| | 04:08 | I want to change the scaleContent to false.
| | 04:12 | I don't want to load in
anything into this UILoader initially.
| | 04:17 | Only when you click that About button, do I
want to determine what the source file is.
| | 04:24 | But what I need to do is I need to
give this UILoader a specific name,
| | 04:29 | because remember, if I turn off this layer,
notice there's that UILoader in the background.
| | 04:34 | Well, I need to give this one a specific name.
| | 04:37 | So I will just call this sectionLoader.
| | 04:44 | Type that in the Properties panel.
| | 04:46 | And I am going to remember this.
| | 04:46 | In fact, I am going to do Ctrl+C to
copy it, and I am going to open up my
| | 04:51 | Actions panel, go back to where that comment
is and I am going to Paste in sectionLoader.
| | 04:59 | So for sectionLoader, set
the source equal to about.swf.
| | 05:06 | And again, I need to make sure this
about.swf is in that same folder, and it
| | 05:12 | definitely is. About is right there,
and it will get loaded in when you click
| | 05:18 | on the About button.
| | 05:21 | In theory, this should work.
| | 05:23 | Let's go ahead and test it.
| | 05:26 | If I click About, that content comes up.
| | 05:29 | So it's working perfect.
| | 05:31 | It's exactly what I want.
| | 05:33 | I am going to go ahead and do
that for the other sections.
| | 05:37 | If I was to do this for the other
sections, I would have to repeat this line
| | 05:41 | of code for each one, and I really want to
use the power of this moveContent function.
| | 05:50 | So currently, this moveContent
function, what it does is it sets theX,
| | 05:53 | theYPosition and then theRotation as
well, when really I want to do something a
| | 05:58 | little more advanced.
| | 06:00 | What I want to do is I want to add another
parameter, down here on the end, theSection.
| | 06:06 | theSection is actually going to be a string.
| | 06:11 | A string is just text.
| | 06:13 | It's going to now accept text as
opposed to a number, this last parameter is
| | 06:18 | going to accept text.
| | 06:20 | So for this About button, this is
the text I want to pass in into my
| | 06:28 | moveContent function.
| | 06:30 | So just after the X, Y Position, and
theRotation, I want to add a comma and I am
| | 06:36 | just going to move this
right up in here. All right!
| | 06:38 | There is my string that gets passed into
that function, and it's now known as theSection.
| | 06:48 | But what I also need to do is I need
to move this sectionLoader property as
| | 06:53 | well, and I need to move it right
up into that moveContent function.
| | 06:58 | So let's just scroll down.
| | 06:59 | Notice I dragged it up, and I want you
to just be aware of where this last curly
| | 07:04 | brace is, because it needs to be
below sort of bookmarking this function.
| | 07:09 | It needs to start with a curly brace
and then end with a curly brace, and now
| | 07:15 | I can go ahead and just tab that in,
sectionLoader.source is now equal to theSection.
| | 07:21 | So I will just Copy that
and Paste that right in here.
| | 07:28 | So that's looking pretty good.
| | 07:29 | I have moved that up.
| | 07:32 | And let me just even remove
that comment, and do a Test Movie.
| | 07:39 | And it does break, and
that's what this is doing.
| | 07:42 | And I am glad this came up, because it
gives me a chance to show you the error.
| | 07:48 | So right in here, I can see that it
tells me exactly what line the error is
| | 07:54 | happening, and it says, You know what?
Hey, there is an incorrect number of
| | 07:59 | arguments," also known as parameters.
| | 08:01 | There is an incorrect number of arguments.
| | 08:03 | It's expecting 4, but there's 3.
| | 08:07 | And what's great about the Compiler
Error panel is, what I can do is I can
| | 08:13 | just double-click on that error and it takes
me right to that line of code that's broken.
| | 08:19 | So the reason it broke is because it's
looking for four parameters, but these
| | 08:26 | other buttons, there is only three.
| | 08:27 | So it's saying, "Hey, I am
expecting four and you gave me three."
| | 08:30 | Only in one case do I have four.
| | 08:32 | So what I need to do, and the great
thing about this is it gives me the
| | 08:36 | opportunity, to load in the other sections.
| | 08:39 | So let's start with this video button,
add a comma, and then in quotes, I want
| | 08:45 | to type in "video.swf."
| | 08:49 | Down here at the bottom, for the portfolio
button, add a comma, type in "portfolio.swf."
| | 08:58 | portfolio.swf, the video.
swf, and then the about.swf.
| | 09:02 | Now, if I can reference this error again,
remember, I have to put 4 arguments in
| | 09:08 | there, and for the home section, I
don't need to load any other content.
| | 09:13 | So I can just add a comma, and
then I could just type in null.
| | 09:16 | Null is just a word meaning nothing.
| | 09:19 | It says, "Hey, you know what? I am
just a filler, don't break the code.
| | 09:23 | I don't need to be anything, so
don't worry about me," is what it's saying.
| | 09:25 | So everything seems to look good,
and I can go ahead and check my syntax.
| | 09:31 | And sure enough, it clears
out my Compiler Errors.
| | 09:35 | It says my script contains no errors.
| | 09:37 | I am getting pretty hopeful now.
| | 09:39 | Let's do a Test Movie.
| | 09:40 | Here is my SWF file.
| | 09:43 | If I click About, that's great.
| | 09:46 | It loads in the About content.
| | 09:47 | Let's click Video.
My Video content gets loaded in.
| | 09:51 | If I click Portfolio,
there is my Portfolio content.
| | 09:56 | So it's all looking really good.
| | 09:59 | For the most part, this is all squared
away, and again, what I am doing is I am
| | 10:05 | creating these SWF files and then
they all get loaded into this main file.
| | 10:12 | And the reason I want to set my site up
this way is because it doesn't force the
| | 10:17 | user to wait for all this content to
download in order for them to see your
| | 10:23 | site, but you are only loading in the
content that they are interested in.
| | 10:27 | So if they click on the Portfolio
button, that's when they get the Portfolio
| | 10:32 | information, all that content.
| | 10:34 | So at the end of the day what it means
is your initial size of your website is
| | 10:40 | going to be pretty small.
| | 10:42 | So it's only going to be like 25K.
| | 10:44 | And then when they select their
individual sections, that's when it will load in
| | 10:48 | that appropriate content.
| | 10:50 | So this is a really smart way to set
up a site, and it's also very flexible,
| | 10:54 | because now if I need to edit any of the
portfolio content, I can jump right to that file.
| | 10:59 | I don't have to worry about
messing with any of the other files.
| | 11:02 | So it's really flexible that way,
and it's really user-friendly as well.
| | Collapse this transcript |
| Linking to web sites and email addresses| 00:00 | Loading in SWF Content is fairly
easy using the UILoader component,
| | 00:05 | but what if you want to
link to content on other sites?
| | 00:08 | Well, this can be done a number of ways.
| | 00:11 | And I need to do it in this about.fla file.
| | 00:15 | So if I open that up, you can see that
I've text in here, and quite frankly,
| | 00:21 | you're probably going to have some text that
you want to link out to a place on the Web.
| | 00:27 | Say, for instance, if I just select
this word, 'Adobe,' and I want this to link to
| | 00:32 | Adobe systems site, I can select that
word and in the Properties panel, down
| | 00:37 | right under Options, twirl that down, if
it's not already open and in the Link
| | 00:43 | field, you can go ahead and
type in http://www.adobe.com.
| | 00:51 | Now if I want to open up a new
browser window, I can select _blank.
| | 00:57 | That way it keeps them on my site,
but also serves up the information that
| | 01:01 | they're after on Adobe's site.
| | 01:03 | So that's done and that
word is still highlighted.
| | 01:06 | And probably what you're going to want
to do is make it look different, so it
| | 01:09 | looks like a link, so it stands out more.
| | 01:12 | Currently, most of my buttons are red and
that's kind of my signature color for this site.
| | 01:16 | I'll change the color of that to red as well.
| | 01:19 | Well, what about email addresses?
| | 01:22 | Well, right down here, I have an email address.
| | 01:25 | And I want this link to
link to john@johndoe.com.
| | 01:29 | So I am going to select that text and in
the same area under Options in the Link
| | 01:35 | field, I can type in mailto: john@johndoe.com.
| | 01:44 | Just like in HTML you do it the same way.
| | 01:47 | It's pretty simple, just hit Return.
| | 01:49 | I won't worry about the Target at all,
but that's set up and the last thing I need
| | 01:54 | to do for that is change
the color to red. All right.
| | 01:57 | It's looking good so far, so let me
just do Ctrl+Test Movie and if I click on
| | 02:04 | Adobe, it opens up Adobe's site. Great!
| | 02:09 | Close that. You see email.
| | 02:12 | If I click on that email link, it will
open up my default email client with that
| | 02:19 | email address in the To field and I can
type whatever I want, since they'll be
| | 02:25 | emailing John@johndoe.
| | 02:27 | It's done that easily and I'll close that.
| | 02:31 | Well, what about your own
sort of standalone button?
| | 02:35 | What if it's not text in a sentence?
| | 02:37 | Well, I need to do that a little bit
differently, because I need to set this up
| | 02:40 | as a button, give it an instance
name and then do a navigate to the URL.
| | 02:47 | So I'm going to close that SWF and I'm
going to open up the Timeline panel and
| | 02:54 | I'm going to select New layer.
| | 02:55 | I'm going to change this layer name to AS,
because my ActionScript is going to go here.
| | 03:02 | Now the first thing I need to do is
select this item and currently, it just says
| | 03:09 | it's an instance of a Blog button,
but it's really just a Movie Clip.
| | 03:12 | Well, to be honest, I want to
make this actually a button.
| | 03:18 | Okay, so I'm just going to
go ahead and do a Modify.
| | 03:23 | I'm going to do a Convert to Symbol.
| | 03:25 | It's the equivalent of just dragging it
into my Library, but I'm going to do a
| | 03:29 | Convert to Symbol and then, I can type
in 'blog' and I'm going to make sure this
| | 03:36 | is a Button, and select OK. All right.
| | 03:40 | So this is now a Button.
| | 03:42 | So just to confirm in my Properties panel,
it says that it's a button and I need to
| | 03:46 | give it an instance name,
blog_btn, just like that.
| | 03:50 | I want to remember this name, so I'm
just going to do a Command+C to copy it,
| | 03:55 | copy that instance name.
| | 03:56 | Now I'm going to go to
that layer I have created.
| | 03:59 | I'm going to select that first frame.
| | 04:01 | I'm going to go to Window
and open up my Actions panel.
| | 04:04 | Now right in here, this is
where I'm going to write my code.
| | 04:07 | So just a comment, Link to website, I'm
going to paste in blog_btn and I'm going
| | 04:16 | to add an EventListener, just like I've
done in the past, MouseEvent, I'm going
| | 04:23 | to listen for the CLICK and then it's
asking me for another parameter, which I'm
| | 04:29 | going to put in visitSite.
| | 04:33 | So that's the name of the function that is
going to be called when they click on this button.
| | 04:39 | So visitSite. All right.
| | 04:41 | Now I need to make this function,
function visitSite, and it's going to accept
| | 04:49 | a MouseEvent and then I'll just type in void,
because it's not going to return to anything.
| | 04:57 | But this is the basic structure for any
function and it's looking good so far.
| | 05:01 | But right in here, within these two
curly braces, this is where I want to put a
| | 05:07 | URL request and then a navigate to URL.
| | 05:10 | So I need to create a
variable called req or request.
| | 05:15 | It could be called
anything you want it to be called.
| | 05:18 | Just remember the name and I
want this to be a URLRequest.
| | 05:23 | So I'm creating a variable
| | 05:25 | that is a URLRequest and it's a new URLRequest.
| | 05:34 | And you know it's correct, because it
will change colors usually to that blue
| | 05:38 | and then you can go ahead
and type in your URL.
| | 05:46 | That's this blog so - all right.
| | 05:48 | There we have it, a new
URLRequest I've just created.
| | 05:53 | So within this container
called req, exists this URL.
| | 06:00 | Now I can use that wherever I want,
| | 06:02 | but really the only place I
need to use it, currently, is in the
| | 06:05 | navigateToURL function.
| | 06:11 | So I'm going to create this call to this
function, called navigateToURL, and I'm
| | 06:15 | just going to say req for request.
| | 06:18 | So that's my variable and then I can
do a comma and if you want, you can also
| | 06:23 | type in _blank within quotes and
that will open up a new web page.
| | 06:30 | So let me just get rid of this last line.
| | 06:33 | So that's how it's done,
| | 06:34 | to sort of create a container that's
going to contain that URL and then just
| | 06:39 | put that variable into the
navigateToURL function call is what it is, and then
| | 06:45 | make sure it opens up in a new window.
| | 06:47 | Now let's do a Ctrl+Test Movie.
| | 06:50 | These buttons I know it'll work,
these links, but let's check this one out.
| | 06:54 | Click Visit Blog and sure enough, it opens
up my personal blog in your default browser.
| | 07:02 | So, it works out great.
| | 07:03 | Pretty simple to do for the most parts.
| | 07:06 | And really, it's again, all back to
EventListeners and then just adding a
| | 07:12 | navigateToURL that passes
in that certain URL Request.
| | 07:17 | And that's really how you link to a
content that exists outside of your site.
| | Collapse this transcript |
|
|
5. Creating a PortfolioSetting up a portfolio| 00:00 | The first thing you want to do when
creating a portfolio is to figure out the
| | 00:04 | design and how it will function.
| | 00:06 | Then you can focus on
the best way to execute it.
| | 00:08 | So I'm going to go to the Portfolio section.
| | 00:10 | And as you can see, there is a large
image in the center and then supporting
| | 00:15 | text just beneath it.
| | 00:16 | There is also the thumbnails, the small
images below that as well, and when you
| | 00:23 | select a thumbnail, it will load in
the upper area and so will that text.
| | 00:29 | So that's what I want to do, but I
want to be smart about how I develop this,
| | 00:33 | because I want all of these images to
be outside of the SWF file, because if
| | 00:40 | they are embedded, then this
file is going to be really large.
| | 00:43 | So what I want to do is make sure,all
of these images are outside of the SWF
| | 00:48 | and then they get loaded in.
| | 00:49 | So what I'm going to do is I'm going
to have a UILoader component that's
| | 00:53 | going to load in the large image and then
write some code to load in the small images.
| | 00:58 | All right.
| | 01:00 | So the first thing I need to do is
identify the images I want to use.
| | 01:04 | So I'm going into these Exercise
Files/Assets, into the design folder,
| | 01:10 | into portfolio and I'm going to take a look
at the large folder and the thumbs folder.
| | 01:17 | And these are the images I want to use.
| | 01:20 | I have large JPEGs in here, and then thumbs
that match up perfectly in the thumbs folder.
| | 01:27 | So all I need to do is copy those folders and
put them in the current folder I'm working in.
| | 01:34 | 05/01 begin and I'm going to
create a new folder called portfolio.
| | 01:45 | And I'm going to paste both of
those folders in there. All right.
| | 01:47 | I'm going to start with the UILoader component.
| | 01:50 | That's going to load in this basketball.jpg.
| | 01:53 | So I'm going to go to my portfolio.fla
file and here is my large image that I
| | 02:00 | want to replace, so I'm just going to
delete that image and what I want to do is
| | 02:05 | replace it with a component.
| | 02:08 | So Window>Components and I want to
select the UILoader component and just drag
| | 02:15 | it right on to the stage.
| | 02:17 | Now I can go ahead and resize it.
| | 02:21 | So I'm going to just zoom out by
holding down the Command+Minus to zoom out and
| | 02:27 | now I can start to scale this out.
| | 02:30 | So what I've done there is I've hit the Q key.
| | 02:32 | If you hit Q, that will select your
Free Transform tool, allowing you to scale
| | 02:41 | and adjust the size of this item.
| | 02:44 | Another way to do it is just to use,
of course, your Properties panel.
| | 02:48 | So the height I want to be about 400
pixels and then the width can be wider.
| | 02:54 | But I definitely don't want my
UILoader component to be too large, as far as
| | 02:59 | the height, because it does
say portfolio here at the top.
| | 03:03 | So I'll just kind of position it right
there and then make sure this text, if I
| | 03:08 | select my Selection tool, and this text
is underneath that UILoader component.
| | 03:14 | And I'll just use my arrow keys to fine tune it.
| | 03:17 | So, it looks good so far.
| | 03:19 | Here is my UILoader component, and
what I want to do is I want to load in
| | 03:24 | that basketball.jpg.
| | 03:25 | So I'm going to go to Window down to
Component Inspector and in the source
| | 03:29 | panel, I'm going to type in portfolio,
because inside of that portfolio is a
| | 03:36 | large folder and inside of there is
the basketball.jpg, just like that.
| | 03:44 | I have mapped it directly to that source.
| | 03:47 | And I do want to scale the content and
that's why I like the UILoader component,
| | 03:51 | because regardless of the size of your
portfolio piece, it will always scale it
| | 03:56 | down so it fits within this area.
| | 03:59 | I made it extra wide in case, I
have sort of more of a panoramic image,
| | 04:03 | but that should do the trick.
| | 04:05 | In fact, I'll just do a Test Movie,
and yup, just like I expected, the image
| | 04:10 | loads in and everything is looking great.
| | 04:13 | Okay, so the next thing I want
to tackle are these thumbnails.
| | 04:16 | So I'm going to create an all thumb
thumbnails movie clip and inside of that movie
| | 04:23 | clip, I want to start loading in
the different little thumbnails.
| | 04:26 | I'm only going to do two right now, but
in general, that's what I want to pull off.
| | 04:31 | I'm going to close that SWF file,
close that Component Inspector and
| | 04:38 | Command+Plus will allow you to zoom in.
| | 04:40 | So I really want to focus in on this.
| | 04:45 | And this is going to be
my all thumbs movie clip.
| | 04:48 | So I'm just going to click and drag that
into the Library, and I'm going to call
| | 04:51 | this allThumbnails, because it's
going to contain all of the thumbnails.
| | 04:57 | And I'm just going to make it a
Movie Clip for the Type and select OK.
| | 05:03 | And I'll even give it an instance name,
allThumbnails, which I will use in a second.
| | 05:12 | Now what I'm going to do is I'm going
to double-click on this, and this large
| | 05:16 | graphic, you know what? I don't need it.
| | 05:18 | In fact, I'm going to load in all these images.
| | 05:20 | So I'm just going to delete that altogether.
| | 05:23 | Now let's go back to Scene 1, and now
what this serves as is a positioning item
| | 05:30 | for all of my thumbnails.
| | 05:31 | So wherever I move this is
where all my thumbnails will appear.
| | 05:35 | Okay, now I can go ahead and write
some code that will pull in a thumbnail.
| | 05:42 | So I'm going to take a
look at my Timeline panel.
| | 05:44 | I do see this layer 1, which I just
don't need. I'll hit the Trash can to
| | 05:48 | throw it away and create a new layer at the
top and I'll just call it AS, for ActionScript.
| | 05:54 | I'm going to select that first frame and I'm
going to go Window down to Actions. All right.
| | 06:01 | I am going to pin my code.
| | 06:03 | I want you to get in the habit of
pinning your code, so it doesn't move,
| | 06:06 | regardless of what you have selected.
| | 06:08 | And now, I can go ahead and type in what
I need to type in, because I want to go
| | 06:12 | ahead and create a new
Loader from the Loader Class.
| | 06:16 | So, in fact, I'll type in a
comment, LOAD THE THUMBNAILS. All right.
| | 06:24 | That's just a comment for me,
| | 06:27 | so I know what I'm going to do. var, I
am going to create a variable or a box,
| | 06:31 | if you will, called
thumbLoader. It's of the type, Loader.
| | 06:40 | It's using the Loader class.
| | 06:42 | So it's basically creating an
instance of this Loader class.
| | 06:48 | So there is functionality
in here that I can use now.
| | 06:52 | I'll show you what I mean in a second,
because with the thumbLoader, I want to
| | 06:59 | go ahead and load in the
request. So new URLRequest.
| | 07:08 | That turns blue. That's a good sign,
because I'm typing that correctly, portfolio
| | 07:13 | and inside of that portfolio folder is
the thumbs folder and then, in there is
| | 07:19 | the basketball.jpg, the small version.
| | 07:23 | End that quote. Close that with a
parenthesis and I need to close it with another
| | 07:31 | parenthesis and then end with a semicolon.
| | 07:34 | So anytime I have an open
parenthesis, I need to close it down as well.
| | 07:38 | So always make sure these match up.
| | 07:40 | That's a common error is sometimes you
won't have, say, both of them at the end.
| | 07:45 | So that's what it's going to load
in and what I'm going to type next is
| | 07:50 | thumbLoader.contentLoaderInfo.
I'm going to add an EventListener.
| | 07:57 | It's going to listen for an Event COMPLETE.
| | 08:07 | So once that image has been fully
loaded in, fire off this function
| | 08:12 | called thumbLoaded.
| | 08:17 | Just like that, I'll create the
function, thumbLoaded Event, and just be
| | 08:28 | mindful that this word needs to match
up with this word, but that's the type
| | 08:33 | of method that we're using.
| | 08:37 | And then void, open curly brace, closing
curly brace and now I can go ahead and
| | 08:44 | type in what I need to type in.
| | 08:45 | So I'm going to go ahead and add the
thumbnail to the allThumbnails instance.
| | 08:55 | So remember how I named that earlier?
If I just minimize this by clinking in
| | 09:00 | that gray bar, right down here this
little dot if I select it allThumbnails,
| | 09:05 | that's what I'm referencing.
| | 09:06 | So I'll open up my Actions panel because
for the allThumbnails, I want to addChild.
| | 09:16 | So I'm adding a Child and all that
means is I'm just going to go ahead and
| | 09:20 | attach this thumbLoader content, whatever it is,
| | 09:25 | in fact, I'll just copy that word and
I'm going to paste it right in here.
| | 09:30 | It's going to add whatever content this has to
the allThumbnails, so right where that dot is.
| | 09:38 | So let me go ahead and do a Test Movie.
I can see,sure enough, there is the
| | 09:44 | little thumbnail. It loads in the correct
spot and everything is looking great.
| | 09:48 | And I'm just going to do a little clean up now.
| | 09:50 | I have plenty of spaces in here,
some line breaks, I'll just go ahead and
| | 09:54 | condense this down, because
this loads in one thumbnail.
| | 09:58 | And in essence, what I've
created is my own UILoader component.
| | 10:02 | So it's definitely really cool and
this is actually more flexible as well,
| | 10:07 | because I can control
different properties of it.
| | 10:09 | But if you want to load in another one,
what you can do is copy that code, paste
| | 10:15 | it just below and you might
call this one thumbLoader2.
| | 10:20 | So thumbLoader2, I'm going to change
that name everywhere, thumbLoaded2.
| | 10:24 | So I just went in and changed
the name of that function as well.
| | 10:31 | And for thumbLoader2, I want to
load in another image, cafebuena.
| | 10:37 | That's another image in this folder right here.
| | 10:42 | So it's going to place it right
on top of my basketball image.
| | 10:47 | So I really don't want that.
| | 10:49 | What I want to do instead is
thumbLoader change it's x position = 100.
| | 10:58 | So move it over 100 pixels,
so it's not on top of this one.
| | 11:03 | That's all I need to do.
| | 11:04 | I can check the syntax and it says all the
code looks good, and let's do a Test Movie.
| | 11:12 | And as you can see, I don't see it right now.
| | 11:15 | So there is obviously a problem and
since it didn't throw an error, I know it's
| | 11:21 | an issue with one of my instance names.
| | 11:24 | And what's happening is I've change
this to thumbLoader in most places,
| | 11:30 | except for right here.
| | 11:31 | So right here, thumbLoader2
is where you need to add it.
| | 11:35 | And I point that out because if Flash
doesn't throw an error, it's probably an
| | 11:39 | issue with your instance names.
| | 11:41 | So if I change that to thumbLoader2,
I do a Test Movie, I can see cafebuena
| | 11:48 | loads in, basketball loads in right there.
| | 11:50 | So they are both loading in and it
looks pretty good and even right here, these
| | 11:56 | are kind of changing places, but I can
go ahead and type in 2 there and I will
| | 12:03 | run this one more time, just by hitting
Command+Return, I can see that they are
| | 12:08 | in their appropriate places.
| | 12:09 | So again, all this content is now
external from the Flash file, making this
| | 12:14 | initial file size really small and then
you'll see the content start to load in.
| | 12:19 | Now I can start to add many different
thumbnails down here if I want to, but all
| | 12:24 | that content is external.
| | 12:25 | It makes my initial file size small
and it just serves up content faster to
| | 12:29 | the user.
| | Collapse this transcript |
| Adding functionality to thumbnails| 00:00 | Once you have your buttons in place,
you can begin to work on what happens when
| | 00:04 | these buttons are selected, or
when these thumbnails are select.
| | 00:09 | So when you click on a Cafe buena
thumbnail, I want to load that image into this
| | 00:15 | large area, and then
replace the text to down here.
| | 00:19 | So I am going to jump into
my portfolio.fla, and
| | 00:23 | I am going to select that ActionScript,
that first frame there, and I am going to go
| | 00:29 | to Window and open up my Actions
panel, and I am going to pin my code by
| | 00:34 | pressing that button there.
| | 00:36 | So here I have my code, which
loads in that Thumbnail image for the
| | 00:42 | basketball.jpg and the cafebuena.jpg.
| | 00:46 | What I need to do is add another
EventListener in here and I need to add an
| | 00:54 | EventListener that listens for the click,
| | 00:56 | But I need to do that once this
thumbnail loader is created.
| | 01:01 | So I actually need to make it right
inside of this thumbloaded function.
| | 01:07 | So right in here, I'll just hit
Return a couple of times, just before that
| | 01:11 | closing curly brace, I
need to add an EventListener.
| | 01:14 | So thumbLoader.addEventListener. If it
highlights for you, you can hit Enter and
| | 01:25 | it will add it, keep you from
typing that whole word there.
| | 01:29 | You can type in MouseEvent, because
I am going to listen for MouseEvent,
| | 01:33 | specifically the CLICK method.
| | 01:37 | So when it's clicked on, it's
going to fire off this function
| | 01:40 | called LoadMainImage.
| | 01:44 | There is my function call for
LoadMainImage. Now I need to create that function,
| | 01:49 | LoadMainImage and I am going to be
loading this image multiple times.
| | 01:59 | So I am going to need to do the same
thing down here, so what I think I am going
| | 02:03 | to call this is LoadMainImage1, because
there is going to be multiple functions.
| | 02:09 | So, LoadMainImage1 event
colon, MouseEvent is what it's expecting.
| | 02:18 | So I need to make sure these two words
match up, and this function is going to
| | 02:24 | be void. Just so you know what void
means, sometimes you'll have say an
| | 02:29 | add function that passes out may be two
numbers that were added together, so it
| | 02:34 | might pass back out that number.
| | 02:36 | Void means it's not going to pass any content,
or any text, or any code outside of the function.
| | 02:42 | It's all just kind of happen inside of it.
| | 02:45 | Open curly brace, close curly brace
and within this LoadMainImage1, this
| | 02:51 | is where I want to add code, just to do
what I want it to, when this button is clicked.
| | 02:56 | So I need to reference this large
UILoader component. It's pretty large, so in
| | 03:06 | my PROPERTIES panel, what
I'll call it is largeUILoader.
| | 03:10 | I just need to remember this instance name.
In fact, I'll do a Command+C to copy it.
| | 03:19 | I am going to go back into my code, and
paste largeUILoader that instance name.
| | 03:26 | I am going to change its source=
portfolio/large/basketball.jpg, just like that,
| | 03:41 | semicolon at the end.
| | 03:43 | Now I can go ahead and use this
EventListener for thumbLoader2, so I am going to
| | 03:51 | copy these four lines, the
EventListener and also the function.
| | 04:00 | I am going to paste it down
inside of this thumbLoaded2.
| | 04:06 | So addEventListener, Mouse Click.
| | 04:08 | It's going to give me an error if I
don't change this function here, because I
| | 04:13 | want to have a LoadMainImage2 function.
| | 04:16 | So this is the call to this function,
so I need to change it here as well.
| | 04:21 | Then I want to load in a different
image when this button is selected, and this
| | 04:26 | is the cafebuena.jpg image, just like that.
| | 04:31 | Notice as you start to nest functions
within functions, things get a little
| | 04:35 | crazy. In fact, you could have things
indented more than once, and it's not a
| | 04:40 | big deal to have multiple
spaces before or after Lines,
| | 04:44 | but what you can always do is click
this Auto Format button, right next to
| | 04:49 | Check syntax button.
| | 04:51 | If I click that button, it's going
to line everything up accordingly.
| | 04:55 | So everything looks cleaned up, it kind
of formats everything nice and neat, and
| | 05:01 | just makes it little easier to read,
so now I know what's inside of this
| | 05:04 | function, for instance.
| | 05:05 | I am going to go ahead and
test this movie. All right.
| | 05:11 | Everything looks as expected, but let me
come down here and click on Cafe buena,
| | 05:17 | and I don't get anything,
but I do get a Flash for this.
| | 05:21 | So I am going to take a look at that
Cafe buena, and right in here, since it
| | 05:26 | didn't throw an error and it wasn't
working, well I need to check the instance
| | 05:31 | name, so I need to change that to thumbLoader2.
| | 05:32 | Now I am going to do a Control >
Test Movie. If I click the cafe buena,
| | 05:38 | it changes, so be aware of your instance
names. If I click back, that changes as well.
| | 05:44 | First thing I noticed is I don't have
the little hand cursor. Quite frankly, I
| | 05:49 | need to use that hand cursor.
| | 05:52 | I need to have this movie clip work like
a button, so I need to activate that hand.
| | 06:00 | So what I am going to do is create a
new line, and for the allThumbnails, I'm
| | 06:07 | going to change this movie clip.
| | 06:09 | It's buttonmode=true.
| | 06:13 | So now it's going to work like a button.
| | 06:15 | It's going to give me the hand that I need,
so I know that those thumbnails are clickable.
| | 06:19 | I can take this and I can copy it and
use it wherever I want, for any movie clip,
| | 06:24 | but I am just going to go
ahead and test this movie.
| | 06:28 | As I roll over either one of these, I
can see that I get the hand and now users
| | 06:33 | know that these are clickable, and it will
load in the correct information. All right.
| | 06:38 | Now what I need to do next is I need to
change this content down here as well.
| | 06:42 | So right now this is just a Static Text.
I need to change that, so I am going to
| | 06:46 | select this text field and
then in the PROPERTIES panel,
| | 06:50 | I want to change this from
Static Text to Dynamic Text.
| | 06:54 | So Dynamic Text means it's going to
change at some point in time, and when I
| | 06:59 | select that, I get the
opportunity to give it an instance name.
| | 07:03 | So I'm just going to call it something
simple like selectedTitle, because that's
| | 07:11 | going to be whatever was
selected is going to appear right in there.
| | 07:14 | And then for this text field right here,
I am going to change that to Dynamic
| | 07:18 | Text, and I am going to change this
to selectedDescription, so that's going
| | 07:25 | to be a description.
| | 07:26 | I am going to minimize that LIBRARY
panel, and just to show you what also you
| | 07:31 | need to do, because down in here for
the various PARAGRAPH options what I need
| | 07:38 | to do is I need to change the Behavior.
Instead of it being Single Line, I might
| | 07:43 | need this to be MultiLine.
| | 07:43 | So if you have a lot of text, I need
to make sure it wraps to the next line.
| | 07:50 | I'll even expand that out more, but
notice you also have the ability to make
| | 07:54 | the text Selectable. If you want you
can turn that on or off, or you can even
| | 07:59 | Render text as HTML.
| | 08:02 | Because I could have HTML text in here,
so I can make a word bold if I want to.
| | 08:07 | But in general, that's looking pretty
good, and notice what it does visually.
| | 08:10 | It gives me these dotted lines for these
text fields, an indication that they are
| | 08:14 | Dynamic Text fields.
| | 08:16 | But I needed to keep in mind selected
title and selected disk are the instance
| | 08:21 | names, and for this first image I can
go ahead and when that image is selected,
| | 08:27 | go ahead and change the selectedTitle,
its text property=whatever I want that
| | 08:35 | text to be, and I'll just type in Basketball.
| | 08:40 | And for the selected
Description, change its text property to
| | 08:47 | Basketballdescription,
whatever you want that to be.
| | 08:52 | So for the sake of time, I'll just do that.
| | 08:56 | I want to do the exact same thing for
the other buttons, so I am going to Copy
| | 09:00 | these two lines and paste them right in here.
| | 09:03 | Of course, I am going to change
the text to Cafe -
| | 09:09 | There we are, something
like that. Keep it simple, and we are
| | 09:19 | looking pretty good.
| | 09:20 | So again, I might want to click
Auto format and Check syntax tells me
| | 09:26 | everything looks good, and then I'll
click Test Movie, so I can change these
| | 09:31 | default values right in here.
| | 09:34 | But notice that when I click on Cafe
buena. it changes those two text fields,
| | 09:40 | It also changes it back to say
whatever the Basketball description is.
| | 09:44 | It works both ways. So, sure enough,
the site is set up and it's ready to go.
| | 09:49 | I can add multiple thumbnails if I want to,
and they'll all follow the same format.
| | 09:56 | But it's really just a matter of
adding an additional EventListener that
| | 10:01 | listens for a CLICK that then
changes various properties of elements that
| | 10:06 | already exist on your stage.
| | Collapse this transcript |
| Allowing for unlimited thumbnails| 00:00 | So here is my portfolio as it stands right now.
| | 00:03 | I have two thumbnails and what I'm
going to want to do is I'm going to start to
| | 00:07 | add more thumbnails on down the line,
until they actually go off the screen, and
| | 00:12 | then I want to add a scroll pane
component, so I can scroll those images.
| | 00:18 | What this allows for is an unlimited
number of images for your portfolio.
| | 00:22 | So I'm going to go into the code,
this first frame of the AS layer, and I'm
| | 00:27 | going to go to Window>Actions, and
right in here, you can see that I have the
| | 00:34 | current two thumbnails.
| | 00:35 | All I'm going to do is just paste
in code for a total of ten images.
| | 00:41 | I'll just review how these
change from thumbnail to thumbnail.
| | 00:45 | As you can see,
thumbLoader2 moves over 100 pixels.
| | 00:52 | So this thumbLoader3, I had to create.
| | 00:55 | Again, give it an instance name,
and it moves over 200 pixels.
| | 01:00 | So it's not on top of the previous one.
| | 01:03 | Not only that, I've changed the
thumbnail image, the large image, and then the
| | 01:08 | content that goes in the text fields.
| | 01:11 | So that's what happens for each one.
| | 01:12 | It's a matter of changing the instance name,
the JPEGs, and then the functions as well.
| | 01:19 | So that's kind of how it goes on down
the line, and make sure you just change
| | 01:23 | the instance names from one to the next.
| | 01:26 | So I'm going to run this, just so
you can see all of the various images.
| | 01:29 | There they all are.
| | 01:31 | You can tell that, actually,
it does start to run off.
| | 01:34 | If I expand that out,
| | 01:36 | you can see this street trends image,
which the user just wouldn't be able to get to,
| | 01:41 | not unless I add a way to scroll to it, but
otherwise, all of these are working just fine.
| | 01:48 | So I'm going to go ahead and
add a UIScrollBar Component.
| | 01:52 | So let me close that Actions panel, but
before I do, I'll just pin the code to it.
| | 01:59 | It does stay up when I open it back up.
| | 02:01 | What I want to do is go to
Window, down to Components.
| | 02:06 | In my Components panel, I want to
select this ScrollPane component.
| | 02:11 | So I'm just going to scroll down the page,
and click and drag this on to my stage.
| | 02:16 | Now I can close that panel.
| | 02:18 | From here, what I can do
is I can start to resize it.
| | 02:21 | In fact, I can use the Free Transform tool.
| | 02:25 | I'll double click on that center point,
just to move it to the upper left-hand corner,
| | 02:29 | so I can scale it out appropriately.
I can go ahead and scale that out and do
| | 02:34 | a Command+Minus to zoom out some, and I can
start to position this in its appropriate place.
| | 02:40 | I could even use my arrow keys to
adjust it, but in general, it's going to just
| | 02:44 | exist at the base of this
page, kind of like that.
| | 02:47 | That looks pretty good.
| | 02:49 | For the most part, it's set up.
| | 02:52 | What I need to do is I need to give it
an instance name, so I can reference it
| | 02:56 | in my Actionscript.
| | 02:58 | So with this component selected in the
Properties panel, I am going to give it
| | 03:02 | an Instance Name of myScrollPane.
| | 03:06 | All right, myScrollPane. So I'm going to
go ahead and do a Command+C to copy that.
| | 03:11 | Now let me go into my Actions.
| | 03:16 | That's that first frame, and what I
want to do is I want to go ahead and attach
| | 03:22 | all of these thumbnails to myScrollPane.
| | 03:26 | So at the very top of your code, just
paste in myScrollPane, so that's the
| | 03:31 | instance name, and I want to set
the source equal to allThumbnails.
| | 03:38 | So all the thumbnails that are in
there, just copy that and paste it.
| | 03:42 | That's what's going to go in
the source for the myScrollPane.
| | 03:44 | So, it's going to go ahead
and attach appropriately.
| | 03:48 | So let's do a Control>Test Movie, and
what I'm going to do is I'm going to
| | 03:54 | right-click and I'm going to do a Show
All, because my screen size is a little
| | 03:59 | small, and I can start
to just scrunch that down.
| | 04:03 | The scroll pane is actually there,
but you don't really see it working,
| | 04:09 | because what you'd need to do is you
need to update the scroll pane as each
| | 04:14 | image gets loaded in.
| | 04:15 | So I want to do that, now I want to update it.
| | 04:18 | So myScrollPane, when it loads in this
thumbnail, I want to update my scroll pane.
| | 04:30 | So it's as simple as
myScrollPane.update, just like that.
| | 04:34 | Now I'm going to copy this line of code,
Command+C, because I want to update it
| | 04:40 | as they get placed in here.
| | 04:42 | So I'm going to update it after
it's placed in at that position.
| | 04:46 | This third one, it's going to update.
| | 04:49 | So again, it's just a matter of adding
this line of code for each one of these
| | 04:55 | functions, right after if
it's placed on the stage.
| | 04:59 | The ScrollPane Component will actually
reference the size of these thumbnails,
| | 05:04 | and adjust its scrollbar accordingly.
| | 05:07 | So paste that last one in,
and we are looking pretty good.
| | 05:11 | So let's do a Control>Test Movie.
| | 05:15 | I do need to kind of scrunch this down
some and I need to Show All, just to
| | 05:20 | get it our viewable area,
| | 05:22 | but you can see that I do have a scrollbar
and I can easily scroll from left to right.
| | 05:26 | Now notice it also added
this vertical scrollbar.
| | 05:29 | Well, that's easy to fix as well,
because I can just close this SWF file.
| | 05:34 | And I could probably write some code to
do that, but the easiest way to do that
| | 05:38 | is just to select your component, go to
window and open up Component Inspector.
| | 05:46 | And right in here, I can
adjust the horizontal and even the
| | 05:51 | verticalScrollPolicy, because I
don't want it to automatically add that
| | 05:57 | scrollbar. I always want it to be off.
| | 05:59 | So I'm going to change
that verticalScrollPolicy.
| | 06:02 | Never show me that vertical scrollbar.
| | 06:04 | I'll go ahead and do a Test Movie.
| | 06:08 | Scrunch this down, just
so we can see this really fast.
| | 06:13 | Show All, and the vertical scrollbar is
gone, but the horizontal one is still there.
| | 06:19 | It works like a charm, because now I
can click on each of these and I can
| | 06:22 | finally get down to this last image, and
this is really built for unlimited images.
| | 06:26 | So the more I add to my code, the
more I can scroll, but in general, this is
| | 06:31 | really flexible and it's suited to fit
whatever size portfolio you might have.
| | Collapse this transcript |
|
|
6. Making a Flexible PortfolioBenefits of using XML| 00:14 | I'd like to give you an
overview of the benefits of using XML,
| | 00:19 | but first off, I would like
to talk about what XML is.
| | 00:23 | Well, it stands for eXtensible Markup
Language, which just means that it's very
| | 00:28 | flexible and really easy to read and use.
| | 00:31 | In fact, there is many different
technologies that can create and
| | 00:35 | understand this XML format.
| | 00:38 | So whether you're using PHP or a database,
those different technologies can read
| | 00:43 | and write XML file formats and XML content.
| | 00:47 | But what it is is basically structured
information that you define, and that's
| | 00:52 | what makes it flexible.
| | 00:53 | I can define what it contains,
and what the different tags are.
| | 00:59 | It's usually contained in a text
document, as you can see by that icon, but in
| | 01:03 | general, it is tag-based, like HTML.
| | 01:06 | So if you're familiar with HTML, XML
should be even easier to understand.
| | 01:12 | But what are the differences?
| | 01:13 | Well, HTML has predefined tags.
| | 01:16 | So you can see in this example,
there can be a heading 1 tag in HTML.
| | 01:21 | That's a predefined tag like <b> for
bold, any of that sort of thing, say the
| | 01:26 | title is again, predefined, and what it does
is it defines how the data is being displayed.
| | 01:32 | So it has to deal with the
visual display of the content.
| | 01:37 | Well, XML is more flexible in that,
because the tags aren't predefined.
| | 01:40 | You define your own.
| | 01:41 | So whether I want to have a tag that
says <firstName> and another one that says
| | 01:45 | <lastName> I can do that.
| | 01:47 | I own have these tags are written,
what they say and what the content inside
| | 01:52 | of them say as well.
| | 01:53 | So it was basically designed to carry this
data not necessarily to display the data.
| | 01:58 | So it really does separate the content
from the visual aspect of your content.
| | 02:05 | It plays really nice with Flash.
| | 02:07 | So XML content can easily be displayed in Flash.
| | 02:11 | It really does separate that content
from the design, and it really allows your
| | 02:16 | content to be external
outside of your Flash file.
| | 02:19 | So updating your site is a cinch,
because all I need to do is open up that XML
| | 02:24 | file in a simple text editor and edit it.
| | 02:28 | So, what can XML be used for?
| | 02:30 | Well, you can define the data, so it
could contain News updates, maybe Schedules,
| | 02:35 | Personnel Information, or even
Portfolio content, but since you define the data
| | 02:40 | you can determine what's in
it, and how it's being used.
| | 02:43 | The great thing is it's
separate from the Flash file.
| | 02:46 | So I would like to take a
look at an XML file right now.
| | 02:51 | In the Exercise Files folder, in the
Assets folder, in the design folder, clear
| | 02:56 | down in here in the portfolio folder,
here is a portfolio.xml file, because
| | 03:02 | that's what this XML file contains,
all the portfolio information.
| | 03:07 | So I'm just going to open
that up in a simple text editor.
| | 03:10 | I'm using TextEdit.
| | 03:11 | You can use whatever you want, Dreamweaver.
| | 03:13 | It's really up to you, but in general,
this is the structure of this XML file.
| | 03:18 | It does define it as an XML file, and
then I have this tag that contains all of
| | 03:24 | this portfolio information.
| | 03:27 | Again, I've created this
tag that says <portfolio>.
| | 03:30 | I start with it, and I finish with it.
| | 03:32 | Within this portfolio tag, exists this other
information, and this is just a simple comment.
| | 03:38 | It's actually an HTML comment, but I've
just defined that this is Image 1, which
| | 03:43 | contains the title of this image.
| | 03:45 | It gives a description of the image.
| | 03:47 | It gives the path for the largeImage,
and then a path for the thumbnail image
| | 03:54 | for this image, and it works out really well.
| | 03:57 | But I do want to focus on the
description, because notice how this does say
| | 04:01 | CDATA and that means character data.
| | 04:04 | So anything that I want to put within
these two brackets will not mess up my
| | 04:09 | code, because there are some cases
where if I put a real interesting character,
| | 04:13 | whatever that might be, it
might tend to say, break the code.
| | 04:17 | And if it'll ever breaks your code,
then wrap it in CDATA, just like that, and
| | 04:22 | close with those two brackets, because
what's going on even for this description
| | 04:27 | is I have these quotes.
| | 04:28 | I want to make sure that this
line doesn't break anything.
| | 04:31 | So just wrap it in CDATA. But other
than that, I've defined the tags, I've
| | 04:35 | defined the content within those
tags, and now this is ready to go.
| | 04:39 | So I can close that, and I
won't worry about saving it.
| | 04:42 | But all my content is right in here, and
it's going to be external from my Flash files.
| | 04:47 | So if I need to update my portfolio, all
I need to do is update that XML, and my
| | 04:52 | website is pretty much automatically updated.
| | Collapse this transcript |
| Loading XML content| 00:00 | Loading XML content into Flash isn't
quite as easy as, say, loading in a JPEG,
| | 00:05 | but knowing that the XML content can
contain anything you want makes it totally
| | 00:10 | worth it and very powerful.
| | 00:12 | So in the Assets folderm in the design
folderm if you look in this portfolio
| | 00:17 | folder, you'll find this XML file.
| | 00:20 | So this is what I want to
copy and use in my Flash file.
| | 00:26 | So I'll just copy it over to the
appropriate place, into my portfolio folder,
| | 00:31 | I will paste it right in there and
this is the file I want to load in.
| | 00:35 | So I'm just going to open
up my portfolio.fla file.
| | 00:39 | As I open it up and know that if I
close this Actions panel, I'm actually right
| | 00:44 | here on this first frame of the AS layer.
| | 00:47 | So Window>Actions, I'll open this back
up and you can see all this code written
| | 00:52 | to load in all of the various thumbnails.
| | 00:55 | But right at the top, if I just hit
Return a couple of times, I can make room
| | 01:00 | for loading in the XML.
| | 01:02 | So I'm going to start off just by
writing a comment, just going to type in XML
| | 01:07 | and this is going to load in
XML is what I want to do.
| | 01:12 | And the first thing I need to do is
create a variable and this is going to be
| | 01:16 | the XMLURLLoader variable.
| | 01:21 | It's a URLLoader and I'm
going to create a new one.
| | 01:25 | The URLLoader is great for loading in
text content such as XML or TXT file, any
| | 01:33 | sort of text content, I
want to use the URLLoader.
| | 01:36 | So I've instantiated, or made a
new URLLoader, called XMLURLLoader.
| | 01:43 | So I encourage you to just always copy
and then paste to use any instance name
| | 01:48 | you might have typed in.
| | 01:49 | What I need do to now
| | 01:51 | is go ahead and load in that
specific file that I just placed in
| | 01:56 | the portfolio folder.
| | 01:57 | So I'm going to create a new
URLRequest right in here, just like that code
| | 02:01 | hinting tells me, and I'm going to do
an open parenthesis and open quotes and
| | 02:08 | type in 'portfolio.' This is going to
be the URL, of course, portfolio.xml.
| | 02:14 | That's what I want to load in.
| | 02:16 | So I'm going to close that
quote and close the parentheses.
| | 02:19 | And remember there's two parentheses here
so I need to add another one right there.
| | 02:24 | So make sure you do that.
| | 02:25 | That's looking good.
| | 02:27 | Now once the XML is loaded, I want to
just trace out some of that data, but I do
| | 02:32 | need to create a Listener.
| | 02:33 | So I'm just going to do a Command+V
because the XMLURLLoader is what I want to
| | 02:38 | use and I want to add an EventListener for it.
| | 02:42 | And it's going to be an Event and I
am going to listen for the COMPLETE.
| | 02:47 | Once it's completed loading then I want
to create a function called processXML.
| | 02:52 | So I've just kind of made up the name of
this function, but I do have to remember
| | 02:57 | it because, just below that, I need
to create the function to processXML.
| | 03:03 | It's going to go ahead and be an event: Event.
| | 03:08 | It's going to be the method so I need
to make sure these two words match up, right
| | 03:12 | now it's looking good and then
open curly brace, close curly brace.
| | 03:17 | So once this XML has been completed
loading in, it's going to fire off this
| | 03:22 | function and all I'm going to do is
trace and I'm going to trace out the
| | 03:26 | XMLURLLoader and I'm going to get the
data from it, because since I'm using this
| | 03:33 | URLLoader class, it enables these
various functions to be available.
| | 03:40 | And what I'm accessing
here is this data property.
| | 03:43 | So it's going to take this XML and put
all the information from that XML into
| | 03:48 | this data property and all
I'm doing is tracing it out.
| | 03:51 | So I'm going to check syntax.
| | 03:53 | It does tell me that it
doesn't contain any errors.
| | 03:56 | So I'm feeling pretty good about this.
| | 03:58 | I'll go to Test Movie and this is
what I currently have, but if I look in my
| | 04:03 | Output panel, I can see all of that XML content.
| | 04:07 | All of it is in the XML file and now it's
in Flash and available and ready to use.
| | 04:14 | So really, if I go back to my Actions
panel, you can see that through these
| | 04:18 | lines of code, I'm able to load in an XML file.
| | 04:20 | And of course, the next steps would be
to access and start using all of this
| | 04:24 | content, but now that my content is
separate from my Flash file, it makes this
| | 04:29 | really powerful when updating my portfolio.
| | Collapse this transcript |
| Sorting XML content| 00:00 | Once the XML is loaded in Flash, you
can start to sort through the content to
| | 00:04 | determine what you want to use.
| | 00:06 | So as you can see, it's really
currently just a big dump of the XML, verbatim
| | 00:12 | everything that's in the XML file.
| | 00:15 | I want to start sorting through these
individual items to start accessing their content.
| | 00:21 | So I'm going to go to the Timeline to
that very first frame in the AS layer and
| | 00:25 | I am going to go to window
to open up my Actions panel.
| | 00:28 | Notice at the top, here is why I load
in the XML, defines what file it is and
| | 00:34 | once it's completed loading,
it traces out all of the data.
| | 00:39 | Okay, so that's where that
big dump of data comes from.
| | 00:42 | It comes from this.
| | 00:43 | But what I want to do is start
tracing out the individual items.
| | 00:48 | So before this closing curly brace,
I want to create a new variable.
| | 00:52 | In fact, I am just going to delete this
information because I'm going to create
| | 00:57 | a new variable and it's going to be
called theXMLData and it's going to be an
| | 01:03 | XML file and it's going to be equal to new XML.
| | 01:08 | And then within these parentheses is that data.
| | 01:12 | So that's why I just
deleted the trace statement.
| | 01:15 | So what I want to do is take all of the
content in here and put it right in this
| | 01:21 | variable called theXMLData.
| | 01:22 | Now that all the data is in there,
I can start tracing out some of it.
| | 01:27 | So I am just going to type in 'trace
(length,' because the first thing I want to
| | 01:32 | get is the length of this XML.
| | 01:37 | So the length, colon, and that's in
quotes and I can add Plus and I can start to
| | 01:42 | type in theXMLData and I want
to actually get the title.length.
| | 01:49 | Length is a property available to the XML class.
| | 01:53 | So again, that's why I've created this
new XML, because I can start accessing
| | 01:58 | things like the length.
| | 01:59 | So that's what's going to be
displayed when I run this code.
| | 02:02 | It's going to trace out the length,
but I am going to type in a couple
| | 02:04 | more things in here.
| | 02:05 | I am going to type in another trace
statement and instead of the length, I am
| | 02:09 | going to get the title, the actual title,
and I am going to go ahead and use this
| | 02:15 | information right here.
| | 02:17 | So I am just going to copy
it and paste it right here.
| | 02:21 | So what's happening right now is it's
going to get the title information but
| | 02:25 | what node in the lineup of
the title am I going to get?
| | 02:29 | So am I going to get the first item, the
last item? Because they're all numbered.
| | 02:33 | There's about 12 titles in there,
because there's 12 different portfolio pieces.
| | 02:38 | So what I need to do is I need to type
in title and I need to reference a number.
| | 02:42 | So I am going to do brackets and within
those brackets, I'm just going to type zero.
| | 02:48 | Now that's going to get the title of
the very first item, starting at zero,
| | 02:53 | and make sure I close that parentheses,
just like that, and I want to do the same thing.
| | 02:58 | In fact, I am going to copy this,
Command+C, Command+V and I am going to start
| | 03:02 | getting more of the information.
| | 03:04 | So Description and theXMLData I am going to
change title to Description, just like that.
| | 03:13 | So it's going to get the
description of the very first item.
| | 03:16 | Again, I am going to paste in that code
again, and I am going to get the large image.
| | 03:21 | That's going to be the large image
name, and instead of the title or
| | 03:25 | description, it's going to be largeImage.
| | 03:28 | And lastly, I am going to go ahead and
do the thumbnail and I am going to change
| | 03:34 | this title to thumbImage.
| | 03:37 | Now I need to make sure these
various items exist within the XML.
| | 03:43 | These are the various tags that I've
defined, but these do match up and what I am
| | 03:48 | going to do is I am just going
to go ahead and run this code.
| | 03:50 | First off, I'll do the check syntax
and it does say it contains some errors.
| | 03:55 | So I am going to go ahead and take
a look at some of that, and for this
| | 04:00 | one, theXMLData.title.length, it's
giving me an error, and it's probably
| | 04:06 | that semicolon there.
| | 04:08 | So I am just going to go ahead and hit Check
Syntax and then that gets rid of the error.
| | 04:13 | So it's looking good now.
Let's do a Test Movie. It runs.
| | 04:17 | I am just going to just close this
because I want to close my Actions panel as
| | 04:22 | well and peek into the Output panel.
| | 04:25 | So notice that it does get the length,
so it says that there's 12 items and then
| | 04:31 | it gets the very first information of
the very first node, which is actually
| | 04:35 | Node 0, but it gets the title of it.
| | 04:38 | It gets the description.
| | 04:40 | It gets the large image path and the thumbnail.
| | 04:43 | So it doesn't show me any of the various tags.
| | 04:46 | It just shows me the content within
the tags, and as you can tell, this
| | 04:51 | information here is much more useful for me.
| | 04:54 | So what I want to do is I want
to get the other data as well.
| | 04:57 | So I am going to open up the Actions panel.
| | 04:59 | Now what I want to do is I am going
to create a loop because I want to loop
| | 05:02 | through all of this and I want to show all
of the content for all of the various nodes.
| | 05:08 | So for these trace statements, I am
going to type in a for. I am going to create
| | 05:13 | a for loop and I am going
to make i equal to a number.
| | 05:17 | It's going to be a Number and
that's going to be equal to zero.
| | 05:20 | It's going to start at the zero node
and it's going to loop through this data.
| | 05:26 | And then I am going to type in i.
As long as i is less than the total length of
| | 05:35 | this XML information, then
keep on running through the code.
| | 05:39 | So I am just going to copy
this code and paste it up here.
| | 05:42 | So this code is really
going to execute multiple times.
| | 05:46 | So this is where we do a comparison to
see if i is less than the total length
| | 05:50 | of this information.
| | 05:52 | And lastly, I need to type i and
then do Plus, Plus.
| | 05:56 | So what that does is it adds one
each time this code is executed.
| | 06:03 | But I need to make sure I finish
writing this code because I need to do an open
| | 06:07 | curly brace and then a closing curly brace.
| | 06:10 | And I encourage you to, each time you
add these curly braces, you write a
| | 06:14 | function or anything, go ahead and
check this Autoformat button and it will go
| | 06:20 | ahead and nest all of those trace statements.
| | 06:22 | Now I can see what's in the for loop.
| | 06:24 | So it's going to run through all of
this information, starting at zero.
| | 06:27 | It's going to do it for the length of
the array and each time it loops through,
| | 06:31 | it's just going to go ahead and add 1 to i.
| | 06:34 | Now I don't want it to keep sort of
printing out in the Output panel the item
| | 06:38 | that's in the first position.
| | 06:41 | I want it to change each time.
| | 06:43 | So I am going to replace these zeros
with an i, because what i is is it becomes
| | 06:48 | zero the first time through, then it adds one.
| | 06:51 | Then it becomes 1 the second time
through and then becomes 2 the third time
| | 06:55 | through, and it does that 12 times.
| | 06:57 | So if I just reset this back to i and
I check my syntax, it does say that it
| | 07:02 | doesn't have any errors and I
am going to do a Test Movie.
| | 07:07 | Close that SWF file.
| | 07:08 | I am going to close my Actions panel
and as I look at this information, I can
| | 07:12 | see that all of the data is in there,
none of the tags, but just the raw
| | 07:17 | information that I want to take and use
in my Flash file is all there and quite
| | 07:21 | frankly, it's ready to be used.
| | 07:22 | So through the code I have just written,
I am able to access this information
| | 07:26 | and then the next step, obviously,
would be to use it in my Flash file.
| | Collapse this transcript |
| Displaying XML content| 00:00 | Now once you can trace out XML content
in Flash, the next thing you're going to
| | 00:04 | want to do is to put this data into
containers to be accessed when needed, and
| | 00:10 | probably the most flexible
container is going to be an array.
| | 00:13 | But as you'll notice, here are all of
my different items being traced out.
| | 00:17 | I have the title, the Description,
large image, thumbnail and what I want to
| | 00:22 | do is to put all of these in a large
container, so all of the titles will go in an array.
| | 00:29 | And what an array is
| | 00:30 | is kind of like if I had a big
moving truck and this truck is filled with
| | 00:34 | boxes, well, each box would be an item
and in this box could contain any type of
| | 00:41 | item I want it to contain.
| | 00:42 | In this case, it's going to be a truck
full of titles, and each title contains
| | 00:47 | some specific information.
| | 00:49 | So that's what I want to make.
| | 00:50 | I am going to my Timeline panel.
I'm going to go to this first frame here and
| | 00:53 | I'm going to go to Window and open up
the Actions panel and right at here, at the
| | 00:57 | very top, I'm just going to
go ahead and type in Array.
| | 01:01 | Now notice it is a keyword, so I can
select it and I can View the Help on it.
| | 01:07 | So here I can read more about arrays,
but notice there are some examples
| | 01:12 | right down in here.
| | 01:13 | So to make an array, I would create a
new variable and give that variable a name
| | 01:20 | and then go ahead and create the array
and I can have certain values in that
| | 01:23 | array, certain boxes if you will.
| | 01:25 | But I'm going to go ahead and just copy
this first line here as a starting place.
| | 01:29 | All right. I can paste this code in and I don't
want this to be a oneArray, but again, I
| | 01:35 | want this to hold the titleArray.
| | 01:39 | Okay that's the name of this moving
truck, titleArray is an array and here's
| | 01:44 | where I access the array class and I'm
just going to clear out this information,
| | 01:50 | because I want to put content in it later.
| | 01:53 | So I am going to do the same thing for
the other items in our XML, such as the
| | 01:58 | largeImageArray and again, this is going
to be the same, so I'm just going to go
| | 02:04 | ahead and copy this.
| | 02:06 | Command+C, Command+V just like that,
var thumbnailImageArray, and notice that I
| | 02:16 | actually do have two colons there, so I
will remove those and I'll start to put
| | 02:21 | this in that more of a readable order
because I want to have my descriptionArray
| | 02:28 | right underneath my titleArray
and then there we are. All right.
| | 02:32 | So this does follow sort of the same
format that I have down here, sort of the
| | 02:36 | title, Description, large
image and then the thumbnail.
| | 02:40 | But now that I have these arrays
created, I want to push content into them.
| | 02:44 | So I want to load it up with information.
| | 02:47 | Now I can go back to my Help and you'll
notice that arrays do a lot of different
| | 02:51 | things from popping, from pushing.
| | 02:54 | You can read each one, but it adds
elements to the array is what push does.
| | 02:59 | So that's what I want to do is I want
to push information into it, so it's like
| | 03:02 | loading up the truck. All right.
| | 03:04 | And the information I want to push
is all of this information in here.
| | 03:08 | So it's going to include the title,
Description, large image and thumbnail.
| | 03:13 | So what I'm going to go ahead and do
is let's go ahead and type in titleArray
| | 03:20 | and push and within those two
parenthesis, I'm just going to take this data and
| | 03:27 | I'm going to put it right in there. All right.
| | 03:29 | So that looks good.
| | 03:30 | I will, in fact, delete that,
descriptionArray, push content into it as well and
| | 03:37 | it's going to be this information right here.
| | 03:40 | Drag that on in there.
| | 03:42 | Next up is, of course, the largeImageArray,
push content into it, drag that on in there.
| | 03:51 | and start to eliminate these trace
elements and last one I need to do is,
| | 03:57 | I've gotta make sure this is
right, thumbnailImageArray.
| | 04:02 | That's a very long word, so I'm just going to
go ahead and copy it and paste it right here.
| | 04:08 | thumbnailImageArray push data into
it as well and it's going to be this
| | 04:11 | data, just like that.
| | 04:13 | So with that setup, it's going to push all
of this information into these arrays and
| | 04:19 | notice how it gets loaded up as it
actually comes through here and I've this for
| | 04:23 | loop, so it loops through it
for the length of the array.
| | 04:26 | It starts pushing the title in for
each title and all the descriptions go in
| | 04:30 | this array and all the images and
than all the thumb images go in their
| | 04:34 | specific arrays as well.
| | 04:35 | So now that the information is in there,
I'm going to show you how I can use it.
| | 04:40 | So if I scroll down further, you can
see that there's this thumbLoader, and
| | 04:45 | what this thumbLoader does is it loads
in the first image, the first thumbnail
| | 04:50 | into this thumbLoader.
| | 04:52 | So what I want to do is I want to start
using some of that information down in here.
| | 04:56 | So that very first image, well, you know what
I want to do is I want to change its source.
| | 05:02 | I want to change it from this hard coded
link to that image to what's in the XML.
| | 05:08 | So I'm just going to go ahead and type
in 'largeImageArray' and I'm going to go
| | 05:14 | ahead and do an open bracket, close bracket and then I'm
going to type a number in here.
| | 05:20 | So whatever item in the array that I
want to put in here, I can go ahead and
| | 05:25 | just type that in there.
| | 05:26 | So if I want to access the very first
largeImage, I can just type 0 in there. All right.
| | 05:32 | Next up, I am going to do
the same thing for this title.
| | 05:36 | It's not going to be Basketball any more.
It's going to be titleArray and again,
| | 05:40 | open close brackets, and then within those two brackets
I'm just going to go ahead and type 0.
| | 05:45 | Lastly, again, this is all hard coded
and I want it to come from the XML, so I'll
| | 05:49 | delete it and I can type in 'descriptionArray'
open bracket, close bracket, zero.
| | 05:58 | Make sure we get that spelling right,
descriptionArray, make sure all the stuff
| | 06:02 | matches up and these are
the items I'm going to get.
| | 06:05 | So it's looking pretty darn good and
notice initially, what was in there was of
| | 06:10 | course all about Basketball and I'm
leaving this the way it is just to show you
| | 06:15 | that this information that's getting
loaded in is going to be different than
| | 06:19 | what the image displays.
| | 06:21 | So I'm going to do Control>Test
Movie and I'm going to run it and for
| | 06:28 | Basketball, if I click on that and maybe
I click on one of these other ones, but
| | 06:33 | you can see, if I click on this
basketball image it changes the text to Our
| | 06:38 | Future Generations and then also it
gives the description right down here and
| | 06:43 | then displays that large image.
| | 06:45 | So it's working out quite well.
| | 06:47 | It's changing that information
and it's all based on the XML.
| | 06:49 | So this is really working for me.
| | 06:51 | In fact, I can go through and do the
same thing. In fact, if I just copy
| | 06:55 | these three lines, right-click Copy, I
could do the same thing for this next thumbnail.
| | 07:03 | Paste that in and then the only change I need to
make is change that from 0 to 1, just like that.
| | 07:10 | So now when I run it, you can see that
when I select this cafe buena image, it's
| | 07:17 | actually going to be the Basketball image.
| | 07:19 | So you can see how things are changing.
They're no longer what they were, but
| | 07:24 | it's actually referencing XML content.
| | 07:27 | Notice that the thumbnail images don't
sync up with the large images. Not to
| | 07:31 | worry. I'm going to sync this up later.
| | Collapse this transcript |
| Using XML to create thumbnails| 00:00 | So, currently what's going on with
this file is that all of my thumbnails are
| | 00:06 | all hardcoded in the ActionScript.
| | 00:09 | So, with this first frame selected,
you can see that I opened up my Actions
| | 00:13 | panel and I'm going to pin my code
and I'll even close that as well.
| | 00:18 | If I scroll down, you can see all of
these thumbnails are hardcoded with their
| | 00:22 | information and quite frankly, I don't want
this. I want it to all come from the XML.
| | 00:28 | Okay. So, I'm going to do that and I'm going
to really start with this first thumbnail
| | 00:34 | as they shell, if you will, to create
all my thumbnails, because not only am I
| | 00:38 | going to pull all of the content from
the XML, but I am going to end up deleting
| | 00:43 | all of these other functions. All right!
| | 00:44 | So the first thing I'm going to do is
I'm going to create this new function and
| | 00:49 | this function is going to
be called loadThumbnail.
| | 00:53 | Right now, I'm just putting a call in to the
loadThumbnail that I'm just about to make,
| | 00:57 | but know that that loadThumbnail
function is going to be called once all of the
| | 01:01 | data gets loaded in.
| | 01:03 | So once all the data is
available, I'm going to call this
| | 01:05 | loadThumbnail function. Okay.
| | 01:08 | So right down in here, I'm going to use
this first thumbnail as my template, so
| | 01:13 | I'm going to make a function called
loadThumbnail and I'm going to do an open
| | 01:21 | curly brace and I'm going to put everything
inside of this function right here. Okay.
| | 01:26 | Again, anytime you make a function or
you add curly braces, go ahead and select
| | 01:31 | this Auto format button and it will
format everything so I can see all the
| | 01:36 | content inside of the loadThumbnail. Okay.
| | 01:39 | So you can see that this is hardcoded and I
really want to get rid of all of this stuff.
| | 01:44 | So I'm just going to go ahead and delete that.
| | 01:47 | In place of that, what I want to use
is the content from the Array, more
| | 01:53 | specifically, the thumbnailImageArray.
| | 01:55 | So I'm going to copy that
name and scroll back down.
| | 02:02 | Right here in the URLRequest,
that's where I'm going to paste it.
| | 02:06 | Now, I'm not going to reference the whole
array, but I just need to get that first image.
| | 02:11 | So, between two brackets, I'm going to
put a zero and that's going to get the
| | 02:15 | first thumbnail image, just like that.
| | 02:18 | So that's looking pretty good.
| | 02:20 | This is going to be called and it's going
to go ahead and display that first thumbnail.
| | 02:24 | Everything else is going to work as normal.
| | 02:26 | I'm going to do a Test
Movie and there is my image.
| | 02:30 | So this is a different image.
| | 02:31 | In fact, these two match up.
| | 02:33 | But the point is this image is coming
from the XML. Everything else is hardcoded.
| | 02:37 | So now what I'm going to do, I'm
going to get rid of all of these thumbnail
| | 02:40 | images and replace them with
content from the XML. All right!
| | 02:46 | So, what I want to do is I'm just
going to go ahead and delete all of
| | 02:51 | these other functions.
| | 02:52 | This is the fun part.
| | 02:53 | I like that I'm removing lots of lines of
the code, looks like I'm at 207, delete that.
| | 02:59 | Now I'm down to 54.
| | 03:01 | In fact, if I start eliminating some
of these lines, you can see that I'm now
| | 03:05 | down to 45 lines of code.
| | 03:07 | But now I need to start
adding some additional lines.
| | 03:11 | So right up here at the top, this is
where I have my variables for my arrays and
| | 03:15 | I want to create a new variable.
| | 03:16 | So I'm going to create a variable and
this variable is going to be called imageNum.
| | 03:22 | It's going to store a number and
I'm going to make it equal to zero.
| | 03:26 | So that's its starting point.
| | 03:28 | imageNum is going to be equal to zero.
| | 03:30 | So I'm going to take this number and
I'm going to copy it and inside of my
| | 03:34 | loadThumbnail function right here, I'm going
to go ahead and paste imageNum. All right!
| | 03:39 | So that will just put zero in there,
initially, since I have this set to zero,
| | 03:43 | but I want to run this function
multiple times and I actually want to add to
| | 03:48 | imageNum each time the function is run.
| | 03:50 | So right down here, before that
closing curly brace, I'm going to go ahead
| | 03:54 | and type in imageNum++.
| | 03:58 | So what that does is I'll write a comment
in here, add to imageNum each time it's run.
| | 04:05 | So it adds 1 to it. All right!
| | 04:08 | It's going to add to imageNum and
then I want to call the function.
| | 04:12 | I'm going to call the function
loadThumbnail. That's right.
| | 04:16 | I'm calling the same
function that this is currently in.
| | 04:19 | It's going to call that many times.
| | 04:21 | In fact, it's going to call it indefinitely.
| | 04:23 | So, there will be some errors here, but
the short of it is that it's going to go
| | 04:28 | ahead and load up this image.
| | 04:29 | In fact, at this point, what I want to do
is I want to make sure that this is working.
| | 04:33 | So, right inside this function, I'm
going to add a trace and inside of this
| | 04:38 | trace, I'm just going to say imageNum.
| | 04:41 | That's what I want to
trace out is the image number. All right.
| | 04:45 | Notice up here there's this other trace
statement in here where it's outputting
| | 04:48 | the length 12 times.
| | 04:51 | I really don't need that, so I'll come
up here to this trace line and I'll just
| | 04:54 | eliminate that line of code to that
trace statement, so I just have this one.
| | 04:59 | So, that's all I'm really going to see.
| | 05:01 | I shouldn't see any of the
thumbnails, other than that one.
| | 05:03 | I'm going to run it.
| | 05:06 | Sure enough, there's my one thumbnail
and I'm going to close this, but if you
| | 05:09 | can take a look at this, I can see
and I'll close my Actions panel, 2, 3, 4
| | 05:14 | clear up till 12, and then I start
running into these errors, because it keeps
| | 05:18 | on running that function even
though there's only 12 images.
| | 05:21 | So I'm going to take care of this now.
| | 05:22 | I'm going to go back to my Actions
panel and I only want to run this
| | 05:26 | loadThumbnail 12 times
for the length of the array.
| | 05:29 | So I need to create a new
variable right up here at the top.
| | 05:32 | I'm going to type in var totalImages:Number.
| | 05:38 | So it's going to store a number.
| | 05:40 | So right down in here, for the
totalImages, it's going to be the length of the
| | 05:44 | array, which I can find right here.
| | 05:46 | So, just after the data gets loaded in,
I'm going to go ahead and type in var
| | 05:51 | and make sure I type in totalImages.
| | 05:53 | I'm going to make that equal
to theXMLData.title.length.
| | 05:58 | In fact, I will take that and
I'll move that right in there.
| | 06:01 | I'm going to make sure this ends with
a semicolon and I need to make sure I
| | 06:05 | use totalImages as I copy that and paste it.
It's going to be still used right in there,
| | 06:11 | but I can also use this
totalImages down further as well.
| | 06:15 | So right down in here, again, I want
this loadThumbnail to be only run for the
| | 06:19 | length of the array.
| | 06:20 | So, I need to create an if statement.
| | 06:23 | imageNum is less than totalImages
and let's just make sure we have that
| | 06:29 | name right, totalImages, capital 'I.'
| | 06:32 | Close parentheses, open curly
brace, and then close curly brace.
| | 06:36 | Again, anytime you add curly braces,
click this Auto format button and it should
| | 06:42 | be only running 12 times.
| | 06:45 | So I'm going to go ahead and
run this code, Control>Test Movie.
| | 06:49 | It's only being run once and I'll show
you why, because right up here at the
| | 06:54 | top, this is equal to zero and this var
means that it's only going to keep this
| | 07:00 | variable within this function.
| | 07:02 | So I actually need to
remove that var right there.
| | 07:05 | I did that to point out that any time
you make a var, it's only going to be
| | 07:09 | available within that area.
| | 07:11 | If you make a var or variable sort of
at the root of this Actions panel, it's
| | 07:16 | available everywhere.
| | 07:17 | So now if I run this, you can see that
it runs the length of the array, but I
| | 07:25 | still only see one image, so I'm
going to take care of that right now.
| | 07:30 | So right down in here, the images are
being loaded in, but they're not being
| | 07:34 | positioned appropriately.
| | 07:36 | So, that's my next step, is
to position them appropriately.
| | 07:40 | So just before that Event.COMPLETE, what I want
to do is I want to go ahead and position this.
| | 07:47 | thumbLoader.x, make it equal to 100,
not 100 pixels, but I want to multiply it.
| | 07:55 | I want to have the first one maybe 100.
| | 07:57 | Maybe the second one is 200.
| | 07:59 | Maybe the third one is 300.
| | 08:01 | So I need to start multiplying.
| | 08:02 | So the asterisk is a multiplication and
I can type in imageNum, just like that.
| | 08:09 | So, everything is looking good. I'll do
a Control>Test Movie, and sure enough, it
| | 08:14 | runs. I can see all of my various
thumbnails right down here and they're set up.
| | 08:20 | So, the next step would be adding
some additional functionality to these,
| | 08:23 | because when you select them, it
opens up the first image, but I can take
| | 08:27 | care of that later.
| | 08:28 | The point is all of this data that you
see right now is all external from the
| | 08:32 | Flash file, all coming from the XML and
I don't have to open up Flash if I want
| | 08:37 | to update my site, I can just edit the XML.
| | Collapse this transcript |
| Displaying content with thumbnails| 00:01 | I'm now going to display the
appropriate content from the thumbnails and I
| | 00:04 | want to make everything XML-driven,
because currently how this is set up is
| | 00:10 | this image is hardcoded in the Flash file,
so is this text, as well as the description.
| | 00:16 | So I want to take care of that first.
| | 00:19 | Also notice, as I come down here over
these thumbnails, I need to implement the
| | 00:25 | hand cursor, just so users
know that these are buttons.
| | 00:28 | So I need to make these
movie clips work like buttons.
| | 00:32 | Now, if I do select one of these or
any one of these, notice how it displays
| | 00:39 | content from this very first image.
| | 00:42 | So, I need to make sure all this
information is being pulled from the correct
| | 00:47 | XML and it's not hardcoded, because
believe it or not, this information, as you
| | 00:52 | click, is all hardcoded, pointing to that first
image and its related text. Let me close that.
| | 00:58 | I'm going to go into my portfolio file.
| | 01:02 | The first thing I'm going to do is I'm
going to make sure this UILoader does not
| | 01:07 | reference that basketball image.
| | 01:09 | So I'm going to go to Window, down to
Component Inspector, and right in here,
| | 01:14 | this is what I mean by hardcoded.
I would have to actually open up Flash and
| | 01:18 | type in a new name, if I wanted to change this.
| | 01:21 | That's what's meant by hardcoded, but
just, all I need to do is get rid of that
| | 01:25 | and that's no longer an issue now,
because I don't want it to display anything
| | 01:30 | when you first go to the Portfolio section.
| | 01:33 | Next thing I need to do is delete the text in
these text fields, right here and right here.
| | 01:40 | I do want to make sure that this text,
in the Properties panel, that the Behavior
| | 01:46 | is Multiline, because since I'm
going to be loading in XML, I could have
| | 01:52 | multiple lines of XML content.
| | 01:54 | So I want to make sure this is set to Multiline.
| | 01:57 | So, another thing I need to do is
make sure this button is pressed as well.
| | 02:03 | So I want to render text as HTML. All right!
| | 02:07 | So that's looking pretty good.
| | 02:08 | Those two have been cleared out, as
well as the image, and of course, that
| | 02:15 | information doesn't show up.
| | 02:17 | Okay, now I'm going to go
ahead and fix this issue.
| | 02:20 | Those movie clips, well, I want them to
look like buttons or at least act like buttons.
| | 02:24 | So, I'm going to select the first frame
in the AS layer and I'm going to go to
| | 02:29 | Window, down to Actions to open up my
Actions panel and I'm going to pin my
| | 02:34 | code, just so it doesn't
move if I select something else. All right.
| | 02:39 | So right in here, in this loadThumbnail
function, this loadThumbnail function
| | 02:45 | gets called many, many times, each
time where the thumbnail that gets loaded in.
| | 02:49 | What I want to do is I want to make
my all thumbnails act like a button.
| | 02:57 | That's as easy as typing
allThumbnails.buttonMode, capital M, = true.
| | 03:04 | So, I'm saying, "Hey, you know what?
| | 03:05 | I know you're a movie clip,
but work like a button."
| | 03:07 | So, give me the hand cursor
and everything should be okay.
| | 03:11 | So I'll do a Test Movie.
| | 03:12 | Now when I roll over these, sure enough,
I get that hand and it's looking good,
| | 03:17 | but I still have this issue of all of
these thumbnails displaying wrong content.
| | 03:23 | So let's take a look at that.
| | 03:25 | Right in my loadThumbnail function,
right down in here, when you click on the
| | 03:30 | image, this is the hardcoded part.
| | 03:33 | So it's pointing to the array, but it's
taking the very first element and displaying it.
| | 03:38 | So, this stuff has to go.
| | 03:41 | So what I want to do is I want to create
some variables, and I'm going to create
| | 03:44 | some variables right in here.
| | 03:47 | So not inside of the Event.COMPLETE,
EventListener or anything, but I want to
| | 03:52 | write this code just above that
and they are going to be variables.
| | 03:56 | So these variables are going to
hold the specific array information.
| | 04:01 | So var thisLargeImage is going to be a
String, and it's going to be equal to the
| | 04:09 | largeImageArray, and then I do my two brackets.
| | 04:14 | Since this is an array, I'm going to
do these two brackets, and just like I'm
| | 04:19 | getting the thumbnail image array, the
appropriate image number, I want to do
| | 04:23 | the same thing right here.
| | 04:24 | So it's just a matter of copying
that line and pasting it right in here.
| | 04:29 | I also want you to confirm that this
LargeImageArray is spelled correctly, so up
| | 04:33 | at the top of the code,
largeImageArray is right there.
| | 04:37 | So I want to do the same
thing for the titleArray.
| | 04:39 | So I'll just copy that, scroll
down and create another variable.
| | 04:45 | This title is also a String and it's
going to be equal to, and I'm just going to
| | 04:51 | paste in what I just copied, titleArray.
| | 04:54 | I want to do my brackets and within my
brackets, I'm going to copy and paste in imageNum.
| | 05:01 | Next up, I have, at the very top, if I
scroll up to the top, descriptionArray.
| | 05:05 | So I'm going to copy that again, scroll
back down and type in thisDescription,
| | 05:15 | and it's a String, and it's going to
be equal to, add descriptionArray, my
| | 05:19 | brackets, and then that image
number as I copy and paste it.
| | 05:25 | So this actually stores the
appropriate info for the thumbnail, regardless of
| | 05:35 | what number thumbnail it is.
| | 05:37 | So these variables store that
information. Now, I need to use these variables.
| | 05:43 | So thisLargeImage, I'm going to copy
that, and where I want to put it is right
| | 05:47 | down in here, for the
source of the largeUILoader.
| | 05:51 | So right in there, I'm going to
go ahead and paste thisLargeImage.
| | 05:57 | Same thing for the title. I'll just do
a Command+C and for the selected title,
| | 06:02 | I'm going to make the text equal to thisTitle.
| | 06:05 | Same thing for the description. I'm
going to copy that variable and paste it for
| | 06:10 | the text property for the
selected description. All right!
| | 06:15 | Test the movie.
| | 06:16 | So, I'll just go ahead and click on one of
these and it displays the appropriate image.
| | 06:24 | So it's working great now.
| | 06:26 | All of this content is coming from the XML.
| | 06:29 | There are a couple issues, it looks like.
| | 06:31 | If you take, for instance, this
description right here, notice that there is
| | 06:35 | some HTML in there, some HTML code.
| | 06:38 | I point that out, because you can
have HTML code in your XML file, some
| | 06:44 | basic HTML 1.1 code.
| | 06:47 | So links, making a word Bold, things
like that, but it's really appropriate
| | 06:52 | for this because you might make a website
design have an image of it in the center area.
| | 06:57 | You want to give the user the ability
to click out to that specific website.
| | 07:01 | So I need to render this HTML in Flash.
| | 07:05 | So I'm going to close this file, and
again, I'm going to just minimize that
| | 07:10 | Actions panel by clicking that gray bar
and I'm going to select this text box,
| | 07:14 | because I want to point out that I need to
make sure this is set to Render text as HTML.
| | 07:21 | I'm going to open up my Actions panel again.
| | 07:24 | The last thing I need to do is type in htmlText.
| | 07:30 | It changes colors, confirms that it's
typed correctly, and now Flash will render
| | 07:36 | out this text as HTML text.
| | 07:39 | So let's run this, Test Movie.
| | 07:41 | Now if I go into this take flight
image, I can see the HTML code is gone
| | 07:48 | and it gives me a link.
| | 07:50 | So I have a hand cursor, and if I
click on it, it's going to take me out to
| | 07:54 | that specific site.
| | 07:55 | So again, all of this
content is coming from the XML.
| | 07:59 | I can easily add to the XML, all I want
to remove from it, edit any of this text.
| | 08:04 | It's all XML-driven.
| | 08:05 | I no longer have to open
up Flash to update my site.
| | 08:09 | Everything is external,
really making my site flexible.
| | Collapse this transcript |
|
|
7. Creating a Video PortfolioCreating and importing video| 00:00 | Video is one of the most compelling
assets you can add to your site and Flash
| | 00:04 | makes it easy to create and import video.
| | 00:07 | So that's what I am going to do.
| | 00:09 | I have my video.fla file open, and I
want to replace this image with a video.
| | 00:15 | So I am going to double-click on this
movie clip, and I am going to select just
| | 00:19 | this image and I am just
going to make note of the size.
| | 00:23 | The Size is about 500 pixels wide.
| | 00:27 | So I want to keep that in mind when
I import my video, because I want it
| | 00:30 | be about that wide.
| | 00:32 | So I am going to delete that image.
| | 00:34 | And I am going to go to File>
Import and I am going to Import Video.
| | 00:39 | So you are greeted by
this Import Video dialog box.
| | 00:43 | It asks you where your file is.
| | 00:45 | I'll click Browse and I will browse to
it, because in my Assets folder, in the
| | 00:49 | video folder, there's this newport
QuickTime movie that I want to import.
| | 00:55 | So I am going to select Open and it
does tell me that this QuickTime movie
| | 01:00 | doesn't seem to be
supported by the Flash player.
| | 01:04 | So it's going to launch, or ask me to
launch, the Adobe Media Encoder so I can go
| | 01:09 | ahead and convert that
video to an FLV file or F4V.
| | 01:13 | So I'll select OK, and right down
here at the bottom, I can click Launch
| | 01:18 | Adobe Media Encoder.
| | 01:20 | Now the Adobe Media
Encoder does come with Flash.
| | 01:23 | It is technically a separate program,
but I like how you are able to convert
| | 01:28 | videos into the Flash format and
you can convert as many as you want.
| | 01:33 | You to list them all in here.
| | 01:35 | But notice how it already
references my QuickTime movie.
| | 01:38 | It tells me the Format, but I
want to jump in here to the Preset.
| | 01:42 | So if I twirl that down,
| | 01:44 | you can see that I get all these
different options to select and quite frankly,
| | 01:49 | I am just going to select FLV - Same As Source.
| | 01:52 | Well, what is FLV - Same As Source?
| | 01:55 | Well, I can click on this link right here and
it will open up the Export Settings for me.
| | 02:00 | At this point, I can review what it is.
| | 02:02 | It gives me a summary, saying it's actually
pretty large and also does include audio.
| | 02:08 | Well I can modify these settings if I want.
| | 02:11 | So it's just a matter of going to that
specific tab, such as Video, and right in
| | 02:15 | here, I can Resize the video.
| | 02:17 | So again, I want to
resize it to about 500 pixels.
| | 02:20 | I want to make it 500 pixels wide.
| | 02:23 | Now it's going to fit that space better.
| | 02:25 | And I can control some of the other
options as well, but everything looks good
| | 02:29 | now. I just wanted to adjust the
size and I can select OK. All right.
| | 02:34 | If I scroll down to this Output File
area, and I click on this link, this tells
| | 02:41 | me where it's going to be exported to.
| | 02:43 | Now what I want to do is I want to out
it in the same area as my portfolio.fla
| | 02:48 | inside of a video folder there.
| | 02:50 | So I am going to click New Folder and the
name of the folder is going to be video.
| | 02:58 | In this video folder, I am going to
put that newport.flv file in there.
| | 03:02 | So I will just click Save.
| | 03:04 | And now it needs to be rendered.
| | 03:06 | Rendering it means the Adobe Media
Encoder needs to make all of these frames
| | 03:10 | at this certain size.
| | 03:12 | So it says that it's waiting to be
rendered and all I need to do is click
| | 03:17 | Start Queue and if I had more videos in there,
it obviously would render out all of them,
| | 03:24 | but in this case, I am just
rendering one and it is actually done.
| | 03:27 | So I will close the Adobe Media Encoder.
| | 03:29 | I will go back to Flash and it does say,
| | 03:31 | "Hey! You know what? After you are done
with the Adobe Media Encoder, make sure
| | 03:34 | you switch back to Flash and click the
Browse button to locate the file you just created."
| | 03:40 | So I am clicking on the Browse button
and I am going into where I created that
| | 03:45 | file, which is in the video folder.
There is the newport.flv file.
| | 03:50 | I will select Open, and I want to make
sure it Loads in this external video with
| | 03:56 | the playback component.
| | 03:57 | So most of the time, you are going to
want to use this option and I will show
| | 04:01 | you what that looks like, because if
I click Continue, this is the playback
| | 04:06 | component right here.
| | 04:08 | This playback component comes with
this skin, which I have full control over.
| | 04:13 | So if I open up this dropdown menu,
I can select, say, a different skin.
| | 04:18 | So this is the skin over the
video, showing all of the buttons.
| | 04:23 | Well that's quite a bit, but I can
start to select sort of all of these
| | 04:26 | different options and really, maybe I
want to go with the SkinOverPlayMute option,
| | 04:34 | which just gives me these two buttons,
and I can even change the color to fit my
| | 04:39 | design, which is red.
| | 04:41 | So after that's done, you can click
Continue, and then it does say,
| | 04:46 | "Hey! You know what? Keep in mind that you
need to upload this video when you are done
| | 04:50 | with your website, because it's
going to reference this external file.
| | 04:54 | So make sure this FLV travels with
your website if you happen to upload it.
| | 04:59 | So now it loads in that video
using FLV playback component.
| | 05:04 | I could move it into position.
| | 05:06 | Now the next thing I want to do is
take a look at some of the properties for
| | 05:11 | this FLV playback component.
| | 05:14 | So in the Properties panel, notice that it
does say it's an Instance of the FLVPlayback.
| | 05:18 | Well I can click this icon right
here and that just opens up the
| | 05:22 | Component Inspector panel.
| | 05:25 | Now if I expand this out, notice that I
can change the color and change some of
| | 05:29 | the other settings that I got earlier.
| | 05:31 | But what I don't want to happen is I
don't want this video to play automatically
| | 05:35 | when they click on this section.
| | 05:38 | In fact, I want to change the autoPlay to false.
| | 05:41 | So that's all I want to do here.
| | 05:42 | The color and everything else looks good.
| | 05:44 | So I can close that panel down and now I am going
to go to Control>Test Movie. There is my video.
| | 05:52 | It loads up, but it doesn't auto play, not
till I click on that button.
| | 05:56 | (Video Playing)
| | 06:00 | I hear the audio.
| | 06:01 | I can pause the audio and still watch the video.
| | 06:06 | And it all looks pretty good.
| | 06:08 | So I would say this is looking
really good for what I want to do.
| | 06:11 | But let's take a look at
this within context of our site.
| | 06:15 | I was working in the video.fla file.
| | 06:18 | But what I want to do is open up this index.fla.
| | 06:22 | So if you recall, this is my main site.
| | 06:25 | This is the file that loads
in all the other SWF files.
| | 06:30 | So I am going to do Control>Test Movie.
| | 06:34 | Now I am going to go ahead and click
on Video to go to the video section.
| | 06:38 | You can see my video.swf file loads up
and I can play this video.
| | 06:43 | (Video Playing)
| | 06:46 | Let's check out what happens if I play
this video and then navigate to another
| | 06:51 | section before this video is
done playing.
| | 06:54 | (Video Playing)
| | 07:04 | So you probably noticed that the audio
continued to play and this is obviously
| | 07:09 | going to be an issue, seeing as you
have navigated away from that page, we
| | 07:13 | want that audio to end.
| | 07:15 | So regardless of the section you go to, we
want to make sure all the audio has been stopped.
| | 07:21 | So that's what I want to do next is in
this index.fla file, I am going to go to
| | 07:26 | the Timeline and I am going to go to
this first frame here, in the AS layer and
| | 07:31 | I am going to open up the Actions panel.
| | 07:34 | Now currently what I have in here are
all of my various function calls that
| | 07:39 | calls this function, that navigates
to that particular section. All right.
| | 07:44 | So within this function, I want to stop
all audio, but what I need to do first
| | 07:50 | is I need to create an import.
| | 07:52 | So right up here at the top, in my
current list of import settings, I am going
| | 07:57 | to go ahead and import something else.
| | 07:59 | I am just going to type, import flash.media and
| | 08:05 | I'm going to import
the SoundMixer. There it is.
| | 08:08 | If it highlights you can hit Enter, and
we'll select it, and what this does is
| | 08:12 | it tells Flash to go get all the code
for SoundMixer because I want to use one
| | 08:18 | of the functions associated with SoundMixer.
| | 08:22 | Now that it's imported all of
that code, right down in here in this
| | 08:26 | moveContent function, and after these
trace statements, I am going to type in
| | 08:31 | SoundMixer.stopAll.
| | 08:34 | You can see that it
highlights it right down here.
| | 08:37 | I can select that, do an open and close
parentheses, end with a semicolon and this
| | 08:43 | will stop all audio.
| | 08:44 | So anytime you navigate to another
section, it's going to kill any audio that
| | 08:48 | was in that previous section.
| | 08:50 | So let's go ahead and test this out.
| | 08:55 | Video section, I am going to play
this video, and then I am going to click
| | 08:59 | on the About button.
| | 09:00 | Now the audio is going to stop playing when I
click on the About section.
| | 09:04 | (Video Playing)
| | 09:10 | The audio stops and now
it's working appropriately.
| | 09:13 | So again, that's an issue you might run
into when you start loading in audio or
| | 09:18 | loading in video is it might continue to play.
| | 09:21 | You can use the SoundMixer.stopAll, and
it will kill any sound that's going on,
| | 09:27 | but otherwise this is set up.
| | 09:29 | Flash makes it easy to take your
current video and convert it to Flash video
| | 09:33 | format as well as applying a certain
skin with certain buttons to it and
| | 09:40 | control how it gets integrated with
your site, being able to stop the audio
| | 09:45 | using the SoundMixer.
| | Collapse this transcript |
| Adding a Full Screen button | 00:00 | One of the nicest features that Flash
has for video is the ability to make your
| | 00:04 | video go full screen.
| | 00:06 | But this is a two-part process.
| | 00:08 | I am going to start with first step, which
is going to be adding a full screen button.
| | 00:12 | So it's going to be changing this Skin.
| | 00:15 | So I am going to select this movie clip.
It's the VideoPlayer copy movie clip,
| | 00:20 | and I am going to double-click on it,
and I am going to locate just this
| | 00:23 | FLVPlayBack Component.
| | 00:25 | So in my PROPERTIES panel, it says
FLVPlayback. I can go ahead and select the
| | 00:31 | COMPONENT INSPECTOR panel.
| | 00:33 | This gives me different settings to
change this FLVPlayback Component, and the
| | 00:38 | one I want to focus on is the Skin.
| | 00:40 | So right here, this is the current
one I have selected, SkinOverPlayedMute,
| | 00:46 | lists out all the buttons, and I can
just click on that name, and it opens up
| | 00:50 | the Select Skin dialog box, and
gives me the opportunity to change it.
| | 00:55 | So this is quite a list of
Skins that I can choose from.
| | 00:59 | There's a quite a few in here, and really, I
just want to focus on the ones that say Full.
| | 01:04 | So this means Full Screen, some of
them also say Full Screen, literally, but
| | 01:08 | these are all the ones
that have the Full Button.
| | 01:12 | So I am just going to go
ahead and select one of these.
| | 01:16 | In fact, I will just Select the
SkinOverPlayFullscreen. I am going to keep it simple.
| | 01:21 | The Play button, Fullscreen Button,
this is the one I am going to focus on, I
| | 01:25 | am going to select OK.
| | 01:27 | Now if I close my COMPONENT
INSPECTOR panel, you can see that this is now
| | 01:31 | my Full-screen button.
| | 01:33 | Okay, I am going to go ahead and run this now.
| | 01:34 | I am going to do a Test Movie.
| | 01:38 | There's my video. Now I can play it,
plays great, my Full-screen button.
| | 01:44 | If I click on it, actually nothing
happens, because I need to do something to
| | 01:49 | the HTML, because really it's the HTML page
that's going to make this video go full screen.
| | 01:56 | So I need to do into the Publish Settings,
and Publish out an HTML page that has
| | 02:01 | the appropriate code.
| | 02:02 | So I am going to close this video.swf,
and if you recall, this SWF file is
| | 02:09 | sitting right here, but
technically, it gets loaded into this index.swf.
| | 02:14 | So this is really my main file, and
this file is going to publish out both the
| | 02:19 | SWF and the HTML page.
| | 02:23 | So I am going to double-click on that,
and in this index.fla, here is where I
| | 02:28 | want to go to File, and I want
to go down to my Publish Settings.
| | 02:31 | Okay, with that selected, notice
that I have Flash and HTML checked.
| | 02:37 | It's going to publish out both of those
files, and I'm also given tabs up at the top.
| | 02:42 | So I am going to select the HTML tab,
and notice how it gives me the ability to
| | 02:49 | change the template, and this is
what I want to focus on right here.
| | 02:52 | I can publish it to different template,
but what I want to do is I want to
| | 02:55 | publish for Flash only, and go ahead
and allow for the Full-screen function.
| | 03:01 | So this will create an HTML page with
the Full-screen function already embedded.
| | 03:06 | I am going to go-ahead select OK,
and now I am going to go to File, and I
| | 03:12 | am going to go down to Publish
Preview, and I am going to Publish Preview
| | 03:16 | the default HTML page.
| | 03:18 | So I am going to select that.
| | 03:19 | It shows me the SWF
sitting right on an HTML page.
| | 03:25 | So I am going to go to Video. There
is my video. I can go to my different
| | 03:29 | sections, About. If I go back to Video,
notice that I have my Full-screen button, so
| | 03:36 | let me play it, and then I am going to
go Full Screen, and then I am going to
| | 03:40 | close it and pause it.
| | 03:41 | (Video playing)
| | 03:52 | So notice how it went Full-screen.
| | 03:54 | It gave me the option to hit the Escape
key to escape out of Full-screen mode,
| | 03:58 | but it was done pretty easily, for
the most part I just need to make sure I
| | 04:01 | select a skin with that button in it,
and then I need to Add up my Publish
| | 04:05 | Settings, and then I am good to go.
| | 04:07 | It provides a great user experience for
the end-user, and really shows off all
| | 04:12 | of your video content quite well.
| | Collapse this transcript |
| Creating custom video controls| 00:00 | Flash is very flexible, allowing you to
not only at the video controls you want,
| | 00:05 | but to also customize the
look of the controls you add.
| | 00:09 | So let's take a look at
where this is at, currently.
| | 00:11 | I'm going to double-click on this movie
clip, because inside of this movie clip
| | 00:15 | the Video Player copy movie clip,
there is this FLVPlayback COMPONENT.
| | 00:20 | In my PROPERTIES panel, with it selected,
I can open up the COMPONENT INSPECTOR.
| | 00:26 | So this is where I have been changing
the Skin and each time I change the Skin
| | 00:30 | and Publish out the file, it
does generate one of these files.
| | 00:35 | So just be aware that that does happen.
You do need these files if you're using
| | 00:40 | the SkinOverPlayFullscreen.swf file, for instance.
| | 00:45 | So quite frankly, I don't need either one
of these. In fact, I will just go ahead
| | 00:49 | and throw them away,
| | 00:50 | because what I am going to do is I
am going to click on the Skin, on the
| | 00:54 | Magnifying Glass, and I'm not
going to use any one of these Skins.
| | 00:58 | But feel free to peruse them.
They might interest you because there's a fair
| | 01:03 | amount of variety in each one.
| | 01:05 | I'm just going to select None,
because I want to integrate my own buttons.
| | 01:09 | So with no Skin selected, I am going to
select OK, and I am going to close the
| | 01:14 | COMPONENT INSPECTOR, and as
you can tell, the Skin is gone.
| | 01:17 | Now, I am going to go to Window
and open up my COMPONENTS panel,
| | 01:21 | because in my COMPONENTS panel, under
the Video section, there's a huge list of
| | 01:27 | buttons that I can add.
| | 01:29 | So now I can add buttons
on a case-by-case basis.
| | 01:32 | So the first thing I am going to do is
I am going to create a new layer and I'm
| | 01:35 | just going to call it video controls.
| | 01:38 | Now with that layer selected, I can
start to drag out the buttons I want to use,
| | 01:43 | say, for instance, this PlayPauseButton.
| | 01:45 | The SeekBar I like a lot. I'll just
drag that on, and the FullScreenButton is
| | 01:52 | pretty nice, so I will just
put that right down there.
| | 01:54 | So notice how I can kind of position
them in the place that I want, and I can
| | 01:58 | do a Test Movie, and notice, without
adding any code whatsoever, I can go ahead
| | 02:04 | and use these buttons.
| | 02:06 | (Video playing)
| | 02:11 | I can scrub, I can even go full screen.
This button would work as well, once I
| | 02:15 | publish the HTML file.
| | 02:18 | But in general, everything works out
great. I didn't have to add a line of code.
| | 02:22 | That's very effective,
| | 02:24 | but notice that I can even zoom in on
these buttons and customize them further.
| | 02:29 | So if I just double-click on this
PlayPauseButton, notice how it shows me all of
| | 02:35 | the states of these buttons.
| | 02:36 | So the over state, when you rollover the
button, the down state is when you click on
| | 02:41 | it and then the inactive state.
| | 02:44 | But notice if I just start double-
clicking on this, I can really dig down to the
| | 02:48 | specific elements that make up this
button, and notice they're all movie clips.
| | 02:52 | So I'm already about four levels deep
into this, and I have this area selected,
| | 02:59 | and I can change the color if I want to.
| | 03:02 | So I'll just change it to red, for
instance, and it changes it that way.
| | 03:06 | I'll click back out to VideoPlayer copy.
Notice how it changes this button, as
| | 03:11 | well as this one, because
they share the same background.
| | 03:14 | So you really have a lot of control
when it comes to customizing your buttons,
| | 03:19 | and what you could end up with is,
potentially, another file, so I am going to go
| | 03:24 | to File Open, and in the
Assets folder, in design, I have this
| | 03:30 | CustomVideoControls.fla. What you
could end up with is a file like this.
| | 03:35 | Since you have spent all that time
customizing your buttons, you could save a
| | 03:39 | separate file and then just use this content.
| | 03:42 | So right in here, there is those three buttons,
and all I am going to do is copy this content.
| | 03:49 | I am going to go back to my Video.fla,
and I will delete them here, but even
| | 03:56 | though I deleted them on the stage, if
I open up my LIBRARY panel, notice they
| | 04:01 | technically still exist.
| | 04:02 | So when I go to paste in these other
controls, it's asking me "Hey, do you
| | 04:08 | want to replace the ones that are already
in there, or do you not want to replace them?"
| | 04:12 | Well, I want to replace the ones that
are currently in my library, select OK.
| | 04:16 | Let me zoom out just by hitting
Command+Minus, and I can move these buttons
| | 04:21 | right into place, kind of like that.
| | 04:23 | But notice how they do have this new
look to them, and I can go to Control > Test
| | 04:28 | Movie, and let's see if
these buttons work.
| | 04:32 | (Video playing)
| | 04:34 | Yup! they work like a charm.
| | 04:35 | I can scrub, and again, I can go
full screen as soon as I Publish out the
| | 04:39 | appropriate HTML page.
| | 04:41 | So notice that Flash really gives
you a lot of flexibility in adding the
| | 04:45 | specific video buttons you want to add,
| | 04:47 | as well as customizing their look.
| | Collapse this transcript |
| Adding functionality to video thumbnails| 00:00 | Now what if you want have a video portfolio?
| | 00:03 | Well, it's going to be set up in a similar
fashion as an image portfolio would be set up,
| | 00:08 | in that you are going to have
thumbnails that serve as buttons that then change
| | 00:13 | content in the main area.
| | 00:15 | So that's how this is set up.
| | 00:17 | I have these thumbnails on the side,
and I want them to play the appropriate
| | 00:21 | video right in here.
| | 00:23 | So first thing I am going to do
is make sure these are buttons.
| | 00:28 | Currently, they are just movie clips.
| | 00:30 | So I am just going to click and drag
this movie clip into the LIBRARY, and I
| | 00:34 | convert it to a Symbol, and I am
just going to call this vid button.
| | 00:40 | I am going to make sure it says
Button as the Type, select OK.
| | 00:44 | Same thing for this second thumbnail,
vid button, and this is vid button 2. I am
| | 00:49 | going to make sure the Type is button,
select OK, and now they are buttons,
| | 00:55 | but now I have to give them specific names.
| | 00:59 | I am going to refer to
these names in the ActionScript.
| | 01:02 | So let me just go ahead and
minimize that LIBRARY panel, because
| | 01:05 | with this first button selected, I am
going to go the PROPERTIES panel, and for
| | 01:09 | the Instance Name, I am
going to type in vid1_btn.
| | 01:15 | So that's the first button's Instance Name.
| | 01:18 | Second button is going to follow the
same format, vid2_btn, just like that.
| | 01:24 | And now I am going to go ahead
and make this first button work.
| | 01:30 | So vid1 button, in fact, I am going to
do a Command+C to copy that. All right.
| | 01:36 | I do have this empty LAYER down here, so
I will just delete that by hitting that
| | 01:40 | trashcan, and I want to make a new LAYER
at the top, and I am just going to call
| | 01:45 | AS, for ActionScript.
| | 01:47 | I am going to select that first frame.
I am going to open up my Actions panel,
| | 01:53 | and the first thing I am going to do is
just Pin my code by selecting that Push Pin.
| | 01:59 | Now my code will always stay up,
regardless of what I have selected. All right.
| | 02:02 | So I am going to type in a comment, and
I am going to Listen for the buttons to
| | 02:08 | be clicked on, and then I
am going to do something.
| | 02:13 | If I do a Command+V, there is my vid1_btn.
| | 02:17 | I need to add an EventListener for this button.
| | 02:22 | So again, as soon as it highlights,
you can hit Return, and it will add it.
| | 02:26 | Now I can add the Type.
| | 02:28 | The Type, well, it's going to be
MouseEvent.CLICK, so I am listening for the
| | 02:34 | click of this button, and
I am going to add a comma.
| | 02:38 | So once this is clicked on, I need
to go ahead and reference a function.
| | 02:43 | So the function I am going to make is
going to be playvid), parenthesis to close
| | 02:49 | it, semicolon, and now I can go
ahead and create my function, playvid.
| | 02:56 | It is going to accept a MouseEvent.
| | 02:59 | And I can kind of tab through, I am
just using my arrow keys to select
| | 03:03 | MouseEvent, and this is the
structure for a basic function.
| | 03:08 | Within these two curly braces, is
what it is going to execute when you
| | 03:11 | click on this button.
| | 03:14 | So what I need to do is when you
click on the button, I want to change the
| | 03:19 | Source of this video.
| | 03:22 | Okay, but notice this video is actually
inside of a movie clip, so I have just
| | 03:26 | minimized this ACTIONS panel just by
clicking on that gray bar, kind of move it
| | 03:30 | down out of the way, so I
can select this movie clip.
| | 03:35 | So in order to target this movie clip, I
need to give this movie clip an Instance Name.
| | 03:40 | I am just going to call it myVideoPlayer.
| | 03:45 | myVideoPlayer, so I am going
to do a Command+C to copy that.
| | 03:49 | I am going to paste it right in my code.
| | 03:52 | MyVideoPlayer., well, I am just
referencing the movie clip, I am not - if I
| | 03:57 | minimize this again, I am not
pointing to that FLV component yet.
| | 04:02 | So I need to double-click to
enter inside of that movie clip.
| | 04:05 | And I need to select that FLV.
| | 04:08 | So now I need to give this FLV
component an Instance Name as well.
| | 04:13 | So myFLV, technically, it is the FLV
playback component, but I do want to
| | 04:19 | remember this, in fact, I will copy it,
Command+C. Go back to my ACTIONS panel.
| | 04:24 | I will open that up and
then paste it right in there.
| | 04:27 | So myVideoPlayer.myFLV. I am targeting the
right thing. Now, I need to change its Source.
| | 04:33 | So I will do a period and type in
Source and I am going to make it equal to
| | 04:38 | the appropriate video. All right.
| | 04:40 | Well, where is that video?
| | 04:42 | Well let us take a look.
| | 04:43 | If I go out to my video folder, I can see
that this newport.flv is what I want to target.
| | 04:50 | So again, I am right here. I want to
go into the video folder and target that
| | 04:54 | newport.flv, so let me go back and right
within these Quotes, video/newport.flv. All right.
| | 05:03 | I need to do one more thing, because I
want to make sure it plays as well, I can
| | 05:08 | change the Source, but I am
not telling it to play yet.
| | 05:11 | Well, I am just going to copy this and
paste it below, because not only am I
| | 05:16 | changing the Source, I am
also going to tell it to play.
| | 05:22 | Now, I am going to go ahead and test
this, Control>Test Movie, so when I
| | 05:27 | click on this thumbnail, it's going
to change the Source of this file and
| | 05:31 | then it's going to play it.
| | 05:32 | (Movie Playing)
| | 05:37 | Great, works like a charm. In fact,
I want to do the same thing for
| | 05:41 | this thumbnail as well,
| | 05:43 | but the first thing I need to do is I
need to make sure that video exists.
| | 05:47 | So I am going to go to my Assets folder,
into video, and I am going to take this
| | 05:52 | tahoe.flv, and I am just going to right-
click, and Copy it, and I am going to go
| | 05:58 | ahead and put it in the appropriate
folder, right where the newport.flv file is.
| | 06:05 | So again, it's in the same location, so
I can go back into Flash, and I want to
| | 06:10 | do the same thing for vid2_btn.
| | 06:12 | So it's really just a matter of
copying all this code, Command+C, and
| | 06:17 | then pasting it below.
| | 06:19 | Now, I can start changing the Instance
Name to vid2_btn, and playvid2, which
| | 06:26 | calls this function, playvid2, and now I can
change the Source to tahoe. It's that easy.
| | 06:33 | It's just copying that code and pasting
it again for the second thumbnail, and
| | 06:38 | now when I click the second one,
| | 06:39 | (Video playing)
| | 06:45 | it plays that video.
| | 06:46 | I can come back to this first
one and play it.
| | 06:48 | (Video Playing)
| | 06:52 | So from here, I can add as many
thumbnails as I want for however many videos I
| | 06:56 | have, so you could really
start to build out your portfolio.
| | 06:59 | But again, Flash makes it easy.
| | 07:01 | It's just a matter of adding
EventListeners, just like you would, any
| | 07:05 | other button.
| | Collapse this transcript |
|
|
8. Adding AudioAdding audio to buttons| 00:00 | Audio is a great way to bring your site
to life and add confirmation on tasks,
| | 00:05 | such as adding rollover and click
sounds on buttons and that's what I'd like to
| | 00:10 | do this main menu is add
some audio confirmation.
| | 00:14 | So when you roll over any one of these,
you are going to hear like a highlight
| | 00:17 | sound and when you click on it, you are
going to hear like a button click sound.
| | 00:22 | So the first thing I need to do
is go to File and import my sound.
| | 00:27 | I am just going to import to my library
and in the sound folder, which happens
| | 00:33 | to be in the Assets folder, go to sound
and what I want to do is I want to add
| | 00:39 | the rollover.mp3 and the clickSwoosh.mp3,
| | 00:45 | but notice I can actually import
all sorts of different sound formats.
| | 00:51 | So just take a look at this list if you ever
want to determine what sound can be imported.
| | 00:56 | Of course, MP3 is really
popular, so that's what I'm using.
| | 01:00 | Okay, Import to Library and if I
minimize the Properties panel, right in there,
| | 01:07 | you'll see the clickSwoosh and
you'll see that rollover.mp3. All right.
| | 01:12 | I want to add it to all these
buttons including this Home button.
| | 01:16 | So I am going to first double-click to
enter inside of the content movie clip
| | 01:21 | and then I am going to double-click
again to enter into this Home button.
| | 01:26 | So notice right up here at the top in
the timeline, I have my various Over,
| | 01:31 | Down and Hit states.
| | 01:33 | So what I need to do is I need to
create a new layer by clicking the New layer
| | 01:37 | button and I am just going to type in Sound.
| | 01:40 | So this is where I want to add my audio and I
want to add my audio right in this Over frame.
| | 01:46 | So what I need to do is I need to right
click and I need to insert a keyframe.
| | 01:51 | So at this point in the state of the
button, I want to add that audio track.
| | 01:56 | Okay, so with that frame selected, I
am going to open up the Properties panel
| | 02:00 | and right underneath Sound, you might
need to twirl it down if you don't see it,
| | 02:05 | I can select the name.
| | 02:06 | So here it is going to list out all of
the audio tracks that I have imported.
| | 02:10 | Now since this is the Over state,
I am going to select rollover.mp3.
| | 02:16 | Now I am just going to
confirm that the Sync is Event.
| | 02:19 | I can also use Start.
| | 02:21 | The last thing you want to use is
Stream because Stream will not play the audio
| | 02:25 | track for you, in this particular case.
| | 02:27 | So I am just going to leave that on Event.
| | 02:30 | That's looking pretty good.
| | 02:32 | Maybe for the Down state,
I will do the same thing.
| | 02:35 | I am going to insert a
keyframe and on that keyframe,
| | 02:38 | If I go over to Properties, I can
select clickSwoosh, because that is going to
| | 02:43 | be on the Down state.
| | 02:44 | It is kind of a click sound with a slight
swoosh since this interface turns. All right.
| | 02:51 | Sync is set to Event and we are
looking pretty good. All right.
| | 02:56 | With that done, I am going to go to
Control>Test Movie and if I click on it, you
| | 03:03 | can hear the sound and when I roll
over it, you can hear it activates.
| | 03:07 | So let me rollover it again.
| | 03:08 | So you could hear those two sounds.
| | 03:15 | Now you can play with the
volume if you want to as well.
| | 03:17 | It is just a fine balance as far
as getting the sound that you want.
| | 03:21 | But luckily, if you ever want to edit
any of this audio, you can always come in
| | 03:25 | here and with that frame
selected where the audio is,
| | 03:28 | you can always select this Pencil icon,
which allows you to edit the sound envelope.
| | 03:34 | So here you can raise or lower
the volume of that particular sound.
| | 03:38 | So, all right it is looking good so far.
| | 03:41 | So, what I want to do is I want to
really add those same sounds to other buttons.
| | 03:46 | So all I am going to do is just go
ahead and select those three frames and
| | 03:51 | right-click and Copy Frames.
| | 03:55 | Now if go back to the content movie clip,
I can double-click on the About movie
| | 03:59 | clip and it's the same process of
adding a layer called Sound and then right in
| | 04:05 | here, I can go ahead and
Paste Frames, just like that.
| | 04:11 | So I am just going to repeat this
process by going into that particular button,
| | 04:16 | creating a new layer, selecting all
of those frames and pasting them in.
| | 04:22 | And the last one, I am going to double-
click on portfolio, create a new layer,
| | 04:29 | select all those frames.
| | 04:31 | Notice when I paste it in, it is actually
going to change the name of that layer as well.
| | 04:35 | Paste Frames, it changes it to sound.
| | 04:38 | I like how it does that.
| | 04:39 | Let's go to Control>Test Movie.
| | 04:41 | Again, I am just going to be quiet for
a second and so you can listen to these
| | 04:46 | various button sounds.
| | 04:48 | (Button sounds)
| | 05:06 | Looks like everything is working. This does
get hung up a little bit and I am going
| | 05:10 | to talk about that later how to kind
of take care of the little transitions
| | 05:13 | that might get stuck.
| | 05:14 | But in general, you can hear all the
audio and I can get as elaborate as I want
| | 05:19 | with the audio, but I like how I am
able to integrate audio into the user
| | 05:24 | experience to give the users
confirmation as to what they are doing.
| | Collapse this transcript |
| Adding audio to dynamically created buttons| 00:00 | One issue you might run into is how to
add sound to buttons that are created
| | 00:05 | with ActionScript and that's what's
going on here with this portfolio, because
| | 00:10 | I want to add just some click sounds when the
user clicks on any one of these portfolio items.
| | 00:17 | So that's what I want to do.
| | 00:18 | I am going to close this SWF and
I am going to go to the Timeline.
| | 00:22 | So within this portfolio.fla, I need
to open up that ActionScript layer,
| | 00:29 | this very first frame.
| | 00:31 | I am going to go to Window>Actions.
| | 00:33 | So here's where all my code is written
and right down here when you click on
| | 00:39 | any one of the images, it's going to
fire off this function. This is where I
| | 00:43 | need to add my audio,
| | 00:46 | but I am going to start off at the very top.
| | 00:48 | Right up here at the top, I am just
going to do two forward slashes so I can add
| | 00:52 | a comment and I am just going to type in SOUND.
| | 00:56 | This is where my sound item is going to go.
| | 00:59 | It's going to be a variable, so var
clickSound is what I am going to make.
| | 01:04 | I'm telling Flash that it's a sound
and here's where I create a new sound
| | 01:13 | from the Sound class. All right.
| | 01:16 | So here's where I create this variable
called clickSound from this Sound class.
| | 01:22 | But there's nothing in it yet.
| | 01:24 | I actually need to do a URL request and
I need to go out and grab that sound and
| | 01:30 | then put it inside of this variable.
| | 01:32 | So what I am going to do is I am going
to go out to my desktop into my Assets
| | 01:38 | folder. I am going to click on sound
and this is the file that I want to play.
| | 01:42 | So I am going to copy this click.mp3
and I am going to move it into the folder
| | 01:48 | that I am working in.
| | 01:50 | So I am actually going to create a
new folder just so I can keep everything
| | 01:53 | organized and I am going to call this sound.
| | 01:56 | And in this folder, that's where I
am going to paste that click.mp3.
| | 02:00 | So again, this is the
portfolio.fla that I'm working in.
| | 02:04 | So If I go back to it, for new sound
what I need to do is I need to type in new
| | 02:09 | URLRequest, an open parenthesis,
open quote, sound, forward slash, click.
| | 02:17 | So it's in the sound folder,
click.mp3 is what I am after.
| | 02:22 | I need to close that quote and close
that parenthesis, so make sure you have two
| | 02:26 | down here at the end.
| | 02:28 | But in essence, what's happening is it's
taking and grabbing that mp3 and putting
| | 02:32 | it right in this variable.
| | 02:34 | So I am actually going to copy this
variable, scroll down to where I want to use
| | 02:39 | it, right inside of this function.
| | 02:41 | So about Line 52 right now, I want
to paste in that clickSound variable.
| | 02:47 | All I need to do is type in a
period and type Play and open and close
| | 02:53 | parentheses. End it with a semicolon. All right.
| | 02:57 | So that's all I need to do, but
let's go ahead and test this out.
| | 03:01 | Now as I click on these buttons,
you should hear a click sound. Great!
| | 03:12 | It works like a charm, works great and
what's happening is I've made this sound
| | 03:18 | variable that grabs this click.mp3.
| | 03:22 | So I do need to remember to make sure I
always have this click.mp3 in this sound
| | 03:28 | folder in relation to where the SWF file is.
| | 03:32 | So if I upload this site to a web server, I
need to make sure this mp3 travels with it.
| | 03:37 | But it's pretty easy to implement,
took me two lines of code and works great.
| | Collapse this transcript |
|
|
9. Completing the Web SiteApplying professional transitions| 00:00 | So as you are developing but before
you complete your site, you want to give
| | 00:05 | your site a quick review just to
see how everything is functioning, and
| | 00:09 | currently, it seems to be
functioning pretty well.
| | 00:12 | I can click on the About section and
what I do see is this content actually
| | 00:17 | comes up before the transition finishes.
| | 00:20 | Not only that, if I click on
video, it does get stuck sometimes.
| | 00:25 | And what's going on there is Flash
is trying to do too much at once.
| | 00:30 | It's trying to move this big background
and then it's trying to load in this video.
| | 00:34 | So I really want to have an
orderly process for these transitions.
| | 00:40 | So really, when the transition
completes or the tween completes, that's when I
| | 00:45 | want the content to load in. All right.
| | 00:49 | So I have the index.fla file open and
I am going to select that first frame
| | 00:55 | there in the AS layer.
| | 00:56 | I am going to open up my Actions panel
and I am going to move this up a touch,
| | 01:00 | and pin my code down there at the
bottom, just by pressing that Pushpin.
| | 01:04 | Now I can go ahead and take a look at
this, because what's going on in is I have
| | 01:10 | three tweens that are making this move
and rotate, and I want these tweens to
| | 01:15 | happen and then even finish before
it loads into that particular section.
| | 01:21 | So I need to go ahead and
implement a complete of the tween.
| | 01:24 | So that's what I need to listen for.
| | 01:27 | It's all about creating a new EventListener.
| | 01:30 | I have my rotate tween.
| | 01:32 | I am just going to copy that, Command+C,
Command+V, because I want to listen for
| | 01:37 | this tween variable.
| | 01:39 | And I am going to add an EventListener to it.
| | 01:41 | And what I am going to listen for is a
TweenEvent, and I am going to listen for
| | 01:47 | the MOTION_FINISH, so you can see all
these various things, I can listen for.
| | 01:53 | I want to listen for the MOTION_FINISH.
| | 01:56 | Select that, comma, and I can go
ahead and type in donePlaying.
| | 02:01 | That's going to be the function
name that I am about to create.
| | 02:05 | Okay, so the first thing I do before I
even get into that function is I am going
| | 02:09 | to make reference to this.
| | 02:10 | I have this TweenEvent.
| | 02:12 | Now this is actually a class that I
need, so there is code that I need in
| | 02:18 | order to make this work.
| | 02:20 | So if I scroll up to the top,
notice that I have imported tween, I have
| | 02:25 | imported some easing, some other things, but I
haven't imported that particular TweenEvent.
| | 02:31 | So I am going to type in import fl.
transitions and I am going to type in TweenEvent.
| | 02:42 | So I am telling Flash to go get all
this code to make this MOTION_FINISH work.
| | 02:48 | Now that that's done, I can
create this donePlaying function.
| | 02:52 | So function donePlaying, TweenEvent, the
basic structure of a function, just like that.
| | 03:07 | Now I need to just move this
sectionLoader.source right into this function.
| | 03:13 | So I should have two curly braces down
here. In fact, I'll remove that line.
| | 03:17 | And again, what you are going to want
to do anytime you add a function or add
| | 03:21 | these curly braces is select the
Autoformat button and it will line everything up.
| | 03:25 | All right.
| | 03:26 | It's looking pretty good.
| | 03:28 | So when the rotation finishes, it's
going to go ahead and fire off this
| | 03:34 | donePlaying function.
| | 03:35 | Let's do a Test Movie.
| | 03:40 | So if I click About, not until this
rest into place, do I see this content.
| | 03:47 | But let's take a look at the
issue it brings up, because if I click
| | 03:51 | another section, such as Video,
that About content stays up until that
| | 03:59 | Video content loads.
| | 04:01 | So I need to remove content for a short
period of time during this transition.
| | 04:08 | So right up here in the same
moveContent function below these trace statements,
| | 04:13 | I need to go ahead and have a
sectionLoader.source and I am going to make this
| | 04:20 | equal to absolutely nothing.
| | 04:22 | So I'll just type a null.
| | 04:25 | So this, all this is doing is kicking
out anything that's in the sectionLoader,
| | 04:32 | until the transition is done and then
it will load in the appropriate content.
| | 04:37 | So I am going to go to Control>Test
Movie, in the About section, just like
| | 04:42 | that, content loads in, if I click
Video, this content should disappear, and
| | 04:50 | sure enough, it does.
| | 04:51 | So everything is working out pretty well.
| | 04:54 | This content loads in when
the transition has finished.
| | 04:58 | Notice it will also happen
for the portfolio section.
| | 05:02 | So again, establishing an order of
priority for these transitions is really
| | 05:07 | going to help the
performance of your Flash website.
| | 05:10 | And what I want to do next is even add
some other transitions that are really
| | 05:14 | going to bring my site to life.
| | 05:16 | For instance, if I just replay this
from the start, I'll just do a Test Movie,
| | 05:22 | let's take a look at the background.
| | 05:25 | It just kind of appears.
| | 05:26 | In fact, I see this flash of blue and
then all of a sudden I'm hit with this
| | 05:29 | pretty striking image.
| | 05:31 | So I definitely want a smoother
transition, as opposed to feeling like the user
| | 05:35 | is getting slapped in the face, I
am going to give it a little fade in.
| | 05:39 | Okay, so right up here at the top, at
least near the top, this is where I am
| | 05:44 | loading in the random
background, from one to ten.
| | 05:47 | And I am just going to remove some of
those line breaks, kind of nest everything
| | 05:51 | together, because what I want to do is
I want to load in that random image and
| | 05:55 | once that image is loaded in, I want
to go ahead and do a tween, just kind of
| | 06:01 | like I am doing down here.
| | 06:03 | Okay, so again, it's going to
be adding another EventListener.
| | 06:06 | So you can see I'm really
using EventListeners a lot here.
| | 06:09 | I am going to type in background image
and I am going to add an EventListener to
| | 06:18 | this background, and I am going
to listen for the Event.COMPLETE.
| | 06:23 | So once the image is loaded in, once
it's completed, I am going to type in
| | 06:29 | fadeIn, because that's what I want to happen.
| | 06:33 | So that's going to be my function name,
fadeIn, capital E for Event, just like that.
| | 06:43 | Typical structure for a function
and that's looking pretty good.
| | 06:46 | So I'll even type in a comment.
| | 06:55 | That's what I want to happen right here.
| | 06:56 | When it's loaded, go ahead and fadeIn the image.
| | 06:59 | So now that I have this function in
place, I can go ahead and use a tween.
| | 07:06 | So I am going to use a similar tween to this.
| | 07:10 | In fact, just to help me out, I am
going to select this tween and I am going to
| | 07:14 | copy it and paste it up here.
| | 07:17 | Okay, so instead of myxTween, it's
really going to be changing the Alpha.
| | 07:23 | Alpha is the transparency of an item.
| | 07:27 | So var myAlphaTween.
| | 07:30 | Well, don't change the content_mc.
| | 07:31 | Change the background mc.
| | 07:33 | So I'll copy and paste that right in
there, and alpha is the property I want to
| | 07:39 | change, right down here, I don't
want to refer to the position at all.
| | 07:43 | In fact, I want to refer to a number.
| | 07:45 | I am going to start at zero.
| | 07:48 | Zero means it's not visible at all.
| | 07:51 | So it's 100% transparent.
| | 07:53 | I want to go from totally
transparent to opaque, which is 1.
| | 07:59 | Now I might want varying
degrees of transparency.
| | 08:03 | So if I want this at about 80% and I
kind of do because the background is pretty
| | 08:08 | bright, well, I'll put .8 in there
and that's the equivalent of doing 80%.
| | 08:13 | So that's looking pretty good.
| | 08:15 | It is going to happen over
the course of one second.
| | 08:18 | So I am going to just click that gray bar to
remove my Actions panel, nested up at the top.
| | 08:26 | Another thing I want to do is I really
don't want the background to be blue.
| | 08:32 | What I need to do is just go ahead
and change my Document properties.
| | 08:35 | So I am going to Modify up to Documents
and I am going to change the Background
| | 08:41 | color because I always want
this page to start on black.
| | 08:45 | So black is selected. I am going to select OK.
| | 08:48 | Now if I expand open the Actions panel,
that image is going to fade in as soon
| | 08:53 | as the image gets loaded.
| | 08:55 | So let's try this out. Test Movie.
| | 08:58 | It fades in nice and smooth.
| | 09:00 | I really like that. In fact,
let's do it one more time.
| | 09:03 | I can see it fade in.
| | 09:07 | Now not only do you want to review
and prioritize how your content gets
| | 09:10 | loaded, you can also,
obviously, add some very nice transitions to
| | 09:15 | other content you'd like, such as the
images in the portfolio section or maybe
| | 09:20 | fade in the About section.
| | 09:22 | Either way, it really does add a
nice professional look to your website.
| | Collapse this transcript |
| Creating a preloader| 00:00 | One of the final things you're
going to want to do with your site is make
| | 00:04 | sure you're using
preloaders where you need them.
| | 00:06 | Well, what is a preloader?
| | 00:08 | It's basically an indicator that
tells the user what's going on.
| | 00:12 | Usually, it's a percentage preloader that
tells the user how much has been downloaded.
| | 00:17 | So really you just want to review your
content, determine the larger items, say,
| | 00:22 | for instance, I am going to go into the
portfolio section and just take a look at these images.
| | 00:28 | Now I could actually put some pretty
large images in here. Currently, these ones
| | 00:32 | are fairly small, but as I add to my
site, I could have some very large images.
| | 00:37 | So that's where I'm going to use the
portfolio.fla to add my preloader to.
| | 00:42 | So I'm going to double-click on the
portfolio.fla and I'm going to go that first
| | 00:48 | frame in the AS layer.
| | 00:50 | Then I am going to go to Window
and open up the Actions panel.
| | 00:53 | Now I'm going to go ahead and pin my code.
| | 00:56 | So it doesn't move in case I select
something else. I'll move this up.
| | 01:02 | Now just to kind of review, I do have
this very large loadThumbnail function and
| | 01:08 | in this loadThumbnail function, it
creates the thumbnails and then also has this
| | 01:13 | EventListener that listens for the Click.
| | 01:16 | So this is where I want to put my
preloader when they click on the thumbnail.
| | 01:21 | I then want to update a text field letting
the user know that the image is being loaded.
| | 01:29 | What I want to target is this largeUILoader.
| | 01:32 | That's what I want to reference.
| | 01:34 | So I'm just going to copy this name and
add a comment, Add Preloader to images.
| | 01:47 | largeUILoader, well, just like most
things in this code, it's actually an
| | 01:52 | EventListener so I'm going to add an
EventListener and this EventListener is
| | 02:01 | going to be a ProgressEvent.PROGRESS is
going to be the specific method that I'm
| | 02:10 | going to go ahead and listen for.
| | 02:12 | So I'm going to select PROGRESS and as
pieces of this image gets downloaded,
| | 02:19 | the Progress is going to update and the
Progress is really going to fire off a
| | 02:25 | function, so I'll just type in
largeImagePreloader as that function name.
| | 02:33 | So as bits are downloaded,
fire off this largeImagePreloader.
| | 02:37 | So I'll copy that name, just beneath
this EventListener, I'm going to go ahead
| | 02:42 | and type in function largeImagePreloader.
| | 02:47 | It's going to be an event:
ProgressEvent, there it is.
| | 02:53 | As soon as it highlights, you can hit
Enter, but I need to make sure this and
| | 02:57 | this matches up and then the typical
structure of a function is what I'll add.
| | 03:05 | Between these two curly braces is
where I want to put my preloader.
| | 03:10 | So maybe the one I want to
try initially is a trace.
| | 03:14 | So in this trace statement, just for my
own testing purposes, I'm going to see how
| | 03:18 | often this Progress is firing off.
| | 03:21 | In fact, I'll just type in loading.
| | 03:22 | I'm going to go ahead and select auto
format just to make sure everything is
| | 03:29 | lined up and everything within this
function is going to fire off at the
| | 03:32 | Progress of this JPEG that's being downloaded.
| | 03:36 | So I went to Control>Test Movie, here
are my images and in order to simulate
| | 03:41 | download, what you need to do is go
under View, and you should first check
| | 03:47 | your Download Settings.
| | 03:49 | Now I have mine set to 56K. I'm not
really targeting 56K modems, but just to
| | 03:55 | show you the progress, you
probably want to test DSL.
| | 03:59 | But as soon as you have the appropriate
one checked, you can Simulate Download.
| | 04:03 | So select that and let's give it a second.
| | 04:06 | It might take a little longer
since it's a 56K modem and that makes
| | 04:11 | you appreciate DSL.
| | 04:12 | But this is a good test, because it's
slowly going to try to load in all of
| | 04:17 | these thumbnails and there are all my images.
| | 04:23 | So if I select any one of these, I
click on it in my Output panel, you
| | 04:28 | should see it loading.
| | 04:29 | In fact, I'll just scoot this over a touch.
| | 04:32 | Click, you can see loading.
| | 04:33 | It gets fired off,
actually many, many, many times.
| | 04:37 | Now I am going to just go ahead
and click in the Output panel.
| | 04:39 | just to scroll through and
show you that how many times it's being
| | 04:43 | printed out, plenty of times.
| | 04:45 | So let's go back to my code. I am
going to go to Window>Actions and right in
| | 04:51 | here, instead of my trace statement,
I'm going to type in the code I need.
| | 04:55 | So I want to create a variable called
percent and it's going to be a Number.
| | 05:02 | This number is going to be equal
to the event.bytesLoaded, divided by
| | 05:12 | the event.bytesTotal.
| | 05:18 | Event.bytesLoaded is this
event is basically what's called.
| | 05:22 | So it's going to be that
largeImage is what event is referring to.
| | 05:25 | So it's going to take the
bytesLoaded and divide it by the bytesTotal.
| | 05:29 | It actually returns a very small integer, so
what I need to do is I need to multiply it.
| | 05:34 | In fact, since I want this to be a
percentage, I'm going to wrap this in
| | 05:38 | parentheses and from there, what I can
do is within those parentheses I can
| | 05:44 | multiply it by 100, because
these will only return zero to one.
| | 05:49 | This will give me more of a realistic
percentage number, but it's not going to
| | 05:52 | be a whole number either.
| | 05:54 | If that's the case, what I
need to do is type in Math.round.
| | 05:59 | This will round this non-whole number up
or down to the nearest whole number and
| | 06:07 | put it within this percent variable.
| | 06:10 | Now I can go ahead and use that percent
and I could do another trace statement,
| | 06:15 | but what I want to do is I want
to put it inside of a text field.
| | 06:19 | So I'm going to go ahead and select the
Text tool and in the Timeline panel, move
| | 06:25 | that out of the way, I'll
expand this out a little bit.
| | 06:30 | Underneath mainimage, I'm going to
create a New layer and this is just going to
| | 06:35 | be called preloader and now let me
go ahead and turn off that mainimage.
| | 06:40 | But basically where it was is where
I want to go ahead and a text field.
| | 06:45 | So there's my text field. I'm going to
kind of adjust it accordingly and with
| | 06:50 | that text field selected, I want to
look in my Properties panel and make sure
| | 06:54 | it's set to Dynamic Text.
| | 06:56 | You also want to make sure that you
have the Color that you want, the Size of
| | 07:01 | the font that you want as well.
| | 07:03 | Lastly, I need to give it an Instance
name of percent_txt, because it is a text
| | 07:11 | field and I will copy that name.
| | 07:14 | Now I'm going to go back into my code
and right within this function, I can paste
| | 07:20 | percent_txt and I can type in text
is equal to percent right here,
| | 07:26 | That's what I want.
| | 07:29 | And I don't want to just show those numbers.
I want to add, within the quotes, a percentage sign.
| | 07:35 | All right. Now that is looking pretty good.
| | 07:37 | In fact, I'll just end with a semicolon.
| | 07:40 | It's going to go ahead and give me the
percentage and put that Percentage sign
| | 07:44 | right next to it and I can
go ahead and test this out.
| | 07:48 | Now so you'll notice that this actually is
misspelled, so I need to say percent. All right.
| | 07:55 | That should take care of it.
| | 07:56 | I'm going to a Test Movie.
| | 07:57 | There are my images.
| | 08:00 | Now it's not tracing out anything,
because what I want to do is I actually want
| | 08:04 | to see the text field in the center there.
| | 08:06 | So I'm going to change my Download
Settings to DSL and I am going to go to
| | 08:11 | View>Simulate Download.
| | 08:14 | So I'm going to select this and you're
going to see the images load down here.
| | 08:21 | With them loaded, I'm going to go ahead
and select an image and you can see the
| | 08:26 | percentage working, just like that.
| | 08:31 | So it's fairly straightforward because
it is an EventListener and we're getting
| | 08:36 | used to EventListeners.
| | 08:37 | It's just a matter of getting the
bytesLoaded divided by the bytesTotal and
| | 08:42 | making sure the
bytesLoaded is multiplied as well.
| | 08:45 | But I can go ahead and use this, I can
copy it, I can paste it into any of the
| | 08:49 | other sections for any other item I
want to add a preloader to and it will
| | 08:54 | work just fine.
| | Collapse this transcript |
| Publishing a web site| 00:00 | The last step in creating a
portfolio site is publishing it, which is a
| | 00:04 | very exciting part of the process, because
it's my chance to show the site to the world.
| | 00:10 | So I actually want to
start in this index.fla file.
| | 00:13 | I'm going to open it up, in Flash of
course, and I'm going to just go to
| | 00:18 | the Publish Settings.
| | 00:20 | So File>Publish Settings.
| | 00:23 | In the Publish Settings dialog box, you
can see that I have Flash checked, I have
| | 00:27 | HTML checked and then I can also
publish out to these different mediums.
| | 00:31 | But again, this is a website, so I'm
going to make sure these two are checked.
| | 00:36 | Let's take a look at the
details of each one of these.
| | 00:39 | I'll leave the file name alone.
| | 00:41 | I'm going to click on the Flash tab first.
| | 00:43 | So just to review, this site does
require the Flash 10 Player and now the Flash
| | 00:49 | 10 Player, most users have it, I
think it's about 95%, if not more.
| | 00:55 | So you definitely covered as far as
the Flash Player version that they need.
| | 00:59 | Now one thing I do want to
point out is the Audio event.
| | 01:03 | If your audio sounds degraded in any way,
you might want to come in here and set
| | 01:08 | the audio to something higher, so I'll
keep it at MP3, but I might want to up to
| | 01:14 | the Bit rate to as high as say CD-quality.
| | 01:19 | Something like that would be a good idea
to do. Other than that, I'm going to make
| | 01:23 | sure Compress Movie is selected
and everything else is looking good.
| | 01:27 | Let me go over to the HTML tab and I
can take a look at what I have available.
| | 01:33 | the Template, I'm going to use Flash
Only - Allow Full Screen, because I do have
| | 01:38 | a Video section that has
those Full Screen buttons.
| | 01:42 | So I'm going to make sure that's selected.
| | 01:45 | As for the rest of this, it's pretty
typical. I want the quality to be high and
| | 01:50 | really, for the most part, you don't
need to change any of these values.
| | 01:54 | So really, all you need to do from
there is click the Publish button.
| | 01:59 | What that generates, as I select OK
and minimize Flash, it will create this
| | 02:05 | HTML and this SWF file.
| | 02:09 | So let's take a look at it.
| | 02:10 | I'll just double-click on this HTML and
it'll open up in a browser, my website.
| | 02:17 | So here it is and I can go ahead and
navigate through it and you pretty much can
| | 02:23 | see what it's generated.
| | 02:25 | Now it's loading up different
content as well, this about.swf.
| | 02:29 | So let me close my browser, because I
just do want to point out that I have to
| | 02:34 | make sure all of these files right here,
including these folders, all need to be
| | 02:40 | uploaded with my site.
| | 02:43 | The only things that don't get uploaded
are, of course, these files, these working
| | 02:48 | files, the FLA files. So that's it.
| | 02:51 | That's all you need to do.
| | 02:52 | Once you have everything published,
you can go ahead and share your site
| | 02:55 | with the world.
| | Collapse this transcript |
|
|
10. Bonus SitesReviewing the "corporate" Flash site| 00:00 | Also in the Exercise Files
folder is a BonusSites folder.
| | 00:05 | So, there are two sites in here.
| | 00:07 | I'm going to review the Corporate site and I'm
just going to double-click on this index.fla.
| | 00:12 | So, with this file open, I'm going to go
to Window and open up the Actions panel
| | 00:17 | and I'm going to make sure
that this first frame is selected.
| | 00:20 | I'm going to focus on the area that has
been changed and if you take a look at
| | 00:24 | this function, something
has been changed in here.
| | 00:27 | I'm curious as to whether you know
which direction this content is moving.
| | 00:32 | Well if you'd guess x, you'd be right
because it is going to move horizontally, so
| | 00:36 | back-and-forth this content is going to move.
| | 00:39 | So, let's go ahead and take a look at it.
Notice that this moveContent only
| | 00:42 | accepts two parameters.
| | 00:44 | This first one being a number and then
either null for the home information or
| | 00:49 | an swf file, depending of the section.
| | 00:51 | So, I'm going to go to Control>Test
Movie and as I roll over each one, you do see
| | 00:57 | a little bit of a distortion
going on, so just an added effect.
| | 01:01 | But I can go ahead and click on Video.
| | 01:05 | That's going to shift, again,
horizontally and I can play that video.
| | 01:12 | I can click on the About section that
will shift again horizontally. We are just
| | 01:15 | moving back-and-forth, displays the
content, just some different options for you
| | 01:19 | and then I can click Portfolio and
then it will load in the Portfolio.
| | 01:23 | In this case, the Portfolio scrollbar
is vertical, so this scroll pane has been
| | 01:29 | adjusted and if I select an image, it will load in.
| | 01:32 | So just some different options that you can do.
| | 01:35 | Feel free to take this site and
learn from it and modify all you want.
| | Collapse this transcript |
| Reviewing the "artistic" Flash site| 00:00 | In the Exercise Files folder, there's a
BonusSites folder and in there is also an Artistic site.
| | 00:07 | I'm going to just double-
click on this index.fla.
| | 00:09 | So, if you'll notice one this
screen here, look at all these
| | 00:13 | UILoader components.
| | 00:15 | Well, if you could imagine,
different images are being loaded into every
| | 00:19 | single one of these.
| | 00:20 | And again, all those images are external.
| | 00:22 | There is another little
interesting thing that's going on in here.
| | 00:25 | If I select that first frame, go to Window,
down to Actions, I can open up this code.
| | 00:30 | All right. It might seem like a lot, but let's
take a look at this loadContent function,
| | 00:37 | because not only is it adjusting the
Position for each the X and Y, but it's
| | 00:43 | also going to scale the context,
| | 00:45 | its X and Y Scale, and
that's being used right in here.
| | 00:50 | So, I'm going to close that and let's
take a look at what this looks like.
| | 00:54 | I'm going to go Control>Test Movie,
content loads in, I'll click on Video,
| | 01:03 | scales up and then the
videos load and I can play them.
| | 01:09 | Now I can even jump to the About section,
just by clicking there. It'll shift to
| | 01:14 | the About and you can see that
content and then even Portfolio.
| | 01:19 | So, look at how this content has
scaled down, allowing for a lot of room for
| | 01:24 | all of these images.
| | 01:25 | So, just some other options that you
can do with the same code that I've
| | 01:30 | covered, just using it in a different
way and modifying different properties.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thank you so much for watching.
| | 00:01 | I hope you've enjoyed everything that
you seen and hopefully I'll see your
| | 00:05 | work online some time.
| | 00:06 | So, feel free to send me any website
that you might have created based on
| | 00:10 | what you've learned.
| | Collapse this transcript |
|
|
