Skip to main content
A
Anonymous
April 25, 2011
Answered

Changing images

  • April 25, 2011
  • 1 reply
  • 1001 views

Hey.  I have an xml which basically has a structure like so

<image title="Mike from Camden" src="images/5.jpg"/>

In as3, I load in the xml and then handle it by doing

private function handleXML(e:Event):void
{ 
xml = new XML(e.target.data);
     for (var i:int = 0; i < xml.children().length(); i++)
     {
          var loader:Loader = new Loader();
          loader.load(new URLRequest(String(xml.children().@src)));
          images.push(loader);
          imagesTitle.push(xml.children().@title);
          loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
     }
     }

I then basically create a container and display each image within this container, and display the text where appropiate.  If an image is clicked, it zooms using

tween = new Tween(e.target.parent,"scaleX",Strong.easeOut,e.target.parent.scaleX,0.6,0.8,true);
tween = new Tween(e.target.parent,"scaleY",Strong.easeOut,e.target.parent.scaleY,0.6,0.8,true);

tween = new Tween(e.target.parent,"x",Strong.easeOut,e.target.parent.x,stage.stageWidth / 2 - e.target.parent.width + 15,0.8,true);
tween = new Tween(e.target.parent,"y",Strong.easeOut,e.target.parent.y,stage.stageHeight / 2 - e.target.parent.height + 15,0.8,true);

Now instead of zooming in on the original image and make it larger, I would now like to change the image.  I was thinking about adding another url into my xml which points to another image.  I can then load this in and handle it.  What would I then need to do in the tween to make it change to the new image?  I will add the class code below so you can see everything i do.

Thanks very much for the help

package classes
{
     import flash.display.Sprite;
     import flash.display.MovieClip;
     import flash.net.URLLoader;
     import flash.net.URLRequest;
     import flash.display.Loader;
     import flash.events.Event;
     import flash.filters.BitmapFilter;
     import flash.filters.DropShadowFilter;
     import flash.text.TextFormat;
     import flash.text.TextField;
     import flash.text.AntiAliasType;
     import flash.events.MouseEvent;
     import fl.transitions.Tween;
     import fl.transitions.easing.Strong;
     import fl.transitions.TweenEvent;

     public class Main extends MovieClip
     {
          var xml:XML;
          var images:Array = new Array();
          var imagesLoaded:int = 0;
          var imagesTitle:Array = new Array();
          var tween:Tween;
          var zoomed:Boolean = false;
          var canClick:Boolean = true;
          var lastX:int;
          var lastY:int;

          var textformat:TextFormat = new TextFormat();
          var formatFont:Avenir = new Avenir();

          var screen:Sprite = new Sprite();

          public function Main():void
          {
               textformat.color = 0xFFFFFF;
               textformat.font = formatFont.fontName;
               textformat.size = 17;

               screen.graphics.beginFill(0x111111, .75);
               screen.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
               screen.graphics.endFill();

               loadXML("xml/images.xml");
          }

          private function loadXML(file:String):void
          {
               var urlLoader:URLLoader = new URLLoader();
               var urlReq:URLRequest = new URLRequest(file);

               urlLoader.load(urlReq);
               urlLoader.addEventListener(Event.COMPLETE, handleXML);
          }

          private function handleXML(e:Event):void
          {
               xml = new XML(e.target.data);

               for (var i:int = 0; i < xml.children().length(); i++)
               {
                    var loader:Loader = new Loader();

                    loader.load(new URLRequest(String(xml.children().@src)));

                    images.push(loader);
                    imagesTitle.push(xml.children().@title);

                    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
               }
          }

          private function loaded(e:Event):void
          {
               imagesLoaded++;

               if (xml.children().length() == imagesLoaded)
               {
                    removeChild(preloader);
                    prepareImages();
               }
          }

          private function prepareImages():void
          {
               for (var i:int = 0; i < images.length; i++)
               {
                    var container:Sprite = new Sprite();
                    var frame:Sprite = new Sprite();
                    var infoArea:Sprite = new Sprite();
                    var infoField:TextField = new TextField();

                    frame.graphics.beginFill(0xFFFFFF);
                    frame.graphics.drawRect(-20, -20, images.width + 40, images.height + 80);
                    frame.graphics.endFill();

                    /* Info Area  */

                    infoArea.graphics.beginFill(0x111111, 0.75);
                    infoArea.graphics.drawRect(0, 0, images.width, 60);
                    infoArea.graphics.endFill();
                    infoArea.y = images.height - 60;

                    infoField.defaultTextFormat = textformat;
                    infoField.embedFonts = true;
                    infoField.antiAliasType = AntiAliasType.ADVANCED;
                    infoField.width = images.width - 5;
                    infoField.height = 20;

                    infoField.text = imagesTitle;

                    // Resize

                    container.scaleX = 0.3;
                    container.scaleY = 0.3;
                    
                    // Position

                    container.x = stage.stageWidth / 3 + Math.floor(Math.random() * (stage.stageWidth / 4));
                    container.y = stage.stageHeight / 5 + Math.floor(Math.random() * (stage.stageHeight / 5));

                    /* Filter */

                    var shadowFilter:BitmapFilter = new DropShadowFilter(3,90,0x252525,1,2,2,1,15);
                    var filterArray:Array = [shadowFilter];

                    container.filters = filterArray;
                    
                    infoArea.addChild(infoField);

                    container.addChild(frame);
                    container.addChild(images);

                    infoArea.visible = false;
                    container.addChild(infoArea);

                    container.getChildAt(1).addEventListener(MouseEvent.MOUSE_UP, zoomHandler);
                    container.getChildAt(0).addEventListener(MouseEvent.MOUSE_DOWN, dragImage);
                    container.getChildAt(0).addEventListener(MouseEvent.MOUSE_UP, stopDragImage);

                    addChild(container);
               }
          }

          private function dragImage(e:MouseEvent):void
          {
               e.target.parent.startDrag();
          }

          private function stopDragImage(e:MouseEvent):void
          {
               e.target.parent.stopDrag();
          }

          private function zoomHandler(e:MouseEvent):void
          {
               if (! zoomed && canClick)
               {
                    /* Avoid unwanted clicks */

                    canClick = false;
                    addChild(screen);
                    /* Cant drag when zoomed or zooming */

                    e.target.parent.getChildAt(0).removeEventListener(MouseEvent.MOUSE_DOWN, dragImage);

                    /* Get next highest depth */

                    setChildIndex(e.target.parent as Sprite, (numChildren - 1));

                    /* Get position */

                    lastX = e.target.parent.x;
                    lastY = e.target.parent.y;

                    tween = new Tween(e.target.parent,"scaleX",Strong.easeOut,e.target.parent.scaleX,0.6,0.8,true);
                    tween = new Tween(e.target.parent,"scaleY",Strong.easeOut,e.target.parent.scaleY,0.6,0.8,true);

                    tween = new Tween(e.target.parent,"x",Strong.easeOut,e.target.parent.x,stage.stageWidth / 2 - e.target.parent.width + 15,0.8,true);
                    tween = new Tween(e.target.parent,"y",Strong.easeOut,e.target.parent.y,stage.stageHeight / 2 - e.target.parent.height + 15,0.8,true);

                    tween.addEventListener(TweenEvent.MOTION_FINISH, zoomInFinished);
               }
               else if (zoomed && canClick)
               {
                    e.target.parent.getChildAt(2).visible = false;

                    tween = new Tween(e.target.parent,"scaleX",Strong.easeOut,e.target.parent.scaleX,0.3,0.3,true);
                    tween = new Tween(e.target.parent,"scaleY",Strong.easeOut,e.target.parent.scaleY,0.3,0.3,true);

                    tween = new Tween(e.target.parent,"x",Strong.easeOut,e.target.parent.x,lastX,0.3,true);
                    tween = new Tween(e.target.parent,"y",Strong.easeOut,e.target.parent.y,lastY,0.3,true);

                    tween.addEventListener(TweenEvent.MOTION_FINISH, zoomOutFinished);
               }
          }

          private function zoomInFinished(e:TweenEvent):void
          {
               zoomed = true;
               canClick = true;
               tween.obj.getChildAt(2).visible = true;
          }

          private function zoomOutFinished(e:TweenEvent):void
          {
               zoomed = false;
               removeChild(screen);

               tween.obj.getChildAt(0).addEventListener(MouseEvent.MOUSE_DOWN, dragImage);
          }
     }
}
This topic has been closed for replies.
Correct answer Kenneth Kawamoto

