Animeer een cartoonexplosie met Flash Professional - Basix

In deze zelfstudie laten we je zien hoe je een geweldige explosie in Flash kunt animeren, die je zou kunnen gebruiken voor een cartoonachtige actiegame. We nemen je mee van de conceptie tot de voltooiing en laten je zien hoe je het kunt exporteren en hoe je het in andere scènes kunt importeren.


Eindresultaat voorbeeld

Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:


Stap 1: Kies het type explosie dat u leuk vindt

Bepaal welke soort ontploffing het beste bij uw scène past. Is het een kleine explosie? Een bom? Een 60's Batman-achtig, flitsend, "WHAM"? In dit geval doen we een kleinere explosie, maar met ervaring kun je alles doen wat je wilt.


Stap 2: Zoek naar referenties

Als je eenmaal weet wat je wilt animeren, kijk dan voor referentie. Het internet is geweldig omdat je gewoon naar filmfragmenten kunt zoeken die gerelateerd zijn aan wat je zou willen doen en ze zorgvuldig zou bestuderen.


Stap 3: begin te tekenen

Als je klaar bent pak je een paar stukjes papier en begin je explosie te tekenen. Animatie is gepland via keyframes, die over het algemeen de meest extreme delen van de animatie zijn die het ruwe verhaal vertellen over hoe iets beweegt. In dit geval is het eerste waar je aan moet denken de eerste lichtflits.


Stap 4: teken alle keyframes

Teken vervolgens de toetsen om uit te leggen hoe de rook en het licht uit de bom komen. Je wilt er op zijn minst een waar de rook voor het eerst uit het licht komt, dan een wanneer de rook op zijn grootste en meest extreme is en dan aan het einde een frame. Dit zijn onze keyframetekeningen, die dit proces illustreren:


Stap 5: teken alle tussenafstanden

Teken de tussenafstanden voor deze frames. In feite teken je nu alle frames die in het midden van deze hoofdframes passen. We zullen onze schetsen hier ter referentie toevoegen.


Stap 6: Scan uw tekeningen

Op dit punt scannen we al onze tekeningen zodat we ze in Flash kunnen traceren.


Stap 7: Wijzig de basisinstellingen voor Flash

Open Flash en verander uw instellingen naar wat het beste past bij uw huidige scène. U kunt al uw basisinstellingen bekijken in het eigenschappenvenster aan de rechterkant van de schermafbeelding. In ons geval werken we op 550x500px en 24 frames per seconde, met een witte achtergrond.


Stap 8: Importeer uw tekeningen

Vervolgens moet u al uw lijntekeningen importeren in Flash Pro's Bibliotheek. De bibliotheek is in feite een plaats waar alle bestanden die u gebruikt in uw animatie worden opgeslagen voor bewaring. Je kunt dit doen door naar Bestand> Importeren> Importeren naar werkgebied, selecteer vervolgens al je tekeningen en klik op Openen.

Hierna verschijnen ze allemaal op hetzelfde keyframe, maar als je ze allemaal selecteert, klik je met de rechtermuisknop en klik je op "Distribueren naar lagen". Ze verschijnen als afzonderlijke lagen, allemaal op hetzelfde hoofdframe. Vervolgens kunt u afzonderlijke toetsen eenvoudig naar de juiste posities slepen en neerzetten, hetzij op hun eigen lagen op allemaal op één laag, afhankelijk van uw voorkeur.


Stap 9: teken uw beginlijnen

Voeg een nieuwe laag toe aan uw tijdlijn en begin dan met het lijngereedschap over uw oude lijnen te tekenen. Over het algemeen nemen we de moeite niet om het penseel te gebruiken, omdat u te veel knooppunten op de lijnen krijgt die het op een later moment uiterst moeilijk kunnen maken om te veranderen. Wat u in feite moet doen, is lijnen tekenen met behulp van het lijngereedschap en vervolgens het selectiegereedschap gebruiken om de curve tussen de twee punten te manipuleren. (Meer tips over Flash-tekeningen zijn hier beschikbaar.)


Stap 10: Lijnen converteren naar opvullingen

Zodra het frame volledig is getraceerd met het lijngereedschap, selecteren we alle lijnen en gaan we naar Wijzig> Vorm> Lijnen converteren naar opvullingen. Af en toe zullen er glitches zijn waar delen van de regel verdwijnen. Als dit gebeurt, begin dan met het selecteren van kleinere delen van de afbeelding en dan uiteindelijk de hele afbeelding samen. Zodra u dit hebt gedaan, kunt u de lijndiepte bewerken met de selectiegereedschap en klikken en slepen op de randen van lijnen.


Stap 11: Kleur je tekeningen

Kleur de lijnen in met het verfemmergereedschap.


Stap 12: Beëindig alle frames van animatie

