In deze zelfstudie gebruiken we tijdlijnanimatie om een aangepaste klasse te maken. We zullen de klasse vervolgens gebruiken op twee verschillende en verschillende MovieClips, waardoor de animatie effectief wordt gedupliceerd naar deze symbolen.
Kort overzicht
Een van de nieuwe functies die in Flash CS3 is meegekomen, samen met ActionScript 3, was de mogelijkheid om tijdlijnanimatie te kopiëren als AS3-code. In deze zelfstudie maken we een aangepaste klasse die kan worden gebruikt voor elke filmclip die u kiest. De resulterende klasse is meestal gebaseerd op XML en is niet iets dat je met de hand zou willen schrijven - nou, niet tenzij je veel werk en frustratie nodig hebt!
In het bovenstaande voorbeeld SWF zijn we alleen maar aan het groeien en vervagen de MovieClips, maar je zou een erg complexe animatie kunnen hebben en het zou net zo goed naar ActionScript worden gekopieerd. Het beste ding over het kopiëren van tijdlijnanimatie naar een klasse is herbruikbaarheid. U kunt zien dat de twee symbolen exact hetzelfde patroon van animatie volgen.
Stap 1: Het document instellen
Open een nieuw Flash-document en stel de volgende eigenschappen in
Documentgrootte: 400x200 px
Achtergrondkleur: #FFFFFF
Stap 2: De MovieClip instellen
Selecteer in het Tools-paneel het ovale gereedschap en teken een groene cirkel op het podium. U kunt de Shift-toets ingedrukt houden terwijl u de cirkel naar de vorm sleept die overeenkomt met een cirkel en niet met een uitgerekte ellips.
Geef de cirkel in de deelvenster Eigenschappen de volgende afmetingen
W: 27.00
H: 27.00
Klik met de rechtermuisknop op de cirkel die u zojuist hebt gemaakt en kies 'Converteren naar symbool'. invoeren cirkel als de naam en zorg ervoor dat het Type is ingesteld op Filmclip.
Stap 3: De animatie toevoegen aan de MovieClip
Klik met de rechtermuisknop op frame 60 op de tijdlijn en kies "Insert KeyFrame".
Zorg ervoor dat u nog steeds op frame 60 staat en gebruik het hulpmiddel Vrije transformatie in het deelvenster Gereedschappen om de cirkel naar ongeveer tweemaal de oorspronkelijke grootte te slepen.
Zorg dat je nog steeds op frame 60 staat in de cirkel MovieClip. Kies "Kleureffect" in het paneel Eigenschappen. Kies in de vervolgkeuzelijst Stijl de optie "Alfa" en stel deze in op 0%.
Klik op de laag waarop de cirkel staat om ervoor te zorgen dat alle frames zijn gemarkeerd. U kunt ook op het eerste frame klikken en vervolgens Shift ingedrukt houden en klikken op het laatste frame om te controleren of alle frames zijn gemarkeerd. Klik vervolgens met de rechtermuisknop ergens tussen de gemarkeerde frames en kies "Create Classic Tween".
Je kunt nu je animatie testen door naar Menu> Besturing> Afspelen. Je zou een groeiende en vervagende MovieClip moeten hebben.
Stap 4: De animatie kopiëren
Nu zijn we klaar om onze tijdlijnanimatie te kopiëren en onze klas te coderen.
Zorg ervoor dat alle frames zijn gemarkeerd met behulp van de bovenstaande techniek. Klik vervolgens met de rechtermuisknop op de tween in de tijdlijn en kies "Motion Motion As ActionScript 3.0". In de prompt die verschijnt, geeft u deze de instantienaam "GrowFade"
Kopieer de code die op je klembord verschijnt.
Stap 5: coderen van de klas
Maak een nieuw ActionScript-bestand door naar Menu> Bestand> Nieuw en dan kiezen ActionScript-bestand.
Voeg de volgende code toe aan het nieuwe AS-bestand:
Hier openen we ons pakket en importeren we wat. De Animator-les is wat wordt gebruikt om de animaties in onze klas te doen. De functie growAndFade () is waar we het gekopieerde ActionScript uit de bovenstaande stap plakken. We doen het volgende.
Binnen in de growAndFade () functie plak de ActionScript. Als je het opnieuw wilt kopiëren, volg je de bovenstaande stappen en geef je het de instantienaam "GrowFade".
De growAndFade de functie zou er nu ongeveer zo uit moeten zien
package openbare functie growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML = ; var GrowFade_animator: Animator = nieuwe Animator (GrowFade_xml, GrowFade); GrowFade_animator.play ();
We moeten hier wat opruimwerk aan doen.
Eerst moeten we de importverklaring verwijderen, omdat we dit al aan het begin van de les hebben gedaan.
Vervolgens willen we de GrowFade_animator als een lokale variabele voor de klas, dus we verplaatsen die naar de top en instantiëren deze binnen de growAndFade functioneer als volgt: GrowFade_animator = nieuwe Animator (GrowFade_xml, dit)
Je hebt misschien gemerkt dat we ook de tweede parameter hebben gewijzigd in deze. De reden dat we dit hebben gedaan is zodat we deze klasse kunnen gebruiken op elke MovieClip; als we het niet hadden veranderd naar deze dan kunnen alleen klassen met de instantienaam "GrowFade" deze klasse gebruiken.
Hier is de complete les met de nieuwe wijzigingen en een kleine toevoeging. We zullen deze toevoeging vervolgens bespreken.
pakket import flash.display.MovieClip; import fl.motion.Animator; openbare klasse GrowFade breidt MovieClip uit var GrowFade_animator: openbare functie Animator GrowFade () // constructorcode openbare functie growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML = ; GrowFade_animator = nieuwe Animator (GrowFade_xml, this); GrowFade_animator.play (); // Hoe vaak de animatie herhalen 0 = forever GrowFade_animator.repeatCount = 0;
Je zult merken dat we de repeatCount eigendom. Als u dit opgeeft, geeft u aan hoe vaak u de animatie moet herhalen. Als u het op nul zet, betekent dit dat het voor altijd zal worden herhaald.
Stap 6: De MovieClips instellen
Terug in de FLA verwijdert u de cirkel uit het werkgebied en verwijdert u alle kaders van de tijdlijn.
Klik in de bibliotheek met de rechtermuisknop op de cirkel filmclip en kies "Eigenschappen".
Geef de cirkel de Class Name "Circle" en stel de Base Class in op "GrowFade"; omdat de klasse GrowFade MovieClip uitbreidt, kunnen we deze gebruiken als de basisklasse van de cirkel. We hebben geen Circle-klasse gemaakt, maar omdat we GrowFade als basisklasse hebben ingevoerd, maakt Flash automatisch een klasse voor de Circle die breidt GrowFade uit, wanneer de SWF is gemaakt. Dit is hoe we in staat zijn om zoveel Movie Clips te gebruiken als we willen, die allemaal de GrowFade-klasse delen.
Teken vervolgens een blauwe rechthoek op het podium.
Geef in het paneel Properties deze rechthoek de volgende eigenschappen:
W: 83,00
H: 30:00
Klik met de rechtermuisknop op de rechthoek en kies "Converteren naar symbool"; geef het de naam plein.
Verwijder de rechthoek uit het werkgebied. Klik in de bibliotheek met de rechtermuisknop op de vierkante MovieClip. Kies "Eigenschappen" en geef het de Class Name "Square" en stel de Base Class in op "GrowFade" zoals we deden met de cirkel hierboven.
Stap 6: De klasse toepassen op de filmclips
Maak een nieuw ActionScript-bestand en voeg de volgende code toe:
pakket import flash.display.MovieClip; public class Main breidt MovieClip uit var circle: Circle; var vierkant: Vierkant; public function Main () circle = new Circle (); circle.x = 50 circle.y = 50; addChild (cirkel); circle.growAndFade (); vierkant = nieuw Vierkant; square.x = 200; square.y = 50; addChild (vierkant); square.growAndFade ();
Omdat we de basisklasse van de cirkel en het vierkant instellen op GrowFade, kunnen we de growAndFade () methode op hen.
Stel de documentklasse van de film in op Main en test de film. U zou twee afzonderlijke filmclips moeten hebben die dezelfde GrowAndFade-animatie gebruiken.
Conclusie
Tijdlijnanimatie kopiëren is een geweldige toevoeging aan Flash. Ongeacht hoe complex een animatie is die u bedenkt, Flash kan het voor u aan, en dezelfde animatie delen met veel verschillende filmclips is een enorme tijdbesparing.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
Share
Accentsconagua
