?
Solved

How to code a sequential loader for an external XML image list

Posted on 2010-01-11
7
Medium Priority
?
451 Views
Last Modified: 2013-11-11
I'm stuck on coding a sequential image loader. Queloader is available as open source online, but it seems like truck when a sports car would do.

I'm loading in the image URL's from an external XML list, so I have an XMLList variable "items" and I can access image URL's using _items.@IMAGES and then .  I've tried the usual 'for' loop to populate _imageArray using _imageArray.push method but it doesn't seem capable of controlling the the order in which images are loaded into the array; e.g., array[0] doesn't correlate to image0; array[1] to image1; etc.

I have run across one online reference at www.mikewaltonweb.com/blog/?p=6.  This doesn't quite work for me for a couple of reasons. Mike has hard coded the image paths into his array and used the shift method to cycle thru the array elements.  I'm starting with an XMLList of paths, not an array and so the shift technique isn't available.  I certainly don't want to hard code an entire image list.
package com.pricelearman.slideshows {
	
	import com.pricelearman.loaders.XMLLoader;
	import com.pricelearman.display.StageDetector;
	import com.pricelearman.loaders.ImageLoader;
	
	import fl.transitions.Tween;
	import fl.transitions.TweenEvent;
	import fl.transitions.easing.*;
	
	import flash.display.*;
	import flash.text.*;
	//import flash.net.URLRequest;
	import flash.events.*;
	import flash.utils.Timer;
	
	
	public class CrossFade extends Sprite {
		
		protected var _slideShowHolder:Sprite;
		protected var _imageHolder:Sprite;
		protected var _textHolder:Sprite;
		protected var _dotHolder:Sprite;
		protected var _controlHolder:Sprite;
		
		protected var _slideShowDetector:StageDetector;
		protected var _imageDetector:StageDetector;
		protected var _textDetector:StageDetector;
		protected var _dotDetector:StageDetector;
		protected var _controlDetector:StageDetector;
		
		protected var _xmlSource:String;
		protected var _xmlLoader:XMLLoader;
		protected var _loadedXML:XML;
		protected var _items:XMLList;
		protected var _images:XMLList;
		protected var _captions:XMLList;
		protected var _totalItems:uint;
		
		protected var _imageArray:Array = [];
		protected var _captionArray:Array = [];
		protected var _tweenArray:Array = [];
		protected var _dotArray:Array = [];
		
		protected var _imageLoader:ImageLoader;
		protected var _imageURL:String;
		protected var _imageCaption:String;
		protected var _currentImage:String;
		
		protected var _i:uint;
		protected var _imageCounter:uint = 0;
		protected var _playbackCounter:uint = 0;
		protected var _loadTimer:Timer;
		
		protected var _timer:Timer;
		protected var _tween:Tween;
		protected var _prevTween:Tween;
		protected var _fadeDuration:uint;
		protected var _displayDuration:uint;
		
		protected var _upColor:uint = 0xFF0000;
		protected var _overColor:uint = 0x000000;
		protected var _downColor:uint = _upColor;
		protected var _upRadius:uint = 8;
		protected var _overRadius:uint = 12;
		protected var _downRadius:uint = _upRadius;
		protected var _hitTestStateColor:uint = _upColor;
		protected var _hitTestStateRadius:uint = _upRadius;
		
		
		public function CrossFade(xmlSource:String = "_xml/home/crossFade.xml"):void {
			
			_xmlSource = xmlSource;
			
			setSlideShowHolder();
			
		}	// end constructor



		protected function loadXML(evt:Event):void {
		
			trace("loadXML launched");
			trace("");
			
			_xmlLoader = new XMLLoader(_xmlSource);
			_xmlLoader.addEventListener(XMLLoader.XMLLOAD_COMPLETE, onXMLComplete, false, 0, true);
			
		}	// end loadXML
		
		
		protected function onXMLComplete(evt:Event):void {
			
			_loadedXML = _xmlLoader.getXML();
			
			trace("onXMLComplete has launched");
			trace("");
			
			_items = _loadedXML.item;
			_captions = _items.text();
			_images = _items.@IMAGE;
			_totalItems = _items.length();
			_timer:Timer;
			_fadeDuration = _loadedXML.@FADE_DURATION;
			_displayDuration = (_loadedXML.@DISPLAY_DURATION) * 1000;
						_xmlLoader.removeEventListener(XMLLoader.XMLLOAD_COMPLETE, onXMLComplete);
			_xmlLoader = null;
			
			loadItems();
			
		}	// end onXMLComplete
		
				
		protected function loadItems():void {
			
			trace("loadItems Has Launched");
			trace("");
			
			for ( _i = 0; < _totalItems; _i++) {
					
			var imageURL:String = _items[_i].@IMAGE;
				_imageLoader = new ImageLoader(imageURL);
				_imageLoader.addEventListener(ImageLoader.IMAGELOAD_BITMAP_COMPLETE, loadImages, false, 0, true);	
						
		}	// end loadItems
		

		function loadImages(evt:Event):void {
					
			trace("loadImages Launched");
			trace("");
			
			var loadedImage:Bitmap = evt.target.getLoadedImage();
			
			_imageArray.push(loadedImage);
						
			_imageCounter++;
			
			
			if(_imageCounter == _totalItems) {
				
				runShow();
				_imageLoader.removeEventListener(ImageLoader.IMAGELOAD_BITMAP_COMPLETE, loadImages);
			
	}
			
}	// end loadImages

Open in new window

0
Comment
Question by:dlearman1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 19

Expert Comment

by:moagrius
ID: 26290933
not sure what the ImageLoader class is, but if you're only concerned that the array matches the XML list, that's an easy fix:  just add the loader to the array on instantiation, not on complete (i'll use plain old Loader for the example):

for ( _i = 0; < _totalItems; _i++) {
  var loader:Loader = new Loader();
  _imageArray[i] = loader;
  loader.load(new URLRequest(_items[_i].@IMAGE));
}

if you actually do want to sequentially load for other reasons, i'd use the technique i provided in your other question - post back if you'd like an example of that integrated into the code you've got here (with the ImageLoader class if you want to use it instead of Loader).
0
 

Author Comment

by:dlearman1
ID: 26291017
Imageloader is just a class that wraps the standard loader in some custom events, error messages and hooks onto a preloader.  An integrated example would be great.  Would I try something like

_imageArray[i] = evt.target.getLoadedImage();

where getLoadedImage() is a getter inside ImageLoader?

The sequence of images is important to the desired visual display.  Also, the images are linked to a line of buttons where the nth button in the row needs to control the nth image in the XML list.

Thanks again for your help.
0
 
LVL 5

Expert Comment

by:NiklasMoller
ID: 26292050
have you tried BulkLoader?
also free and open source. might be better? I dont know havent tried it but Ive looked at it and it seems to have quite alot of useful features.
check it out here:
http://code.google.com/p/bulk-loader/
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 19

Expert Comment

by:moagrius
ID: 26294467
what does getLoadedImage return?  the string URL, or the Loader object, or a reference to the ImageLoader instance itself, or something else?  and what do you want added to _imageArray (url string, Loader, etc...)?

Post back with that info (and the ImageLoader class if you can), and I'll give you an integrated example using sequential loading a little later today...  that said, I still don't think you actually need a real sequential loader - you don't need to wait for anything to load to do most of what it looks like you're trying to do...
0
 

Author Comment

by:dlearman1
ID: 26295440
Maybe you are right about not needing a true sequential loader.  I'm using a timer function to pull the images from the array and place them on the display tree.  I just need the array to be loaded with sequential image numbers.  In my first question regarding a "can't access a null value" error, you pointed out that I was trying to access the loaded image before it was fully available from ImageLoader. So now the only delay in the loading process is waiting for the custom event "IMAGELOAD_BITMAP_COMPLETE" to be returned.  

I've attached the full code for ImageLoader and CrossFade.  Thanks for diving into this.
/*	
 *	Image Loader 
 *	Author: Douglas S. Learman
 *	Version 1.0
 *	Created 05/09/08
 *  Extended from Rich Shupe & Zevan Rossner
 
 	
*/

package com.pricelearman.loaders {
	
		
	import flash.display.*;
    import flash.events.*;
    import flash.net.URLRequest;
	import flash.system.ApplicationDomain;
	import flash.system.LoaderContext;
	import flash.geom.*;
	import flash.text.*; 


	public class ImageLoader extends Sprite {

		// Create custom events regarding loading status to be
		// broadcast to classes outside FontLoader.
		//
		public static const IMAGELOAD_COMPLETE:String = "Image Loading Complete";
		public static const IMAGELOAD_INIT:String = "Image Loading Initiated";
		public static const IMAGELOAD_IOERROR:String = "Error Loading Display Object";
		public static const IMAGELOAD_HTTPSTATUS_EVENT:String = "HTTPS Error Loading Display Object";
		public static const IMAGELOAD_SECURITY_EVENT:String = "Security Event Loading Display Object";
		public static const IMAGELOAD_BITMAP_COMPLETE:String = "Bitmap Complete";
		
		protected var _loadFrom:String;
		protected var _loader:Loader;
		protected var _loaderContext:LoaderContext;
		protected var _loaderInfo:LoaderInfo;
		
		protected var _dispObj:DisplayObject; 
		protected var _loadedImage:Bitmap;
		protected var _loadedAsset:*;
		
		
		// Constructor
		//
		public function ImageLoader(loadFrom:String) {
			_loadFrom = loadFrom;
			
			loadImage(_loadFrom);
			
		}	// End Constructor
			
			
	
		protected function loadImage(loadFrom:String):void {
			
		
			_loadFrom = loadFrom;
			
			_loader = new Loader();
			_loaderInfo = _loader.contentLoaderInfo;		// shortcut variable
			_loaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
			
			_loaderInfo.addEventListener(Event.COMPLETE, onComplete, false, 0, true);
			_loaderInfo.addEventListener(Event.OPEN, onOpen, false, 0, true);
			_loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress, false, 0, true);
			_loaderInfo.addEventListener(HTTPStatusEvent.HTTP_STATUS, onHTTPStatusEvent, false, 0, true);
			_loaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError, false, 0, true);
			_loaderInfo.addEventListener(Event.INIT, onInit, false, 0, true);
			_loaderInfo.addEventListener(Event.UNLOAD, onUnloadContent, false, 0, true);
			
			_loader.load(new URLRequest(_loadFrom), _loaderContext);
			
		}	// end createLoader
		

		protected function createProgressInfo():void {
			
			//trace("createProgressInfo has launched");
			//trace("");
					
		}	// end createProgressInfo
		
	
		protected function onOpen(evt:Event):void {
			
			//trace("onOpen has launched");
			//trace("Loading has begun");
			//trace("");
			
		}	// end onOpen
		
		
		protected function onProgress(evt:ProgressEvent):void {
			
			//trace("onProgress has launched");
			//trace("");
			
		}	// end onProgress
		
		
		protected function onInit(evt:Event):void {
			
			//trace("onInit has launched");
			//trace("Loaded Asset Properties are now accessible");
			//trace("");
			//trace("Content Initialized Properties");
			//trace("  url: ", evt.target.url);
			//trace("  Same Domain: ", evt.target.sameDomain);
			//trace("");
			
			dispatchEvent(new Event(ImageLoader.IMAGELOAD_INIT));
				
		}	// end onInit
				
				
		protected function onComplete(evt:Event):void {
			
			//trace("onComplete has launched");
			//trace("");
			
			dispatchEvent(new Event(ImageLoader.IMAGELOAD_COMPLETE));  
			
			_loaderInfo.removeEventListener(Event.INIT, onInit);
			_loaderInfo.removeEventListener(Event.COMPLETE, onComplete);
			_loaderInfo.removeEventListener(Event.OPEN, onOpen);
			_loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
			_loaderInfo.removeEventListener(HTTPStatusEvent.HTTP_STATUS, onHTTPStatusEvent);
			_loaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, onIOError);
		
			// variable is typed as * because content property returns an Object of type
			// DisplayObject. Calling a method on a DisplayObject will throw an error, if the
			// method isn't defined in the DisplayObject Class.
			//
			_loadedAsset = evt.target.content;

			doBitmap(_loadedAsset);
			
		}	// end onComplete
	
		
		protected function onHTTPStatusEvent(evt:HTTPStatusEvent):void {
			
			//trace("onHTTPStatusEvent has launched");
			//trace("");
			//trace("HTTP Status Code: "+evt.status);
			//trace("");
			
		}	// end onHTTPStatus
		
		
		
		protected function onIOError(evt:IOErrorEvent):void {
			
			//trace("onIOError has launched");
			//trace("");
			//trace("A loading error has occurred:\n", evt.text);
			//trace("");
			
		}	// end onIOError
		
		
		protected function onUnloadContent(evt:Event):void {
			
			//_loaderInfo.removeEventListener(Event.UNLOAD, onUnloadContent);
			
				//trace("Unload handler:\n", evt);
				//trace("");
				//trace("onUnloadContent has launched");
				//trace("");
			
		}	// end onUnloadContent
		
		
		protected function doBitmap(loadedAsset:*):void {
			
			_loadedAsset = loadedAsset;
			
			_loadedImage = Bitmap(_loadedAsset);
			
			//trace(">>>>>");
			//trace("loaded Image on ImageLoader = "+_loadedImage);
			//trace(">>>>>");
			
			dispatchEvent(new Event(ImageLoader.IMAGELOAD_BITMAP_COMPLETE));

		}	// end doBitMap
		
		
		
		public function getLoadedImage():Bitmap {
			
			return _loadedImage;
			
		} // end get loadedImage
	
				
	}	// end class
	
}	// End Package




/*	CrossFade Class
 *	Author: Douglas S. Learman
 *	Version 1.0
 *	Created 11/19/09
 *  The CrossFade 
 *  
 *   
 */

package com.pricelearman.slideshows {
	
	import com.pricelearman.loaders.XMLLoader;
	//import com.pricelearman.loaders.HTMLLoader;
	import com.pricelearman.display.StageDetector;
	import com.pricelearman.loaders.ImageLoader;
	import com.pricelearman.display.TraceDisplayList;
	
	//import fl.controls.ProgressBar;
	//import fl.controls.ProgressBarMode;
	import fl.transitions.Tween;
	import fl.transitions.TweenEvent;
	import fl.transitions.easing.*;
	
	import flash.display.*;
	import flash.text.*;
	//import flash.net.URLRequest;
	import flash.events.*;
	import flash.utils.Timer;
	
	
	public class CrossFade extends Sprite {
		
		protected var _slideShowHolder:Sprite;
		protected var _imageHolder:Sprite;
		protected var _textHolder:Sprite;
		protected var _dotHolder:Sprite;
		protected var _controlHolder:Sprite;
		
		protected var _slideShowDetector:StageDetector;
		protected var _imageDetector:StageDetector;
		protected var _textDetector:StageDetector;
		protected var _dotDetector:StageDetector;
		protected var _controlDetector:StageDetector;
		
		protected var _xmlSource:String;
		protected var _xmlLoader:XMLLoader;
		protected var _loadedXML:XML;
		protected var _items:XMLList;
		protected var _images:XMLList;
		protected var _captions:XMLList;
		protected var _totalItems:uint;
		
		protected var _imageArray:Array = [];
		protected var _captionArray:Array = [];
		protected var _tweenArray:Array = [];
		protected var _dotArray:Array = [];
		
		protected var _imageLoader:ImageLoader;
		protected var _imageURL:String;
		protected var _imageCaption:String;
		protected var _currentImage:String;
		
		protected var _i:uint;
		protected var _loadedImage:uint = 0;
		protected var _imageCounter:uint = 0;
		protected var _playbackCounter:uint = 0;
		protected var _loadTimer:Timer;
		
		protected var _timer:Timer;
		protected var _tween:Tween;
		protected var _prevTween:Tween;
		protected var _fadeDuration:uint;
		protected var _displayDuration:uint;
		
		protected var _upColor:uint = 0xFF0000;
		protected var _overColor:uint = 0x000000;
		protected var _downColor:uint = _upColor;
		protected var _upRadius:uint = 8;
		protected var _overRadius:uint = 12;
		protected var _downRadius:uint = _upRadius;
		protected var _hitTestStateColor:uint = _upColor;
		protected var _hitTestStateRadius:uint = _upRadius;
		
		//public static const SLIDESHOW_COMPLETE:String = "slideshowComplete";
		//public static const SLIDESHOW_PAUSED:String = "slideshowPaused";
		//public static const SLIDESHOW_RESUMED:String = "slideshowResumed";
		
		//protected var _random:Boolean = false;					// slideshow loads in random/sequential order
		//protected var _loop:Boolean = true;						// slideshow loops/stops with last item
		//protected var _runFree:Boolean = true;					// slideshow is controlled by timer/mouse click
		//protected var _thumbTween:Tween;
		//protected var _itemLoaded:Boolean = false;
		//protected var _imageInLoaded:Boolean = false;
		//protected var _imageOutLoaded:Boolean = false;
		//protected var _imageTweenIn:Tweener;
		
		
		
		public function CrossFade(xmlSource:String = "_xml/home/crossFade.xml"):void {
			
			_xmlSource = xmlSource;
			
			setSlideShowHolder();
			
		}	// end constructor
	
	
		protected function setSlideShowHolder():void {
			
			trace("setSlideShowHolder Launched");
			trace("");
			
			_slideShowHolder = new Sprite();
			_slideShowDetector = new StageDetector(_slideShowHolder);
			_slideShowDetector.addEventListener(StageDetector.ADDED_TO_STAGE, setImageHolder, false, 0, true);
			
			_slideShowHolder.buttonMode = false;
			_slideShowHolder.x = 0;
			_slideShowHolder.y = 0;
			_slideShowHolder.alpha = 1;
			addChild(_slideShowHolder);
			
			trace("_slideShowHolder xPos = "+_slideShowHolder.x);
			trace("_slideShowHolder yPos = "+_slideShowHolder.y);
			trace("");
			
			_slideShowDetector.setDisposal();
			
		}	// end setPage
		
		
		protected function setImageHolder(evt:Event):void {
			
			trace("setImageHolder Launched");
			trace("");
			
			_imageHolder = new Sprite();
			_imageDetector = new StageDetector(_imageHolder);
			_imageDetector.addEventListener(StageDetector.ADDED_TO_STAGE, setTextHolder, false, 0, true);
			
			_imageHolder.x = 0;
			_imageHolder.y = 0;
			_imageHolder.alpha = 1;
			_imageHolder.buttonMode = false;
			
			var g:Graphics = _imageHolder.graphics;
			g.lineStyle(0, 0xFFFFFF, 0);
			g.beginFill(0xFFFFFF, 1);
			g.moveTo(0, 0);
			g.lineTo(1000, 0);
			g.lineTo(1000, 680);
			g.lineTo(0, 680);
			g.lineTo(0, 0);
			g.endFill();
			//_imageHolder.addEventListener(MouseEvent.CLICK, onMouseClick, false, 0, true); 
			//_imageHolder.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver, false, 0, true); 
			//_imageHolder.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut, false, 0, true); 
			_slideShowHolder.addChild(_imageHolder);
			
			_imageDetector.setDisposal();
			
		}	// end ImageHolder
		

		protected function setTextHolder(evt:Event):void {
			
			trace("setTextHolder Launched");
			trace("");
		
			_textHolder = new Sprite();
			_textDetector = new StageDetector(_textHolder);
			_textDetector.addEventListener(StageDetector.ADDED_TO_STAGE, setDotHolder, false, 0, true);
			
			_textHolder.x = 26;
			_textHolder.y = 110;
			_textHolder.alpha = 1;
			_textHolder.buttonMode = false; 
			_slideShowHolder.addChild(_textHolder);
			
			var g:Graphics = _textHolder.graphics;
			g.lineStyle(0, 0xFFFFFF, 0);
			g.beginFill(0xFFFFFF, .5);
			g.moveTo(0, 0);
			g.lineTo(950, 0);
			g.lineTo(950, 150);
			g.lineTo(0, 150);
			g.lineTo(0, 0);
			g.endFill();
			
			trace("_textHolder xPos = "+_textHolder.x);
			trace("_textHolder yPos = "+_textHolder.y);
			trace("");
			
			_textDetector.setDisposal();
		
		}	// end setTextHolder
		
		
		protected function setDotHolder(evt:Event):void {
			
			trace("setDotHolder Launched");
			trace("");
		
			_dotHolder = new Sprite();
			_dotDetector = new StageDetector(_dotHolder);
			_dotDetector.addEventListener(StageDetector.ADDED_TO_STAGE, setControlHolder, false, 0, true);
			
			_dotHolder.x = 0;
			_dotHolder.y = 560;
			_dotHolder.alpha = 1;
			_dotHolder.buttonMode = false; 
			_slideShowHolder.addChild(_dotHolder);
			
			trace("_dotHolder xPos = "+_dotHolder.x);
			trace("_dotHolder yPos = "+_dotHolder.y);
			trace("");
			
			_dotDetector.setDisposal();
		
		}	// end setTextHolder
		
		
		protected function setControlHolder(evt:Event):void {
			
			trace("setDotHolder Launched");
			trace("");
		
			_controlHolder = new Sprite();
			_controlDetector = new StageDetector(_controlHolder);
			_controlDetector.addEventListener(StageDetector.ADDED_TO_STAGE, loadXML, false, 0, true);
			
			_controlHolder.x = 26;
			_controlHolder.y = 110;
			_controlHolder.alpha = 1;
			_controlHolder.buttonMode = false; 
			_slideShowHolder.addChild(_controlHolder);
			
			trace("_controlHolder xPos = "+_controlHolder.x);
			trace("_controlHolder yPos = "+_controlHolder.y);
			trace("");
			
			_controlDetector.setDisposal();
		
		}	// end setTextHolder
		
	
		protected function loadXML(evt:Event):void {
		
			trace("loadXML launched");
			trace("");
			
			_xmlLoader = new XMLLoader(_xmlSource);
			_xmlLoader.addEventListener(XMLLoader.XMLLOAD_COMPLETE, onXMLComplete, false, 0, true);
			
		}	// end loadXML
		
		
		protected function onXMLComplete(evt:Event):void {
			
			_loadedXML = _xmlLoader.getXML();
			
			trace("onXMLComplete has launched");
			trace("");
			
			_items = _loadedXML.item;
			_captions = _items.text();
			_images = _items.@IMAGE;
			_totalItems = _items.length();
			_timer:Timer;
			_fadeDuration = _loadedXML.@FADE_DURATION;
			_displayDuration = (_loadedXML.@DISPLAY_DURATION) * 1000;
			//_delay = _loadedXML.@DELAY;
			//_random = _loadedXML.@RANDOM;
			//_loop = _loadedXML.@LOOP;
			//_runFree = _loadedXML.@RUN_FREE;
			
			trace("_loaded XML = "+_loadedXML);
			trace("");
			trace("_items = "+_items);
			trace("_images = "+_images);
			trace("_captions = "+_captions);
			trace("_totalItems = "+_totalItems);
			trace("");
			
			_xmlLoader.removeEventListener(XMLLoader.XMLLOAD_COMPLETE, onXMLComplete);
			_xmlLoader = null;
			
			loadItems();
			
		}	// end onXMLComplete
		
				
		protected function loadItems():void {
			
			trace("loadItems Has Launched");
			trace("");
			
			for ( var i:uint = 0; i < _totalItems; i++) {
				trace("i = "+_i);
				trace("imageURL = "+_items[i].@IMAGE);
				trace("Image Caption = "+_items[i].text());
				trace("");
					
				var caption:TextField = new TextField();
				caption.alpha = 1;
				caption.x = 0;
				caption.y = 0;
				caption.multiline = false;
				caption.wordWrap = false;
				caption.selectable = false;
				caption.autoSize = TextFieldAutoSize.LEFT;
				caption.alpha = 1;
				//caption.embedFonts = true;
				caption.antiAliasType = "advanced";
				//caption.styleSheet = parent.parent.flashStyles;
				caption.htmlText = _items[i].text();
				_captionArray.push(caption);
				
				var dotButton:SimpleButton = new SimpleButton();
				dotButton.upState = createButton(i, _upColor, _upRadius);
				dotButton.overState = createButton(i, _overColor, _overRadius);
				dotButton.downState = createButton(i, _downColor, _downRadius);
				dotButton.hitTestState = createButton(i, _hitTestStateColor, _hitTestStateRadius);
				dotButton.useHandCursor = true;
				dotButton.addEventListener(MouseEvent.CLICK, onDotMouseClick, false, 0, true);
				dotButton.addEventListener(MouseEvent.MOUSE_OVER, onDotMouseOver, false, 0, true);
				dotButton.addEventListener(MouseEvent.MOUSE_OUT, onDotMouseOut, false, 0, true);
				_dotHolder.addChild(dotButton);
				_dotArray.push(dotButton);
				
				var imageURL:String = _items[i].@IMAGE;
				_imageLoader = new ImageLoader(imageURL);
				_imageLoader.addEventListener(ImageLoader.IMAGELOAD_BITMAP_COMPLETE, loadImages, false, 0, true);
			
			}
			
		}	// end loadItems
		

		function loadImages(evt:Event):void {
					
			trace("loadImages Launched");
			trace("");
			
			var loadedImage:Bitmap = evt.target.getLoadedImage();
			
			_imageArray[_i] = loadedImage;
			
				
			trace("_imageArray = "+_imageArray);
			trace("");
						
			_imageCounter++;
			
			trace("_imageCounter = "+_imageCounter);
			trace("");
			
			//_loadTimer = new Timer(100, 0);
			//_loadTimer.addEventListener(TimerEvent.TIMER, timeOut, false, 0, true);
				
			if(_imageCounter == _totalItems) {
					
				trace("_imageArray[_totalItems] = "+_imageArray[_totalItems]);
				trace("");
				
				runShow();
				_imageLoader.removeEventListener(ImageLoader.IMAGELOAD_BITMAP_COMPLETE, loadImages);
			
			}
			
			
		}	// end loadImages
			

		protected function runShow():void {
			
			trace("runShow Has Launched");
			trace("");
			
			nextImage();
			
			_timer = new Timer(_displayDuration);
			_timer.addEventListener(TimerEvent.TIMER, onTimerComplete, false, 0, true);
			_timer.start();
			
		}	// end runShow
		
		
		protected function nextImage():void {
			
			
			trace("nextImage Has Launched");
			trace("");
			trace("playbackCounter = "+_playbackCounter);
			trace("_images[_playbackCounter] = "+_images[_playbackCounter]);
			trace("_captions[_playbackCounter] = "+_captions[_playbackCounter]);
			trace("");
			
			var image:Bitmap = _imageArray[_playbackCounter];
			image.x = (_imageHolder.width - image.width) / 2;
			image.y = (_imageHolder.height - image.height) / 2;
			_imageHolder.addChild(image);

			_tweenArray[0] = new Tween(image, "alpha", Strong.easeOut, 0, 1, 1, true);

			var caption:TextField = new TextField();
			_textHolder.addChild(caption);
			
			caption.x = 0;
			caption.y = 0;
			caption.multiline = false;
			caption.wordWrap = false;
			caption.selectable = false;
			caption.autoSize = TextFieldAutoSize.LEFT;
			caption.alpha = 1;
			//caption.embedFonts = true;
			caption.antiAliasType = "advanced";
			//caption.styleSheet = parent.parent.flashStyles;
			caption.htmlText = _captions[_playbackCounter];

			trace("caption.htmlText = "+(_captions[_playbackCounter]));
			trace("");

			_tweenArray[1] = new Tween(caption, "alpha", Strong.easeOut, 0, 1, 1, true);

		}	// end nextImage
		
	
		protected function onTimerComplete(evt:TimerEvent):void {
			
			trace("onTimerComplete Launched");
			
			hidePrev();
			
			_playbackCounter++;
			
			 if(_playbackCounter == _totalItems) {
				 
				 _playbackCounter = 0;
				 
			 } 
			 
			 	nextImage();
			  
		}	// end onTimerComplete
		
		
		protected function hidePrev():void {
			
			trace("hidePrev Launched");
			trace("");
			
			var children:TraceDisplayList = new TraceDisplayList(_imageHolder, 4);
			
			var image:Bitmap = Bitmap(_imageHolder.getChildAt(0));
			_prevTween = new Tween(image, "alpha", Strong.easeOut, 1, 0, 1, true);
			_prevTween.addEventListener(TweenEvent.MOTION_FINISH, onFadeOut, false, 0, true);
			
			var caption:TextField = TextField(_textHolder.getChildAt(0));
			_tweenArray[2] = new Tween(caption, "alpha", Strong.easeOut, 1, 0, 1, true);
			
		}	// end hidePrev
		
		
		protected function onFadeOut(evt:TweenEvent):void {
			
			trace("onFadeOut Launched");
			trace("");
			
			if (_imageHolder.numChildren > 0) {
				
				_imageHolder.removeChildAt(0);
				
				trace("_imageHolder child(0) removed");
				trace("");
				
			} else {
				
				trace("_imageHolder has no children");
				
			}
			
			if (_textHolder.numChildren > 0) {
				
				_textHolder.removeChildAt(0);
				
				trace("_textHolder child(0) removed");
				trace("");
				
			} else {
				
				trace("_textHolder has no children");
				
			}
			
		}	// end onFadeOut 
		
		
		protected function createButton(i:uint, color:uint, radius:uint):Shape {
			
			trace("createButton Has Launched");
			trace("");
			
			var _i:uint = i;
			var _color:uint = color;
			var _radius:uint = radius;
			
			var dotLength:uint = _totalItems * 20;
			var dotX:uint = (960 - dotLength) + (i * 20);
			
			var dot:Shape = new Shape();
			dot.graphics.lineStyle(0, _color);
			dot.graphics.beginFill(_color, 1);
			//dot.graphics.drawCircle((960 - (i * 20)), 0, 4);
			dot.graphics.drawCircle(dotX, 0, 4);
			dot.graphics.endFill();
			
			return dot;
			
		}	// end createButton
	
		
		protected function onDotMouseClick(evt:MouseEvent):void {
			
			trace("onDotMouseClick Event Has Ocurred");
			
			_playbackCounter = _dotArray.indexOf(evt.currentTarget) + 1;
			
			trace("index value of dot = "+_playbackCounter);
			trace("");
					
			//startShow();
			//nextImage();
			//setShowTimer();
			nextImage();
			
		}	// end onDotMouseClick
		

		
		protected function onDotMouseOver(evt:MouseEvent):void {
			
			trace("onDotMouseOver Event Has Ocurred");
			trace("");
			
			//var dot = _dotArray[evt.target];
			//var dotTweenXUp = new Tween(dot, "xScale", Strong.easeOut, 1, 1.25, 1000, false);
			//var dotTweenyUp = new Tween(dot, "yScale", Strong.easeOut, 1, 1.25, 1000, false);
			
			
		}	// end onDotMouseOver
	
	
		protected function onDotMouseOut(evt:MouseEvent):void {
			
			trace("onDotMouseOver Event Has Ocurred");
			trace("");
			
		}	// end onMouseOut

		
		protected function onMouseClick(evt:MouseEvent):void {
			
			trace("Mouse Click Event Has Ocurred");
			trace("");
			
		}	// end mouseClick
	
		
		protected function onMouseOver(evt:MouseEvent):void {
			
			trace("Mouse Over Event Has Ocurred");
			trace("");
			
		}	// end onMouseOver
	
	
		protected function onMouseOut(evt:MouseEvent):void {
			
			trace("Mouse Out Event Has Ocurred");
			trace("");
			
		}	// end onMouseOut


	}	// end class
	
}	// end package

Open in new window

0
 
LVL 19

Accepted Solution

by:
moagrius earned 2000 total points
ID: 26298160
ok i see what you're doing - you're loading the images and converting them to bitmaps - so you're right, you do need to wait to get the load info back since you won't have a bitmap until then.  just FYI and you probably already know this, you don't need to convert them to bitmaps - you can just use the original Loader object.  that said, there are things you can do with bitmaps you can't do with loaders (smoothing, grabbing bitmapdata objects for bitmapfills, etc.) so i'll assume you actually do want bitmaps.

i'm unable to test obviously since i don't have the full application, but the attached snippet is how i'd do it.

you were pretty close - i changed only a few lines - instead of the loop, we just use a semi-recursive pair of functions - load one image, when it's done, load the next one.

also, we use array assigmnent instead of the push method to make sure that the XMLList and the array match up.

there might be a typo or i might have gone past the increment without ending the cycle, but that should work and if there are any errors they should be easy to find.

(just to clarify: i just rewrote the two functions from your original post - replace loadItems and loadImages with the snippet - nothing else needs changed).

hth, and let me know if it's not working how you wanted.


protected function loadItems():void {
					
	// change this line from the loop to a single item, using _imageCounter	
	var imageURL:String = _items[_imageCounter].@IMAGE;
	trace("loading image" + _imageCounter);

	_imageLoader = new ImageLoader(imageURL);
	_imageLoader.addEventListener(ImageLoader.IMAGELOAD_BITMAP_COMPLETE, loadImages, false, 0, true);	
						
}
		

function loadImages(evt:Event):void {
					
	trace("image: " + _imageCounter " + " was loaded...");
			
	var loadedImage:Bitmap = evt.target.getLoadedImage();
		
	// since _imageCounter is still the same as it was when we called loadItems, use that here
	_imageArray[_imageCounter] = loadedImage;
			
	// now increment it _imageCounter	
	_imageCounter++;
			
	// add an "else" here to call loadItems again if it's not at the end
	if(_imageCounter == _totalItems) {
		runShow();
	} else {
		loadItems();
	}
			
}

Open in new window

0
 

Author Closing Comment

by:dlearman1
ID: 31675939
Great job by moagrius
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Here are some practices and techniques that can be adopted into your Flash/Flex application development process. Note: Not all "performance tips" provide an immediately-recognizable benefit.   This article does not include timing validation data,…
This article describes a solution to a problem of subloading one movie into another when they have different SWF versions. Sometime back, I was working on an ActionScript project while I came across an interesting fact which I would like to share…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question