Share
Har du noen gang hatt behov for å endre størrelsen på den innebygde SWF-en din, basert på brukerens interaksjon / inngang, som hvordan Newgrounds lar deg endre størrelsen på visse Flash-spill for å passe til skjermen? Dette kan gjøres ved hjelp av Javascript og ExternalInterface klassen i ActionScript. Men hva om du ikke vet det Javascript i det hele tatt?
Vel, heldig for deg, det er denne lille klassen der ute, kalt BrowserCanvas som gjør alt det stygge arbeidet for deg og i dette raske tipset, viser jeg deg hvordan du bruker den.
Først og fremst trenger vi en kodeditor. Jeg vil bruke FlashDevelop for denne opplæringen fordi vi skal skrive begge deler Action og HTML og dette er en god kode redaktør for begge. Dette er ikke noe obligatorisk, slik at du kan bruke hvilken som helst programvare du liker. Hvis du vil bruke den, men vet ikke hvordan, sjekk ut denne nybegynners guide til FlashDevelop.
Deretter trenger du BrowserCanvas klassen så gå her og last den ned og les en mer detaljert oversikt over det.
Også du trenger et bilde som representerer innholdet (jeg har brukt Activetuts + -logoen) og et bilde som representerer størrelsen på handleren. Jeg har tatt med både i nedlastingskilden, så du burde ha det bra.
Nå som vi er forberedt, la oss starte!
Merk: I de første seks trinnene har jeg forklart hvordan forberedelsene blir laget og hvordan du lager UI uten å referere til selve BrowserCanvas klasse. Hvis du ikke vil følge dem, kan du hoppe direkte til trinn 7 og fortsette å bruke prosjektet jeg har gitt i nedlastingspakken. Du kan finne den i kilde mappe og under SWFResize - milepæl mappe.
Åpen FlashDevelop og opprett et nytt prosjekt ved å gå til Prosjekt> Nytt prosjekt? . Gi det et navn og trykk OK.
Kopier også com mappe fra den nedlastede filen i kildekatalogen til prosjektet ditt.
Plasser active.png og arrows.png bilder fra den nedlastede pakken i en eiendeler mappe inne i bin katalog fra prosjektet ditt.
Neste åpne Main.as fil og plasser de fire markerte linjene i den (resten vil allerede være opprettet automatisk av FlashDevelop):
pakke import flash.display.Sprite; importere flash.events.Event; offentlig klasse Hoved utvider Sprite [Embed (source = '? /bin/assets/active.png')] public var logo: Klasse; [Embed (source = '? /Bin/assets/arrows.png')] offentlige varpiler: Klasse; offentlig funksjon Main (): void if (stage) init (); ellers addEventListener (Event.ADDED_TO_STAGE, init); privat funksjon init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init);
Dette vil legge inn de to eiendelene slik at vi kan bruke dem på kjøretid.
Akkurat nå har scenen sine standardinnstillinger: den vil ha en hvit bakgrunnsfarge, en 24fps rammefrekvens og en størrelse på 800px ved 600px - som er for stor til å la oss demonstrere denne effekten.
Legg til den uthevede linjen like før klassedeklarasjonen:
[SWF (bredde = "400", høyde = "300", backgroundColor = "0x313131", frameRate = "60")] offentlig klasse Main utvider Sprite
Vi vil også gjerne sette scenens skala modus og justering. For dette legger vi til setStage () metode til vår klasse og ring den fra innsiden av i det() metode.
privat funksjon setStage (): void stage.align = "TL"; stage.scaleMode = "noScale"; stage.addEventListener (Event.RESIZE, onStageResize); privat funksjon onStageResize (e: Event): void
Som du kan se har jeg også lagt til en hendelseslytter til scenen for Event.RESIZE arrangement, sammen med den aktuelle håndteringsfunksjonen onStageResize ().
Greit. Vi har nå satt opp scenen, og vi fortsetter med å legge til noe innhold.
Først legg disse to variablene til vår klasse:
private var _logo: Bitmap; private var _arrows: Sprite;
Legg nå til createObjects () metode og ring det fra innsiden av i det() metode:
privat funksjon init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); privat funksjon createObjects (): void _logo = new logo () som Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (nye piler () som Bitmap); addChild (_arrows);
Dette vil instantiere våre objekter og legge dem til i visningslisten.
Hvis du kompilerer koden nå, vil du se at disse to overlapper, så la oss plassere dem.
La oss vurdere at vi vil trenge at innholdet vårt alltid forblir midt i scenen, og at størrelseshåndtereren skal være i nedre høyre hjørne av scenen. Vi bruker følgende to metoder for å gjøre nettopp det.
De positionLogo () vil sentrere innholdet på scenen?
privat funksjon posisjonLogo (): void _logo.x = stage.stageWidth * 0.5 - _logo.width * 0.5; _logo.y = scene.stageHeight * 0.5 - _logo.height * 0.5;
? og positionArrows () vil sette størrelsesbehandleren til nederste høyre hjørne av scenen:
privat funksjonsposisjonArrows (): void _arrows.x = stage.stageWidth - _arrows.width - 30; _arrows.y = scene.stageHeight - _arrows.height - 30;
Til slutt la oss ringe dem fra innsiden av i det() metode for å gjøre den faktiske posisjoneringen.
privat funksjon init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); positionLogo (); positionArrows ();
Også nå er det på tide å endre onStageResize () handler for å plassere logoen hver gang scenen er endret.
privat funksjon onStageResize (e: Event): void positionLogo ();
Samle koden og sjekk ut resultatet. Ser bra ut, ikke sant? :)
Det siste vi må gjøre for brukergrensesnittet vårt, er å legge til noe interaktivitet for det.
Legg til disse to Mouseevent lyttere etter siste linje i createObjects () metode
_arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Legg også til tilsvarende handlerfunksjoner:
privat funksjon onMouseDown (e: MouseEvent): void _arrows.startDrag (); addEventListener (Event.ENTER_FRAME, onEnterFrame); privat funksjon onMouseUp (e: MouseEvent): void _arrows.stopDrag (); _arrows.x = scene.stageWidth - _arrows.width - 30; _arrows.y = scene.stageHeight - _arrows.height - 30; removeEventListener (Event.ENTER_FRAME, onEnterFrame); privat funksjon onEnterFrame (e: Event): void
Som du kan se MOUSE_DOWN og MOUSE_UP Hendelseshåndteringsprogrammer brukes til størrelsesbehandleren og en ENTER_FRAME Hendelseslytteren brukes til å kjøre koden for resize. Vi legger til den tilsvarende koden i onEnterFrame () handler i de senere trinnene.
Accentsconagua
BrowserCanvas KlasseFrem til nå har vi bare gjort grunnleggende AS3 programmering uten å diskutere den faktiske ideen om denne opplæringen: endre størrelsen på området SWF tar opp på nettsiden. Disse var ikke nødvendige skritt, men jeg har gjort dem til å simulere et forenklet ekte scenario.
Til å begynne med vil vi først legge til en ny variabel som heter _lerret av typen BrowserCanvas:
privat var _canvas: BrowserCanvas;
Merk: Hvis du ikke bruker en kodeditor som automatisk importerer de brukte klassene, ikke glem å gjøre det selv.
Etter å ha opprettet variabelen, instansierer du den i createObjects () metode.
privat funksjon createObjects (): void _canvas = new BrowserCanvas (scene); _logo = ny logo () som Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (nye piler () som Bitmap); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Som du kan se BrowserCanvas klassen tar følgende tre parametere:
scene -- Dette er en referanse til scenen. Dette vil bli brukt til å sikre at riktig Flash-film er målrettetcontainerId -- Dette er en referanse til div- eller objektetiketten som inneholder filmen og som vi ønsker å endre størrelse på. Dette er egentlig ikke nødvendig med mindre du har flere forekomster av samme SWF innebygd på samme sidebrowserHacks -- en liste over hack som skal brukes. Du trenger ikke egentlig å passere dette som standard for å bruke alle hackeneMerk: Hvis du kompilerer koden nå, bør du få følgende feil:
Feil # 2067: EksternInterface er ikke tilgjengelig i denne beholderen. ExternalInterface krever Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 og nyere, eller andre nettlesere som støtter NPRuntime.
Dette skyldes at SWF ikke er innebygd i en HTML-beholder. Filmen vil likevel kompilere, men hvis du ikke vil få denne feilen, kan du legge til en if-setning for å sjekke om filmen er i riktig beholder. Dette kan enkelt gjøres ved å sjekke ExternalInterface.available eiendom før instantiating the BrowserCanvas gjenstand.
hvis (ExternalInterface.available) _canvas = ny BrowserCanvas (scene);
Det siste vi må gjøre i Flash, er å legge til den faktiske koden som gjør resizing. Denne koden vil bli kjørt fra innsiden av onEnterFrame () hendelse handler:
privat funksjon onEnterFrame (e: Event): void if (_canvas) var w: Nummer = _arrows.x + _arrows.width + 30; var h: Nummer = _arrows.y + _arrows.height + 30; _canvas.width = w.toString (); _canvas.height = h.toString ();
De w og h Variabler brukes til å beregne riktig trinnbredde og høyde, hvorefter vi setter bredden og høydeegenskapene til _lerret motsette seg tilsvarende bredde og høyde. Disse to egenskapene må settes som strenger.
Merk: Hvis-setningen er der for å sjekke om _lerret objektet har blitt instantiated fordi hvis vi kompilerer koden og bruker resize handler vil vi motta en feil. Det skjer på grunn av den uhensiktsomme beholderen igjen. Fordi filmen spilles i den frittstående spilleren, er det ingen HTML-beholder slik at _lerret objektet var ikke instantiated (se på forrige trinn).
Samle prosjektet og gå videre til neste trinn.
Nå som Flash-delen er ferdig, må vi jobbe litt i HTML, da det er noen skritt som trengs for at dette skal fungere skikkelig..
Hvis du bruker FlashDevelop du bør ha en HTML-fil kalt index.html generert automatisk i bin katalog; Hvis ikke, lag det. Det skal se slik ut:
SWFResize
Dette er en vanlig HTML-fil med SWF innebygd ved hjelp av SWFObject.
Merk: Hvis du ikke har det SWFObject du kan få hvis herfra og plassere SWFObject.js fil i en mappe som heter js plassert i samme mappe som din index.html og SWF-filer.
Dette vil også fungere med grunnleggende embedding ved hjelp av og tags.
Lagre HTML-filen og åpne den. Bruk dobbeltpileren til å endre størrelsen på scenen.
Når du legger inn SWF-filen ved hjelp av en hvilken som helst metode, må du ha allowScriptAccess satt til alltid. Dette er strengt nødvendig da det tillater SWF-filen å lage Javascript samtaler.
Også hvis du vil at SWF-scenen skal være synlig, må du stille inn wmode parameter til ugjennomsiktig.
Den siste tingen du kanskje vil se etter er innstillingene for bredde og høyde for den innebygde objekten. Du vil kanskje sette dem til den opprinnelige størrelsen på SWFs-scenen, men dette er ikke nødvendig da størrelsen vil fungere uansett.
swfobject.embedSWF ("SWFResize.swf", "altContent", "400", "300", "9.0.0", "expressInstall.swf", flashvars, params, attributter); Du har sannsynligvis lagt merke til at scenen endres i hvilken som helst bredde og høyde. Dette er kjempebra, men det kan være tilfeller når du ikke vil at dette skal skje, ettersom det kan skru opp layoutet på siden eller noe verre.
For å fikse dette kommer klassen BrowserCanvas med fire nyttige egenskaper som hjelper deg med å begrense størrelsen på SWF.
minWidth -- bestemmer minimumet som scenen kan haminHeight -- bestemmer minimumshøyden som scenen kan hamaxWidth -- bestemmer maksimal bredde som scenen kan hamaxHeight -- bestemmer maksimal høyde som scenen kan haFor å se hvordan dette virker, legg til setMinMax () metode til AS-klassen som vi jobbet med.
privat funksjon setMinMax (): void _canvas.minHeight = _canvas.minWidth = "300"; _canvas.maxHeight = "500"; _canvas.maxWidth = "800";
Og endre createObjects () metode slik:
privat funksjon createObjects (): void if (ExternalInterface.available) _canvas = new BrowserCanvas (stadium); setMinMax (); _logo = ny logo () som Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (nye piler () som Bitmap); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Hva dette i utgangspunktet gjør, begrenser størrelsen på SWF-filen til et minimum av 300px av 300px og maksimalt 800px av 500px.
For å se resultatet, kompilere koden og last inn HTML-filen. Nå bør du ikke kunne endre størrelsen på SWF utenfor grensene.
Jeg håper du finner denne lille klassen så nyttig som jeg gjør. Merk at det kanskje ikke fungerer i alle nettlesere, da de alle har forskjellige måter å tolke JavaScript på.
Du er velkommen til å legge igjen en kommentar hvis noen trinn er uklare.
Merk: Jeg har ikke lagt til den komplette HTML-koden du ser i demoen fordi jeg ønsket å holde det enkelt og det var utenfor omfanget av denne opplæringen. HTML-filen fra demoen er inkludert i nedlastingspakken, slik at du kan sjekke kildekoden der.
