Een Blinkie ontwerpen voor Flash CS3-animatie

• Mei 19, 2024

De eigenaresse van J3 Designs vroeg me om een ​​reclamelinkje te maken voor haar digitale scrapbookwebsite. Ze wilde de klassieke elegantie van het bedrijfsmerk behouden en gaf me een set afbeeldingen die ze al voor haar logo had gebruikt. Deze bestond uit een camee, kant, grunge achtergronden, strik, gedroogde bloemen en twee lieveheersbeestjes. Deze grafische afbeeldingen werden oorspronkelijk gemaakt met 300 dpi en waren erg groot. Dus mijn eerste taak was om elke afbeelding te verkleinen tot 72 dpi en tot een grootte die klein genoeg was om te gebruiken in een 150 x 50 pixelblinkie. Uit deze test kon ik bepalen welke elementen zo klein konden worden gebruikt zonder al te veel details te verliezen.

Ik was verrast dat de meeste elementen prima werkten bij een dergelijke verkleining, behalve de camee en gedroogde bloemen. Toen ze werden teruggebracht tot een hoogte van 50 pixels, gingen de meeste details van deze elementen verloren. Maar de camee was zo'n belangrijk onderdeel van het logo dat ik besloot alleen de bovenste helft van de camee te gebruiken. Door dit te doen, hoefde ik de afbeelding niet tot zo'n klein formaat te verkleinen en de meeste details van de cameo te bewaren.

Ik begon het ontwerp te bouwen met de statische achtergrondelementen. Deze elementen zouden geen deel uitmaken van de animatie. Ik kies een van de vier grunge-achtergronden in de grafische voorbeelden als de algemene achtergrondlaag. Vervolgens voegde ik het kant en de camee toe. Om ruimte te maken aan de bovenkant van de blinkie voor de tekstanimatie, plaatste ik het kant in een hoek in de linkerbenedenhoek. Tot slot heb ik een van de twee lieveheersbeestjes toegevoegd. Maar die lieveheersbeestjes zaten te wachten om geanimeerd te worden.

De basis van de animatie zou bestaan ​​uit verschillende tekstanimaties. Maar die lieveheersbeestjes bleven me aankijken, dus besloot ik een tweede animatie toe te voegen met in de hoofdrol de lieveheersbeestjes. Eén lieveheersbeestje zou zichtbaar zijn tijdens de tekstanimatie en vervolgens zou het tweede lieveheersbeestje van onder het deelscherm verschijnen. Uiteindelijk zouden ze samen wegkruipen. Om dit te doen, moest ik de achtergrondlaag in verschillende lagen splitsen. De eerste achtergrondlaag zou de grafische grunge zijn. De tweede zou het kant en de camee zijn. Natuurlijk had ik PNG's van beide lieveheersbeestjes, het kant en de camee nodig om de transparantie in Flash te behouden.

Dus had ik nu vier lagen aan mijn blinkie, naast de tekstanimatielaag, die ik later zou toevoegen.

De meeste blinkies op scrapbooksites zijn 150 x 50 pixels. Dit geeft u niet veel ruimte voor een gecompliceerde tekstanimatie. Ik besloot om de ingebouwde tijdlijneffecten te gebruiken om de tekst te animeren. Het eerste deel van de animatie zou de naam van de ontwerper zijn. Er zijn vijf ontwerpers voor deze website, waaronder ikzelf. Omdat mijn bedrijfsnaam de langste was, besluit ik de originele animatie met mijn naam te maken. Dan zou het gemakkelijk zijn om de naam van de ontwerper te vervangen voor de andere vier blinkies. Nu het ontwerp is gebouwd, zijn we klaar om onze animatie te bouwen.

J3 ontwerpen

Copyright 2018 Adobe Systems Incorporated. Alle rechten voorbehouden. Schermafbeeldingen van Adobe-producten herdrukt met toestemming van 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 en Flash Paper is / zijn ofwel [a] geregistreerde handelsmerken [s] of een handelsmerk [s] van Adobe Systems Incorporated in de Verenigde Staten en / of andere landen.

Video-Instructies: Animated banner made in Adobe Flash (Mei 2024).