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

Using XML to create thumbnails

From: Creating a Portfolio Web Site Using Flash CS4 Professional

Video: Using XML to create thumbnails

So, currently what's going on with this file is that all of my thumbnails are all hardcoded in the ActionScript. So, with this first frame selected, you can see that I opened up my Actions panel and I'm going to pin my code and I'll even close that as well. If I scroll down, you can see all of these thumbnails are hardcoded with their information and quite frankly, I don't want this. I want it to all come from the XML. Okay. So, I'm going to do that and I'm going to really start with this first thumbnail as they shell, if you will, to create all my thumbnails, because not only am I going to pull all of the content from the XML, but I am going to end up deleting all of these other functions. All right! So the first thing I'm going to do is I'm going to create this new function and this function is going to be called loadThumbnail.

Using XML to create thumbnails

So, currently what's going on with this file is that all of my thumbnails are all hardcoded in the ActionScript. So, with this first frame selected, you can see that I opened up my Actions panel and I'm going to pin my code and I'll even close that as well. If I scroll down, you can see all of these thumbnails are hardcoded with their information and quite frankly, I don't want this. I want it to all come from the XML. Okay. So, I'm going to do that and I'm going to really start with this first thumbnail as they shell, if you will, to create all my thumbnails, because not only am I going to pull all of the content from the XML, but I am going to end up deleting all of these other functions. All right! So the first thing I'm going to do is I'm going to create this new function and this function is going to be called loadThumbnail.

Right now, I'm just putting a call in to the loadThumbnail that I'm just about to make, but know that that loadThumbnail function is going to be called once all of the data gets loaded in. So once all the data is available, I'm going to call this loadThumbnail function. Okay. So right down in here, I'm going to use this first thumbnail as my template, so I'm going to make a function called loadThumbnail and I'm going to do an open curly brace and I'm going to put everything inside of this function right here. Okay.

Again, anytime you make a function or you add curly braces, go ahead and select this Auto format button and it will format everything so I can see all the content inside of the loadThumbnail. Okay. So you can see that this is hardcoded and I really want to get rid of all of this stuff. So I'm just going to go ahead and delete that. In place of that, what I want to use is the content from the Array, more specifically, the thumbnailImageArray. So I'm going to copy that name and scroll back down.

Right here in the URLRequest, that's where I'm going to paste it. Now, I'm not going to reference the whole array, but I just need to get that first image. So, between two brackets, I'm going to put a zero and that's going to get the first thumbnail image, just like that. So that's looking pretty good. This is going to be called and it's going to go ahead and display that first thumbnail. Everything else is going to work as normal. I'm going to do a Test Movie and there is my image. So this is a different image. In fact, these two match up.

But the point is this image is coming from the XML. Everything else is hardcoded. So now what I'm going to do, I'm going to get rid of all of these thumbnail images and replace them with content from the XML. All right! So, what I want to do is I'm just going to go ahead and delete all of these other functions. This is the fun part. I like that I'm removing lots of lines of the code, looks like I'm at 207, delete that. Now I'm down to 54. In fact, if I start eliminating some of these lines, you can see that I'm now down to 45 lines of code.

But now I need to start adding some additional lines. So right up here at the top, this is where I have my variables for my arrays and I want to create a new variable. So I'm going to create a variable and this variable is going to be called imageNum. It's going to store a number and I'm going to make it equal to zero. So that's its starting point. imageNum is going to be equal to zero. So I'm going to take this number and I'm going to copy it and inside of my loadThumbnail function right here, I'm going to go ahead and paste imageNum. All right! So that will just put zero in there, initially, since I have this set to zero, but I want to run this function multiple times and I actually want to add to imageNum each time the function is run.

So right down here, before that closing curly brace, I'm going to go ahead and type in imageNum++. So what that does is I'll write a comment in here, add to imageNum each time it's run. So it adds 1 to it. All right! It's going to add to imageNum and then I want to call the function. I'm going to call the function loadThumbnail. That's right. I'm calling the same function that this is currently in. It's going to call that many times.

In fact, it's going to call it indefinitely. So, there will be some errors here, but the short of it is that it's going to go ahead and load up this image. In fact, at this point, what I want to do is I want to make sure that this is working. So, right inside this function, I'm going to add a trace and inside of this trace, I'm just going to say imageNum. That's what I want to trace out is the image number. All right. Notice up here there's this other trace statement in here where it's outputting the length 12 times. I really don't need that, so I'll come up here to this trace line and I'll just eliminate that line of code to that trace statement, so I just have this one.

So, that's all I'm really going to see. I shouldn't see any of the thumbnails, other than that one. I'm going to run it. Sure enough, there's my one thumbnail and I'm going to close this, but if you can take a look at this, I can see and I'll close my Actions panel, 2, 3, 4 clear up till 12, and then I start running into these errors, because it keeps on running that function even though there's only 12 images. So I'm going to take care of this now. I'm going to go back to my Actions panel and I only want to run this loadThumbnail 12 times for the length of the array.

So I need to create a new variable right up here at the top. I'm going to type in var totalImages:Number. So it's going to store a number. So right down in here, for the totalImages, it's going to be the length of the array, which I can find right here. So, just after the data gets loaded in, I'm going to go ahead and type in var and make sure I type in totalImages. I'm going to make that equal to theXMLData.title.length. In fact, I will take that and I'll move that right in there.

I'm going to make sure this ends with a semicolon and I need to make sure I use totalImages as I copy that and paste it. It's going to be still used right in there, but I can also use this totalImages down further as well. So right down in here, again, I want this loadThumbnail to be only run for the length of the array. So, I need to create an if statement. imageNum is less than totalImages and let's just make sure we have that name right, totalImages, capital 'I.' Close parentheses, open curly brace, and then close curly brace.

Again, anytime you add curly braces, click this Auto format button and it should be only running 12 times. So I'm going to go ahead and run this code, Control>Test Movie. It's only being run once and I'll show you why, because right up here at the top, this is equal to zero and this var means that it's only going to keep this variable within this function. So I actually need to remove that var right there. I did that to point out that any time you make a var, it's only going to be available within that area.

If you make a var or variable sort of at the root of this Actions panel, it's available everywhere. So now if I run this, you can see that it runs the length of the array, but I still only see one image, so I'm going to take care of that right now. So right down in here, the images are being loaded in, but they're not being positioned appropriately. So, that's my next step, is to position them appropriately. So just before that Event.COMPLETE, what I want to do is I want to go ahead and position this.

thumbLoader.x, make it equal to 100, not 100 pixels, but I want to multiply it. I want to have the first one maybe 100. Maybe the second one is 200. Maybe the third one is 300. So I need to start multiplying. So the asterisk is a multiplication and I can type in imageNum, just like that. So, everything is looking good. I'll do a Control>Test Movie, and sure enough, it runs. I can see all of my various thumbnails right down here and they're set up.

So, the next step would be adding some additional functionality to these, because when you select them, it opens up the first image, but I can take care of that later. The point is all of this data that you see right now is all external from the Flash file, all coming from the XML and I don't have to open up Flash if I want to update my site, I can just edit the XML.

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 preferencesfrom 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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.