Photo Viewer tutorial in Flash CS3 using Actionscript 3 part 3
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”
Leave a Reply



.jpg)

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