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 that you have seen the basics of ActionScript, I am going to show you how you can simplify your code, which is going to cut down on errors and make your code more flexible. So I am going to go to this AS layer, select that first frame, and go to Window, and Actions. And the first thing I am going to do is pin my code by pressing that little Push-Pin icon. As you can see, as I scroll down, I am repeating many, many lines of code, this all looks the same. This looks the same, and it's pretty lengthy, and all that really changes from one function to the next is this parameter, ok, and this one, and then this one.
So what I want to do is create one major function that's going to accept these parameters and then move the content movie clip accordingly. So I am going to create that function right up here, above of the EventListeners. I am just going to go ahead and type in 'function,' and this function is going to be called moveContent, because the goal of this function is to move content. This function is going to accept these parameters: the x position, the y position, and then the rotation. So I need to type that right in here, theX, add a colon, and it's going to accept a number, so type in Number.
As soon as that is highlighted, you can hit Enter. It's going to accept theXPosition, and theYPosition. That's also going to be a Number, and it's going to accept theRotation, which is also going to be a Number. All right. All within those parentheses. It's not going to return anything, so as always, I am just going to type 'void,' open curly brace and then a closing curly brace.
So here is my function. Anything in here is going to execute when this function is being called. And what I want to do is I am just going to set up some trace statements. So trace is just some testing statements for me, so I can see that certain things are showing up. I can put whatever I want in here. I really want this letter X to appear, followed by the position that it receives, so theXPosition. So I am going to do Command+C, just to copy that, paste that right in there. In the Output panel, it's going to show me X and then whatever number gets passed into this function.
I am going to copy this, paste it a couple of more times, because all I need to do is modify theYPosition. Again, theYPostion is going to be displayed in the Output panel as well. And then lastly is theRotation, and again, I need to use this, theRotation. So my function is set up. It's going to accept these three parameters, and then it's just going to show the trace statements in my Output panel, just for testing purposes.
But what I need to do now is I need to call this moveContent function, and I am going to call it when I click on the homeClick. So just below this trace statement, I am just going to type in 'moveContent,' and I am going to pass three parameters into that moveContent function. Those three parameters, again, are these three. So I can take this 600, drop it right in there, add a comma, take this parameter, drop it right in there as theYPosition, and then lastly, is theRotation, so I need to take theRotation, which just happens to be 0, and I will drop that right in there.
All right, looking pretty good. It's going to pass these parameters into this function. It's going to show me in the Output window. And what I can do now is move this content, these three Tweens, and I can just select them all and move them right up into that function right there. I want to pass these parameters into this moveContent function, and I want these numbers to appear right here.
What I am going to do is I am just going to take this, theXPosition, and I am going to copy it and paste it right here. I am going to take theYPosition, because that's going to be its final YPosition, and then theRotation, I am going to take that and copy it and paste it right in there. All right. So you can see I have basically eliminated three lines of code from this function and put them up in this moveContent function. What I am going to see is everything is going to look the same, but my trace statements will appear in the Output panel.
So I am going to do a Control>Test Movie, and if I go to the About section, everything looks good. I am working with the Home button, so if I click on it, it rotates back into position, just as I expected. And the Output panel, if I can show you what that prints out, it gives me what's in that trace statement, this X, the Y, and then the Rotation. So I will open that up. Sure enough, this stuff matches up. So it's working really well, but you are really not seeing the true power of it yet.
I mean, you are probably thinking, "Geez, it did this five minutes ago." Well, let's start eliminating some of this code, because I want to do the same thing for these other functions when these other buttons are clicked on. So for the aboutClick, I want to do the same thing. It's the same function, this moveContent, moveContent, and in there, it's going to accept these three parameters. So I am just going to drop in these numbers, just like that, click and drag them over, select them, drag them on over.
You can do it how ever you want, but I am just doing a click and drag. Make sure you have commas separating each one. So that's looking pretty good, and this is the fun part, because I get to delete those three lines of code, and I get to simplify everything. I will even delete that comment. So you can see my code getting smaller and smaller. And the nice thing is is this will alleviate any errors, because there could be some error right in here. Well, since that's not going to exist anymore, since these are all parameters that are being passed into the moveContent function, it doesn't matter that some things might be misspelled, because the less typing, the less lines of code, probably the less errors there will be.
So it's looking pretty good so far. The last one I am going to do is the Portfolio button. moveContent, these three, and lastly, this rotation, drop that right in here, and eliminate those three lines of code. All right. So definitely everything is condensed down, and if I have these parameters correct, I am going to make sure I have my commas separating each.
Notice that I have three parameters for this moveContent function, for each one, that then gets passed into here, and then these Tweens get used. So this is going to work out quite well. Let's just go ahead and test it out. Clock on the About section, works like a charm. Video section, works great. Portfolio section, works great. And then I can click back on John Doe. And again, the great thing is is this is really flexible, because if I want to go in here and change some of this, say, for instance, I want to change this, instead of having a Regular smooth transition, I can change that to something else, like Bounce.
I don't have to change it in 12 different places. I can just change it in three different places and then it will affect all the transitions, and I can see that there's this sort of jarring bounce that happens with all of these. I don't particularly like it, but again, the nice thing is I can roll it back to what it was, no problem, because I just need to change it in these three places. That's the power of making one function and then just passing in the parameter, the one item you want to change, and then using it wherever you want to use it.
So the more you can simplify your code this way, the better off you will be, the more flexible your code will be, and the less errors you will have.
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.