Præsentationsportfolio for Thomas Riis > Blog > Flash

Flash-bannerkampagne

Første idé
Vi holdt omkring 2 timers brainstorming. Her fik vi den ide at vi ville fokusere på dansk idrætsforbund og så lave animationer omkring flere forskellige sportsgrene.
Her er et afkog af hvad vi blev enige om.

Flashanimation:
En tændstikmand der bevæger sig igennem de forskellige sportsgrene.
Løb -> Basket -> Fodbold -> Volleyball -> Tennis -> Håndbold -> Spydkast -> Golf -> Svømning -> Løb forbi logo.
Løb -> Basket: Joe løber, han hopper efter et par sekunder og bliver til en basketball der ryger ned i et net. Bolden hopper lidt på gulvet og ligger sig stille.
Fodbold -> Volleyball: Joe kommer nu ind og sparker til bolden. Man følger bolden i luften der til sidst ryger ned og bliver slået til som en volleyball. Den ryger først fra højre mod venstre og derefter fra venstre mod højre. Man følger bolden i luften.
Volleyball -> Tennis: Bolden bliver nu slået til af en ketsjer, igen først fra højre mod venstre og så fra venstre mod højre. Man følger bolden i luften.
Tennis -> Håndbold: Joe griber bolden der er blevet skudt af sted fra tennis, vender sig om og kaster den af sted. Man følger bolden.
Håndbold -> Spydkast: Imens man følger bolden i luften forvandler den sig til et spyd som rammer jorden og bliver til et golf hul flag.
Spydkast -> Golf: Man ser nu Joe skyde en golfbold mod flaget men han skyder for langt og rammer vandet. Man følger bolden.
Golf -> Svømning: Man ser vandet som plasker efter bolden har ramt. Nu kommer Joes hoved op ad vandet og han begynder at svømme.
Svømning -> Slut: Joe har nu svømmet færdig, kravler op ad bassinet stiller sig ved siden af logoet.

Herefter løber han over logoet (fra venstre mod højre) og forsvinder ud af banneret.

Mit første udkast
Her en løbe animation (html/flash) som skulle fungere som grundmodel. Min første umiddelbare idé var at lave personen i illustrator og så importere delene i flash.

ai_view

Da han var importeret oprettede jeg et movieclip til hvert element. Altså et movieclip til hoved og et andet til højre fod osv. Jeg valgte så at lave min løber i hvid og baggrunden i rødt for at ligge op ad logofarverne for Dansk Idrætsforbund. Men vi var ikke enige i gruppen om dette forslag. Men vi var enige om at det var sådan vi ville håndtere Joes (vi kaldte vores figur Joe) bevægelser. Men blev dog noget senere enige om at vælge en anden fremgangsmåde. Vi ville gøre så løberen stod stille men baggrunden bevægede sig.

Stephanie havde lavet god løber som vi blev enige om at jeg skulle anvende og lave en animation på den nye måde.

Stephanies ‘løber’ var lavet som en ren keyframe-animation så jeg måtte lige klippe figuren i stykker så den blev delt i forskellige movieclips. På samme måde som allerede beskrevet. Her resultatet (html/Flash).

Jeg var ikke så godt tilfreds med det træ jeg havde lavet så jeg tænkte at jeg ville bruge mønstre i stedet. For at vise min idé til resten af gruppen. Lavede jeg følgende løsning.

Workflow

  • Lavede et mønster i photoshop
  • importerede mønstret i flash
  • Animerede mønstret (var ikke helt tilfreds)
  • Omstrukturerede – ombrød billedet (break appart) og skar et stykke bobler ud og kopierede det nogle gange ved at trække og holde ’alt’ knappen nede.
  • Ændrede alignment ”distribute horisontal”
  • Løbe animationen var ikke helt tilfredsstillende – fandt en gif animation for at lave retroscoping.
  • Tilføjede et ekstra movieclip til skygge.
  • Valgte at rotere det 180 grader og vende det horisontalt.
  • Brugte et maskelag til at skære noget skygge væk som så unaturligt ud.
  • Dublerede jeg løberklippet to gange for at lave en form for ”anitialias” omkring figuren i stedet for at anvende blur da jeg ville have at figuren skulle virke skarp.

Se løsningen her

Vi fandt imidlertid ud af, vi var blevet for ambitiøse. Vi frygtede at vi ikke ville kunne nå at blive færdige til tiden.

Ny brainstorming
Derfor havde vi en ny brainstorming – her blev vi enige om at vi hellere ville lave et mere simpelt projekt.

Der kunne blive mere professionelt end et halvfærdigt ambitiøst projekt. Alle var ret enige om beslutningen og ideerne var rigtig mange. Vi valgte at koncentrere os om en sportsgren i stedet for flere forskellige.

