Share
Het zou geen verrassing moeten zijn dat je TLF-tekst als een knop kunt gebruiken om een evenement in je film te starten. Je kunt bijvoorbeeld een tekstblok op het podium hebben dat praat over een bezoek aan Times Square in New York, en wanneer de gebruiker op de zin Times Square klikt, verschijnt een foto op het podium. In dit voorbeeld klik je op een tekst en een gele ster die je maakt op het podium begint te draaien.
Het volgende is een oefening van Foundation Flash CS5 For Designers door Tom Green en Tiago Dias.Open een nieuw Flash ActionScript 3.0-document en sla het op als TLF_eventLink_AS.fla. Wijzig de naam van Laag 1 in Ster en voeg een nieuwe laag met de naam acties toe.
Klik eenmaal in het eerste frame van de sterlaag. Klik op het gereedschap Rechthoek op uw werkbalk en houd vast en selecteer het gereedschap Polystar.
In het paneel Properties verdraait u de eigenschappen Fill en Stroke en stelt u de stroke-waarde in op None en de Fill-waarde op Yellow (# FFFF00).
Keer de Tool-instellingen naar beneden en klik op de knop Opties om het dialoogvenster Tool-instellingen te openen dat wordt weergegeven in Afbeelding 6-26. Selecteer Ster in de vervolgkeuzelijst Stijl en voer 5 in voor het aantal zijden. Klik op OK om het dialoogvenster te sluiten.
Gebruik de tool PolyStar om sterren te maken.
Teken ergens in de onderste helft van de fase een ster, converteer deze naar een filmclip Star, stel het registratiepunt in op Center en geef in het venster Properties de Star-filmclip de naam Exemplaar van starMC.
Klik op het eerste frame van de actielagen en open het deelvenster Handelingen. Wanneer het paneel wordt geopend, klikt u eenmaal in het Script-venster en voert u het volgende codeblok in:
var containerSprite: Sprite = nieuwe Sprite (); this.addChild (containerSprite); containerSprite.x = 25 containerSprite.y = 50;
Een Sprite is een virtuele filmclip zonder tijdlijn. We beginnen met het maken van een Sprite met de naam containerSprite, die wordt gebruikt om de tekst vast te houden. De reden dat we dit nodig hebben, is omdat er enige interactiviteit bij komt kijken. Deze Sprite wordt geplaatst op 25 pixels vanaf de linkerkant van het werkgebied en 50 pixels vanaf de bovenkant.
Druk twee keer op Enter (Windows) of Return (Mac) en voer de volgende code in:
var container: ContainerController = nieuwe ContainerController (containerSprite, 400, 300);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;
Niets nieuws hier. De container voor de tekst is gemaakt samen met de Configuratie() object en de opmaak voor de tekst die in de container moet worden geplaatst, wordt gemaakt.
Druk twee keer op de toets Enter (Windows) of Return (Mac) en voer het volgende in:
var textFlow: TextFlow = new TextFlow (); var p: ParagraphElement = new ParagraphElement (); p.linkHoverFormat = color: 0XFF0000; p.linkNormalFormat = color: 0x0000FF, textDecoration: TextDecoration.NONE;
De laatste twee regels zijn nieuw en hun doel is om u de kleur van een woord of groep woorden te laten veranderen wanneer de gebruiker eroverheen rolt. De eigenschap linkHoverFormat behoort tot de klasse TextFormat en wordt gebruikt om Flash te vertellen welke kleur de tekst die als een koppeling wordt geïdentificeerd, is wanneer de muis eroverheen rolt. In dit geval verandert de kleur in Rood.
Zoals je misschien al geraden had, vertelt de tweede regel aan Flash welke kleur de link moet zijn wanneer de muis wegrolt. In dit geval is het blauw. Uiteraard worden koppelingen traditioneel onderstreept. De manier waarop de onderstreping wordt verwijderd, is door de NONE-constante te gebruiken, die deel uitmaakt van de TextDecoration-klasse. Als u de onderstreping wilt, is dit TextDecoration.UNDERLINE.
De volgende stap in het proces is om Flash te vertellen wat te doen als er op de gekleurde tekst wordt geklikt.
Druk twee keer op de toets Enter (Windows) of Return (Mac) en voer het volgende in:
var link: LinkElement = new LinkElement (); link.addEventListener (FlowElementMouseEvent.CLICK, linkClicked);
Er is natuurlijk niets om op te klikken. Laten we dit probleem oplossen.
Druk een paar keer op de toets Enter (Windows) of Return (Mac) en voeg het volgende toe:
var linkSpan: SpanElement = new SpanElement (); linkSpan.text = "Klik hier"; link.addChild (linkspan); var span: SpanElement = new SpanElement (); span.text = "om je star spin in het werkgebied te zien"; p.addChild (link); p.addChild (overspanning);
De volgende stap is om de tekst in de container te laten vloeien.
Druk op Enter (Windows) of Return (Mac) en voeg het volgende toe:
textFlow.addChild (p); textFlow.flowComposer.addController (container); textFlow.flowComposer.updateAllControllers ();
De laatste codebit is de functie waarmee de ster ronddraait wanneer op de tekst wordt geklikt. Vul het volgende in:
functie linkClicked (evt: FlowElementMouseEvent): void evt.preventDefault (); var tween: Tween = nieuwe Tween (starMC, "rotatie", Elastic.easeOut, 0, 180, 2, true);
De eerste regel code vertelt Flash om eventuele standaardinstellingen te negeren met betrekking tot de muis en de tekst in de container.
De magie gebeurt in die tweede lijn. De parameters vertellen de klasse Tween om te werken met de rotatie-eigenschap van de ster (starMC) en een easeOut toe te passen op de ster wanneer deze is geëindigd met roteren. Uiteraard moet Flash, dom zijn, worden verteld dat de rotatie begint met de ster op 0 graden en 180 graden roteert. Het doet dit twee keer en gebruikt seconden als maat voor de tijd.
Klik op de knop Syntaxis controleren terwijl u voor het eerst de code doorzoekt op zoek naar fouten. Als dat niet het geval is, zal je computer het doen. Als er fouten worden gevonden, worden deze weergegeven in het deelvenster Compileren. De meest voorkomende fout is spelling of een ontbrekend importbericht.
Hier is een snelle tip. Als een klasse niet wordt weergegeven als import, geeft het deelvenster Compileren aan dat de eigenschap ongedefinieerd is. Selecteer de klasse in de code waar deze verschijnt en verwijder de tekst. Typ de eerste twee letters van de klas en druk op Ctrl + spatiebalk. De klasse verschijnt in de resulterende codehint. Dubbelklik op de klasse om deze opnieuw toe te voegen aan de code. Hiermee wordt ook de ontbrekende importinstructie gemaakt.
De tekst is gekleurd. Wanneer u met de muis klikt, draait de ster. Een volledige versie van dit bestand wordt meegeleverd bij de brondownload.
Dit zijn de importstatements voor deze oefening:
import flash.display.Sprite; import flashx.textLayout.container.ContainerController; import flashx.textLayout.elements.Configuration; import 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; import flashx.textLayout.formats.TextDecoration; import fl.transitions.easing.Elastic; import flashx.textLayout.formats.TextAlign;
Genoten van dit? Meer willen? Je kunt altijd een exemplaar kopen bij FriendsOfEd ...
Accentsconagua