Go Round the Bend med tekst på en bane i Flash
Del
Del
Del
Share < .no> Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Flash tekstformatering er virkelig flott, men de eneste transformasjoner vi kan utføre er vanlig MovieClip eksempler. Hvis din designer ber deg om å plassere godt formatert tekst på en sirkulær bane, er det ingen innebygd transformasjon verktøy for å få jobben gjort ...
Vi vil se hvordan å eksplodere Textfield og plassere alle tegnene sammen slik kurve, bevare tekstformatering og tegnavstand. Til slutt vil vi ta en titt på hvordan å tegne tekst langs en spiral
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot.
Endre teksten i tekstfeltet og leke rundt med parametrene ..
Tenk deg dette oppdiktet scenario: Mandag morgen, du drikker kaffe, og deretter din grafisk designer kommer og vekker ber deg "Hei, Jeg designe spillet lasting animasjon, og jeg vil gjerne ha den innlastingen teksten passer denne sirkelen;? Jeg antar du har noe jeg kan kopiere og lime inn for å gjøre jobben"
Og faktum er at du ikke allerede har noe å enkelt legge ut tekst på denne måten. Så du kommer hit og lese denne artikkelen. Vi vil gå skritt for skritt for å bygge det du er ute etter, og starter med den grunnleggende matematikk kunnskap til å plassere et punkt langs en sirkel, finne noe sted å sette den, i henhold til sin opprinnelige posisjon i en container, hvordan bevare tegnformatering og avstand (ellers designeren ville aldri godta oppløsning) og deretter samle alle disse delene til en generisk klasse som vil gjøre det enkelt å sette opp og forvandle enhver dynamisk tekst for å bruke dette rundskrivet layout.
font brukt i demoen er gratis elegan Tech skriften du kan laste ned og fritt bruke fra dafont.com
De første trinnene vil vise i detalj hvordan du oppretter testen Flash movie. Hvis du allerede er kjent med bruken av Flash-komponenter og deres event håndtering, kan det være lurt å hoppe direkte til trinn 10, hvor det virkelige arbeidet begynner, når utgangspunktene er satt.
Trinn 1: Demo Interface Demo Flash File
Start med å lage en ny CircularTextTest.fla fil med Flash Professional, åpne deretter Components vinduet og dra en skyveknapp, en etikett og en boksen for å din Flash biblioteket.
I Flash-fil, lage en stor tekstfeltet, og deretter sette det som en innspill Dra og slipp av i boksen fra biblioteket til scenen, og deretter kopiere og lime den 3 ganger. Hver avkrysnings vil bli brukt til å sette en demo parameter: vis /skjul ankere, slå tekst utvendig /innvendig, trim (eller ikke) den tomme plassen. Etiketten og valgte verdier er opp til deg, for å sette startverdiene av demoen. Det viktigste er å sette eksempel navnene på de avmerkingsboksene for å kunne bruke dem. Den første vil være chkShowAnchors, den andre en chkTxtOutside og den tredje chkTrimWhite. Til slutt vil vi trenge en glidebryter for å sette verdien av sirkelen radius, og en annen til å justere karakteren forskjøvet fra ankrene vi vil plass. Hver slider vil komme med en etikett der vi vil vise den faktiske verdien. Så du kan dra og slippe en etikett og en skyveknapp fra biblioteket til scenen, og deretter sette sitt navn og parametre som på dette skjermbildet. Bortsett fra forekomstnavn som er obligatorisk, de viktige parametrene er slideren verdi, som vi vil bli brukt som den opprinnelige standard verdi, minimums- og maksimumsverdier. Den liveDragging parameter vil gjøre slider send en hendelse mens den blir dratt, slik at vi vil oppdatere sirkelen i sanntid når brukeren flytter glidebryteren. Hvis liveDragging ikke er merket, vil oppdateringen bare skje når brukeren slipper glidebryteren. Nå kan du lage den andre glideren og tilhørende label, henholdsvis heter sliderCharOffset og labelOffset. For demoen har jeg brukt standardverdien 7, min og max verdier fra -50 til 50, men dette er opp til deg, kan du sette den til å passe dine behov. Endelig Flash-filen er nå fullført. Hvis du er i tvil kan du sjekke filen fra de nedlastbare kilder I dette trinnet vi skape klassen, knytte den med Flash fil og skrive ned sin grunnleggende innhold. en addedToStage handler funksjon og grunn createCircularText rutine som vi vil kalle å forvandle teksten La oss lage CircularTextTest.as Class filen sammen din Flash-fil. Den aller første skritt vil være å importere klassene vi trenger, for å erklære eiendelene vi har satt på scenen og å forberede rutinen vi vil ringe for å gjøre jobben. Dette er den grunnleggende struktur, nå vil vi ha for å fylle ut feltene for å sørge for at vi bruke verdiene fra tekstfeltet, boksene, og glidere. Vi må sørge for at vi vet når innholdet i tekstfeltet er endret, så vi vil fullføre initSwf initialisering behandleren å legge hendelsen lyttere til endring og textInput hendelser. Disse hendelsene vil kalle sin egen tilbakering, noe som igjen vil kalle createCircularText () rutine. Dette ekstra trinnet er der for hvis du ønsker å utføre noen validering ting avhengig av hendelsen type; å gi et eksempel, kan det være lurt å legge litt kode for å sørge for at teksten er gyldig, eller å utføre noen spesielle ting når teksten er tom, før du ringer createCircularText () -metoden. Den boksen er allerede satt opp og klar i Flash, så vi trenger bare å lytte etter oppdateringer til chkTxtOutside sjekkheftet. Akkurat som for inntastingsfeltet, oppdaterer vi vår initialisering rutine for å legge til en hendelse lytteren for endringen hendelsen fra sjekkheftet. Denne gangen vil vi bruke bare én generisk onCheckBoxChange hendelsen tilbakeringing for alle aktuelle alternativer, som vi vil skape akkurat nå Hvis du leser kommentarene du kanskje merke jeg har igjen kommen en veldig lat implementering som du kan finne nyttig når du oppretter en rask og dirty test: legge et klikk hendelse lytteren på scenen for å kalle oppdateringen vil generere flere oppdateringer enn virkelig trengs, men når målet ditt er bare å sørge for at oppdateringen rutine er kalt til å teste koden din, kan dette være en tidsbesparende . Jeg antar at du har forstått hvordan det fungerer, så de neste trinnene vil høres veldig kjent: vi vil fortsette å legge hendelsen lyttere til endre /oppdatere hendelser av komponentene brukeren vil samhandle med Lytte for oppdateringen av glideren vil fungere som sjekkboksene, men vi vil også oppdatere Label Innhold å vise verdien til brukeren, til å redigere teksten på etiketten viser slideren verdi Selvfølgelig er dette nesten den samme historien som radius, men med en annen etikett og en annen slider Akkurat nå har vi gjort alt arbeidet for å sikre at createCircularText rutine kalles hver gang noe har endret seg, for å skape tekst sirkel. Nå er det på tide å lage teksten sirkelen i denne rutinen. For å forandre teksten, vil vi kalle CircularText.generateText (templateTextField, targetHostClip, opsjoner), med alle alternativene blir lagret i en CircularTextOptions eksempel. Den indre arbeider av disse klassene vil være spørsmål om de neste trinnene, akkurat nå har vi å lese verdier fra våre komponenter og sende dem til disse objektene som vil gjøre jobben for oss. Disse klassene vil bli lagret i utils.clips pakke, så vi må sørge for at vi legger dette innholdet i import uttalelser Vi trenger en klipp der du vil plassere sirkelen av individuelle karakter movieclips.; Dette vil bli kalt animHost. For å fullføre demoen, la oss gjøre sirkelen sving! For å gjøre dette trenger vi bare å lage en Timer objekt, gjør det tick 25 ganger i sekundet, og kaller en oppdatering handler hver gang den gjør det. Oppdateringsfunksjonen bare intervaller sirkelen mange MovieClip rotasjon eiendom med et lite beløp. Det er det - du har gjort det slår Vi vil nå konvertere en lineær stilling til en vinkel. Vi vil vite den lineære x plasseringen av teksten, og vi trenger å transformere dette til en stilling på en sirkel. For å konvertere et punkt på et segment til et punkt på en sirkel, trenger vi et par ting: For å gjøre ting enkelt. Når x blir 0, vil alpha også være 0. På den andre siden når x lik xMax, deretter alpha = 360 ° (eller i radianer: 2 * PI) For alle de mellomstillinger, alpha = 2 * PI * x /xMax product: (i radianer).. Vi trenger denne verdien både i radianer - fordi tak i Math.sin () og Math.cos () ber om det - og i grader - fordi vi er nødt til å slå vår MovieClip å gjøre karakteren 'look' i sentrum, og MovieClip rotasjoner i grader. Men vi vil komme tilbake til dette i neste del. Hvis vi velger å legge en offset (eller en fase, på det er ofte kalt for vinkelverdier), så er det bare et enkelt tillegg til å gjøre. Til slutt, for å få posisjonen til tegnet på sirkelen fra sitt sentrum, er det helt grunnleggende trigonometri: La oss se på en vanlig fallgruve i å få tegnet posisjoner. Den mest åpenbare verdier som kommer til tankene for xMax er å bruke antall tegn i teksten, og for x, for å bruke gjeldende tegn posisjon. Men dette er virkelig over-forenklet og vil føre oss til uestetisk resultater. Hvis du bruker en monospace font, vil det være greit. Men hvis du bruker en mer vanlig skrift, så forskyvningen mellom to påfølgende verdier av x vil alltid være den samme, enten tegnet er en liten en som en prikk eller en bred en som w. Dette betyr at enten noen bokstaver vil bli klemt sammen eller noen bokstaver vil bli spredt svært langt fra hverandre. Hvis vår kilde Textfield har kompleks tekstformatering, blande ulike fonter og skriftstørrelser, blir det tydelig at det tiende tegnet ut 20 vil nesten aldri være i sentrum av Textfield Vi kommer til å bruke tegngrensene for å ta vare på tegnavstand og tekstformatering Action gir oss de sourceTf.getBounds (sourceTf.parent).; metode for å få de nøyaktige dimensjonene på Textfield (denne metoden er tilgjengelig for alle Displayobject). Den getBounds metoden krever et mål å koordinere plass. Den mest vanlige bruken av vår transformasjon vil være å lage sirkelen på samme nivå som mal Textfield, så vi vil bruke malen Textfield ordnede koordinere plass til å ta seg av eventuelle høyere nivå transformasjoner. Bruke tegnposisjon i kildestreng er for begrenset, så vi vil ikke bruke et slikt grunnleggende tiltak. Vi vil kalle sourceTextField.getCharBoundaries (nthCharacter) for å få den posisjonen og størrelsen på alle tegn. Dette vil returnere et rektangel, slik at vi vet bredden av tegnet, og den nøyaktige posisjon. Vi ønsker kanskje å trimme den ekstra hvite området før og etter den virkelige teksten, slik at du kan bruke et bredt dynamisk Textfield, men bare beregne virkelig brukt tekst bredde til å plassere tegnene på sirkelen uten ekstra hvit rom. For å gjøre dette, vil vi ha for å få den faktiske posisjonen til den første og siste tegn. Det er en påminnelse: Hvis du prøver å få grensene for en kontroll karakter, som linjeskift, vil den returnere null. Derfor vil vi sløyfe de nyeste tegn for å finne den siste som har grenser: Etter denne koden blokken vil templateBounds variable har ønsket bredde (som vi vil se senere, er option.trimWhite en boolsk, angi om vi ignorerer den ekstra hvite området av Textfield ). Vi har nå en riktig xMax verdi, og jeg antar at du har forstått at vi vil bruke den samme getCharBoundaries metode for å få nøyaktig x posisjonen til hver karakter i kildeTextField, noe som gir oss x-verdiene å bruke i våre formler ovenfor Før du går videre i koding, vil vi formal alternativene vil vi håndtere, og sette dem alle i en parameter klasse. Vi vil bruke denne "alternativer container" i de neste trinnene for enkelt å dekke forskjellige varianter av sirkel transformasjon. Dette alternativet klasse kan være en enkel generisk Object, men ved hjelp av forhåndsdefinerte konstanter og verdier som gjør bruken av CircularText klasse enklere, gjør sterk typing - derfor gjør det lettere å finne feil ved kompilering - og gjør oss i stand til å sette standardverdier. Vi har allerede gått gjennom regnestykket til å konvertere en posisjon på x-aksen til en posisjon på sirkelen. Nå vil vi skape nye movieclips for hver karakter og plassere enhver etter sin x posisjon, og sette tekstformatering å matche kildeformatet og reprodusere samme utseende. Vi trenger noen lokale variabler til å lagre de mellomliggende verdier: Så vi starter looping gjennom alle kilde tegn Ettersom dette tekstutdraget forteller deg, enkelte tegn ikke har grenser, så vi må ta vare på dem. Vi trenger ikke å vise usynlige tegn. Før du konverterer den opprinnelige x til sin vinkelposisjon, må vi ta vare på karakteren orientering: hvis karakter vil se "innsiden" sirkelen, så vinkelen vokse med x-verdien. Hvis vi bestemmer oss for å gjøre figurene ser til "utenfor" av sirkelen, så det vil bli lest som med et speil, og vi trenger å snu vinkelen vekst, ellers ville det ikke egentlig være lesbar. Hvis teksten er ute "innsiden", vil vi arrangere tegnene klokken. Hvis teksten er vendt "utenfor", må vi slå mot klokken mens plassere tegnene Hvis dette er fortsatt ikke klart, bare endre minus i options.phase -. (CharBounds.right - 0.5 * charBounds.width) * 360 /templateBounds.width til et pluss og publisere den for å se umiddelbart hvordan det ville sett ut hvis du ikke tar vare på karakteren orientering. Endelig konverterer vi de grader til radianer, som sin () og cos () trenger vinkler i radianer for sine argumenter. Nå kan vi lage beholderen for karakteren og plassere det i vår vert, å ta vare på den vinkelen vi nettopp har beregnet: Husk at characterOrientation verdien vil være ett av disse numrene, så options.characterOrientation brukt her vil slå karakter, noe som gjør det møte ønsket retning uten tilleggsberegninger: Nå som vi har opprettet en MovieClip vert for denne karakteren, plasserte den langs sirkelen og vri den i riktig retning, bør vi sette noe i det, som en Textfield med karakter, ellers ingenting ville være synlig;-) Dette er ganske grunnleggende: opprette en ny Textfield, og sette alle sine attributter. Det viktigste er å bruke embedFonts, slik at teksten vil fremdeles være synlig etter å ha blitt rotert Vi har en Textfield med teksten i det, nå er vi må formatere denne teksten å ser ut som den originale. Vi vil bruke en prøve /fangst til deformere setTextFormat fordi hvis noe går galt i tekstformatering, på grunn av manglende skrifttyper, vil feilen dukker opp her, og dette vil hjelpe deg å feilsøke skriftproblemer. Til slutt vi har å sentrere Textfield inn i målet MovieClip vi opprettet i forrige trinn, for å sørge for at de ser justert på sirkelen. Den radiusOffset parameter vi bruker her fullføre sirkelen radius: når finjustere utseendet på sirkulær tekst, har både sirkelen radius - som satt der karakter beholderne er - og en forskyvning gjøre det enklere å stille inn tegnavstand ønsket. Det kan være helt gjort uten denne offset, men gjør livet lettere for noen designer som arbeider med våre snutter Anmeldelser newTf.x = -. (CharBounds.width) /2;newTf.y = - (charBounds.height) + alternativer. radiusOffset; Det er det, er vi ferdige. Vi har gått gjennom alle trinnene, og nå har en fullt fungerende rutine Og her kommer komplett CircularText klassen vi har bygget hele trinnene i denne opplæringen: Vi har sett alle deler, og sette dem sammen i et verktøy klasse. . Nå har vi bare å kalle denne metoden for å generere en sirkulær visning av Textfield Betyr denne koden ser ut som noe du allerede har sett? Vel det skal, fordi dette utvalget bruken er veldig nær createCircularText metoden vi bygget på begynnelsen. Nå kan du se at nesten alt er på plass Nå som all koden er fullført, kan du kompilere demoen vi har bygget i de første trinnene (eller åpne det fra de nedlastbare kilder). For de som hoppet over første delen, er koden i demoen helt grunnleggende: enkle lyttere til å oppdatere den sirkulære tekst når noe er endret. Takk for lesing!
Textfield og gi den navnet: tfTemplate. For denne demoen har vi valgt å bruke EleganTech font, så setter Textfield font verdi til dette, og deretter importere skriften og sørge for at de nødvendige tegnene varierer importeres.
du kan angi dokument klassen være CircularTextTest, som vil være vert for all demo kode. Klassen er ennå ikke skapt, dette er neste steg, akkurat nå er det bare å sette klassenavnet i Flash-filen, som forklart i Slik bruker du et dokument klasse i Flash Quick Tips.
Trinn 2:. Demo Interface Demo Class
pakke {import fl.controls.CheckBox; import fl.controls.Label; import fl.controls.Slider; import fl.events.SliderEvent; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.events.TextEvent; public class CircularTextTest strekker MovieClip {/* ----- Eiendeler definert i Flash tidsplan for demo ----- * //** The redigerbare Textfield * /public Var tfTemplate: Textfield; /** Checkbox: showet karakter forankrer * /public Var chkShowAnchors: avmerkingsbokser; /** Checkbox: tekstretning * /public Var chkTxtOutside: avmerkingsbokser; /** Checkbox: trimWhite /condenseWhiteSpace * /public Var chkTrimWhite: avmerkingsbokser; /** Slider: verdien av sirkelen radius * /public Var sliderRadius: Slider; /** Etiketten for å vise gjeldende radius verdien * /public Var labelRadius: Etikett; /** Slider: forskyvningen av figurene fra sirkelen * /public Var sliderCharOffset: Slider; /** Etiketten for å vise gjeldende offset verdien * /public Var labelOffset: Etikett; offentlig funksjon CircularTextTest () {stop (); addEventListener (Event.ADDED_TO_STAGE, onAddedToStage); } Beskyttet funksjon onAddedToStage (evt: Hendelses): void {createCircularText (); } Beskyttet funksjon createCircularText (): void {//Her vil kommer alle de interessante kode}}}
Trinn 3: Demo Interface Input Textfield
beskyttet funksjon onAddedToStage (evt: Hendelses): void {tfTemplate.addEventListener (TextEvent.TEXT_INPUT, onTextInputHandler, falsk, 0, true); tfTemplate.addEventListener (Event.CHANGE, onTextChangeHandler, falsk, 0, true); createCircularText ();} beskyttet funksjon onTextInputHandler (evt: TextEvent): void {createCircularText ();} beskyttet funksjon onTextChangeHandler (evt: Hendelses): void {createCircularText ();}
Trinn 4: Demo Interface Tekstretning avkrysningsruten
beskyttet funksjon onAddedToStage (evt: Hendelses):. Void {//... //Forrige code fortsatt her //... chkTxtOutside.addEventListener (Event.CHANGE, onCheckBoxChange, falsk, 0, true); //stage.addEventListener(MouseEvent.CLICK, onCheckBoxChange); //Lazy-mann lytteren å oppdatere sirkelen etter hvert klikk på en komponent. createCircularText ();} beskyttet funksjon onCheckBoxChange (hendelse: Hendelse): void {createCircularText ();}
Trinn 5: Demo Interface Show Anchors Markerings
beskyttet funksjon onAddedToStage (evt: Hendelses):. void {//... //Forrige code fortsatt her //... chkShowAnchors.addEventListener (Event.CHANGE , onCheckBoxChange, falsk, 0, true); createCircularText ();}
Trinn 6: Demo Interface Radius Slider
beskyttet funksjon onAddedToStage (evt: Hendelses):. void {//... //Forrige code fortsatt her //... sliderRadius.addEventListener (SliderEvent.CHANGE , onRadiusChange, falsk, 0, true); createCircularText ();} beskyttet funksjon onRadiusChange (evt: SliderEvent): void {labelRadius.text = "Radius:" + sliderRadius.value; createCircularText ();}
Trinn 7:. Demo Interface Tekst Offset Slider
beskyttet funksjon onAddedToStage (evt: Hendelses): void {//... //Forrige code fortsatt her //... sliderCharOffset.addEventListener (SliderEvent.CHANGE, onCharOffsetChange, falsk, 0, true); createCircularText ();} beskyttet funksjon onCharOffsetChange (evt: SliderEvent): void {labelOffset.text = "Character forskjøvet fra sirkelen:" + sliderCharOffset.value; createCircularText ();}
Trinn 8: Demo Interface generere Circle
pakken {//.... //Forrige import her fortsatt import utils.clips. *; //for klassene vi vil senere lage public class CircularTextTest strekker MovieClip {/** Den MovieClip som vil "vert" alle de opprettede karakter klipp * /public Var animHost: MovieClip; beskyttet funksjon createCircularText (): void {//For hensikten med demonstrasjonen skaper vi en MovieClip i sentrum av scenen if (animHost == null) {animHost = new MovieClip (); animHost.x = 275; animHost.y = 200; addChild (animHost); } Else {//Vi sørger for at de tidligere karakter klippene er fjernet for (var i: int = animHost.numChildren; i > 0; I--) {animHost.removeChildAt (0); }} Var alternativer: CircularTextOptions = nye CircularTextOptions (); if (chkTxtOutside.selected) {options.characterOrientation = CircularTextOptions.CHARACTER_ORIENTATION_OUTSIDE; } Else {options.characterOrientation = CircularTextOptions.CHARACTER_ORIENTATION_INSIDE; } Options.radius = sliderRadius.value; options.radiusOffset = sliderCharOffset.value; options.trimWhite = chkTrimWhite.selected; options.showAnchors = chkShowAnchors.selected; CircularText.generateText (tfTemplate, animHost, opsjoner); }
Trinn 9: Demo Interface Turning Circle
pakken {//.... //Forrige import her fortsatt import flash.events.TimerEvent;. import flash.utils.Timer; public class CircularTextTest strekker MovieClip {/** En Timer objekt å kalle en oppdatering tilbakeringing og spinne sirkelen * /beskyttet Var rotationTimer: Timer; beskyttet funksjon createCircularText (): void {//... //Forrige code fortsatt her //Vi lager en tidtaker for å slå MovieClip if (rotationTimer == null) {rotationTimer = new Timer (1/25, 0); rotationTimer.addEventListener (TimerEvent.TIMER, onTimer, falsk, 0, true); rotationTimer.start (); }} Beskyttet funksjon onTimer (event: Timerevent): void {animHost.rotation + = 0,1; }
Trinn 10: Hoved Kode Linear posisjon for å Angle
Den segmentstørrelse, som vil være malen Textfield bredde. La oss kalle dette xMax
.
alpha
vinkel å plotte punkt på sirkelen. Denne vinkelen vil bli beregnet fra X og segmentstørrelsen. Vi vil vurdere å legge en fase
, som er en forskyvning
clip.x = radius * Math.cos (angleInRadians); clip.y = radius * Math .sin (angleInRadians);
Trinn 11: Hoved Kode vanlig fallgruve
Trinn 12:. Hoved Kode Mellomrom og formatering
Var i: int; Var charCnt: int = sourceTf.length; Var charBounds: rektangel; //Standard 'kilde' grensene er de whold textfields boundsvar templateBounds: Rektangel = sourceTf.getBounds (sourceTf.parent); //Hvis vi trimme "ekstra" hvit, så grensene for den siste synlige characterif (options.trimWhite) {charBounds = sourceTf.getCharBoundaries (0); templateBounds.left = charBounds.left; charBounds = null; i = 1; gjøre {charBounds = sourceTf.getCharBoundaries (sourceTf.length-i); i ++; } Stund (charBounds == null); templateBounds.right = charBounds.right;}
Trinn 13:. Hoved Kode Formatering våre Parametere
pakke utils.clips {public class CircularTextOptions {statisk offentlig konst CHARACTER_ORIENTATION_INSIDE: Number = 90; statisk offentlig konst CHARACTER_ORIENTATION_OUTSIDE: Number = -90; /** Radius i sirkelen * /public Var radius: Nummer = 100; /** Vinkelavvik å gjelde (for å gjøre teksten spinne rundt sirkelen * /public Var fase: Antall = 0; /** Character orientering, kan være * CircularTextOptions.CHARACTER_ORIENTATION_INSIDE eller * CircularTextOptions.CHARACTER_ORIENTATION_OUTSIDE * /public Var characterOrientation: Antall = CHARACTER_ORIENTATION_INSIDE; /** Nyttig for debugging, dette alternativet gjør at visning av * karakter ankerpunktene (kan bidra til å finjustere offests, ...) * /public Var showAnchors: Boolean = false; /** Offset i pixel fra sirkelen til karakteren Ved å sette både * radius og dette offset, kan du kontrollere avstanden tegnet * /public Var radiusOffset:.. Antall = 0; /** Dette alternativet angir om sirkelen er basert på med av . kilde * Textfield eller bredden av innholdet ('white space "tegn * er fortsatt beregnet, dette er ikke en condenseWhite lignende opsjon) * /public Var trimWhite: Boolean = true; offentlig funksjon CircularTextOptions () {}}} < hr>
Trinn 14: Hoved Kode karakter plassering
Var grader: Antall; Var radianer: nummer, Div charContainer: MovieClip; Var radius: Number = options.radius;
for (i = 0; i < charCnt; i ++) {charBounds = sourceTf.getCharBoundaries (i); if (charBounds! = null) //spesialtegn, som linjeskift, ikke har grenser, derfor denne testen {//...}}
Trinn 15: Hoved Kode Character Orientering
//Beregn vinkelforskyvningen av røye basert på sin metricsif (options.characterOrientation == CircularTextOptions.CHARACTER_ORIENTATION_INSIDE ) {grader = options.phase + (charBounds.left + 0,5 * charBounds.width) * 360 /templateBounds.width;} else {grader = options.phase - (charBounds.right - 0.5 * charBounds.width) * 360 /templateBounds .width;} radianer = grader * (Math.PI /180);
charContainer = ny MovieClip (); if (options.characterOrientation == CircularTextOptions.CHARACTER_ORIENTATION_INSIDE) {charContainer.rotation = Math.round (grader) + options.characterOrientation; charContainer.x = radius * Math.cos (radianer); charContainer.y = radius * tak i Math.sin (radianer);} else {charContainer.rotation = Math.round (grader) + options.characterOrientation; charContainer.x = radius * Math.cos (radianer); charContainer.y = radius * tak i Math.sin (radianer);} host.addChild (charContainer);
offentlig klasse CircularTextOptions {statisk offentlig konst CHARACTER_ORIENTATION_INSIDE: Number = 90; statisk offentlig konst CHARACTER_ORIENTATION_OUTSIDE: Number = -90;
Trinn 16: Hoved Kode Formatering
//Set Tekst og TextFormatnewTf = new Textfield ();. NewTf.type = TextFieldType.DYNAMIC; newTf.selectable = false; newTf.embedFonts = true; newTf.autoSize = TextFieldAutoSize.CENTER; newTf.antiAliasType = AntiAliasType.NORMAL; newTf.text = sourceTf.text.charAt (i);
CharTf = sourceTf. getTextFormat (i); try {newTf.setTextFormat (charTf);} catch (e: Feil) {trace ("tekstformat error '); //sted et stoppunkt her for å se etter potensielle skriftproblemer ...}
Trinn 17:. Hoved Kode klasse så langt
pakken utils.clips {import fl.text.TLFTextField; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFieldType; import flash.text.TextFormat; import flash.text.AntiAliasType; import flash.text.Font; /** * Bruk CircularText.generateText (templateTextfield, targetMovieClip, * opsjoner) for å skape et godt linjeavstand karakter distribusjon rundt en sirkel * i målet MovieClip. * /Public class CircularText {offentlig funksjon CircularText () {} /** *param sourceTf tekstfeltet wich er brukt som kilde og mal. * Typisk en dynamix Textfield, invivisible, der * teksten og tekstformat er satt av resten av * program. *param Vert Målet MovieClip der teksten sirkelen vil * bli opprettet. *param Alternativene A CircularTextOptions objekt med formateringsvalg * for å gjøre teksten sirkel ser ut som vi vil. * /Statisk offentlig funksjon generateText (sourceTf: Textfield, host: MovieClip, alternativer: CircularTextOptions = null): void {if (valg == null) alternativer = nye CircularTextOptions (); //Vi eksplodere den opprinnelige tekstfeltet i mindre klipp, hver og en som inneholder en karakter Var newTf: Textfield; Var charTf: tekstformat; Var i: int; Var charCnt: int = sourceTf.length; Var charBounds: Rektangel; //Standard 'kilde' grensene er de whold textfields grensene Var templateBounds: Rektangel = sourceTf.getBounds (sourceTf.parent); //Hvis vi trimme "ekstra" hvit, så grensene for den siste synlige tegn if (options.trimWhite) {charBounds = sourceTf.getCharBoundaries (0); templateBounds.left = charBounds.left; charBounds = null; i = 1; gjøre {charBounds = sourceTf.getCharBoundaries (sourceTf.length-i); i ++; } Stund (charBounds == null); //Ta vare på null-boundareis karakter som linjeskift templateBounds.right = charBounds.right; } Var grader: Number; Var radianer: Number; Var charContainer: MovieClip; Var radius: Number = options.radius; for (i = 0; i < charCnt; i ++) {charBounds = sourceTf.getCharBoundaries (i); if (charBounds! = null) //spesialtegn, som linjeskift, ikke har grenser, derfor denne testen {//Beregn vinkelforskyvningen av røye basert på sine beregninger if (options.characterOrientation == CircularTextOptions.CHARACTER_ORIENTATION_INSIDE) { grader = options.phase + (charBounds.left + 0,5 * charBounds.width) * 360 /templateBounds.width; } else {grader = options.phase - (charBounds.right - 0,5 * charBounds.width) * 360 /templateBounds.width; } Radianer = grader * (Math.PI /180); //Opprett en ny tekstfeltet til å gjengi dette tegnet newTf = new Textfield (); charTf = sourceTf.getTextFormat (i); //Set Tekst og tekstformat newTf.type = TextFieldType.DYNAMIC; newTf.selectable = false; newTf.embedFonts = true; newTf.autoSize = TextFieldAutoSize.CENTER; newTf.antiAliasType = AntiAliasType.NORMAL; newTf.text = sourceTf.text.charAt (i); try {newTf.setTextFormat (charTf); } Catch (e: Feil) {trace ("tekstformat error '); //sted et stoppunkt her for å se etter potensielle skriftproblemer ...} newTf.x = - (charBounds.width) /2; newTf.y = - (charBounds.height) + options.radiusOffset; charContainer = new MovieClip (); if (options.showAnchors) {//her kommer det grafiske aspektet av ankrene, hvis du vil ha noe annet charContainer.graphics.beginFill (0xff00ff, 1); charContainer.graphics.drawRect (0,0,5,5); charContainer.graphics.endFill (); } CharContainer.addChild (newTf); if (options.characterOrientation == CircularTextOptions.CHARACTER_ORIENTATION_INSIDE) {charContainer.rotation = Math.round (grader) + options.characterOrientation; charContainer.x = radius * Math.cos (radianer); charContainer.y = radius * tak i Math.sin (radianer); } Else {charContainer.rotation = Math.round (grader) + options.characterOrientation; charContainer.x = radius * Math.cos (radianer); charContainer.y = radius * tak i Math.sin (radianer); } Host.addChild (charContainer); }}}}}
Trinn 18: Hoved Kode Påfør Transformation
//tfTemplate er Textfield inneholder kildeteksten for å forvandle //animHost er en MovieClip hvor vi vil skape circlevar alternativer: CircularTextOptions = new CircularTextOptions (); options.characterOrientation = CircularTextOptions.CHARACTER_ORIENTATION_INSIDE; options.radius = 50; options.radiusOffset = 0; options.trimWhite = true; options.showAnchors = false; CircularText.generateText (tfTemplate, animHost, opsjoner);
Trinn 19:. Hoved Kode A Simple Demo