Flash CS5 voor ontwerpers TLF en ActionScript + Win 1 van de 3 ondertekende exemplaren!

Er is veel veranderd tussen de manier waarop tekst werd verwerkt in Flash CS4 en Flash CS5. We denken dat het nu een goed moment is om een ​​kruk omhoog te halen, te gaan zitten en in zeer algemene termen te bekijken wat men moet weten over TLF voordat een oefening of project 'bedraadt' wordt met ActionScript.

Het volgende is een oefening van Foundation Flash CS5 For Designers door Tom Green en Tiago Dias.
 
Als je geluk hebt, vul dan de Activetuts + competitie in win een van de 3 gesigneerde exemplaren! (U kunt natuurlijk altijd een exemplaar kopen ...)

Invoering

Met het nieuwe TextLayoutFramework (TLF) wordt tekst gevonden in deze dingen die worden genoemd containers. Ze kunnen fysiek op het werkgebied worden getekend met de tool Tekst en een instantienaam krijgen of, zoals vaker wordt gebruikt, tijdens runtime worden gemaakt. U weet ook dat de tekst kan worden opgemaakt en gemanipuleerd via het paneel Eigenschappen. Het leuke hier is het woord eigenschappen. Als er een eigenschap in het deelvenster staat, wordt de tegenpartij gevonden in ActionScript. Het slechte nieuws is dat ActionScript steen is, koud dom. Het heeft bijvoorbeeld geen idee wat een container is, totdat je het vertelt om er een te maken. Het zal geen tekst opmaken totdat je het vertelt wat je moet doen. Het zal de tekst niet eens op het toneel zetten voordat hem wordt verteld dat te doen.

De meeste projecten beginnen met het vertellen van Flash om een ​​a te maken Configuratie() object, dat wordt gebruikt om Flash te vertellen dat er een container op het werkgebied is en hoe het Text Layout Framework moet worden beheerd voor de items in de container. Het werkelijke uiterlijk wordt afgehandeld door de TextFlow () klasse, die als het ware de bevelen opneemt van de Configuratie() voorwerp.

Natuurlijk, dom zijn, de Configuratie() object moet precies worden verteld hoe de tekst in de container moet worden beheerd. Het standaardformaat wordt ingesteld via een eigenschap van de opgegeven configuratieklasse textFlowInitialFormat. Om het te veranderen, gebruikt u eenvoudig de TextlayoutFormat () klasse om de lettertypen, kleuren, uitlijning enzovoort in te stellen en vervolgens de baas te vertellen-Configuratie ()-dat is het textFlowInitialFormatis veranderd naar degenen die u hebt ingesteld TextLayoutFormat ().De baas zal dat krijgen, maar hij is niet verschrikkelijk slim, dus je moet hem vervolgens vertellen het daadwerkelijke werk aan een ander lid van het managementteam, de TextFlow () klasse. Deze klasse draagt ​​de algehele verantwoordelijkheid voor alle woorden in een container. Het is net zo zwak als de baas, TextFlow () moet worden verteld wat een alinea is (ParagraphElement), hoe breed is de alinea (SpanElement), of afbeeldingen in de alinea zijn ingesloten (InlineGraphicElement), of een van de tekst links bevat (Link Element), enzovoorts. Niet alleen dat, maar er moet ook worden aangegeven welke tekst aan de container wordt toegevoegd, zodat deze de lengte van de regel aankan en kinderen toevoegt (addChild) die die opmaak bevatten, zodat de gebruiker het kan zien.

De TextFlow () Klasse, opnieuw niet al te vreselijk helder, zal de taak dan overhandigen aan een ander lid van het managementteam, de IFlowComposer () klasse, wiens enige taak erin bestaat de lay-out en weergave van de tekstflow binnen of tussen de containers te beheren. De flowcomposer voltooit het proces door te beslissen hoeveel tekst in een container gaat en voegt dan de tekstregels toe aan de sprite. Dit wordt bereikt door het gebruik van de addController () methode, die een ContainerController () object waarvan de parameters de container en zijn eigenschappen identificeren.

De gebruikelijke laatste stap is om de FlowComposer opdracht te geven de controllers bij te werken en de tekst op het podium te plaatsen, afhankelijk van hoe de andere leden van het team de Configuratie() object hoe hun deel van het project moet worden beheerd.

Laten we met deze informatie verder gaan met werken met TLF in ActionScript. We gaan een kolom tekst maken met ActionScript.


Stap 1: Nieuw document

Open een nieuw Flash ActionScript 3.0-document, herno laag 1 naar acties, selecteer het eerste frame van de actielaag en open het deelvenster Handelingen.


Stap 2: ActionScript

Klik één keer in het Script-venster en voer het volgende in:

