Archive for the ‘Tutorial’ Category
Flash: tracking rightclicks from Flash with Google Analytics
for a long time, I’ve been adding my own custom context menu to almost everything I’ve created in Flash.
this means, that when someone rightclicks my Flash, they will see this menu:
and what good has this rightclick menu done me..
well, it links to my blog, right, but has anyone ever come to my blog from this rightclick menu?
actually, I don’t know, but now I’ve decided to do something about it!
setting up a link that will be trackable in Google Analytics:
I’ve changed the link in my right click menu from
“http://campjohn.dk/wp/” to
“http://campjohn.dk/wp/?utm_source=Sanita&utm_medium=flash&utm_campaign=rightclick”
by doing this, I can now use Google Analytics to actually track how many gets to my blog from my rightclick menu.
as you can see, the only rightclick I have so far is the one I’ve generated myself – for the sake of this blogpost.
but in the future I will be able to actually see how many use my rightclick menu.
sorting the tracking of clicks in Google Analytics by using the source parameter:
AND, if using the parameter source (on the picture marked with a red circle) I can filter where the rightclicks come from.
the one I’ve tracked so far comes from this link:
“http://campjohn.dk/wp/?utm_source=Sanita&utm_medium=flash&utm_campaign=rightclick”
because the rightclick comes from a Flash made for Sanita.
but if I were to make Flash for i. e. casino.dk, I could use this link
“http://campjohn.dk/wp/?utm_source=Casino&utm_medium=flash&utm_campaign=rightclick”
and the I would be able to filter all my rightclicks by either the parameter Sanita or Casino and see how many rightclicks each of the Flash’s has generated.
quite nice!
related post on Google Analytics:
ActionScript 3.0: tracking video progress using JavaScript and Google Analytics
ActionScript 3.0: zoom module for Priess
I was asked to create a product zoom module for Priess, that would load one picture. when loaded I should create a small version of the picture, and when moving the mouse around on the small version of the picture, I should show that area in a zoom window.
first of all, check out the zoom module for Priess made in Flash and ActionScript 3.0 here
here is the flow on how I’ve set the module up in ActionScript:
1) I set up a preloader and a right click menu
2) I load the picture
3) when loaded I create a Bitmap version of the picture, that I scale and smooth so it will fit the scaled version window nicely
4) then I add the big picture to the zoom window and and eventlisteners, that react, if the mouse moves around the scaled version window
5) finally I set up the script that moves the big picture in the zoom window. the math for this is the tricky part, but keeping your head cool, it’s actually quite straight forward.
here’s the entire script for the flow in ActionScript:
import caurina.transitions.Tweener;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import MonsterDebugger;
public class PriessZoomContent extends Sprite {
private var _thePicture:String;
private var _md:MonsterDebugger;
private var _bigHolderWidth:Number = 374;
private var _loader:Loader = new Loader();
private var _interact:Boolean = false;
private var _myPreloader:MyPreloader;
public function PriessZoomContent() {
//init();
}
public function init(somePic:String):void {
_thePicture = somePic;
_md = new MonsterDebugger(this);
trace("_thePicture passed to the loaded flash = "+_thePicture);
loadThePicture();
}
private function loadThePicture():void {
_myPreloader = new MyPreloader();
_myPreloader.x = 399;
_myPreloader.y = 176;
addChild(_myPreloader);
_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, pictureLoaded, false, 0, true);
_loader.load(new URLRequest(_thePicture));
}
private function pictureLoaded(e:Event):void {
trace("pictureLoaded");
_myPreloader.x = 599;
removeChild(_myPreloader);
_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, pictureLoaded);
var bmd:BitmapData = Bitmap(e.target.content).bitmapData;
var bm:Bitmap = new Bitmap(bmd);
bm.scaleX = bm.scaleY = _bigHolderWidth / 2000;
bm.smoothing = true;
trace("bm.width = "+bm.width+" & bm.height = "+bm.height);
BigHolder.addChild(bm);
ZoomHolder.zoomed.addChild(e.target.content);
BigHolder.addEventListener(Event.ENTER_FRAME, bigHolderEvent, false, 0, true);
BigHolder.addEventListener(MouseEvent.ROLL_OVER, bigHolderOver, false, 0, true);
BigHolder.addEventListener(MouseEvent.ROLL_OUT, bigHolderOut, false, 0, true);
}
private function bigHolderOver(e:MouseEvent):void {
_interact = true;
}
private function bigHolderOut(e:MouseEvent):void {
_interact = false;
}
private function bigHolderEvent(e:Event){
if(_interact){
ZoomHolder.zoomed.getChildAt(0).x = -((ZoomHolder.zoomed.width - ZoomHolder.theMask.width) / BigHolder.width * BigHolder.mouseX);
ZoomHolder.zoomed.getChildAt(0).y = -((ZoomHolder.zoomed.height - ZoomHolder.theMask.height) / BigHolder.height * BigHolder.mouseY);
}
}
}
}
credits:
Scott Snyder for the great guitar shot
Alfred Priess A/S: http://www.priess.dk/
ActionScript 3.0: fullscreen backgroundpicture in Flash
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
the ActionScript for all 3 versions;
static:
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:
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:
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
ActionScript 3.0: the Fransa Collection Flash with photos by Flemming Scully
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.
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.
ActionScript 3.0: how to use the getChildByName() method of the DisplayObjectContainer class
short intro:
working on a very simple task the other day, I ended up using the getChildByName method of the DisplayObjectContainer class.
first of all, to get a better understanding of what I was working on, check out this:
my very simple Flash without the use of getChildByName
the problem:
clicking one of the polaroids will make it fade in in a bigger version, clicking that bigger version will make it fade out again.
the problem is, the more photos you click, the stranger the bigger version will look as it fades out, because you see every picture loaded in big versions so far fading out.
the solution:
what happens when one of the polaroids is clicked is, that I load the picture, name the loader “myLoader”, and add as a child to the DisplayObject containing the white frame and the shadow.
the trick now is to check if the DisplayObject has any children name “myLoader”. if it has, I’ll remove them before adding the new myLoader, check it out:
my very simple Flash with the use of getChildByName
the ActionScript:
eager to get the code for this, well, just grab the following.
the getChildByName part of the code is highlighted with comments in the code 
import fl.motion.easing.*;
import flash.display.Sprite;
import flash.display.DisplayObject;
var thePic:Loader;
var tween:GTween;
allSmalls.small1.buttonMode = true;
allSmalls.small2.buttonMode = true;
allSmalls.small3.buttonMode = true;
allSmalls.addEventListener(MouseEvent.CLICK, showBig, false, 0, true);
picHolder.alpha = 0;
picHolder.y -= 800;
function showBig(e:Event):void {
allSmalls.removeEventListener(MouseEvent.CLICK, showBig);
allSmalls.mouseChildren = false;
//THIS IS THE SPECIAL GETCHILDBYNAME PART
if(picHolder.getChildByName("thePic")){
var deleteThis:DisplayObject = picHolder.getChildByName("thePic");
picHolder.removeChild(deleteThis);
}
//END OF GETCHILDBYNAME PART
thePic = new Loader();
thePic.x = 11;
thePic.y = 8;
thePic.name = "thePic";
thePic.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeBigIn, false, 0, true);
var theNameOfPic:String = e.target.name;
theNameOfPic = theNameOfPic.slice(-1);
theNameOfPic = "big"+theNameOfPic+".jpg";
thePic.load(new URLRequest(theNameOfPic));
}
function fadeBigIn(e:Event):void {
thePic.removeEventListener(Event.COMPLETE, fadeBigIn);
picHolder.buttonMode = true;
picHolder.addEventListener(MouseEvent.CLICK, hidePicHolder, false, 0, true);
picHolder.addChild(thePic);
tween = new GTween(picHolder, .6, {alpha:1}, {ease:Linear.easeNone});
picHolder.y += 800;
}
function hidePicHolder(e:MouseEvent):void {
picHolder.buttonMode = false;
allSmalls.mouseChildren = true;
allSmalls.addEventListener(MouseEvent.CLICK, showBig, false, 0, true);
tween = new GTween(picHolder, .6, {alpha:0}, {ease:Linear.easeNone, onComplete:moveUp});
}
function moveUp(e:GTween):void {
picHolder.y -= 800;
}
credits:
the ActionScript 3.0 Language Reference on getChildByName.
the wonderful street performers in New Orleans are photographed by Jason Winkler from Houston, Texas.
Stig Meyer Jensen for being a fellow geek.
ActionScript 3.0: taking advantage of the event path when using addEventListener
lesson:
ok, I just learned this by Nutrox:
Mouse events in AS3 go through a capture, target and bubble phase. When a mouse event is triggered it is dispatched by the stage and drills down through the display list (capture phase) until it reaches the mouse target (target phase), it will then bubble up the display list back to the stage (bubble phase).
take a look at this taking advantage of the event path of mouse events in ActionScript 3.0
the old way of ActionScripting my way through a project
for an example like the one above, I would normally add an event listener for each of the 5 squares:
benched2.addEventListener(MouseEvent.CLICK, getThatBenchedColor, false, 0, true);
benched3.addEventListener(MouseEvent.CLICK, getThatBenchedColor, false, 0, true);
benched4.addEventListener(MouseEvent.CLICK, getThatBenchedColor, false, 0, true);
benched5.addEventListener(MouseEvent.CLICK, getThatBenchedColor, false, 0, true);
the new way of ActionScripting my way through a project
but with the new knowledge, I now collect all of my squares in a MovieClip, and simply assign the event listener to the new parent MovieClip:
this works just as well, nice, right?
the entire ActionScript:
benchedAll.benched1.buttonMode = true;
benchedAll.benched2.buttonMode = true;
benchedAll.benched3.buttonMode = true;
benchedAll.benched4.buttonMode = true;
benchedAll.benched5.buttonMode = true;
benchedAll.benched1._color = "C21201";
benchedAll.benched2._color = "7D1C18";
benchedAll.benched3._color = "33231B";
benchedAll.benched4._color = "094239";
benchedAll.benched5._color = "AD9742";
function getThatBenchedColor(e:MouseEvent):void {
benchedtext.text = "e.target._color = "+e.target._color+" & e.target.name = "+e.target.name;
}
credits:
Nutrox, for all the patience :O)
the benched theme from Kuler
ActionScript 3.0: exploring GTween post 02: update on Kaiyi Wongs blog
inspiration:
even though the post I recently read by Kaiyi Wong was almost a year old, I found it very helpful when it came to understanding GTween.
so I read the lot, made a similar example myself with the newest release of GTween and ended up with this:
check out the new, altered version of Kaiyi Wong’s GTween example here
not really revolutionary, I know, but it shows how smoothly GTween executes lots of animations at once.
and it shows how the movement of both the circle and the square is made.
the use of GTween:
the circle is moved using this ActionScript:
_tween = new GTween(reverser, .4, {x:mouseX, y:mouseY}, {ease:Quadratic.easeOut, reflect:true, repeatCount:2, onComplete:handleComplete});
and basically it means:
move reverser to the position of where the mouse was clicked in .4 second.
use a quadratic easeOut-easing for the animation.
and because reflect is set to true AND repeatCount is set to 2, it will return to it original position in .4 second when having reached it’s destination.
when every animation is ended the function handleComplete will be triggered.
the squares are moved using this ActionScript:
_tween = new GTween(objArray[i], .6, {x:xDest, y:yDest}, {ease:Quadratic.easeOut, reflect:false, repeatCount:1, delay:delay});
which means:
move square to the destination determined by the variables xDest and yDest in .6 second.
use a quadratic easeOut-easing for the animation.
every part of this animation should not be started until the delay has passed.
the ActionScript:
interested in the code for this example?
then grab it here:
import com.gskinner.motion.GTween;
import fl.motion.easing.*;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import MonsterDebugger;
public class GTweenBasics0201Content extends Sprite {
private var _md:MonsterDebugger;
private var _tween:GTween;
private var _reversed:Boolean;
private var objArray:Array = [];
public function GTweenBasics0201Content() {
init();
}
private function init():void {
trace("function init");
_md = new MonsterDebugger(this);
addEventListener(Event.ADDED_TO_STAGE, setupExtras, false, 0, true);
}
private function setupExtras(e:Event):void {
stage.addEventListener(MouseEvent.CLICK, reposition, false, 0, true);
var i:Number = 0;
var theX:Number = 19;
var theY:Number = 585;
while(i<30) {
var follower:Follower = new Follower();
follower.x = theX;
follower.y = theY;
follower.name = "follower"+String(i);
addChild(follower);
objArray.push(follower);
theX += 20;
i++;
}
}
private function reposition(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.CLICK, reposition);
_tween = new GTween(click_txt, .3, {alpha:0}, {ease:Quadratic.easeIn});
var i:Number = 0;
var delay:Number = 0;
while(i<30){
trace("while loop");
var xDest:Number = mouseX + ((Math.round(Math.random()*160)) - 80);
var yDest:Number = mouseY + ((Math.round(Math.random()*160)) - 80);
trace("xDest = "+xDest+" & yDest = "+yDest);
_tween = new GTween(objArray[i], .6, {x:xDest, y:yDest}, {ease:Quadratic.easeOut, reflect:false, repeatCount:1, delay:delay});
delay += .06;
i++;
}
_tween = new GTween(reverser, .4, {x:mouseX, y:mouseY}, {ease:Quadratic.easeOut, reflect:true, repeatCount:2, onComplete:handleComplete});
}
private function handleComplete(e:GTween):void {
stage.addEventListener(MouseEvent.CLICK, reposition, false, 0, true);
_tween = new GTween(click_txt, .3, {alpha:1}, {ease:Quadratic.easeOut});
}
}
}
the experiment:
the post by Kaiyi Wong was not only great inspiration, it also gave me an idea for an an experiment I could make.
how if the squares was not just squares but part of a picture?
well, I sliced up this beauty of a picture, and set up an experiment:
check out the experiment of animating with GTween here – 9 slices
check out the experiment of animating with GTween here – 25 slices
everytime you click the stage, the picture will move to this new position.
I like the 25 slice experiment, looks kinda nice.
more GTween:
interested in more about GTween, read my first post on the topic here:
ActionScript 3.0: exploring GTween post 01: the ColorAdjustPlugin
credits:
the blog post by Kaiyi Wong
the Kuler theme used for these experiments
the GTween animation library
ActionScript 3.0: exploring GTween post 01: the ColorAdjustPlugin
if you want an easy access to adjust the colors of your Objects in Flash, why not consider the ColorAdjustPlugin in GTween.. well, I did, and here’s a couple of examples on how it works.
saturation:
taking saturation from 0 to -100 drags the colors from the Object,
this example shows how the saturation is changed from 0 to -100 in 3 seconds
and
this example shows how the saturation is changed from -100 to 0 in 3 seconds
but saturation ranges from -100 to 100 so
this example shows how the saturation is changed from 0 to 100 in 3 seconds
and for the sake of funkiness,
this example shows how the saturation repeatedly is changed from -100 to 100 and back in 1 second
contrast:
the contrasts of the colors in the picture can be taken to the extreme (100) og the opposite (-100), adding contrast intensifies the effect of saturation
this example shows how the saturation repeatedly is changed from -100 to 100 and back in 3 seconds – while contrast is changing from 0 to 100
possibilities:
the ColorAdjustPlugin handles tweening an Object based on the “brightness”, “contrast”, “saturation”, and/or “hue” tween values, so go on, try it for yourself.
ActionScript:
the ActionScript for the last example can be grabbed here
import com.gskinner.motion.GTween;
import com.gskinner.motion.plugins.ColorAdjustPlugin;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
public class GTweenColorAdjust extends MovieClip {
public var image:Sprite;
public var myButton:MovieClip;
public function GTweenColorAdjust() {
ColorAdjustPlugin.install();
myButton.mouseChildren = false;
myButton.buttonMode = true;
myButton.addEventListener(MouseEvent.CLICK, doTheAnimation, false, 0, true);
}
private function doTheAnimation(e:MouseEvent):void {
new GTween(image, 3, {saturation:-100, contrast:100}, {repeatCount:0, reflect:true});
}
}
}
more on GTween will surely follow..
btw, the amazed guy in the picture is my friend and former colleague Rasmus Mikkelsen.
Rasmus was also a part of this scary videobanner-project
Knowing how to calculate the compression of your Flash Video (.FLV)
If you want your viewers to be able to see your Flash Video on the internet without buffering or other annoying obstacles, you have to consider these 2 parameters:
- the kbps of the Flash Video / the kilo bit per second
- the speed of the viewers internetconnection
Imagine this scenario:
Some random dude wants to view a (progressively shown) Flash Video with a kbps of 768.
In theory he should see the Flash Video without any problems if the user has an internet connection with a speed of 0,768 Mbit.
But, it is not as simple as this.
Friends and I have several times tested the effiency of an internet connection and found, that ca. 20% of the speed of an internet connection is used to “send and recieve packages”..
So, to watch the Flash Video our random dude needs an internet connection with at least this speed:
768 x 1,25 = 960 kbps
Besides that, the following can affect the internet connection too:
- if using wireless internet, the internet connection might not be used fully.
- if using the internet connection to any other things (other tabs in the browser, netradio, etc) it will occupy some of the capacity of the internet connection.
These factors are too undocumented and individually to be a part of this calculation.
The conclusion on the above must be, that if wanting to watch a video on the internet compressed with a kbps of 768, you need a 0.96 Mbit internet connection.. AT LEAST. which would in reality would be a 1 Mbit connection.
hope this was useful :O)
ActionScript 3.0: how to control panning of a SoundTransform Object / laid back jazz video
having seen a video by Morten Andreasen, I was inspired to do some similar stuff.
so I came up with this short, interactive music video of me playing a jazz-piece, enjoy.
the cool thing is absolutely that either the lead or the rhythm guitar can be muted, so if you find the muddy rhythm guitar the more interesting instrument, just unplug that bluesy lead!
the workflow:
the music was recorded in Garageband, the different video-tracks edited in After Effects and dubbed to the Garageband-track, and finally a FLV (Flash Video) file from After Effects was setup in Flash making the whole thing interactive. the nice track is originally by Muris Varajic .. by the way, it took me like forever to learn those crazy jazz rhythm chords 
for actionscripters:
the track is exported in stereo from Garageband with the rhythm guitar in one side and the lead guitar in the other side.
so when choosing one instrument in the video, what is actually is done is telling the SoundTransform Object that controls the panning of the NetStream what music to play. does it have to play full pan left, full pan right or no panning (balanced center between right and left).
the ActionScript (the panning bit):
if(e.currentTarget.name == "rhythm"){
videoVolumeTransform.pan = Math.round(-1);
} else if(e.currentTarget.name == "lead"){
videoVolumeTransform.pan = Math.round(1);
} else if(e.currentTarget.name == "duo"){
videoVolumeTransform.pan = Math.round(0);
} else {
//
}
stream.soundTransform = videoVolumeTransform;
}
other blogposts on music or video:
check out the video for Hawkeye and Hoe band
check out the acoustic variation on Map of your mind by Muse
check out this post on how to use ASCuePoints in ActionScript 3.0
check out this post on how to add a fullscreen option to your FLV’s
check out this post on how to loop an FLV using the FLVPlayBack component
credits:
Morten Andreasen and this video:
Muris Varajic from guitarmasterclass