IntroductionWelcome| 00:04 | I'm Paul Trani and welcome to Creating a
First Web Site with Flash Professional CS5.
| | 00:09 | I'm going to show you how to
create a web site from the ground up.
| | 00:13 | We'll take a look at the fundamentals
of web design and how to apply them to
| | 00:17 | a real-world project.
| | 00:19 | We'll start with a dynamic design
and add some eye-catching animation.
| | 00:24 | I'll then show you how easy it is to
add interactivity, as well as a gallery
| | 00:28 | that can dynamically load in
as many images as you want.
| | 00:32 | I'll also demonstrate how to
incorporate video with custom controls.
| | 00:37 | That's actually synched with other graphics.
| | 00:40 | And to round out the
experience, we'll add audio.
| | 00:42 | I'm going to show you how to do all of
this and much more using Flash CS5, which
| | 00:49 | really makes it easier than
ever to create great content.
| | 00:52 | So let's roll up our sleeves and get
started in creating your first web site
| | 00:56 | with Flash Professional CS5.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you have access to the Exercise
Files for this course, you can put them on
| | 00:04 | your Desktop as I have done here.
| | 00:06 | I'm going to go ahead and double-click
on that file and you'll notice that it
| | 00:09 | will contain chapter folders for each
chapter, and notice they contain Begin and
| | 00:16 | then Final folders as well.
| | 00:18 | Also notice that there is an Assets
folder and Final folder, which contains
| | 00:23 | the final web site.
| | 00:25 | Now, if you don't have access to these
files, you can also follow along with
| | 00:29 | your own files as we
proceed through this course.
| | Collapse this transcript |
|
|
1. Getting StartedUnderstanding web design| 00:00 | I'd like to start off by giving
you good overview of web design.
| | 00:04 | So web design at a high level is the
design of online content, regardless of
| | 00:09 | what that content is.
| | 00:11 | In this case it happens to be a web site.
| | 00:13 | And a web site should
really do a couple of things.
| | 00:16 | It should achieve your specific
business goals and it should be well
| | 00:20 | organized and easy to use.
| | 00:22 | So just keep in mind the user has goals as well.
| | 00:25 | When it comes to your web site goals,
you need to of course figure that out.
| | 00:29 | Is it to inform or kind of tell
about yourself or your services?
| | 00:34 | Is it to sell something?
| | 00:35 | Is it to connect with potential clients?
| | 00:37 | It could be all of those things, but
clearly define what those goals are and
| | 00:42 | then any decisions you make
should be made based on those goals.
| | 00:45 | The result ultimately is going to
be the content for your web site.
| | 00:49 | So in this example I might have Jill
Simons who is interested ultimately in
| | 00:55 | gaining more clients.
| | 00:57 | So she might start selling herself,
talking about her education, her
| | 01:01 | experience, show off some of her work,
and of course give users the ability to
| | 01:07 | get in touch with her.
| | 01:08 | So the next step is keeping in mind the
users' goals, because they want it to be
| | 01:13 | easy and intuitive. A simple to
navigate site, which has clearly to use
| | 01:18 | navigation, everything is really
buttoned up, and they want it to be easy, with
| | 01:23 | minimal clicks to get at their next destination.
| | 01:26 | So result is going to be all of
the web content in a site map form.
| | 01:31 | So back to our example, we might have,
again, the URL, people come through to
| | 01:36 | the homepage and from the homepage or
from any page for that matter, they can
| | 01:41 | get to any other page, and there might
be some other external links as well, but
| | 01:46 | again, simplicity is the key here.
| | 01:48 | Some additional design considerations.
| | 01:51 | You do want to clear hierarchy of information.
| | 01:53 | You want the title potentially at the top
or at least larger than everything else.
| | 01:58 | You don't want information fighting
with one another, but a clear flow of
| | 02:02 | information is really important.
| | 02:04 | Next, you definitely want your
navigation grouped logically and in a really
| | 02:08 | clean sort of easy to use way.
| | 02:10 | And then also, if you have any
hyperlinks, you want to clearly differentiate
| | 02:14 | those from the content or the text itself.
| | 02:17 | The result is really going to be the web design.
| | 02:19 | So here's the design.
| | 02:21 | As you can see, it has a
hierarchy of information.
| | 02:23 | I know this is Jill's site.
She is a graphic designer.
| | 02:26 | I can read more about her.
| | 02:28 | My navigation is nested at
the top, really easy to use.
| | 02:31 | And then also, I can clearly see
that the content is off in the center point,
| | 02:35 | where we have other content up at the
top as well, which happens to be our buttons.
| | 02:40 | So everything flows pretty nicely.
| | 02:42 | So there are also some technical
considerations you need to keep in mind as well.
| | 02:46 | Well, quite frankly, can
everybody find the web site?
| | 02:48 | So the first thing you need to do is
really register a URL and make sure you
| | 02:52 | have a web site hosting plan potentially
for your web site, and once the site is
| | 02:57 | uploaded at this URL, you need to make
sure that everyone can see this content.
| | 03:03 | So do they have maybe a newer
browser with the Flash Player?
| | 03:07 | Luckily, so many people have the
Flash Player this is hardly an issue, but
| | 03:10 | it's definitely of note. All right!
| | 03:13 | So once they arrive at your site, you
need to determine and make sure your
| | 03:16 | content fits nicely on that page.
| | 03:20 | So we want to go ahead and take the
browser and subtract all the chrome from it
| | 03:25 | and what we get is sort of a canvas
size or a document size, if you will, of
| | 03:31 | 1000 pixels wide by about 600 pixels high.
| | 03:35 | So within those dimensions, I can go
ahead and make sure my design fits nice and
| | 03:40 | neat, and it will be ready to go.
| | 03:43 | To conclude, you want to keep in mind
all of your business goals and your users'
| | 03:47 | goals, as far as what they're trying
to do, and of course your technical
| | 03:51 | requirements as well.
| | 03:53 | Do all that and your site should be good to go.
| | Collapse this transcript |
| Creating the first Flash file| 00:00 | The first thing I am going to do
is I am going to create a new file.
| | 00:03 | And it's pretty straightforward.
| | 00:05 | I am given the Start menu here.
| | 00:07 | I do want to point out that you
can create files from templates.
| | 00:10 | So these are pre-built files
that are actually pretty powerful.
| | 00:14 | But again, what I want to do is
create a new file, and I am going to
| | 00:17 | select ActionScript 3.0.
| | 00:18 | So here is my new file. As you can see,
| | 00:21 | I can see the properties for it off to the side.
| | 00:24 | I can see my toolbar over on this side as well.
| | 00:27 | I am not crazy about this
workspace, so I can change it.
| | 00:31 | I am going to go to Window, down to the
bottom, Workspace, and I am going to go
| | 00:36 | ahead and select Classic.
| | 00:38 | So Classic actually gives
me my toolbar on this side.
| | 00:41 | It gives me the Timeline at the top,
some additional icons right here, and
| | 00:46 | again, I can sort of click on
any one of these to expand it out.
| | 00:49 | But what I want to do is I just want to
sort of open up a couple of panels that
| | 00:52 | I know are important.
| | 00:53 | Such as the Properties
panel and the Library panel.
| | 00:57 | So I really want to sort of put
these sort of on top of each other.
| | 01:00 | So I am just going to go ahead and
drop this one, sort of nest it right down
| | 01:04 | here underneath the Properties panel.
| | 01:07 | Because I know I am going to be
using the Library a lot, where I am going
| | 01:09 | to store a lot of graphics, and I am
going to be modifying those graphics'
| | 01:13 | properties as well.
| | 01:15 | And of course everything is
going to exist on the Timeline.
| | 01:18 | So again, these are the important
panels I want to be aware of and again they
| | 01:22 | allow me to do certain things.
| | 01:23 | In this case, for this document, with it
selected, I can go ahead and Edit the Size.
| | 01:29 | So again, the sort of first step is
just modifying the document size to
| | 01:34 | something more appropriate for a web.
| | 01:37 | 1000 pixels wide by about 600 pixels tall
will ensure that it fits in a browser nicely.
| | 01:44 | Click OK and there I am.
| | 01:46 | So all the Adobe shortcut
keys work just fine in Flash.
| | 01:52 | So if I hold on the Spacebar,
I can pan around like that.
| | 01:55 | I can hold down the Command and do a Plus
or Minus, or Ctrl key if you are on a PC.
| | 02:01 | But you can see I can start
to manipulate this area here.
| | 02:04 | I can also use this tool here, Fit in Window.
| | 02:07 | But in general, I am actually ready to design.
| | 02:10 | I can go ahead and start designing.
| | 02:11 | But what I definitely want to do for
sure is make sure my file is saved.
| | 02:16 | So I am going to File > Save.
| | 02:18 | I am going to save out this FLA file.
| | 02:20 | This is my working file, so I don't
want to throw this file away for sure, but
| | 02:24 | any file I create is going to
be based on this working file.
| | 02:28 | So I will click Save and now I am ready to go.
| | 02:30 | I can start designing in Flash.
| | Collapse this transcript |
|
|
2. Creating Graphics and TextCreating the first graphic| 00:00 | The first thing I am going to create is
a horizontal bar that will be my navbar,
| | 00:05 | as well as a quick graphic
that will eventually be a button.
| | 00:08 | So I am going to come down here in
my toolbar and I am going to select
| | 00:12 | this Rectangle tool.
| | 00:13 | And from there what I can also do is
start to select maybe a stroke color, such
| | 00:20 | as black and then even a fill color as red.
| | 00:25 | And then I can go ahead and draw sort
of this navbar, and I will just roughly
| | 00:29 | draw it in up here at the top.
| | 00:31 | So that's what I have drawn and I
then want to go ahead and select the
| | 00:35 | Selection tool, and I can go
ahead and click on this fill area.
| | 00:40 | And this is a common mistake.
| | 00:41 | You will click and just grab
the fill and not the stroke.
| | 00:44 | So I will just an Undo.
| | 00:46 | So you might want to double-
click in order to capture both.
| | 00:50 | So with both selected, I can
now move them around. Okay.
| | 00:54 | One thing I can do, because I want this
to be actually a smaller size, well,
| | 00:58 | I can go ahead and use the Free Transform
tool, third tool down, and I can adjust
| | 01:03 | it by any one of these nodes and
sort of shrink it up like that.
| | 01:07 | If you want to get more exact, what you
are going to want to do is open up the
| | 01:11 | Properties panel, and from there you
can determine its exact size and position.
| | 01:16 | So again, I want this to be in the upper
left-hand corner so I will just type in 0, 0.
| | 01:22 | And for the width, I actually just want it to
be 1000 pixels wide and about 35 pixels high.
| | 01:29 | That's more like it.
| | 01:30 | And next up, I want to go ahead
and change my fill and stroke.
| | 01:34 | So regardless of what you started
with, you can always sort of remove the
| | 01:39 | stroke, if you want, by again clicking
this button right here and then I can
| | 01:43 | go ahead and select black for
the fill color. So far, so good.
| | 01:46 | There is my graphic.
| | 01:48 | And what I have done is I have
actually drawn it on this layer, layer 1.
| | 01:51 | So I probably want to rename
this to navbar, just like that.
| | 01:56 | I am going to create another graphic
really fast and I am going to put it on a
| | 02:00 | new layer, so I am going to click this
New Layer icon, and from there I can go
| | 02:05 | ahead and type in button.
| | 02:07 | Just right here, I am going to
just create this quick button graphic.
| | 02:10 | So I am going to use the Rectangle
tool again and I am going to go ahead and
| | 02:13 | select medium to dark gray.
| | 02:17 | And I am going to draw it
sort of at the same height.
| | 02:19 | And notice actually Flash
will snap sort of into view.
| | 02:23 | It will snap to other graphics, so I
can see that this button actually snaps to
| | 02:27 | the height of that navbar.
| | 02:29 | So again, I can select the Selection tool
and my graphic and I can check out its size.
| | 02:36 | So again, it's 35 pixels high, and I can
go ahead and make it about 100 pixels wide.
| | 02:41 | But overall that looks pretty good and
I just want to be aware always of what
| | 02:45 | layer I am on when I am drawing.
| | 02:47 | But again, those are just two quick
graphics and now I am sort of set up to
| | 02:50 | take this to the next step
and turn this into symbols.
| | Collapse this transcript |
| Creating a symbol| 00:00 | At the backbone of Flash are symbols,
which are basically graphic stored in the
| | 00:05 | Library that can be reused over and over.
| | 00:07 | But it really goes beyond that,
because symbols can be animated and have
| | 00:11 | interactivity associated with
them, just to name a few things.
| | 00:15 | That's what I want to do
with this navbar right here.
| | 00:18 | As you can see, I have it selected, and
in order to convert it to a symbol, all
| | 00:24 | I really need to do is click
and drag it into the Library.
| | 00:28 | As soon as I let go, it gives me the
opportunity to convert it to a symbol.
| | 00:32 | From there, I can just call this navbar.
| | 00:36 | I am just going to really make a movie
Clip symbol right now, so I am going to
| | 00:39 | select a movie clip, keep my
registration point where it is, select OK.
| | 00:43 | So now as I take a look at this graphic
in my Properties panel, you can see that
| | 00:50 | it's an instance of the navbar.
| | 00:51 | So you can have many instances.
| | 00:54 | In fact, that's what I want to do right now
is drag out another instance of that navbar.
| | 01:00 | In fact, what I can do is I can
sort of move it down the page.
| | 01:04 | So I am going to just sort of zoom out,
Command+Minus or Ctrl+Minus if you are
| | 01:09 | on a PC, and I can nest
it right down there. Okay.
| | 01:13 | So with it selected, I want this
to be sort of more of a footer.
| | 01:17 | Well, I can select it. I can use the
Free Transform tool, kind of scrunch it up
| | 01:22 | a little bit more, and then sort of use my
Selection tool and snap it into place down there.
| | 01:28 | But just because these are from the
same symbol called navbar doesn't mean he
| | 01:33 | has to look exactly the same.
| | 01:35 | Because in my Properties panel,
I'm given all of these other options.
| | 01:39 | So I can change, for instance, the color effect.
| | 01:42 | I can change this to alpha.
| | 01:44 | This is a common way to make something
transparent is by adjusting the alpha.
| | 01:48 | You could even tint it as well.
| | 01:50 | So I can go ahead and tint this red.
| | 01:53 | As you can see, it is red, and I can
crank that all the way up like that.
| | 01:57 | Or I can even go to Advanced.
| | 01:59 | That's what I want to do.
| | 02:00 | I want to go to Advanced, because I
want to tint this red, but I want it to
| | 02:04 | be about 50% Opaque.
| | 02:07 | So now I can see that even though it's
a different size and a different color,
| | 02:11 | it's still part of that same navbar.
| | 02:14 | This is going to make my file size
pretty small, because I have two sort of
| | 02:18 | unique graphics all based on this one file,
and all Flash does is store in this one file.
| | 02:24 | So I can go on down the line, I can
add some blending modes, I can add some
| | 02:27 | various filters, if I want to add a
drop shadow, whatever the case may be.
| | 02:31 | It's all done, but again, this has to
be a symbol or at least an instance of a
| | 02:35 | symbol in order for me to do that.
| | 02:37 | So really, symbols are going to be
really flexible for you, and I just encourage
| | 02:40 | you to get in the habit of
making everything a symbol.
| | Collapse this transcript |
| Creating buttons| 00:00 | Buttons are the foundation of most
interactivity and Flash makes them easy to create.
| | 00:05 | That's what I want to do here.
| | 00:06 | I am going to scroll up to the top and
right here, you notice here is my graphic,
| | 00:10 | and I am just going to go ahead and
take this rectangle, and I am going to drag
| | 00:14 | it to the Library, because that
enables me to convert it to a symbol.
| | 00:19 | And in this case, I am
going to call it generic button.
| | 00:24 | And then I am going to make sure
that it's of type Button as well.
| | 00:27 | Click OK and now you can see it in my
Library panel there is my generic button.
| | 00:33 | In fact, I can start to drag on sort
of multiple buttons on to the Stage.
| | 00:38 | I am going to have a home section,
about, portfolio, and then a contact.
| | 00:43 | So I'll just scroll over because I
want to put one more over here off to the
| | 00:47 | side and this is going to be my Twitter button.
| | 00:51 | So I am going to use my Free
Transform tool, and I am just going to hit Q
| | 00:55 | because here it gives me
this hint that says hey,
| | 00:57 | hit Q, and you can go ahead and
change that to the Free Transform tool and
| | 01:01 | adjust it like that.
| | 01:03 | So again here is all of my buttons.
So far so good, but now that I've created them,
| | 01:09 | what's unique about buttons?
| | 01:10 | How do I modify them?
| | 01:12 | Well, I can take sort of any one of these
instances and I can double-click on it.
| | 01:17 | Notice now I am inside of
this generic button, okay.
| | 01:21 | In fact, I'll even zoom in closer on that.
| | 01:24 | So here is my generic button, and in
my Timeline panel it gives me this Up state,
| | 01:30 | so these are the default states.
| | 01:32 | Again, since this is a button
it also gives me this Over state.
| | 01:36 | So I can do a right-click and insert a keyframe.
| | 01:39 | Okay, in this second keyframe for the
color of this rectangle I can change it to
| | 01:46 | red using my Properties panel.
| | 01:47 | I am going to do the same
thing for the Down state.
| | 01:50 | I am going to insert a keyframe.
| | 01:51 | So when the user clicks as they press
down on their mouse, well, I want to
| | 01:56 | change it to white, just like that.
| | 01:59 | And then there is also the Hit state so I am
going to insert a keyframe for that Hit state.
| | 02:04 | You know what I can do again is hit
Q, hit that Q key, and I can start to
| | 02:08 | stretch this out because what this Hit
frame is is this actually gives me the
| | 02:14 | active area for this button.
| | 02:16 | So if the user gets close to
this button it's going to highlight.
| | 02:20 | Okay, so this is going to
be the sort of active area.
| | 02:22 | All right, with this all set
up it seems to look pretty good.
| | 02:26 | Well, my next step is to test this out.
| | 02:29 | So, remember I am inside of generic button.
| | 02:31 | Well, I can go back to Scene 1, so
this is my sort of main document.
| | 02:36 | What I want to do now is I want
to go ahead and test this out.
| | 02:39 | So I am going to go to
Control > Text Movie. Go down to Test.
| | 02:44 | Now I can take a look at these buttons.
| | 02:46 | Remember, I dropped on a total of 5,
and you can see them light up accordingly.
| | 02:51 | Everything looks good and
again this is my Over state.
| | 02:54 | If I click down, you can see it turn white.
| | 02:57 | And then remember that hit area is
larger so even as I get close to that button,
| | 03:01 | it highlights, and that's the same for
all of them because all of these are just
| | 03:05 | instances of that one button.
| | 03:07 | So it looks pretty darn good, but it
wouldn't be very helpful in navigation if
| | 03:11 | it didn't have any labels.
| | 03:12 | So let's go ahead and add
some text labels to this.
| | 03:16 | How I am going to do that is I
am going to add another layer.
| | 03:19 | So in my Timeline panel I am going to
click New Layer, and I am just going to
| | 03:22 | call this button text, just like that,
and I am going to select my Text tool.
| | 03:29 | So from there I am going to go to my
Properties panel just like I have been
| | 03:32 | doing. I'll come in here and set this up.
| | 03:37 | So I do want to make sure
this is set to Classic Text.
| | 03:40 | I don't need this heavier
sort of framework of text.
| | 03:43 | I just want this to be a simple label, so
I'll make sure this is set to Classic Text.
| | 03:47 | I am going to make sure it's of the
font family Arial, and I will make sure
| | 03:52 | it's bold, and then the size
is going to be about 12 point.
| | 03:56 | So that's what's set up.
| | 03:58 | It's going to be white text to make
sure it stands out, and then I can just
| | 04:01 | click on the Stage and start typing in Home.
| | 04:05 | All right, also note that this does say
Static Text, so make sure your settings
| | 04:10 | are all set up like this and it's
going to work out just fine for you.
| | 04:14 | All right, so there is my Home label.
| | 04:15 | I'll select the Selection tool, kind of
position that down here, and what I can
| | 04:19 | do is - this is a nice little trick -
I can hold down the Option+Shift on a Mac,
| | 04:26 | and that duplicates it. Alt+Shift on Windows.
| | 04:30 | But as you can see it will duplicate
that item and move it off to the side,
| | 04:34 | therefore I can rename this to About.
| | 04:37 | So that's just a quick way using my
Selection tool to sort of duplicate items.
| | 04:43 | Again, hold down Option+Shift on Mac,
Alt+Shift on PC, and you are good to go.
| | 04:48 | So, I'll just do this a couple of times.
| | 04:54 | And then we have Contact, just like that.
| | 04:58 | All right, remember right over here I
have this other button, so let's just
| | 05:07 | scroll down because right here I am
going to have "follow me on Twitter."
| | 05:15 | So this is going to be sort of an external
link, but note that it is set up just like that.
| | 05:20 | In fact, let's go ahead and fit this all
in Window, and you can se all of my buttons.
| | 05:25 | So it's going to zoom in on this.
| | 05:27 | I am not start to sort of adjust this a
little more appropriately because these
| | 05:31 | are just like way off, but I can
easily just click and drag these over.
| | 05:35 | Hold down the Shift key to
constrain it horizontally in this case.
| | 05:39 | I am going to nudge these over a touch,
so I am going to just hit the right
| | 05:43 | arrow on my keyboard, select these two,
hit the right arrow, and I start to get
| | 05:47 | that sort of little divider line.
It really starts to make this look good.
| | 05:51 | And now I can position these into place.
| | 05:53 | It's kind of like that.
| | 05:54 | And again the power of this is the fact
that this text is outside of the button.
| | 06:01 | If this text was baked into the button,
in here if you will, as I double-click I
| | 06:07 | would only be able to use it
once for the Contact section.
| | 06:10 | But since it's a generic button
I can reuse it many, many times.
| | 06:14 | It makes it easy, makes my file size
smaller and simpler to update so I'll click
| | 06:19 | back on Scene 1, and there is my Nav.
| | 06:21 | We'll do one final test and
everything looks appropriate. It's perfect.
| | 06:27 | Now really the next steps would be
starting to set this up to add some
| | 06:30 | interactivity to it.
| | 06:32 | But again, using and making generic
buttons is a very effective way of
| | 06:36 | making navigation.
| | Collapse this transcript |
|
|
3. Importing GraphicsImporting an image| 00:00 | You will eventually find yourself wanting to
import imagery rather than created in Flash.
| | 00:05 | And that's what I want to do now is I
want to import a nice cloud image and that's
| | 00:10 | going to go in the background.
| | 00:12 | So the first thing I need
to do is create a new layer.
| | 00:14 | So in my Timeline panel, I'll click New
Layer and I'll just call this clouds.
| | 00:20 | Now I do want this to be in the
background, so I'm going to just click and drag
| | 00:23 | this layer to the bottom, and that
it will appear behind everything else.
| | 00:27 | Now with that layer selected, I can go
ahead and go to File > Import and import
| | 00:33 | it directly to the Stage.
| | 00:34 | Now before I select my file it happens
to be this cloud's JPEG file which is
| | 00:39 | already kind of a crunched down if you will.
| | 00:41 | Notice that if I had just to open up
this dropdown list, you can see all the
| | 00:45 | various file types that you can import.
| | 00:48 | And these are sort of the most popular
audio, video, and imagery formats, and
| | 00:54 | Flash can take them all.
| | 00:56 | In this case, again it just happens to be JPEG.
| | 00:58 | I'll click Open, and here's my graphic.
| | 01:02 | Notice it is pretty long because
eventually I will be animating it, kind of
| | 01:06 | moving across sort of in the background,
but for now all I'm going to do is
| | 01:10 | just kind of nest it right
there in the upper left-hand corner.
| | 01:13 | Now, once you start importing imagery,
you'll notice that you might want to edit
| | 01:17 | it as well and you'll
probably want to edit it in Photoshop.
| | 01:22 | So if I right-click on this file,
notice how I can go ahead and edit it
| | 01:26 | with Photoshop CS5.
| | 01:29 | It automatically opens
Photoshop and displays that graphic.
| | 01:32 | Now what I can do is just
sort of do a quick adjustment.
| | 01:35 | I'm going to go to Image > Adjustments
and just adjust the HDR Toning, which
| | 01:39 | happens to be a Photoshop CS5 feature,
and notice the default is already making
| | 01:44 | it look really good.
| | 01:46 | And again, if I turn that on and off,
you can kind of see what I'm getting.
| | 01:49 | Or I can go down to Photorealistic high
contrast, and that's looking pretty good as well.
| | 01:55 | But so far, I like the default.
| | 01:57 | I like the high contrast.
| | 01:58 | Either one. I'll go with high
contrast, click OK and save this file.
| | 02:03 | But in general, you can make any edits
you want to make, save your file, close
| | 02:07 | it out, go back into Flash, and you can see
it just added all that depth to this image.
| | 02:13 | But again as you notice, you can import
any file you want, put it where you want to,
| | 02:17 | just be mindful of the layer that
you're on, and also know that it'll appear
| | 02:21 | in your Library panel.
| | Collapse this transcript |
| Importing Photoshop files| 00:00 | Flash can import all popular image
formats, including Photoshop files, while
| | 00:05 | maintaining layers and editability
and it really is going to save a ton of
| | 00:09 | time when I bring this into Flash.
| | 00:12 | But notice that I can do all of my
design work in Photoshop, such as how I have
| | 00:16 | this homepage set up, then import this file.
| | 00:19 | But let's take a look at it
because in this home folder for instance.
| | 00:23 | This just happens to be
the content for this page.
| | 00:27 | Notice it consists of just a text
layer and then this panel there.
| | 00:30 | Same thing for the home background.
| | 00:32 | It just has some text in there, as
well as the background, so the goal is to
| | 00:36 | bring this information in
and keep this text as editable.
| | 00:41 | And of course I'll maintain all the layers.
| | 00:43 | So that's my Home page.
| | 00:45 | I also want to import the About page.
| | 00:47 | You can see that it also maintains sort
of a layer in here in the about folder.
| | 00:52 | Let's take a look at the Portfolio page.
| | 00:55 | It just has some text right up
here, and then the Contact page.
| | 00:59 | So this is probably the most complex
of all of them because it does have this
| | 01:04 | contact form, which in general
is just a bunch of text layers.
| | 01:08 | Okay, so I want to bring all
of the stuff in as editable.
| | 01:11 | But that's how everything is set up,
and I'm going to start off with the Home
| | 01:14 | page and notice that I also have that Jill logo.
| | 01:18 | So, all I need to do is to save this file.
| | 01:20 | I'm not doing anything tricky with it, just
saving it out, and then I can jump into Flash.
| | 01:26 | So here I am.
| | 01:26 | I'm going to go to File > Import >
Import to Stage, just like it's any other
| | 01:31 | graphic, and I can locate sectionHome.
| | 01:35 | Click Open and now I can
define how to import these files.
| | 01:40 | Starting with this sort of
a logo file layer right here.
| | 01:43 | So I'm going to go ahead and make this
a movie clip because with it selected,
| | 01:48 | I can convert it to a movie clip, in
case I want to animate it or add in our
| | 01:52 | activity to it or anything else like that.
| | 01:54 | The next folder is this Nav folder.
| | 01:57 | Well, if you notice, I already have a
navigation there, so let's not worry about that.
| | 02:01 | It's going to that home folder, and the
first thing I want to do is I actually
| | 02:04 | want this to be a movie clip as well.
| | 02:07 | So I'm going to control
this sort of as one unit.
| | 02:09 | This is my home content.
| | 02:11 | And inside of this movie clip,
these layers are going to exist.
| | 02:15 | And I'm going to make sure any time I
see some text, I am going to make sure
| | 02:19 | it's editable, just like that,
and I'll leave the graphics as is.
| | 02:24 | So again, it's just a matter of sort
of finding most of those text layers and
| | 02:28 | making sure they are editable, and
making sure the folders or movie clips as well,
| | 02:34 | so I can just control them as one object.
| | 02:37 | And I'm not going to
include that white background.
| | 02:40 | And I'll click OK and it will
import everything accordingly.
| | 02:44 | Looks great, positions,
everything exactly where it should be.
| | 02:48 | And if I take a look, say for instance,
at the layers, you can see that they are
| | 02:54 | all stacked right in here.
| | 02:56 | All right, so first thing you'll
notice is maybe some of this text.
| | 03:00 | So again, since this text is
editable I can change this, so I'll just
| | 03:04 | double-click on this movie clip,
and now I'm inside of home background.
| | 03:08 | And from there, I can just select
that text and since it's editable, I can
| | 03:13 | change the color to white, just like that.
| | 03:16 | Click back on Scene 1 and then there I am.
| | 03:19 | So everything looks good. Also note
in my Library panel, I can see it makes
| | 03:24 | this folder and organizes everything
accordingly in here, very nice, very handy,
| | 03:29 | and what I can do next is start
to kind of clean up my Timeline because
| | 03:33 | as you start to import these Photoshop files,
your Timeline is going to get pretty lengthy.
| | 03:38 | So what I'd like to do is create a new
folder and I'm just going to call this
| | 03:43 | folder nav and all of my nav
items are going to go in there.
| | 03:47 | We're going to go throw the logo in there.
| | 03:48 | We're going to put the button layer, the
button text and the nav bar, all in that nav folder.
| | 03:55 | Okay, so I've put them on here and
we'll just go ahead and twirl that back up,
| | 04:00 | and now it's much more neat.
| | 04:02 | And this now is going to be my information
that's sort of consistent from page-to-page.
| | 04:07 | All right, with all of that set up, I
can now move on to go to File > Import,
| | 04:12 | and I can import the next file, which
is going to be the sectionAbout.psd.
| | 04:17 | Again, it's the same process,
determining what you want to import. In this case,
| | 04:22 | just these two folders.
| | 04:24 | I'm going to make sure these folders
are always movie clips, the text is always
| | 04:29 | editable, and I'll be good to go.
| | 04:34 | So with that done, I will go ahead and click OK.
| | 04:39 | It brings in that information.
| | 04:41 | All right, so I have two sections in here
now and it's getting kind of hard to read.
| | 04:46 | Well you can always just turn off the
layers you don't want to see to sort of
| | 04:51 | isolate what you do want to see
and then change it accordingly.
| | 04:55 | Because again notice how I brought this in
as editable text. Sure enough, it's editable.
| | 05:00 | That's the About section.
| | 05:01 | I'll just hold down the Shift key to
select both of those layers and then I'll
| | 05:05 | move that down, just like that.
| | 05:07 | All right, two sections down, two more to go.
| | 05:11 | And again, it's nice that I'm sort of
building a whole web site just by doing
| | 05:15 | some imports right here and
defining what I want to import.
| | 05:19 | So again, the same process, defining
these folders as movie clips, making sure
| | 05:26 | everything looks good in these what
soon would be movie clips, and that your
| | 05:31 | text is editable, just like
that. All right, there we are.
| | 05:34 | And each time you do an import, it
does add those layers at the top.
| | 05:38 | Well, you can always of course fix that
by dragging them down into the position
| | 05:42 | you want them and in
editing what you need to edit.
| | 05:46 | So I'll select that text there and change
that color to white,. Again the same process.
| | 05:52 | Go back to Scene 1.
| | 05:53 | So there is my Portfolio page and
notice in my Library panel you can see those
| | 05:58 | folders start to stack up.
| | 05:59 | I'll go to File > Import > Import to
Stage, and there's the last one I need to
| | 06:05 | do is this Contact.psd, and click Open.
| | 06:12 | These two folders has movie clips, and
again this is the one that has lots of
| | 06:21 | editable text, because it has that contact form.
| | 06:26 | And again it's important for me to keep
this as editable because some of these
| | 06:30 | fields are actually going to be
input text fields that the user controls.
| | 06:35 | But again, I made it in Photoshop and
it's set up and positioned just perfect.
| | 06:41 | Again, my Contact background, I can
select that text layer and click OK.
| | 06:48 | All right, again, that was the most complex one.
| | 06:51 | I'll turn off that Portfolio layer,
I'll just Shift+Select those two and drag
| | 06:56 | them down, and now you
can see my Contact section.
| | 07:00 | So again, I'll just jump in here really
fast and change this text to white, so
| | 07:06 | this stands out more.
| | 07:07 | So you're able to use Photoshop to do
all your design work and then import that
| | 07:12 | content seamlessly into
Flash for further development.
| | Collapse this transcript |
| Formatting text using the Text Layout Framework| 00:00 | TLF Text gives you more
flexibility when using text in Flash.
| | 00:04 | And that's why I'm going to use it
over what is now known as Classic Text.
| | 00:08 | So the first thing I'm going to do is
expand out the Timeline panel and I'm
| | 00:14 | going to turn off all
those other content layers.
| | 00:16 | And just turn on this about content
layer and the about bkgd because I want to
| | 00:21 | focus on the text in here.
| | 00:23 | As you can see, there is
this large chunk of body copy.
| | 00:27 | That's actually inside of the about movie clip.
| | 00:30 | I'll just double-click it.
| | 00:31 | Now, I'm inside of this about movie clip,
and I can hold down the Spacebar and
| | 00:35 | kind of reposition my Stage.
| | 00:38 | And really this is a lot of text.
| | 00:40 | And quite frankly I want
to do a couple of things.
| | 00:44 | I want to lay it out better and I also
want to in particular I want to take this
| | 00:49 | and just to sort of put in a link right here.
| | 00:51 | Link out to this school.
| | 00:53 | And I can do that quite
easily just by highlighting it.
| | 00:56 | And notice as I go over to my
Properties panel, I'm using TLF Text already,
| | 01:02 | because I've imported this
text from Photoshop as editable.
| | 01:06 | So TLF Text is selected.
| | 01:09 | Notice how I can make it Read
Only or Selectable or Editable.
| | 01:13 | This is just going to be a Read Only.
| | 01:15 | Again, the user doesn't need to really
select it, so I'll just change that to Read Only.
| | 01:20 | And then I'm given all of these
various options on my text right in here.
| | 01:25 | So plenty of options for Character and
even Advanced Character attributes I can edit.
| | 01:31 | So again for this, I'm going to go ahead
and link out to www.risd.edu just like that.
| | 01:42 | Hit Enter.
| | 01:43 | And notice how it turns it blue and
then gives it an underline so it clearly
| | 01:47 | differentiates it from the rest of the contents.
| | 01:51 | The target it is going to be blank
because I want to open up in a new window.
| | 01:55 | And I encourage you to, kind of
peruse the other options in here.
| | 01:57 | There is a lot it can do, but what I
want to focus on next is the flow of this
| | 02:03 | content because I want to sort
of stretch out this text box.
| | 02:07 | And I'll do that just by grabbing that
left edge, stretching it out, and let's
| | 02:11 | just grab the button and kind of scrunch
it up like that and kind of adjust this
| | 02:16 | accordingly so it's fits sort of over the TV.
| | 02:19 | And in general, I would
never really have text this long.
| | 02:23 | From a design perspective, it's
too long of lines is what it creates.
| | 02:28 | I'd love to make this two columns.
| | 02:30 | And that's what I want to do.
| | 02:31 | So over here under Container And Flow,
so let me just twirl those all up.
| | 02:37 | Container And Flow gives me the
ability to change the columns.
| | 02:40 | So I'll change this to 2 columns, and
you can see it changed to two columns.
| | 02:44 | And I can just grab that border, kind
of scrunch it up like that, and make sure
| | 02:49 | this flows a little better kind of like that.
| | 02:52 | All right, so the next thing I want
to do is I want this content to sort of
| | 02:55 | reflow. Again it's all trapped in this box.
| | 02:58 | I want it to reflow into
another text box beneath it.
| | 03:02 | So I'll just click this plus sign and
when I do that it loads all of that text
| | 03:06 | into my cursor if you will.
| | 03:08 | And then I can click and drag to
make a new text box just like that.
| | 03:13 | So now this content flows one into the next.
| | 03:17 | So if I decide for instance to get rid
of a paragraph, I can do that and all the
| | 03:23 | text reflows accordingly.
| | 03:24 | So it makes it real easy to work with,
especially sort of large body text as well.
| | 03:30 | So I'm going to select my Selection tool sort
of move this up and just do some fine-tuning.
| | 03:34 | In general that's looks
pretty darn good like that.
| | 03:37 | So with this set you can easily see
that it really gives you flexibility to lay
| | 03:42 | out you text easier, and it gives you
that fine-tuning that you need when it
| | 03:46 | comes to text in Flash.
| | Collapse this transcript |
|
|
4. Adding TransitionsUsing the Timeline| 00:00 | The Timeline will not only be where all
of the animation takes place, but where
| | 00:05 | you can also build out the
sections for your web site.
| | 00:09 | So if I expand out my Timeline just
by grabbing that line, I can see all of
| | 00:14 | my content in here.
| | 00:16 | And currently all of my
content exists in this first frame.
| | 00:19 | So I'm going to space out everything,
and I really want to space everything
| | 00:25 | out to about 50 frames.
| | 00:28 | So as you can see, I can select the
various frames and what I want to do is I
| | 00:33 | want to extend out, say for
instance, the Clouds layer here.
| | 00:38 | So I can right-click and all
I need to do is Insert Frame.
| | 00:42 | That extends out the timeline.
| | 00:45 | So let me click on this number 1 and if
I hit Enter, you can see that it'll play
| | 00:50 | through my Timeline now.
| | 00:52 | And it just shows my content for that
very first frame since it only exists
| | 00:57 | in that first frame.
| | 00:58 | So if want to extend out everything
what I can do is just do click and drag to
| | 01:04 | select all of these frames.
| | 01:07 | Now, I can do a right-click and Insert Frame.
| | 01:12 | Now everything has been
extended out to this 50th frame.
| | 01:17 | Now, I can start spacing out my
content because as you can see it's all one
| | 01:22 | on top of the next.
| | 01:23 | So I'm going to go ahead and just
select these 2 keyframes and again I can just
| | 01:28 | click and drag to select these 2 keyframes.
| | 01:32 | And then space out the Home section.
| | 01:35 | So it's about at Frame 10.
| | 01:38 | Notice that this shows me
what frame I'm on and it says 10.
| | 01:41 | All right, the about section again
I'll just click and drag to select those 2
| | 01:45 | keyframes. Put that at about Frame 20.
| | 01:49 | Portfolio section, you can drag,
bring that out to about 30 like that.
| | 01:55 | And then the Contact section, and
its background out to about Frame 40.
| | 02:01 | There we are so I'll click back on Frame 1.
| | 02:03 | I'll hit Enter and you see actually
what's happening all my content does appear,
| | 02:09 | but it starts stacking one on top of the next.
| | 02:12 | So you run in to this case where you want
the content to not exist beyond a certain point.
| | 02:17 | Say for instance, this home background.
I actually want to make it not exist so
| | 02:22 | it just shows this about contents.
| | 02:25 | Okay, so let's just scroll this up.
| | 02:28 | So all I need to do there instead of
sort of turning them off, what I can do is
| | 02:32 | do a right-click and I can go
ahead and insert a blank keyframe.
| | 02:40 | So currently this is a keyframe.
| | 02:42 | It's actually filled with content.
That's why it's a black dot, but if I want to
| | 02:46 | insert a blank keyframe, what that
does is it removes all of the content at
| | 02:50 | that point in time.
| | 02:51 | So now we have that empty dot right there.
| | 02:54 | So now the content
doesn't exist beyond that point.
| | 02:57 | So again right-click, Insert Blank
Keyframe, and that starts to look a lot better.
| | 03:03 | So Home section, there is my About section.
| | 03:06 | So I want to do this of course
for my other sections as well.
| | 03:12 | Again, if I don't want content to exist beyond
a certain point, just insert a blank keyframe.
| | 03:17 | And again you can select
multiple keyframes just like that.
| | 03:22 | And Insert Blank Keyframe like that,
and that's how we set up a web site.
| | 03:28 | So that works pretty well. In fact if I
hit Enter you can see all of my content
| | 03:31 | appear accordingly.
| | 03:33 | So now with all my section set up, the
next step is really going to adding some
| | 03:38 | transitions to this Timeline.
| | Collapse this transcript |
| Adding preset animation| 00:00 | Flash makes it easy to add animation to
any project and that's what I want to
| | 00:05 | do with each section here.
| | 00:07 | I want to actually animate in the
background in a cool way and I'm going to use
| | 00:11 | motion presets to do this.
| | 00:13 | But the first thing I'm going to do
is I'm just going to go ahead and turn
| | 00:16 | off, basically hide the content for each section
because I just don't want it to get in the way.
| | 00:22 | I'll just kind of turn those off
really fast, just to get this set up.
| | 00:26 | I'll go back to this home bkgd
layer here, and I'm going to go
| | 00:32 | ahead and change my view,
let's say to about 50%.
| | 00:37 | Again, I want this to kind of slide
on or animate in, in some cool way.
| | 00:42 | And again, I'm going to do
that using motion presets.
| | 00:44 | So I'm going to go to
Window, down to Motion Presets.
| | 00:50 | That opens up this Motion Presets panel,
and I'll just nest if off to the side,
| | 00:54 | so it's sort of out of the way.
| | 00:57 | And I'm actually given
this Default Presets folder.
| | 01:01 | So if I open that up, you can see all of
these really cool animation you can use.
| | 01:05 | So I'm just going to arrow key down
and check out some of these. So there are
| | 01:10 | some fly-ins with a blur, there are
some fly-ins without a blur, and there is
| | 01:15 | all sorts of cool presets in here.
| | 01:18 | There's a pulse, even smoke,
definitely pretty nice, even if you want it to
| | 01:23 | have something twirl in, in a 3D way.
| | 01:26 | So I encourage you to kind of
check out all of these presets.
| | 01:29 | They are definitely pretty cool.
| | 01:30 | But I don't really want to overdo it with this.
| | 01:32 | I just want to have this fly in from the right.
| | 01:36 | So, with that background selected,
I'm then going to select to my preset and
| | 01:41 | then I'm going to click this Apply
button, and it adds that motion tween.
| | 01:47 | Here's my motion path right here that
you can see on my Stage and notice how it
| | 01:52 | gives me this motion
tween up here as well, okay.
| | 01:55 | So I want to go ahead and adjust the
time, because as you can see it actually
| | 02:00 | adds this animation, but it
spills over into the other sections.
| | 02:04 | So I'm just going to click and drag on
that second keyframe to shorten it up,
| | 02:10 | so that only exists within this amount of time.
| | 02:13 | All right, so it's not really positioned
correctly either, so I'm going to go about Frame 19.
| | 02:19 | This is sort of its resting location.
| | 02:21 | And what I can do is I can select
this motion path, and I can move the
| | 02:26 | entire motion path.
| | 02:27 | So I can move that whole animation
over, so it does rest into place exactly
| | 02:33 | where I want it to be.
| | 02:34 | So again I'll click on Frame 10 and I
can just kind of scrub through, but you
| | 02:38 | can see that it slides in.
| | 02:41 | Now, I can also edit this motion path.
| | 02:44 | So I'm just going to click on the
background, just to deselect it, and what I can
| | 02:49 | do is I can roll over this
starting point right here.
| | 02:54 | This is the starting keyframe.
| | 02:56 | And I can stretch it out.
| | 02:58 | So now my animation is going to sort
of start further out and then still end
| | 03:03 | up in the same position.
| | 03:05 | Much more dramatic, but
that's sort of more of what I want.
| | 03:08 | So I'm going to continue to do
that for some of these other sections.
| | 03:12 | I'm going to select this
about bkgd, and I'm going to have it
| | 03:15 | say come in from the bottom,
and I'll click Apply.
| | 03:19 | You can see it gives me this
motion path, this motion tween in here.
| | 03:24 | I can go ahead and grab that second
keyframe and click and drag it so again it exists and
| | 03:32 | it sort of happens over these 10 frames.
| | 03:34 | I can also select that motion tween.
It might be kind of hard to see it depending
| | 03:38 | on at the layer color, but I can
go ahead and move that down as well.
| | 03:42 | All right, so that looks pretty good.
| | 03:45 | Let's move on in the next one.
| | 03:47 | Since this one is kind of more of
sky theme, we have these balloons
| | 03:50 | come in from the top.
| | 03:52 | So again, select your move clip, then
the tween, then click Apply, and you can
| | 03:58 | see that it does animate.
| | 04:00 | But what I need to do is of course
shorten this up again like that and
| | 04:04 | then move the tween.
| | 04:06 | Now remember, regardless of what tween
you've applied, you can always not only
| | 04:10 | adjust the tween, but you can also
adjust the position of the Start or End to
| | 04:16 | keyframes here, so I can
just go ahead and move that.
| | 04:19 | So now again, it's going to be
much more dramatic when it comes in.
| | 04:23 | There's something else I can do as
well though, because with this motion path
| | 04:28 | here I can not only sort of move the
position of the start keyframe, or any
| | 04:34 | keyframe for that matter, but what I
can do is if I click off of it, I can roll
| | 04:39 | over that line using my Selection tool,
I can roll over that line, and as I roll over it,
| | 04:45 | it gives me that curved line.
| | 04:47 | It's basically saying, hey you know
what, you can curve this motion path.
| | 04:52 | So again, I'm just going to click and
drag, and you can see now I can bend the
| | 04:56 | motion of this object.
| | 04:58 | So now, it's actually going
to kind of come in at a curve.
| | 05:00 | So that might be kind of cool.
| | 05:03 | I'll select Frame 30 and I'll just
kind of scrub through, and you can see it
| | 05:06 | sort of comes in at a
little bit more of an angle.
| | 05:10 | So again, you can do that for any motion path.
| | 05:13 | All right, here's is my last one.
| | 05:15 | I'm going to select that background,
and I'm going to have it, coming from the left,
| | 05:20 | select that tween, click Apply,
and now I can see that it does give me
| | 05:26 | this motion tween up here, which I need
to shorten like that and then I need to
| | 05:31 | make sure it's positioned accordingly.
| | 05:34 | So again, use motion presets to kind of
get you started and the you can sort of
| | 05:38 | further manipulate it by editing the
keyframes, maybe making the animation
| | 05:42 | happen longer, and again by rolling
over that line you can always sort of bend
| | 05:46 | to that motion path as well and create
something even more interesting, like
| | 05:51 | bend that down like that.
| | 05:53 | So definitely, it's pretty nice.
| | 05:55 | I'll go to Frame 40, I'll hit Enter,
and you can see that sliding like that.
| | 06:00 | So, when you add these motion paths,
notice my Timeline is pretty squared away,
| | 06:06 | except for these frames that are
kind of sticking out, out here.
| | 06:11 | And personally, these kind of annoy me
because no content exists beyond this point.
| | 06:16 | So, I can select all of these frames
here, sort of this chunk, and I can right
| | 06:22 | click and what I can do is
just Remove Frames. There we go.
| | 06:27 | Now it's actually not going to
sort-of play beyond the Frame 50.
| | 06:30 | So let's just do a Control >
Test Movie. I'll test it out.
| | 06:36 | You'll get this message on occasion,
just hit OK, and you can see all that
| | 06:41 | content sort of slide in.
| | 06:43 | This happens really fast.
| | 06:45 | In fact, it's can kind of annoying.
| | 06:47 | So, if you want to extend out animation,
and that's pretty easily done as well.
| | 06:53 | In fact, if I want to double the
length of this animation, what I can do is I
| | 06:57 | can select all these frames like that,
just do a click and drag, selected
| | 07:01 | all these keyframes.
| | 07:03 | And now if I right click, instead of removing
frames like I did before, I can do Insert Frame.
| | 07:09 | Insert Frame, that stretches it out,
now that animation is going to happen over
| | 07:13 | the course of, you know, maybe a second.
| | 07:17 | But again, I want to do
this for all the sections.
| | 07:19 | Just do a click and drag to
select and insert a frame.
| | 07:23 | So, this is a great way to sort of
extend out your Timeline, Insert Frame, and
| | 07:30 | just be aware that I've this nav folder.
| | 07:33 | So I'm also stretching out all
of this navigation here as well.
| | 07:37 | So that's why I'm selection up so
high, but again I'm selecting this big
| | 07:41 | chunk here, Insert Frame.
| | 07:44 | Now everything actually is going to
have a slower pace to it and it's going to
| | 07:49 | be easier to kind of see the transition.
| | 07:51 | So, Control > Test Movie and test it out, and
now we can see everything happens slower.
| | 07:59 | And again, somehow that motion
tween with that curve, and it looks
| | 08:03 | actually pretty nice.
| | 08:04 | I have some variety but again it all
started from the motion presets that I was
| | 08:08 | able to select, use, and modify to my liking.
| | Collapse this transcript |
| Creating custom looping animation| 00:00 | Now what I want to do is I want these
clouds back here to continually move
| | 00:05 | across the screen regardless
of which section you are in.
| | 00:10 | So it's going to create this nice
movement throughout the whole site.
| | 00:15 | Okay, so I am going to do this by
selecting this clouds background right here,
| | 00:20 | and it's a pretty large image, so what
I am going to do is I am going to change
| | 00:24 | my view to Show All.
| | 00:27 | So notice how long that image is.
Well,I am going to go ahead and of course,
| | 00:31 | move it across the screen, and
it's going to continuously loop.
| | 00:35 | The first thing I need to do is
I need to make this a movie clip.
| | 00:41 | So I am going to up my Library panel,
and I am just going to drag this movie
| | 00:47 | clip into the Library, and I am going
to go ahead and make sure this is a Movie
| | 00:53 | Clip and these are just going
to be my clouds, just like that.
| | 00:59 | So if I double-click on it, notice that
I am inside of this clouds movie clip.
| | 01:05 | So I can go ahead and animate it, but
if I animate it on the main timeline it's
| | 01:09 | only going to exist within
that part of the main timeline.
| | 01:13 | So what I can do is I can create
an animation inside of a movie clip.
| | 01:19 | So, I am going to go ahead and take
this clouds movie clip, and I want this to
| | 01:26 | be in a new movie clip called Clouds Animation.
| | 01:31 | So I am going to go ahead and drop
this into the Library as well, and I will
| | 01:36 | call this Clouds Animation,
just like that, select OK.
| | 01:43 | Because inside of this movie clip,
| | 01:45 | that's where I want to do the animation.
| | 01:47 | So I am going to double-click, and now
I am inside of that clouds animation.
| | 01:53 | And here, remember I made
this a movie clip as well.
| | 01:57 | It has to be a movie clip,
because I want to animate it.
| | 02:00 | Okay, so with it selected, I am going
to go ahead and animate these clouds.
| | 02:06 | So I am going to go ahead and select
Frame 50 and I am going to right-click and
| | 02:11 | I am just going to Insert Frame.
| | 02:14 | Because over this course of time
what I want to do is add some animation.
| | 02:18 | And in order to do that, all I need to
do is click anywhere in here and if I do
| | 02:24 | a right-click I can
select Create Motion Tween.
| | 02:29 | Notice how it turns to blue, and now
it's basically ready to be animated.
| | 02:34 | So my starting frame is right here,
so I want to scroll down to about
| | 02:38 | Frame 50 right down here, and in
Frame 50 I can select this graphic and just
| | 02:44 | move it across this Stage, so its right edge
meets the right edge of the Stage like that.
| | 02:51 | And notice how it creates
this motion path right here.
| | 02:55 | So now if I go back to Frame 1 and I hit Enter,
I can see the clouds move across the screen.
| | 03:03 | So remember, I am within this clouds animation.
| | 03:06 | That's pretty darn cool.
| | 03:07 | Quite frankly, it's going kind of fast.
| | 03:10 | Okay, so I want this to be a little smoother.
| | 03:13 | So what I can do is grab that 2nd
keyframe and move it all the way down.
| | 03:18 | I am going to move it down quite
away to just go about Frame 600.
| | 03:24 | Okay, so this is going to
happen over the course of 25 seconds.
| | 03:31 | Okay, so that's the animation
that is going to take place.
| | 03:33 | Let's just try and scroll back down, select
Frame 1 and hit Enter and you can see it move.
| | 03:38 | But I want to see it within
context of everything else.
| | 03:43 | So I am going to click back on Scene 1,
and notice that if I hit Enter I am not
| | 03:47 | going to see it moving here either.
What I actually need to do is I need to do a
| | 03:51 | Test Movie, and now we can see, although
all this other animation is going on,
| | 03:59 | I can see those clouds sort of slowly
moving across the screen, and that just adds
| | 04:04 | sort of another dimension to this web site.
| | 04:07 | So, the next step is to animate in the
content of each one of these sections.
| | Collapse this transcript |
| Creating 3D animation| 00:00 | Remember that when it comes to animation
you can actually animate many different
| | 00:04 | properties of the symbol instance. So I
am going to select this movie clip here.
| | 00:10 | This is the content from my Home Section.
| | 00:12 | And with it selected in my
Properties panel, note that I can animate any
| | 00:17 | of these properties.
| | 00:19 | For the backgrounds, all I am really
doing is just animating the position.
| | 00:23 | Okay, but notice I can
animate as this 3D position as well.
| | 00:27 | There are some various color effects,
the display, and some other things.
| | 00:31 | But again I want to animate
this 3D Position And View.
| | 00:34 | And rather than using these sorts of
confusing numbers, what I am going to do
| | 00:38 | is I am going to select this fourth tool
down in my Tools panel, 3D Rotational tool.
| | 00:45 | And as I select it, notice
that I get this sort of sphere.
| | 00:49 | And what I can do is I can just
roll over any one of these lines to
| | 00:54 | determine how to rotate it.
| | 00:55 | So I can roll over the screen
line and I adjust its Y property.
| | 01:01 | So I am able to kind of rotate that around.
| | 01:03 | That's pretty darn cool.
| | 01:04 | And again, just I encourage you to
kind of play with all of these lines.
| | 01:08 | The one I usually use is this orange line.
| | 01:11 | This orange line is more like a freeform
line allowing you to manipulate the object.
| | 01:17 | Because again, I want to
animate this coming in in a 3D way.
| | 01:21 | So it might sort of start
off like flat like that.
| | 01:25 | Okay, so that's going be at
starting position like that.
| | 01:27 | Okay, it's going to start like that,
then what I need to do is I need to go
| | 01:33 | ahead and create a motion tween
for this object. So, right-click.
| | 01:39 | Create Motion Tween.
| | 01:40 | So it's going to start off in that
position, and then it's going to end up flat.
| | 01:46 | So I can start to sort of
rotate this sort of back around.
| | 01:50 | So this is where things get a little
tricky and you'd be kind of hard-pressed
| | 01:54 | to start to manipulate these lines to
get it back in its original position.
| | 01:59 | So what I encourage you to
use is the Transform panel.
| | 02:03 | So I am going to go to
Window, down to Transform.
| | 02:07 | So here is my Transform panel and this
gives me the 3D Rotation, and again I
| | 02:12 | can start to manipulate it
with these numbers as well.
| | 02:15 | So you can feel free to do that, but
again, I just want to sort of zero out all
| | 02:21 | of these numbers, whether it's the
3D Rotation or the regular rotation.
| | 02:26 | Starting with the regular rotation,
let's type in zero for that X value
| | 02:30 | zero, the Y value will be zero, and
then the Z value is zero, and now it's
| | 02:35 | in its final location.
| | 02:37 | So it starts here, and then it
animates into place and kind of twirls in.
| | 02:42 | So again, that's awfully cool, and
pretty easy to do. Just don't forget about
| | 02:48 | your Transform panel.
| | 02:49 | It is really going to be your
best friend if you are manipulating
| | 02:52 | anything within 3D space.
| | Collapse this transcript |
| Reusing custom animation| 00:01 | Once you create any animation, you can easily
save it and reuse it as many times as you want.
| | 00:06 | That's what I want to do here.
| | 00:08 | I've this sort of a cool rotate in, in 3D
space for this content for the Home page.
| | 00:14 | And I want to reuse it for the
content for all the other sections.
| | 00:19 | So, all I need to do is select
this motion tween in the Timeline.
| | 00:23 | If I do a right-click on it, I
can save it as a motion preset.
| | 00:27 | So I'm going to select that.
| | 00:30 | I can give it a specific name.
| | 00:32 | So Rotate in 3D is what
I'll call it. And select OK.
| | 00:37 | All right, you're probably
wondering where it put it.
| | 00:41 | Well, it of course goes in the Motion
Presets panel, right in here under Custom Presets.
| | 00:49 | So you can save as many as you want.
| | 00:50 | They'll all be listed right in here.
| | 00:53 | Then if you want to use them, all you
have to do is to go to that movie clip
| | 00:58 | that you want to apply that
Rotate in 3D preset too.
| | 01:03 | And with this selected, make
sure that tween is selected.
| | 01:06 | You can click Apply.
| | 01:09 | Now I can see that sort of rotate in 3D space.
| | 01:12 | Notice how it does
actually position it down here.
| | 01:15 | I can easily, of course, start to
customize it even more by moving it into position.
| | 01:20 | For some of these, I want them to
actually move differently as well.
| | 01:23 | So you can see how this one
kind of slides in like that.
| | 01:27 | I have this motion path.
| | 01:28 | Well, again, that's sort of a unique custom
twist on what was originally a custom tween.
| | 01:35 | So again, moving on down the line,
we'll go to the Portfolio section.
| | 01:39 | I'll select this sign. Select
this motion preset. Click Apply.
| | 01:45 | And I can see that sort of
rotate in just like that as well.
| | 01:49 | Again, I can always sort move
this. Maybe it starts over here.
| | 01:54 | Then its final location is over here.
| | 01:56 | So really it's all about sort of customizing
each one of these custom tweens per section.
| | 02:02 | In fact, I'll select this tween and kind
of move it off to this side so that you
| | 02:07 | can see it's sort of
rotating in and then landing to place.
| | 02:10 | All right, the last one, I
will turn on this Contact layer.
| | 02:15 | I'll scroll on down.
| | 02:17 | And this is the last panel I want to animate.
| | 02:21 | So with this selected, I can
select that tween and click Apply.
| | 02:25 | You can see it rotate in.
| | 02:27 | And not only can you adjust the
position of these, I of course can adjust
| | 02:32 | the length as well.
| | 02:33 | So I want to make sure
this goes to about Frame 90.
| | 02:36 | Then I can see that sort
of spin in just like that.
| | 02:40 | So again, it's really easy to make your
own custom presets and then store them
| | 02:46 | in your Motion Presets panel and use
them not only for this project, but any
| | 02:50 | project that you open up in Flash.
| | Collapse this transcript |
|
|
5. Adding InteractivityAdding button functionality| 00:00 | Essential to any site is the need to add
button functionality, which will really
| | 00:05 | enable that user to navigate
the site and control contents.
| | 00:09 | So this site is no different, because
I do have all these sections set up.
| | 00:14 | So what I want to do is I
want to control the Timeline.
| | 00:18 | And I want it to, when you click
on any one of these buttons,
| | 00:21 | it will jump to the appropriate section.
| | 00:24 | So the first thing I need to do is I
need to stop the Timeline at about Frame
| | 00:30 | 29, because currently it's going to
play through all over this content.
| | 00:34 | So about at Frame 29, this is
where I want the Timeline to stop.
| | 00:40 | And this is going to take ActionScript, okay.
| | 00:43 | Luckily, what's available in
Flash CS5 is code snippets.
| | 00:49 | So under Window > Code Snippets, I am
able to open up this Code Snippets panel.
| | 00:55 | Very powerful, just really helpful in
adding interactivity. But I'm going to go
| | 01:00 | ahead and just put this on the side.
| | 01:02 | This is actually loaded,
full of ActionScript code.
| | 01:05 | And I encourage you to check out all
of these different folders, because you
| | 01:08 | have general actions.
| | 01:10 | You can control the Timeline.
| | 01:12 | You have animation controls.
| | 01:14 | You can load and unload content, you
know SWF files, JPEGs, audio and video as well
| | 01:20 | and even some generic event handlers.
But what I'm going to do is I'm just
| | 01:25 | going to open up this Actions panel,
just to kind of give you a quick preview.
| | 01:29 | A popular one on this folder is
clicking to Go to a web page, but Timeline
| | 01:35 | Navigation is what I want to focus on,
because again, at Frame 29, I want
| | 01:39 | to stop at that frame.
| | 01:41 | So all I need to do is go to the frame
| | 01:43 | I want to stop the Timeline at and
double-click on that code snippet.
| | 01:49 | It automatically adds that
code snippet. Here it is.
| | 01:52 | This is actual code that does although
work, but it also gives you a comment
| | 01:57 | right here, which tells you what is going on.
| | 02:00 | So this is perfect.
| | 02:01 | I can learn and then also see
the code and even modify it.
| | 02:06 | I know this is really just a really
simple example, but you'd be surprised at
| | 02:11 | how often you'll end up using
this stop action right here.
| | 02:15 | Okay, well, where did I put this stop action?
| | 02:17 | Well, down here it tells me it actually
creates this Actions layer and in Frame
| | 02:24 | 29 is where this code exists.
| | 02:27 | So let's take a look at that.
| | 02:28 | I'm going to close my Actions panel.
| | 02:31 | And I'll scroll up to
the top. And look at that.
| | 02:34 | There it is, the Actions
layer, Frame 29, right there.
| | 02:38 | See that little A right there.
| | 02:40 | That little A says that there are
some ActionScript associated to that frame.
| | 02:44 | So I can go to Window > Actions.
| | 02:47 | And there's my code.
| | 02:48 | Okay, so I have actually stopped the
Timeline at this point, but what I want to
| | 02:54 | do next is I want to add
functionality to these buttons.
| | 02:58 | Now I'm not going to do that at Frame 29.
| | 03:01 | What I'm going to do is I'm
going to do that at Frame 1, okay.
| | 03:05 | So right here at this very first frame,
in case the user wants to jump directly
| | 03:10 | to the Contact section, they don't
have to wait for this animation to play.
| | 03:14 | So it's all about usability here.
| | 03:16 | One key thing to note is to make sure
your graphics exist at the point in time
| | 03:23 | that you apply your actions.
| | 03:26 | Okay, so again, I want to go ahead and apply
some code to each one of these four buttons.
| | 03:33 | And if I go to my Properties panel,
and with this button selected, well,
| | 03:38 | let's take a look at it.
| | 03:40 | It's just an instance of the generic button.
| | 03:43 | And in fact there are four of them.
| | 03:45 | So I need to give each one a unique
name in order to apply some code to it.
| | 03:50 | I first need to give it a unique instance name.
| | 03:53 | So right up here in my Properties panel,
I'm going to give this an instance name
| | 03:57 | of about_btn, just like that.
| | 04:02 | Now the ActionScript code I apply to
the button is going to recognize this as
| | 04:07 | that unique button, but I'm going to go
through for each one of these and give
| | 04:13 | each one an instance name, a unique name
that clearly defines it. portfolio_btn.
| | 04:23 | Don't use any spaces.
| | 04:24 | Don't start with any special
characters or numbers, just to keep it simple.
| | 04:29 | contact_btn, just like that.
| | 04:33 | So each one of these
buttons has an instance name.
| | 04:36 | Now I can apply code to it.
| | 04:38 | All right, so with this button selected,
I can go to my Code Snippets panel.
| | 04:44 | And in my Timeline Navigation folder,
I can Click to Go to Frame and Play.
| | 04:51 | And that's what I want to do.
| | 04:52 | I actually want to, if I expand up
this Timeline more, I'm just going to
| | 04:56 | close this up actually.
| | 04:58 | I want to go to Frame 30, right here.
| | 05:03 | And I want to play it.
| | 05:04 | And it's going to play through and
then right there. But I don't want it play
| | 05:09 | through into the other sections.
| | 05:11 | So again, what I need to do
is add some other stop actions.
| | 05:15 | So I'm going to stop at this frame here.
| | 05:17 | It adds the code at Frame
49, as it shows me there.
| | 05:21 | Close that, kind of move on down,
right here also for the Portfolio section.
| | 05:27 | Double-click and stop at this frame.
| | 05:31 | And then lastly for the Contact section,
I want to double-click on that code
| | 05:35 | snippet to stop it at that frame.
| | 05:38 | All right, so my stop actions are in place.
| | 05:41 | And again, if I go back here to my
very first frame and select that button,
| | 05:48 | I can select Click to Go to Frame and Play.
| | 05:52 | So I'm going to ahead and apply
it to that selected button, just by
| | 05:56 | double-clicking on it.
| | 05:58 | And it adds that code to it.
| | 06:00 | Remember, it adds at this very first frame.
| | 06:03 | That's what that little A is.
| | 06:04 | So at the very beginning of this web site
is where all my major code is going to live.
| | 06:10 | So again, here is my code, and I can
start to modify it or whatever I need to do.
| | 06:17 | First thing I'm going to do is I'm
going to remove this panel off to the side
| | 06:20 | just by clicking that left arrow. There we go.
| | 06:23 | And now I can read this clear, because
this comment not only tells me what it does;
| | 06:28 | it gives me instructions on how to modify it.
| | 06:31 | So I need to replace the number 5 with
the frame number you want to jump to.
| | 06:35 | Okay, in this case, it's going to be
Frame 30, because Frame 30 is where that
| | 06:43 | About content starts to roll in.
| | 06:45 | All right, and each one's
spaced out about 20 frames.
| | 06:51 | So I have just to change
that to gotoAndPlay(30).
| | 06:53 | And let's go ahead and test out this button.
| | 07:02 | It's really simple.
| | 07:03 | I still need to apply this, but
again, it stops at this point in time.
| | 07:09 | And if I click on this
button, it goes to Frame 30,
| | 07:11 | plays it, and then it reaches that second stop
action right there and stops. So that's perfect.
| | 07:19 | You know the next step is to make
these other buttons to work, but it
| | 07:21 | follows the same process.
| | 07:23 | Again, I'm going to make sure I'm in Frame 1.
| | 07:25 | I'm going to select the Portfolio button.
| | 07:30 | And keep in mind that
I'm not selecting the text.
| | 07:34 | There's text on top.
| | 07:35 | I'm actually selecting the button back there.
| | 07:38 | So I will select Click to Go
to Frame and Play. Apply that.
| | 07:42 | And it applies that same code.
| | 07:44 | And still it tells me to
modify that frame number.
| | 07:49 | And each one's spaced out about 20 frames.
| | 07:52 | So this is on Frame 50 is where-- well,
actually, let's just double-check that. Yup!
| | 07:56 | There is Frame 50, perfect.
| | 08:01 | So it goes there and it adds this comment.
| | 08:04 | These comments, if I could be honest,
are getting kind of annoying because it's
| | 08:07 | just taking up a lot of room.
| | 08:08 | Well, you know what?
They're not needed.
| | 08:10 | So I can even delete that right there.
| | 08:13 | Now I can read this better.
| | 08:15 | And if I take a closer look at this
code, you can start to see the difference
| | 08:19 | and what's going on here, because it's
going to give me my instance name and it
| | 08:24 | adds an event listener to this
button that listens for the CLICK.
| | 08:30 | And on CLICK, it's going to
fire off this function right here.
| | 08:35 | So it's great that I list out to this code here.
| | 08:37 | I can modify it further if I wanted to,
but in general that's the structure
| | 08:41 | for a common button.
| | 08:43 | All right, let's move on along. Contact
button, select it, double-click, Click
| | 08:50 | to Go to Frame and Play.
| | 08:51 | It's about a frame what? 70, right there.
| | 08:56 | That's for the
Contact button again.
| | 08:59 | And let's close this, because lastly,
I'm just going to select this Home button
| | 09:04 | and do the same thing, which is apply that code.
| | 09:06 | All right, and I'll delete that comment.
| | 09:11 | Now, this I want to go
to about Frame 10 and play.
| | 09:21 | Now you can also move this code around.
| | 09:23 | Since they are going in order from left
-to-right, I can always take this Home
| | 09:29 | button code and
drag it up near the top like that.
| | 09:34 | So now it's sort of more in order as
they're laid out on this page of the nave bar,
| | 09:39 | so Home, About, Portfolio
and Contact. It's looking good.
| | 09:43 | I will do a Test Movie.
| | 09:49 | Stops where it needs to stop, About
section, Portfolio section, Contact
| | 09:58 | section and then Home.
| | 10:00 | So everything works exactly
as expected. It's perfect.
| | 10:04 | Code snippets not only provide you the code;
| | 10:07 | it gives you direction on modifying
and within minutes, you can have a fully
| | 10:12 | functional web site.
| | Collapse this transcript |
| Adding precise Timeline control| 00:01 | You should always try to set up your
project, so it's as easy to work with as
| | 00:05 | possible, allowing for
modification that can be done easily as well.
| | 00:10 | And that's I want to do with this
project, because currently all of these
| | 00:15 | buttons, as I scroll up, they jump to
various sections and they are targeting
| | 00:20 | frames right in here.
| | 00:22 | Okay so I take a look at this code
in here and if I go to Window > Actions,
| | 00:28 | you can see the Home button
actually goes to Frame 10.
| | 00:31 | Well, what happens if I decide to add
more an intro animation? It means all
| | 00:38 | these numbers are going to be off, and I
would have to come in here and change them.
| | 00:42 | That's why I want to use frame
labels instead of frame numbers.
| | 00:46 | So I will close this Actions panel
and what I want to do is I want to add a
| | 00:51 | frame label right here in Frame 10,
and in order to do that I need to right
| | 00:57 | click and insert a keyframe.
| | 01:01 | Because labels need to exist on keyframes.
| | 01:04 | So at that point of time I can add a
label, again I am in the Actions layer, and
| | 01:10 | we just call this home for the label name.
| | 01:13 | Notice how the name appears right
here and everything is looking good.
| | 01:16 | So this is actually easier for me to
work with, because I can actually read
| | 01:20 | what section that is.
| | 01:21 | Frame 30, the same process of
inserting a keyframe, and we will call this
| | 01:28 | about just like that.
| | 01:31 | The next section is the portfolio
section. Right-click, Insert Keyframe, right
| | 01:36 | here for the Portfolio section,
and the name is of course portfolio.
| | 01:41 | The last one happens to be the contact section.
| | 01:46 | Insert Keyframe there as well.
| | 01:49 | So this is so much easier to read and
understand as I open up this project.
| | 01:52 | I can quickly jump to the about
section and change that content.
| | 01:57 | It's easier for me to work with, not
only when I am in Flash, but I can also
| | 02:01 | make the code smarter as well.
| | 02:03 | So I am going to select this first
keyframe right here in my Actions layer and
| | 02:07 | open up the Actions panel, and I am
going to change this from going to Frame 10
| | 02:13 | to going to, within quotes, the "home" label.
| | 02:18 | So that's all I need to do.
| | 02:20 | For the about section, within quotes
because it's a specific name, I want to go
| | 02:25 | that "about" Label. Portfolio, again I
am being mindful of what button this
| | 02:31 | function is associated with, and
this goes to "portfolio" just like that.
| | 02:38 | Contact button, of course it
going to go to the "contact" label.
| | 02:43 | It's looking good. So far so good,
and now if I decide to say for instance
| | 02:48 | shorten up this distance, I can sort of
select most of these keyframes right in
| | 02:54 | here if I want to and I can remove
those frames so this animation starts
| | 02:59 | sooner, but the point is that I have
adjusted my Timeline and before all of my
| | 03:06 | code would be off by good 5 or 10 frames.
| | 03:10 | But now everything is
still going to be synced up.
| | 03:12 | But let's just test this out. There we are.
| | 03:17 | It stops in the appropriate frame.
| | 03:19 | Let me click the About button, it goes
to the right section, and again my code
| | 03:25 | is much more flexible.
| | 03:27 | My project is a whole is a
lot more flexible as well.
| | 03:30 | All by adding some frame labels and
then targeting those frame labels.
| | Collapse this transcript |
| Linking to a web site| 00:00 | Eventually you are going to want to add
functionality to link out to other web
| | 00:05 | sites or web pages.
| | 00:06 | And this project is no difference
because I do have this button, as I scroll
| | 00:11 | over, this "follow me on Twitter" button.
| | 00:16 | So I am just going to go ahead and
select that button and for this button I
| | 00:20 | want it to link out to a Twitter page.
| | 00:23 | The first thing I need to do is go
to the Properties panel and give it a
| | 00:27 | unique instance name, so I call it twitter_btn.
| | 00:32 | Okay for this button, what I want to
do is want to go to the Code Snippets panel.
| | 00:37 | So go the Window > Code Snippets.
It happens to be right back here and
| | 00:43 | if I open up the Actions folder right
there at the top is Click to Go to Web Page.
| | 00:50 | Perfect. That's exactly what I want.
| | 00:52 | I will just double-click it.
| | 00:55 | It adds it in that first keyframe right
there in my Actions layer below all my
| | 01:00 | other functionality and gives me a
comment as well as instructions on how to
| | 01:07 | sort of customize this.
| | 01:10 | So here is my Twitter button.
| | 01:11 | It's listening for a click and then it
fires off this function and now all I
| | 01:17 | really need to do is change this URL.
| | 01:19 | So I am going to change this to
twitter.com, and I am just going to do
| | 01:24 | /jilldesigner and notice
that it also says blank right here.
| | 01:30 | So it's going to open up in a new
window, which is sort of the proper
| | 01:34 | functionality that you want.
| | 01:36 | If you want it to appear in the same
window and essentially sort of overwrite
| | 01:40 | your site or replace your site, then
you can actually get rid of that entirely.
| | 01:45 | But again I want it to open up in a new window.
| | 01:47 | All right, with that squared away, I
will go to the Control and test out this movie,
| | 01:53 | and all my other buttons work
just fine, but I am going to go ahead and
| | 02:01 | click on follow me on Twitter.
| | 02:04 | It opens up a web browser
takes me directly to that URL.
| | 02:08 | This can be any URL, whether it's
within the same domain if you will or
| | 02:13 | another web site entirely.
| | 02:15 | But again, this functionality is pretty
common and as you just saw, it's really
| | 02:19 | pretty easy to add to any project.
| | Collapse this transcript |
|
|
6. Creating a GalleryLoading an external image| 00:00 | Now you don't necessarily want to import
all of your images into your Flash project.
| | 00:06 | You really just want to import the
main content and then keep optional
| | 00:11 | information and optional
content external from the file.
| | 00:15 | That's going to make your initial file
size smaller and only load in the images
| | 00:20 | as the user requests them, and
that's what I want to do here.
| | 00:23 | Notice as I scroll through to this Portfolio
section I have this empty frame right here.
| | 00:30 | So what I want to happen in this
dynamically I want to load an image in this area.
| | 00:34 | Okay that frame is actually a part of
the Portfolio bkgd, so I will just double
| | 00:39 | click on that movie clip and come in here.
| | 00:42 | So right in this area this where I
want to load in that image, so I going to
| | 00:47 | rename layer 1 to be loaded image.
| | 00:51 | That's where my image is going to go,
and in order to load an image in here,
| | 00:57 | I am going to use a component.
| | 00:59 | So let me just move this up some and
right in this area, if I go to Window >
| | 01:05 | Components, I can check out all of the
components available that I can add to my project.
| | 01:11 | The component is basically a movie
clip with additional functionality.
| | 01:16 | I am going to go into the user
interface folder, and I encourage you to check
| | 01:20 | out all of the options we have in here,
quite a few, but I am going to choose
| | 01:25 | this UIloader down at the bottom.
| | 01:27 | Very handy because all I need to do is
drop it on to my page, and then I can
| | 01:32 | reposition it. Let me close this.
| | 01:35 | I am going to lock down these other
layers, so I don't accidentally select them
| | 01:41 | just by clicking these
little lockouts right there.
| | 01:44 | All right, I can position this sort of
right here and what I can do from there
| | 01:49 | is I can resize it, so I can use the
Free Transform tool to resize it if I want
| | 01:55 | to and let's not forget that if want
exact control, I can modify the properties
| | 02:01 | in the Properties panel.
| | 02:02 | So maybe I want the width to about to be 350.
| | 02:06 | I can type that in, and the height
in this case is going to be about 240.
| | 02:11 | I happen to know the size of the
image that I am loading in here.
| | 02:14 | That's why I am adjusting this precisely,
and then I can move it into position.
| | 02:19 | All right, so this is where my
content is going to load, but now I need to
| | 02:24 | determine the content I am going to load in.
| | 02:27 | So in the Properties panel it
actually lists out this source.
| | 02:31 | Okay, and if I click on that, notice
I can type something in there, but I
| | 02:35 | actually need to make sure an
image is in the right location.
| | 02:38 | So I am going to go to my desktop, and
I am going to go to the assets folder,
| | 02:43 | into my images folder, and this
port1.jpg is the image that I want to load in.
| | 02:51 | So I am going to copy this image,
and I am going to go into my folder.
| | 02:56 | This is where my FLA file exists and
want I want to do is I want to create a new
| | 03:01 | folder, and I am going to call it
images and within that folder that's where I
| | 03:06 | am going to paste in the image I want to access.
| | 03:09 | Okay so now I know where it is in the
images folder. I am going to target port1.
| | 03:14 | So I am going to back in the Flash,
change the source to point to images
| | 03:19 | forward slash, because it's in that
folder, port 1.jpg just like that.
| | 03:25 | All right, I have targeted that image,
Now I need to go ahead and test this
| | 03:31 | project and make sure that image gets loaded in.
| | 03:34 | I will click on Portfolio and sure
enough it loads in this image.
| | 03:40 | So that's perfect. I want to load in
this image when they click on the Portfolio
| | 03:44 | section, but I don't want to make it
actually part of this file as in that it's
| | 03:47 | embedded because that's
again going to add to the file size.
| | 03:51 | And now this is actually set up for me
to work on some other functionality by
| | 03:55 | adding the ability to load in more images.
| | Collapse this transcript |
| Creating invisible buttons| 00:00 | Using invisible buttons is an invaluable
technique, which allows you to make your
| | 00:05 | own hotspots if you will and then
add interactivity to those hotspots.
| | 00:10 | That's what I want to do
with the Portfolio section.
| | 00:14 | So right down here in about Frame 61,
here is my portfolio content and I want
| | 00:21 | to add some hotspots or some
invisible buttons that are going to serve as
| | 00:25 | hotspots for this graphic.
| | 00:27 | So I am going to expand out the
Timeline a little bit and I am just going
| | 00:30 | to add a new layer.
| | 00:32 | On this new layer I am just going to
rename it Portfolio Content and I am going
| | 00:39 | to insert a keyframe.
| | 00:41 | So at this point of time that's actually
where I want my content to exist right
| | 00:46 | here and I will move it down because
the final resting place is out where I
| | 00:50 | want that content to exist.
| | 00:52 | I am also going to insert a
blank keyframe just after it.
| | 00:56 | So this one frame is where my
hotspots are going to exist.
| | 01:01 | I am going to just go ahead and select
the Rectangle tool and I am going to
| | 01:06 | change the stroke color to nothing, and
then my fill color is just going to be white.
| | 01:13 | Now what I am going to do is I am just
going to draw a square over that first image.
| | 01:18 | Okay, I am going to use my Selection
tool, select that graphic, open up my
| | 01:22 | Library panel, and I am going to
drag it right into the Library.
| | 01:26 | Now I can go ahead and make my invisible button.
| | 01:29 | It is of type Button. invisible button.
| | 01:34 | Select OK and now here you
can see it in my Library.
| | 01:38 | Okay, it's actually not invisible yet,
so what I mean to do is I need to
| | 01:41 | double-click on it to enter inside
of this button and in order to make it
| | 01:47 | invisible all I need to do is
remove any content that's in the Up state
| | 01:52 | and how I can do that is I can just take
this first keyframe and just move it over one.
| | 01:57 | Now there is nothing in my default state,
but when they roll over that graphic
| | 02:01 | that's when it's going to turn white.
| | 02:03 | In fact, I can even insert a keyframe
in the Down state and then change the
| | 02:09 | color of this graphic to black.
| | 02:12 | So that's how I am going to do, but be
mindful that there is nothing in the Up state.
| | 02:16 | So look what happens when I go back to Scene 1.
| | 02:19 | It turns this teal color and let me
just sort of zoom in on that so we can
| | 02:23 | see it a little better.
| | 02:26 | With it selected, you can see that it
actually is a teal color, so that's just
| | 02:30 | Flash telling me that there
is nothing in this girst frame.
| | 02:34 | So if I actually do Enable Simple
Buttons, this is a unique option that I can
| | 02:40 | select and that will enable this as a
simple button ,since that's what it is.
| | 02:45 | So it gives me the Over
state and then the Down state.
| | 02:48 | So I get a little quick
preview of what it's like.
| | 02:50 | But I am not crazy how it turns white
and just sort of white outs the image.
| | 02:55 | So what I can do is turn off Enable
Simple Buttons and what I want to do with
| | 02:59 | this button is I want to change the
display mode, in particular the blending
| | 03:05 | mode is what I want to change to Overlay.
| | 03:08 | So if you are familiar with
Photoshop or Illustrator, you are probably
| | 03:13 | familiar with blend modes.
| | 03:15 | So it gives this white overlay to the image.
| | 03:18 | So if I go to Control > Enable
Simple Buttons, you can see how it sort of
| | 03:23 | brightens up that image but doesn't white it
out and when I click on it, it makes it dark.
| | 03:28 | So that's a really cool way to make a
hotspot and what I can do now is if I turn
| | 03:34 | off Enable Simple Buttons, I can start
to duplicate this simple button, which is
| | 03:40 | technically my invisible button.
| | 03:42 | So all I did is I held down the Option
and Shift key and dragged that image over
| | 03:47 | and it's Alt+Shift on Windows.
| | 03:50 | But I can select both of these images
and hold down Option+Shift. Drag down.
| | 03:56 | But what I have done there is I have
just quickly created 6 hotspots, and now
| | 04:02 | these buttons are set-up so when I
click on any one of these buttons I can then
| | 04:07 | swap out the image in this area.
| | 04:10 | But again, I could not only use this
invisible button here for the gallery;
| | 04:14 | I can use it throughout my project,
wherever I want to add a nice hotspot.
| | Collapse this transcript |
| Loading multiple external images| 00:00 | What I want to do now is I want each
one of my thumbnail buttons to load in the
| | 00:06 | correct image when you click on it.
| | 00:08 | It will load in that image
right inside of this UILoader.
| | 00:12 | Okay, so the first thing I need to
do is give each invisible button a
| | 00:17 | unique instance name.
| | 00:18 | So I am going to select this first
button here and in my Properties panel I am
| | 00:22 | going to give it an
instance name of port1_btn just
| | 00:28 | like that and all of them are going to
follow the same pattern. So I am going to
| | 00:31 | copy that instance name and just paste
it for the next button and just change
| | 00:38 | this number to port2.
| | 00:39 | Again, this will prevent me from
mistyping if I just paste in the instance name
| | 00:47 | and change that one number.
| | 00:55 | Last one, port6_btn. Now
they all have instance names.
| | 01:02 | All right, so far, so good.
| | 01:04 | I am going to go ahead and select this
first button and I am going to go to
| | 01:08 | Window and I am going to
open up the Code Snippets panel.
| | 01:11 | Because for each one of these buttons
what I am going to do is I am going to
| | 01:15 | add an event handler.
| | 01:16 | That's this folder right in here.
| | 01:18 | Notice I am going to select Mouse Click Event.
| | 01:21 | So I am going to add a generic mouse
click event to that button and all I need
| | 01:25 | to do is double-click.
| | 01:27 | Now it tells me that I can go ahead and
add my custom code in a new line after
| | 01:33 | start your custom code below is stated.
| | 01:36 | So here it is, notice there is this
trace statement, which just tells me that
| | 01:42 | this button gets clicked on, and
that's what I am going to start with is just
| | 01:45 | sort of modifying the trace statement.
| | 01:47 | So port1_btn is what gets clicked on,
so I am just going to copy that word and
| | 01:52 | paste it right in here.
| | 01:54 | So what this does is this is just
going to give me a trace statement that's
| | 01:57 | going to appear in my Output panel,
saying that I clicked on this button.
| | 02:01 | So I am going to do that for all of the buttons.
| | 02:04 | I am going to select the second button,
add a mouse click event for port2_btn.
| | 02:09 | I am going to make sure that we
have a trace statement for it.
| | 02:16 | For port3_btn again I have just added
another mouse click event. For port3_btn I
| | 02:23 | can copy that instance name and paste
it right in here for this trace statement
| | 02:28 | so I know when it gets clicked on.
| | 02:29 | I am just double-clicking in
this gray bar to hide the actions.
| | 02:34 | Do it again for the fourth one.
| | 02:36 | I can add that as welll, that
mouse click event just like that.
| | 02:40 | So I am starting to set-up the
code for this little gallery.
| | 02:45 | Add another mouse click event, port5_
btn just like that, hide that panel and
| | 02:53 | then the last one double-click mouse
click event, port6_btn, just like that.
| | 03:00 | Okay so I have just added six mouse
click events, and they are all associated
| | 03:06 | with these thumbnails, and I can
scroll up and start to see all of it and
| | 03:11 | notice how it adds all of these comments as
well, which I really don't need most of these comments.
| | 03:16 | I don't need six copies of the
instructions so I can just start to delete those
| | 03:21 | comments just like that.
| | 03:23 | It's going to make my code easier to read
seeing there is less within my Actions panel.
| | 03:35 | So here is all of my buttons. So far so good.
| | 03:38 | I will just do a Control >
Test Movie to test this out.
| | 03:42 | I have my skeleton function set-up if you will.
| | 03:45 | Go to my Portfolio section, and now
when I click in my Output panel, you should
| | 03:52 | see those trace statements
appear, one through six.
| | 03:56 | Perfect. Everything set up.
| | 03:59 | So my next step is to target this
movie clip which happens to be my portfolio
| | 04:04 | background movie clip, because inside of
it I also need to target this UILoader
| | 04:11 | and for this UILoader,
I need to change that content.
| | 04:15 | So let's take a look at that.
| | 04:17 | Let's close my Actions panel, go back to
my Timeline and if I select again, this
| | 04:23 | is my Portfolio background, just
like my Properties panel says.
| | 04:28 | It's my Portfolio background.
| | 04:30 | So I need to give this a specific
instance name, and I will just call it
| | 04:35 | portfolioBkgd, and I will just copy that.
| | 04:41 | Okay, so I have targeted this movie clip.
| | 04:43 | Now I am going to double-click it to
go inside of it, and then I am going to
| | 04:46 | locate this UILoader.
| | 04:49 | Remember, I have these other layers
locked to allow me to select the UILoader.
| | 04:54 | It also tells me in the Properties
panel that I have the UILoader selected.
| | 04:59 | Now what I can do is give
it a specific instance name.
| | 05:02 | I am going to call it mainLoader just like that.
| | 05:06 | So far so good, but for this mainLoader,
what I want to do is I want to change
| | 05:11 | the source to the appropriate image.
| | 05:14 | So I am going to change the
source parameter and redefine it.
| | 05:19 | So I am going to go back to scene 1.
| | 05:20 | I am going to go where that code was
added, because all that code was added was
| | 05:25 | right here in Frame 61.
| | 05:26 | So I am going to go to Window >
Actions and here is all of my code.
| | 05:32 | Okay, now I can go ahead start adding
on a new line the code I need to add.
| | 05:38 | So I am targeting the
portfolioBkgd, and then I am going
| | 05:44 | to type a period because inside
of that portfolioBkgd is the mainLoader
| | 05:50 | and what I want to
change with that mainLoader is the source.
| | 05:56 | I want to change its source and make
it equal to something else entirely.
| | 06:02 | What is that something else?
| | 06:03 | Well, it's going to be another image,
but I need to make sure that image exists.
| | 06:07 | So I am going to go into the
ExerciseFiles folder, assets, and I am going to
| | 06:12 | locate this images folder, and these
are the six images that I want to locate.
| | 06:18 | I am going to go ahead and copy them and
I need to put them in the images folder,
| | 06:25 | Chapter 06/03 Begin.
| | 06:27 | I am going to put them in this images
folder here, and I will paste them in.
| | 06:32 | But what's important to note is that
my Flash file is right here, and I need
| | 06:37 | to make sure my images exist within a folder
in the same location within that images folder.
| | 06:44 | So I am targeting port1,
port2, port3, so on and so forth.
| | 06:49 | So lets go back into Flash.
For port1_btn I am going to target
| | 06:54 | the images folder, port1.jpg, just like that.
| | 07:00 | It looks pretty good. So in fact, I am
just going to copy this line because I
| | 07:06 | want to do the same thing for the port2
_btn, but I want to target that second
| | 07:12 | image just like that.
| | 07:14 | Same thing for this third image.
| | 07:17 | This button is actually going to
load in that third image right there.
| | 07:22 | Again, it's just a copy and paste. Just be
aware of what button you are referring to.
| | 07:30 | So port4_btn. Just beneath the trace
statement for each one I can target that new image.
| | 07:38 | Lastly, port6_btn that button
is going to open up that jpg.
| | 07:44 | All right, everything looks good so far,
but the true test is of course testing
| | 07:50 | the movie, and I
will click one the Portfolio section.
| | 07:56 | I am still going to get my trace
statement pop-up but if I click on this second
| | 08:01 | image you can see it load that it still
gives me this trace statement, third image,
| | 08:07 | fourth image, fifth image, sixth image.
| | 08:12 | So now my gallery is completed. Each
time I click on a button, it dynamically
| | 08:16 | loads in the correct image. All those
images are external from the main Flash file,
| | 08:20 | so it keeps my main Flash file
small while still giving the user the
| | 08:25 | ability to load in additional images.
| | Collapse this transcript |
|
|
7. Adding VideoAdding video| 00:00 | Using video can sometimes get your
message across more effectively than just
| | 00:05 | using text and graphics.
| | 00:08 | And I think this About section is
really a prime example of that, because for
| | 00:13 | this About section, rather than just
having texts talking about Jill, I'd
| | 00:18 | rather include a video of her kind of
talking about her interests and what she
| | 00:22 | is passionate about.
| | 00:23 | So I am going to go ahead and add
a video right here in this area.
| | 00:27 | In fact, inside of the about background
movie clip is where I want to add the video.
| | 00:33 | So right down here at
the bottom is this layer 1.
| | 00:35 | Well, I just want to rename that to
video and I want to import the video
| | 00:42 | right into that layer.
| | 00:43 | So I am going to go to File > Import,
and I am going to select Import Video.
| | 00:50 | Now I can go ahead and browse
to that specific video file.
| | 00:55 | It's on my Desktop in the assets folder.
| | 00:57 | Here it is, My Jill movie.
| | 01:00 | It's a QuickTime Movie.
| | 01:02 | But notice that I can also import
MPEGs and some other file types as well.
| | 01:06 | But I am going to go ahead and just
select Jill movie and I am just going
| | 01:09 | to see what happens.
| | 01:11 | And what happens is, it
says, "hey, you know what,
| | 01:15 | this video is not necessarily
supported by the Flash Player."
| | 01:19 | So you need to use Adobe Media Encoder to
covert it to an FLV or F4V. I'll select OK.
| | 01:27 | And I can launch the Adobe Media Encoder
by clicking this button right down here.
| | 01:32 | And it tells me to make sure I
reference that FLV file after I've created it.
| | 01:39 | So again, I am launching
the Adobe Media Encoder.
| | 01:42 | I am going to take that QuickTime movie,
and I am going to convert it to an FLV file.
| | 01:48 | All right, so what it does is it
automatically references my Jill movie and is
| | 01:54 | actually ready to output it.
| | 01:55 | But I am just going to
double check some of this stuff.
| | 01:57 | I know that I want to output an FLV file.
| | 02:00 | And I can choose from a
number of presets as well.
| | 02:05 | I am going to just match the
source attributes by selecting that.
| | 02:10 | And notice that those source
attributes, if I click on that preset name I
| | 02:15 | can see what those are.
| | 02:17 | So now I am in Export Settings.
| | 02:19 | And I can just quickly just
sort of take a look at this video.
| | 02:23 | So the source of course, 340x215, and
the output is going to be about 340x216,
| | 02:30 | maybe off a pixel or so.
| | 02:32 | But I can always sort of change that,
maybe resize the video, sort of unlock it
| | 02:37 | and make that to 15, something like that.
| | 02:41 | But again, I can sort of take any
sort of take any preset and then modify
| | 02:44 | it further if I want.
| | 02:46 | I definitely want to make sure there's
audio in there, and sure enough there is.
| | 02:49 | It's going to export out the audio at 128 kbps.
| | 02:53 | That's about CD quality.
| | 02:55 | So that sounds pretty good to me.
| | 02:57 | But in general, I am going to leave most of
this information as is and I'll click OK.
| | 03:02 | All right, so it is going to output
it, but I need to be aware of where
| | 03:07 | it outputs this file.
| | 03:08 | So I am going to click on this Output
File link here and I am going to go ahead
| | 03:14 | and make sure it gets
output to the right folder.
| | 03:20 | And what I am going to do is I am
just going to go ahead and put it in this
| | 03:24 | Images folder with all these images.
| | 03:27 | So technically it's images and video,
but I know I just need to upload
| | 03:31 | this entire folder.
| | 03:32 | So I can just put it right in there.
| | 03:33 | It's going to be called Jill.
| | 03:35 | I'll click Save and from there,
all I need to do is start the queue.
| | 03:41 | And it renders the video
awfully fast as you can see.
| | 03:51 | All right, now that it's done,
I can quit Adobe Media Encoder.
| | 03:56 | Go back into Flash, which is telling me to
select that video, which is what I'll do.
| | 04:01 | I'll click Browse.
| | 04:02 | I'll go and select that video.
| | 04:05 | And remember this is my index.fla.
| | 04:08 | And then here is my FLV
file that was just created.
| | 04:11 | So I'll click Open.
| | 04:14 | It maps to that FLV file.
| | 04:16 | I am going to make sure this is
selected, Load external video with
| | 04:21 | playback component.
| | 04:22 | So I am going to be using
this playback component.
| | 04:24 | And I need to make sure I
upload that video file as well.
| | 04:29 | I'll click Next and then I get the
opportunity to pick the appropriate skin for this video.
| | 04:36 | So there's quite a few in here,
everything from some minimal classic sort of
| | 04:41 | custom ones to these other
skins as well. That's SkinOverAll.
| | 04:47 | So I encourage you to kind of
check out all of these skins.
| | 04:49 | There's quite a few.
| | 04:52 | I am actually going to just select
this sort of second option down for skins.
| | 04:58 | And it's going to contain sort of most buttons.
| | 05:01 | But if I select that you can see that
this s what it's actually going to give me
| | 05:05 | is all of these buttons.
| | 05:07 | So that seems pretty good so far.
| | 05:09 | I can also choose the color, so I can
change that if I want to to red to match
| | 05:15 | my design, and I'll click
next and then finally Finish.
| | 05:19 | So it loads in my video.
| | 05:21 | I'll just press the Spacebar.
| | 05:23 | So it actually loads it right over here,
but here is my video now.
| | 05:27 | (Female speaker: Hi, my name is Jill Steinman.)
| | 05:28 | And as I press the Spacebar?
| | 05:31 | (Female Speaker: ?I'm a freelance
graphic designer working in New York City.)
| | 05:34 | I can actually watch it play.
| | 05:35 | I could even press the Spacebar and
the video will still play and I can start
| | 05:40 | to position it where I want it to be.
| | 05:45 | (Female Speaker: After-- graduating from Rhode Island School of Design,
I immediately started working for various high-profile ad agencies.)
| | 05:52 | (Female Speaker: After five years,
I made the move to freelancing full-time.)
| | 05:56 | All right, that looks pretty good.
| | 05:58 | I am going to go ahead and move my
layer up to the very top, just so my
| | 06:01 | controls are on top as well.
| | 06:03 | But as you noticed, if I hit the
Spacebar or if I use any of these controls,
| | 06:08 | they all work from within Flash.
| | 06:10 | (Female speaker: Hi, my name is Jill Steinman.
I'm a freelance graphic designer working in New York City.)
| | 06:14 | (Female Speaker: After graduating from Rhode Island School of Design,
I immediately started working for various high-profile ad agencies.)
| | 06:22 | (Female Speaker: ?being a strong brand and?)
| | 06:24 | Okay, with that in place, and again,
I'll just kind of place it right here.
| | 06:29 | I can go ahead and test this movie.
| | 06:31 | So I am going to do a Control > Test Movie.
| | 06:34 | Remember that is in my About section.
| | 06:36 | I'll click About.
| | 06:37 | (Female speaker: Hi, my name is Jill Steinman.
I'm a freelance graphic designer working in New York City.)
| | 06:42 | You could see my video plays.
| | 06:44 | But I actually run into an issue,
because even though this video plays, if I
| | 06:48 | jump to another section,
I'll still hear the audio.
| | 06:52 | So let me just demo that for you.
| | 06:53 | (Female Speaker: After graduating from Rhode Island School of Design,
I immediately started working for various high-profile ad agencies.)
| | 07:00 | (Female Speaker: inaudible crosstalk)
| | 07:05 | So you run into that issue
where the audio keeps playing.
| | 07:08 | So I need to put in a quick little
piece of ActionScript that tells the audio
| | 07:14 | for that video to stop.
| | 07:16 | Pretty much I need to stop all audio from
playing regardless of what button you click on.
| | 07:22 | So I am going to this first frame and
right here for this first frame, this is
| | 07:27 | where the code lives for all my buttons.
| | 07:30 | Okay, so I am going to go select this
Home button for instance and if I go
| | 07:35 | to Window > Actions, that first frame here,
here's all of my code for all of my buttons.
| | 07:43 | And I need to add actually a new code
snippet for this just one of these buttons.
| | 07:49 | And what I am going to do is I am going
to select this button and I am going to
| | 07:52 | go to the Code Snippets panel.
| | 07:55 | And what I want to do is I am dealing with
audio and video, so I'll go to that folder.
| | 08:00 | And in that folder there is
this Click to Stop All Sounds.
| | 08:04 | And that's what I want to do is when
you click on any of these buttons I just
| | 08:07 | want to stop all the sounds from playing, so
that I just don't hear that audio any more.
| | 08:12 | So I am just going to go ahead and
double-click that code snippet to add it,
| | 08:16 | because the important thing that I need
is this right here, SoundMixer_stopAll.
| | 08:23 | That's exactly what I need,
because quite frankly I already have an
| | 08:27 | event listener for the Home button.
| | 08:28 | So I really just need this.
| | 08:30 | So all I am going to do is just select
this line and I am just going to copy it.
| | 08:36 | And then I am just going to
get rid of that code altogether.
| | 08:39 | So I encourage you to
check out the code snippets,
| | 08:42 | determine what you need and just use
what you need, because for my original Home
| | 08:46 | button event listener, when you click on
that button, that's when I am just going
| | 08:51 | to paste in that SoundMixer_stopAll.
| | 08:54 | So I want to do the same thing
for all the other buttons, paste in
| | 08:58 | that SoundMixer_stopAll.
| | 09:01 | So again, I don't know what the next
button is that they are going to click on.
| | 09:05 | All I know is I want the audio to
stop when they click on that button.
| | 09:08 | All right, with that SoundMixer_stopAll
in place that should correct my problem.
| | 09:14 | I'll go ahead and test out this movie.
| | 09:20 | (Female speaker: Hi, my name is Jill Steinman.
I'm a freelance graphic designer working in New....)
| | 09:24 | And then the audio stops.
| | 09:26 | So again, if I go back in here?
| | 09:27 | (Female speaker: Hi, my name is
Jill Steinman. I'm a freelance....)
| | 09:30 | regardless of which button I press it
stops that audio and my problem is solved.
| | 09:34 | But as you can tell,
video can tell more of a story than just
| | 09:41 | text and graphics alone.
| | 09:43 | So my next step now is to integrate
this video more into the design of the
| | 09:49 | web site as a whole.
| | Collapse this transcript |
| Adding custom video controls| 00:00 | Once you've imported your video, you
might realize that you want to integrate
| | 00:04 | the video into the design of the site.
| | 00:08 | And that's where I am at
here with this video here.
| | 00:12 | So I am going to double-click on it.
| | 00:14 | And what that does is that brings me
inside of this About background movie clip.
| | 00:19 | And that's where my video exists.
| | 00:22 | Okay, so it's not really
integrated on to the TV quite right for one.
| | 00:27 | And another thing is that I am not
crazy about all these video controls.
| | 00:30 | So I really want to customize this.
| | 00:32 | One thing I can do when it comes to
customization is I can change the color of
| | 00:38 | these video controls.
| | 00:39 | I can do that by looking
at my component parameters.
| | 00:44 | So I can sort of select maybe a closer match
to these flowers for instance if I want to.
| | 00:52 | Or I can change this skin entirely as well.
| | 00:56 | So if I click that pencil I can
go ahead and pick a different skin.
| | 01:01 | But again there might be cases where none
of these skins are really working for you.
| | 01:05 | And they are quite frankly not
really working for my design.
| | 01:08 | So I am going to select None.
| | 01:11 | So I am removing the skin
entirely. I'll select OK.
| | 01:16 | And now of course it's not there.
| | 01:19 | Now what I can do is I can move this
layer that contains this video, I could
| | 01:24 | move it behind or sort of
underneath all the other layers.
| | 01:29 | And you can see that she is
sitting inside of the TV now.
| | 01:32 | And remember all this is is a graphic.
| | 01:34 | It's actually a PNG file with
sort of a hole cut out of it.
| | 01:38 | But that seems much more appropriate.
| | 01:41 | And what I want to do now is
I want to add another layer.
| | 01:44 | And on this new layer are
going to be my video controls.
| | 01:49 | All right, and on this video controls
layers where I am going to drop on some
| | 01:53 | video controls, and they
exist under Window > Components.
| | 01:59 | So here are all my components.
| | 02:00 | Let me just pull this panel out.
| | 02:03 | I have Flex, User Interface, and then Video.
| | 02:07 | If I open up this Video folder, you can
see all of these video buttons I can use.
| | 02:11 | So I am going to go ahead
and use the PlayPauseButton.
| | 02:15 | I like that it's sort of two buttons in one.
| | 02:17 | But I can just click and drag that on to the
Stage just beneath the video right down there.
| | 02:23 | Next step up, let's take this Seekbar
which allows the user to sort of scrub to
| | 02:28 | a certain point in the timeline of this video.
| | 02:31 | Put it right there and just kind of nudge
it with my arrow keys, something like that.
| | 02:35 | Let's grab the Volumebar and drop it
on as well, give the user the ability
| | 02:39 | to control the volume.
| | 02:41 | All right so that looks pretty.
| | 02:44 | And what I can do with these buttons is
I can actually explore them, because if
| | 02:49 | I zoom in on this PlayPauseButton,
I close that Components panel.
| | 02:54 | I can zoom in on this button and if I
double-click on it I can start to edit it.
| | 02:59 | So I can dig down deep into this button.
| | 03:02 | I can go into the play button and it
starts to show me the different instances
| | 03:08 | of this play button.
| | 03:10 | And notice how it gives
me this weird green color.
| | 03:13 | Well, this is for my Over state.
| | 03:15 | So when these are rolls over the button,
it's actually going to highlight green.
| | 03:19 | I am not crazy about that.
| | 03:21 | So I can easily change it by double
clicking and digging deep into where that
| | 03:26 | green is and by selecting it I
can go ahead and change that color.
| | 03:31 | So the important thing to notice that
these are all movie clips, so I can edit these all I want.
| | 03:37 | So again, this sort of highlight color for the
Down state, I can change that to red as well.
| | 03:44 | All right, PlayButtonDown,
let's go back, go back.
| | 03:50 | And again, anytime you want to change
something just double click and dig into
| | 03:53 | that button and then change it accordingly.
| | 03:56 | But that's all I was really doing
is changing this square background.
| | 04:02 | The cool thing is this square background
that I've been editing for the Over and
| | 04:05 | the Down belongs to all of the
buttons that have the square background.
| | 04:10 | So my Pause button is actually going to give
me this red color as well. So it's perfect.
| | 04:16 | I only edit once, and then I am good to go.
| | 04:19 | So let me go back to Scene 1.
| | 04:20 | Let me go ahead and Fit in
Window. There's my video.
| | 04:25 | Let's do a Control > Test Movie.
| | 04:30 | And let's go ahead and review those buttons.
| | 04:32 | (Female speaker: Hi, my name is Jill
Steinman. I'm a freelance graphic?)
| | 04:37 | I can scrub through.
| | 04:41 | (Female speaker: ?designers bring awareness to...)
| | 04:43 | I can even play with the volume.
| | 04:44 | (Female speaker: ?impoverished countries.
When I'm not working, I can be found...)
| | 04:50 | All right, and everything works great.
| | 04:51 | And again, I didn't have to write any code.
| | 04:53 | All I need to do is drop on
those buttons into this area.
| | 04:57 | And then I can fully customize them all
I want just to make sure it integrates
| | 05:02 | nice with the design.
| | 05:04 | And of course, that's what I have here.
| | 05:06 | So the next step is to even go beyond
this and start controlling graphics based
| | 05:11 | on the video as well.
| | Collapse this transcript |
| Adding full-screen functionality| 00:00 | Now, I want to go beyond the typical
video controls and give the user the
| | 00:04 | ability to play the video full screen.
| | 00:07 | So, I'm going to double-click on this
about bkgd and inside of this about bkgd
| | 00:12 | movie clip, notice that I have this
video layer which includes the video, and
| | 00:16 | then I have the controls layer and on
the controls layer is where I want to drop
| | 00:20 | in a full screen button right here.
| | 00:22 | So, I'm going to go to Window and open
up the Components panel and inside of the
| | 00:27 | Video folder you'll
notice that FullScreenButton.
| | 00:30 | So, all I need to do is drag it right here
on my TV and watch what happens when I do.
| | 00:36 | You will sometimes get this warning.
It says, "A component with this name already
| | 00:40 | exists in the document."
| | 00:42 | Now, I didn't already add a
FullScreenButton, but what's going here is the
| | 00:46 | FullScreenButton is sharing the same sort of
base button components as my other buttons.
| | 00:52 | So that background is actually the
same for all of them and since I modified
| | 00:57 | that base background graphic, I want to
use my existing components, just like that.
| | 01:04 | Okay, so there we are.
| | 01:05 | There's my button as you could tell.
| | 01:07 | I'll just minimize that Components
panel and again I have my other buttons down
| | 01:11 | here and all I'm going to do is
just use my arrow keys to position this
| | 01:14 | accordingly, and I need to do one more
thing, because I need to add some HTML
| | 01:19 | code that gives permission for
this video to play full screen.
| | 01:23 | So, I'm going to go to File, down to
Publish Settings, and I'm going to edit my
| | 01:30 | HTML, so I'm going to make sure this is
checked, and then I'm going to go to the HTML tab.
| | 01:34 | All right, in there, you'll see this
Template dropdown and from there I want to
| | 01:39 | select Flash Only - Allow Full Screen.
| | 01:42 | Again, this is just going to give
permission and basically adds a parameter in
| | 01:46 | the HTML that sets the Allow Full
Screen equal to true, but for me all I need
| | 01:51 | to do is select it like that and from
there, I can go ahead and click OK like
| | 01:59 | that and I'm good to go.
| | 02:01 | So, let's go ahead and test this out.
| | 02:03 | I'm going to go to File and I'm going
to test it out from Flash because under
| | 02:08 | Publish Preview, under File,
I can select HTML as my Default.
| | 02:13 | So, it's going to open up in my
default browser and I'll go to the About
| | 02:18 | section, and I'll just turn down that
volume so I can still chat with you, but
| | 02:24 | in general you can see the video is
playing fine here and again I'm in a
| | 02:27 | browser and what I can do from here is
click this Full Screen button and the
| | 02:32 | video goes full screen.
| | 02:34 | It even gives me a message saying to
hit the Escape button when I want to exit
| | 02:39 | out of this Full Screen mode, but
you also might want to consider maybe
| | 02:43 | increasing the video quality if you
want, if you know your users are going to
| | 02:47 | play your video full screen. Just
keep in mind file size if you do that.
| | 02:52 | So, I will hit Escape, and I'm out of
that video and back into my normal mode.
| | 02:56 | But as you can see it was really easy,
just to drop on a Full Screen button.
| | 03:00 | Just don't forget to edit your HTML settings.
| | 03:02 | You can easily tell that it enhances
the user's experience of your content.
| | Collapse this transcript |
| Syncing graphics with video| 00:00 | One of the great things about using
video in Flash is that you can sync up
| | 00:04 | the video with other graphics on the site, and
that's what I want to do here with this video.
| | 00:10 | When Jill says certain things, I actually
want to highlight some text in these paragraphs.
| | 00:16 | So, I'm going to double-
click on this movie clip.
| | 00:19 | It's right in here, and that's where
my video lives, but what I want to do is
| | 00:25 | I'm going to add a new layer, and
I'm going to just call it highlights.
| | 00:31 | These are the highlights that I'm going to draw.
| | 00:33 | So, I'm just going to use the Rectangle
tool and I'm just going to go ahead and
| | 00:38 | select red as my fill color and make it
about 50%, and I'm just going to draw a
| | 00:45 | quick box right here because when Jill
says Rhode Island School of Design,
| | 00:51 | I want to emphasize this information.
| | 00:54 | So, let me select that graphic here,
and let me just change the color and
| | 00:59 | make sure that's at a bright red, and
that looks pretty good, nudge it into
| | 01:03 | place, and I'm going to go ahead and
drag it to the Library, and I'm going to
| | 01:07 | call this-- first off,
it's not going to be a button.
| | 01:10 | It's going to be a movie clip, but I'm
going to call this highlight1. There we are.
| | 01:17 | There's my highlight1.
| | 01:19 | I'm going to go ahead and draw another
highlight over here that highlights the
| | 01:25 | places that she's worked
at, like that, all right.
| | 01:29 | So, I'll select these rectangles, drag
them to the Library, and I'll call them
| | 01:36 | highlight2, just like that.
| | 01:40 | Now, I need to give each
a specific instance name.
| | 01:44 | So, the first one is going to be called
highlight1, second one highlight2, like that.
| | 01:54 | All right, so far, so good.
| | 01:56 | There's my highlights in place.
| | 01:59 | Now, I need to determine
when Jill says certain items.
| | 02:03 | So, I'm going to lock down some of
those graphics, so I can select that video,
| | 02:08 | and I'm going to open up this
Properties panel and if I close up those
| | 02:14 | parameters, notice that I'm given Cue
Points right in here for this video.
| | 02:19 | Okay, so, the first thing I'm going to
do is I'm going to give this video an
| | 02:22 | instance name of jillvideo.
| | 02:25 | It's the name of the video and on this
video it's going to have a couple cue
| | 02:30 | points, and I'm going to
determine those by hitting this plus sign.
| | 02:34 | So, I'm going to play this video, and
I'm going to hit the plus sign to add
| | 02:39 | various cue points, so.
| | 02:41 | (Female speaker: Hi, my name is Jill Steinman.
I'm a freelance graphic designer working in New York City.)
| | 02:46 | (Female Speaker: After graduating from Rhode Island School of Design,
I immediately started working for various high-profile ad agencies.)
| | 02:53 | (Female Speaker: After five years, I made the move to
freelancing full-time, mainly because I feel that design?)
| | 02:58 | All right, so, here's my three cue points.
| | 03:01 | The first one is going to be my first
highlight, which is about her schooling.
| | 03:06 | So, I'll just go ahead and say
highlight1, because that's what I want to
| | 03:11 | highlight, second cue point is
highlight2, and this third one I made is the one
| | 03:19 | where I just want to make
both highlights go away.
| | 03:22 | So, I'll just type in end there.
| | 03:25 | So, I've determined my cue points.
| | 03:27 | I have my graphics in place.
| | 03:30 | I know the name of this video.
| | 03:32 | Now I can add some ActionScript, and I'm
going to use the Code Snippets panel to do this.
| | 03:38 | I am going to go to Window, down to Code
Snippets, and I'm going to open up this
| | 03:43 | Audio and Video folder, and this third
one down is the one I'm going to select,
| | 03:48 | because On Cue Point Event, I
want certain things to happen.
| | 03:52 | So, I'll just double-click
there and it adds that code.
| | 03:56 | So, it's referencing the video
because I had it selected and it's going to
| | 04:01 | trace out the name of the cue point.
| | 04:05 | So, this is either going to be
highlight1, highlight2 or end.
| | 04:08 | So, what I want to do instead of
tracing out the name of the cue points, I want
| | 04:14 | to do something based on those cue points.
| | 04:17 | So, I'm going to type in if the name is
equal to highlight1, then do something.
| | 04:27 | So, I'm going to get rid of that
semicolon and add an opening curly brace and
| | 04:33 | when I hit Return, it automatically
adds this closing curly brace, because when
| | 04:39 | the video hits this cue point name,
what I want to do is I want to turn on the
| | 04:46 | appropriate highlights.
| | 04:47 | So, I'll say highlight1.visible is equal to true
| | 04:53 | and I'm going to make sure that
| | 04:56 | that takes place at that point in time,
but what I need to do initially is make
| | 05:02 | sure highlight1,
its visibility is equal to false.
| | 05:08 | So, we turn it off initially, and then when
it hits this cue point, turn on that highlight.
| | 05:13 | Same thing for the second highlight, so
all I need to do is copy this and paste it.
| | 05:19 | So, if the cue point is equal to
highlight2, then turn off the first highlight
| | 05:26 | and then turn on the second
highlight, just like that.
| | 05:35 | And remember, I have to
make sure both of them are
| | 05:39 | not visible initially.
| | 05:42 | Okay, so it hits that first cue
point, turns on the correct highlight.
| | 05:46 | It hits the second cue point, turns off
the first one, turns on that second one
| | 05:52 | and remember as I checkout this video,
remember that there's also this end cue
| | 06:00 | point as well, and that's when I'm
just going to turn off both of them.
| | 06:04 | So, let me go back to this first frame
here, back into my code and right here,
| | 06:10 | I can copy and paste this last if
statement and if the name is equal to end,
| | 06:18 | then turn both of
them off, just like that.
| | 06:23 | All right, the code is looking pretty good.
| | 06:26 | I can also comment this code if I want
to as well, but in general I know that
| | 06:32 | this controls the highlights.
| | 06:35 | That's all I'll do right there.
| | 06:38 | But let's go ahead and run this.
| | 06:39 | I'm going to do a Control > Test Movie,
and I am given an error right in here.
| | 06:46 | So, let's take a look at this.
| | 06:48 | Looks like there is a misspelling
right in here and this will happen on
| | 06:51 | occasion, and I'm glad it did because
it's looking for this undefined property,
| | 06:57 | and it's given in my Compiler Errors.
| | 07:00 | So, all I need to do is double-click
on that and that takes me right to that
| | 07:04 | line of code that has the issue.
| | 07:06 | So, I can go ahead and fix that.
Obviously I misspelled highlight.
| | 07:10 | I can fix that by removing that extra
L that's in there in both places and
| | 07:14 | then I can run my code.
| | 07:20 | Let's go to the About section, the
video is going to play, and then now we're
| | 07:24 | going to watch the highlights,
highlight and then also turn off.
| | 07:28 | (Female speaker: Hi, my name is Jill Steinman.
I'm a freelance graphic designer working in New York City.)
| | 07:32 | (After graduating from Rhode Island School of Design,
I immediately started working for various high-profile ad agencies.)
| | 07:38 | (Female Speaker: After five years,
I made the move to freelancing full-time.)
| | 07:42 | So, that was just a quick example of
having graphics interact with the video,
| | 07:49 | all based on these cue points, and as
you can tell, it was quite easy to do in Flash.
| | Collapse this transcript |
|
|
8. Adding AudioAdding music| 00:00 | Adding audio to your site can really
make for a better experience for the user.
| | 00:05 | Just keep in mind that when it
comes to music not to overdo it.
| | 00:09 | I can easily add music that plays the
entire time of the site, but quite frankly
| | 00:14 | my experience is that people often
go for the mute button before long.
| | 00:19 | So, what I want to do is just add a quick
little music tag at the beginning of this site.
| | 00:24 | The first step is going to be adding a new
layer, and I will call this new layer music.
| | 00:30 | I will drag that beneath the Actions
layer and on this layer is where I will
| | 00:35 | import my audio file.
| | 00:37 | So, I am going to Import > Import to Stage,
and I can locate this ChimeIn.wav file.
| | 00:44 | Notice I can also import other sound
formats as well such as MP3, that is
| | 00:49 | available, but in this case, it's
just this WAV file. I'll click Open.
| | 00:55 | Remember I selected Import to Stage,
but it doesn't appear on my Stage, and
| | 01:00 | that's because it actually
just puts it in the Library.
| | 01:03 | So, as you can see right
here there is my ChimeIn.wav.
| | 01:07 | But again, I can select that file.
| | 01:08 | It actually still does
import it. I'll click Play.
| | 01:11 | (Music playing)
| | 01:14 | Again, just a simple music tag at the
very beginning of this site is what I want.
| | 01:19 | So, all I need to do is select this
file and drop it right on to the Stage.
| | 01:24 | Now, notice that it does add the
waveform on that layer that I had selected.
| | 01:29 | So, it's exactly the way I want it.
| | 01:32 | In fact, I can select that first
keyframe, go to my Properties panel, and take a
| | 01:37 | look at this Sound category because it does
point out that WAV file that has being used.
| | 01:44 | Notice that I have the Sync set
to Event, and that's what I want.
| | 01:48 | What that means is that as soon as
playhead hits this frame, it's going to play
| | 01:53 | this audio track in its entirety
regardless of what's going on in the Timeline.
| | 01:59 | If I had it set to Stream, it means
the audio track would be locked to the
| | 02:04 | Timeline so when we reach the Stop action,
it would actually stop playing the music.
| | 02:08 | So, again, that's not what I want.
| | 02:10 | I want it just to play
independent of the main Timeline.
| | 02:13 | That's why this is set to
event and now I am good to go.
| | 02:17 | So, I'll go to Control > Test
Movie. Test this out.
| | 02:22 | (Music plays)
| | 02:24 | Great. It's exactly what I want, the
Timeline stops, the music continues to kind of
| | 02:28 | play through, very nice.
| | 02:30 | But to be honest that audio track
sound like it's being compressed, and it is.
| | 02:36 | So, I am going to show you what's going
out there and just how to increase the
| | 02:40 | quality of your audio.
| | 02:42 | So, if I go to File, down to Publish
Settings, I'll go to the Flash tab and right
| | 02:49 | here in the center, look, it says
Audio event is set to 16 KB/Sec.
| | 02:53 | That's really low
considering CD quality is about to 128.
| | 02:58 | So I can change it by clicking Set
and then the bit rate to about 80.
| | 03:05 | I don't want it to be say 120 or
160. That might be a little too much.
| | 03:10 | Again, it's a balance of adding more
file size versus quality so that's why I am
| | 03:15 | going to pick 80 KB/sec.
| | 03:17 | Again, the higher the bit rate, the larger
your file will be, and then I can click OK.
| | 03:22 | Now, let's go ahead and
check out our audio track.
| | 03:25 | (Music plays)
| | 03:31 | So, it does sound a lot better.
| | 03:33 | I think with even tracks with sort
of more bass in them and low tones,
| | 03:36 | you definitely notice a difference as well
but keep in mind your Publish Settings.
| | 03:41 | So, obviously it's really easy to
import audio, and it does really add a nice
| | 03:44 | dimension to any web project.
| | Collapse this transcript |
| Adding audio to buttons| 00:00 | It's important to provide users
with feedback to interactions that they
| | 00:04 | perform on your site.
| | 00:05 | That's what I want to do with these
buttons when the user rolls over a button,
| | 00:09 | I want to play just a quick rollover sound
effect and then also when they click,
| | 00:14 | I want to play a click sound.
| | 00:17 | All right, so the first thing I
need to do is import those sounds.
| | 00:21 | So, I am going to File >
Import, and I can Import to Stage.
| | 00:25 | Notice that if I do Import to Library,
it's going to do that same thing as well.
| | 00:31 | I'll select rollover.wav. Again,
| | 00:34 | it could be an MP3 or other sound
format so that imports that file.
| | 00:40 | Let's go to File > Import > Import
to Stage again, and I'll select this
| | 00:45 | click.wav as well and click Open.
| | 00:48 | Like I just mentioned, it does import
them right into the Library as you can see.
| | 00:53 | There is this click sound.
| | 00:55 | Let's play it.
| | 00:56 | (Click, click, click)
| | 00:58 | And again it's going to be fairly subtle.
| | 01:01 | Then near the bottom here I have
this rollover WAV, so I'll click.
| | 01:04 | (Music plays)
| | 01:06 | So, that's the rollover sound that I want.
| | 01:09 | All right, so my tracks are imported,
those audio files, and I need to add
| | 01:16 | them to these buttons.
| | 01:18 | Luckily, these are all instances of
the generic button, so all I need to do is
| | 01:24 | just double-click on any one of them to edit it.
| | 01:27 | Now, notice in my Timeline what I can
do is just add a new layer, and I can
| | 01:33 | rename this layer Audio.
| | 01:35 | All right, right in here for the Over
state, like I just mentioned, I want to go
| | 01:41 | ahead and play a track.
| | 01:43 | So, I need to insert a keyframe at
that point in time and on this keyframe,
| | 01:49 | I want to add the appropriate audio track.
| | 01:52 | So, let me open up my Library.
| | 01:53 | I am going to select this rollover.wav,
and I am just going to drag it right on
| | 01:59 | to the Stage and notice how it
adds that waveform to that Timeline.
| | 02:04 | All right, I am going to select that
keyframe there and I am just going to
| | 02:08 | double-check my sound.
| | 02:09 | It does say rollover.wav.
| | 02:11 | The Sync is set to Event
so that looks really good.
| | 02:16 | In next frame, again it's the same
process of inserting a keyframe, and now I
| | 02:21 | can go ahead and add the click.wav right here.
| | 02:26 | I'll just drop that right on.
| | 02:28 | I can see that waveform in there,
giving me visual feedback that it actually
| | 02:33 | put on that audio track in there.
| | 02:35 | I can check the Sync is set to
Event as well and I am good to go.
| | 02:39 | So, again this was to the generic
button and if I click on Scene 1, it actually
| | 02:44 | again adds it to the generic
button which is being used five times.
| | 02:48 | Okay, so let's go ahead and check this out.
| | 02:51 | I'll go to Control > Test Movie.
| | 02:57 | So, let's listen to these sound effects.
| | 02:59 | (Rollover sound and clicking)
| | 03:08 | All right, so that sounds pretty good.
| | 03:10 | I personally think the rollover sound
is kind of loud so I want to edit that.
| | 03:15 | The great thing is that I don't have to
go out to my actual sound file, edit it,
| | 03:20 | and then reimport it.
| | 03:22 | What I can do is I can
actually edit it right in Flash.
| | 03:25 | So, I am going to just double-click on
that generic button. Go to that Over sound.
| | 03:30 | Sure enough, here's that rollover.wav
and what I can do is just this Edit sound
| | 03:35 | envelope icon right there, and
now I can see my waveform here.
| | 03:40 | All I need to do is grab this control bar,
and I can go ahead and move that down
| | 03:46 | so it's about halfway, sort of part of
that lower quarter area right down here.
| | 03:50 | That's where I will put it.
| | 03:50 | So, it's only about the quarter of the way up.
| | 03:52 | Now, let's play it.
| | 03:53 | (Rollover sound playing)
| | 03:55 | Again, I am going to keep this really subtle.
| | 03:58 | I don't want to annoy users with audio.
| | 03:59 | I just want to provide some
feedback so they know that they are sort of
| | 04:03 | interacting with this site.
| | 04:05 | Okay, that was just a quick
way to edit the sound envelope.
| | 04:08 | Notice that when I do go back into Edit
sound envelope, what I can also do if I
| | 04:12 | want it to trail out a little quicker,
I can even click here and add another
| | 04:18 | keyframe and adjust the audio
so it trails out a little faster.
| | 04:23 | All right, let's go to Test Movie.
| | 04:28 | (Music plays)
| | 04:30 | Now, remember the rollover sound
is going to be a lot more subtle so--
| | 04:33 | (Rollover sound plays)
| | 04:43 | Just like that.
| | 04:44 | So again, just providing some user
feedback to their interactions that they are
| | 04:48 | performing on the site.
| | 04:49 | As you can tell, it does really add a
nice dimension to sort of any web project
| | 04:54 | you might be working on.
| | Collapse this transcript |
|
|
9. Integrating a Contact FormCreating input text fields| 00:00 | When you are going to create a contact
form, the first thing you need to do is
| | 00:03 | add some input text fields.
| | 00:06 | So, here I am the sort of last frame
of this site and I am just going to
| | 00:10 | double-click on this Contact movie clip.
| | 00:13 | Now, I am inside of this Contact movie
clip and here are the fields that I want
| | 00:18 | to be input text fields.
| | 00:20 | So, currently this was actually just
imported from the Photoshop, and it brings
| | 00:25 | in this text as editable, which is what
I defined when I imported it as TLF Text.
| | 00:31 | So, that's perfectly fine.
| | 00:33 | Notice that it's set to Selectable.
| | 00:35 | Well, what I want to do is I want to
change this to Editable so this is going to
| | 00:40 | give the user the ability
to edit this text field.
| | 00:43 | All right, so I've done that, but I
also need to adjust it a little further.
| | 00:48 | So, I am just going to use my arrow
keys to position this accordingly and
| | 00:52 | then I am going to double-click on it and
just expand out this text field, just like that.
| | 00:58 | Then I'll just delete that
word John Doe right there.
| | 01:01 | But now again, this is an Editable text field.
| | 01:04 | I've cleared it out, and it's set up
to accept any text the user enters in.
| | 01:09 | I am going to do the same thing for Email.
| | 01:12 | Again, I want to make sure this is Editable.
| | 01:14 | I'll delete the information in there.
| | 01:16 | I'll stretch it out and I am going to
use my Selection tool just to kind of
| | 01:21 | reposition it a little bit.
| | 01:22 | Notice as I make them Editable it gives
them this dashed line. Okay, so it's just
| | 01:28 | a visual confirmation that I am
getting all of this squared away.
| | 01:31 | All right, this text field I am going
to change it to Editable as well, and
| | 01:37 | I'll just stretch it out just like
that by grabbing that lower right node, and
| | 01:43 | I'll delete that text.
| | 01:44 | Okay, one thing about this Message text field.
| | 01:48 | I want to make sure that the
lines wrap within this text field.
| | 01:53 | So, let's check out some of my options
in here as I go into Paragraph and then
| | 01:59 | Container and Flow,
these are all my options I get.
| | 02:02 | But under Container and
Flow what I have is Behavior.
| | 02:06 | So, I want to make sure
this is set to Multiline.
| | 02:10 | Okay, so sometimes it might default to
Single Line. Just make sure it's set to
| | 02:13 | Multiline, and then I am ready to go.
| | 02:16 | Okay, so those are my text fields and
also right here what I want this to be is
| | 02:22 | I want this to be like a
little feedback text field as well.
| | 02:26 | So, I am going to go ahead and position
that off to the side and I am going to
| | 02:30 | make sure this doesn't
contain any information whatsoever.
| | 02:34 | So, in general I am slowly
getting this set up to receive input.
| | 02:37 | All right, this first text field
right here, now that I have it set up,
| | 02:42 | I am going to give it an instance name,
and I'll just call it theName and for
| | 02:48 | the Email, I am going to type in theEmail,
and then Message is going to be theMessage.
| | 02:58 | Now, the reason I am adding "the" before each
one is that I want to give it a specific name.
| | 03:03 | If I have names that are too general,
it might conflict with code within Flash.
| | 03:08 | So, "the" or "my" is sometimes used
as well but in general, they have
| | 03:12 | unique instance names now.
| | 03:14 | All right, so let's go ahead and
test this out. Control > Test Movie.
| | 03:22 | (Music plays)
| | 03:26 | Contact section and I'll type in like that.
| | 03:31 | It works great, just like that,
just like that. It works out great.
| | 03:43 | One thing I have noticed though is if
I am in this Name text field and I hit Tab,
| | 03:50 | you sometimes might run into this issue.
| | 03:53 | You want to give the user the ability to
tab through all of these input text fields.
| | 03:58 | But if I hit Tab, what Flash does is it
just kind of refers to any button or any
| | 04:04 | interactive object on the Stage
starting at the upper left-hand corner.
| | 04:09 | So, I basically want to define the tab order.
| | 04:12 | All right, that's the code I am going
to add, so I'll close this file and right
| | 04:16 | in here, again I am in this Contact movie clip.
| | 04:19 | I am going to create a new layer,
and I am going to call it Actions.
| | 04:25 | I am going to select that first frame,
and I am going to open up the Actions panel.
| | 04:29 | All right, so I am just going to
write some ActionScript from scratch.
| | 04:33 | I'd basically need to add the tab
index or the tab order of my text fields.
| | 04:39 | So, I am going to type in
InteractiveObject because that text field is an
| | 04:45 | InteractiveObject,
and then just call it theName.
| | 04:49 | That's the first text field, and
I am just getting that text area.
| | 04:57 | That's all I am doing is
defining that one text field that's
| | 05:02 | actually defined as theName.
| | 05:04 | So, I've basically pointed to that
object and I am making sure the tabIndex,
| | 05:11 | and this is nice when I start to type in tabIndex.
| | 05:14 | It recognizes it as a tabIndex and
actually gives me that code hinting.
| | 05:19 | So, as soon as that selected, I could
just hit Enter and it adds it and I can
| | 05:24 | define this is the first object to tab.
| | 05:28 | All right, so I am going to copy this
code and paste it below, because I want to
| | 05:32 | do the same thing for the Email.
| | 05:36 | So, again I am just defining that
input text field as an InteractiveObject.
| | 05:40 | It's going to have a tabIndex number of 2.
| | 05:43 | So, it's gong to be the second field
that is tabbed to. The last one is theMessage,
| | 05:49 | and I am going to set
this tabIndex to 3 as well.
| | 05:53 | So, now I am going to be able to tab
through all three of those and however many
| | 05:57 | fields you have, you can kind of go on
as long as you want, but I am going to go
| | 06:02 | ahead and test out this movie.
| | 06:05 | (Music playing)
| | 06:09 | Type in, hit Tab, it goes to that field,
like that, Tab, and it works great.
| | 06:20 | So, again using tabIndex is just
great way to get around any sort of little
| | 06:25 | issues that you might have.
| | 06:26 | But other than that it's as simple as
selecting any text field, making sure that
| | 06:31 | it's set to Editable, and you are good to go.
| | 06:34 | So, the next step from here is
to send this information out.
| | Collapse this transcript |
| Accessing the input data| 00:00 | Once you have your input text fields
in place, you then need to check to make
| | 00:04 | sure the user actually entered in
information in these fields before sending
| | 00:09 | out the information.
| | 00:10 | So I'm going to select
this contact form right here.
| | 00:13 | I'll just double click on it, so
I'm inside of this Contact movie clip.
| | 00:18 | And let's just confirm a
couple of these instance names.
| | 00:23 | For this first text field, it is
called theName, then we have theEmail, then
| | 00:29 | we have theMessage.
| | 00:31 | So those are the three text fields
that I'm just going to check when you
| | 00:34 | click on the Send button.
| | 00:36 | But really what I need to do is I need to
take this graphic and convert it into a button.
| | 00:42 | So I'll just select a graphic, drag it
into the Library, and let's call it send
| | 00:48 | button, make sure the Type is
of Button, and I'll click OK.
| | 00:52 | All right, with that button still selected,
I can give it an instance name of send_btn.
| | 00:58 | Okay, so when you click on send_btn,
I want to just check those fields.
| | 01:04 | So I'm going to use code snippets to
get me started with the code structure.
| | 01:10 | So, in the Code Snippets panel, under
Event Handlers, I'm just going to add
| | 01:14 | a Mouse Click Event.
| | 01:16 | So I'll just double-click on that, and I
just added the mouse click event to the
| | 01:20 | Send button, and it just
traces out the "Mouse Clicked."
| | 01:24 | Well, I don't really want to do that.
| | 01:26 | What I want to do is I want to check or at
least get the information in those text fields.
| | 01:33 | So what I can do is I can type in
theName.text, just like that, and that will
| | 01:41 | enable me to see whatever is in that text field.
| | 01:44 | Okay, I'm just going to copy this line,
paste it below twice, because I want to
| | 01:53 | get theEmail and theMessage, just like that.
| | 01:59 | So, when they click on the Send button,
trace out whatever is in these three fields.
| | 02:04 | I'm going to get the text in them and
what it's going to do is it's going to
| | 02:07 | appear in my Output panel.
| | 02:09 | So with that set up, all I'm going to
do is I'm just going to test out this
| | 02:13 | movie to make sure it's working.
| | 02:14 | (Music playing)
| | 02:27 | Just like that.
| | 02:28 | I've entered an information in there
and if I click the Send button, I should
| | 02:32 | see in the Output panel
this text, and there it is.
| | 02:36 | So again, my trace statement actually
sort of prints out that information,
| | 02:40 | places it in my Output panel. All right.
| | 02:43 | So that next step is to go ahead and
make sure the user actually entered in
| | 02:47 | information into those three fields.
| | 02:50 | And even if they did, what I want to
do is display a nice message right next
| | 02:54 | of the Send button.
| | 02:55 | So close this file, go back into my code,
and I'm going to go ahead and write in
| | 03:02 | place of this comment, I'm going
to go ahead and add an If statement.
| | 03:06 | So, here is the basic If statement
structure. It's going to look just like this.
| | 03:13 | I'll move this up a little bit.
Open and close parenthesis.
| | 03:14 | If a certain value is met, then do
whatever is in these two curly braces.
| | 03:21 | So, I'm going to check if theName.text
is equal, I need two equal signs there,
| | 03:30 | if it's equal to nothing, so if they
didn't put anything in there, that's two
| | 03:35 | quotes there, then display a certain message.
| | 03:38 | And what I want to do is I want to
display a message right in this text field.
| | 03:44 | So I need to select this text field,
I'm going to go to Properties, and I need
| | 03:48 | to make sure it has an instance name.
| | 03:50 | So I'm going to call it theFeedback.
| | 03:51 | Let me go back to that code.
| | 03:57 | It's in my first frame of the Timeline
here, and theFeedback, in that text
| | 04:07 | field go ahead and put "Please enter
in a name," just like that, within quotes.
| | 04:14 | So if there's nothing in there,
then it shows me this message.
| | 04:17 | Let's go and test this.
| | 04:21 | (Music playing)
| | 04:25 | Again, I'm not going to put anything in here.
| | 04:27 | I'll just click Send, and it
says "Please enter in a name."
| | 04:36 | So it's working out great so far, the
other thing I need to do is add in checks
| | 04:40 | for these other two text fields.
| | 04:42 | So I'm going to do that right now, and
continue on to add some more code as well.
| | 04:48 | So theName.text, if that's
equal to nothing then displays this.
| | 04:52 | And what I want to do is I'm going to edit
this message to say, "Please fill out all fields."
| | 05:02 | So that's going to be the generic
message that gets displayed anytime they do
| | 05:07 | not enter in information in here.
| | 05:09 | So, I'm going to add some more code in here.
| | 05:12 | So, it there's nothing in theName text
field or, and these are two pipes is what
| | 05:17 | those are, just under the Delete key,
these two pipes is an OR statement.
| | 05:23 | So, or theEmail.text is also, you
know, if that's equal to nothing or
| | 05:33 | theMessage.text is equal.
| | 05:38 | And again, I need two equal signs
right in here, because I'm doing a check to
| | 05:42 | see if one thing is
compared to another basically.
| | 05:46 | All right, so that looks pretty good.
| | 05:47 | It there is nothing in theName text
field or nothing in theEmail or nothing in
| | 05:52 | theMessage, then display this line.
| | 05:56 | If they do actually fill out all these
fields, well, I want to add an else,
| | 06:01 | open curly brace, closing curly brace
gets added when I hit the Return button.
| | 06:08 | else theFeedback.text,
we'll just add a quick Thank you.
| | 06:17 | There we go.
| | 06:18 | That's perfectly fine, just some
feedback and saying that they have entered in
| | 06:23 | the Form, and its entirety.
| | 06:25 | And what I can even do is clear it,
so theName. Again, they entered in
| | 06:34 | the fields correctly.
| | 06:35 | I display a thank you message and
then I clear all the fields, in case they
| | 06:46 | want to send another message, just like that.
| | 06:54 | All right, everything now looks good.
| | 06:57 | I'm going to go ahead and test this out now.
| | 07:02 | (Music playing)
| | 07:08 | Okay, so maybe again I did not
enter anything in the Email field.
| | 07:19 | I'll click Send, and it does display
that information but also says, "Please fill
| | 07:25 | out all fields," and I'm like
okay, well, I will. There we go.
| | 07:30 | Now if I click Send, it clears the form and
then gives you a thank you message as well.
| | 07:35 | So now that I have this verification
in place, I can then take that data
| | 07:40 | and then pass it out and ultimately
send this information to the person's email address.
| | Collapse this transcript |
| Sending data to an email address| 00:00 | The last step in my contact form is
taking all of this data that the user enters
| | 00:05 | and then sending it out to an email address.
| | 00:08 | So I'm going to double-click
on this Contact movie clip.
| | 00:12 | And as you can see right in here,
I have my input text fields, even a
| | 00:17 | feedback text field.
| | 00:19 | And then associated to this
button, I have some ActionScript.
| | 00:22 | So let's take a look at that.
| | 00:24 | In this first frame of the Actions
layer, I can open up the Actions panel and
| | 00:30 | view all of that code.
| | 00:31 | So currently, I'm tracing out that data,
which means it's just appearing in my
| | 00:35 | Output panel, but what I want to do
is I want to take all of this data.
| | 00:40 | And I want to package it up
into one variable package.
| | 00:44 | And then send it to a specific URL.
| | 00:47 | So the nice thing is is I can replace these
comments with my own comments if I want to.
| | 00:52 | And that's what I want to do right now.
| | 00:54 | I'm going to just create a
variable container, okay.
| | 01:01 | And I'll just delete this line real fast.
| | 01:04 | All right, and this is
basically going to be called var.
| | 01:06 | I'm creating a new variable,
and it's called allVars.
| | 01:11 | All my variables are going to go
in this big box called allVars.
| | 01:16 | It is URLVariables.
| | 01:18 | And as I type in URLV, I can see URLVariables.
| | 01:22 | And it highlights it. I can hit Enter.
| | 01:25 | And it will automatically add that word for me.
| | 01:28 | And I'm basically creating a new
URLVariables container URLVariables().
| | 01:35 | All right, so now what I need
it to do is need to copy this.
| | 01:40 | And inside of this Variables container,
I need to have it contain the name, which
| | 01:49 | is going to be equal to the text
in this instance name field here.
| | 01:54 | So same thing right here,
allVars.email, within that Email variable,
| | 02:01 | contains that information.
| | 02:05 | And then message contains any text that's
in this instance name field here as well.
| | 02:15 | Okay, so within this sort of box
contains these three variables. All this
| | 02:20 | information gets packed up into this
nice little variable container right here.
| | 02:25 | And then what I can do is I can then go
ahead and send that information out to a URL.
| | 02:30 | So that's what I'm going to do next.
| | 02:31 | I'm going to create a new URL.
| | 02:33 | Let me just add another
comment, so, //Send info to a url.
| | 02:43 | So I'm creating a new
variable called mailAddress.
| | 02:47 | I'm making a URLRequest and again as
soon as it highlights it, I can hit enter.
| | 02:53 | And it will add that whole word, new URLRequest.
Again, it highlights that line. I can hit Enter.
| | 03:01 | And now I can go ahead and type in the
URL that I want this information sent to.
| | 03:06 | In my specific case, it's going to be
| | 03:15 | jillgraphicdesigner.com/gdform.php.
| | 03:19 | So this is basically a PHP page
provided by my hosting company, which
| | 03:25 | happens to be Go Daddy.
| | 03:27 | So they provide me with this PHP page.
| | 03:29 | And this PHP page takes all of that
information and sends it out to the email
| | 03:35 | address that I have defined through
Go Daddy's control panel. But the point here
| | 03:40 | is you just need to check with your
hosting company to see how they deal with
| | 03:44 | PHP forms, because they might have a
different name or location for their
| | 03:49 | form.php file, but in general that's
where the data is going to be sent.
| | 03:54 | And this is just all through this URLRequest.
| | 03:56 | And what I can do now is I need to make
sure I attach that data to that URLRequest.
| | 04:02 | So I need to say mailAddress.
| | 04:05 | Well, the data for that
mailAddress is going to be all my variables.
| | 04:10 | So again, I'm making sure these names
match up because it's going to take all
| | 04:15 | this data and attach it to the
data property of my mailAddress.
| | 04:19 | Next thing I need to is just go
ahead and post that information to the
| | 04:23 | URL mailAddress.method.
| | 04:29 | Again, as soon as the word is
highlighted, you can hit Enter,
| | 04:32 | URLRequestMethod.POST because it's going
to post this information to this URL, okay.
| | 04:42 | So that's what it's going to do.
| | 04:43 | It's going to post it there.
| | 04:44 | Okay, so the data is there. It posts it.
| | 04:47 | And that's the sort of the
method that it's going to send it.
| | 04:50 | Technically, I need to
actually do a sendToURL(mailAddress).
| | 05:00 | So this is technically the final
sort of send of all of this information.
| | 05:06 | So I didn't use a Navigate toURL or anything.
| | 05:09 | The nice thing about this chunk of
code is that it sends the data behind the
| | 05:14 | scenes if you will, without
interrupting your experience.
| | 05:17 | But again, it seems like a lot of
code, but this does all the work sort
| | 05:20 | of behind the scenes.
| | 05:22 | Post that data to the PHP page.
| | 05:24 | And again, notice where I've put it, okay.
| | 05:27 | So I've just started typing it right in here.
| | 05:29 | Well, I mean what if they
haven't filled in all of these fields?
| | 05:33 | Well, what I need to do is I need to take
all of this information. And I will cut it.
| | 05:38 | And I'm going to put it right in here
in this else statement, because I want
| | 05:44 | this to happen, of course, if they have
filled in all the fields, then send the data.
| | 05:49 | Another neat sort of cleanup feature
you can do is you can click this sort of
| | 05:54 | fifth button in, the Auto format.
| | 05:56 | If I click that, it will sort of
indent everything appropriately.
| | 06:00 | And you can see my large else statement.
| | 06:02 | That really does all of the work
if all the fields are filled in.
| | 06:06 | So with that good to go, I can
go ahead and do a Test Movie.
| | 06:09 | Go to my Contact page.
| | 06:14 | Enter in my email address,
something like that. Send the message.
| | 06:29 | Click Send. It says thank you!
| | 06:32 | And then if I go to basically my
email that I've defined with my hosting
| | 06:37 | provider, I should see that email in my Inbox.
| | 06:42 | Here it is, my Inbox, right here, the
email that was sent, my information.
| | 06:46 | And everything is working out just great.
| | 06:48 | So again, that was just a quick example
of how to take that information that was
| | 06:52 | in Flash and send it to a PHP page
that does most of the work doing the final
| | 06:57 | step of actually sending the email.
| | Collapse this transcript |
|
|
10. Testing and PublishingAdding a progress bar| 00:00 | One of the final things to add to any
site it's going to be the progress bar.
| | 00:04 | And what this does is that it's just
actually just shows the progress of things
| | 00:08 | downloading, giving some
visual feedback to the user.
| | 00:12 | And that's what I want to do with this site.
| | 00:14 | But before I do so let's go
ahead and do a Test Movie.
| | 00:18 | (Music playing)
| | 00:20 | And let's go ahead and check out
sort of how this would be downloaded.
| | 00:25 | So I'm going to go to View > Bandwidth Profiler.
| | 00:30 | So this actually gives me a profile of
the content that needs to be downloaded.
| | 00:36 | Notice down here at the bottom it says 648 KB.
| | 00:40 | So again it's a fairly, fairly good size.
| | 00:44 | And if I want to view this as if the
users are viewing it, what I can do is I
| | 00:50 | can just check my Download Settings.
| | 00:52 | So I've this set to DSL, but what I
want to do is I want to Simulate Download.
| | 00:59 | So notice how I'm giving these little
dots in the center right here, indicating
| | 01:04 | that something is going on, but I have
no idea how long we'll be sitting here
| | 01:07 | staring at these little dots.
| | 01:09 | Notice my Bandwidth Profiler
does tell me the percentage loaded.
| | 01:13 | So I need to tap in to that data.
| | 01:15 | (Music playing)
| | 01:18 | All right, so again, I want to build
in a little bit more of an indicator.
| | 01:23 | And now luckily Flash has
built-in a template for this.
| | 01:27 | So I'm going to go to File > New, and
it's usually set to the General tab, but
| | 01:35 | I'm going to click on Templates.
| | 01:37 | Down here at the bottom there's Sample Files.
| | 01:39 | So I really encourage you to check out
all of these various template files,
| | 01:43 | because there are some really nice ones in here.
| | 01:45 | So I encourage you to do that just if
you have time. What I'm going to do is I'm
| | 01:49 | going to select this
Preloader for External File.
| | 01:53 | And it does say that it's a sample
file only there are no instructions, but
| | 01:57 | I'm going to walk you
through all the steps you need.
| | 02:00 | Select OK and here is my file.
| | 02:03 | All right, so it looks fairly good so far,
but what I want to do is I'm going to
| | 02:08 | go ahead and save out this file.
| | 02:10 | I'm going to save this as preloader,
and I'll save it to my folder here.
| | 02:19 | Now, that's saved in the
same location as this index.fla.
| | 02:24 | So let's just confirm
it is in that same folder.
| | 02:27 | It's going to be saved right here as well.
| | 02:32 | So they're both in the same location.
| | 02:34 | So for this preloader file the first thing I
notice is that the Stage size is different.
| | 02:39 | So I want to match the Stage
size with the actual movie.
| | 02:42 | So notice how this actual sort of the final
file, 1000 x 600 at 29 frames per second.
| | 02:50 | Well, let me go to the preluder.
| | 02:51 | Let's make sure it's set
to 29 frames per second.
| | 02:55 | 1000 pixels wide, by about
600 pixels tall, just like that.
| | 03:02 | Okay, so it's set to the right size.
Also the Stage is the wrong color.
| | 03:07 | I want it to be white.
| | 03:08 | So this is just a matter of sort of
getting rid of what you don't want,
| | 03:12 | customizing it so it
matches the final file as well.
| | 03:16 | Notice this Background layer contains
this design which really doesn't go with
| | 03:21 | what I'm working with.
| | 03:22 | So I'm just going to
delete this in its entirety.
| | 03:26 | And what I'm left with is this
progress bar and then this Actions layer.
| | 03:31 | So for this progress bar I'm going to go
ahead and position it in the center of the Stage.
| | 03:36 | So in order to do that, what I'm going to
do is I'm going to open up the Align panel.
| | 03:42 | And from there I can select Align to Stage.
| | 03:46 | And then I can go ahead and click on
Align horizontal center and then Align
| | 03:51 | vertical center like that.
| | 03:53 | All right, now what I've done is
I've just aligned this graphic
| | 03:58 | and all this is a movie clip.
| | 04:00 | So can just go ahead and double-click on
it and edit it if I want to, to make it
| | 04:06 | potentially match more of
what my graphics are in my site.
| | 04:10 | And mine's actually brighter red so I
can pick a different red, but this could
| | 04:14 | be anything that you want, whether it's a thin
bar, maybe it covers the whole screen, who knows.
| | 04:19 | So I'll go back to Scene 1, I'll select
that Actions layer, that first keyframe,
| | 04:24 | and open up the Actions
panel and here is my code.
| | 04:30 | So it does actually create
this Loader called contentLoader.
| | 04:34 | And it loads in this content.
| | 04:36 | It's technically a help file.
| | 04:38 | But what I want to do is I actually
want to load in the index.swf file.
| | 04:43 | Okay, so I'm targeting
this index file right here.
| | 04:47 | That's my index.swf file.
| | 04:49 | And then from there, it's going to go
ahead and load in that content and then
| | 04:55 | start to set the progress bar
| | 04:58 | And what it does is that actually
scales that progress bar instead of its width.
| | 05:03 | So it's going to start to stretch out as
more and more of the file is downloaded.
| | 05:09 | So again, I'm adjusting the scaleX
property is what's going on here.
| | 05:14 | All right, I'll save this file and
remember it's targeting that SWF files.
| | 05:18 | So I can do a Control > Test Movie.
| | 05:20 | Let's go ahead and test this.
| | 05:23 | (Music playing)
| | 05:26 | And again, that loaded pretty fast.
| | 05:28 | So again, I want to go Simulate Download.
| | 05:32 | Let's just check my settings are set to DSL.
| | 05:38 | As it loads in, you can see the
progress bar sort of move across.
| | 05:42 | So this gives me good indication of
how much data needs to be loaded before I
| | 05:46 | see anything, provides that to the user.
| | 05:49 | And ultimately gives him just a
better experience for the site.
| | 05:52 | So again, just use those template files,
specifically the preloader for an external file.
| | 05:59 | And you can see that it's easy to use in
any project that you might be creating.
| | Collapse this transcript |
| Optimizing a web site| 00:00 | Optimization is a very important step with
any web site or any web content for that matter.
| | 00:06 | We want to make sure our content looks
really good and is as small as possible,
| | 00:11 | and that's what I want to do here.
| | 00:12 | I want to go ahead and optimize this site,
but first I need to check and see how
| | 00:18 | large it is and figure out which files
or which graphics are the largest in it.
| | 00:24 | So, I'm going to go to my Publish
Settings and I'm going to click on the Flash
| | 00:29 | tab and from there, this is where most
of my optimization happens, but what I
| | 00:35 | want to do first off is I want to
generate a size report to see how large
| | 00:41 | everything is and just see
what is included in this file.
| | 00:44 | So, I'm going to go ahead and select
Generate size report and I can click OK.
| | 00:52 | Now, anytime I do a Test Movie,
what happens is in my Output panel, you can
| | 01:02 | see this size report.
| | 01:04 | This is also a TXT file that I get to
put in the same folder as my SWF file,
| | 01:09 | but in here you can see this is my
index.swf Movie Report, some of them
| | 01:14 | metadata, which is what this is here,
that gets included, and then I can start
| | 01:19 | to analyze the rest of this.
| | 01:21 | So, you can see that plenty of
things are going on in Frame 2.
| | 01:27 | In here, I can start to see sort of the
different frames as well and their file sizes.
| | 01:34 | So, about every 20 frames I see
this larger hit and what those are
| | 01:39 | are the different sections.
| | 01:41 | So, I really want to scroll down,
even beyond these symbols, because
| | 01:45 | they're pretty small, down into this
area, because it's either going to be
| | 01:49 | all the embedded fonts or the images
and in this case, there's not a lot of
| | 01:54 | embedded fonts in here.
| | 01:55 | So, I'm looking pretty good there, but
right down here you can see my bitmap
| | 02:00 | images seem pretty large.
| | 02:03 | Okay, so I have the Home image, seems large.
| | 02:05 | This Contact image seems pretty large as well.
| | 02:08 | So, this is where the bulk of my file size
is coming from, is of course from the images.
| | 02:14 | I can also see that there are some
sounds in here as well and potentially those
| | 02:18 | could used to kind of be crunched down
a little bit as well, but this is really
| | 02:22 | the size report that tells me everything,
and from there I can start to take a
| | 02:26 | look at how much I need to bring it
down. Because notice right here this is
| | 02:31 | pretty much the size of my
content. It's about 664K, is what it is.
| | 02:38 | All right, so I know the offending
graphics are of course the bitmap graphics.
| | 02:44 | So, what I can do off the bat is I
can go to my Publish Settings and in my
| | 02:49 | Publish Settings, in the Flash tab,
I can bring down the quality of
| | 02:53 | everything if I want.
| | 02:55 | So, I can take it from 80
down to 30. I'll click OK.
| | 03:00 | I'll do a Control > Test Movie.
| | 03:04 | (Music playing)
| | 03:07 | I can see it generated the size report again,
and I can start to take a look at the file size.
| | 03:16 | So, it's actually drop to a pretty
good amount, from 650 or so to 380.
| | 03:23 | So, it's almost cut in half, but let's
take a look at the content, because you
| | 03:28 | can see my content has
actually suffered as well.
| | 03:31 | So, all of my Bitmap graphics look
pretty bad, again, her face looks bad right there.
| | 03:37 | (Female speaker: Hi, my name is Jill Steinman.
I'm a freelance graphic designer...)
| | 03:41 | These flowers look bad.
| | 03:43 | So, it's really going to be a fine
art of optimizing the specific graphics
| | 03:47 | you need to optimize while
keeping everything else maybe higher or
| | 03:51 | lower, just kind of depends.
| | 03:52 | I think the clouds in the background,
| | 03:54 | I can maybe crunch those down,
because they're inherently nebulous and
| | 03:59 | rough looking anyway.
| | 04:03 | So again, that's the goal is to crunch
down everything on a per graphic basis as
| | 04:07 | opposed to using just my Publish
Settings and crunching everything down.
| | 04:12 | So, let's close that file, close our
Output panel, and what I can do, if I just
| | 04:18 | open up this Library panel, I can
take a look at all of the graphics.
| | 04:22 | So, right in here, I can
take a look at this clouds.jpg.
| | 04:27 | So, what I can do is I can right-click
on this clouds.jpg and go to Properties.
| | 04:34 | From there, I can take this down from
its imported quality, whatever that was,
| | 04:41 | and I can make that Custom.
| | 04:43 | So, I'm going to take the Quality down
to maybe 20%, and I'll click Test, and
| | 04:48 | you can see what you get.
| | 04:50 | Obviously, that is way too small. Let's try 50.
| | 04:54 | Hit OK. That looks pretty good.
| | 04:55 | Let's try 40 and really it's going
to take this fine art of crunching this down,
| | 05:00 | and also I can allow smoothing for this
as well, and I might smooth it out a little bit.
| | 05:06 | But I think that's acceptable, bringing
that down to about 40% for my clouds, so
| | 05:11 | it's about 17K, pretty darn small
actually for the file size for that image.
| | 05:16 | And next up, I have my other images.
My contact image seems pretty darn large.
| | 05:21 | That's this background image.
| | 05:23 | It's going to be the same process of
right-clicking, going to Properties, taking
| | 05:28 | a look at the image, do a quick Test,
and I can start to customize its quality.
| | 05:35 | So, let's take that down to 50, click Test,
and I'd say that's still pretty acceptable.
| | 05:42 | Luckily these graphics are
fairly gritty to begin with.
| | 05:47 | So, I think 50 works.
| | 05:48 | Let's try 40, and that still
looks pretty good. Click OK.
| | 05:52 | I'm going to do this just to a
couple of other images, Portfolio.
| | 06:00 | Again, this is my Portfolio.
| | 06:05 | I can customize this down to say 30.
| | 06:07 | I usually try pretty low and then start
working my way up, and let's go to about
| | 06:14 | 40, there to 45, and there we are.
| | 06:19 | Okay, that looks pretty good as well.
| | 06:22 | Home section, again, Jill's
face unfortunately was not looking too good
| | 06:28 | in this case, but I can come in here to
test it, to use this Custom Quality of
| | 06:33 | about 40 and still isn't that great.
| | 06:37 | And since this is the Home page, I
actually, am going to leave this a little
| | 06:40 | higher, about 60, just like that.
| | 06:43 | All right, the last page, the About page,
these are with all the flowers, which
| | 06:50 | in general red is really tough to deal
with, any sort of warm tone, but let's go
| | 06:55 | ahead and see what happens
when I take that down to 40.
| | 07:04 | Okay, I would say that is acceptable,
about 60%. Test out Allow Smoothing,
| | 07:11 | sometimes it does a better job
than others. But in general, I've just
| | 07:15 | identified the sort of offending images,
edited them or actually just optimized
| | 07:20 | them on a per image basis.
| | 07:22 | Now, I can go to my Publish Settings and
instead of crunching everything down to
| | 07:26 | 30, just make it about 60 instead,
because this logo file was also getting
| | 07:36 | crunched down a lot.
| | 07:37 | All right, so I've changed that.
| | 07:41 | Let's go ahead and do a Test Movie.
| | 07:43 | (Music playing)
| | 07:45 | She looks better.
Let's take a look.
| | 07:48 | (Female speaker: Hi, my name is?)
| | 07:50 | Those graphics look better.
| | 07:53 | These graphics look better, and let's just
double-check our file size in here as well.
| | 07:59 | Yeah 469, I'd say that's pretty good.
| | 08:01 | All we've done is we've added maybe
about 100K in image quality to certain
| | 08:07 | areas, and as you can tell, I was
able to customize that it on a per image
| | 08:12 | basis to really give a nice look to
the entire site, while still keeping it a
| | 08:17 | small file size.
| | Collapse this transcript |
| Publishing a web site| 00:00 | Once the site is optimized, we can
head in the final step, which is actually
| | 00:04 | pretty exciting, and that's publishing our site.
| | 00:08 | So I have this index.fla open, and I am
going to File, down to Publish Settings
| | 00:13 | and notice that it's going to publish
out and an SWF file and HTML file.
| | 00:19 | Well, quite frankly, I don't want to
publish out an HTML file, and I am going
| | 00:24 | to have a different file to do that, but
what I am going to focus on is this SWF file.
| | 00:30 | So with that checked I can click on
this Flash tab, and just kind of review the
| | 00:34 | settings just know that this does
require Flash Player 10, and that's is the
| | 00:39 | version the user needs to see your
content, but a good 95+% people have the
| | 00:47 | Flash Player, so that's hardly an issue.
| | 00:49 | All my optimization is done.
| | 00:51 | In fact, the only thing I don't
need is this Generate size report.
| | 00:55 | So I can uncheck that and be good to go.
| | 00:59 | And of course, we want to make sure
that we're compressing the movie, but this
| | 01:03 | is set by default as well.
| | 01:04 | So I am going to go ahead and click
Publish, and that creates the SWF file.
| | 01:10 | Now remember this SWF file is called index.swf.
| | 01:13 | So let me just minimize Flash and
here is my SWF file that was created.
| | 01:21 | Okay, so that file is ready to go.
| | 01:23 | What I want to do next is
open up this preloader.fla.
| | 01:27 | So I'll open up this file, and
remember, before I even go into my Publish
| | 01:32 | Settings, I am going to take a look at
my actions, because we need to note that
| | 01:38 | this file does load in
the .swf that we just made.
| | 01:42 | So really, this is the first file.
| | 01:44 | So I am going to go in to Publish
Settings and in this case this is what I want
| | 01:49 | checked is the .HTML for this file.
| | 01:51 | In fact, I am going to rename it to index.
| | 01:55 | So from here this file is going to
create this index.html, and it's going to
| | 02:00 | load in this preloader.swf.
| | 02:03 | So lets checkout the parameters in the
different properties for this HTML file.
| | 02:08 | I am going to click on this HTML tab and
overall you're really not going to have
| | 02:13 | to adjust any of these settings.
| | 02:15 | But you can, if you want, you can
always adjust the dimensions of your site.
| | 02:19 | Say for instance, if you wanted to
sort of be at 100% within the browser,
| | 02:25 | you can change that there. But overall I
am going to keep the quality high and keep
| | 02:29 | everything else set up.
| | 02:31 | So in general, these are my various
properties that I am going to include with HTML file.
| | 02:37 | So I am go ahead and click Publish, and it
generates, again, these two files. So I'll click OK.
| | 02:44 | I'll save my file.
| | 02:45 | I'll minimize Flash and right in here,
we can take a look at those files.
| | 02:50 | So the index.html file actually loads
in the SWF file, and the SWF file loads
| | 02:57 | in this index.swf file.
| | 03:01 | So I definitely need these three files.
| | 03:03 | My index.swf contains all the content.
| | 03:06 | So what that means is that it
contains this textLayout file as well as
| | 03:11 | this images folder.
| | 03:13 | So it loads in all of that information.
| | 03:15 | So I need to make sure I upload all of
these files to my web server in order
| | 03:19 | for my site to work.
| | 03:20 | And then let's go ahead and
just do one of quick check.
| | 03:23 | I'll double-click on this index.html.
| | 03:25 | (Music playing)
| | 03:27 | Looks great! I can test it out.
| | 03:32 | Go to my different sections, but
now I am just going to do some final
| | 03:35 | tweaking to this HTML file.
| | 03:38 | Because you notice the title says Preloader.
| | 03:41 | So I probably want to change that, and
another thing is that my content really
| | 03:44 | isn't centered, and I kind of like to
center it within the browser regardless of
| | 03:49 | how wide or narrow the browser is.
| | 03:52 | So I am going to change
those two settings really quick.
| | 03:55 | So I am going to close this HTML file
and what I can do is I can load this HTML
| | 04:01 | file up in Flash. So I just did a
right-click and I can open it with Flash.
| | 04:09 | Here is all the HTML code that I
didn't have to write that Flash generated.
| | 04:14 | It gives me all the parameters and
all the various properties that I
| | 04:17 | have defined earlier.
| | 04:18 | But right up here at the top, this is
where I am able to change the title.
| | 04:22 | So Jill Graphic Designer For Hire is
what I can type in here for the title.
| | 04:30 | And the next thing I want
to do is I want to center it.
| | 04:33 | So I can always edit this CSS as well.
| | 04:36 | But this is just a quick way to
center an image or pretty much any thing.
| | 04:40 | I can do a text-align: center.
| | 04:45 | End with the semicolon.
| | 04:46 | So I am centering the Flash content as well.
| | 04:50 | And again, here is all my
parameters and all that good stuff.
| | 04:53 | I'd also like to point out that if your
user just happens to be one of the very
| | 04:58 | few people that don't have Flash, it
will actually display a graphic allowing
| | 05:02 | them to get the Flash Player.
| | 05:05 | So they are never out of luck.
| | 05:06 | They can always download the Flash Player,
but in general I'd say this is good to go.
| | 05:10 | So let's save this file. I'll close it.
| | 05:13 | Let's minimize Flash and
check out our final file.
| | 05:16 | (Music playing)
| | 05:18 | There we are Jill Graphic Designer for Hire.
| | 05:21 | The content is always going
to be centered in the browser.
| | 05:24 | My site is optimized and ready to go.
| | 05:26 | So at this point all I need to do is
take all of these content and upload it to
| | 05:31 | web server and send that URL to
my friends and potential clients.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thank you for watching.
| | 00:01 | I hope you not only learned a lot,
but were also inspired to create.
| | 00:05 | Because Flash is a program that
gives you the flexibility to let your
| | 00:09 | imagination run wild.
| | 00:11 | So have fun and send me a
link to your site when finished!
| | Collapse this transcript |
|
|