var myDummyText: String = "De introductie van de Adobe CS5-productlijn brengt een aantal krachtige typografische hulpmiddelen in uw handen, met name een nieuwe API (Application Programming Interface) genaamd Type Layout Framework (TLF) -en met als meer hulpmiddelen in de Adobe-lijn om dichter bij een samenvloeiingspunt te komen met Flash, staat het veld met typografische bewegende beelden op het punt om naar een territorium te gaan dat nog moet worden onderzocht. Om die verkenning te starten, moet u weten wat voor type Flash is en, net zo belangrijk , wat u ermee kunt doen om de communicatiebezoekers van uw inhoud te eren. ";

Je hebt wat tekst nodig om aan het podium toe te voegen. Deze reeks is de derde alinea van dit hoofdstuk. Nu u de tekst hebt om in de container te gaan, moet u de klasse laden die deze zal beheren.


Stap 3: Configuratie ()

Druk op de toets Enter (Windows) of Return (Mac) en voeg de volgende coderegel toe:

 var config: Configuration = new Configuration ();

Zoals je misschien hebt gemerkt, heeft Flash de klasse geïmporteerd zodra je het Configuration () -object hebt gemaakt-flashx.textLayout.elements.Configuration -waarvan de primaire taak is om te bepalen hoe TLF zich gedraagt. Het volgende codeblok vertelt TLF hoe de tekst op het werkgebied zal verschijnen.


Stap 4: TextLayoutFormat Class

Druk twee keer op de toets Enter (Windows) of Return (Mac) en voer het volgende in:

 var charFormat: TextLayoutFormat = new TextLayoutFormat (); charFormat.fontFamily = "Arial, Helvetica, _sans"; charFormat.fontSize = 14; charFormat.color = 0x000000; charFormat.textAlign = TextAlign.LEFT; charFormat.paddingLeft = 100; charFormat.paddingTop = 100;

De TextLayoutFormat-klasse, zoals we eerder al zeiden, is hoe de tekst in een container wordt opgemaakt. De eigenschappen in deze klasse zijn van invloed op de indeling en stijl van de tekst in een container, een alinea of ​​zelfs een enkele regel tekst. In dit geval vertellen we Flash welke lettertypen moeten worden gebruikt, hoe groot de kleur moet zijn, hoe deze moet worden uitgelijnd (let op de hoofdletter die wordt gebruikt voor de uitlijning) en de opvulling die de letters van de randen van de container verwijdert.

Voordat je verder gaat, moet je iets doen. Er is een codeerprobleem. Blader omhoog naar de importinstructies. Als je deze regel ziet-import flashx.textLayout.elements.TextAlign;-ga naar het volgende codeblok. Als u dat niet doet, verwijdert u deze regel in het zojuist ingevoerde codeblok: charFormat.textAlign = TextAlign.LEFT;. Opnieuw binnenkomen charFormat.textAlign =. Typ de eerste twee letters van de klas (te), druk op Ctrl + spatiebalk en de coderingstekst moet verschijnen. Vind TextAlign, en dubbelklik erop. Dit zou de ontbrekende importverklaring moeten toevoegen. Om uw gezond verstand te behouden, zullen we een lijst met importverklaringen verstrekken die aan het einde van elke oefening moet verschijnen. We raden u ten zeerste aan om uw lijst met importverklaringen te vergelijken met de weergegeven lijst en, als u deze mist, in uw code op te nemen.

Nu u weet hoe de tekst zal worden geformatteerd, moet u het Configuration () -object doorgeven om de opmaak te gebruiken. Als u dit niet doet, wordt de standaardinstelling toegepast die hij kiest.


Stap 5: textFlowInitialFormat

Druk twee keer op de toets Enter (Windows) of Return (Mac) en voer het volgende in:

 config.textFlowInitialFormat = charFormat;

Stap 6: TextFlow ()

Druk op de toets Enter (Windows) of Return (Mac) en voer het volgende codeblok in:

 var textFlow: TextFlow = new TextFlow (config); var p: ParagraphElement = new ParagraphElement (); var span: SpanElement = new SpanElement (); span.text = myDummyText; p.addChild (bereik); textFlow.addChild (p);

De TextFlow () object moet hier zijn omdat het de taak is om alle tekst in de container te beheren. De constructeur-TextFlow (config)-laat TLF weten dat het het eerder gemaakte config-object moet gebruiken, zodat het nu weet hoe de inhoud van de container en zelfs de container zelf moet worden geformatteerd.
De volgende constructor-ParagraphElement ()-vertelt in feite Flash hoe een alinea moet worden behandeld. Er is hier maar één, dus het heeft echt geen parameter nodig.

De laatste stap is om alle opmaak en lay-out in de container op het podium te krijgen.