Boksning valgte vi. Vi valgte også at anvende billeder i stedet for tegninger hvor det gav mening. Dette for at lave et mere professionelt præg. For at holde vores bannere til samme standarder blev vi enige om at vi ville vælge samme font og farver.

Jeg havde en idé om at vi kunne anvende fonten ”capture it” da det er en font med et lidt hårdt look der vil fungere godt til bannere omkring boksning. Den vil med garanti ikke virke til et banner omkring klassisk ballet. Her er mit nye banner (html/Flash).

Først lavede jeg noget research på Google og Flickr ville finde nogle billeder omkring boksning, jeg ville bruge. Jeg fandt dog ud af at der alligevel ikke var noget af det, jeg havde fundet , jeg ville anvende. For min idé var – jeg ville ha at målgruppen eller  bannermodtagerne først skulle blive lækkersultne af en lækker burger. Men senere vælge om de helst vil have en veltrimmet krop eller en burger. Valget er deres eget. Min punchline blev “valget er dit”. Det ligger naturligvis op til at de skal vælge at træne i bokseklubben frem for at spise en burger.

Workflow

  • Research på Google og Flickr
  • Ændrede størrelser i Photoshop til 336×280 som er den størrelse banner jeg vil lave.
  • Importerede Photoshop filerne direkte i flash. Flash kan sagtens håndtere komprimeringen.
  • Disponerede hvor længe jeg ville vise de forskellige billeder og tekst. Der hvor der var meget tekst tog jeg højde for at modtageren skal kunne nå at læse budskabet.
  • Men som altid er jeg ikke tilfreds med timingen alligevel. Så jeg ”scrubber” en del.
  • Jeg valgte at anvende sort baggrund for at fremhæve burgeren og valgte så hvid tekst (god kontrast).
  • Lavede nu mine tekst animationer. Lavede først en motiontween der bare fik teksten til at glide ind.
  • Tilføjede en ekstra keyframe. Så jeg havde to keyframes hvor movieclippet lå ens positioneret.
  • Tilføjede så et lag og ”alt trak” i det lag jeg havde lavet første tekst animation på den måde havde jeg to ens animationer i to forskellige lag.
  • Trækkede så ”player-markøren” tilbage til den midterste keyframe.
  • Låste det første tekst klip.
  • Valgte det nye klip og rykkede det 10 px op og 10 px til venstre.
  • Foretog trin 9 igen.
  • Og ændrede positionen så dette klip blev lagt 10 px under det allerførste klip.
  • For at forstærke effekten af billedeskift oprettede jeg et lag med to frames i hvid farve. Det giver et bliz blink.
  • Anvendte disse effekter i hele banner animationen.
  • Havde en idé om at jeg ville anvende en masked shape-tween til at få billederne til at fremtone på en effektfuld måde.
  • Lavede en cirkel i frame 1 og lavede en ny tom key frame hvor jeg lavede en firkant i samme størrelse som billedet.
  • Omformede frames til shape-tween og ændrede laget til maske lag.
  • Da billedet lå under masken blev det til det maskede lag.

Gode ideer i gruppen:
Der var rigtig mange gode ideer i gruppen. Vi valgte de bedste ud. Og lavede alle sammen banner ud fra alle de mange ideer. Vi valgte min måde at animere hvordan de forskellige sætninger eller catch fraces gled ind. Denne teknik tillærte alle sig.

Samtidig havde jeg også et forslag til, at man kunne lave shape-tween der startede med at være en f.eks. en cirkel og så ende med at være en firkant. Det er der ikke nogen ben i – det lækre er at hvis man laver shape-tween’en til et maske lag. Får man en ganske fin effekt. Rasmus og Kasper havde nogen rigtig gode ideer omkring logoer.

Som baggrundsfarve valgte vi hvid. Ud fra det ræsonnement at bannere i alt for farvestrålende farver, mange gange ødelægger designet og langt de fleste bannere har hvid baggrund. Vi valgte fonten ”Capture it”. Vi var alle enige om at den ville passe godt til boksning det er en maskulin og hård font.

Bannere i forskellige størrelser
Vi blev enige om at lave bannere i flere forskellige størrelser som man normalt vil gøre i en banner kampagne. Vi lagde os op af de standard størrelser man normalt anvender på Internettet. Ikke alle de nye større banner størrelse var repræsenteret og størrelserne afhænger også typisk af det website hvor banner pladsen findes. Jeg opdaterede nu mit banner så det levede op til disse krav. Logoet ville jeg tilføje når det var klart.

Fonten har ikke æøå
Ligesom vi var blevet enige omkring den font vi ville anvende gik det op for os, den ikke indeholdt æøå. Gys for så kunne vi ikke benytte den. Jeg gik i gang med søgningen. Fandt forskellige fonte der mindede lidt om “capture it” fonten. Kunne pludselig huske en font jeg har benyttet før – ‘downcome’.

Forslog den til de andre. De var alle enige med mig i at den var et godt alternativ. Dog kan jeg bedst lide “capture it” – den er ret flot men uden æøå dur den ikke.

