Photo Viewer application tutorial in Flash CS3 using Actionscript 3 Part 2

Your Ad Here

Here we will create the main class used in the the photo viewer application, if you have not already read through the first tutorial by scrolling to the bottom of this post and clicking on the number 1. start off by opening a new .as file and naming it photoViewer.as then This class must be set as the document class of your .fla file.

//open up the package and add the relevant import statements
package {

    import flash.display.MovieClip;
    //these two import statements are of classes that we

    //will create later, they are using class paths

    //to load from within the deep rooted folders they are in.
    import com.learning.as3et.PhotoViewer.UI.Thumbnail;

    import com.learning.as3et.PhotoViewer.UI.slideShowViewer;

    import flash.display.Sprite;

    import flash.utils.Timer

    import flash.events.TimerEvent

    import flash.display.StageAlign

    import flash.display.StageScaleMode

    import flash.events.MouseEvent

    import com.learning.as3et.PhotoViewer.UI.Assets.BevelButton;
    //here i have imported the whole package of flash.net by using a .*
    import flash.net.*

    // set up the class to use MovieClip classes functionality
    public class photoViewer extends MovieClip {
    //here i set all the variables we will be needing and

    //the functionality each variable has.
        private var _thumbCont:Sprite

        private var _viewer:slideShowViewer

        private var _slideShowButton:BevelButton

        private var _slideShowTimer:Timer

        private var _slideIndex:uint

        private var _mainImageUrls:Array
//here i setup the constructor function and then load in the images into the

//_viewer which uses the slideShowViewer class

//after setting the stage
        public function photoViewer() {

            stage.align = StageAlign.TOP_LEFT;

            stage.scaleMode = StageScaleMode.NO_SCALE;



            _mainImageUrls = ["Images/Vacation1.jpg", "Images/Vacation2.jpg", "Images/Vacation3.jpg",

                            "Images/Vacation4.jpg", "Images/Vacation5.jpg", "Images/Vacation6.jpg",

                            "Images/Vacation7.jpg", "Images/Vacation8.jpg", "Images/Vacation9.jpg",

                            "Images/Vacation10.jpg", "Images/Vacation11.jpg", "Images/Vacation12.jpg"]

            _viewer = new slideShowViewer();

            _viewer.x = 140;

            _viewer.y = 400;

            addChild (_viewer);
            //here i added the slide show button that uses the BevelButton

            //class that we will also set up later
            _slideShowButton = new BevelButton();

            _slideShowButton.addEventListener(MouseEvent.CLICK, onSlideShow);

            _slideShowButton.y = 400;

            addChild(_slideShowButton);
            //here i set the timer to go off every 3 seconds
            _slideShowTimer = new Timer(3000);

            _slideShowTimer.addEventListener(TimerEvent.TIMER, onSlideShowTimer);

            loadThumbnails();



        }
        // then i set how the thumbnails will load the main images

        //and thumbnails will load in sequence or when requested
    private function loadThumbnails ():void{

        _thumbCont = new Sprite;

        addChild(_thumbCont);

        var thumbnail:Thumbnail;

        var thumbnailX:Number = 0

        var thumbnailY:Number = 0

        var i:uint;

        for(i = 1; i <= 12; i++) {

            thumbnail = new Thumbnail("Images/ThumbnailVacation" + i + ".jpg" , "Images/Vacation"+ i + ".jpg",

                                                    125, 125 );

            thumbnail.addEventListener(MouseEvent.CLICK, onClick)

            _thumbCont.addChild(thumbnail);

            thumbnail.x = thumbnailX;

            thumbnail.y = thumbnailY;

            thumbnailX += 125;

            if(i % 3 == 0){

                thumbnailX = 0;

                thumbnailY += 70;



            }

        }
    }// this function starts the timer
        private function onSlideShow (event:MouseEvent):void {

            if(!_slideShowTimer.running){

                _slideIndex = 0;

                _slideShowTimer.start();



            }

        else if(_slideShowTimer.running){

            _slideShowTimer.stop();

        }

        }
    //this function makes sure the timer loops through the images from 1 to 12
        private function onSlideShowTimer (event:TimerEvent):void{

            _viewer.loadNext(_mainImageUrls[_slideIndex])

            _slideIndex++;

            if(_slideIndex > 11) {

                _slideIndex = 0;



            }



        }
        //this ensure that when clicked the thumbnails load the main images into the _viewer
        private function onClick (event:MouseEvent):void {

            var mainUrl:String = Thumbnail(event.currentTarget).mainAssetURL

            _viewer.loadNext(mainUrl);



        }

    }

}

and that is the end of the first class read on to see how the other classes were made