Share
De animatiewereld kan echt intimiderend lijken - tussen AfterEffects, Flash en al het andere is er zoveel te leren. En wie heeft tijd? Nooit vrezen - je kunt eenvoudige Flash-animaties maken zonder de vertrouwde grenzen van Illustrator te verlaten en zonder enige kennis van Flash. Hier zijn twee eenvoudige manieren om dingen in beweging te krijgen.
Hieronder staan twee definitieve SWF-animaties die we gaan maken. Wil je toegang tot de volledige Vector Source-bestanden en downloadbare exemplaren van elke tutorial, inclusief deze? Word lid van Vector Plus voor slechts 9 $ per maand.
Ik heb deze videozelfstudie gemaakt als aanvulling op deze zelfstudie over tekst en afbeeldingen.
Voor dit type animatie, waarbij de ene vorm verandert in een andere (en een andere en een andere, als je dat wilt), gebruiken we het overvloeihulpprogramma om de tussenvormen te maken en vervolgens elke vorm naar zijn eigen laag en exporteren deze als een reeks voor het Flash-bestand.
Aangezien deze animatie op het web wordt gebruikt, begint u met een nieuw RGB-document. Hier heb ik vier eenvoudige pictogrammen, die de vier seizoenen voorstellen. Selecteer alle vormen en lijn ze vervolgens horizontaal en verticaal uit met behulp van het paneel Uitlijnen (of het regelpaneel). Zorg ervoor dat elke vorm op dezelfde laag staat.
Dubbelklik op het gereedschap Overvloeien in het toolpalet om de opties te openen. Kies Gespecificeerde stappen in de vervolgkeuzelijst Afstand en typ 8. Dit geeft ons een soepele overgang tussen de vormen, maar maakt niet te veel lagen.
Ga met alle vormen geselecteerd naar Object> Overvloeien> Maken.
Terwijl de gemengde vormen nog steeds zijn geselecteerd, gaat u naar Object> Uitbreiden. Hiermee wordt de overvloeiing in afzonderlijke vormen gescheiden. Om dit effect te laten werken, moeten de afzonderlijke vormen van elkaar worden losgekoppeld, dus ga naar Object> Groep opheffen.
De niet-gegroepeerde vormen moeten nog steeds allemaal op één laag staan. Zorg ervoor dat de laag in het deelvenster Lagen is gemarkeerd, klik op het vervolgmenu en kies Vrijgeven voor lagen (reeks). Je zult zien dat elke vorm nu op zijn eigen laag staat en elke laag een andere kleur heeft. Als u dit niet ziet, gaat u terug en zorgt u ervoor dat u de uitgevouwen overvloeiing hebt gedegroepeerd.
Ga naar Bestand> Exporteren en kies Flash (SWF) als het bestandsformaat (OPMERKING: afhankelijk van de versie van Illustrator en / of de versie van Flash die u op uw computer hebt geïnstalleerd, kan het bestandsformaat Macromedia Flash worden genoemd). Kies AI-lagen voor SWF-frames als de methode Exporteren.
Klik nu op de knop Geavanceerd om meer opties weer te geven. Kies Lossless als het afbeeldingsformaat. Klik op Looping, zodat uw animatie steeds opnieuw wordt afgespeeld. De standaardinstellingen zijn goed voor de rest van het dialoogvenster SWF-opties, maar misschien wilt u in toekomstige projecten ermee experimenteren.
Om uw animatie in actie te zien, voert u een van de twee dingen uit: Klik op de knop Webvoorbeeld in het dialoogvenster SWF-opties, waarmee uw standaardwebbrowser wordt gestart en de animatie wordt afgespeeld. Of sla het SWF-bestand op en sleep het naar een leeg browservenster om het af te spelen.
1. Wanneer u met een overvloei werkt om een animatie te maken, hebt u mogelijk het selectievakje Animate Blends in het dialoogvenster Geavanceerde SWF-opties opgemerkt. Dit doet wat het zegt: het gebruikt de blend voor de animatie en scheidt elke uitgevouwen vorm in het proces. U hoeft dus echt niet stap 4 en 5 te doen, maar het helpt om te begrijpen hoe Illustrator de animatie maakt.
2. Als u wilt, kan het Illustrator-bestand worden geëxporteerd naar Photoshop en vervolgens worden geopend in ImageReady om daar animaties te maken. Volg stap 1 tot en met 5 hierboven en exporteer vervolgens als een Photoshop-bestand (PSD). De sleutel hier is om zowel schrijflagen als maximale bewerkbaarheid in het dialoogvenster Exportopties te controleren. Wanneer u het bestand in Photoshop opent, ziet u elke laag (in dit geval alle 29) behouden. U kunt dan naar ImageReady springen en de animatie frame voor frame bewerken.
Nu je het basisconcept begrijpt, kun je experimenteren met allerlei soorten blends en morphs. Probeer voor sommige echt trippy-animaties 3D-objecten of met verlopen gevulde vormen te gebruiken.
Nogmaals, begin met een RGB-bestand. Ik gebruik dit eenvoudige zombiesilhouet, met een vulling van zwart en een streep van niets. Ik ga een reeks streken toevoegen aan de buitenkant van de vorm, zodat wanneer er geanimeerd wordt, de streken uit de vorm zullen stralen.
Selecteer de vorm, ga naar het deelvenster Vormgeving en kies Nieuwe lijn toevoegen in het vervolgmenu. In CS4 kunnen alle wijzigingen in deze nieuwe streek rechtstreeks in het deelvenster Vormgeving worden aangebracht. Als u van links naar rechts gaat, klikt u eerst op het woord Lijn om de Lijnopties weer te geven. Klik op het derde pictogram naast Lijn uitlijnen om het uit te lijnen met de buitenkant van de vorm. Klik vervolgens op het kleurstaal om de kleur toe te passen (ik ben begonnen met zwart) en kies uiteindelijk het lijngewicht in het derde veld.
Om de resterende slagen toe te voegen, kunt u stap één keer en telkens herhalen, waarbij u telkens de opties, kleur en gewicht wijzigt. Maar om een beetje tijd te besparen, klikt u op het pictogram Item dupliceren onder aan het lijnpaneel om een kopie van de streek te maken. Kies nu de kopie (die zou die moeten zijn) ONDER het origineel), en verander de kleur in een zeer donkerblauw (of wat je maar wilt), en het gewicht op 2 punten.
Herhaal deze procedure meerdere keren, waarbij u telkens een lichtere en dikkere streep toevoegt. Het eindresultaat zou er ongeveer zo uit moeten zien als de afbeelding hieronder. U ziet elke extra streek in het deelvenster Vormgeving.
Ga naar Object> Uiterlijk uitvouwen. Dit zal de streken vergroten en scheiden.
Groepeer de uitgebreide streken uit de groep en net zoals in Deel I, selecteer de laag in het deelvenster Lagen en kies Lagen vrijgeven (volgorde) in het vervolgmenu (voor deze methode moet je echt deze stap uitvoeren).
Exporteer het bestand naar Flash, zoals in stap 6 hierboven. Voor deze afbeelding ga ik de achtergrondkleur in zwart veranderen, maar de andere instellingen blijven hetzelfde.
Om uw animatie in actie te zien, voert u een van de twee dingen uit: Klik op de knop Webvoorbeeld in het dialoogvenster SWF-opties, waarmee uw standaardwebbrowser wordt gestart en de animatie wordt afgespeeld. Of sla het SWF-bestand op en sleep het naar een leeg browservenster om het af te spelen.
Zoals eerder, bekijk een voorbeeld van het bestand in uw webbrowser. Probeer het browservenster groter en kleiner te slepen. Omdat dit een op vectoren gebaseerd bestand is, is de kwaliteit op elk formaat groot. Blij geanimeerd!
Accentsconagua