Create nye funksjoner for Flash med JSFL
2
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne introduksjonen til Javascript for Flash plakater (JSFL) skriptspråk, vil du lære hvordan du kan automatisere repetitive oppgaver og legge til nye kommandoer til Flash authoring miljøet . Vi vil begynne med å utforske JSFL generelt, se hva den kan gjøre, for så å bygge opp til et nyttig program for det: en kommando som kan slå inn tekst i en knapp (med sin hit området satt riktig) i et enkelt klikk Åpne Flash og klikk fil > Nye JSFL er et rent tekstformat, slik at du kan åpne JSFL filer i en tekst editor Vi trenger en blank FLA å teste våre scripts, så lage en av disse, også. Du trenger ikke engang å redde det; det er bare for testing I ditt JSFL filen, lim inn følgende kode:. Selv om du aldri har brukt Javascript før, er syntaksen like nok til Action at du kan gjette hva den gjør: Hvis du redigerer JSFL i Flash, kjøre skriptet ved å klikke den store trekantede Play-knappen på verktøylinjen. Ellers dobbeltklikker JSFL fil på datamaskinen, og det vil automatisk kjøre i Flash. Du bør se en sirkel vises, ved hjelp av hva fargene du hadde valgt. Flott! Nå når du trenger å tegne en 50 piksler sirkel sentrert på (125, 125), du trenger ikke engang å trekke det dette er en slags kjedelig resultat, skjønt. La oss gjøre ting mer komplisert: Jepp - Java har for-løkker Sjekk ut resultatet: Allerede er det klart at dette kan være svært nyttig for å ta vare på repetitive, presise oppgaver . For eksempel ville det være lett å endre denne koden for å lage et rutenett av sirkler ... og derfra er det et lite skritt for å skape et rutenett av knapper. Ingen flere kopiere, lime inn, og forsiktig nudging symboler rundt scenen for å stille dem opp ordentlig Det er alltid godt å ha en trace () Resultatet: å måtte holde JSFL åpen eller bla til den når du vil bruke det ville være en reell smerte. I stedet kan du legge den til kommandoer menyen, så det er bare et par klikk unna. (Og når den er der, du kan selv tildele det en tastatursnarvei.) Alt du trenger å gjøre er å flytte example.jsfl filen til \\ Command \\ mappe Flash-tallet. Plasseringen av denne mappen avhenger av OS, men: brukernavn Når du har lagret i denne mappen, vil den vises i Kommandoer-menyen ved å bruke navnet av JSFL filen: Bare klikk for å kjøre den. Du kan nå redigere JSFL fil inne Kommandoer mappe, for å få fart på sakene JSFL kan gjøre mer enn å kjøre lister over kommandoer. Det kan også få informasjon om FLA og elementene i det, og ta avgjørelser basert på at info For eksempel kan vi skrive et skript for å spore hvor mange elementer er valgt for øyeblikket. utvalg Denne enkle skript gir et innblikk i hvordan Flash fungerer. Prøve å tegne noen sirkler, velge dem alle, og kjører skriptet . Det vil returnere "1". Lag noen tekstfelt, velg dem alle, og kjør skriptet, og det vil returnere et tall som tilsvarer antall tekstfelt Vi kan få informasjon om objektene inne som valg, også: jeg har to tekstfelt og en haug med sirkler valgt, og dette skriptet utganger: for en fullstendig liste over objekter og funksjoner, utforske . Utvide Flash bok i Adobe LiveDocs Her er et enkelt skript som saft alle de utvalgte figurene på scenen - men ingenting annet: Før: ... og etter: Du har fått grunnleggende. Nå er det tid for kjøtt av denne opplæringen. Vi kommer til å lage et skript som tar et tekstfelt og gjør den til en knapp. Jeg vil gå gjennom trinnene dette skriptet vil gjenskape; starte en ny FLA og sette et tekstfelt i midten, så følg med: det er ganske enkelt, når du ser det oppført sånn. Men hvordan gjør vi alt dette i JSFL? Hva er skriptet Vi kunne se alt opp i LiveDocs, men det er en mye enklere måte ... Klikk på Vindu > Andre Paneler > Historie De er alle trinnene vi trenger. Hvis bare de var i JSFL ... Å, rett, de er i JSFL. Klikk på denne lille knappen: ... klikk View > Javascript Panel Resultat:. Det er ikke akkurat det vi trenger, men det gir oss noen indikasjon på hvor du skal lete i LiveDocs Klikk på den øverste historien elementet du trenger og shift-klikk bunnen for å velge alle trinnene i mellom. Du kan Ctrl-klikk (CMD-klikk på Mac) individuelle elementer for å oppheve dem fra denne listen (jeg har fjernet noen unødvendige museklikk fra mine). Deretter klikker du den lille menyknappen og velg Kopier Steps Lagre dette som Buttonize.jsfl (Alternativt kan du klikke på Lagre-knappen for å opprette en JSFL fil i Kommandoer katalogen , i hvilket tilfelle skriptet vil ha kommentarer for å forklare hvert trinn) La oss teste skriptet som det er akkurat nå, slik at vi kan få en god ide om hva vi trenger å forbedre. Starte en annen tomt FLA, oppretter et tekstfelt (legg den i en annen posisjon, med en annen tekst), klikk på den, og kjøre JSFL. Fungerte det? Min var ikke en suksess: Vi ser at vi må flytte boksen slik at dens størrelse og posisjon likt det i tekstfeltet Heldigvis har vi allerede vet hvordan å få informasjon om et valgt element. Vi kan gjette hva dimensjons egenskapene til det valgte objektet vil bli kalt; la oss prøve å spore dem og se om vi har rett: Surprise, surprise, ja, det fungerer fint. Nå kan vi bruke denne informasjonen til å tegne rektangelet: Prøv det ut: ... Oh Hva har skjedd? Vel, når manuset kom inn redigeringsmodus, endret valg; vi er inne i Button symbol, slik at vi ikke har det valgt noe mer. Se opp for den slags feil når du arbeider med JSFL Dette er lett å fikse, men -. Vi må bare lagre forlot Fungerte det? Det gjorde for meg Hva skjer hvis vi kjører kommandoen uten å merke teksten? Vi får den samme feilen som før: Vi bør sjekke for å se om noen objekter er valgt før du gjør noe: Egentlig kan vi gjøre bedre enn det ... hva med å sjekke om nøyaktig ett tekstfelt Dette åpner opp alle slags andre alternativer. Hvis flere elementer er valgt, kan du sløyfe gjennom dem alle, og slå dem alle inn i knappene. Hvis et objekt er merket som ikke er et tekstfelt, kan du behandle det på en annen måte - kanskje det ikke ville trenge et rektangel for sin Hit form En fin detalj ville være å gi Button symbol samme navn som teksten den inneholder. Det ville holde biblioteket ryddig, også. Men det er ingenting i vår skriptet til å foreslå hvordan vi kan gjøre det. ikke En streng som spesifiserer navnet på den nye symbol, som må være unik. Du kan sende inn en tom streng for å ha denne metoden skape et unikt symbol navn for deg. Bingo! Selvfølgelig, vet vi ikke hva teksten sier ... Vi kunne ha en gjetning: Dessverre denne avkastningen udefinert For ikke å bekymre deg -. En rask skanning gjennom LiveDocs avslører denne siden på tekstobjektet. I det finner vi funksjonen vi leter etter: text.getTextString () Legg så til skriptet:.. Test det Fantastisk Buttonize er en hendig liten kommando til. har tilgjengelig hvis du trenger å spotte opp en UI raskt, men det var ikke poenget med opplæringen. Målet var å få fatt i JSFL, og se hvor det kunne brukes. Jeg håper at neste gang du står overfor en times arbeid for kjedelige Flash husarbeid, vil du finne ut hvordan du kan automatisere det med et skript på halve tiden :)
Innledning
Trinn 1:. Lag en JSFL File
. Velg Flash Javascript-fil
fra listen, og lagre det nye dokumentet som example.jsfl
, hvor som helst.
Trinn 2:. Lag en FLA
Trinn 3:. Skriv Noen Script
fl.getDocumentDOM () addNewOval ({venstre: 100, topp: 150, høyre: 150, bunn: 200});
fl er et objekt som representerer Flash programmet selv
getDocumentDOM () returnerer den åpne FLA
addNewOval () tegner en oval til FLA, med parametrene gitt
Trinn 4: Kjør script
Trinn 5:. Gjør Script Mer Codey
for (i = 0; i < 8; i ++) {fl.getDocumentDOM () addNewOval ({venstre:. (I * 50), øverst: (i * 50), rett :( i * 50) 50, bunn: (i * 50) 50});}
også. Denne gangen kjører JSFL ved å bytte til FLA klikke Kommandoer > . Run Command
, deretter finne skriptet fil på harddisken
Trinn 6:. Trace
kommandoen tilgjengelig når du tester noe nytt. I JSFL, har vi fl.trace ()
funksjon, som tar en enkelt streng (i motsetning til AS3 er trace ()
, noe som kan ta flere samtidig) og skriver det til Output panel. Prøv selv:
for (var i = 0; i < 8; i ++) {fl.getDocumentDOM () addNewOval ({venstre:. (I * 50), øverst: (i * 50), rett :( i * 50) 50, bunn: (i * 50) 50}); fl.trace ( "jeg er:" + i.toString ());}
i er: 0i er: 1i er: 2i er: 3i er: 4i er: 5i er: 6i er : 7
Trinn 7: Legg kommando til meny
Mac OS X: [harddisk] Twitter /Users / brukernavn Twitter /Bibliotek /Application Support /Adobe /Flash CS3 / språket Twitter /konfigurasjon /Commands
Windows XP: [boot-stasjon]
\\ Documents and Settings \\ brukernavn
\\ Local innstillinger \\ Programdata data~~POS=HEADCOMP \\ Adobe \\ Flash CS3 \\ språket
\\ Configuration \\ Kommandoer
Windows Vista: [boot-stasjon]
\\ Users \\ brukernavn
\\ Lokale innstillinger \\ Programdata data~~POS=HEADCOMP \\ Adobe \\ Flash CS3 \\ språket
\\ Configuration \\ Kommandoer
Windows Vista (alt): [boot-stasjon]
\\ Users \\ brukernavn
\\ AppData \\ Local \\ Adobe \\ Flash CS3 \\ språket
\\ Configuration \\ Kommandoer
Windows 7: [boot-stasjon]
\\ Users \\ brukernavn
\\ Lokale innstillinger \\ Programdata data~~POS=HEADCOMP \\ Adobe \\ Flash CS3 \\ språket
\\ Configuration \\ Kommandoer
Windows 7 (alt): [boot-stasjon]
\\ Users \\ brukernavn
\\ AppData \\ Local \\ Adobe \\ Flash CS3 \\ språket
\\ Configuration \\ Kommandoer
mappe vil samsvare med navnet du bruker til å logge på med, språk
vil endre seg avhengig av hva du plukket når du installerte Flash (for engelsktalende vil det trolig være en-us
eller bare no
), og hvis du bruker en nyere versjon av Flash enn CS3, den mappen vil endre seg også.
Trinn 8:. Hente informasjon fra FLA
Fl. trace (fl.getDocumentDOM (). selection.length)
objektet er faktisk en matrise med hvert element inneholder en av de valgte objektene. Det er derfor selection.length
gir oss antall objekter som er valgt
Trinn 9:. Finne den typen et objekt
for (var i = 0; i < fl.getDocumentDOM () selection.length; i ++.) {fl.trace (fl.getDocumentDOM () .selection [i] .elementType);}
texttextshape
Trinn 10: Endre objekter på Stage
for (var i = 0; i <. fl.getDocumentDOM () selection.length; i ++) {if (. fl.getDocumentDOM () utvalg [i] .elementType == "shape") {fl.getDocumentDOM ( ) .selection [i] .scaleY = 2; }}
Trinn 11: "Buttonize" Oversikt
Klikk på teksten
Konverter det til et symbol
Gå inn i redigeringsmodus
Opprett ny nøkkel. over, ned, traff
Tegn et solid rektangel som dekker teksten for å definere treffet området
Trinn 12: The History Panel
å få opp historikkpanelet:
Trinn 13: The History Panel Opp i JSFL
:
trinn 14: Kopier historie
. Nå kan du lime dem inn i et JSFL fil:
fl.getDocumentDOM () convertToSymbol ( 'knapp', '', 'øverst til venstre'); Var lib = fl.getDocumentDOM () bibliotek; if (lib... getItemProperty ( 'linkageImportForRS') == true) {lib.setItemProperty ( 'linkageImportForRS', false);} else {lib.setItemProperty ( 'linkageExportForAS', false); lib.setItemProperty ( 'linkageExportForRS', false);} lib. setItemProperty ( 'scalingGrid', false);fl.getDocumentDOM().enterEditMode('inPlace');fl.getDocumentDOM().getTimeline().convertToKeyframes();fl.getDocumentDOM().getTimeline().convertToKeyframes();fl.getDocumentDOM().getTimeline().convertToKeyframes();fl.getDocumentDOM().addNewRectangle({left:125.0, top: 133, høyre: 344,9, bunn. 207}, 0);
trinn 15:. Test script
Trinn 16:. Få tekst~~POS=TRUNC Dimensjoner
fl.trace (. fl.getDocumentDOM () utvalg [0] x), fl.trace (. fl.getDocumentDOM () utvalg [0] .Y); (. fl.getDocumentDOM () utvalg [0] .width) fl.trace, (. fl.getDocumentDOM () utvalg [0] .height) fl.trace;
fl.getDocumentDOM () addNewRectangle ({venstre:.. Fl.getDocumentDOM () utvalg [0] .x, topp. Fl.getDocumentDOM () utvalg [0] .Y, høyre:.. fl.getDocumentDOM () utvalg [0] .x + fl.getDocumentDOM () utvalg [0] .width, bunn. fl.getDocumentDOM () utvalg [0] .Y + fl.getDocumentDOM ( .) .selection [0] .height}, 0);
Trinn 17: Lagres Informasjon før Selection endringer
, toppen
, høyre
, og nederst
egenskaper tidlig, før valg endringer:
Var textLeft = fl.getDocumentDOM () utvalg [0] .x; Var textTop = fl.getDocumentDOM ().. utvalg [0] .Y;.. Var textRight = fl.getDocumentDOM () utvalg [0] .x + fl.getDocumentDOM () utvalg [0] .width;. Var textBottom = fl.getDocumentDOM () utvalg [0]. y + fl.getDocumentDOM () utvalg [0] .height;. fl.getDocumentDOM () convertToSymbol ( 'knapp', '', 'øverst til venstre.'); Var lib = fl.getDocumentDOM () bibliotek,. if (lib .getItemProperty ( 'linkageImportForRS') == true) {lib.setItemProperty ( 'linkageImportForRS', false);} else {lib.setItemProperty ( 'linkageExportForAS', false); lib.setItemProperty ( 'linkageExportForRS', false);} lib .setItemProperty ( 'scalingGrid', false);fl.getDocumentDOM().enterEditMode('inPlace');fl.getDocumentDOM().getTimeline().convertToKeyframes();fl.getDocumentDOM().getTimeline().convertToKeyframes();fl.getDocumentDOM().getTimeline().convertToKeyframes();fl.getDocumentDOM().addNewRectangle({left:textLeft, top: textTop, høyre: textRight, bunn: textBottom}, 0);
Trinn 18: Se etter potensielle feil
if (fl.getDocumentDOM () selection.length > 0). {Var textLeft = . fl.getDocumentDOM () utvalg [0] .x; Var textTop = fl.getDocumentDOM () utvalg [0] .Y.; Var textRight = fl.getDocumentDOM () utvalg [0] .x + fl.getDocumentDOM () utvalg [0] .width..; Var textBottom = fl.getDocumentDOM () utvalg [0] .Y + fl.getDocumentDOM () utvalg [0] .height..; . Fl.getDocumentDOM () convertToSymbol ( 'knapp', '', 'øverst til venstre'); . Var lib = fl.getDocumentDOM () bibliotek; if (lib.getItemProperty ( 'linkageImportForRS') == true) {lib.setItemProperty ( 'linkageImportForRS', false); } else {lib.setItemProperty ( 'linkageExportForAS', false); lib.setItemProperty ( 'linkageExportForRS', false); } Lib.setItemProperty ( 'scalingGrid', false); . Fl.getDocumentDOM () enterEditMode ( 'INPLACE'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () addNewRectangle ({venstre: textLeft, topp: textTop, høyre: textRight, bunn: textBottom}, 0);}
har blitt valgt?
if (fl.getDocumentDOM (). selection.length == 1) {if (fl.getDocumentDOM (). valg [0] .elementType == "tekst" .) {var textLeft = fl.getDocumentDOM () utvalg [0] .x; Var textTop = fl.getDocumentDOM () utvalg [0] .Y.; Var textRight = fl.getDocumentDOM () utvalg [0] .x + fl.getDocumentDOM () utvalg [0] .width..; Var textBottom = fl.getDocumentDOM () utvalg [0] .Y + fl.getDocumentDOM () utvalg [0] .height..; . Fl.getDocumentDOM () convertToSymbol ( 'knapp', '', 'øverst til venstre'); . Var lib = fl.getDocumentDOM () bibliotek; if (lib.getItemProperty ( 'linkageImportForRS') == true) {lib.setItemProperty ( 'linkageImportForRS', false); } else {lib.setItemProperty ( 'linkageExportForAS', false); lib.setItemProperty ( 'linkageExportForRS', false); } Lib.setItemProperty ( 'scalingGrid', false); . Fl.getDocumentDOM () enterEditMode ( 'INPLACE'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () addNewRectangle ({venstre: textLeft, topp: textTop, høyre: textRight, bunn: textBottom}, 0); }}
Trinn 19:. Navn på knappen etter tekst
vet at JSFL å konvertere et utvalg til et symbol er fl.getDocumentDOM (). ConvertToSymbol ()
, takket være historikkpanelet. Hvis du ser at opp i LiveDocs, vil du finne at den andre parameteren (som historikkpanelet manus tomt) kalles navn
, og beskrives slik:
Trinn 20: Få Text
fl.trace (fl .getDocumentDOM () utvalg [0] .text);.
. Ah vel
Var textLeft = fl.getDocumentDOM () utvalg [0] .x; . Var textTop = fl.getDocumentDOM () utvalg [0] .Y;.. Var textRight = fl.getDocumentDOM () utvalg [0] .x + fl.getDocumentDOM () utvalg [0] .width; Var textBottom = fl. . getDocumentDOM () utvalg [0] .Y + fl.getDocumentDOM () utvalg [0] .height;.. Var textText = fl.getDocumentDOM () utvalg [0] .getTextString (); fl.getDocumentDOM () convertToSymbol (. "knappen", textText, 'øverst til venstre.');
Wrap Up