Simple Photo Viewer [part2]:Load xml and jpg with LoaderMax , XMLLoader,ImageLoader

[Demo]

LoaderMax, XMLLoader,ImageLoader are pretty awesome class that can save you a lot of time.The part2 tutorial we are going to make a Simple Photo Viewer with those classes.You can download the latest version of the classes here.

Step 1: Save as New File
Open Main1.fla save as "Main2.fla".

Step 2: Nav_mc
Rename the layer called "nav_mc".Drag 8 btn_mc instances on the stage from the library panel.Resize them 50% in the transform panel.Make it a movieclip symbol and call it "nav_mc".Set a Instance name "nav_mc" and x:400,y:360 in the Properties panel.

Step 3: Description_txt and Photo_mc Layers
Create two more layers. Name them: "description_txt" and "photo_mc".

Step 4: Description_txt
Create a dynamic text.Select the dynamic text in the description_txt layer.Set a Instance name "description_txt" and x:25,y:280 in the Properties panel.

Step 5: Photo_mc
Create a gray(#333333) primitive rectangle 750×250 px and with no stroke. Make it a movieclip symbol and call it "photo_mc".Set a Instance name "photo_mc" and x:25,y:25 in the Properties panel.

Step 6: Get Some Images
Crop 8 images and save them in the "pictures" folder.
Size:750 x 250px
Name:photo01.jpg,photo02.jpg,photo03.jpg,photo04.jpg,photo05.jpg,photo06.jpg,photo07.jpg,photo08.jpg

Step 7: XML
XML file will be loaded by XMLLoader; this file will contain all information about images such as URL of the image, and description.
Open your favorite XML editor and add the following lines:

    
        Light tour life
        images/photo01.jpg
    
    
        Dalongdong Baoan Temple
        images/photo02.jpg
    
    
        Country roads
        images/photo03.jpg
    
    
        Lakeside
        images/photo04.jpg
    
    
        Evening
        images/photo05.jpg
    
    
        TAIPEI INTERNATIONAL FLORA EXPOSITION
        images/photo06.jpg
    
    
        Flowers in the park
        images/photo07.jpg
    
    
        A tint of green
        images/photo08.jpg
    

Save and name it "imagelist.xml" with Main2.fla.


Step 8: Document Class
Inside Flash IDE set Main2.as as your Document class.

Step 9: ActionScript
Create an ActionScript file.

Step 10: Save with Main2.fla
Name it "Main2.as", save it in the same folder as your Main2.fla.

Step 11: Main2.as
Main2.as structure will be like this...

package {

    public class Main2 extends Sprite {
 
        public function Main2()  {

        }

    } 

}

Step 12: Import Necessary Classes
Start by importing these Classes inside your package:

package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.TextField;
import com.greensock.loading.LoaderMax;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.XMLLoader;
import com.greensock.loading.ImageLoader;
import com.greensock.loading.data.ImageLoaderVars;
import com.greensock.loading.display.ContentDisplay;
import com.greensock.TweenMax;

Step 13: Variables
Inside your class define these variables:

public class Main2 extends Sprite {
        //Declare instance on the stage
        public var photo_mc:MovieClip;
        public var description_txt:TextField;
        public var nav_mc:MovieClip;

        //new XML instance
        private var xml:XML = new XML();

Step 14: Constructor
The constructor is a function that runs when an object is created from a class.

public function Main2() {
    //load xml
    loadxml();
}

Step 15: loadxml()

private function loadxml():void {
    //new XMLLoader instance and load imagelist.xml,when it complete execute completeHandler().
    var xmlldr:XMLLoader = new XMLLoader("imagelist.xml", {onComplete: completeHandler, estimatedBytes: 50000});
    xmlldr.load();
}

Step 16: completeHandler()

private function completeHandler(e:LoaderEvent):void {
    xml = e.target.content;
    //load the first description
    showDescription(1);
    //load the first photo
    showPhoto(1);
    //associates an onClick method to the button  
    nav_mc.addEventListener(MouseEvent.CLICK, onClick);
}

Step 17: onClick()
Let's now handle the CLICK MouseEvent:

private function onClick(e:MouseEvent) {
    //get BtnMC instance you click
    var _mc:BtnMC = e.target.parent as BtnMC;
    //get currentNum of BtnMC instance you click
    var _currentNum:int = _mc.currentNum;
    //display the current photo description
    showDescription(_currentNum);
    //according to _currentNum show the photo
    showPhoto(_currentNum);
}

Step 18: showDescription()

private function showDescription(_int:int):void {
    //show photo description in the dynamic text
    description_txt.text = xml.picture[_int - 1].description;
}

Step 19: showPhoto()
When you click button load image,it will create a new ImageLoader instance.
If you add this line below in the showPhoto()

trace(photo_mc.numChildren);

You will find that "photo_mc.numChildren" is continuously increasing,it is also continuously occupy memory too.So we need to remove previous photo to free memory.(use removeChildAt() at first)

private function showPhoto(_int:int):void {
    //first time it will remove the gray rectangle,after that when new photo load,the previous photo will be removed to free memory.
    photo_mc.removeChildAt(0);
    //get current file path
    var fileSrc:String = xml.picture[_int - 1].src;
    //new ImageLoader instance,set width and height then load into photo_mc
    var imgldr:ImageLoader = new ImageLoader(fileSrc, new ImageLoaderVars().width(750).height(250).container(photo_mc).smoothing(true));
    //when image is loaded complete,execute imageLoaded method
    imgldr.addEventListener(LoaderEvent.COMPLETE, imageLoaded);
    //ImageLoader start to load image
    imgldr.load();
}

Step 20: imageLoaded()

private function imageLoaded(e:LoaderEvent):void {
    //get currentTarget
    var _photo:ContentDisplay = LoaderMax.getContent(e.currentTarget.name);
    //add exposure effect from 2 to 1,when image loaded
    TweenMax.to(_photo, 0, {colorTransform: {exposure: 2}});
    TweenMax.to(_photo, 1, {colorTransform: {exposure: 1}});
}

Step 21: The Complete Code

package {
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.text.TextField;
    import com.greensock.loading.LoaderMax;
    import com.greensock.events.LoaderEvent;
    import com.greensock.loading.XMLLoader;
    import com.greensock.loading.ImageLoader;
    import com.greensock.loading.data.ImageLoaderVars;
    import com.greensock.loading.display.ContentDisplay;
    import com.greensock.TweenMax;

    public class Main2 extends Sprite {
        public var photo_mc:MovieClip;
        public var description_txt:TextField;
        public var nav_mc:MovieClip;
        private var xml:XML = new XML();
  
        public function Main2() {
            loadxml();
        }

        private function loadxml():void {
            var xmlldr:XMLLoader = new XMLLoader("imagelist.xml", {onComplete: completeHandler, estimatedBytes: 50000});
            xmlldr.load();
        }

        private function completeHandler(e:LoaderEvent):void {
            xml = e.target.content;
            showDescription(1);
            showPhoto(1);
            nav_mc.addEventListener(MouseEvent.CLICK, onClick);
        }

        private function onClick(e:MouseEvent) {
            var _mc:BtnMC = e.target.parent as BtnMC;
            var _currentNum:int = _mc.currentNum;
            showDescription(_currentNum);
            showPhoto(_currentNum);
        }

        private function showDescription(_int:int):void {
            description_txt.text = xml.picture[_int - 1].description;
        }
  
        private function showPhoto(_int:int):void {
            photo_mc.removeChildAt(0);
            var fileSrc:String = xml.picture[_int - 1].src;
            var imgldr:ImageLoader = new ImageLoader(fileSrc, new ImageLoaderVars().width(750).height(250).container(photo_mc).smoothing(true));
            imgldr.addEventListener(LoaderEvent.COMPLETE, imageLoaded);
            imgldr.load();
        }

        private function imageLoaded(e:LoaderEvent):void {
            var _photo:ContentDisplay = LoaderMax.getContent(e.currentTarget.name);
            TweenMax.to(_photo, 0, {colorTransform: {exposure: 2}});
            TweenMax.to(_photo, 1, {colorTransform: {exposure: 1}});
        }

    }
}

Conclusion
Thanks for reading!Now we finish the part2 tutorial.Please feel free to drop a note for any comments, concerns, or suggestions.Here is cs4 and cs3 versions up on the zip file.

CS3 version:
Simple_Photo_Viewer_part2_cs3.rar

CS4 version:
Simple_Photo_Viewer_part2_cs4.rar




.