Herhaal stap 9 tot 11 totdat alle frames zijn voltooid.


Stap 13: Organiseer je animatie

Selecteer alles op een kader, druk op F8 en verander het in een symbool. Noem het een naam en het zal in uw bibliotheek verschijnen om te allen tijde te worden gebruikt en opnieuw te worden gebruikt. Organisatie is erg belangrijk terwijl je aan het animeren bent. Dingen kunnen snel verwarrend worden als je niet alles goed noemt en sorteert, dus doe dit alsjeblieft. U kunt zelfs mappen in de bibliotheek maken.


Stap 14: Uien villen

Een belangrijk hulpmiddel dat u echt kan helpen animeren, is de Onion Skin-tool. Met Onion Skinning kunt u eenvoudig de frames bekijken die het dichtst bij die van u liggen, zodat u meteen kunt zien of een stuk animatie zoals gepland werkt of niet. De knop Onion Skin bevindt zich aan de onderkant van uw tijdlijn.


Stap 15: bekijk een voorbeeld van de animatie

Ga naar om uw volledige animatie op elk gewenst moment te bekijken Besturing> Film testen> Testen. Het zal je hele animatie vooraf laden en je vervolgens precies laten zien hoe het eruit zal zien als het eenmaal is geëxporteerd.


Stap 16: exporteer de film

Wanneer u klaar bent om te exporteren, gaat u gewoon naar Bestand> Exporteren> Film exporteren. Noem het wat je maar wilt, kies .swf in het vervolgkeuzemenu en klik vervolgens op Opslaan. Afhankelijk van de grootte van je animatie moet je mogelijk even wachten.


Stap 17: Exporteer als een GIF

Gif-afbeeldingen exporteren is bijna hetzelfde. Wanneer je slaat Bestand> Exporteren> Film exporteren kies gewoon .gif in plaats van .swf uit het vervolgkeuzemenu.


Stap 18: importeer je animatie in een bestaande scène

Om een ​​explosie in een reeds bestaande scène te importeren, opent u eerst beide scènes. Selecteer vervolgens alle frames van de explosie-animatie op de tijdlijn, kopieer alle frames en druk op Ctrl + F8. Er verschijnt een dialoog. Geef de explosie een naam en sla hem op als een afbeelding. Druk op OK. Er zou een leeg scherm moeten verschijnen zonder dat er een animatie op staat. Klik vervolgens op het eerste frame van de nieuwe tijdlijn en plak al je frames. Hierna druk je op de knop "Scene 1" onder de tijdlijn maar boven het animatievenster om terug te gaan naar je originele tijdlijn. Zodra je dit hebt gedaan, zou je animatie in de bibliotheek moeten staan. Selecteer uw animatie in de bibliotheek, klik met de rechtermuisknop en kopieer deze. Je kunt het dan in de bibliotheek plakken van elke andere FLA die je hebt geopend.


Stap 19: Maak een filmclip

Filmclips maken is bijna hetzelfde als wat we in de vorige stap hebben beschreven. Als u een filmclip wilt maken, volgt u de instructies van de laatste stap precies, maar kiest u 'Filmclip' in plaats van 'Afbeelding' wanneer u het dialoogvenster bereikt nadat u op Ctrl + F8 hebt gedrukt. Het verschil tussen een afbeelding en een filmclip is dat de filmclip uniek geïdentificeerd kan worden met ActionScript, de coderingstaal die Flash gebruikt om games en interactieve media te maken. Wanneer de film is gecompileerd, wordt er een kopie van de bibliotheek gemaakt en getransformeerd voor de animatie. De kopie kan tijdens runtime worden vervaagd, geschaald, enzovoort, zonder dat u tijdens het ontwerpen afzonderlijke animaties hoeft te maken, waardoor de benodigde hoeveelheid computergeheugen wordt verminderd en de SWF-bestandsgrootte klein blijft.


Stap 20: Maak een Sprite-blad

Als u een sprite-blad van uw animatie wilt maken, raakt u eerst aan Bestand> Exporteren> Film exporteren en selecteer PNG-reeks om een ​​set PNG-afbeeldingen te maken, één voor elk frame. Nadat ze zijn gemaakt, kunt u elke software voor het bewerken van afbeeldingen (zoals Photoshop) gebruiken om ze als een batch te importeren en ze vervolgens allemaal in een groter afbeeldingsbestand te kopiëren en plakken.

U kunt ook uw Flash-scène groter maken, elk frame van animatie in één keer weergeven en de afzonderlijke afbeeldingen op hun plaats zetten voordat u een enkele afbeelding exporteert.


Klik om te vergroten.

Een derde optie is om het hulpprogramma SWFSheet van Keith Peters te gebruiken.

We hopen dat je deze tutorial leuk vond! Als je er een explosie mee maakt, deel deze dan alsjeblieft in de comments :)