Flash XML Slideshow - Quick and Easy

Flash XML Slideshow - Quick and Easy

©2001 mkelly/robert morris university

example and downloads:http://www.onestopdesktop.com/example4.html (dropdown menu shown is adapted from an http://www.cartoonsmart.com tutorial). see the dropdown menu tutorial (#10) on my site for further details.

XML is our friend. it keeps your swf size down and only calls up what you need from an en external source that you set.

A quick google search will locate a bunch of free slideshows/tutorials for Flash: http://www.republicofcode.com/tutorials/flash/as3slideshow/ http://www.kirupa.com/developer/mx2004/xml_slideshow.htm http://www.thetechlabs.com/tutorials/xml/create-a-as3-slideshow-with-xml/ http://active.tutsplus.com/tutorials/xml/build-a-dynamic-flash-and-xmlslideshow-with-scripted-transitions/ http://active.tutsplus.com/tutorials/screencasts/create-a-dynamic-slideshowwith-actionscript-30-and-xml-part-2/ http://www.richnetapps.com/tutorial-as3-slideshow/ you could certainly go with one of those, but for now, please stick with mine. it’s based on the idea of finding the wheel so you don’t have to re-invent it. the wheel was here: http://simplistika.com/as3-xml-slideshow-v12/ currently you’ll find version 1.3 there, but it’s not quite as quick and easy as I would like for this lesson to be although it’s terrific. we will be working from the earlier 1.2 version which I think is also a lot more adaptable for a portfolio. by the way, check out his site for other downloads (many free and others costing no more that $4.99). http://simplistika.com/ the http://www.onestopdesktop.com/example4.html link will contain a zip compression of the 1.2 version external action script files that you will need to follow along with for this tutorial and to create your own slideshow. the work shown in the slideshow belongs to Kourtney Elam, an RMU Senior. you can see more of issher work at http://kourtneyjae.com/ . so speaking of images, let’s begin there. the slides need to be the same size to cover each other. the best way to accomplish this is to make their canvas sizes the same in Photoshop. the background color should match your Flash movie’s background color.

my suggestion is is look through the group; find the tallest, note its height; find the widest, note its width and create an action that changes the canvas size to those numbers and saves the file as a jpeg or gif or png.

in the case of this tutorial

most important part – Image/Canvas Size:

the rest of the Actions – background color and Save were added in the process:

/

...

F1 (in this case) away on all your other images!!!

I would save them as 1.jpg, 2.jpg, etc., to make your life easier when it comes time to add them to your XML file ..

I would also save them to separate folders in the main folder that your swf and scripts will reside it. name the folders: Illustration, Photography, etc. once you have the new folders, we'll start with the XML contents for Illustration. create a text doc called "Illustration" and save with the .xml extension. if you’re using TextEdit, under File Format, choose:

you could also use Dreamweaver, Dashcode, etc. to create it. in the simplest format for five slides, the contents would be something like:

the Illustration/ refers to the folder structure – that the jpeg and pngs reside in the aforementioned Illustration folder... you would have a separate XML file for each category of your work. store in in the main folder with your swf or you can create an XML folder if you just love organization. you’ll just have to add that info to your flash timeline later so you swf can find them. so speaking of flash timeline coding, let’s knock that out...

your timeline should include this destination (see the dropdown menu tutorial on this site - #10 - for more info on setting up the timeline for an e-portfolio):

on the Actions later add a blank keyframe, and type in the following code:

you might end up with photoSlide, packageDesignSlide, etc, in addition to the current illusSlide for the variable name. you can have several slideshows in your timeline based on this same Class which we’ll look at in a bit. for the type of info this new variable/container will contain, we refer to the external action script/Class/Package know as XMLSlideshow which must reside in the same folder unless you set up a pathway script (see External action script tutorial for more details) in XMLSlideshow.as. for now just keep it in the same folder so you don’t have to worry about it... the 6000 means change the slide every 6000 milliseconds or every 6 seconds, 7 might be better, but this slideshow will have controls (powered by the Class) so the viewer can stop the slides (or go backwards/forwards through them). the true means to start the show immediately. illusSlide_mc is the Instance name of a movieClip that contains a rectangle whose fill color has 0% opacity. the width and height 593 x 493 are essential to get a 1:1 ratio with your original image regardless of its original size). you can copy and paste the movie clip in each of the places you have a new slide show. you’ll just need to change its instance name each time to photoSlide_mc, packageDesignSlide_mc, etc. again, make sure that it is 593 width x 493 height to avoid stretching or squashing your original image when it’s loaded in.

place it onstage wherever you want your slides to appear. you are pretty much done with this first slideshow. there are two classes included the XMLSlideshow.as and the TweenLite.as. we won’t touch TweenLite. it’s a free download from a super cool site: http:// www.greensock.com/ be sure to check it out for other tremendous downloads and to update TweenLite if you need to. we’re using an earlier version because it doesn’t rely on importing other greensock plug-ins. it’s employed in this case to cause the slides to fade in/out (tweening opacity, in this case) ... the other class XMLSlideshow contains some things you might want to change such as for the slide controls:

you can move it (relative to the movie clip) with the x and y placement values. experiment with the numbers. be sure to Save the .as file after every change to see it work. you can scale it or fade it (if you wanted to place in on top of the slides). the controller itself called Controls is in the Library with a Class name of Control in its Properties. it looks like this:

you can substitute your own graphics but your movie clip must have this Class name to match the one in the it consists of these parts that you can check out in the completed example:

control pre is a preluder bar which I set to Alpha 0 in the .as script. this controller is from the 1.3 version of the simplistic download. it looks a bit cleaner than the one for 1.2: make your own: if you would prefer one like that (in lieu of making your own?) it’s in the library hidden away in a folder called alternative button. you just have to change its Linkage name in its Properties from Control2 to Control and change the other controller’s Linkage name to Control2 or something.

the .as script is calling it from the Library by that name. so your first slideshow should now be working. just do the others the same way, and you’ll be looking good!