Flash CS5 for Designers: Bruk TLF Tekst som en knapp
Del
Del
Del
Share < .no> Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Det burde ikke komme som noen overraskelse at du kan bruke TLF tekst som en knapp for å sparke i gang en hendelse i filmen. For eksempel kan du ha en tekstblokk på scenen som snakker om et besøk på Times Square i New York, og når brukeren klikker uttrykket Times Square, vises et bilde på scenen. I dette eksemplet skal du klikker litt tekst, og en gul stjerne du vil skape på scenen begynner å spinne
Det følgende er en øvelse fra Foundation Flash CS5 For Designers av Tom Green &.; Tiago Dias
Trinn 1:. Nytt dokument
Åpne en ny Flash Actionscript 3.0 dokument og lagre det som TLF_eventLink_AS.fla. Endre navnet på Layer 1 til Star, og legge et nytt lag kalt handlinger
Trinn 2:. Velg Polystar Tool
Klikk én gang i den første rammen av Star laget. Klikk og hold på rektangelverktøyet på verktøylinjen, og velg Polystar verktøy
Trinn 3:. Mellow Yellow
I Egenskaper-panelet, snurre ned strek og fyll egenskaper og . satt Strek verdien til Ingen og Fill verdien til Yellow (# FFFF00)
Trinn 4: Stjerne
Snurr ned Verktøyinnstillinger, og klikk på Valg-knappen for å åpne Tool Innstillinger dialogboksen vist i figur 6-26. Velg stjerne fra Stil rullegardinlisten, og skriv 5 for antall sider. Klikk OK for å lukke dialogboksen
Bruk Polystar verktøy for å skape stjerner
Trinn 5:.. MovieClip
Tegn en stjerne et sted i nedre halvdel av scenen, konvertere den til et filmklipp som heter Star, satt sitt registreringspunktet til senter, og i panelet Egenskaper gi Star filmen klippet Instance navnet starMC
Trinn 6:. Handlinger
Klikk på den første rammen av de handlinger lag, og åpne Handlinger panelet. Når panelet åpnes, klikker du en gang i Script-panelet, og skriv inn følgende kode blokken:
Var containerSprite: Sprite = new Sprite (); this.addChild (containerSprite); containerSprite.x = 25containerSprite.y = 50; < p> En Sprite er en virtuell filmklipp uten tidslinje. Vi starter med å lage en Sprite heter containerSprite, som vil bli brukt til å holde teksten. Grunnen til at vi trenger dette er fordi det kommer til å bli litt interaktivitet involvert. Dette Sprite er plassert 25 piksler fra venstre kant av scenen og 50 piksler fra toppen
Trinn 7:. Configuration ()
Trykk på Enter (Windows) eller Retur ( Mac) tasten to ganger, og skriv inn følgende kode:
Var container: ContainerController = new ContainerController (containerSprite, 400, 300); < /p > Var config: Configuration = new Configuration (); Var charFormat: TextLayoutFormat = new TextLayoutFormat (); charFormat.fontFamily = "Arial, Helvetica, _sans"; charFormat.fontSize = 14; charFormat.color = 0x000000; charFormat.textAlign = TextAlign.LEFT; config.textFlowInitialFormat = charFormat;
Ikke noe nytt her. Beholderen for teksten er laget sammen med Configuration () objekt, og formateringen for at teksten skal plasseres i beholderen er opprettet
Trinn 8:. LinkHoverFormat
Press Enter (Windows) eller Retur (Mac) tasten to ganger, og skriv inn følgende:
Var løpende mengde ord: løpende mengde ord = new løpende mengde ord (); Var p: ParagraphElement = new ParagraphElement (); p.linkHoverFormat = {color: 0xff0000}; p.linkNormalFormat = {color: 0x0000FF, textDecoration: TextDecoration.NONE};
De to siste linjene er nye, og deres formål er å la deg endre fargen på et ord eller en gruppe av ord når brukeren ruller over dem, . Den linkHoverFormat Eiendommen tilhører tekstformat klasse og brukes til å fortelle Flash hvilken farge teksten identifisert som en kobling vil være når musen beveges over det. I dette tilfellet, vil fargen endres til Red.
Som du kanskje har gjettet, forteller den andre linjen Flash hvilken farge koblingen er å være når musen ruller av. I dette tilfellet vil det være blå. Naturligvis er lenker tradisjonelt understreket. Måten understreking er fjernet, er å bruke NONE konstant, noe som er en del av TextDecoration klassen. Hvis du vil at understreking, ville det være TextDecoration.UNDERLINE.
Neste steg i prosessen er å fortelle Flash hva du skal gjøre når den fargede teksten er klikket.
Trinn 9: Klikk
Trykk på Enter (Windows) eller Retur (Mac) tasten to ganger, og skriv inn følgende:
Var link: LinkElement = new LinkElement (); link.addEventListener (FlowElementMouseEvent.CLICK, linkClicked);
Det er selvsagt ikke noe å klikke. La oss håndtere dette problemet.
Trinn 10: Span
Trykk på Enter (Windows) eller Retur (Mac) et par ganger, og legge til følgende:
Var linkspan: SpanElement = new SpanElement (); linkSpan.text = "Klikk her"; link.addChild (linkspan); Var span: SpanElement = new SpanElement (); span.text = "for å se din stjerne spinn på scenen"; p.addChild (link ); p.addChild (span);
Det neste trinnet er å få teksten flyter inn i beholderen.
Trinn 11: Spin
Trykk på Enter (Windows) eller Retur (Mac), og tilsett following:
textFlow.addChild(p);textFlow.flowComposer.addController(container);textFlow.flowComposer.updateAllControllers();
The endelige koden bit er funksjonen som får stjernen spinne når teksten er klikket. Skriv inn følgende:
funksjon linkClicked (evt: FlowElementMouseEvent): void {evt.preventDefault (); Var tween: Tween = new Tween (starMC, "rotasjon", Elastic.easeOut, 0, 180, 2, true);}
Den første linjen i koden forteller Flash for å ignorere alle standardinnstillingene kan det være i forhold til mus og teksten i beholderen.
Magien skjer i den andre linjen. Parametrene fortelle Tween klassen til å jobbe med rotasjon eiendom stjernen (starMC) og å anvende en easeOut til stjernen når den er ferdig roterer. Naturligvis, Flash, å være dum, trenger å bli fortalt at rotasjonen starter med stjernen på 0 grader og å rotere over 180 grader. Det gjør dette to ganger og bruker sekunder som mål på tiden
Trinn 12:. Feilkontroll
Klikk på Kontroller syntaks knappen som første skumme gjennom koden på jakt etter feil. Hvis det er ingen, datamaskinen vil ding. Hvis det blir funnet feil, vil de bli vist i Compiler panel. Den vanligste feilen vil være staving eller en manglende import uttalelse.
Her er en rask spiss. Hvis en klasse ikke dukker opp som en import, vil kompilatoren panel fortelle deg eiendommen er udefinert. Velg klasse i koden der det vises, og slette teksten. Skriv inn de to første bokstavene i klassen, og trykk Ctrl + mellomromstasten. Klassen vil vises i den resulterende kode hint. Dobbeltklikk klassen for å legge den tilbake i koden. Dette skaper også den manglende import uttalelse.
Steg 13: Lagre og Test Movie
Teksten er farget. Når du klikker på musen, spinner stjernen. En ferdig versjon av denne filen er inkludert med kilde nedlasting
Importer Statements for denne øvelsen
Dette er importregnskapet for denne øvelsen.
Import flash.display.Sprite; import flashx.textLayout.container.ContainerController; import flashx.textLayout.elements.Configuration, importere flashx.textLayout.formats.TextLayoutFormat, import flashx.textLayout.elements.TextFlow, import flashx.textLayout.elements.ParagraphElement, import flashx.textLayout.elements .LinkElement, import flashx.textLayout.elements.SpanElement, import flashx.textLayout.events.FlowElementMouseEvent, import fl.transitions.Tween, importere flashx.textLayout.formats.TextDecoration, importere fl.transitions.easing.Elastic, importere flashx.textLayout .formats.TextAlign;
Likte dette? Ønsker mer? Du kan alltids kjøpe en kopi fra FriendsOfEd ...