Archive for the ‘XML’ tag
ActionScript 3.0: logobanner for MCH Messecenter Herning / Porsche 911 Carrera 4/4S Cabriolet gallery
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.
the ActionScript for the logobanner:
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
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.
showcase: an XML-based double picture module with zoom
some time ago, I did this DoublePictureModule, but have never really written a post about it.
actually, the module works quite nicely.
it reacts to an equal amount of pictures listed in an XML-file.
each set of pictures is showed in the Flash and a nice reflection is created too.
each picture can be seen in a larger version, and when zoomed in, the picture can be moved around, so details can be seen.
check out the DoublePictureModule here:
feel free to comment on it!
the DoublePictureModule is written in ActionScript 3.0 and uses Tweener.
the pictures are by Stig Meyer Jensen and is from the soccer match FCM vs FCK on the 20th of june 2009.
showcase: Mac-alike menu
did this intro recently.
It’s designed as an alternative, Mac OS X-looking menu with simulated 3D look and the unavoidable reflection.
the pictures, menutexts and links are all updated in an external XML-file.
check it out here:
http://campjohn.dk/AS3/Co3/Proline/index_dynamic.html
all sushi pictures in the example above are by Ariel da Silva Parreira, Mexico, thanks for the great photos.
check out Ariels full set of pictures here:
http://www.sxc.hu/profile/arinas74
this flash is made in ActionScript 3.0 and is using Tweener.
ActionScript 3.0: how to read that XML, part 1
ok, you want to read stuff from XML in Flash.
imagine this being your XML:
<examples>
<header>master example</header>
<example number="1">This is my first example</example>
<example>This is my second example</example>
<example>This is my third example</example>
</examples>
this XML is called example.xml
the first thing to happen is to actually load the XML into flash.
this will be done using a URLLoader.
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
public class ReadingStuffFromXML extends Sprite {
var _theXML:XML;
public function ReadingStuffFromXML():void {
trace("works");
init()
}
private function init():void {
loadXML();
}
private function loadXML():void {
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest("example.xml");
loader.addEventListener(Event.COMPLETE, xmlLoaded, false, 0, true);
loader.addEventListener(IOErrorEvent.IO_ERROR, xmlError, false, 0, true);
loader.load(request);
}
so, a loader is created, and the loader starts loading the XML.
an eventListener is also created, that will handle the what-to-do when the XML is loaded:
_theXML = new XML(e.target.data);
traceStuff();
}
this calls the function traceStuff, that will show how to trace the different things from the XML:
//the content in the header
trace("_theXML.header = "+_theXML.header); //output: master example
trace("");
//the content in the first example-node
trace("_theXML.example[0] = "+_theXML.example[0]); //output: This is my first example
trace("");
//number of example-nodes
trace("_theXML.example = "+_theXML.example.length()); //output: 3
trace("");
//reading the content of the attribute in the first example-node
trace("_theXML.example[0].@number = "+_theXML.example[0].@number);
trace("");
}
}
}
hope this was useful.
loading XML into Flash is a thing I use over and over again.
and adding content to the Flash using XML makes the Flash very dynamic and any customer of yours will be able to update the Flash themselves.
here’s the entire code used in this example:
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
public class ReadingStuffFromXML extends Sprite {
var _theXML:XML;
public function ReadingStuffFromXML():void {
trace("works");
init()
}
private function init():void {
loadXML();
}
private function loadXML():void {
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest("example.xml");
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 {
_theXML = new XML(e.target.data);
traceStuff();
}
private function xmlError(e:Event):void {
trace("error loading");
}
private function traceStuff():void {
//the content in the header
trace("_theXML.header = "+_theXML.header); //output: master example
trace("");
//the content in the first example-node
trace("_theXML.example[0] = "+_theXML.example[0]); //output: This is my first example
trace("");
//number of example-nodes
trace("_theXML.example = "+_theXML.example.length()); //output: 3
trace("");
//reading the content of the attribute in the first example-node
trace("_theXML.example[0].@number = "+_theXML.example[0].@number);
trace("");
}
}
}
showcase: bouncy 2 level menu in Flash
along with (past and present) colleagues Lars Wichmann, Iben Louise Birkkjær Christensen and Martin Vestergaard Nielsen I’ve been experimenting doing a bouncy 2 level menu in Flash. as the project developed it became clearer and clearer that we would not need the menu in the end, but having spend a lot of time on the project I thought I’d finish the example anyway.
so here it is:
bouncy 2 level menu made in Flash
clicking the menu will show the smooth bouncy style we build into the menu.
the menu is fed with XML and build in ActionScript 3.0 using Tweener.
the entire menu is only 64 kb.
showcase: looping slidegallery made in ActionScript 3.0
yet again, I find myself doing a gallery in ActionScript.
most times new features are developed and added, luckily 
so, this time the gallery should be able to loop endlessly.
in the example below, I add 5 pictures to the Flash through XML. but when rotating the gallery to the right it will not stop at picture 5, no it’ll just continue to rotate to the right, starting from picture 1 again.
check out the looping slidegallery here:
furthermore, the slidegallery accepts another parameter; where to start.
if you want the slidegallery to start at picture 2, you just add this as an URLparameter, like you add the XML.
here’s how it’s added:
var theXML = "PV_showroom.xml";
var theStartpicture = "t03.jpg";
var so = new SWFObject("slideGallerypreloader.swf?whatXML="+theXML+"&whatStartpicture="+theStartpicture.....
the gallery is made in ActionScript 3.0 and uses Tweener.
additional info.
the pictures in this slideGallery are screenshots from the website t-rex-engineering.com, an absolutely amazing site to visit, when you’re looking for new pedals to enhance the sound of your electric guitar.
showcase: a polaroid picture gallery made in Flash
even though having just finished one picture gallery 3 days ago: showcase: using a dynamic banner made in Flash for a photo gallery I guess I still had appetite for more.
so I re-invented the polaroid a bit, and made this gallery of polaroids:
http://campjohn.dk/AS3/Co3/Invita/PolaroidGallery/
each polaroid in this solution consists of a picture, some text and a link.
all pictures, texts and links are added dynamically using XML.
each polaroid can be clicked and dragged to another position.
if a polaroid is just clicked, it links to the picture from Daniel Jaeger Vendruscolos profile page at sxc
all pictures are by Daniel Jaeger Vendruscolo from Pato Branco, Paraná, Brazil, thanks Daniel.
the polaroid gallery is made in ActionScript 3.0 and uses Tweener.
hope you like it.
showcase: newstickers in ActionScript 2.0 and 3.0 for aoh.dk and sparoj.dk
during the years I have made different types of newstickers.
here are 2 types, made for aoh.dk and sparoj.dk.
the newsticker for aoh.dk is made in ActionScript 2.0 and fed with XML and looks like this:
see the newsticker for aoh.dk here
separating the different info from the XML using the firstChild.firstChild.firstChild syntax was not easy at all, but I made it work. the different info from the XML is then made into links and moved across stage using Tweener. finally the text was styled and an mouseListener made, that reacted when the mouse was over the TextArea.
—–
the newsticker for sparoj.dk is made with ActionScript 3.0 and fed with 3 URLParameters, like this:
var whatnewstext = "someText"
var whatlink = "someLink"
var whatalternativetext = "someAlternativeText"
var so = new SWFObject("newsticker.swf?whatnewstext="+whatnewstext+"&whatlink="+whatlink+"&whatalternativetext="+whatalternativetext, "billedModul", "978", "40", "9", "#000000");
so.write("newsticker_alt");
</script>
.
the first URLParameter is the text to be read in the newsticker, i. e:
This is text added to the .swf as an URLParameter – If this text doesn’t exist alternative text will be showed instead
the second URLParameter is the link the ‘read more’-button should navigate to, if clicked.
but what if the newsticker is to show no news.
then we’ll leave the first and the second URLParameter blank and use the 3rd URLParemeter instead. this parameter is a string containing alternative text i. e. and adress, a statement, or in this example, this text:
Read lots of stuff about especially Flash, ActionScript, FLV, Video and After Effects on my blog: http://www.campjohn.dk/wp
any text from the 3rd URLParameter placed on Stage will not be moving.
this 3rd URLParameter could be blank, leaving the entire newsticker without text at all.
here’s an example of the newsticker showing news
here’s an example of the newsticker showing alternative text
ActionScript 3.0: hotspots and pictures from XML to Flash
i’ve just finished a module that reads coordinates and pictures in XML and places hotspots on each set of coordinates.
when clicking each hotspot, a picture with more info is shown, and when clicking that picture it dissapears again.
each picture can be placed at 5 different places on the stage:
- north west from the hotspots 0, 0 position
- north east from the hotspots 0, 0 position
- south west from the hotspots 0, 0 position
- south east from the hotspots 0, 0 position
- centered on the stage
check out the ‘hotspots and pictures from XML to Flash’-module here
be sure to click the hotspot in the upper left corner, it’s picture is placed south east of the hotspots 0,0 coordinate.. every other picture in the example is placed centered on the stage.
the XML (simplified) looks like this:
<stortBillede>Visbyvej-1.jpg</stortBillede>
<infospecs>
<billede>fordel_1.png</billede>
<xpos>10</xpos>
<ypos>30</ypos>
<position>se</position>
</infospecs>
<infospecs>
<billede>fordel_2.png</billede>
<xpos>210</xpos>
<ypos>50</ypos>
<position>center</position>
</infospecs>
</info>
the first hotspot is placed at x=10 and y=30, and the picture fordel_1.png is placed southeast of these coordinates.
the second hotspot is placed at x=210 and y=50 and the picture fordel_2.png is placed centered on the stage.
placing the pictures correctly was somewhat a mouthful, but finally I succeeded.
I loaded each picture completely, stored it and it’s position (nw, ne, sw, se or center) in Arrays and placed the picture on stage.
then I had to reorganize each picture, which was done with this function:
for (var i=0; i<_numOfLoops; i++) {
_arrayLoadedInfo[i].x = 0;
_arrayLoadedInfo[i].y = 0;
if(_arrayP[i] == "nw"){
_arrayLoadedInfo[i].x = _xml.infospecs[i].xpos;
_arrayLoadedInfo[i].y = _xml.infospecs[i].ypos;
_arrayLoadedInfo[i].x -= _arrayLoadedInfo[i].width;
_arrayLoadedInfo[i].y -= _arrayLoadedInfo[i].height;
} else if(_arrayP[i] == "ne"){
_arrayLoadedInfo[i].x = _xml.infospecs[i].xpos;
_arrayLoadedInfo[i].y = _xml.infospecs[i].ypos;
_arrayLoadedInfo[i].y -= _arrayLoadedInfo[i].height;
} else if(_arrayP[i] == "sw"){
_arrayLoadedInfo[i].x = _xml.infospecs[i].xpos;
_arrayLoadedInfo[i].y = _xml.infospecs[i].ypos;
_arrayLoadedInfo[i].x -= _arrayLoadedInfo[i].width;
} else if(_arrayP[i] == "center"){
_arrayLoadedInfo[i].x = (Number(_stageWidth) / 2) - (Number(_arrayLoadedInfo[i].width) / 2);
_arrayLoadedInfo[i].y = (Number(_stageHeight) / 2) - (Number(_arrayLoadedInfo[i].height) / 2);
} else {
_arrayLoadedInfo[i].x = _xml.infospecs[i].xpos;
_arrayLoadedInfo[i].y = _xml.infospecs[i].ypos;
}
}
}:
a for loop loops the XML, and places each picture correctly.
i. e. the XML shown above.
the first picture has a position of se and these coordinates, x=10, y=30.
the loop is looped and the commands in the “else” part are completed – placing the picture at the same coordinates as the hotspot.
the second picture has a position of center and these coordinates, x=210, y=50
the loop is looped and the commands in the “else if” part are completed – placing the picture in the center of the stage.
sweet, right?