Drilske nye motiontweens:
Bøvlede med de nye flash motion-tweens når jeg tilføjede nye frames ved at hive i tweenframes sker det uheldige, at man flytter de mellemliggende keyframes (bevæger sig). Ved at arbejde meget med teknikken fandt jeg pludselig ud af at jeg blot kunne holde shift nede mens jeg træk i den ene ende.

Næste banner
For at udfordre mig selv valgte jeg at lave et vertikalt banner i størrelsen 160×600. Havde en ide:
Først skulle man se et billede af en boksering og læse teksten ”her er vores hyggekrog” og derefter et billede af en bokseboldt. Her skulle teksten lyde ”her er vores bløde pude”. Jeg fik lavet en animation i flash, som jeg ikke synes holdt så jeg droppede ideen.

Kom så på den idé at, banneret skulle starte med et billede af en Baby der kedede sig bravt. Til det billede fandt jeg på ”savner du spænding?”. Nu skulle jeg så bruge et billede der kunne henlede opmærksomheden på boksning. Efter en del søgen fandt jeg et godt billede fra en sparringssession. Teksten: ”slå dig løs” er dobbelt med vilje.

Ville lave nogle forskellige lydeffekter for at vise muligheden. Jeg er normalt ikke tilhænger af bannere med lyd. Jeg bryder mig ikke om at blive forbløffet over en eller anden pludselig lyd, som tak for at ens mus rammer et banner.

Workflow

  • Behandlede mine billeder i Photoshop så de passede til 160×600.
  • Gemte optimeret til web (png format)
  • Hentede alle billeder ind i flash dog ikke logo (var ikke klar endnu).
  • Gættede mig frem til hvor længe / frames første billede og tekst skulle vises.
  • Lavede alle tekst og billeder i forskellige lag med samme frame længde.
  • Testede om det nogenlunde passede.
  • Rykkede så bokserne og ”slå dig løs” frem efter de andre frames.
  • Kunne nu gå i gang med at lave tekst effekter.
  • Tilføjede diverse lyde første en baby lyd ”streaming lyd” i første frame (så den kører straks uden at forsinke animationen).
  • Arbejdede noget mere med timingen.
  • Lagde logoet som Rasmus havde lavet i Illustrator ind.

Arbejdet med disse flash bannere gav mig nye færdigheder i Flash fik helt styr på de nye motiontweens som jeg tidligere har beskrevet.

Desuden lærte jeg også at man kan ændre lyd i flash til ”streaming lyd” i flash og så kan man høre lyden inde i flash når man ”scrubber”. Jeg har ligeledes fået min flash viden ajourført – så jeg er nogenlunde på det niveau, jeg var da jeg slap flash for 1½ år siden.

Jeg synes ligeledes det har været rart at hjælpe de andre studerende. Og føler jeg har lært en masse om mulige faldgruber og misforståelser i flash.

Her er banner nummer to (html/flash).

Næste banner:
For at udfordre mig selv valgte jeg at lave et vertikalt banner i størrelsen 160×600. Havde en ide:

Først skulle man se et billede af en boksering og læse teksten ”her er vores hyggekrog” og derefter et billede af en bokseboldt. Her skulle teksten lyde ”her er vores bløde pude”. Jeg fik lavet en animation i flash, som jeg ikke synes holdt, så jeg droppede ideen.

Kom så på den idé at banneret skulle starte med et billede af en Baby der kedede sig bravt. Til det billede fandt jeg på ”savner du spænding?”. Nu skulle jeg så bruge et billede der kunne henlede opmærksomheden på boksning. Efter en del søgen fandt jeg et godt billede fra en sparringssession. Teksten: ”slå dig løs” er dobbelt med vilje. Ville lave nogle forskellige lyd effekter for at vise muligheden. Jeg er normalt ikke tilhænger af bannere med lyd. Jeg bryder mig ikke om at blive forbløffet over en eller anden pludselig lyd, som tak for at ens mus rammer et banner.

Workflow
Lagde logoet, som Rasmus havde lavet i illustrator, ind.

Arbejdet med disse flash bannere gav mig nye færdigheder i Flash fik helt styr på de nye motiontweens som jeg tidligere har beskrevet. Desuden lærte jeg også at man kan ændre lyd i flash til ”streaming lyd” i flash og så kan man høre lyden inde i flash når man ”scrubber”.  Jeg har ligeledes fået flash viden ajourført – så jeg er nogenlunde på det niveau, jeg var da jeg slap flash for 1½ siden.

Rettelser efter vejleder bemærkninger
Min vejleder Morten Ulf Bøll virkede meget tilfreds med mine bannere – men synes at knappen der sender brugeren videre til kampagne websitet skal være tilgængelig under hele animationen. Det har jeg taget til efterretning og har rettet mine bannere til.