Stap 7: ContainerController

Druk op de toets Enter (Windows) of Return (Mac) en voeg deze laatste twee regels toe:

 textFlow.flowComposer.addController (nieuwe ContainerController (dit, 500, 350)); textFlow.flowComposer.updateAllControllers ();

De eerste regel voegt de ContainerController en vertelt Flash dat de container die wordt beheerd, het huidige DisplayObject is (deze), die momenteel de fase is, en om de afmetingen in te stellen op 500 pixels breed bij 350 pixels hoog.


Stap 8: Test

Sla het project op en test de film. De tekst, zoals hieronder weergegeven, wordt weergegeven met behulp van de opmaakinstructies die u hebt ingesteld.

Importeer verklaringen voor deze oefening

Dit zijn de importstatements voor deze oefening:

 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.elements.SpanElement; import flashx.textLayout.container.ContainerController;

ActionScript gebruiken om de container en de bijbehorende tekst te maken en op te maken

Hoewel deze codeertaak in eerste instantie nogal ingewikkeld lijkt, kunnen we verzekeren dat dit niet het geval is; het zal bijna een tweede natuur worden naarmate je ActionScript gaat gebruiken om met tekst in de containers te spelen.

Met de introductie van de indeling Tekstlay-out heeft uw vermogen om tekst te maken, tekst op te maken, in kolommen te plaatsen en deze in het algemeen te manipuleren met ActionScript uw ​​creatieve mogelijkheden enorm uitgebreid. Voordat je helemaal enthousiast bent, moet je dat weten Kader is er voor een reden.

Alle TLF-tekstobjecten die u maakt, zijn afhankelijk van een specifieke TLF ActionScript-bibliotheek, ook wel a runtime gedeelde bibliotheek (RSL). Wanneer u op het werkvlak in de Flash-interface werkt, biedt Flash de bibliotheek. Dit is niet het geval wanneer u de SWF publiceert en in een webpagina plaatst. Het moet beschikbaar zijn, net als Flash Player, op de computer van de gebruiker. Wanneer de SWF wordt geladen, gaat deze op drie plaatsen naar de bibliotheek zoeken:

  • De lokale computer: Flash Player zoekt naar een kopie van de bibliotheek op de lokale computer waarop deze wordt afgespeeld. Als het er niet is, gaat het naar Adobe.com.
  • Adobe.com: Als er geen lokale kopie beschikbaar is, vraagt ​​Flash Player de Adobe-servers naar een kopie van de bibliotheek. De bibliotheek, net als de Flash Player-plug-in, hoeft maar één keer per computer te downloaden. Daarna gebruiken alle volgende SWF-bestanden die op dezelfde computer worden afgespeeld de eerder gedownloade kopie van de bibliotheek. Als het om de een of andere reden het daar niet kan pakken, zal het in de map met de SWF kijken.
  • In de map met de SWF: Als de servers van Adobe om de een of andere reden niet beschikbaar zijn, zoekt Flash Player naar de bibliotheek in de webserverdirectory waar het SWF-bestand zich bevindt. Om dit extra back-upniveau te bieden, uploadt u het bibliotheekbestand samen met uw SWF-bestand handmatig naar de webserver. We geven meer informatie over hoe dit te doen in hoofdstuk 15.

    Wanneer u een SWF-bestand publiceert dat TLF-tekst gebruikt, maakt Flash een aanvullend bestand met de naam textLayout_X.X.X.XXX.swz (waarbij de XS worden vervangen door het versienummer) naast uw SWF-bestand. U kunt desgewenst kiezen om dit bestand samen met uw SWF-bestand naar uw webserver te uploaden. Dit zorgt voor het zeldzame geval dat de servers van Adobe om de een of andere reden niet beschikbaar zijn. Als u het bestand opent waar u deze oefening hebt opgeslagen, ziet u zowel het SWF-bestand als het SWZ-bestand (zoals weergegeven in afbeelding 6-25)..

Het .swz-bestand bevat het Text Layout Framework.


The Giveaway!

We hebben deze weggeefactie een beetje anders omdat Adam van Aetuts + Wildfire op mijn manier heeft geduwd ... Wildfire is een briljante promotiestudent en maakt het invoeren van wedstrijden een fluitje van een cent! Als je een kans wilt maken om een ​​van de drie gesigneerde exemplaren van "Foundation Flash CS5 for Designers" te winnen, voer dan gewoon!

Hoe kom ik binnen?

  1. Stuur een tweet vanaf de startpagina. Voor elke Twitter-volgeling die via uw link binnenkomt, krijgt u een extra vermelding.
  2. Vul uw gegevens in zodra u dit hebt gedaan. Dat is het!

De drie winnaars worden op maandag 6 september bekend gemaakt. Succes!