Animation og brug af logo for Nupark lavet med Tweener
tirsdag, 4 maj 2010
Per Henriksen fra Co4 bookede for nyligt mig til at lave lidt animation på det nye logo for Nupark i Holstebro.
Her kommer lidt om tankerne bag, opbygningen af og den endelige brug af animationen.
Nupark, Holstebro
Nupark i Holstebro er en mulighed for opstart af vækstorienterede virksomheder. Det er den gode opstartsløsning for idérige, innovative virksomheder, der ud over et kontormiljø også har brug for møde- og kursuslokaler, rådgivning, sparring, kantinefacaliteter, fælles reception og andet, men ikke nødvendigvis har økonomi til at huse det hele selv.
I Nupark forefindes de optimale rammer, men udgiften til og brugen af rammerne deles man om. I Nupark findes derfor små og mellemstore virksomheder, der nyder rigtigt godt at dette.
Det nye Nupark logo
Det nye Nupark logo er designet af Per Henriksen og symboliserer alle disse spirende virksomheder:
Symbolværdien af animationen
Egentligt skulle logo’et bare have været brugt som et element i en Powerpoint vist under en præsentation af det nye Nupark, men med animationen kom vi et skridt videre. Vi ønskede at animere de forskellige bobler i logo’et, så de bedst muligt repræsenterede virkeligheden.
Derfor skulle boblerne:
- variere i farve og størrelse, for at præsentere de forskellige størrelser og typer af virksomheder, der findes i Nupark.
- animere med forskellige baner og hastighed for at vise den handlefrihed man som virksomhed har i Nupark.
- helst blandes, køre ind over hinanden for at illustrere den tilknytning, det sammenhold og den sparring man som virksomhed ville kunne nyde godt af i Nupark.
- slutteligt ryge ovenud af skærmen og erstattes af nye som en animation på det flow, der er i et væksthus som Nupark.
Den endelige animation – netversionen
Animationen ovenfor er en netversion af den endelige version.
Har du lyst kan du hente programmet til din egen PC eller Mac her. Så kan du prøve at se den i fullscreen, hvilket bestemt også klæder animationen.
Den endelige animation – video
Til præsentationen af det nye Nupark, blev animationen dog installeret som program på en computer, der viste animationen på et stort lærred i et auditorium. Det så super godt ud. Til dagen fik jeg Lisa Ingemann Hansen til at skyde denne stump video, der viser brugen af animationen i auditoriet:
Opbygningen af animationen i ActionScript 3.0 og med Tweener
Animationen består næsten udelukkende af kode. Det eneste element, der er lavet i Flash er en lille sort cirkel, der repræsenterer den mindste størrelse boblen må have.
Boblen bliver så skaleret og derefter placeret tilfældigt på en placering på Flash’ens x-akse. Den bliver også placeret under selve scenen, ligesom den får tildelt en af 6 tilfældige farver. Slutteligt bliver den lavet usynlig, så det er muligt at fade den ind.
Alt dette bliver klaret med følgende ActionScript:
//TRANSFORM THE BUBBLE
//SCALE
_bubble.scaleX = _bubble.scaleY = Math.ceil(Math.random()*8);
//POSITION
_bubble.x = Math.floor(Math.random()*(500-50)+50);
//POSITION
//_bubble.y = 300 - (_bubble.height / 2);
_bubble.y = 300 + (_bubble.height);
//COLOR
Tweener.addTween(_bubble, {_color:_colors[Math.floor(Math.random()*6)], time:0});
//ALPHA
_bubble.alpha = 0;
Derefter bliver dens bevægelsesmønster oprettet. Som du nok har lagt mærke til, er bevægelsen kendetegnet ved ikke at følge en lige streg, men en kurve.
Dette kan heldigvis rimeligt nemt klares, når man har Tweener til hjælp. Man opretter blot et Array med punkter, der kan bruges som punkter i en bezier kurve, og danner så sin bevægelse nedefra og op med denne bezier-kurve. Samtidigt med at boblerne begynder at bevæge sig opad fader de også ind:
var myPath:Array = new Array();
myPath.push({x:_bubble.x + (Math.random()*200 - 100), y:300/3 * 2 + (Math.random()*100 - 50)});
myPath.push({x:_bubble.x + (Math.random()*200 - 100), y:300/3 + (Math.random()*100 - 50)});
var myDelay:Number = 0;
var myTime:Number = Math.floor(Math.random()*15 + 5);
Tweener.addTween(_bubble, {alpha:1, time:1, delay:myDelay, transition:"Linear"});
Tweener.addTween(_bubble, {x:_bubble.x, y:0-_bubble.height, _bezier:myPath, time:myTime, delay:myDelay, transition:"Linear", onComplete:BubbleCompleted, onCompleteParams:[_bubble]});
Dette er blot en hurtig gennemgang af koden, men det er for at vise, hvor simpelt dette egentligt kan gennemføres med ActionScript 3.0, Tweener og blot et enkelt grafisk element.
Vil du i dybden med koden kan du se hele koden her:
import caurina.transitions.Tweener;
import caurina.transitions.properties.ColorShortcuts;
import caurina.transitions.properties.CurveModifiers;
import flash.display.MovieClip;
import flash.geom.ColorTransform;
import flash.system.fscommand;
import flash.text.TextField;
public class Nupark_bobler extends MovieClip {
private var _colors:Array = [0x015293, 0x28B4E5, 0x73C2E9, 0xE3F1FA, 0x84B818, 0xDDDC22];
private var _bubble:Bubble;
public function Nupark_bobler() {
fscommand("allowscale", "true");
fscommand("fullscreen", "true");
CurveModifiers.init();
ColorShortcuts.init();
var i:Number = 0;
while(i < 35) {
BubbleAnimation();
i++;
}
}
private function BubbleAnimation():void {
_bubble = new Bubble();
//TRANSFORM THE BUBBLE
//SCALE
_bubble.scaleX = _bubble.scaleY = Math.ceil(Math.random()*8);
//POSITION
_bubble.x = Math.floor(Math.random()*(500-50)+50);
//POSITION
//_bubble.y = 300 - (_bubble.height / 2);
_bubble.y = 300 + (_bubble.height);
//COLOR
Tweener.addTween(_bubble, {_color:_colors[Math.floor(Math.random()*6)], time:0});
//ALPHA
_bubble.alpha = 0;
//MOVEMENT
var myPath:Array = new Array();
myPath.push({x:_bubble.x + (Math.random()*200 - 100), y:300/3 * 2 + (Math.random()*100 - 50)});
myPath.push({x:_bubble.x + (Math.random()*200 - 100), y:300/3 + (Math.random()*100 - 50)});
var myDelay:Number;
if(numChildren == 34){
trace("delay = 0");
myDelay = 0;
} else {
myDelay = Math.floor(Math.random()*15);
}
var myTime:Number = Math.floor(Math.random()*15 + 5);
Tweener.addTween(_bubble, {alpha:1, time:1, delay:myDelay, transition:"Linear"});
Tweener.addTween(_bubble, {x:_bubble.x, y:0-_bubble.height, _bezier:myPath, time:myTime, delay:myDelay, transition:"Linear", onComplete:BubbleCompleted, onCompleteParams:[_bubble]});
/*
trace("_bubble.width = "+_bubble.width);
trace("_bubble.height = "+_bubble.height);
trace("300 = "+300);
trace("500 = "+500);
trace("_bubble.x = "+_bubble.x);
trace("_bubble.y = "+_bubble.y);
*/
//trace(numChildren);
addChild(_bubble);
}
private function BubbleCompleted(item:MovieClip):void {
//trace("completed: "+item);
Tweener.addTween(item, {alpha:0, time:1, transition:"Linear", onComplete:BubbleFaded, onCompleteParams:[item]});
}
private function BubbleFaded(item:MovieClip):void {
removeChild(item);
BubbleAnimation();
}
}
}
Mere om Tweener
Har du lyst til at læse mere om Tweener, har jeg skrevet denne introduktion til brugen af animationsbiblioteket Tweener.
Credits
Per Henriksen fra Co4 for designet af det nye logo.
Lisa Ingemann Hansen for optagelserne fra Nupark.
Zeh Fernando for Tweener
No. 1 — maj 4th, 2010 at 19:04
Det ser super godt ud Felix! Kan godt lide det overskyggende dynamiske element, som hele tiden ændrer det visuelle udtryk men bibeholder genkendeligeheden.
No. 2 — maj 4th, 2010 at 19:22
Takker. Ja, det at du aldrig vil opleve den samme animation 2 gange er meget cool. Jeg er gået all in på kontrolleret tilfældighed denne gang. Håber det kan inspirere dig i din AS3 uge..
No. 3 — maj 4th, 2010 at 19:40
Lækker effekt!
Dejligt at se at du gå all-in på kode spas! (igen)
Det er vel relativt simpelt at skifte boblerne ud med et anden element. Kunne forestille mig at man kunne lave noget ret “realistisk” røg.
No. 4 — maj 4th, 2010 at 20:52
Yeps, det er easy as pie.
Sig til, hvis opbygningen bøvler, jeg er med på at lave lidt alternativerier over dette tema!
No. 5 — maj 5th, 2010 at 05:29
Synes den slags visuelle identiteter udnytter nye principper indenfor logodesign. Det er fedt!
Det får mig til at tænke på en case fra studiet omkring logoet for Casa da Música i Porto. Logoet er lavet af guruen Stefan Sagmesiter og ændres helt afhængigt af hvor det skal bruges!
Jeg har desværre ikke nogle slides fra casen på studiet, men der er en interessant artikel om logo-projektet her: http://www.underconsideration.com/brandnew/archives/the_17_sides_of_a_cultural_ide.php
No. 6 — maj 5th, 2010 at 06:16
Wow, det er vildt nok tænkt, det der.
Det vil jeg se, om jeg kan presse ind i mine 4 timers produktionstid næste gang