Creating an XML Slideshow in Flash - Page 6

In the final step of our tutorial we will create a text field to indicate the preloading process and to show later the title of each image . The outline of this section is as follows:

1. Create an empty text field.
2. Show the preloading status in this text field.
3. Reposition this text field when the loading process completes.
4. Show the image title through the slideMove() method.

Create an Empty Text Field

We are going to create a single text field and use it throughout our project to display the preloading status and then the image slide titles. We need to create this text field when the preloading process starts to inform us that preloading is in progress. We can do this easily by editing our callImages() method and creating a .onLoadStart event for our listener. We are going to position our preloader at the center of the stage using a formula similar to the one we used earlier to center our slideshow as well.

Even though our text field is centered on stage, the text that will be INSIDE that text field is not centered, to make sure that it is we use the .autoSize property of the text field to align it the way we want.

Tracking The Preloading Progress

Our preloader will be simple in the manner that it will state that preloading is in progress and that whatever number of images has already loaded. The number of successfully loaded images is already stored in the array we previously created. We can simply access the .length property of it to display that number as it progresses using the .onLoadProgress of our listener:

That should do it, but our preloader will be stuck when the loading finishes as the slideshow starts, so we are going to reuse it now to display the title of our image slides.

Displaying the Title of the Image Slides

When need to do two things in order for our titles to be displayed properly, first, when the loading fully finishes, we need to reposition our text field so that it is below our slideshow container movie clip. To do this, we simply set its _y property from within our completion conditional. To place our text field below the slideshow container we simply retrieve the position of the container and then add the height of it to that value:

The second part of this step is to actually show the title of the slide image. Retrieving this value is an identical process to retrieving the URL of the image, but this one will be called from within the slideMove() function instead of the callImages() function. The number of the image in our images array is equivalent to its number of the XML array, so we can use the same value to access the title attribute this way:

Cool, we are done you can test your movie now and you should get something very similar to this:

Summary of this Page

1. Created an empty text field using the .onLoadStart listener event.
2. Used the text field to track the preloading progress using the .onLoadProgress listener event.
3. Reposition the text field using the .onLoadComplete listener event.
4. Displayed the title of the slide by updating the slideMove() function.

This concludes our tutorial, congratulations if you've managed to do it successfully. You can download a sample of the end source file from here. If you have any questions regarding this topic please feel free to post them at the Oman3D Forum.

- End of Tutorial.

Home | Tutorials | Features | Competitions | Forum | About Us | Contact Us | Legal | Privacy | Show Us Some Love, Donate! | Subscribe
© 2004-2009 Republic of Code - All Rights Reserved