Elk type TLF-tekst in Flash - Alleen lezen, Selecteerbaar en Bewerkbaar - ondersteunt hyperlinks. Het enige wat u hoeft te doen om een link in een tekstcontainer toe te voegen, is door uw tekst in te typen, een paar woorden te selecteren en de gewenste URL in te voeren in het paneel Properties. Optioneel kunt u ook een doel invoeren.
Het volgende is een oefening van Foundation Flash CS5 For Designers door Tom Green en Tiago Dias.Als u wilt dat de hele tekstcontainer een hyperlink krijgt, gebruikt u het gereedschap Selecteren om de container zelf te selecteren en gebruikt u vervolgens de eigenschappen Koppeling en Doel in het gebied Geavanceerde tekenopties van het venster Eigenschappen op dezelfde manier.
Een hyperlink naar tekst toepassen
Hoe gemakkelijk deze benadering ook is, een nadeel is de hyperlink onderstreping toegevoegd aan de tekst. Het kan gewoon niet worden verwijderd. Toch kunnen hyperlinks absoluut zijn, zoals http://www.SuperSite.com/thisPageHere.html, of relatief, zoals../thisOtherPage.html. Voor relatieve paden is het belangrijk om te weten dat het pad niet wordt bepaald vanuit het oogpunt van de SWF, maar vanuit het HTML-bestand dat de weg bevat.
U kunt er bijvoorbeeld voor kiezen al uw HTML-bestanden in de hoofdmap van uw website te bewaren. Omdat u een georganiseerde ontwikkelaar bent, kunt u ervoor kiezen al uw afbeeldingsbestanden in hun eigen submap van de hoofdmap te plaatsen en u kunt hetzelfde doen met uw Flash-inhoud. Vanuit het oogpunt van een SWF moet voor het relatieve pad naar alle HTML-bestanden een map worden teruggezet. Dus als een SWF naar een van die pagina's linkt, bent u misschien geneigd om de bestandsnaam van de bestemming vooraf te gaan met ... /, maar doe dat niet! Het HTML-bestand dat de betreffende SWF bevat, bevindt zich al in dezelfde map als de bestemmingspagina en het is het standpunt van het HTML-bestand dat er toe doet.
Zoals u in het vorige voorbeeld hebt gezien, kunt u een stuk tekst in een container gebruiken om een gebeurtenis in de Flash-fase te activeren. Het spreekt voor zich dat hetzelfde stuk tekst kan worden gebruikt om een webpagina te lanceren. In plaats van alles opnieuw klaar te maken, open je de bijgevoegde TLF_Hyperlink_AS.fla bestand en laten we zien hoe dit is bereikt.
Blader naar regel 32 van het Script-venster.
Selecteer het woord GEEN
, en verander het in ONDERSTREPEN
. Het resultaat van deze wijziging is om de klikbare tekst daadwerkelijk te laten lijken op een gewone HTML-hyperlink die een onderstreepte tekst gebruikt.
Druk twee keer op Enter (Windows) of Return (Mac) en voer het volgende codeblok in:
var link: LinkElement = new LinkElement (); link.href = "http://www.friendsofed.com"; var linkSpan: SpanElement = new SpanElement (); linkSpan.text = "Klik hier"; link.addChild (linkSpan); var span: SpanElement = new SpanElement (); span.text = "om de bestanden voor dit boek te downloaden."; p.addChild (link); p.addChild (overspanning); textFlow.addChild (p);
Zoals u wellicht hebt verzameld, worden alle items in een TLF-container beïnvloed of beheerd door elementen. De eerste twee regels stellen vast dat een variabele is aangeroepen link
wordt beheerd door een LinkElement
en zal worden geplaatst in een LinkElement ()
voorwerp. De volgende regel gebruikt de standaard href
tag van HTML om de link te identificeren.
Nu dat u hebt vastgesteld waar de link naartoe gaat - naar de vrienden van de ED-website - maakt u een span voor de tekst waarop geklikt zal worden, plaatst u de tekst in de reeks en gebruikt u de addChild ()
methode om de linkspan
op het podium.
De rest van de code voegt de resterende tekst toe, koppelt de link aan de tekst in de zin (p
), plaatst de zin op het podium en leidt deze naar de textFlow
houder.
Sla het bestand op en test de film. De tekst met de link, zoals hieronder weergegeven, is blauw en heeft een vrij spetterende onderstreping. Klik op de koppeling en de vrienden van de startpagina van ED openen.
De ... gebruiken ONDERSTREPEN
constant voegt de gebruikelijke HTML-onderstreepte gebruikers toe die eraan gewend zijn.
Dit zijn de importstatements die voor deze oefening zijn gebruikt:
import flash.display.Sprite; import flashx.textLayout.container.ContainerController; import flashx.textLayout.elements.Configuration; import flashx.textLayout.formats.TextLayoutFormat; import flashx.textLayout.formats.TextAlign; import flashx.textLayout.elements.TextFlow; import flashx.textLayout.elements.ParagraphElement; import flashx.textLayout.edit.EditManager; import flashx.undo.UndoManager; import flashx.textLayout.formats.TextDecoration; import flashx.textLayout.elements.LinkElement; import flashx.textLayout.elements.SpanElement;