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 what if you want have a video portfolio? Well, it's going to be set up in a similar fashion as an image portfolio would be set up, in that you are going to have thumbnails that serve as buttons that then change content in the main area. So that's how this is set up. I have these thumbnails on the side, and I want them to play the appropriate video right in here. So first thing I am going to do is make sure these are buttons. Currently, they are just movie clips.
So I am just going to click and drag this movie clip into the LIBRARY, and I convert it to a Symbol, and I am just going to call this vid button. I am going to make sure it says Button as the Type, select OK. Same thing for this second thumbnail, vid button, and this is vid button 2. I am going to make sure the Type is button, select OK, and now they are buttons, but now I have to give them specific names. I am going to refer to these names in the ActionScript.
So let me just go ahead and minimize that LIBRARY panel, because with this first button selected, I am going to go the PROPERTIES panel, and for the Instance Name, I am going to type in vid1_btn. So that's the first button's Instance Name. Second button is going to follow the same format, vid2_btn, just like that. And now I am going to go ahead and make this first button work. So vid1 button, in fact, I am going to do a Command+C to copy that. All right.
I do have this empty LAYER down here, so I will just delete that by hitting that trashcan, and I want to make a new LAYER at the top, and I am just going to call AS, for ActionScript. I am going to select that first frame. I am going to open up my Actions panel, and the first thing I am going to do is just Pin my code by selecting that Push Pin. Now my code will always stay up, regardless of what I have selected. All right. So I am going to type in a comment, and I am going to Listen for the buttons to be clicked on, and then I am going to do something.
If I do a Command+V, there is my vid1_btn. I need to add an EventListener for this button. So again, as soon as it highlights, you can hit Return, and it will add it. Now I can add the Type. The Type, well, it's going to be MouseEvent.CLICK, so I am listening for the click of this button, and I am going to add a comma. So once this is clicked on, I need to go ahead and reference a function.
So the function I am going to make is going to be playvid), parenthesis to close it, semicolon, and now I can go ahead and create my function, playvid. It is going to accept a MouseEvent. And I can kind of tab through, I am just using my arrow keys to select MouseEvent, and this is the structure for a basic function. Within these two curly braces, is what it is going to execute when you click on this button.
So what I need to do is when you click on the button, I want to change the Source of this video. Okay, but notice this video is actually inside of a movie clip, so I have just minimized this ACTIONS panel just by clicking on that gray bar, kind of move it down out of the way, so I can select this movie clip. So in order to target this movie clip, I need to give this movie clip an Instance Name. I am just going to call it myVideoPlayer.
myVideoPlayer, so I am going to do a Command+C to copy that. I am going to paste it right in my code. MyVideoPlayer., well, I am just referencing the movie clip, I am not - if I minimize this again, I am not pointing to that FLV component yet. So I need to double-click to enter inside of that movie clip. And I need to select that FLV. So now I need to give this FLV component an Instance Name as well. So myFLV, technically, it is the FLV playback component, but I do want to remember this, in fact, I will copy it, Command+C. Go back to my ACTIONS panel.
I will open that up and then paste it right in there. So myVideoPlayer.myFLV. I am targeting the right thing. Now, I need to change its Source. So I will do a period and type in Source and I am going to make it equal to the appropriate video. All right. Well, where is that video? Well let us take a look. If I go out to my video folder, I can see that this newport.flv is what I want to target. So again, I am right here. I want to go into the video folder and target that newport.flv, so let me go back and right within these Quotes, video/newport.flv. All right.
I need to do one more thing, because I want to make sure it plays as well, I can change the Source, but I am not telling it to play yet. Well, I am just going to copy this and paste it below, because not only am I changing the Source, I am also going to tell it to play. Now, I am going to go ahead and test this, Control>Test Movie, so when I click on this thumbnail, it's going to change the Source of this file and then it's going to play it. (Movie Playing) Great, works like a charm. In fact, I want to do the same thing for this thumbnail as well, but the first thing I need to do is I need to make sure that video exists.
So I am going to go to my Assets folder, into video, and I am going to take this tahoe.flv, and I am just going to right- click, and Copy it, and I am going to go ahead and put it in the appropriate folder, right where the newport.flv file is. So again, it's in the same location, so I can go back into Flash, and I want to do the same thing for vid2_btn. So it's really just a matter of copying all this code, Command+C, and then pasting it below.
Now, I can start changing the Instance Name to vid2_btn, and playvid2, which calls this function, playvid2, and now I can change the Source to tahoe. It's that easy. It's just copying that code and pasting it again for the second thumbnail, and now when I click the second one, (Video playing) it plays that video. I can come back to this first one and play it. (Video Playing) So from here, I can add as many thumbnails as I want for however many videos I have, so you could really start to build out your portfolio.
But again, Flash makes it easy. It's just a matter of adding EventListeners, just like you would, any other button.
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.