Whiteboard Video Scribe Animation - Bezier Path

• April 25, 2024

In deze zelfstudie blijven we een eenvoudige whiteboard-video bouwen in Motion^R. De volgende stap is het tekenen van het Bezier-pad dat de basis is van de animatie.

Je gaat een Bezier-pad tekenen dat de beweging van de hand bestuurt. Een duplicaat van dit Bezier-pad wordt gebruikt om het masker te maken dat de afbeelding die op het scherm wordt getekend, verbergt en onthult wanneer de arm overgaat. Omdat het masker is gemaakt op basis van een duplicaat van het Bezier-pad dat de hand zal volgen, is het resultaat een simulatie van de handtekening op het scherm.

Voordat we het Bezier-pad tekenen, moeten we het ankerpunt van de handafbeelding aanpassen. Standaard staat Motion het ankerpunt in het midden van de afbeelding. Maar dit ankerpunt zal zijn wat het pad volgt. We willen niet dat het midden van de arm op het scherm tekent. We willen dat de punt van het potlood op het scherm tekent. Laten we dit oplossen.

1. Selecteer de handafbeelding en selecteer vervolgens het gereedschap Ankerpunt. Gebruik de rode en blauwe pijlen om het ankerpunt over de punt van het potlood te plaatsen.
   
   Nu komen we bij dat goede deel.
   
   
2. Selecteer de grafische laag Hand en selecteer vervolgens het gereedschap Bezier. Plaats het eerste Bezier-punt over de punt van het potlood. Ga vervolgens naar het logo en teken een zigzagpad over het logo. Ga ten slotte terug naar de hand en voeg het laatste punt toe. Sluit het pad niet.
   
   
3. Om de beweging te vertellen dat u klaar bent met het tekenen van het Bezier-pad, selecteert u het gereedschap Selecteren / transformeren. U krijgt een nieuwe Bezier-laag in het deelvenster Lagen. Sleep deze nieuwe laag onder de laag Hand en hernoem deze "Bezier_Logo" omdat dit het Bezier-pad is voor het tekenen van de logo-afbeelding.
   
   Nu we het Bezier-pad hebben, kunnen we het Motion Path-gedrag toevoegen aan de handafbeelding. Dit gedrag zorgt ervoor dat de hand gaat animeren. Maar we willen dat de hand het Bezier_Logo-pad volgt. Dus we zullen Motion vertellen het Bezier_Logo-pad te gebruiken voor dit Motion Path-gedrag.
   
   
4. Selecteer de laag Handafbeelding in het deelvenster Lagen om het gedrag aan de handafbeelding toe te voegen. Kies Motion Path in het menu Behaviors rechtsonder. U ziet een nieuwe laag Bewegingspad toegevoegd onder de laag Hand.
   
   
5. Selecteer de laag Motion Path en ga naar de Inspector (Inspector - Gedrag - Motion Path). Stel het menu Padvorm in op Geometrie. Verwijder het vinkje bij de optie Toevoegen aan vorm. Ga terug naar de Bezier_Logo-laag in het deelvenster Lagen en klik / sleep naar de vormbron. Laat de muis los wanneer u de kleine pijl ziet.
   
   Test de animatie met de afspeelkop nog steeds op het eerste frame. Als het potlood het pad niet direct volgt, past u indien nodig het ankerpunt aan de punt van het potlood aan.
   
   Lijkt de hand iets te langzaam te tekenen voor een whiteboard-animatie? Welnu, we kunnen het versnellen door de Motion Path- en Bezier_Logo-tracks in de tijdlijn te verkorten.
   
   
6. Ga naar de tijdlijn en zoek het paars gekleurde Motion Path-spoor. Sleep de rechterrand naar het padspoor naar links totdat deze zich op de tweede positie op de tijdlijn bevindt (02:00). Herhaal dit voor het nummer Bezier_Logo.
   
   

OK, het is tijd voor een koffiepauze. In de volgende tutorial maken we het masker dat het logo onthult.

← terug | Volgende →

Tutorial Voorbeeld:


Apple, Motion, iBooks Author, GarageBand, TextEdit, Pages, iMovie en Mac zijn handelsmerken van Apple Inc., geregistreerd in de VS en andere landen.
CoffeBreakBlog is een onafhankelijke publicatie en is niet geautoriseerd, gesponsord of anderszins goedgekeurd door Apple Inc. Screenshots gebruikt met toestemming.
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: jQuery DrawSVG Plugin Used To Animate Strokes (April 2024).