Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.