Designa en Blinkie för Flash CS3-animering

• April 29, 2024

Ägaren till J3 Designs bad mig skapa en annonsering blinkning för hennes digitala scrapbooking webbplats. Hon ville behålla företagets klassiska elegans och gav mig en uppsättning grafik som hon redan hade använt för sin logotyp. Dessa bestod av en komo, spets, grungebakgrunder, rosett, torkade blommor och två nyckelpigor. Denna grafik skapades ursprungligen med 300 dpi och var mycket stor. Så mitt första jobb var att minska varje grafik till 72 dpi och till en storlek tillräckligt liten för att använda i en 150 x 50 pixel blinkning. Från detta test kunde jag bestämma vilka av elementen som skulle kunna användas i en så liten storlek utan att förlora för mycket av deras detaljer.

Jag blev förvånad över att de flesta av elementen fungerade bra vid en sådan minskning i storlek, med undantag för komo och torkade blommor. När de minskades till en höjd av 50 pixlar förlorades de flesta av detaljerna från dessa element. Men comeo var en så viktig del av logotypen, jag bestämde mig för att bara använda den övre halvan av comeo. Genom att göra detta behövde jag inte minska bilden till en så liten storlek och sparat det mesta av detaljens detalj.

Jag började bygga designen med de statiska bakgrundselementen. Dessa element skulle inte ingå i animeringen. Jag väljer en av de fyra grungebakgrunder som ingår i de grafiska proverna som det övergripande bakgrundsskiktet. Nästa jag lägger till spetsen och kamen. För att spara utrymme högst upp på blinkan för textanimeringen, placerade jag spetsen i en vinkel i det nedre vänstra hörnet. Till slut tilllade jag en av de två nyckelpigorna. Men de nyckelpigorna vände bara på att bli animerade.

Grunden för animeringen skulle bestå av flera textanimationer. Men de nyckelpigorna tittade hela tiden på mig, så jag bestämde mig för att lägga till en andra animation med nyckelpigorna. En nyckelpiga skulle vara synlig under textanimeringen och sedan skulle den andra nyckelpigan dyka upp under komo. Slutligen skulle de krypa av tillsammans. För att göra detta behövde jag bryta upp bakgrundsskiktet i flera lager. Det första bakgrundsskiktet skulle vara grungegrafiken. Den andra skulle vara spets och kom. Naturligtvis behövde jag PNG: er av både nyckelpiga, spetsen och kammen för att upprätthålla transparensen i Flash.

Så jag hade nu fyra lager till min blinkning, förutom textanimeringslagret, som jag skulle lägga till senare.

De flesta blinkningar på scrapbookingsajter är 150 x 50 pixlar. Detta ger dig inte mycket utrymme för en komplicerad textanimering. Jag bestämde mig för att använda de inbyggda tidslinjeeffekterna för att animera texten. Den första delen av animationen skulle vara designerns namn. Det finns fem designer för den här webbplatsen, inklusive mig själv. Eftersom mitt företagsnamn var det längsta bestämmer jag mig för att skapa den ursprungliga animationen med mitt namn. Då skulle det vara lätt att stänga av designerns namn för de andra fyra blinkningarna. Nu när designen är byggd är vi redo att bygga vår animation.

J3-mönster

Copyright 2018 Adobe Systems Incorporated. Alla rättigheter förbehållna. Adobes produktskärmbild (ar) tryckta med tillstånd från Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst och Flash Paper är / är antingen [a] registrerat varumärke [s] eller ett varumärke [s] från Adobe Systems Incorporated i USA och / eller andra länder.