I need help! Can't seem to figure out how to update the captions in my imageViewer
I am creating an image viewer in which needs to update photos and update captions with next and previous features. I got the next, previous and image update to work. However, I am stuck on the captions. This is my code:
I have a main.as:
public class Main extends Sprite
{
private var _iv:ImageViewer;
private var _pictureList:Array;
private var _currentPicture:int;
private var _xmlData:XML;
public function Main()
{
var urlLoader:URLLoader=new URLLoader();
urlLoader.load(new URLRequest("xml/imageload.xml"));
urlLoader.addEventListener(Event.COMPLETE, onParse);
_iv=new ImageViewer();
_iv.path="images/";
_iv.imageList=["dogs1.jpg", "dogs2.jpg", "dogs3.jpg"];
_iv.display();
_iv.x = 110;
_iv.y = 10;
this.addChild(_iv);
var imageCaption:tfCaption = new tfCaption();
imageCaption.x = 140;
imageCaption.y = 350;
this.addChild(imageCaption);
var nextImage:NextButton = new NextButton();
nextImage.x = 445;
nextImage.y = 350;
nextImage.buttonMode = true;
this.addChild(nextImage);
nextImage.addEventListener(MouseEvent.CLICK, onNext);
var prevImage:PreviousButton = new PreviousButton();
prevImage.x = 105;
prevImage.y = 350;
prevImage.buttonMode = true;
this.addChild(prevImage);
prevImage.addEventListener(MouseEvent.CLICK, onPrev);
}
private function onParse(e:Event):void
{
_pictureList=[];
_xmlData= XML(e.target.data);
for each(var pic:XML in _xmlData.pic)
{
var vo:PicVO=new PicVO();
vo.file = pic.file;
vo.caption = pic.caption;
_pictureList.push(vo);
}
var _currentPicture:int = 0;
}
private function onNext(e:MouseEvent):void
{
_iv.next();
}
private function onPrev(e:MouseEvent):void
{
_iv.previous();
}
}
i have a imageLoader.as:
public class ImageLoader extends EventDispatcher
{
private var _xmlData:XML = XML("xml/imageload.xml");
private var ld:Loader;
public function ImageLoader(file:String)
{
super();
ld = new Loader(); //creates new Loader instance
ld.load(new URLRequest(file)); //requests new file to load
ld.contentLoaderInfo.addEventListener(Event.COMPLE TE, onLoad); //listens for loader to finish loading (xml)
}
private function onLoad(e:Event):void //onLoad function
{
var evt:ImageEvent = new ImageEvent(ImageEvent.IMAGE_LOADED); //
evt.image = e.target.content; //image is the current content
dispatchEvent(evt); //dispatches ImageEvent to find out if image finished loading
ld.contentLoaderInfo.removeEventListener(Event.COM PLETE, onLoad); //stop listening
ld.unload(); //stop loading process
ld = null;
}
}
i have a imageViewer.as:
public class ImageViewer extends Sprite
{
private var _imageList:Array;
private var _path:String;
private var _currentImage:int;
private var _ld:ImageLoader;
public function ImageViewer()
{
super();
init(); //runs the init function
}
private function init():void //init functionx
{
_imageList=[]; //creates instance of the array
_currentImage=0; //creates starting point for current image or image 1(0) used for validation
}
private function loadImg():void //loadImg function
{
_ld=new ImageLoader(_path+_imageList[_currentImage]); //loads current image
_ld.addEventListener(ImageEvent.IMAGE_LOADED, onLoad); //listens for image to finish loading
}
private function onLoad(e:ImageEvent):void //onLoad function
{
if(this.numChildren>0) //if there is a picture on the stage
{
this.removeChildAt(0); //takes that image off stage
}
this.addChild(e.image); //adds new image
}
public function display():void //display function
{
loadImg(); //runs the loadImg function
}
public function next():void //next function - goes to next photo
{
_currentImage++; //moves to next image in the array
if (_currentImage==_imageList.length)
{
_currentImage=0; //validates new image
}
_ld=new ImageLoader(_path+_imageList[_currentImage]); //loads image
_ld.addEventListener(ImageEvent.IMAGE_LOADED, onLoad); //listens for image to load
}
public function previous():void //goes to previous image
{
_currentImage--;
if (_currentImage<0)
{
_currentImage=_imageList.length-1; //validates image and moves back one
}
_ld=new ImageLoader(_path+_imageList[_currentImage]);
_ld.addEventListener(ImageEvent.IMAGE_LOADED, onLoad);
}
public function set path(value:String):void
{
_path=value; //setting the path to its variable(value) - file path
}
public function set imageList(value:Array):void
{
_imageList=value; //setting the array to its variables(values)
}
an imageEvent.as:
public class ImageEvent extends Event
{
public static const IMAGE_LOADED:String = "image_loaded";
public var image:Bitmap;
public function ImageEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
public override function clone():Event
{
return new ImageEvent(type, bubbles, cancelable);
}
}
a picVO (value object):
public class PicVO
{
public var file:String;
public var caption:String;
public function PicVO()
{
}
}
my xml:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<images>
<pic>
<file>dogs1.jpg</file>
<caption>Scrappy and Akiva snuggled up</caption>
</pic>
<pic>
<file>dogs2.jpg</file>
<caption>Scrappy being a cutie pie!</caption>
</pic>
<pic>
<file>dogs3.jpg</file>
<caption>Bella and Scrappy playing</caption>
</pic>
</images>
Can anyone help me?
Many thanks in advance!
AdChoices