Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Flash and ActionScript are ideal for creating flexible, easily updatable web sites that are both unique in design and small in file size. In Creating a Portfolio Web Site Using Flash CS4 Professional, Adobe Certified Instructor Paul Trani shows how to exploit Flash to create a web site that showcases work to clients and prospective employers. Find out how to add dynamic navigation, animation, and video to a page, and how to load, sort and display XML that enables portfolio content to be updated without opening Flash. This course is designed to take your existing tweening skills and gotoAndPlay code and walk away with a fully functional Flash site. Exercise files accompany the course.
Now, I currently have four different Flash files created: the main Flash file and then these different sections. And what I want to happen is I want to, when you click on a button, to load that particular section in. But I am not going to load in the FLA, because this is the working file, I need to load in its SWF file, its Small Web Format file. Now, I am just going to open up my about.fla, and in order to make an SWF, I can do it a number of ways, but the easiest way is just to go down to Control > Test Movie, because each time you test a movie, it creates an SWF file.
So this is already generated, and I can also see what it looks like, so this is what I should expect when it gets loaded into the index file. Same thing for the portfolio.fla, portfolio file in that folder, if I do a Test Movie, it will generate that portfolio.swf. And then the video.fla, if I do Control > Test Movie, it will create this video.swf. Now, just be mindful that the stage background color is irrelevant, because it's going to be actually transparent, and it will actually show whatever's in the index.fla file.
So this content is going to appear on top of whatever is in this index.fla. But again, I went ahead and I basically published out three different SWF files. If I go back to my Desktop, you can see that these SWF files were generated, and I need to make sure that they are in the same location as this index.fla. So they are in the correct location and now I can open up the index.fla file. So what I want to do now is I want the sections to load in when you select the appropriate button.
So I am going to go to the AS layer, select that first frame. I am going to go to Window, down to Actions, and I can open up my Actions panel, and here is all of my code. So the first thing I am going to do is just pin my code by clicking that little Push-Pin icon, move this into place, and now I can see what I want to happen. So at this point in time for, say for instance, the About button, when you click on the About button, I want to load in, and I will just type this in here, as I comment, Load in the about.swf file.
And how I am going to do this is I am going to use the UILoader component. So I am going to just minimize the Actions panel, and what I am going to do is I am going to go ahead and create a New layer, and I am just going to call this mainLoader. This is all my main content for that section. This is my mainLoader. It's going to go right in here. I am going to go to Window, down to Components, and I am going to go ahead and open up the User Interface components.
Now these components, I encourage you to explore all of them, but they provide additional functionality to your Flash website. So whatever you want to use, check it out and see if you can just maybe use one of these items as opposed to creating your own. Now, I don't want to write multiple lines of code to load in my SWF file. What I want to use is of course this you UILoader. I am just going to drag that onto the Stage, and I will close that Components panel, and I will go ahead and, I will just put him up here as well, upper left hand corner.
And with this UILoader selected, I am going to go to Window and open up the Component Inspector. I just want to show that I need to make sure this is set up appropriately, because I don't want to scale the content down to this size. I want to change the scaleContent to false. I don't want to load in anything into this UILoader initially. Only when you click that About button, do I want to determine what the source file is.
But what I need to do is I need to give this UILoader a specific name, because remember, if I turn off this layer, notice there's that UILoader in the background. Well, I need to give this one a specific name. So I will just call this sectionLoader. Type that in the Properties panel. And I am going to remember this. In fact, I am going to do Ctrl+C to copy it, and I am going to open up my Actions panel, go back to where that comment is and I am going to Paste in sectionLoader.
So for sectionLoader, set the source equal to about.swf. And again, I need to make sure this about.swf is in that same folder, and it definitely is. About is right there, and it will get loaded in when you click on the About button. In theory, this should work. Let's go ahead and test it. If I click About, that content comes up.
So it's working perfect. It's exactly what I want. I am going to go ahead and do that for the other sections. If I was to do this for the other sections, I would have to repeat this line of code for each one, and I really want to use the power of this moveContent function. So currently, this moveContent function, what it does is it sets theX, theYPosition and then theRotation as well, when really I want to do something a little more advanced.
What I want to do is I want to add another parameter, down here on the end, theSection. theSection is actually going to be a string. A string is just text. It's going to now accept text as opposed to a number, this last parameter is going to accept text. So for this About button, this is the text I want to pass in into my moveContent function. So just after the X, Y Position, and theRotation, I want to add a comma and I am just going to move this right up in here. All right! There is my string that gets passed into that function, and it's now known as theSection.
But what I also need to do is I need to move this sectionLoader property as well, and I need to move it right up into that moveContent function. So let's just scroll down. Notice I dragged it up, and I want you to just be aware of where this last curly brace is, because it needs to be below sort of bookmarking this function. It needs to start with a curly brace and then end with a curly brace, and now I can go ahead and just tab that in, sectionLoader.source is now equal to theSection.
So I will just Copy that and Paste that right in here. So that's looking pretty good. I have moved that up. And let me just even remove that comment, and do a Test Movie. And it does break, and that's what this is doing. And I am glad this came up, because it gives me a chance to show you the error. So right in here, I can see that it tells me exactly what line the error is happening, and it says, You know what? Hey, there is an incorrect number of arguments," also known as parameters.
There is an incorrect number of arguments. It's expecting 4, but there's 3. And what's great about the Compiler Error panel is, what I can do is I can just double-click on that error and it takes me right to that line of code that's broken. So the reason it broke is because it's looking for four parameters, but these other buttons, there is only three. So it's saying, "Hey, I am expecting four and you gave me three." Only in one case do I have four.
So what I need to do, and the great thing about this is it gives me the opportunity, to load in the other sections. So let's start with this video button, add a comma, and then in quotes, I want to type in "video.swf." Down here at the bottom, for the portfolio button, add a comma, type in "portfolio.swf." portfolio.swf, the video. swf, and then the about.swf. Now, if I can reference this error again, remember, I have to put 4 arguments in there, and for the home section, I don't need to load any other content.
So I can just add a comma, and then I could just type in null. Null is just a word meaning nothing. It says, "Hey, you know what? I am just a filler, don't break the code. I don't need to be anything, so don't worry about me," is what it's saying. So everything seems to look good, and I can go ahead and check my syntax. And sure enough, it clears out my Compiler Errors. It says my script contains no errors. I am getting pretty hopeful now. Let's do a Test Movie. Here is my SWF file.
If I click About, that's great. It loads in the About content. Let's click Video. My Video content gets loaded in. If I click Portfolio, there is my Portfolio content. So it's all looking really good. For the most part, this is all squared away, and again, what I am doing is I am creating these SWF files and then they all get loaded into this main file. And the reason I want to set my site up this way is because it doesn't force the user to wait for all this content to download in order for them to see your site, but you are only loading in the content that they are interested in.
So if they click on the Portfolio button, that's when they get the Portfolio information, all that content. So at the end of the day what it means is your initial size of your website is going to be pretty small. So it's only going to be like 25K. And then when they select their individual sections, that's when it will load in that appropriate content. So this is a really smart way to set up a site, and it's also very flexible, because now if I need to edit any of the portfolio content, I can jump right to that file.
I don't have to worry about messing with any of the other files. So it's really flexible that way, and it's really user-friendly as well.
Find answers to the most frequently asked questions about Creating a Portfolio Web Site Using Flash CS4 Professional.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.