Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Dynamically loading sections

From: Creating a Portfolio Web Site Using Flash CS4 Professional

Video: Dynamically loading sections

Now, I currently have four different Flash files created: the main Flash file and then these different sections. And what I want to happen is I want to, when you click on a button, to load that particular section in. But I am not going to load in the FLA, because this is the working file, I need to load in its SWF file, its Small Web Format file. Now, I am just going to open up my about.fla, and in order to make an SWF, I can do it a number of ways, but the easiest way is just to go down to Control > Test Movie, because each time you test a movie, it creates an SWF file.

Dynamically loading sections

Now, I currently have four different Flash files created: the main Flash file and then these different sections. And what I want to happen is I want to, when you click on a button, to load that particular section in. But I am not going to load in the FLA, because this is the working file, I need to load in its SWF file, its Small Web Format file. Now, I am just going to open up my about.fla, and in order to make an SWF, I can do it a number of ways, but the easiest way is just to go down to Control > Test Movie, because each time you test a movie, it creates an SWF file.

So this is already generated, and I can also see what it looks like, so this is what I should expect when it gets loaded into the index file. Same thing for the portfolio.fla, portfolio file in that folder, if I do a Test Movie, it will generate that portfolio.swf. And then the video.fla, if I do Control > Test Movie, it will create this video.swf. Now, just be mindful that the stage background color is irrelevant, because it's going to be actually transparent, and it will actually show whatever's in the index.fla file.

So this content is going to appear on top of whatever is in this index.fla. But again, I went ahead and I basically published out three different SWF files. If I go back to my Desktop, you can see that these SWF files were generated, and I need to make sure that they are in the same location as this index.fla. So they are in the correct location and now I can open up the index.fla file. So what I want to do now is I want the sections to load in when you select the appropriate button.

So I am going to go to the AS layer, select that first frame. I am going to go to Window, down to Actions, and I can open up my Actions panel, and here is all of my code. So the first thing I am going to do is just pin my code by clicking that little Push-Pin icon, move this into place, and now I can see what I want to happen. So at this point in time for, say for instance, the About button, when you click on the About button, I want to load in, and I will just type this in here, as I comment, Load in the about.swf file.

And how I am going to do this is I am going to use the UILoader component. So I am going to just minimize the Actions panel, and what I am going to do is I am going to go ahead and create a New layer, and I am just going to call this mainLoader. This is all my main content for that section. This is my mainLoader. It's going to go right in here. I am going to go to Window, down to Components, and I am going to go ahead and open up the User Interface components.

Now these components, I encourage you to explore all of them, but they provide additional functionality to your Flash website. So whatever you want to use, check it out and see if you can just maybe use one of these items as opposed to creating your own. Now, I don't want to write multiple lines of code to load in my SWF file. What I want to use is of course this you UILoader. I am just going to drag that onto the Stage, and I will close that Components panel, and I will go ahead and, I will just put him up here as well, upper left hand corner.

And with this UILoader selected, I am going to go to Window and open up the Component Inspector. I just want to show that I need to make sure this is set up appropriately, because I don't want to scale the content down to this size. I want to change the scaleContent to false. I don't want to load in anything into this UILoader initially. Only when you click that About button, do I want to determine what the source file is.

But what I need to do is I need to give this UILoader a specific name, because remember, if I turn off this layer, notice there's that UILoader in the background. Well, I need to give this one a specific name. So I will just call this sectionLoader. Type that in the Properties panel. And I am going to remember this. In fact, I am going to do Ctrl+C to copy it, and I am going to open up my Actions panel, go back to where that comment is and I am going to Paste in sectionLoader.

So for sectionLoader, set the source equal to about.swf. And again, I need to make sure this about.swf is in that same folder, and it definitely is. About is right there, and it will get loaded in when you click on the About button. In theory, this should work. Let's go ahead and test it. If I click About, that content comes up.

So it's working perfect. It's exactly what I want. I am going to go ahead and do that for the other sections. If I was to do this for the other sections, I would have to repeat this line of code for each one, and I really want to use the power of this moveContent function. So currently, this moveContent function, what it does is it sets theX, theYPosition and then theRotation as well, when really I want to do something a little more advanced.

What I want to do is I want to add another parameter, down here on the end, theSection. theSection is actually going to be a string. A string is just text. It's going to now accept text as opposed to a number, this last parameter is going to accept text. So for this About button, this is the text I want to pass in into my moveContent function. So just after the X, Y Position, and theRotation, I want to add a comma and I am just going to move this right up in here. All right! There is my string that gets passed into that function, and it's now known as theSection.

But what I also need to do is I need to move this sectionLoader property as well, and I need to move it right up into that moveContent function. So let's just scroll down. Notice I dragged it up, and I want you to just be aware of where this last curly brace is, because it needs to be below sort of bookmarking this function. It needs to start with a curly brace and then end with a curly brace, and now I can go ahead and just tab that in, sectionLoader.source is now equal to theSection.

