Click on any phrase to play the video from that point.
[place holder]
Flash Professional is an ideal tool for designers,
giving you full control over graphics, animation, and inner activity,
and the great thing is that you can easily use those assets from
other programs, such as Photoshop.
So here I have a file open in Photoshop.
It's a PSD file.
Notice right up here in the layers panel I have this title which is off to the side.
I have this neighborhoods folder which
contains this image of this woman, and just some text
to keep in mind that this is live text right here.
If I turn off that folder, notice how you can see this transportation folder.
It really just has that one image in there.
But really what I want to do is I want to work
in a program that I'm comfortable in, like Photoshop.
I want to be able to take this asset and put it into Flash.
So I'm just going to save this file.
It's saved into a Meridien folder.
And I'm going to go ahead and open up Flash.
Here I am in Flash, and from this start menu
I'm going to go ahead and create an ActionScript 3.0 file.
Now I want to go ahead and instead of creating everything from scratch,
I want to import that PSD file that I showed earlier.
I'm going to 'file' 'import' 'import to stage,'
and I'm going to select that 'design PSD.'
Click 'open'.
And now what you'll have is this import wizard,
allowing you to control how each element is imported.
So if I select this title, for instance,
I can change that to 'bitmap image with editable layer styles.'
My general rule is if it says 'editable,' well then select it.
Here I'm going to go to the neighborhoods folder.
I'm going to make sure it gets imported by checking that box.
In fact, what I want to do here is I want to create a movie clip
for that entire folder.
So all of the contents of that folder are going to be
in this movie clip.
In fact, here's this text layer right here,
and what I want to do is I want to make sure it stays editable.
So I'll select 'editable text' for that text layer,
and then I have this transportation folder create
a movie clip for that layer as well.
The reason I'm creating movie clips is because movie clips
allow me to control those items with ActionScript
and allow me to animate them as well.
Now right down here in the lower left, I'm going to make sure everything gets
placed at its original position, and I want to set
the stage size to that Photoshop canvas size,
because what I'm going to be making is
like an animated, interactive banner.
Select 'okay,' and it imports everything.
It looks pretty good.
In fact, if I take a look at my timeline panel,
notice there's the title.
There's my neighborhoods movie clip, so I'm going to select it.
Sure enough, it says that it's an instance of the
neighborhoods movie clip.
If I double-click it, I can go inside of that movie clip
and this text is live text, so I can always change it later if I want to.
I'm going to go back to scene one,
and if I turn off that neighborhoods layer you can see that transportation layer.
I'm thinking this looks pretty good.
In fact, what I want to do next is I want to go ahead and just
grab a couple of assets from illustrator as well.
So I can just select these graphics right here, and I'll just copy them.
I'll go back into Flash
and paste those graphics.
I'm going to use the 'illustrator file importer preferences,'
so I'm going to select 'okay' and then just make sure
they're off to the side right over here, just like that.
And let's just nudge those up with arrow keys.
Now what I want to do with these graphics is
I actually want to turn them into buttons.
So in order to do that,
I need to open up my library panel.
And notice there are already graphics in here, but I need to
convert these into buttons.
So all I need to do is just drag it into the library,
and as soon as I let go, notice how I can
go ahead and convert this to a symbol.
In this case, I'm just going to call it 'trans button'.
I'm going to make sure the type is a button,
and I'll select 'okay.'
So I've made that a button in the properties panel.
It does tell me that it's a button.
I'm going to do the same thing for this 'neighborhoods'--drag that into the library panel--
make sure it's going to be set to
the button type, and we'll just call this 'hood button'.
Select 'okay.'
All right. So everything is looking good.
And what I want to do is when
the user clicks on one of these buttons, I want to show
the appropriate graphic.
And I not only want to show the appropriate graphic, I actually want
that graphic to animate in.
So let's start with the animation.
So first off, with this graphic, I actually want
it to slide in.
Now I could make that animation from scratch,
but what you can also use are these motion presets.
So window 'motion presets.'
There's all these prebuilt default presets that
I can go ahead and apply to any movie clip.
So I can just kind of do my
down arrow and see all of these different options,
and I'll just have this fly in from the left.
So it's just a matter of selecting that motion preset
and clicking 'apply.'
All right. Let's see what it did, because in my timeline
it gives me this motion tween so I can scrub through that timeline.
And you can see it slide across the screen,
but it's really sliding off the screen,
so I want to reposition it.
So I can select that motion path and move it
more into position right there.
It looks good.
So it will slide in like that.
Next up for this transportation movie clip,
which is right here, I want it to appear later,
so I can drag that
key frame down to about frame 25.
And I want to apply a motion preset to it as well.
In fact, this time I'm going to have it fly in from the right.
So with that selected, I can click 'apply.'
and it adds that motion tween right there, and you can see it slide in.
And then all I need to do is just modify it
however I want; in this case I just need to move it over,
and that's set up now.
So we have this first one sliding in and the second one slides in as well.
But our buttons in our other graphics disappear,
so I need to extend the frames
going on in these two layers.
So if I just scrub down and I select
those two frames right down there and I
do a right click, I can select 'insert frame.'
That will extend those timelines so these graphics appear.
So I'd say everything looks good.
I'm hitting the enter key, and you can see it play through,
just like that.
And what happens is, by default,
I can go ahead and test this movie.
And what happens is the default method is it will just
play through the timeline endlessly so there's not stop action going on.
Although I like this animation, this would probably drive somebody nuts.
So what I want to happen is I want
this animation to stop at about frame 24.
In order to do that, I'm going to use a code snippet.
So here's my code snippets panel.
I'm going to open up the timeline navigation,
and right here, 'stop at this frame' is exactly what I want to do.
So I encourage you to check out all of these code snippets because there's
some really powerful ones in here.
In this case, it's a simple stop at this frame.
I can show the code so I can see it right here,
and really it's just this one line right here.
Again, be mindful of where you are in the timeline because
at frame 24 is where I want to insert it.
I'll click 'insert.'
You can see it animate over, and there it is right there.
So now if I test this,
it's going to play through and then stop at frame 24.
Perfect. That's exactly what I want.
All right.
Next up, what I'm going to do is I'm actually going to insert a stop action
right here because when I go to this transportation section,
I actually want to make sure it stops at this graphic.
So it's just a matter of inserting that same stop action.
And all I can do as well is just double-click on it.
If I double-click on it, it adds it
to the timeline and that actions frame.
In this case, actions frame 48
is where it adds that one-stop action.
So I'll just close that.
There it is, frame 48 and 24.
All right. Everything is in place.
Now is the fun part of adding inner activity to this.
I'm going to make sure
this first section is 'neighborhoods.'
So I want this animation to play when you click on the 'neighborhoods' button.
So I'm going to select the 'neighborhoods' button right here.
I'm going to go to my code snippets,
and I'm going to go ahead and check out timeline navigation,
because in there I have this clicked to go to a frame and play.
That's what I want to happen because I want to,
regardless of where you're at in the timeline, go to
frame one and play that animation, and then it will stop right here.
So that's what I want; I'll select that.
I can take a look at the code
as I scroll down.
Notice how it says 'instance name here.'
Watch what happens when I insert it.
I'll click 'insert.'
It says, "You must replace instance name here before you can insert that name."
And what I can do is just make sure
it's pointing to that button.
But the issue is that the button does also need a name.
It needs a specific name because I can have multiple buttons on the screen.
On this case, I'll just call this 'hood_btn,' just like that.
Type that in. You can see that it looks good there.
I can click 'insert,' and it adds that code snippet
right here at frame one.
Let's go ahead and take a look at that code.
If I go to window and open up my actions panel,
you can see my code right here with instructions
on how to modify it.
So it says, "Replace number five with
whichever frame you want to go to and play," so I'll just replace that with one,
and that's looking good.
All right. Here we are.
Now we have this transportation button.
And what I'm going to do now--
this neighborhoods button is called 'hood button.'
What I can do is I can select that transportation button
and give it an instance name in my properties panel over here as well.
So we'll just call it 'trans_btn.'
All right.
So with that button selected, I can go
to my code snippets, and, again, it's going
to be a matter of doing the exact same thing.
If I click on that
insert button, right down there it says 'trans button,'
which is what I just typed in right there.
So that way works easy as well.
I'll click 'insert,' it animates over,
I can click on that code snippet pop-up,
and now I can modify this code as well.
In this case, I want it to go to and play frame 25.
So the 'trans' button will go to and play frame 25.
The 'hood' button will got to and play frame one.
And now is the fun part; I get to test this out.
I'm going to go ahead and test this out in Flash.
It animates, looks good.
Now if I click on transportation it should jump to
frame 25 and play.
And, yes, it does exactly do what I want it to.
It looks great, and I have these nice transitions
from image to image.
So all this was done pretty easily.
Using a Photoshop file and some assets from Illustrator,
I was able to put them in Flash Professional,
add some animation to it, I even got to write some
ActionScript using code snippets which was pretty easy.
So I want you to go out there and try it for yourself.
I promise you you'll have a good time. Thanks for watching.
[place holder]
