Click on any phrase to play the video from that point.
[place holder]
[Paul Trani] Flash Professional can be pretty easy to pick up,
especially if you're familiar with web design.
I'm going to show you how to make a quick interactive module
using ActionScript and how to publish it for the web.
So currently, I have this Meridien .fla file open,
and it noticed that there some addiitonal files as well.
And this is really how I'd want to set up a web project--
I don't want to have all of the sections in one .fla file
making it for a very large file.
I want any content that the user has to select to get to
to be in a separate file,
and that's what I have going on here.
So when the user clicks on Transportation,
it will load this Transportation .fla file
and when the user clicks on the neighborhoods, it will open up this Hood .fla.
And it won't actually open up this actual .fla file.--
what it's going to open up is the compressed .swf file.
So it's going to really be a matter of having one main .swf file
that's going to load additional files
and I'm going to do all of this using code snippets
and then modifying the ActionScript that comes from those code snippets.
Okay, so currently, the functionality--if I just test this in Flash--
you'll get a reference error and a compiler error
because I didn't delete that one line there.
Let's try it again.
So if I test this in Flash,
if I click Neighborhoods, it will bring up the Neighborhood image,
Transportation will bring up that image, and when you click on either one of these buttons,
it will load that section actually right down here.
So with my Transportation button selected,
I'm going to go into the Code Snippets panel
and I encourage you to check out all of the various code snippets
in all of these folders, especially the Actions folder
has plenty as far as going to a webpage,
you can do quite a bit.
But in this case, I want to load and unload a particular file,
so Load and Unload, Click to Load, and Unload an .swf or image.
So this is a good starting place; even if you are familiar with Action Script,
code snippets can really make your productivity much faster.
And I'm going to click on on this Show Code button.
Right here, I can read all about it.
I can load either an .swf or even a .jpeg file
and right down here--here's the bulk of the code.
And since I have that button already selected,
it puts the instance name right in here
and I can always point to a different button if I want to as well,
just by clicking on a name.
But again, I'm going to make sure trans_btn is in there,
and here is the unload code as well.
Right down here: Unload Code.
And we also have the URL pointing to a .jpeg.
So I'm going to insert all of this code and then I'm going to modify it.
I click that Insert button, it animates over here.
I can click on that little tag, and it will bring up the Actions panel.
Here's the code that was already written--that was already in my project.
Right down here, this is all the code that it's generated.
It's generated quite a bit.
In fact, I want to trim this up some.
What I want to do is I don't want to click to load and unload.
What I want to do is just click to load, so I want to eliminate a lot of this Action Script,
and really just focus on this chunk right here.
This function will now instead of click to load and unload,
is actually going to just load in a particular file.
But even this URL isn't what I want.
What I want in here instead, since this is for my Transportation button,
I want to load in the trans.swf file, just like that.
So this creates a new ProLoader,
and inside of that new ProLoader, it's going to load in this .swf file
and it's going to place it on the stage.
Now, if I want to reposition this .swf file--
remember, I want it to be lower than the image that's at the top of the page--
I want to adjust it by typing in the name of the instance that you're referring to,
so I'm just going to copy that name, paste it right here,
and I want to change its "y" position,
so I'll type in y = 250
just like that.
Now when it loads it in, it's going to position it 250 pixels down from the top
because remember, there's an image that's going to appear right here.
Okay, this boolean I don't need either,
so I can eliminate that, and you can see how I can start to condense this code down.
In fact, these comments I don't need, either,
so I can really condense all this code and consilidate it
into one area, just like this.
Now, with Import statements, what you're going to want to do
is just consolidate them all up at the top of this Actions panel,
so I'll just click and drag and bring it clear up here to the top.
Because what this does is it loads additional code in
that makes these functions and variables and everything work correctly.
So with that set up, I can go ahead and even modify it for my other button.
So my other button is going to be this Neighborhoods button,
so I'm going to copy this code right here and then paste it below.
Now, with this newly pasted code, I can change the instance name to hood_btn.
Then, I'm going to change the function that it calls
and in this case, it's going to load in the hood.swf,
so hoodLoad--I'm going to copy that function name and paste it right here.
I need to make sure these two match up.
This ProLoader already exists up here,
so I don't need this one to be number 3; it actually needs to be number 4.
So right down in here, I can start modifying
all of those references like that.
All right. And it will load in the hood.swf file.
All right, I'd say that looks pretty good
and I'm going to do an extra little clean up right here,
because I want to just change this function name to transLoad
because it's going to load the transportation.swf file.
Okay, everything is in place.
What I can do is I can even check my code by clicking on this Check Syntax button,
so if there are errors, they will actually appear in your Compiler Errors panel.
In this case, there aren't any, so I'm going to go ahead and and test this movie.
It runs. I'll click the Transportation button.
You can see that content loads in here.
Click Neighborhoods and that .swf file loads in right here as well.
So this is a really efficient way to do things.
You're going to have your main file that's going to load up initially.
And then, when the user requests that additional content,
that's when that content will load in.
So it works out quite well, but it is still a seamless experience.
So really what I can do from here is I can go ahead and publish out this .fla file.
I'm going to go to File, down to Publish Settings,
and notice on the side I have this Publish panel
that says flash,swf is what I want to go ahead and publish,
and an HTML wrapper, so this HTML wrapper actually takes that .swf
and puts it on that page.
And I can control those various settings right in here, if I want to as well.
But overall, I'll just leave it the way it is.
It's just going to publish out those two files.
Also, lastly, you 'll see that I can publish out two different Flash Player versions as well.
I'll just keep this as Flash Player 10.2,
and I'll click Publish to generate those two files.
I'll click OK.
Let's go out to my desktop.
You'll see here's the HTML file, here's the .swf file,
and then I have the additional .swf files as well.
All right, so what I'd want to do with these files
is I'd want to go ahead and upload them to a web server
and show it to the world.
But really, I'm going to go ahead and test it out by double-clicking on that Meridien HTML file.
You can see that content load in, and even as I select these other sections,
I can load in that content.
So Flash Professional makes it easy to build interactive content for the web,
but don't take my word for it--try it out for yourself.
My name is Paul Trani and thanks so much for watching.
[place holder]