So I will just Copy that and Paste that right in here. So that's looking pretty good. I have moved that up. And let me just even remove that comment, and do a Test Movie. And it does break, and that's what this is doing. And I am glad this came up, because it gives me a chance to show you the error. So right in here, I can see that it tells me exactly what line the error is happening, and it says, You know what? Hey, there is an incorrect number of arguments," also known as parameters.

There is an incorrect number of arguments. It's expecting 4, but there's 3. And what's great about the Compiler Error panel is, what I can do is I can just double-click on that error and it takes me right to that line of code that's broken. So the reason it broke is because it's looking for four parameters, but these other buttons, there is only three. So it's saying, "Hey, I am expecting four and you gave me three." Only in one case do I have four.

So what I need to do, and the great thing about this is it gives me the opportunity, to load in the other sections. So let's start with this video button, add a comma, and then in quotes, I want to type in "video.swf." Down here at the bottom, for the portfolio button, add a comma, type in "portfolio.swf." portfolio.swf, the video. swf, and then the about.swf. Now, if I can reference this error again, remember, I have to put 4 arguments in there, and for the home section, I don't need to load any other content.

So I can just add a comma, and then I could just type in null. Null is just a word meaning nothing. It says, "Hey, you know what? I am just a filler, don't break the code. I don't need to be anything, so don't worry about me," is what it's saying. So everything seems to look good, and I can go ahead and check my syntax. And sure enough, it clears out my Compiler Errors. It says my script contains no errors. I am getting pretty hopeful now. Let's do a Test Movie. Here is my SWF file.

If I click About, that's great. It loads in the About content. Let's click Video. My Video content gets loaded in. If I click Portfolio, there is my Portfolio content. So it's all looking really good. For the most part, this is all squared away, and again, what I am doing is I am creating these SWF files and then they all get loaded into this main file. And the reason I want to set my site up this way is because it doesn't force the user to wait for all this content to download in order for them to see your site, but you are only loading in the content that they are interested in.

So if they click on the Portfolio button, that's when they get the Portfolio information, all that content. So at the end of the day what it means is your initial size of your website is going to be pretty small. So it's only going to be like 25K. And then when they select their individual sections, that's when it will load in that appropriate content. So this is a really smart way to set up a site, and it's also very flexible, because now if I need to edit any of the portfolio content, I can jump right to that file.

I don't have to worry about messing with any of the other files. So it's really flexible that way, and it's really user-friendly as well.

Show transcript

This video is part of

Image for Creating a Portfolio Web Site Using Flash CS4 Professional
 
Expand all | Collapse all
  1. 1m 41s
    1. Welcome
      1m 7s
    2. Using the exercise files
      34s
  2. 24m 1s
    1. Understanding web design
      2m 44s
    2. Creating a Flash file
      3m 18s
    3. Importing a design from Photoshop
      7m 45s
    4. Optimizing the design
      10m 14s
  3. 13m 59s
    1. Dynamically loading an image
      3m 37s
    2. Loading random images
      10m 22s
  4. 47m 38s
    1. Creating menu buttons
      8m 18s
    2. Adding functionality to buttons
      8m 56s
    3. Adding navigation
      9m 45s
    4. Creating transitions
      12m 0s
    5. Simplifying code
      8m 39s
  5. 26m 11s
    1. Creating web site sections
      7m 41s
    2. Dynamically loading sections
      11m 7s
    3. Linking to web sites and email addresses
      7m 23s
  6. 29m 18s
    1. Setting up a portfolio
      12m 31s
    2. Adding functionality to thumbnails
      10m 10s
    3. Allowing for unlimited thumbnails
      6m 37s
  7. 41m 17s
    1. Benefits of using XML
      4m 42s
    2. Loading XML content
      4m 34s
    3. Sorting XML content
      7m 32s
    4. Displaying XML content
      7m 35s
    5. Using XML to create thumbnails
      8m 41s
    6. Displaying content with thumbnails
      8m 13s
  8. 25m 59s
    1. Creating and importing video
      9m 47s
    2. Adding a Full Screen button
      4m 15s
    3. Creating custom video controls
      4m 50s
    4. Adding functionality to video thumbnails
      7m 7s
  9. 9m 12s
    1. Adding audio to buttons
      5m 30s
    2. Adding audio to dynamically created buttons
      3m 42s
  10. 21m 19s
    1. Applying professional transitions
      9m 26s
    2. Creating a preloader
      8m 56s
    3. Publishing a web site
      2m 57s
  11. 3m 15s
    1. Reviewing the "corporate" Flash site
      1m 40s
    2. Reviewing the "artistic" Flash site
      1m 35s
  12. 12s
    1. Goodbye
      12s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a Portfolio Web Site Using Flash CS4 Professional.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.