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 thing you might want to consider when optimizing your site is determining what information is important and needs to be seen immediately, and then what information can be loaded later. Take, for instance, this design. What I want the user to see, initially, is, of course, JOHN DOE, the text, as well as the navigation, but the background can be loaded later. So really, I don't want this background to be part of the Flash file. So what I am going to do is I am just going to turn off that content layer.
I am going to select that graphic, and I am just going to delete it. So I am going to replace that graphic with a UILoader component that's going to dynamically load an image. So the first thing I need to do is go out and find my image. So I am going to go to Exercise Files/ Assets/design/and I'm going to select this images folder, and I am just going to Copy all of these images, but most importantly, I need this first image, background1.jpg.
So I am going to be aware of this filename, and I am going to put it in the Chapter02/01 begin folder, paste everything in there, and again, that's the image I want to load in. So, let me go back into Flash and I am going to use a component. So I am going to go to Window> Components, and what Components are are assets that I can use where most of the code is written for me. So they basically extend the functionality of my Flash file, without me having to write code.
So this UILoader component is one of them, because it will load in images, or SWF files, or Bitmaps, or JPEGs. If I want, all I have to do is drag it right onto your stage to add it. So I'm going to close the COMPONENTS panel, and I might want to put it in the upper corner, right there, all right. So next thing I need to do is define its properties, so I am going to go to the PROPERTIES panel and what I need to do is just go ahead and open up the COMPONENT INSPECTOR panel to view the different components options that I have available for this UILoader.
So with it selected, I can take a look at my COMPONENT INSPECTOR panel. I want to autoLoad. I want to scale the Content. Well, do I really want to scale the content? No, I wanted to load in at its actual size. So I am going to change scaleContent to false. Next thing I need to do is type in the source. Remember that we did put an images folder in the same folder as this fla, and in this images folder is the background1.jpg. That's where the file is.
Of course, we want to make it visible, but in general, that's all I need to do. So now when I go to Control>Test Movie, it loads in that background, and now my file size in only 15K. So if I just turn on this content layer, you can see, if I go to Control>Test Movie, that I do get the full experience. Now the file that was 100K is only 20K now, so this content is going to load pretty much in a split second for most users.
But it's all about keeping the user in mind and making sure they can see content, and get to content right away, without having to wait. And all this is done using the UILoader component, and pointing to the specific image that you want to load in.
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.