Once I get this done, I will split it in a seperate class as you suggest.  I come from a java background anyways, so everything is OO.  The difficulty I am having is associating image 1 with its appropiate image 2.  So, the first image is added here

container.addChild(images);

In order to get the correct image 2 with the correct image one, I would image I need to do it in the same line, but not sure how.  I am trying to do something like

container.addChild(images, images2.alpha=0);

I am thinking something on these lines will work, as that is the only way I can get both array elements to always be the same number, hence resulting in the correct pair of images.  Any other advise on how i can do this?

cheers


addChild() only takes one DisplayObject as argument so you'd need to do something like:

container.addChild(images);
container.addChild(images2);
images2.alpha = 0;

1 reply

Kenneth Kawamoto
Community Expert
Kenneth KawamotoCommunity Expert
Community Expert
April 26, 2011

You can have an image on top of another image and tween the alpha to reveal.

A
Anonymous
April 26, 2011

kool.  So to my xml, I have added another tag src2.  I dont know if this is alright to do, as I dont know if src is a keyword or what. So it looks like

<image src="images/1.jpg" title="John from Barnet" src2="images/2.jpg"/>

Now, in my as3 I will create a new image array.  The problem i have now is getting one element of the xml into the new array.  This is the method.

private function handleXML(e:Event):void
          {
               xml = new XML(e.target.data);

               for (var i:int = 0; i < xml.children().length(); i++)
               {
                    var loader:Loader = new Loader();

                    loader.load(new URLRequest(String(xml.children().@src)));
                    loader.load(new URLRequest(String(xml.children().@src2)));

                    images.push(loader);
                    images2.push(loader);
                    imagesTitle.push(xml.children().@title);

                    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
               }
          }

From the looks of it, that will load everything into the array.  So how can i take what is from src2, and load it into images2?

cheers

Kenneth Kawamoto
Community Expert
Kenneth KawamotoCommunity Expert
Community Expert
April 26, 2011

You can use anything for attribute name, even reserved words. (However, attributes with reserved words cannot be accessed with "@" - you have to use attribute().) Your "src"/"src2" is absolutely fine.

You need to have two Loaders since a Loder can only load one image at a time.

(I'd create separate Class for your image containers - but this is something else... )

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices