Tweener at Helpful stuff on Flash, ActionScript, After Effects etc

through the last year, I’ve been asked to do 3 different versions of proportionally correctly scalable images that would fill the entire browser. even if the browser window would later be scaled. so here’s the three different versions:

the static version of a fullscreen backgroundpicture in Flash:
fill 100%, rescale if size of browserwindow changes.
check out the static version of a fullscreen backgroundpicture in Flash here

the animated version of a fullscreen backgroundpicture in Flash:
fill 100%, animate to new rescaled size and position if size of browserwindow changes.
check out the animated version of a fullscreen backgroundpicture in Flash here

the version of several fullscreen backgroundpictures in Flash:
fill 100%, rescale if size of browserwindow changes, repeatedly change the backgroundpicture.
check out the version of several fullscreen backgroundpictures in Flash here

a screenshot of the static fullscreen backgroundpicture in Flash

the ActionScript for all 3 versions;
static:

//imports

import caurina.transitions.Tweener;
import NewCustomContextMenu;
//import flash.external.ExternalInterface;

//vars
//----------------------------------------------------------------------------------------------------
var menuData:Array = [];
menuData.push( {caption:"© 2010 Felix Sanchez", url:"http://www.campjohn.dk/wp"} );
var ncm:NewCustomContextMenu = new NewCustomContextMenu(menuData, this);

var _stageWidth:Number; //width of the stage
var _stageHeight:Number; //height of the stage

var _BGloader:Loader; //loader to hold my picture
var _tBB:BlackBar;
var _tWB:WhiteBar;

var ratio:Number; //to make sure the picture and video is scaled correctly

//LOCAL
var _theFeed:String = "image_bg.jpg";

//ONLINE
//var _theFeed:String = String(root.loaderInfo.parameters.whatFeed);
var _white:String = String(root.loaderInfo.parameters.white);

/*
var theParams:String = "_theFeed = "+_theFeed+" & _white = "+_white;
ExternalInterface.call("alert", theParams);
*/

//----------------------------------------------------------------------------------------------------

//init
stageInit();

function stageInit():void {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.quality = StageQuality.BEST;
stage.frameRate = 30;
stage.showDefaultContextMenu = true;
stage.addEventListener(Event.RESIZE, onResize);
setUpForPicture(); //
}

//----------------------------------------------------------------------------------------------------

//PICTURE
//this all has to do with the picture
//----------------------------------------------------------------------------------------------------
function setUpForPicture():void {
_BGloader = new Loader();
_BGloader.alpha = 0;
addChild(_BGloader);
_BGloader.load(new URLRequest(_theFeed));
_BGloader.contentLoaderInfo.addEventListener(Event.INIT, onResize);
_BGloader.contentLoaderInfo.addEventListener(Event.COMPLETE, pictureFullyLoaded);
}

function pictureFullyLoaded(e:Event){
Tweener.addTween(_BGloader, {alpha:1, time:0.4});
myResize(stage.stageWidth, stage.stageHeight);
}

//----------------------------------------------------------------------------------------------------

//this handles the resizing of the video or the picture
function onResize(event:Event):void {
myResize(stage.stageWidth, stage.stageHeight);
}

//this handles the resizing of the video or the picture
function myResize(stageWidth:Number, stageHeight:Number):void {
_stageWidth = stageWidth;
_stageHeight = stageHeight;

ratio = _BGloader.width / _BGloader.height;
if ((_stageWidth / ratio) >= _stageHeight) {
_BGloader.width = _stageWidth;
_BGloader.height = (_stageWidth / ratio);
}
else {
_BGloader.height = _stageHeight;
_BGloader.width = (_stageHeight * ratio);
}
}

animated:

//imports

import caurina.transitions.Tweener;
import NewCustomContextMenu;
//import flash.external.ExternalInterface;

//vars
//----------------------------------------------------------------------------------------------------
var menuData:Array = [];
menuData.push( {caption:"© 2010 Felix Sanchez", url:"http://www.campjohn.dk/wp"} );
var ncm:NewCustomContextMenu = new NewCustomContextMenu(menuData, this);

var _stageWidth:Number; //width of the stage
var _stageHeight:Number; //height of the stage

var _BGloader:Loader; //loader to load my picture
var _BGholder:Sprite; //sprite to hold my picture
var _tBB:BlackBar;

var ratio:Number; //to make sure the picture and video is scaled correctly

//LOCAL
var _theFeed:String = "flytbar.jpg";

//ONLINE
//var _theFeed:String = String(root.loaderInfo.parameters.whatFeed);

//----------------------------------------------------------------------------------------------------

//init
stageInit();

function stageInit():void {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.quality = StageQuality.BEST;
stage.frameRate = 30;
stage.showDefaultContextMenu = true;
stage.addEventListener(Event.RESIZE, onResize, false, 0, true);
setUpForPicture(); //
}

//----------------------------------------------------------------------------------------------------

//PICTURE
//this all has to do with the picture
//----------------------------------------------------------------------------------------------------
function setUpForPicture():void {
_BGloader = new Loader();
_BGloader.alpha = 0;
_BGloader.load(new URLRequest(_theFeed));
_BGloader.contentLoaderInfo.addEventListener(Event.COMPLETE, pictureFullyLoaded, false, 0, true);
}

function pictureFullyLoaded(e:Event){
var bitmap:Bitmap = Bitmap(e.target.content);
bitmap.smoothing = true;
_BGholder = new Sprite();
_BGholder.addChild(bitmap);
addChild(_BGholder);
//addBars();
Tweener.addTween(_BGholder, {alpha:1, time:0.4});
myResize(stage.stageWidth, stage.stageHeight);
}
//----------------------------------------------------------------------------------------------------

//this handles the resizing of the video or the picture
function onResize(event:Event):void {
myResize(stage.stageWidth, stage.stageHeight);
}

//this handles the resizing of the video or the picture
function myResize(stageWidth:Number, stageHeight:Number):void {
_stageWidth = stageWidth;
_stageHeight = stageHeight;

ratio = _BGholder.width / _BGholder.height;
if ((_stageWidth / ratio) >= _stageHeight) {
_BGholder.width = _stageWidth * 1.1;
_BGholder.height = (_stageWidth / ratio) * 1.1;
}
else {
_BGholder.height = _stageHeight * 1.1;
_BGholder.width = (_stageHeight * ratio) * 1.1;
}

var newX = Math.floor(-((_BGholder.width - _stageWidth) / 2));
var newY = Math.floor(-((_BGholder.height - _stageHeight) / 2));
Tweener.addTween(_BGholder, {x:newX, y:newY, time:7});
}

several:

//imports

import caurina.transitions.Tweener;
import NewCustomContextMenu;
import flash.external.ExternalInterface;

//vars
//----------------------------------------------------------------------------------------------------
var menuData:Array = [];
menuData.push( {caption:"© 2010 Felix Sanchez", url:"http://www.campjohn.dk/wp"} );
var ncm:NewCustomContextMenu = new NewCustomContextMenu(menuData, this);

var _stageWidth:Number; //width of the stage
var _stageHeight:Number; //height of the stage

var _BGloader:Loader; //loader to hold my picture
var _BGloader2:Loader; //loader to hold my picture
var _ratio:Number; //to make sure the picture and video is scaled correctly
var _picArray:Array;
var _number:Number = 0;
var _timer:Timer = new Timer(5000, 0);

//LOCAL
var _theFeed:String = "image_bg1.jpg,image_bg2.jpg,image_bg3.jpg";

//ONLINE
//var _theFeed:String = String(root.loaderInfo.parameters.whatFeed);

//----------------------------------------------------------------------------------------------------

//init
//addEventListener(Event.ADDED_TO_STAGE, stageInit, false, 0, true);
_timer.addEventListener(TimerEvent.TIMER, timerHandler);
stageInit(null);

//----------------------------------------------------------------------------------------------------
function stageInit(e:Event):void {
trace("function stageInit");
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.quality = StageQuality.BEST;
stage.frameRate = 30;
stage.showDefaultContextMenu = true;
stage.addEventListener(Event.RESIZE, onResize, false, 0, true);
createPictureArray();
}

//CREATE ARRAY OF PICTURES
//this all has to do with the picture
//----------------------------------------------------------------------------------------------------
function createPictureArray():void {
_picArray = _theFeed.split(",");
setUpForPicture();
}

//PICTURE
//this all has to do with the picture
//----------------------------------------------------------------------------------------------------
function setUpForPicture():void {
stage.removeEventListener(Event.RESIZE, onResize);
_BGloader = new Loader();
_BGloader.alpha = 0;
addChild(_BGloader);
_BGloader.load(new URLRequest(_picArray[_number]));
_BGloader.contentLoaderInfo.addEventListener(Event.COMPLETE, pictureFullyLoaded);
}

function pictureFullyLoaded(e:Event){
stage.addEventListener(Event.RESIZE, onResize, false, 0, true);
Tweener.addTween(_BGloader, {alpha:1, time:1.4});
_number++;
checkNumber();
myResize(stage.stageWidth, stage.stageHeight);
_timer.start();
}

function checkNumber():void {
if(_number == _picArray.length) {
_number = 0;
}
}

//----------------------------------------------------------------------------------------------------

//this handles the resizing of the video or the picture
function onResize(event:Event):void {
myResize(stage.stageWidth, stage.stageHeight);
}

//this handles the resizing of the video or the picture
function myResize(stageWidth:Number, stageHeight:Number):void {
_stageWidth = stageWidth;
_stageHeight = stageHeight;

_ratio = this.getChildAt(this.numChildren -1).width / this.getChildAt(this.numChildren -1).height;
if ((_stageWidth / _ratio) >= _stageHeight) {
this.getChildAt(this.numChildren -1).width = _stageWidth;
this.getChildAt(this.numChildren -1).height = (_stageWidth / _ratio);
} else {
this.getChildAt(this.numChildren -1).height = _stageHeight;
this.getChildAt(this.numChildren -1).width = (_stageHeight * _ratio);
}
}

//----------------------------------------------------------------------------------------------------
function timerHandler(e:TimerEvent):void {
_timer.stop();
setUpForPicture();
}

—

credits:
Rikke Madsen for the photos

about the logobanner:
for MCH Messecenter Herning I recently did a logobanner, that would show up to 5 different logos from a collection of several logos. the logobanner should randomly select 5 logos, slide them in, await a randomized amount of time, and then slide out again. before sliding in once again, a new logo should be selected, so that new logos would constantly be shown.
the logos should be fed to the logobanner using XML.

check out the logobanner made in ActionScript 3.0 here showcasing pictures of Porsche 911 Carrera 4/4S Cabriolet

Porsche 911 Carrera 4 Cabriolet

the ActionScript for the logobanner:

package {

import ArrayStuff;
import caurina.transitions.Tweener;
import com.gskinner.motion.GTween;
import fl.motion.easing.*;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import MonsterDebugger;

public class LogoContent extends Sprite {

private var _theXML:String;
private var _md:MonsterDebugger;
private var _loadedXML:XML;
private var _XMLLogoArray:Array = [];
private var _arrayStuff:ArrayStuff;
private var _yPlacement:Array = [0, 120, 240, 360, 480, 600];
private var _itemToStageNumber:Number = 0;
private var _tween:GTween;
private var _holder:Sprite;

public function LogoContent() {
//init();
}

public function init(someXML:String):void {
_theXML = someXML;
_md = new MonsterDebugger(this);
//trace("_theXML passed to the loaded flash = "+_theXML);

loadXML();
}

private function loadXML():void {
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest(_theXML);
loader.addEventListener(Event.COMPLETE, xmlLoaded, false, 0, true);
loader.addEventListener(IOErrorEvent.IO_ERROR, xmlError, false, 0, true);

loader.load(request);
}

private function xmlLoaded(e:Event):void {
_loadedXML = new XML(e.target.data);

traceStuff();
XMLcontentToArray();
}

private function xmlError(e:Event):void {
trace("error loading");
}

private function traceStuff():void {
//trace("_loadedXML = "+_loadedXML); //output: complete XML
//trace("_loadedXML.logo.length() = "+_loadedXML.logo.length()); //output: number of logos
//trace("_loadedXML.logo.thePicture[0] = "+_loadedXML.logo.thePicture[0]); //output: name of first logo
}

private function XMLcontentToArray():void {
var i:Number = 0;
while(i < _loadedXML.logo.length()){
_XMLLogoArray.push(_loadedXML.logo.thePicture[i]);
i++;
}
_arrayStuff = new ArrayStuff();
_arrayStuff.convertToLoaders(_XMLLogoArray);
_arrayStuff.addEventListener("loaderArrayReady", loaderArrayReady);
}

private function loaderArrayReady(e:Event):void {
_XMLLogoArray = e.currentTarget._loaderArray;
trace(_XMLLogoArray);
var i:Number = 0;
while(i < 6){
placeOnStage();
i++;
}
}

private function placeOnStage():void {
_holder = new Sprite();
_holder.name = "holder"+_itemToStageNumber;
addChild(_holder);

//trace("_XMLLogoArray.length = "+_XMLLogoArray.length);
var i:Number = Math.floor(Math.random()*_XMLLogoArray.length);
var dispObj:DisplayObject = _XMLLogoArray[i];
_XMLLogoArray.splice(i, 1);
_holder.addChild(dispObj);
_holder.x = -dispObj.width;
_holder.y = _yPlacement[_itemToStageNumber];
//trace("_XMLLogoArray.length = "+_XMLLogoArray.length);

var myDelay:Number = Math.random()*2;

//trace("dispObj.width = "+dispObj.width);

//_tween = new GTween(_holder, 1, {x:-10}, {ease:Sine.easeIn, delay:myDelay, reflect:false, repeatCount:1});
_tween = new GTween(_holder, 1.2, {x:(215-dispObj.width)/2}, {ease:Back.easeOut, delay:myDelay, reflect:false, repeatCount:1});
_tween = new GTween(_holder, 1.2, {x:215}, {ease:Back.easeIn, delay:myDelay+4, reflect:false, repeatCount:1, onComplete:handleComplete});
_itemToStageNumber++;
}

private function handleComplete(e:GTween):void {
trace("handleComplete");
_XMLLogoArray.push(e.target.getChildAt(0));
e.target.removeChild(e.target.getChildAt(0));
//trace("_XMLLogoArray.length = "+_XMLLogoArray.length);
//trace("e.target.name = "+e.target.name);

var i:Number = Math.floor(Math.random()*_XMLLogoArray.length);
var dispObj:DisplayObject = _XMLLogoArray[i];
_XMLLogoArray.splice(i, 1);
//trace("_XMLLogoArray.length = "+_XMLLogoArray.length);

e.target.addChild(dispObj);
e.target.x = -dispObj.width;

var myDelay:Number = Math.random()*3;

_tween = new GTween(e.target, 1.2, {x:(215-dispObj.width)/2}, {ease:Back.easeOut, delay:myDelay, reflect:false, repeatCount:1});
_tween = new GTween(e.target, 1.2, {x:215}, {ease:Back.easeIn, delay:myDelay+4, reflect:false, repeatCount:1, onComplete:handleComplete});
}

}
}

other recent galleries:
ActionScript 3.0: the Fransa Collection Flash with photos by Flemming Scully
ActionScript 3.0: using FIVe3D for a picture gallery
JavaScript: using jQuery for a picture gallery

other stuff made for MCH Messecenter Herning:
showcase: 2 simple banners for MCH Messecenter Herning
showcase: different stuff for MCH Messecenter Herning

in a long line of different galleries, this recent one I made for Fransa is surely one of the best.
it combines detailed teaser views of each picture in 2 different sizes and a moveable large size picture, again in 2 different kind of views.
I like the way it’s build, the way each picture is used in different ways and sizes to create the true gallery experience and the overall smoothness of the gallery.

HC Midtjylland vs Sønderjyske 30. of january 2010

check out the Fransa gallery here – with concert and handball photos by photographer Flemming Scully

how it works:
the gallery needs an XML with links to each of the 3 sizes of each picture.
in this example the gallery expects a 88 x 123 px thumb, a 190 x 266 px big thumb, and finally for the big version, a picture with at least these measures; 915 x 600 px.
finally along with each picture is a headline text and a descriptive text, both to be delivered in the XML as HTML-texts.
if the gallery is embedded in HTML with a certain parameter, a download button appears in the gallery making each of the big pictures downloadable to the viewer.

how it is set up:
the gallery is set up in ActionScript 3.0 and uses Zeh Fernandos amazing tweening library Tweener.
the gallery is a 500+ lines of ActionScript bastard.
the gallery is set up as a single module and works alone like in the example above (HTML and Flash only).
on the first version made for Fransa the gallery was made to work in the danish CMS Dynamic Web.

the structure of the Flash can be seen here:

/*
FLOW

arrange XML
load alle thumbs
tilføj preloader
opsæt/tilføj thumbs
opsæt forward/backward
load/opsæt/tilføj stort billede
load/opsæt/tilføj medium billede
*/

package {

import ArrayStuff;
import caurina.transitions.properties.ColorShortcuts;
import caurina.transitions.Tweener;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;
import flash.net.navigateToURL;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.text.StyleSheet;
import MonsterDebugger;

public class FransaCollectionContent extends Sprite {

private var _theXML:String;
private var _md:MonsterDebugger;
private var _xml:XML;
private var _thumbArray:Array = [];
private var _mediumArray:Array = [];
private var _largeArray:Array = [];
private var _headerArray:Array = [];
private var _downloadArray:Array = [];
private var _textArray:Array = [];
private var _arrayStuff:ArrayStuff;
private var _preloader:MyPreloader;
private var _thumbHolder:Sprite;
private var _thumbMoveTime:Number = 1.5; //customizable
private var _thumbTransition:String = "easeOutSine"; //customizable
private var _navAlphaOver:Number = 0.4; //customizable
private var _navAlphaOff:Number = 0.2; //customizable
private var _navAlphaTime:Number = 0.6; //customizable
private var _thumbDodgeTime:Number = 0.8; //customizable
private var _mediumFadeIn:Number = 1.8; //customizable
private var _largeFadeIn:Number = 1.2; //customizable
private var _mediumHolder:Sprite;
private var _largeHolder:Sprite;
private var _thumbPart:Number = 0;
private var _thumbChosen:Number = 0;
private var _movePic:Boolean = false;
private var _tooltip:Tooltip;
private var _bigMask:BigMask;
private var _downloadAlpha:Number = 0.6; //customizable
private var _retail:String;
private var _cssLoaded:Boolean = false;
private var _cssLoader:URLLoader = new URLLoader();
private var _css:StyleSheet = new StyleSheet();
private var _zoomMode:Boolean = false;

public function FransaCollectionContent() {
//
}

public function init(someXML:String, retail:String):void {
_theXML = someXML;
_retail = retail;

_md = new MonsterDebugger(this);
ColorShortcuts.init();
trace("_theXML passed to the loaded flash = "+_theXML);
loadTheXML();
//xmlLoaded(null); //DW
}

///*
private function loadTheXML():void {
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest(_theXML);
loader.addEventListener(Event.COMPLETE, xmlLoaded, false, 0, true);
loader.addEventListener(IOErrorEvent.IO_ERROR, xmlError, false, 0, true);

loader.load(request);
}

private function xmlError(e:Event):void {
var someParam:String = "xml not loaded";
ExternalInterface.call("alert", someParam);
}
//*/

private function xmlLoaded(e:Event):void {

_xml = new XML(e.target.data);
//_xml = new XML(_theXML); //DW

var i:Number = 0;
while(i < _xml.item.length()) {
/*
_thumbArray.push("/files/files/"+_xml.item[i].thumb); //NOTICE
_mediumArray.push("/files/files/"+_xml.item[i].small); //NOTICE
_largeArray.push("/files/files/"+_xml.item[i].large); //NOTICE
_downloadArray.push(_xml.item[i].download); //NOTICE
*/
///*
_thumbArray.push(_xml.item[i].thumb); //NOTICE
_mediumArray.push(_xml.item[i].small); //NOTICE
_largeArray.push(_xml.item[i].large); //NOTICE
_downloadArray.push(_xml.item[i].download); //NOTICE
//*/
_headerArray.push(_xml.item[i].heading);
_textArray.push(_xml.item[i].text);

i++;
}

_arrayStuff = new ArrayStuff();
_arrayStuff.convertToLoaders(_thumbArray);
_arrayStuff.addEventListener("loaderArrayReady", loaderArrayReady);

addPreloader();
}

private function loaderArrayReady(e:Event):void {
_thumbArray = e.currentTarget._loaderArray;
trace(_thumbArray);

setupThumbHolder();
}

//PRELOADER -------------------------------------------------------------------------------------------------------------
private function addPreloader():void {
_preloader = new MyPreloader();
_preloader.x = 789;
_preloader.y = 245
addChild(_preloader);
}

private function hidePreloader():void {
Tweener.addTween(_preloader, {alpha:0, time:1.6});
}

private function showPreloader():void {
Tweener.addTween(_preloader, {alpha:1, time:1.6});
}

//THE THUMBS -------------------------------------------------------------------------------------------------------------
private function setupThumbHolder():void {
_thumbHolder = new Sprite();
var i:Number = 0;
var thumbX:Number = 0;

while(i < _thumbArray.length){
var thumb:Sprite = new Sprite();
thumb.name = String("nr"+i);
thumb.x = thumbX + i * 89;
thumb.buttonMode = true;
thumb.addEventListener(MouseEvent.CLICK, thumbClicked, false, 0, true);
thumb.addEventListener(MouseEvent.MOUSE_OVER, thumbOver, false, 0, true);
thumb.addChild(_thumbArray[i]);
_thumbHolder.addChild(thumb);
i++;
}

addChild(_thumbHolder);
_thumbHolder.x = 13;
_thumbHolder.y = 267;

//MASK IT
var thumbMask:ThumbMask = new ThumbMask();
addChild(thumbMask);
thumbMask.x = 13;
thumbMask.y = 267;
_thumbHolder.mask = thumbMask;

setupForwardBackward();
setupLarge();
setupTooltip();
setupDownload();
}

private function thumbClicked(e:MouseEvent):void {
_thumbChosen = Number(e.currentTarget.name.replace(/nr/ig,""));

showPreloader();
newMedium();
}

private function thumbOver(e:MouseEvent):void {
Tweener.addTween(e.currentTarget, {_brightness:2.55, time:0});
Tweener.addTween(e.currentTarget, {_brightness:0, time:_thumbDodgeTime, transition:"EaseOutSine"});
}

//FORWARD BACKWARD NAVIGATION -------------------------------------------------------------------------------------------------------------
private function setupForwardBackward():void {
if(_thumbPart > 0){
navLeft.buttonMode = true;
navLeft.addEventListener(MouseEvent.ROLL_OVER, navOver, false, 0, true);
navLeft.addEventListener(MouseEvent.ROLL_OUT, navOut, false, 0, true);
navLeft.addEventListener(MouseEvent.CLICK, navLeftClicked, false, 0, true);
Tweener.addTween(navLeft, {alpha:1, time:_navAlphaTime});
} else {
navLeft.buttonMode = false;
navLeft.removeEventListener(MouseEvent.ROLL_OVER, navOver);
navLeft.removeEventListener(MouseEvent.ROLL_OUT, navOut);
navLeft.removeEventListener(MouseEvent.CLICK, navRightClicked);
Tweener.addTween(navLeft, {alpha:_navAlphaOff, time:_navAlphaTime});
}

if(_thumbPart < Math.floor((_thumbArray.length - 1) / 10)){
navRight.buttonMode = true;
navRight.addEventListener(MouseEvent.ROLL_OVER, navOver, false, 0, true);
navRight.addEventListener(MouseEvent.ROLL_OUT, navOut, false, 0, true);
navRight.addEventListener(MouseEvent.CLICK, navRightClicked, false, 0, true);
Tweener.addTween(navRight, {alpha:1, time:_navAlphaTime});
} else {
navRight.buttonMode = false;
navRight.removeEventListener(MouseEvent.ROLL_OVER, navOver);
navRight.removeEventListener(MouseEvent.ROLL_OUT, navOut);
navRight.removeEventListener(MouseEvent.CLICK, navRightClicked);
Tweener.addTween(navRight, {alpha:_navAlphaOff, time:_navAlphaTime});
}

}

private function navLeftClicked(e:MouseEvent):void {
//if(_thumbPart > 0){
_thumbPart--;
Tweener.addTween(_thumbHolder, {x:-890*_thumbPart+13, time:_thumbMoveTime, transition:_thumbTransition});
//}
setupForwardBackward();
}

private function navRightClicked(e:MouseEvent):void {
//if(_thumbPart < Math.floor(_thumbArray.length -1 / 10)){
_thumbPart++;
Tweener.addTween(_thumbHolder, {x:-890*_thumbPart+13, time:_thumbMoveTime, transition:_thumbTransition});
//}
setupForwardBackward();
}

private function navOver(e:MouseEvent):void {
Tweener.addTween(e.target, {alpha:_navAlphaOver, time:_navAlphaTime});
}

private function navOut(e:MouseEvent):void {
Tweener.addTween(e.target, {alpha:1, time:_navAlphaTime});
}

//MEDIUM SIZE PICTURE -------------------------------------------------------------------------------------------------------------
private function setupMedium():void {
_mediumHolder = new Sprite();
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, mediumLoaded, false, 0, true);
loader.load(new URLRequest(_mediumArray[_thumbChosen]));
_mediumHolder.alpha = 0;
_mediumHolder.addChild(loader);
addChild(_mediumHolder);

setupText();
}

private function mediumLoaded(e:Event):void {
Tweener.addTween(_mediumHolder, {alpha:1, time:_mediumFadeIn});
}

private function newMedium():void {
_mediumHolder.removeChildAt(0);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, newMediumLoaded, false, 0, true);
loader.load(new URLRequest(_mediumArray[_thumbChosen]));
_mediumHolder.alpha = 0;
_mediumHolder.addChild(loader);
}

private function newMediumLoaded(e:Event):void {
newLarge();
setupText();
_mediumHolder.x = 445;
Tweener.addTween(_mediumHolder, {alpha:1, x:0, time:_mediumFadeIn});
}

//LARGE SIZE PICTURE -------------------------------------------------------------------------------------------------------------
private function setupLarge():void {
_largeHolder = new Sprite();
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, largeLoaded, false, 0, true);
loader.load(new URLRequest(_largeArray[_thumbChosen]));
_largeHolder.alpha = 0;
_largeHolder.buttonMode = true;
_largeHolder.addChild(loader);
_largeHolder.x = 190;
addChild(_largeHolder);

_bigMask = new BigMask();
addChild(_bigMask);
_bigMask.x = 191;
_largeHolder.mask = _bigMask;

setupMedium();
}

private function largeLoaded(e:Event):void {
largePicInitX();
_largeHolder.addEventListener(Event.ENTER_FRAME, movePic, false, 0, true);
_largeHolder.addEventListener(MouseEvent.ROLL_OVER, movePicTrue, false, 0, true);
_largeHolder.addEventListener(MouseEvent.ROLL_OUT, movePicFalse, false, 0, true);
_largeHolder.addEventListener(MouseEvent.CLICK, largeClicked, false, 0, true);
Tweener.addTween(_largeHolder, {alpha:1, time:_largeFadeIn});
hidePreloader();
}

private function newLarge():void {
_largeHolder.removeChildAt(0);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, newLargeLoaded, false, 0, true);
loader.load(new URLRequest(_largeArray[_thumbChosen]));
_largeHolder.alpha = 0;
_largeHolder.addChild(loader);
}

private function newLargeLoaded(e:Event):void {
Tweener.addTween(_largeHolder, {alpha:1, time:_largeFadeIn});
Tweener.addTween(_largeHolder.getChildAt(0), {x:0, time:2});
hidePreloader();
}

private function movePic(e:Event):void {
if(_movePic) {
var widthToUse:Number;
var heightToUse:Number;
if(_zoomMode){
widthToUse = 915;
heightToUse = 600;
} else {
widthToUse = 444;
heightToUse = 266;
}

var forskelX:Number;
var pctX:Number;
var pxX:Number;
var forskelY:Number;
var pctY:Number;
var pxY:Number;
forskelX = _largeHolder.getChildAt(0).width - widthToUse;
pctX = _largeHolder.mouseX / widthToUse * 100;
pxX = forskelX / 100 * pctX;
forskelY = _largeHolder.getChildAt(0).height - heightToUse;
pctY = _largeHolder.mouseY / heightToUse * 100;
pxY = forskelY / 100 * pctY;
if(_zoomMode){
Tweener.addTween(_largeHolder.getChildAt(0), {x:-pxX, y:-pxY, time:0.4});
} else {
Tweener.addTween(_largeHolder.getChildAt(0), {x:-pxX, y:-pxY, time:0.4});
}

moveTooltip();
}
}

private function movePicTrue(e:MouseEvent):void {
_movePic = true;
}

private function movePicFalse(e:MouseEvent):void {
_movePic = false;
largePicInitX();
tooltipInitPlacement();
}

private function largePicInitX():void {
var widthToUse:Number;
if(_zoomMode){
widthToUse = 915;
} else {
widthToUse = 444;
}
var theX:Number = -((_largeHolder.getChildAt(0).width - widthToUse) / 2);
Tweener.addTween(_largeHolder.getChildAt(0), {x:theX, y:0, time:0.8});
}

private function largeClicked(e:MouseEvent):void {
var someParam:String = _largeArray[_thumbChosen];

if(_zoomMode) {
_zoomMode = false;
Tweener.addTween(_bigMask, {width:444, height:266, x:191, y:0, time:0.8});
Tweener.addTween(_largeHolder, {width:_largeHolder.getChildAt(0).width, height:_largeHolder.getChildAt(0).height, x:190, y:0, time:0.8});
_largeHolder.mask = _bigMask;
addChildAt(_largeHolder, numChildren - 3);

_tooltip.gotoAndStop(1);
} else {
_zoomMode = true;
Tweener.addTween(_bigMask, {width:915, height:600, x:0, y:0, time:0.8});
Tweener.addTween(_largeHolder, {width:_largeHolder.getChildAt(0).width, height:_largeHolder.getChildAt(0).height, x:0, y:0, time:0.8});
_largeHolder.mask = _bigMask;
addChild(_largeHolder);

_tooltip.gotoAndStop(2);
addChild(_tooltip);
}
}

//SETTING UP THE TOOLTIP -------------------------------------------------------------------------------------------------------------
private function setupTooltip():void {
_tooltip = new Tooltip();
addChild(_tooltip);
tooltipInitPlacement();
}

private function tooltipInitPlacement():void {
Tweener.removeTweens(_tooltip);
_tooltip.alpha = 0;
}

private function moveTooltip():void {
Tweener.addTween(_tooltip, {x:mouseX+50, y:mouseY+50, time:0.05});
Tweener.addTween(_tooltip, {alpha:1, time:0.4});
}

//SETTING UP THE TEXT -------------------------------------------------------------------------------------------------------------
private function setupText():void {
if(!_cssLoaded){
//var cssreq:URLRequest = new URLRequest("/Files/Billeder/fransa/flash/fransaflash.css");
var cssreq:URLRequest = new URLRequest("fransaflash.css");
_cssLoader.addEventListener(Event.COMPLETE, cssLoaded, false, 0, true);
_cssLoader.load(cssreq);
} else {
addText();
}
}

private function cssLoaded(e:Event):void {
_cssLoader.removeEventListener(Event.COMPLETE, cssLoaded);
_css.parseCSS(_cssLoader.data);
myText.normalText.selectable = true;
_cssLoaded = true;
addText();
}

private function addText():void {

myText.alpha = 0;
myHeader.alpha = 0;

if(_headerArray[_thumbChosen].search(/\n/i) > -1) {
var alteredText:String = _headerArray[_thumbChosen];
alteredText = alteredText.toUpperCase();
alteredText = alteredText.replace(/\n/ig, "");
myHeader.headerText.htmlText = alteredText;
myText.y = 97;
} else {
myHeader.headerText.htmlText = _headerArray[_thumbChosen].toUpperCase();
myText.y = 67;
}

var normaltext:String = _textArray[_thumbChosen];
normaltext = normaltext.replace(/<br \/>/ig, "");
normaltext = normaltext.replace(/\n/ig, "");
myText.normalText.styleSheet = _css;
myText.normalText.htmlText = normaltext;
Tweener.addTween(myHeader, {alpha:1, time:4.8});
Tweener.addTween(myText, {alpha:1, time:4.8, delay:0.3});
}

//NAVIGATION -------------------------------------------------------------------------------------------------------------
private function showNav():void {

}

//DOWNLOAD -------------------------------------------------------------------------------------------------------------
private function setupDownload():void {
if(_retail.indexOf("448") > -1 || _retail.indexOf("4614") > -1) {
downloadBtn.buttonMode = true;
Tweener.addTween(downloadBtn, {alpha:1, time:_downloadAlpha});
downloadBtn.addEventListener(MouseEvent.CLICK, downloadClicked, false, 0, true);
}

}

private function downloadClicked(e:MouseEvent):void {
//navigateToURL(new URLRequest("/admin/public/getimage.aspx?Image="+_downloadArray[_thumbChosen]+"&Width=10000&Resolution=300&Compression=100&ForceDownload=True"));
navigateToURL(new URLRequest("/Admin/Public/DWSDownload.aspx?File="+_downloadArray[_thumbChosen]));
}

}
}

—

past galleries:
interested in past galleries, check out these,
a gallery made in ActionScript 3.0 and FIVe3D
a looping gallery in ActionScript 3.0
a polaroid picture gallery in ActionScript 3.0
an ActionScript 3.0 dynamic banner used in a photo gallery
a picture gallery made with jQuery
a simple but nice picture gallery in ActionScript 3.0 and Tweener

credits:
Per Henriksen of Co4 for art directing the gallery.
Fransa.
Flemming Scully for the amazing photos.
The Poul Krebs photos are from Herning Rocker 2009.
The HC Midtjylland photos are from the match against SønderjyskE on the 30. of january 2010.
Zeh Fernando for Tweener.

invited our friends to a lovely new years eve with this online New Years Eve invitation

the invitation is build with ActionScript 3.0, using Tweener and TextAnim.
graphics are bought at ActiveDen, then slightly altered.

when using TextAnim you can add any texture bitmap as pattern for the text.

check out an example of TextAnim animating text

yes, I know, impressive..
but what if replacing the blue color of the text with this texture?
texture used for text with TextAnim

check out an example of TextAnim animation text with a texture bitmap as pattern

the code for the texture example:

import flupie.textanim.TextAnim;
import flupie.textanim.TextAnimBlock;
import flupie.textanim.TextAnimTools;
import caurina.transitions.Tweener;

//set your text
myTextField.text = "TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS!";

//Create a bitmap with library linkage instance.
var pattern:Bitmap = new Bitmap(new TABMD(0, 0));

//Configuration
var anim:TextAnim = new TextAnim(myTextField);
TextAnimTools.setPattern(anim, pattern);
anim.interval = 65;
anim.effects = myEffect;
anim.blocksVisible = false;
anim.start(300); //delay to start

function myEffect(block:TextAnimBlock):void {
block.alpha = 0;
block.x = block.posX + 80;
block.scaleX = block.scaleY = 8;
Tweener.addTween(block, {alpha:1, x:block.posX, scaleX:1, scaleY:1, time:.5, transition:"easeoutsine"});
}

new to TextAnim?
be sure to read this on the very basic usage of TextAnim:
ActionScript 3.0: creating text animation with textures using TextAnim

a cuepoint is a marker, in video it’s used to mark an event or a chapter and is very powerful when you want to synchronize your video with animations, speech, music or stuff like that.
cuepoints can be added in many ways, it can be added as the footage is edited, or it can be added in post-production.
in this example I’ll use ASCuePoints, actionscripted ASCuePoints, to trigger a function.

but first, watch the video without any effects here:
little girl screaming her lungs out

to cartoonize the video, I’ve masked it in a cartoon magazine holder.
and, by using ASCuePoints, I’ve added a “Waaaaaaaah” Batman TV-series stylish graphic every time the girl screams.
watch the video cartoonized with graphics and a mask here

here’s the ActionScript used to set this up:

import fl.video.MetadataEvent;
import caurina.transitions.Tweener;

var wah:Wah;

