Share
Flash CS4 heeft enkele grote veranderingen en functies ondergaan die ons nog steeds verbazen, zelfs na de meer recente versie van Flash CS5. Flash heeft nu de mogelijkheid om met objecten in de 3D-ruimte rechtstreeks in de werkomgeving te werken.
Hoewel het nog steeds een basisfunctie is in vergelijking met wat u met 3D in ActionScript-klassen kunt doen, opent deze tool de deur voor ontwerpers en animators die niet veel weten over code. Hiermee kunnen ze hun objecten in 3D-ruimte verplaatsen zonder de noodzaak van het gebruik van oude methoden (zoals het importeren van 3D-animatie in reeksafbeeldingen enz.)
Samen met de 3D-tool heeft Flash de manier veranderd waarop we bewegings-tweening begrijpen door de nieuwe bewegingstweenstijl toe te voegen, die meer lijkt op de automatische animatietoets in After Effects. Samen met de wijzigingen voor bewegings-tweening wordt Flash geleverd met de bewegingseditor. Dit paneel heeft veel functies en mogelijkheden die de animator meer controle geven over animatie in Flash met behulp van animatiecurven.
Het deelvenster Bewegingseditor verbetert niet alleen de animatie door meer opties te geven door middel van curvenbediening, maar biedt ook controle over animatie-verruiming, waardoor het een realistischer uiterlijk krijgt. Het easing-concept is bekend in veel animatietoepassingen zoals After Effects, maar het was voorheen zo eenvoudig in Flash en beperkt tot het wijzigen van de versmallingswaarde van 100 naar -100. De nieuwere easing-functies bieden u meer mogelijkheden om het versmallen van animaties te regelen, zoals we in de onderstaande stappen zullen zien.
In deze zelfstudie voegen we de functies voor 3D en versnelling samen door 3D-animatie in Flash te maken en ook de versnellingscurven toe te passen.
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Het eerste deel in onze tutorial is om de cartoonscène te bouwen voor een kamer met een deur.
Open een nieuw Flash-document met de afmetingen 600px X 450px en begin met het tekenen van de omtrek van de kamer die wordt weergegeven in de onderstaande afbeelding.
Houd er rekening mee dat de 3D-tool alleen beschikbaar is wanneer u de instellingen voor het publiceren van documenten hebt voor ActionScript 3 en Flash Player 10 of hoger. Bovendien kan het alleen worden toegepast op filmclipsymbolen. U moet ervoor zorgen dat uw instellingen voor het publiceren van bestanden (gevonden in Bestand> Publicatie-instellingen, verrassend) zijn ingesteld op ActionScript 3 en Flash Player 10 of hoger.
Knip het deurgebied af en plaats het op een nieuwe laag om het te kunnen bedienen met behulp van de 3D-gereedschappen.
Laten we nu wat details aan de achtergrond toevoegen om het een echte cartoonlook te geven. We voegen ook wat schaduwen en texturen toe aan de vloer en de deur.
Converteer het deursymbool in een filmclip en geef het de naam 'Deur'.
Het 3D-navigatie-item bevat vier cycli. Als u over elke cyclus sleept, kunt u het symbool in een van de volgende richtingen draaien:
Selecteer het 3D-gereedschap terwijl het deursymbool is geselecteerd. De 3D-activacycli verschijnen in het midden van het filmclipsymbool.
Klik op het middelpunt van de 3D-cycli en sleep het navigatie-item naar het midden rechts van de deur om het middelpunt te maken waar de deur ronddraait. De uiteindelijke look voor de achtergrond moet zijn zoals hieronder.
In de bovenstaande stappen hebben we de cartoonachtergrond voor de 3D-animatie voorbereid door bewegings-tweening. In deze animatie animeren we de deur om te openen en te sluiten met behulp van de 3D-tool. Sleep de tijdlijnindicator naar het eerste frame in het tijdlijnpaneel om de animatie te starten.
Klik op het gereedschap 3D Rotate en klik op het deursymbool. Merk op dat het 3D-navigatie-item aan de rechterkant van het object verschijnt.
Klik op de groene cyclus en sleep om de deur in de richting buiten de kamer te openen, zoals weergegeven in de onderstaande afbeelding.
Verplaats de tijdlijnindicator naar frame 50. En gebruik het 3D Rotate-gereedschap om de deur naar de andere kant van de kamer te draaien, zoals in de onderstaande afbeelding..
We hebben nu de 3D-animatie voor de deur in de Flash-fase gemaakt. Vervolgens zullen we de bewegingseditor gebruiken om meer realistische animatie-effecten te maken met behulp van de versmalingscurven in het deelvenster Bewegingseditor. Terwijl deze verbeterde easing-functie werd toegevoegd aan Flash CS4 en nieuwere releases, hadden de oudere versies van Flash een vereenvoudigde easing-functie met de waarde Easing in het eigenschappenvenster. U kunt deze waarde nog steeds vinden wanneer u ergens in bewegings-tweening klikt, maar deze methode heeft nooit veel andere opties opgeleverd dan het in- en uitschakelen.
Het deelvenster Bewegingseditor bestaat uit animatiecurven die de objecteigenschappen regelen door middel van animatie over het tijdsbestek. Elke curve vertegenwoordigt een specifieke eigenschap voor het object en is ervoor verantwoordelijk dat deze de tijd en het niveau van de wijziging verandert. De X-curve vertegenwoordigt bijvoorbeeld de animatie van het object op de X-as. Deze waarde wordt actief wanneer u een bewegings-tweening maakt die eraan is gekoppeld.
De versnellingscurven in het deelvenster Beweging zijn vergelijkbaar met de rest van de animatie-animatiekrommen omdat ze u meer mogelijkheden bieden om de realistische beweging van de animaties te regelen.
Er zijn twee hoofdmethoden om de versnellingscurve te maken. De eerste is door het vervolgkeuzemenu Ease-presets dat gereedschappen voor eenvoudige versoepeling bevat. De tweede methode is om de aangepaste versnellingscurve te maken. In deze tutorial zullen we beide methoden proberen.
Voordat we verder gaan, is hier een kort overzicht van de versnellingscurven in het deelvenster Beweging.
In het gedeelte Versnelling van het deelvenster Bewegingseditor kunt u de versnellingscurven toevoegen / verwijderen en bewerken door eenvoudig de gewenste curve te selecteren. Voordat we zien hoe we het versnellingseffect op de 3D-animatie kunnen toepassen, zullen we kort zien hoe de versnellingscurve werkt in het deelvenster Bewegingseditor.
De versnellingscurve is een uitgebreide methode om te bepalen hoe de animatie versnelt door de bewegingstweening om een realistischere animatie te maken; het toont de versnellings- of vertragingswaarde van de animatie door de tijd heen.
Het deelvenster Bewegingseditie biedt u de mogelijkheid om veel versnellingscurven te maken en verschillende curven toe te wijzen aan elke bewegingseigenschap en verschillende versoepelingen toe te passen op elke functie. In de volgende stappen zullen we beginnen met het toepassen van een versnellingsvoorinstelling op de deuropeningsanimatie.
Selecteer de filmclip of klik ergens op de bewegings-tweening, ga naar het deelvenster Motion Editor en ga naar het gedeelte Ease.
Klik op het plus-pictogram in het gedeelte Ease om gemak toe te voegen aan de vervolgkeuzelijsten. Kies de lente-verlichting.
Ga naar de rotatie Y-curve die de animatie van de deur weergeeft. Kies Lente in de vervolgkeuzelijst Easing. Druk op Ctrl + Enter om de animatie te testen.
U zult merken dat de deuranimatie is veranderd van een eenvoudige animatie van twee keyframes naar een complexe animatie met veereffect. U kunt ook andere easing-presets toevoegen en proberen ze om te zien hoe dit de deuranimatie beïnvloedt. De animatie zou als volgt moeten zijn:
In de volgende stappen maken we een aangepaste versnellingscurve en passen deze toe op de animatie voor het openen van de deur. We zullen de werking van de curve van naderbij bekijken en begrijpen hoe ermee te werken.
Allereerst, laten we de vorige versmalling verwijderen door No Ease te selecteren in de vervolgkeuzelijst easing of door op het minteken in het versmallingsgedeelte te klikken en de versnelling te kiezen die u wilt verwijderen. In dit voorbeeld verwijderen we de verversingsversie.
Klik op het plusteken naast het gedeelte Ease en kies Custom in de vervolgkeuzelijst. Hiermee wordt een nieuwe aangepaste easing-curve met een groene curve gemaakt om aan te geven dat deze kan worden bewerkt. Als u extra aangepaste versnellingscurven maakt, krijgt elke curve een unieke kleur.
De gemakscurve werkt op dezelfde manier als tekenpaden. Je kunt er punten op maken; deze punten vertegenwoordigen de hoofdframes of de punten die wijzigingen in de versnellingsanimatie aangeven. Elk punt heeft twee handvatten om te wijzigen hoe de rechter en linker delen van de curve eruitzien. Nu zullen we punten maken op de versnellingscurve die de deuranimatie zal beïnvloeden:
Klik met de rechtermuisknop op de versnellingscurve en maak keyframes op frames 10, 20, 30 en 40
De versnellingscurve varieert tussen nul en 100. Wanneer de curve naar de nulwaarde beweegt, beweegt de animatie naar het eerste frame en als de curve wordt verplaatst naar de waarde 100, wordt de animatie verplaatst naar het einde van de animatie. Merk ook op dat de curve voor harde slip betekent versnelling van hogere snelheid en trage slip betekent langzame animatieversnelling.
We zullen de positie en curve van de punten aanpassen om de animatieversnelling te beïnvloeden. Selecteer het eerste punt en verplaats het naar versmallingswaarde 100. Dit betekent dat de animatie zijn einde op dit punt bereikt en de harde slip betekent dat de animatie snel zal versnellen.
Verplaats het tweede punt naar de waarde nul, het derde punt naar waarde 50 en het vierde punt naar waarde 50.
Gebruik de puntgrepen op de laatste twee punten om een gladde gebogen slip te maken om de deur aan het einde van de animatie langzaam te laten bewegen. De laatste versnellingscurve zou de onderstaande figuur moeten waarderen:
Druk op Ctrl + Enter om de animatie te testen en zie hoe de nieuwe versnellingscurve de deuranimatie beïnvloedt. De uiteindelijke animatie voor het aanpassen op maat zou moeten zijn zoals hieronder:
Dit is het einde van de tutorial. Het doel was om u te helpen begrijpen hoe u de 3D-gereedschappen van Flash kunt gebruiken om animaties in 3D-ruimte te creëren en de uitgebreide versnellingsfuncties in het deelvenster Beweging toe te passen via de versnellingscurves.
Als u gemakkelijkheidsverlichtingscurven begrijpt, kunt u eenvoudiger en efficiënter complexe, realistische animaties maken door versnellingscurven toe te passen op de animatie in plaats van veel hoofdframes te maken in tweening in beweging.
.
Accentsconagua