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.
So, currently what's going on with this file is that all of my thumbnails are all hardcoded in the ActionScript. So, with this first frame selected, you can see that I opened up my Actions panel and I'm going to pin my code and I'll even close that as well. If I scroll down, you can see all of these thumbnails are hardcoded with their information and quite frankly, I don't want this. I want it to all come from the XML. Okay. So, I'm going to do that and I'm going to really start with this first thumbnail as they shell, if you will, to create all my thumbnails, because not only am I going to pull all of the content from the XML, but I am going to end up deleting all of these other functions. All right! So the first thing I'm going to do is I'm going to create this new function and this function is going to be called loadThumbnail.
Right now, I'm just putting a call in to the loadThumbnail that I'm just about to make, but know that that loadThumbnail function is going to be called once all of the data gets loaded in. So once all the data is available, I'm going to call this loadThumbnail function. Okay. So right down in here, I'm going to use this first thumbnail as my template, so I'm going to make a function called loadThumbnail and I'm going to do an open curly brace and I'm going to put everything inside of this function right here. Okay.
Again, anytime you make a function or you add curly braces, go ahead and select this Auto format button and it will format everything so I can see all the content inside of the loadThumbnail. Okay. So you can see that this is hardcoded and I really want to get rid of all of this stuff. So I'm just going to go ahead and delete that. In place of that, what I want to use is the content from the Array, more specifically, the thumbnailImageArray. So I'm going to copy that name and scroll back down.
Right here in the URLRequest, that's where I'm going to paste it. Now, I'm not going to reference the whole array, but I just need to get that first image. So, between two brackets, I'm going to put a zero and that's going to get the first thumbnail image, just like that. So that's looking pretty good. This is going to be called and it's going to go ahead and display that first thumbnail. Everything else is going to work as normal. I'm going to do a Test Movie and there is my image. So this is a different image. In fact, these two match up.
But the point is this image is coming from the XML. Everything else is hardcoded. So now what I'm going to do, I'm going to get rid of all of these thumbnail images and replace them with content from the XML. All right! So, what I want to do is I'm just going to go ahead and delete all of these other functions. This is the fun part. I like that I'm removing lots of lines of the code, looks like I'm at 207, delete that. Now I'm down to 54. In fact, if I start eliminating some of these lines, you can see that I'm now down to 45 lines of code.
But now I need to start adding some additional lines. So right up here at the top, this is where I have my variables for my arrays and I want to create a new variable. So I'm going to create a variable and this variable is going to be called imageNum. It's going to store a number and I'm going to make it equal to zero. So that's its starting point. imageNum is going to be equal to zero. So I'm going to take this number and I'm going to copy it and inside of my loadThumbnail function right here, I'm going to go ahead and paste imageNum. All right! So that will just put zero in there, initially, since I have this set to zero, but I want to run this function multiple times and I actually want to add to imageNum each time the function is run.
So right down here, before that closing curly brace, I'm going to go ahead and type in imageNum++. So what that does is I'll write a comment in here, add to imageNum each time it's run. So it adds 1 to it. All right! It's going to add to imageNum and then I want to call the function. I'm going to call the function loadThumbnail. That's right. I'm calling the same function that this is currently in. It's going to call that many times.
In fact, it's going to call it indefinitely. So, there will be some errors here, but the short of it is that it's going to go ahead and load up this image. In fact, at this point, what I want to do is I want to make sure that this is working. So, right inside this function, I'm going to add a trace and inside of this trace, I'm just going to say imageNum. That's what I want to trace out is the image number. All right. Notice up here there's this other trace statement in here where it's outputting the length 12 times. I really don't need that, so I'll come up here to this trace line and I'll just eliminate that line of code to that trace statement, so I just have this one.
So, that's all I'm really going to see. I shouldn't see any of the thumbnails, other than that one. I'm going to run it. Sure enough, there's my one thumbnail and I'm going to close this, but if you can take a look at this, I can see and I'll close my Actions panel, 2, 3, 4 clear up till 12, and then I start running into these errors, because it keeps on running that function even though there's only 12 images. So I'm going to take care of this now. I'm going to go back to my Actions panel and I only want to run this loadThumbnail 12 times for the length of the array.
So I need to create a new variable right up here at the top. I'm going to type in var totalImages:Number. So it's going to store a number. So right down in here, for the totalImages, it's going to be the length of the array, which I can find right here. So, just after the data gets loaded in, I'm going to go ahead and type in var and make sure I type in totalImages. I'm going to make that equal to theXMLData.title.length. In fact, I will take that and I'll move that right in there.
I'm going to make sure this ends with a semicolon and I need to make sure I use totalImages as I copy that and paste it. It's going to be still used right in there, but I can also use this totalImages down further as well. So right down in here, again, I want this loadThumbnail to be only run for the length of the array. So, I need to create an if statement. imageNum is less than totalImages and let's just make sure we have that name right, totalImages, capital 'I.' Close parentheses, open curly brace, and then close curly brace.
Again, anytime you add curly braces, click this Auto format button and it should be only running 12 times. So I'm going to go ahead and run this code, Control>Test Movie. It's only being run once and I'll show you why, because right up here at the top, this is equal to zero and this var means that it's only going to keep this variable within this function. So I actually need to remove that var right there. I did that to point out that any time you make a var, it's only going to be available within that area.
If you make a var or variable sort of at the root of this Actions panel, it's available everywhere. So now if I run this, you can see that it runs the length of the array, but I still only see one image, so I'm going to take care of that right now. So right down in here, the images are being loaded in, but they're not being positioned appropriately. So, that's my next step, is to position them appropriately. So just before that Event.COMPLETE, what I want to do is I want to go ahead and position this.
thumbLoader.x, make it equal to 100, not 100 pixels, but I want to multiply it. I want to have the first one maybe 100. Maybe the second one is 200. Maybe the third one is 300. So I need to start multiplying. So the asterisk is a multiplication and I can type in imageNum, just like that. So, everything is looking good. I'll do a Control>Test Movie, and sure enough, it runs. I can see all of my various thumbnails right down here and they're set up.
So, the next step would be adding some additional functionality to these, because when you select them, it opens up the first image, but I can take care of that later. The point is all of this data that you see right now is all external from the Flash file, all coming from the XML and I don't have to open up Flash if I want to update my site, I can just edit the XML.
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.