//FLVPlayer.alpha = 0;
FLVPlayer.addASCuePoint(1, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(6.3, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(14.5, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(19.6, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(25, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(30.6, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(35, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(38, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(44, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(47, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(48.3, "screamveryshort", {text:"myFirstCuepoint"});

FLVPlayer.addEventListener(MetadataEvent.CUE_POINT, reactToCuepoint, false, 0, true);

function reactToCuepoint(evt:MetadataEvent):void {

wah = new Wah();

var myY:Number = Math.random()*150 + 100;
var myX:Number = Math.random()*140 + 120;

wah.x = myX;
wah.y = myY;
trace("wah.x = "+wah.x+" & wah.y = "+wah.y);
wah.alpha = 0;

Tweener.addTween(wah, {alpha:1, time:2});
Tweener.addTween(wah, {alpha:0, time:2, delay:5});

wahholder.addChild(wah);

if(evt.info.name == "scream") {
wah.gotoAndStop(1);
} else if(evt.info.name == "screamveryshort") {
wah.gotoAndStop(2);
}
}

function fadeIn(){
Tweener.addTween(FLVPlayer, {alpha:1, time:1, transition:"easeInSine"});
}
function fadeOut(){
Tweener.addTween(FLVPlayer, {alpha:0, time:1, transition:"easeOutSine"});
}

a big shout out to Esben Hindhede and Maria Bøge Sørensen for inspiration and helping create this post!

girl that screams her lungs out

having written this post on how to create random art in ActionScript using simple shapes and read it a few times, I realized that I hadn’t made a version that was in fullscreen mode. so here’s the last example in the previous post remade in fullscreen.

check out this link to see the random vector shape art created in ActionScript in fullscreen!

having read this article by Bruno Crociquia, I had to try it out for myself.
so I created some very random vector shapes in Flash, among others, these:

Some of the shapes used to create the random art in Flash

all I had to do from here, was to add a few changes to Bruno’s original code to make it fit my wishes, and then publish my Flash.
click the picture below to see how my Flash ended up:

if you click the flash movie and then press any key the Flash will randomly recreate art!
well, so far so good, Bruno’s task completed..
..but I wanted to see what would happen, if I made the Flash recreate itself constantly.
so I used a Timer, and made the Flash create new art 5 times pr. second.

check out the rather hypnotising Flash art here:

ok, so far so good, but what if I decrease the amout of alpha of each shape from 0.9+ to only 0.4?
actually this creates a quite different effect.

check out the rather hypnotising semitransparent Flash art here:

last, I experimented with a more relaxed flow, I decided to bring one random shape to the stage at a time.
this ended up in this neverending mosaic art, still using those very same vectors.

check out this last experiment on trying to create Flash art here:

the Document Class ActionScript for the last example can be copied from here:

package {

import caurina.transitions.Tweener;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.SpreadMethod;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.TimerEvent;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.utils.Timer;
import MonsterDebugger;

public class RandomFlashArtContent extends Sprite {

private var _md:MonsterDebugger;
private var maxscale:Number = 1.2; // this is the maximum scale value that our shapes will be allowed to achieve
private var minscale:Number = 1; // this is the minimum scale value that our shapes will be allowed to achieve
private var maxrotation:Number = 180; // maximum rotation value for our shapes
private var offsetX:Number = 100; // the offset is the value that will trigger the discrepancy of your composition
private var offsetY:Number = 100; //
private var marginX:Number = 100; // this is the margin for the x axis
private var marginY:Number = 100; // this is the margin for the y axix
private var colorPalete:Array = [0xFFE6C9,0x960F66,0xF55E54,0xCC2C57,0x171F21]; //Bending Color For the BLind
private var _timer:Timer;

//background gradient settings;
var type:String = GradientType.LINEAR;
var colors:Array = [ 0x000000, 0x000000];
var alphas:Array = [ 1, 1 ];
var ratios:Array = [ 0, 255 ];
var matr:Matrix = new Matrix();
var sprMethod:String = SpreadMethod.PAD;
var bg:Sprite = new Sprite();
var g:Graphics = bg.graphics;

public function RandomFlashArtContent() {
init();
}

private function init():void {
trace("function init");
_md = new MonsterDebugger(this);
_timer = new Timer(90, 0);
_timer.addEventListener(TimerEvent.TIMER, goCreate, false, 0, true);
_timer.start();
createBackground();
}

private function createBackground(){
//starts a gradient box
matr.createGradientBox(800, 550, 90, 0, 0 ); //make the gradient the size of your stage, set the rotation to 90 degrees
//begins the fill
g.beginGradientFill(type, colors, alphas, ratios, matr, sprMethod );
//draws the rectangle
g.drawRect( 0, 0, 800, 550 ); //be sure to draw the rectangle the size of your stage
addChild(bg);

createComposite();
}

function removeComposite(){
while(numChildren > 0){
//eliminates all of the child objects from the main timeline
removeChildAt(0);
}
}

private function goCreate(e:TimerEvent):void{
createComposite();
}

private function createComposite(){

var obj:RandomObject=new RandomObject();

//what shape to show
obj.gotoAndStop(Math.round(Math.random()*obj.totalFrames));

//set the objects position
obj.x = Math.random() * 700 + 50; //marginX;
obj.y = Math.random() * 450 + 50; //+ marginY;

//sets the scale
obj.scaleX = obj.scaleY = Math.random()*maxscale+minscale;

//sets the rotation
obj.rotation = Math.random()*maxrotation;

//sets a random color from the palette
var c:ColorTransform = new ColorTransform(); // we create an auxiliary color transform object that will carry a random color from the palette
c.color = colorPalete[Math.ceil(Math.random()*colorPalete.length)-1]; // the minus 1 is basically because an array starts at index 0
obj.transform.colorTransform = c; //we apply the color to the object color transformation

//sets an alpha
obj.alpha = 0;
var theTime:Number = Math.random()*15;
var theDelay:Number = Math.random()*15;
var theAlpha:Number = Math.random();
Tweener.addTween(obj, {alpha:theAlpha, time:theTime});
Tweener.addTween(obj, {alpha:0, time:theTime, delay:theDelay});

//adds to stage
addChild(obj);
}

}
}

the color theme for these pieces of art is found at Kuler, and is called “Bending Color For The Blind”.

randomly surfing I stumbled upon this Mosaic.as class written by Julian Kussman.
in Julians own words, this class “allows you to create a pixellated copy of any display object”.
cool.
so I had just had to play around with it.
here’s what I came up with:

the simplest version is simply a question of adding a DisplayObject to stage, and then pixelating it using the class:
check out the pixelated picture here

pixelation can be modified using the .pixelSize parameter, here’s a version with bigger pixels:
check out the even more pixelated picture here

using a Timer along with the class, the pixelation can be done over time:
check out pixelation over time here

not sure how to use a Timer?
then check out these earlier posts on using Timers.
how to use a Timer, part 1
how to use a Timer, part 2

back to the Mosaic Class, when using a Timer de-pixelation can be achieved the same way too:
check out de-pixelation over time here

Tweening the alpha of a pixelated picture on top of a normal picture would look like this:
using a normal picture and a pixelated picture together

as this Class works on any displayObject, you can load your picture dynamically using a Loader, and just pixelate the Loader.
nice!

so I decided to load a large picture, slice it in 25 parts and place it on stage.
on top of each part I put the pixelated version of the picture, and added some interaction, so that every part could be revealed if the pixelated version was “wiped” away.
check out the 25-part pixelated, interactive picture here

the entire code for this last example:

import Mosaic;
import caurina.transitions.Tweener;

var _placeringX:Number = 0;
var _placeringY:Number = 0;
var _myDelay:Number = 0;
var _bitmap:BitmapData = new BitmapData(1000, 750, true, 0);
var matrix:Matrix = new Matrix();
var rectDrawing:Sprite = new Sprite();

var _loader:Loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, picLoaded);
_loader.load(new URLRequest("1000x750.jpg"));

function picLoaded(e:Event):void {

_bitmap.draw(_loader, new Matrix());

var i:Number = 0;
while (i < 25) {

var copy:BitmapData = new BitmapData(200, 150, true, 0);
var rect:Rectangle = new Rectangle(_placeringX, _placeringY, 200, 150);
var pt:Point = new Point(0, 0);
copy.copyPixels(_bitmap, rect, pt);
var bm2:Bitmap = new Bitmap(copy);
bm2.x = _placeringX;
bm2.y = _placeringY;
_myDelay = _myDelay + 0.1;
addChild(bm2);

var myMoz:Mosaic = new Mosaic(bm2);
myMoz.x = _placeringX;
myMoz.y = _placeringY;
var _pixelSize = 16;
myMoz.addEventListener(MouseEvent.MOUSE_OVER, fadeMozOut);
myMoz.addEventListener(MouseEvent.MOUSE_OUT, fadeMozIn);
addChild(myMoz);

myMoz.pixelSize = _pixelSize;
myMoz.render();

_placeringX = _placeringX + 200;

i++;

if (i == 5 || i == 10 || i == 15 || i == 20 || i == 25 ) {
_placeringX = 0;
_placeringY = 150 * (i / 5);
}
}
}

function fadeMozOut(e:MouseEvent):void {
Tweener.addTween(e.target, {alpha:0, time:0.8});
}

function fadeMozIn(e:MouseEvent):void {
Tweener.addTween(e.target, {alpha:1, time:0.8, delay:6});
}

hope this was useful, comments or other examples are very welcome!

a while ago I had found an .as-file that I moderated, so I could use it as I wanted on any regular quadrilateral picture.
see what I ended up with here:

ExtractBox.as version 1

now I’ve worked a bit more on this class so that it works on any rectangular picture, and have ended up with this new version:

check out version 2 of the ExtractBox.as file on a passport photo shoot of my 2 youngest kids here:

the entire code for making this happen:

import ExtractBox;
var eb1:ExtractBox = new ExtractBox("600x450.jpg", 10, 10, 450, 600, 4, 0x000000, 0xFFFFFF);
addChild(eb1);

package {

import caurina.transitions.properties.ColorShortcuts;
import caurina.transitions.Tweener;
import flash.display.Graphics;
import flash.display.Loader;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;

public class ExtractBox extends Sprite {

private var _myImg:Loader = new Loader();
private var _imageHolder:Sprite;
private var _borderBox:Shape;
private var _interactionBox:Shape;
private var _interactiveBox:Sprite;
private var _maskBox:Shape;
private var _scale:Number;
private var _mySize:Number;
private var _myHeight:Number;
private var _myWidth:Number;
private var _myBorder:Number;
private var _myURL:String;
private var _myOffColor:Number;
private var _myOnColor:Number;

function ExtractBox(theURL:String, theX:Number, theY:Number, theHeight:Number, theWidth:Number, theBorder:Number, theOffColor:Number, theOnColor:Number) {

_myURL = theURL;
//_mySize = theSize;
_myHeight = theHeight;
_myWidth = theWidth;
_myBorder = theBorder;
_myOffColor = theOffColor;
_myOnColor = theOnColor;
x = theX+(_myWidth/2);
this.y = theY+(_myHeight/2);

setup_imageHolder();
draw_borderBox();
drawPictureBox();
draw_interactionBox();
add_imageHolder();

ColorShortcuts.init();

_scale = _maskBox.scaleX;
}

private function onPictureBoxOver(e:MouseEvent):void {

Tweener.addTween(_borderBox, {_color:_myOnColor, time:1.6});
Tweener.addTween(_maskBox, {scaleX:0.95, scaleY:0.95, time:1.6});
}

private function onPictureBoxOut(e:MouseEvent):void {

Tweener.addTween(_borderBox, {_color:_myOffColor, time:1});
Tweener.addTween(_maskBox, {scaleX:1, scaleY:1, time:1});
}

private function setup_imageHolder():void {
_imageHolder = new Sprite();
}

private function draw_borderBox():void {
_borderBox = new Shape();
_borderBox.graphics.beginFill(_myOffColor);
_borderBox.graphics.drawRoundRect(-(_myWidth/2),-(_myHeight/2),_myWidth,_myHeight,0);
_borderBox.graphics.endFill();
_imageHolder.addChild(_borderBox);
}

private function drawPictureBox():void {
_myImg.load(new URLRequest(_myURL));
_myImg.x = -(_myWidth/2)-2;
_myImg.y = -(_myHeight/2)-2;
_imageHolder.addChild(_myImg);

_maskBox = new Shape();
_maskBox.graphics.beginFill(0xFF9999);
_maskBox.graphics.drawRoundRect(-(_myWidth/2)+_myBorder,-(_myHeight/2)+_myBorder,(_myWidth-(_myBorder*2)),(_myHeight-(_myBorder*2)),0);
_maskBox.graphics.endFill();

_imageHolder.addChild(_maskBox);
_myImg.mask = _maskBox;
}

private function draw_interactionBox():void {
_interactionBox = new Shape();
_interactionBox.graphics.beginFill(0x000000);
_interactionBox.graphics.drawRoundRect(-(_myWidth/2),-(_myHeight/2),_myWidth,_myHeight,0);
_interactionBox.graphics.endFill();
_interactionBox.alpha = 0;
_interactiveBox = new Sprite();
_interactiveBox.addChild(_interactionBox);
_imageHolder.addChild(_interactiveBox);
_interactiveBox.addEventListener(MouseEvent.MOUSE_OVER, onPictureBoxOver);
_interactiveBox.addEventListener(MouseEvent.MOUSE_OUT, onPictureBoxOut);
}

private function add_imageHolder():void {
addChild(_imageHolder);
}

}
}

Helpful stuff on Flash, ActionScript, After Effects etc

Archive for the ‘Tweener’ tag

ActionScript 3.0: fullscreen backgroundpicture in Flash

ActionScript 3.0: logobanner for MCH Messecenter Herning / Porsche 911 Carrera 4/4S Cabriolet gallery

ActionScript 3.0: the Fransa Collection Flash with photos by Flemming Scully

showcase: New Years Eve 2009 invitation

ActionScript 3.0: creating text animation with textures using TextAnim

ActionScript 3.0: using ASCuePoint with Flash Video (.flv)

ActionScript 3.0: creating random art using simple vector shapes, part 2

ActionScript 3.0: creating random art using simple vector shapes

ActionScript 3.0: the Mosaic Class, different tests

ActionScript 3.0: ExtractBox Class version 2

other stuff

search

categories

friends and collegues

september 2010
m	ti	o	to	f	l	s
« maj
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30