Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
One thing you will always want to consider is how to keep your site fresh and visitors returning. One easy way to do this is by loading in different content for each visit. And that's what I want to do, in this case. I want to load in a different background each time the page is refreshed. Okay, and I really want to pick from a pool of about 10 backgrounds I already have set up. So let's go ahead and take a look at how this is currently set up. The background is being loaded in, using this UILoader component.
So if I go to Window down to Component Inspector, you can see that the source says that it's pulling from images/Bkgd1.jpg. Well, it's not realistic from you to come in here and change this every 15 minutes and then republish the file. But I could, I guess, do that, but what you're probably thinking, "There should be an easier way," and there is. And this way is done in ActionScript. Okay, so I'm going to use Flash's programming language to change this number here.
I'm going to pick a random number from 1-10, and then replace that number. Okay, so just close that panel. First thing you need to do, if you're going to write ActionScript, is put ActionScript in a layer, and create a new layer just by clicking this Page icon, and call AS. And all of your ActionScript should really go on one frame in your Timeline, preferably in your main Timeline, just right here. That's where I want to keep all of my code. So with that frame selected, I'm going to Window, down to Actions, and that will open up the Actions panel. All right.
First off, notice that there is this panel off to the side. I could use some of that content, but I'm going to do is I'm going to type in, right in this area, I'm going to write my ActionScript to right in here. And what I want you to get used to doing is start just typing in, in Plain English what you want to do. And in this case, what I want to do is I want to LOAD A RANDOM BACKGROUND (FROM 1 TO 10). That's basically what I want to do. So just in Plain English, type in what you want to do.
And if you highlight that line, what you can do is tell Flash to ignore this line by selecting Apply line comment. That will enable Flash to just ignore that line, and then move on down to what you wanted to render out. So in this case, what I want to do is I need to create a Random number. And this Random number is really going to go in a container called a variable. So I'm going to create this var randomNumber, and what's going in this container is a number, so I need to tell Flash to expect a Number.
So again, think of a variable as just an empty box that you can put anything into, and in this case, I am telling Flash that it's going to contain a number, and sure enough, that's going to be equal to whatever number you want it to contain, but I want it to be a Random Number. So first thing you might want to consider is just typing in 'random.' And notice that it's a keyword, and if it changes colors, it means that it's a keyword, and you really explore what it really does. So I'm going to go ahead and View Help, just by right clicking on that word, and it will open up Flash's Help, and it tells me what random is.
Now if I scroll up near the top, notice that it's part of the Math Class. And the Math Class has many methods, one of them being the random method, but you can do so many different things. So again, if I select that, it's just going to tell me that it's going to pick a random number between 0 and 1. It's not going to be a whole number. It's going to be like 0.3258, something like that. But it does generate a random number, and that's what I want. So I want to use Math.random.
So let me just minimize that, go back in Flash and type in Math, because again, it's part of the Math Class. It's this random method, and then just like it showed me in help, I need to have open and close parentheses. Now, this will return a random number, and it puts it in this container. All right! Now for testing purposes, what you're going to want to do is use a trace statement. And all this does is helps me check what's inside of random number.
Just for my purposes, the end-user will never see any sort of trace statement, but it really helps me figure out sort of how my code is working. So I'm going to go to Control and Test Movie, and we're going to see what happens with the trace statement when I add that in. What happens with the trace statement is it prints out what was in that trace statement, and this is what that random number is .63 yada, yada. So let's just do a Test Movie, and I'll show you that it does generate a different number.
So it is picking your random number each time. It's working great. But this is really random, and isn't really useful for my specific case. So I need to do some more things with it. In fact, I need it to pick from a number, say, between 1 and 10, Okay? So what I can do is say, "Hey, Math.random? I need to multiply you by 10." Now if I run it, it's going to pick a number between 1 and 10. So I'm just going to hit Command+Enter, or Ctrl+Enter if you're on a PC, and you can see, in the Output Panel, it's showing me that it is actually picking a random number between 1 and 10.
But I still have an issue, because I don't have my image named this. I just have one background, two background, three background, or background three, but I don't have their whole numbers, so I need to round this to a whole number. And again, this - if I check out the Math Class again, I can see what else I can do. For instance, I can round down, maybe using floor, or I can even, Returns the ceiling, I can round up using ceil, so that's what I want to do. I want to round up.
So 1.5 will actually become 2. 2.9 will actually become 3, and so on. So Math.ceil, and then within those parentheses, it will go ahead and round up anything that's in there. Let's check this out now, Test Movie. Finally, a whole number, and I'll just hit Command+Enter a couple more times, and you can see it's generating a whole number. Finally, something pretty useful.
So now that it's returning a whole number between 1 and 10, let's make sure I have my images in place. Because here is my images, Background 1 through 10. Great, they are all set up. I need to be aware of how this is named, because now I need to use this random number. So another line and what I'm going to do now is I'm going to pin my code, and what pinning your code does is it just always keeps it up. So if I actually click off in the Timeline anywhere, in some other location, my code disappears, But if you're always writing code in one place, what you want to do is bring up that code and hit this little push-pin, Pin active script, because I always want this to be up, regardless of what I am clicking on.
In this case, I want to click on the UILoader component, because I want to kind of compare what that component is doing with my code. So UILoader component selected. I'm going to go to Window>Component Inspector. Here is my Component Inspector panel, source, images/Bkgd1.jpg. All right. I need to write this in ActionScript, and the first thing I need to do is I need to give that UILoader an instance name. I need to give it a specific name, so I can reference it in my ActionScript.
Just close that, select my UILoader component. Right up in here, I want to type 'bkgdImage.' This is known as an instance name. It's just a specific name. And what I encourage you to do is just do Command+C, just to copy it, because I'm going to use that in my ActionScript, Command+V, bkgdImage. So now that UILoader has a specific name. I can reference it. I can change its source to "images/Bkgd1.jpg," just like that.
All right. So it's doing an exactly the same thing as this Component Inspector panel is doing. What I want to do is I want to replace this number with a random number. So in order to do that, I am just going to make sure this is text, and then I want to add this random number, so I'll, again, Copy, Paste. I encourage you to copy and paste, just to eliminate any sort of mistypes or typos. But now what's going on is it's going to look in the images folder for a background, whatever random number we pick .jpg. All right.
Everything is looking good, and one thing you can do is, in your Actions panel, you can check the syntax. So I can go ahead and hit that checkbox. And say this script contains no errors. That's great, but I really won't know if it's working until I do a Test Movie. Sure enough, there it is, looks like a different background to me, and it's bkgd6.jpg. And I can do a Command+Enter, or Ctrl+Enter if you're on a PC, and you can see a different background 8, background 5 loading in, so each time the user visits the site, it's going to go ahead and pull up a different image, which works out great, a great way to keep your site fresh, and hopefully, visitors returning.
It really does a good job of just really appealing to your portfolio as well, seeing as you can have sort of an unlimited, virtually unlimited number of images as your background that you can pull from, and again, the fact that your site is fresh just really enhances the experience for the user.
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.