Share
Deel 1 van deze tutorial neemt Flash-beginners mee door de basisprincipes achter het tekenen en animeren van vectoren in Flash. We zullen een stuiterende strandbal tekenen en animeren. Voorkennis van Flash zal natuurlijk helpen, maar de volgende technieken zouden voor iedereen en voor de meeste softwareversies toegankelijk moeten zijn. Deel 2 komt binnenkort ...
Hieronder is de laatste animatie waar we naartoe zullen werken. Wil je toegang tot de volledige Vector Source-bestanden en downloadbare exemplaren van elke tutorial, inclusief deze? Sluit u aan bij VECTORTUTS PLUS voor slechts 9 / maand.
Laten we beginnen met het openen van een nieuw document (Bestand> Nieuw ...). Alleen een Flash-bestand (ActionScript 2.0) -document is prima; de Actionscript-versie is niet relevant, omdat we er geen zullen gebruiken.
Gebruik de eigenschappeninspector onder aan het scherm om de documenteigenschappen in te voeren en klik op de knop met dimensies. Geef eerst uw document een titel en geef vervolgens het werkgebied (het gedeelte van uw document dat zichtbaar is bij publicatie) afmetingen van 600 px bij 400 px. De achtergrondkleur laten we wit, maar veranderen de framesnelheid in 21 fps (frames per seconde). 21 fps geeft een snelle, soepele animatiesnelheid.
Organisatie is de sleutel bij het werken met Flash, dus laten we voordat we beginnen met het tekenen van onze bal de laag noemen waar het op gaat zitten. Dubbelklik op Laag 1 en noem het "Ball."
Selecteer het gereedschap Ovaal, definieer een lijn en vulkleur, zoals de kleur die wordt weergegeven. Teken vervolgens een uniforme cirkel (door Shift ingedrukt te houden en de muis te slepen). Gebruik ook de eigenschappeninspector om de lijn een 3px-gewicht te geven.
Door symbolen in Flash te maken, kunt u meerdere exemplaren van dezelfde objecten in één bestand gebruiken. Symbolen zijn allemaal toegankelijk vanuit het bibliotheekpalet (Venster> Bibliotheek). Door een symbool te wijzigen, worden alle instanties van dat symbool in het bestand gewijzigd.
We gaan onze cirkel veranderen in een symbool dat onze bal zal worden. Selecteer de hele cirkel en druk op F8. Noem het "mc_ball," kies ervoor om er een filmclipsymbool van te maken en klik op OK.
Voeg een tweede laag onder de laag 'Ball' toe en noem deze 'Shadow'. Teken in het eerste frame van deze laag een ellips om een schaduw onder de bal te vormen. Verwijder de streek en kleur deze in # E2E0E5. Verander in een symbool zoals je eerder deed met de bal en noem het "mc_shadow."
Plaats de twee symbolen op ongeveer de juiste hoogte om te suggereren dat de bal op de grond zit. In het palet Uitlijnen (Venster> Uitlijnen) vinkt u Aan en centreert u de twee symbolen horizontaal.
We hebben onze symbolen in hun meest basale vorm gemaakt, laten we nu beginnen ze te animeren. Houd Shift ingedrukt en klik op frame 20 van beide lagen op de tijdlijn. Ga naar Modify> Timeline> Convert to Keyframes of druk op F6 om deze frames in Keyframes te veranderen. Keyframes vertegenwoordigen punten langs de tijdlijn waar iets gebeurt. Dit punt op de tijdlijn is het einde van de animatie; met andere woorden, de bal zal van de grond zijn gesprongen, de top hebben bereikt en is teruggekeerd naar deze startpositie. Hetzelfde geldt voor onze schaduw: deze is vervaagd toen de bal opliep en terugkeerde naar deze startstaat bij frame 20.
Laten we nu het punt toevoegen waarop de bal op zijn hoogste punt staat. Selecteer frame 10 op beide lagen en druk op F6 om ze in Keyframes te veranderen.
Plaats de schuifbalk nog steeds op frame 10 en verplaats het balsymbool verticaal omhoog naar een bepaald punt in het werkgebied. Selecteer het gereedschap Vrije transformatie en maak het exemplaar van het "shadow_main" -symbool breder.
Tot slot, ga met de geselecteerde schaduw naar Kleur op de eigenschappeninspector en verander deze in een alfawaarde van 30%.
Tweening is het proces waarbij Flash automatisch alle fasen genereert tussen een objecten of vormen twee toestanden.
We gaan de frames tussen ons eerste frame en halverwege de animatie tweenen in frame 10. Selecteer een frame tussen 1 en 10 op beide lagen en verwijs opnieuw naar de eigenschappeninspector. Kies Beweging uit de Tween select en je ziet dat de resulterende frames paars worden.
Verplaats de schuifregelaar heen en weer langs de tijdlijn met je muis en je ziet de bal en schaduw mooi geanimeerd. De snelheid van deze beweging is echter volledig uniform. We hebben de bal nodig om te vertragen als hij zijn top bereikt en we kunnen dit doen gemak (ha ha).
Nogmaals, met één frame van elke geselecteerde laag (binnen het getweende gebied) raadpleegt u de eigenschappeninspector. Verander de Tweening in Ease out met een waarde van 100. Dit zal onze klimbal vertragen.
Nadat u de opkomst van de bal met succes hebt geanimeerd, herhaalt u de stappen voor tweening voor frames 11 - 20. Deze keer vergemakkelijkt u de bewegings-tween in -100, waardoor de bal versnelt als hij de grond nadert.
Druk op Command + Enter om je geanimeerde bal tot nu toe te bekijken. Het moet er uitzien als de onderstaande animatie.
Ervan uitgaande dat onze bal is gemaakt van iets dat iets flexibeler is dan diamant, zal het enigszins van vorm veranderen bij een botsing met de grond. Laten we nog een laatste keyframe toevoegen waar de bal even vlakt.
Selecteer frame 21 op beide lagen en druk op F6 om ze in Keyframes te veranderen. Gebruik vervolgens de gratis transformatie tool om squash het "bal" -symbool vanaf de bovenrand (houd Alt ingedrukt terwijl je dit doet om de onderkant te houden waar het is).
Onze stuiterende beweging is voltooid. Nu moeten we meer detail en beweging toevoegen aan onze bal. Dubbelklik op het "ball" -symbool op een van de hoofdframes om de tijdlijn van dat symbool in te voeren. Je ziet je huidige locatie onder de tijdlijn - je zou binnen "Scene 1, mc_ball" moeten zitten.
Klik op het pictogram Laag invoegen om een tweede laag boven de huidige te maken. Kopieer en plak de cirkel op zijn plaats vanaf laag 1 tot laag 2 (Command + C, Command + Shift + V). Noem nu de onderste laag "Ball Spinning" en de bovenste "Shade". Vergrendel tenslotte de laag "Ball Spinning".
Teken ergens op het podium een grote cirkel en zorg ervoor dat deze een andere kleur heeft dan de bestaande cirkel.
Plaats de grotere cirkel zo dat wat er nog te zien is van de gele cirkel ongeveer de juiste vorm heeft voor schaduw op de bal. Laat alle objecten los.
Selecteer nu opnieuw de grotere cirkel en druk op Delete. Door niet-gegroepeerde of niet-gesymboliseerde vormen boven elkaar te leggen, combineert u ze op dezelfde manier als u met pixels in verftoepassingen doet. Door nu de grotere cirkel te verwijderen, blijft alleen de kleine halve maan achter die de schaduw op de bal wordt. Selecteer en verwijder de resterende lijn en kleur de halve maan # E2E0E5.
Omdat deze halve maan als schaduw op onze bal fungeert, zou het leuk zijn om het een vermenigvuldigingsdekking te geven. Om dit te doen, moeten we het omzetten in een filmclipsymbool (je zou nu aan deze actie gewend moeten zijn). Druk op F8 en noem deze "mc_ball_shading" (deze namen worden onbetrouwbaar). Raadpleeg de eigenschappencontrole en wijzig de mengverhouding naar vermenigvuldiging. Perfect!
Druk nogmaals op Command + Enter om je geanimeerde bal tot nu toe te bekijken. Het zou op de onderstaande animatie moeten lijken.
Als je de arcering hebt aangepakt, kun je nu de laag "schaduw" vergrendelen (misschien zelfs onzichtbaar maken om het werk gemakkelijker te maken) en "Ball Spinning" ontgrendelen. We gaan een patroon toevoegen om onze cirkel het strandbaleffect te geven. Gebruik de Oval Tool om een groot ovaal op het podium te tekenen. Het heeft een lijn van 1px en #FFFFFF nodig, maar geen opvulkleur.
Plaats de streek zoals getoond in de onderstaande afbeelding en laat los. Selecteer nu het gedeelte van de lijn dat buiten de bal ligt door erop te klikken. Net als bij het vroeger maaien van de arcering, zijn alle vectoren op deze laag samengevoegd en vormen ze afzonderlijke regio's. Verwijder het buitenste gedeelte van de streek.
Trek een paar andere ovalen en plaats ze bovenop de cirkel zodat ze ergens aan de bovenkant samenkomen. Verwijder vervolgens het overschot van buiten de cirkel. De ovalen hoeven niet allemaal even groot of evenredig te zijn, probeer gewoon iets te maken zoals de onderstaande afbeelding. Wat u hebt gemaakt, is een reeks segmenten die nu afzonderlijk kunnen worden gekleurd.
Kleur alternatieve segmenten met # EA512D en verwijder alle stukjes witte lijn van de bal. Druk op Command + Enter om te bekijken wat je tot nu toe hebt gemaakt. Het zou op de onderstaande animatie moeten lijken.
Laten we een laatste bewegingsdimensie aan de animatie toevoegen, we zorgen ervoor dat de bal langzaam ronddraait wanneer deze botst. Om dit te doen moeten we eerst de ball on layer "Ball Spinning" omzetten in een symbool. Klik op het eerste hoofdframe van de laag om ervoor te zorgen dat alles erop is geselecteerd. Druk nu op F8 en noem dit filmclipsymbool 'mc_ball_base'. Je zult zien dat het is toegevoegd aan de andere symbolen in het bibliotheekpalet (Venster> Bibliotheek).
Selecteer frame 32 van de tijdlijn op de laag "Spinning Ball" en druk op F6 om een nieuw keyframe te maken. Selecteer frame 32 van de tijdlijn in de bovenstaande laag en druk op F5. Hierdoor wordt een nieuw frame gemaakt, maar omdat het "Shade" -symbool helemaal niets verandert, hoeven we dit geen keyframe te maken. We moeten er alleen voor zorgen dat wanneer de schuifregelaar dit punt op de tijdlijn bereikt, het "schaduw" -symbool aanwezig is.
Waarom hebben we frame 32 gekozen? Welnu, hierdoor gaan we onze bal eens in de 32 frames draaien. Onze bal stuitert eenmaal in de 20 frames en daarom zal deze onregelmatige timing betekenen dat de bal zich tijdens het stuiteren op voortdurend verschillende spinfasen bevindt. Als dit nog niet duidelijk is, is het binnenkort ...
Selecteer ergens op de tijdlijn een frame op laag "Ball Spinning" en raadpleeg de eigenschappeninspector. Selecteer Bewegings-tween zoals bij de stuiterende beweging. Deze keer willen we geen Ease-waarde, we hebben de bal nodig om gestaag met dezelfde snelheid te roteren. Selecteer CW (met de klok mee) in de vervolgkeuzelijst Roteren en verlaat 1 als het aantal keren dat de bal zal draaien tijdens de tween. De "Shade" -laag wordt natuurlijk niet beïnvloed en de schaduw blijft daarom in dezelfde positie op het gezicht van de bal.
Dus daar heb je het! Druk nogmaals op Command + Enter en controleer of de beweging is zoals je wilde. Als het moet worden gewijzigd, kun je het aantal frames in de tweens verhogen, de hoogte van de bal wijzigen, het aantal keren roteren, etc. Deze tutorial heeft je inzicht gegeven in: de Flash-tijdlijn en -lagen, het gedrag van Flash vectortekengereedschappen, de hiërarchie van Flash-symbolen en -objecten en bewegings-tweening.
Ik hoop dat je het leuk vond! Deel 2 verschijnt volgende maand en zal deze technieken verder uitdiepen, waarbij het proces wordt verbeterd met een vleugje Illustrator ...
Abonneer u op de RSS-feed van VECTORTUTS om op de hoogte te blijven van de nieuwste vectorhandleidingen en -artikelen.
Accentsconagua