Finishing touches
At this point, the code works. I will add just two small features to it:
A shuffle feature: if there are many images in the xml list, it makes sense to shuffle their order each time. The code is very simple:
1 2 3 4 5 6 7 8 9 10 11 12 | private function shuffle(arr:Array):Array { var shuffled:Array = arr.slice(); for (var i:int=0; i < arr .length; i++) { var element:Object = shuffled[i]; var rnd:int = Math.floor(arr.length * Math.random()); shuffled[i] = shuffled[rnd]; shuffled[rnd] = element; } return shuffled; } |
The code is very simple, I won’t bother you with details, except for one thing: arr.slice() creates a clone of the original array, so that we can shuffle the copy of the array without affecting the original.
To use it, define a new constant
private const RANDOMIZE_IMAGES:Boolean = true;
and then, in the onDataLoaded function, add:
private function onDataLoaded(e:Event):void{ ... if (RANDOMIZE_IMAGES) queue = shuffle(queue); loadNextItem(); }
The other thing is using an embedded font for the title.
For this, in the flash movie, open the Library panel, right-click on it and choose New Font. For Name, write TitleFont and for Font, choose a font from your system. Then, right-click on the font in the Library and choose Linkage. Write Class: TitleFont and Base Class: flash.text.Font and then check Export for Actionscript and Export in First Frame.
Now go back to where you create the textfield (in the onAddedToStage function) and replace the old code for creating and setting the text field with this new one:
titleField = new TextField(); titleField.x = 0; titleField.width = stage.stageWidth; titleField.y = stage.stageHeight - 30; titleField.height = 30; titleField.selectable = false; titleField.embedFonts = true; titleField.antiAliasType = flash.text.AntiAliasType.ADVANCED; var format:TextFormat = new TextFormat(); format.font = new TitleFont().fontName; format.align = TextFormatAlign.CENTER; format.size = 20; titleField.defaultTextFormat = format; titleField.text = "";
Full source code follows on the next page.
I’m having a serious problem that’s just recently appeared. my flash cs3 is unable to build a classpath to the external actionscript in your tutorial example as well as others I’ve downloaded tonight. it’s driving me crazy. have you ever encountered this?
my program was corrupted. had to re-install from scratch. fine now!
thanks for this terrific example….
This was dead on and will really help out. Thanks for the time and effort to detail the code. Mahalo!
Spot on. Very useful. Thanks
This is great I’m new to actionscript and this was very helpful. It looks really nice. I was wondering, how do i go about making the images ‘clickable’?
Thanks
Excellent presentation Armand. I
Awesome flash based slide show, great work explaining it step by step as well. Thanks for sharing, keep up the good work.
Thank you very much for the tutorial, especially the pdf and full code. I linked you to where I will use it and cite for credit. Thanks!
Excellent tutorial, Armand. I will share this link with my design students. Thanks much.
This is the best tutorial/example I’ve found on the subject.
One thing you could do different is to keep the image source and title strings directly in the XML object, since it is already loaded in memory, no reason to create another copy of it in memory. A slideshow is a linear arrangement but frequently the user can jump around so it isn’t necessary to have things in linear order. You end up using the id names. If you have a large number of images, say your slideshow totals into the 100’s of megs, it may be better to load them on demand, not all at once.