Adding to Stage
If now we want to create the textfield that will display the title of the image currently in center of the screen, you might want to add something like this in constructor:
public function Slideshow(datasource:String) { titleField = new TextField(); titleField.x = 0; titleField.width = stage.stageWidth; titleField.y = stage.stageHeight - 30; ...
Note that you’ll also need to import flash.text package like this: import flash.text.*
If you run the code now, you will get a runtime error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
Why?
Each display object (MovieClip, Sprite, etc.) has a reference to the Stage, so instead of writing Stage.width (AS2), we use this.stage.stageWidth. There is a catch though: the reference to stage is created only when the object is added to stage (makes sense). When we create the class, we write
var slideshow:Slideshow = new Slideshow("list.xml"); addChild(slideshow);
so the constructor executes in the first line, and only after that the class is added on Stage via addChild.
What do we do?
There are many workarounds, but probably the best one is to take advantage of the new “added_to_stage” event that is fired just after the object has been displayed. Everything that requires the stage will be moved there:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | private function onAddedToStage(e:Event):void { // disable stage scaling stage.scaleMode = StageScaleMode.NO_SCALE; // move container off-screen container.x = stage.stageWidth; // create the title field titleField = new TextField(); titleField.x = 0; titleField.width = stage.stageWidth; titleField.y = stage.stageHeight - 30; titleField.height = 30; titleField.selectable = false; // text format for the title var format:TextFormat = new TextFormat(); format.font = "Verdana"; format.align = TextFormatAlign.CENTER; format.size = 20; titleField.defaultTextFormat = format; titleField.text = ""; addChild(titleField); } |
The code should be pretty much self-explanatory. Obviously, in order for it to execute, you’ll have to add a listener for it in the constructor:
public function Slideshow(datasource:String) { addEventListener(Event.ADDED_TO_STAGE, onAddedToStage); ...
Read on to learn how to animate the slideshow.
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.