Accentsconagua

Snelle tip maak een teksteffectklasse voor de schrijfmachine

Code
Share

In deze Snelle tip maken we een statische, herbruikbare ActionScript-klasse die een Typewriter-effect met een enkele regel produceert. Lees verder!

Stap 1: Kort overzicht

We splitsen een door de gebruiker gedefinieerde string op in een array en voegen de resulterende letters toe aan een TextField een voor een gebruikt de timer klasse.

Stap 2: Typewriterklasse

Onze klas zal zijn statisch, wat betekent dat het niet geïnstantieerd hoeft te worden met behulp van de nieuwe trefwoord. Voor toegang tot een statisch klassenlid gebruikt u de naam van de klasse in plaats van de naam van een exemplaar.

Maak een nieuw ActionScript-bestand en schrijf de volgende code:

 pakket import flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; public final class Typewriter / * Verklaar de variabelen en methoden als static * / private static var chars: Array; // de karakters in de string private static var tf: TextField; // textfield waarnaar de string zal worden geschreven private static var timer: Timer; // pauzeert tussen het schrijven van elk teken private static var i: int = 0; // variabele gebruikt om de geschreven karakters te tellen public static function write (txt: String, txtField: TextField, time: Number): void chars = txt.split (""); // deel de string in een array van tekens tf = txtField; // wijs tf toe aan het tekstveld dat is doorgegeven aan de functietimer = new Timer (time); // tijd instellen volgens parameter timer.addEventListener (TimerEvent.TIMER, writeChar); timer.start (); // start schrijffunctie private static function writeChar (e: TimerEvent): void if (i < chars.length)  tf.appendText(chars[i]); //writes a char every time the function is called i++; //next char  if (i >= chars.length) // controleer of reeks voltooid is timer.stop (); timer.removeEventListener (TimerEvent.TIMER, writeChar); // clear timer timer = null;

Stap 3: Gebruik

Het gebruik kan niet eenvoudiger - voeg gewoon de Typewriter.as klasse naar uw projectmap en gebruik de volgende code:

 Typewriter importeren; Typewriter.write ('Te schrijven tekst', targetTextfield, 50);

Dat is het, test uw film en u ziet uw TextField met het effect Typewriter.

Stap 4: Voorbeeld

Ik heb de klasse op dit voorbeeld swf gebruikt, zodat je het effect kunt zien:

Conclusie

Gebruik deze klasse om uw eigen effecten te maken!

Bedankt voor het lezen. Als je een meer geavanceerde versie van dit effect wilt hebben voor gebruik in je projecten, bekijk dan de brief per briefanimatie van Rasmus Wriedt Larsen.

Code
×