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.
One of the nicest features that Flash has for video is the ability to make your video go full screen. But this is a two-part process. I am going to start with first step, which is going to be adding a full screen button. So it's going to be changing this Skin. So I am going to select this movie clip. It's the VideoPlayer copy movie clip, and I am going to double-click on it, and I am going to locate just this FLVPlayBack Component. So in my PROPERTIES panel, it says FLVPlayback. I can go ahead and select the COMPONENT INSPECTOR panel.
This gives me different settings to change this FLVPlayback Component, and the one I want to focus on is the Skin. So right here, this is the current one I have selected, SkinOverPlayedMute, lists out all the buttons, and I can just click on that name, and it opens up the Select Skin dialog box, and gives me the opportunity to change it. So this is quite a list of Skins that I can choose from. There's a quite a few in here, and really, I just want to focus on the ones that say Full.
So this means Full Screen, some of them also say Full Screen, literally, but these are all the ones that have the Full Button. So I am just going to go ahead and select one of these. In fact, I will just Select the SkinOverPlayFullscreen. I am going to keep it simple. The Play button, Fullscreen Button, this is the one I am going to focus on, I am going to select OK. Now if I close my COMPONENT INSPECTOR panel, you can see that this is now my Full-screen button. Okay, I am going to go ahead and run this now.
I am going to do a Test Movie. There's my video. Now I can play it, plays great, my Full-screen button. If I click on it, actually nothing happens, because I need to do something to the HTML, because really it's the HTML page that's going to make this video go full screen. So I need to do into the Publish Settings, and Publish out an HTML page that has the appropriate code. So I am going to close this video.swf, and if you recall, this SWF file is sitting right here, but technically, it gets loaded into this index.swf.
So this is really my main file, and this file is going to publish out both the SWF and the HTML page. So I am going to double-click on that, and in this index.fla, here is where I want to go to File, and I want to go down to my Publish Settings. Okay, with that selected, notice that I have Flash and HTML checked. It's going to publish out both of those files, and I'm also given tabs up at the top. So I am going to select the HTML tab, and notice how it gives me the ability to change the template, and this is what I want to focus on right here.
I can publish it to different template, but what I want to do is I want to publish for Flash only, and go ahead and allow for the Full-screen function. So this will create an HTML page with the Full-screen function already embedded. I am going to go-ahead select OK, and now I am going to go to File, and I am going to go down to Publish Preview, and I am going to Publish Preview the default HTML page. So I am going to select that. It shows me the SWF sitting right on an HTML page.
So I am going to go to Video. There is my video. I can go to my different sections, About. If I go back to Video, notice that I have my Full-screen button, so let me play it, and then I am going to go Full Screen, and then I am going to close it and pause it. (Video playing) So notice how it went Full-screen. It gave me the option to hit the Escape key to escape out of Full-screen mode, but it was done pretty easily, for the most part I just need to make sure I select a skin with that button in it, and then I need to Add up my Publish Settings, and then I am good to go.
It provides a great user experience for the end-user, and really shows off all of your video content quite well.
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.