Archive for the ‘Banner’ Category
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
showcase: SYD ENERGI banners by Esben Hindhede
having written about banners recently, I just had to show this banner by my colleague Esben Hindhede.
first of all; these recent 4 banners made in 4 hours by Maria Bøge Sørensen might not be as impressive as these new banners by Esben Hindhede.
but please notice, the creation of these new marvelous banners by Esben Hindhede took about 4 times as long to create.
check out the banners by Esben Hindhede for SYD ENERGI here
I like these new banners very much, I like the details and the speed in the animation.
I definitely prefer banners that are worked thoroughly through like this.
nice work, Esben!
check out these previous banners mentioned in this blog:
scary videobanner for woodi.dk
using clickTag in ActionScript 3.0
banners made from august 2007 – august 2008
showcase: 2 simple banners for MCH Messecenter Herning
today I created these 2 simple dynamic banners for MCH.
the first one is a competition-banner:
http://campjohn.dk/AS3/Co3/MCH/Competition/MCHKonkurrence.html
this banner has the following updateable parameters:
- the picture
- the link
- the headertext
- the text
- the color of the headertext
- the color of the text
the second one is just a banner of some text and a picture:
http://campjohn.dk/AS3/Co3/MCH/TextPicture/tekstbilledebanner.html
this banner has the following updateable parameters:
- the picture
- the link
- the text
- the color of the text
the idea was to make two setups for MCH, that they quickly could alter and use again and agin for almost any purpose. my colleague Theis Poulsen set up a backend editor that actually makes it very ease to change these parameters.
when the parameters are changed they are then added to the Flash like this:
the making of the banners ended took me 5 hours.
see earlier stuff made for MCH here:
showcase: different stuff for MCH Messecenter Herning
Timeline animation: 4 banners in 4 hours
this week my friend and colleague Maria Bøge Sørensen was given this assignment:
make 4 banners for 4 different customers in 4 hours.
here’s what Maria ended up with:
check out the 4 different banners made in 4 hours
I think my favorite is the one for Ikast Byliv, which one is your favorite?
showcase: using a dynamic banner made in Flash for a photo gallery
some time ago I made this dynamic banner, and looking back at it today made me realize what a nice little piece of work, I has actually done :O)
the banner is quite simple.
it’s dynamically build and accepts 5 parameters:
- some text
- a headline
- another headline
- a picture
- a link
so feeding the dynamic banner with these parameters and using it several times I made this small picturegallery:
check out the picture gallery
all pictures in this picture gallery are shot by Andrew Beierle, thanks Andrew :O)
the banner is made in ActionScript 3.0 and uses Tweener.
hope you like the picture gallery.
showcase: scary videobanner for woodi.dk
recently I did this “scary video banner” for woodi.dk
it’s made up of a loop of 3 stills from the film, a mask made of a Roy Lichtenstein-inspired pattern and the film itself.
the loop loops until the mouse is over the banner, then the loop fades out and the film starts.
on click, the banner links to woodi.dk/
the click is disabled in this version of the banner
check out the scary video banner for woodi.dk here
Rasmus Mikkelsen did lots of the graphic work on this, thanks
ActionScript 3.0: how to use clickTag
if this is the embedding of the swf:
grab your clickTag from the .html-embedding:
var clickTag:String = String(root.loaderInfo.parameters.clickTAG);
await the click:
_trigger.addEventListener(MouseEvent.CLICK, activateClickTag);
the function:
function activateClickTag(e:Event):void {
var request:URLRequest = new URLRequest(clickTag);
navigateToURL(request, “_parent”);
}
the full code ready for ActionScript:
_trigger.addEventListener(MouseEvent.CLICK, activateClickTag);
function activateClickTag(e:Event):void {
var request:URLRequest = new URLRequest(clickTag);
navigateToURL(request, "_parent");
}
different banners made during the last year
as I’ve decided to republish the whole blog – in english, and with a proper way of showing the ActionScript – I’ve collected all of the posts regarding banners made during the last year in this post:
—–
here you can check out 2 banners promoting the june version of the Olav de Linde magazine, check ‘em out:
banner sized 960×200 for Olav de Linde
banner sized 300×250 for Olav de Linde
—–
here you can see 2 image-banners made for
camp4 and Olav de Linde.
image banner sized 960×200 for Olav de Linde
image banner sized 300×250 for Olav de Linde
both banners are made using ActionScript 2.0 and Tweener.
the code to make them act as they do can be seen here:
//imports
import caurina.transitions.Tweener;
//init
tekst1._alpha = 100;
tekst2._alpha = 0;
tekst3._alpha = 0;
tekst4._alpha = 0;
//animation
Tweener.addTween(billedet,{_x:-80, time:2, delay:4, transition:"easeInOutBack"});
Tweener.addTween(billedet,{_x:-160, time:2, delay:8, transition:"easeInOutBack"});
Tweener.addTween(billedet,{_x:-212, time:2, delay:12, transition:"easeInOutBack"});
Tweener.addTween(billedet,{_x:-20, time:2, delay:20, transition:"easeInOutBack"});
Tweener.addTween(billedet,{_x:-80, time:2, delay:24, transition:"easeInOutBack"});
Tweener.addTween(billedet,{_x:-160, time:2, delay:28, transition:"easeInOutBack"});
Tweener.addTween(billedet,{_x:-212, time:2, delay:32, transition:"easeInOutBack"});
Tweener.addTween(billedet,{_x:-20, time:2, delay:40, transition:"easeInOutBack"});
Tweener.addTween(billedet,{_x:-80, time:2, delay:44, transition:"easeInOutBack"});
Tweener.addTween(billedet,{_x:-160, time:2, delay:48, transition:"easeInOutBack"});
Tweener.addTween(billedet,{_x:-212, time:2, delay:52, transition:"easeInOutBack"});
Tweener.addTween(tekst1,{_alpha:0, time:0.4, delay:3, transition:"linear"});
Tweener.addTween(tekst2,{_alpha:100, time:0.6, delay:3.5, transition:"linear"});
Tweener.addTween(tekst2,{_alpha:0, time:0.4, delay:7, transition:"linear"});
Tweener.addTween(tekst3,{_alpha:100, time:0.6, delay:7.5, transition:"linear"});
Tweener.addTween(tekst3,{_alpha:0, time:0.4, delay:11, transition:"linear"});
Tweener.addTween(tekst4,{_alpha:100, time:0.6, delay:11.5, transition:"linear"});
Tweener.addTween(tekst4,{_alpha:0, time:0.4, delay:19, transition:"linear"});
Tweener.addTween(tekst1,{_alpha:100, time:0.6, delay:19.5, transition:"linear"});
Tweener.addTween(tekst1,{_alpha:0, time:0.4, delay:23, transition:"linear"});
Tweener.addTween(tekst2,{_alpha:100, time:0.6, delay:23.5, transition:"linear"});
Tweener.addTween(tekst2,{_alpha:0, time:0.4, delay:27, transition:"linear"});
Tweener.addTween(tekst3,{_alpha:100, time:0.6, delay:27.5, transition:"linear"});
Tweener.addTween(tekst3,{_alpha:0, time:0.4, delay:31, transition:"linear"});
Tweener.addTween(tekst4,{_alpha:100, time:0.6, delay:31.5, transition:"linear"});
Tweener.addTween(tekst4,{_alpha:0, time:0.4, delay:39, transition:"linear"});
Tweener.addTween(tekst1,{_alpha:100, time:0.6, delay:39.5, transition:"linear"});
Tweener.addTween(tekst1,{_alpha:0, time:0.4, delay:43, transition:"linear"});
Tweener.addTween(tekst2,{_alpha:100, time:0.6, delay:43.5, transition:"linear"});
Tweener.addTween(tekst2,{_alpha:0, time:0.4, delay:47, transition:"linear"});
Tweener.addTween(tekst3,{_alpha:100, time:0.6, delay:47.5, transition:"linear"});
Tweener.addTween(tekst3,{_alpha:0, time:0.4, delay:51, transition:"linear"});
Tweener.addTween(tekst4,{_alpha:100, time:0.6, delay:51.5, transition:"linear"});
Tweener.addTween(tekst4,{_alpha:0, time:0.4, delay:59, transition:"linear"});
Tweener.addTween(tekst1,{_alpha:100, time:0.6, delay:59.5, transition:"linear"});
usynlig.onRelease = function(){
getURL("http://www.olavdelinde.dk", "_blank");
}
fairly ordinary ActionScript and Tweener-code, no advanced stuff here.
kind of a “timeline-animation” written in code :O)
—–
banners for the Olav de Linde magazine.
this is an example of banners i’ve made almost without ActionScript but with timeline-animation.
image banner sized 960×200 for Olav de Linde
image banner sized 300×250 for Olav de Linde
—–
a banner made for casino.dk – a dynamic banner, casino.dk decides what to show, how long to show it and in which order.
to manage this ActionScript 3.0 and XML is used.
check out an example of the banner made for casino.dk here:
—–
a friend of mine – Søren Dybdal – has made a banner for the band Dawn of Demise to promote their new album. this banner is made is After Effects.
I’ve never made a banner for the internet in After Effects, so to me, this approach is very interesting.
—–
a friend of mine – Alex Hulgaard – has become head of PR at Ikast FS.
he talked me into making this banner – editable from XML.
technical: the logo in this banner is always placed on top of the pictures by constantly adding it to the end of the DisplayList:
bonus-info: Ikast FS is a soccer team from Denmark, and from 1992 to 1999, I saw almost all of their homegames lot of their matches.
therefore i’ve named movieclips, XML and other internal stuff in the making of this banner names like Antti Sumiala, Kern Lyhne, Jonas Dal Andersen, Drazen Besek, Chima Okorie and Henning Thinggaard.
a bit geeky, I admit :O)
had I needed more names in the making of the banner, names like Hagbard Andreasen, Torben Sjørvad, Jacob Juhl, og Petri “Kosso” Helin could surely be found also!
check out the banner for IFS – Ikast FS – here
—–
banners made for Jantzen Development
Jantzen banner version 01
Jantzen banner version 02
—–
i’ve also made a banner for the Herning-siteaoh.dk. this banner should randomly show 1 of 47 logos.
for easy access and editing, this was done with ActionScript 2.0 and XML
check out the logo-banner for aoh.dk here:
technical: the Flash has an XML-object and a MovieClipLoader-object.
the XML-object reads the length of the XML and uses the length in a function, that randomly chooses a logo from the XML and loads it onto a MovieClip using:
mcLoader.loadClip(logoXML.firstChild.childNodes[detValgteLogo].firstChild.nodeValue, logoholder_mc);
when a logo is loaded it fades in and later fades out again and the process starts all over again.
—–
a friend of mine – Kent Karlsson – has made this banner for BTX Group.
it’s a simple banner, but also a very elegant solution. love the way he always finds and uses graphics
check out Kent Karlssons banner here:
—–
Interieurgroup.com is a site for Tobi A/S, AM System A/S og M&N Interieur A/S.
Interieurgroup.com needed a portal connecting these 3 partners.
at first Per from Co4 and I had suggested this:
first try for Interieurgroup.com
but this wasn’t quite it, so instead a banner was made, inspired from the first try.
check out the banner made for interieurgroup.com here:
bonus-info: the banner was integrated into the site by Ineo