Adding functionality to video thumbnails
Video: Adding functionality to video thumbnailsNow 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.
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.
- Optimizing and publishing a Flash web site
- Designing a professional photo or video portfolio
- Adding button interactivity
- Adding functionality to portfolio thumbnails
- Displaying content with XML
- Adding audio to portfolio presentations
Adding functionality to video thumbnails
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 "" :
- Q: While following along with the course, I encountered the following error in Flash CS4:
1120: Access of undefined property content_mc.What is causing this error?
- A: Flash is looking for something (the content movieclip) with the instance name “content_mc” but it is not finding it. Select the content movieclip on the stage. In the Properties panel give it an instance name of “content_mc”. Make sure there are no spaces before or after. That should resolve the error.
- Q: What is the best strategy for integrating 720/60P HD video into a website? Would creating a blank page that opens in full HD resolution be the best way to view the full quality of the HD video file?
- A: A video file that large would just be unreasonable for most users to open. These settings are a good place to start: 600x400is
Bitrate level: 1,000kbps
Bitrate Encoding: VBR These are just recommendations, and can be modified to preference. Also keep in mind that in Flash, one of the buttons that can be added is a full screen button, which is part of the skins.
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.