Photo Viewer tutorial in Flash CS3 using Actionscript 3 part 3

Your Ad Here

By now you have set up the stage in the .fla and the Document class (main class) in the previous part 2 of these tutorials. Now we will look at the other classes used to make up this application. In this part of the series you will learn how classes are embedded and then called using class paths eg = desktop.computer.programmefiles.flash is a class path. Its basically how actionscript reads where a file is located within a lot of folders as like a address. if you look back at part 1 you will see the class paths for the classes we are going to learn about now.

 

  

 

 

 Class explanations continuously being updated

Firstly the BevelButton.as

package com.learning.as3et.PhotoViewer.UI.Assets{

    import flash.display.MovieClip

    import flash.display.Shape

    import flash.display.SimpleButton

    import flash.events.MouseEvent

    import flash.text.TextField

    import flash.filters.DropShadowFilter

   

    public class BevelButton extends MovieClip{

        var buttonTxt:TextField = new TextField();

       

       

        public function BevelButton (){

       

        var    button:SimpleButton = new SimpleButton();

        var up:Shape = new Shape()

        up.graphics.lineStyle(0, 0xFFFFFF, 1);

        up.graphics.beginFill (0×000000);

        up.graphics.drawRect (0, 0, 90, 30);

        up.graphics.endFill();

        button.upState = up;

        button.x = 5               

        button.y = -20

        buttonTxt.text = "Start / Stop";

        buttonTxt.x = button.x;

        buttonTxt.y = button.y;

        buttonTxt.height = 20;

        buttonTxt.backgroundColor = 0xffffff;

        buttonTxt.textColor = 0xffffff

        addChild(button);

        addChild(buttonTxt);

       

        var over:Shape = new Shape()

        over.graphics.lineStyle(0, 0xCCCCCC, 1);

        over.graphics.beginFill (0×000000);

        over.graphics.drawRect (0, 0, 100, 40);

        over.graphics.endFill();

        button.filters = [new DropShadowFilter(10,45,0×222222,1,10,10)]

        button.overState = over;

       

        var down:Shape = new Shape()

        down.graphics.lineStyle(0, 0xCCCCCC, 1);

        down.graphics.beginFill (0×000000);

        down.graphics.drawRect (0, 0, 110, 45);

        down.graphics.endFill();

        button.downState = down;

       

        button.hitTestState = up;

       

        button.doubleClickEnabled = true;

       

        button.addEventListener(MouseEvent.CLICK, onClick)

        button.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);

        button.addEventListener(MouseEvent.MOUSE_UP, mouseUp);

        button.addEventListener(MouseEvent.DOUBLE_CLICK, onDoubleClick);

        }

       

    private function onClick (event:MouseEvent):void{

        trace ("Click");

    }

    private function mouseDown(event:MouseEvent):void{

        trace ("mouse down");

    }

    private function mouseUp (event:MouseEvent):void{

        trace ("Mouse up");

    }

    private function onDoubleClick (event:MouseEvent):void{

        trace ("Double clicked");

    }

   

    }

}

Next the SlideShowViewer.as

package com.learning.as3et.PhotoViewer.UI{

   

    import flash.display.Sprite;

    import flash.display.Loader;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.utils.Timer;

    import flash.events.TimerEvent;

    import flash.geom.Matrix;

    import flash.geom.Rectangle;

    import flash.geom.Point;

    import flash.events.Event;

    import flash.net.URLRequest;

   

    public class slideShowViewer extends Sprite {

        private var _loader:Loader;

        private var _bitmap:Bitmap;

        private var _bitmapData:BitmapData;

        private var _dissolveTimer:Timer;

        private var _randomValue:uint;

        private var _temporaryBitamapData:BitmapData;

       

        public function slideShowViewer() {

            _loader = new Loader();

            _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadMain);

            _bitmapData = new BitmapData(200, 200, true, 0xffffff);

            _bitmap = new Bitmap(_bitmapData);

            addChild(_bitmap);

            _dissolveTimer = new Timer(10, 30);

            _dissolveTimer.addEventListener(TimerEvent.TIMER, onDissolveTimer);

        }

        public function loadNext(imageUrl:String):void {

            var request:URLRequest = new URLRequest(imageUrl);

            _loader.load(request);

        }

        private function onLoadMain(event:Event):void{

            var scaleFactor:Number = 200 / Math.max(_loader.width, _loader.height);

            _temporaryBitamapData = new BitmapData(200, 200, true, 0xffffff);

            var offSetX:Number = (200 - _loader.width * scaleFactor) /2;

            var offSetY:Number = (200 - _loader.height * scaleFactor) /2;

            _temporaryBitamapData.draw(_loader, new Matrix(scaleFactor, 0, 0, scaleFactor, offSetX, offSetY));

            _randomValue = 0;

            _dissolveTimer.reset();

            _dissolveTimer.start();



        }

        private function onDissolveTimer(event:TimerEvent):void {

            _randomValue = _bitmapData.pixelDissolve(_temporaryBitamapData, new Rectangle(0,0,200,200), new Point(0,0), _randomValue, 200*200/20);

        }

    }

}

And finally the Thumbnail.as

package com.learning.as3et.PhotoViewer.UI{

    import flash.display.Sprite

    import flash.display.Loader

    import flash.net.URLRequest

    import flash.events.MouseEvent

    import flash.events.Event

    import flash.filters.DropShadowFilter

   

    public class Thumbnail extends Sprite{

        private var _loader:Loader

        private var _width:Number

        private var _height:Number

        private var _mainAssetURL:String

       

        public function get mainAssetURL():String {

            return _mainAssetURL;

           

        }

        public function Thumbnail (url:String, mainURL:String, defaultWidth:Number, defaultHeight:Number){

            _width = defaultWidth;

            _height = defaultHeight;

            _mainAssetURL = mainURL;

            _loader = new Loader();

            var request:URLRequest = new URLRequest(url);

            _loader.contentLoaderInfo.addEventListener (Event.COMPLETE , goToDefaultState);

            _loader.load(request);

            addChild(_loader)

            _loader.addEventListener(MouseEvent.MOUSE_OVER, goToOverState);

            _loader.addEventListener(MouseEvent.MOUSE_OUT, goToDefaultState)

           

        }

   

        private function goToDefaultState (event:Event):void{

            _loader.scaleX = .4;

            _loader.scaleY = .4;

            _loader.filters = [new DropShadowFilter()]

           

            center();

        }

        private function goToOverState (event:Event):void{

           

            _loader.scaleX = .6;

            _loader.scaleY = .6;

            _loader.filters = [new DropShadowFilter(10,45,0×222222,1,10,10)]

            center();

        }

        private function center (){

            _loader.x = (_width - _loader.width) / 4;

            _loader.y = (_height - _loader.height) / 4;

        }

    }

}

And you should have a photoviewer application that looks like so :

 Continue on to the next sections 1 2 3

 

If you enjoyed this post, make sure you subscribe to my RSS feed

!

Comments

One Response to “Photo Viewer tutorial in Flash CS3 using Actionscript 3 part 3”

  1. willie Morris on October 2nd, 2007 2:36 pm

    I added all the classes but I am still getting some errors…

Leave a Reply




  • Sites We Like


  • UK Life Insurance Quotes
    Life Quotes
    Illness Insurance
    Contents Insurance
    Web Site
    Your Ad Here
    Secured Loans

    Compare secured loans to find the perfect deal for you!

    www.accepted.co.uk

    Matched.co.uk