ActionScript3.0: how to make an “enhanced picture-module” in Flash

June 16, 2008 at 6:23 am Leave a comment

by loading two pictures on top of each other, and only letting the one on top be visible when mouseOvered, it easy to make an “enhanced picture-module” in Flash.
such a module could look like this:
http://campjohn.dk/AS3/Invita/enhancedPicture/exampla.html

(the pictures in this example is made by my colleague Rune, who is a true wizard with Paint 😀 )

the example above could be coded like this in ActionScript3.0:

//stop the timeline
stop();

//import the classes you need
import caurina.transitions.Tweener;

//create the Sprite to hold the picture to be shown on mouseOver
//a Sprite is like a MovieClip but without the timeline
//we don’t need any timeline in this example, so a Sprite is fine
var myForegroundSprite:Sprite = new Sprite();

//create Strings to hold the two links to the pictures to be shown
var myBackgroundPictureURL:String = “infoPicRED.jpg”;
var myForegroundPictureURL:String = “infoPicRED_shift.jpg”;

//start the function createBackground
createBackground();

//the function createBackground
function createBackground():void {
//create a Loader, to actually load the picture into Flash
var myBackgroundLoader:Loader = new Loader();

//load the picture
var url:String = myBackgroundPictureURL;
var urlReq:URLRequest = new URLRequest(url);
myBackgroundLoader.load(urlReq);

//make the Loader visible in Flash by placing it on Stage
addChild(myBackgroundLoader);

//start the functionen createForeground
createForeground();
}

//the function createForeground
function createForeground():void {
//place the myForegroundSprite on Stage
addChild(myForegroundSprite);

//
var myForegroundLoader:Loader = new Loader();

//
var url:String = myForegroundPictureURL;
var urlReq:URLRequest = new URLRequest(url);
myForegroundLoader.load(urlReq);

//set the opacity of the myForegroundSprite to 0, so it still is the myBackgroundLoader,that is visible, even though the myForegroundSprite is placed on top of it
myForegroundSprite.alpha = 0;

//put the myForegroundLoader into the myForegroundSprite and place it on Stage.
//the reason why the myForegroundLoaderen is not placed directly on Stage, is that it is not possible to interact with Loaders
//Sprites are interacable, that’s why we nest it
myForegroundSprite.addChild(myForegroundLoader);

//start the function createInteraction
createInteraction();
}

function createInteraction():void {
//if the mouse is over the Sprite, start the function myMouseOver
myForegroundSprite.addEventListener(MouseEvent.MOUSE_OVER, myMouseOver);

//if the mouse is leaving the Sprite, start the function myMouseOut
myForegroundSprite.addEventListener(MouseEvent.MOUSE_OUT, myMouseOut);

//show the hand icon instead of the arrow icon when the mouse interacts with the myForegroundSprite
myForegroundSprite.buttonMode = true;
}

function myMouseOver(e:Event):void {
//let the myForegroundSprite fade in in 0.7 seconds
Tweener.addTween(myForegroundSprite, {alpha:1, time:0.7, transition:”linear”});
}
function myMouseOut(e:Event):void {
//let the myForegroundSprite fade out in 0.7 seconds
Tweener.addTween(myForegroundSprite, {alpha:0, time:0.7, transition:”linear”});
}

and here’s the code without all of the comments:
stop();

import caurina.transitions.Tweener;

var myForegroundSprite:Sprite = new Sprite();

var myBackgroundPictureURL:String = “infoPicRED.jpg”;
var myForegroundPictureURL:String = “infoPicRED_shift.jpg”;

createBackground();

function createBackground():void {
var myBackgroundLoader:Loader = new Loader();
var url:String = myBackgroundPictureURL;
var urlReq:URLRequest = new URLRequest(url);
myBackgroundLoader.load(urlReq);
addChild(myBackgroundLoader);
createForeground();
}

function createForeground():void {
addChild(myForegroundSprite);
var myForegroundLoader:Loader = new Loader();
var url:String = myForegroundPictureURL;
var urlReq:URLRequest = new URLRequest(url);
myForegroundLoader.load(urlReq);
myForegroundSprite.alpha = 0;
myForegroundSprite.addChild(myForegroundLoader);
createInteraction();
}

function createInteraction():void {
myForegroundSprite.addEventListener(MouseEvent.MOUSE_OVER, myMouseOver);
myForegroundSprite.addEventListener(MouseEvent.MOUSE_OUT, myMouseOut);
myForegroundSprite.buttonMode = true;
}

function myMouseOver(e:Event):void {
Tweener.addTween(myForegroundSprite, {alpha:1, time:0.7, transition:”linear”});
}
function myMouseOut(e:Event):void {
Tweener.addTween(myForegroundSprite, {alpha:0, time:0.7, transition:”linear”});
}

Advertisements

Entry filed under: actionscript, arbejde, eget, Tweener.

site that adjust to the size of the browserwindow celebrating 10000 views

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


June 2008
M T W T F S S
« Apr   Jul »
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Top Posts

Blog Stats

  • 17,888 hits

%d bloggers like this: