Share
Ați avut nevoie vreodată să redimensionați SWF-ul încorporat pe baza interacțiunii / intrării utilizatorului, cum ar fi modul în care Newgrounds vă permite să redimensionați anumite jocuri Flash pentru a se potrivi ecranului? Acest lucru se poate face folosind JavaScript si ExternalInterface clasă în ActionScript. Dar dacă nu știi JavaScript deloc?
Ei bine, norocos pentru tine, acolo este numită această clasă mică BrowserCanvas care face toată munca urâtă pentru tine și în acest sfat rapid vă voi arăta cum să-l utilizați.
Mai întâi de toate avem nevoie de un editor de cod. Voi folosi FlashDevelop pentru acest tutorial pentru că vom scrie atât ActionScript și HTML și acesta este un editor de cod bun pentru ambele. Aceasta nu este ceva obligatoriu, astfel încât să puteți folosi orice software doriți. Dacă doriți să o utilizați, dar nu știți cum, consultați acest ghid al începătorului pentru FlashDevelop.
În continuare aveți nevoie de BrowserCanvas astfel încât du-te aici și descărcați-l și citiți o prezentare mai detaliată a acesteia.
De asemenea, veți avea nevoie de o imagine care să reprezinte conținutul (am folosit logo-ul Activetuts +) și o imagine care reprezintă instrumentul de redimensionare. Am inclus atât în sursa de descărcare, astfel încât ar trebui să fii bine.
Acum că suntem pregătiți să începem!
Notă: În primele șase pași am explicat cum se fac pregătirile și cum se face interfața fără a se referi la realitate BrowserCanvas clasă. Dacă nu doriți să le urmați, puteți să treceți direct la Pasul 7 și să continuați să utilizați proiectul pe care l-am furnizat în pachetul de descărcare. Îl puteți găsi în sursă dosar și sub SWFResize - piatră de hotar pliant.
Deschis FlashDevelop și de a crea un nou proiect, mergând la Proiect> Proiect nou? . Dați-i un nume și apăsați O.K.
Copiați și com folder din fișierul descărcat în directorul sursă al proiectului dvs..
Plasați active.png și arrows.png imagini din pachetul descărcat într - o bunuri dosar în interiorul cos din proiectul dvs..
Apoi deschideți Main.as fișier și plasați cele patru linii evidențiate în acesta (restul va fi deja creat automat de FlashDevelop):
pachet import flash.display.Sprite; importul flash.events.Event; clasa publică principală se extinde Sprite [Embed (source = '? /bin/assets/active.png')] public var logo: Clasa; [Embed (sursa = '? /Bin/assets/arrows.png')] public var arrows: Clasa; funcția publică Main (): void if (stage) init (); altfel addEventListener (Event.ADDED_TO_STAGE, init); funcția privată init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init);
Aceasta va încorpora cele două elemente, astfel încât să le putem folosi în timpul rulării.
Acum scena are setările implicite: va avea o culoare de fundal alb, o rată a cadrelor de 24 cadre pe secundă și o dimensiune de 800 de pixeli la 600 de pixeli - care este prea mare pentru a ne permite să demonstrăm acest efect.
Adăugați linia evidențiată chiar înainte de declarația de clasă:
[SWF (width = "400", height = "300", backgroundColor = "0x313131", frameRate = "60")]
Vom dori, de asemenea, să setăm modul de aliniere și stadiul scării. Pentru aceasta vom adăuga setStage () metodă la clasa noastră și să o numim din interiorul init () metodă.
funcția privată setStage (): void stage.align = "TL"; stage.scaleMode = "nuScale"; stage.addEventListener (Event.RESIZE, onStageResize); funcția privată onStageResize (e: Event): void
După cum puteți vedea, am adăugat și un ascultător al evenimentului pe scenă Event.RESIZE evenimentului, împreună cu funcția de manipulare corespunzătoare onStageResize ().
Bine. Acum avem etapa noastră și vom continua adăugând conținut.
Mai întâi adăugați aceste două variabile clasei noastre:
privat var _logo: Bitmap; private var _arrows: Sprite;
Acum adaugati createObjects () și apelați-l din interiorul init () metodă:
funcția privată init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); funcția privată createObjects (): void _logo = noul logo () ca bitmap; addChild (_logo); _arrows = Sprite nou (); _arrows.buttonMode = true; _arrows.addChild (săgeți noi () ca bitmap); addChild (_arrows);
Aceasta va instantiza obiectele noastre si le va adauga in lista de afisare.
Dacă compilați codul acum, veți vedea că aceste două se suprapun astfel încât să le poziționăm.
Să considerăm că vom avea nevoie ca conținutul nostru să rămână întotdeauna în centrul scenei, iar managerul de redimensionare să fie în colțul din dreapta jos al scenei. Vom folosi următoarele două metode pentru a face exact acest lucru.
positionLogo () va concentra conținutul pe scenă?
funcția privată a funcțieiLogo (): void _logo.x = stage.stageWidth * 0.5 - _logo.width * 0.5; _logo.y = stage.stageHeight * 0.5 - _logo.height * 0.5;
? si positionArrows () va seta dispozitivul de redimensionare în colțul din dreapta jos al scenei:
funcția privatăArrows (): void _arrows.x = stage.stageWidth - _arrows.width - 30; _arrows.y = stage.stageHeight - _arrows.height - 30;
În cele din urmă să le chemăm din interiorul init () metoda de a face poziționarea efectivă.
funcția privată init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); positionLogo (); positionArrows ();
De asemenea, acum este momentul să modificați onStageResize () handler pentru a poziționa logo-ul de fiecare dată când faza este redimensionată.
funcția privată onStageResize (e: Event): void positionLogo ();
Compilați codul și verificați rezultatul. Arată frumos, nu-i așa? :)
Ultimul lucru pe care trebuie să-l facem pentru ca interfața noastră să fie completă este să adăugăm o anumită interacțiune.
Adăugați aceste două MouseEvent ascultători după ultima linie din createObjects () metodă
_arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Adăugați, de asemenea, funcțiile lor corespunzătoare de manipulare:
funcția privată onMouseDown (e: MouseEvent): void _arrows.startDrag (); addEventListener (Eveniment.ENTER_FRAME, onEnterFrame); funcția privată onMouseUp (e: MouseEvent): void _arrows.stopDrag (); _arrows.x = stage.stageWidth - _arrows.width - 30; _arrows.y = stage.stageHeight - _arrows.height - 30; removeEventListener (Event.ENTER_FRAME, onEnterFrame); funcția privată onEnterFrame (e: Event): void
După cum puteți vedea MOUSE_DOWN si MOUSE_UP manipulatoare de evenimente sunt utilizate pentru manipularea redimensionare și un ENTER_FRAME evenimentul de ascultător este folosit pentru a rula codul pentru redimensionare. Vom adăuga codul corespunzător în onEnterFrame () handler în etapele ulterioare.
Accentsconagua
BrowserCanvas ClasăPână acum am făcut doar programări AS3 de bază fără a discuta ideea reală a acestui tutorial: redimensionarea zonei pe care SWF o ocupă în pagina web. Acestea nu erau pași necesari, dar le-am făcut să simuleze un scenariu real simplificat.
În primul rând, vom adăuga o nouă variabilă numită _canvas de tipul BrowserCanvas:
privat var _canvas: BrowserCanvas;
Notă: Dacă nu utilizați un editor de coduri care să importe automat clasele folosite, nu uitați să o faceți singur.
După crearea variabilei, instanțiați-o în createObjects () metodă.
funcția privată createObjects (): void _canvas = browser nouCanvas (stadiu); _logo = noul logo () ca bitmap; addChild (_logo); _arrows = Sprite nou (); _arrows.buttonMode = true; _arrows.addChild (săgeți noi () ca bitmap); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
După cum puteți vedea BrowserCanvas clasa are urmatorii trei parametri:
etapă -- aceasta este o referință la scenă. Acest lucru va fi folosit pentru a asigura vizarea corectă a filmului FlashcontainerID -- aceasta este o referință la tag-ul div sau obiect care deține filmul și pe care dorim să îl redimensionăm. Acest lucru nu este cu adevărat necesar dacă nu aveți mai multe instanțe ale aceluiași SWF încorporate în aceeași paginăbrowserHacks -- o listă de hack-uri care trebuie aplicate. De fapt, nu trebuie să treceți acest lucru, deoarece acesta implică aplicarea tuturor hacurilorNotă: Dacă compilați codul acum, ar trebui să obțineți următoarea eroare:
Eroare # 2067: Interfața externă nu este disponibilă în acest container. ExternalInterface necesită Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 și o versiune ulterioară sau alte browsere care suportă NPRuntime.
Acest lucru se datorează faptului că SWF nu este încă încorporat într-un container HTML. Filmul se va compila cu succes oricum, dar dacă nu doriți să obțineți această eroare, puteți adăuga o declarație if-pentru a verifica dacă filmul este în recipientul potrivit. Acest lucru se poate face cu ușurință prin verificarea ExternalInterface.available de proprietate înainte de instanțierea BrowserCanvas obiect.
dacă (ExternalInterface.available) _canvas = noul BrowserCanvas (stadiu);
Ultimul lucru pe care trebuie să-l facem în Flash este să adăugăm codul real care face redimensionarea. Acest cod va fi rulat din interiorul lui onEnterFrame () organizatorul evenimentului:
funcția privată onEnterFrame (e: Event): void if (_canvas) var w: Număr = _arrows.x + _arrows.width + 30; var h: Număr = _arrows.y + _arrows.height + 30; _canvas.width = w.toString (); _canvas.height = h.toString ();
w și h variabilele sunt folosite pentru a calcula lățimea și înălțimea corespunzătoare a treptei, după care am setat proprietățile de lățime și înălțime ale _canvas obiect la lățimea și înălțimea corespunzătoare. Aceste două proprietăți trebuie să fie setate ca șiruri de caractere.
Notă: Instrumentul if-este acolo pentru a verifica dacă _canvas obiect a fost instanțiat, deoarece dacă vom compila codul și vom folosi instrumentul de redimensionare vom primi o eroare. Acest lucru se întâmplă din nou din cauza recipientului necorespunzător. Deoarece filmul joacă în playerul independent, nu există niciun container HTML, astfel încât _canvas obiect nu a fost instanțiat (uitați-vă la pasul anterior).
Compilați proiectul și treceți la pasul următor.
Acum, când se face o parte din Flash, trebuie să lucrăm puțin în HTML, deoarece trebuie făcuți câțiva pași pentru ca aceasta să funcționeze corect.
Dacă utilizați FlashDevelop ar trebui să aveți un fișier HTML numit index.html generate automat în cos director; dacă nu, creați-o. Ar trebui să arate astfel:
SWFResize
Acesta este un fișier HTML simplu cu SWF încorporat folosind SWFObject.
Notă: Dacă nu aveți SWFObject puteți obține dacă și de aici și locul SWFObject.js fișier într-un director numit js plasat în același folder ca și dvs. index.html și fișierele SWF.
Acest lucru va funcționa, de asemenea, cu încorporarea de bază folosind și Etichete.
Salvați fișierul HTML și deschideți-l. Utilizați dispozitivul de manipulare cu săgeți dublu pentru a redimensiona etapa.
Când încorporați fișierul SWF utilizând oricare dintre metode, trebuie să aveți allowScriptAccess setat la mereu. Acest lucru este strict necesar deoarece permite fișierul SWF să facă JavaScript apeluri.
De asemenea, dacă doriți ca culoarea stadiului SWF să fie vizibilă, trebuie să setați wmode parametru pentru opac.
Ultimul lucru pe care ați putea dori să îl îngrijiți sunt setările de lățime și înălțime ale obiectului încorporat. S-ar putea să doriți să le setați la dimensiunea originală a stadiului SWF, dar acest lucru nu este necesar, deoarece redimensionarea va funcționa în ambele sensuri.
swfobject.embedSWF ("SWFResize.swf", "altContent", "400", "300", "9.0.0", "expressInstall.swf", flashvars, paramuri, atribute); Probabil ați observat că stadiul este redus la orice lățime și înălțime. Acest lucru este minunat, dar s-ar putea să existe cazuri în care nu doriți ca acest lucru să se întâmple deoarece ar putea să vă înșurubeze aspectul paginii sau ceva mai rău.
Pentru a rezolva aceasta, clasa BrowserCanvas vine cu patru proprietăți utile care vă ajută să constrângeți mărimea SWF.
minWidth -- determină minimul pe care îl poate avea etapaminHeight -- determină înălțimea minimă pe care o poate avea etapalățimea maximă -- determină lățimea maximă pe care o poate avea etapamaxHeight -- determină înălțimea maximă pe care o poate avea etapaPentru a vedea cum funcționează aceasta, adăugați setMinMax () la clasa AS pe care am lucrat.
funcția privată setMinMax (): void _canvas.minHeight = _canvas.minWidth = "300"; _canvas.maxHeight = "500"; _canvas.maxWidth = "800";
Și modificați createObjects () astfel:
funcția privată createObjects (): void if (ExternalInterface.available) _canvas = BrowserCanvas nou (stadiu); setMinMax (); _logo = nou logo () ca Bitmap; addChild (_logo); _arrows = Sprite nou (); _arrows.buttonMode = true; _arrows.addChild (săgeți noi () ca bitmap); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Ceea ce face în realitate este limitarea dimensiunii fișierului SWF la un minim de 300px de 300px și un maxim de 800px de 500px.
Pentru a vedea rezultatul, compilați codul și reîncărcați fișierul HTML. Acum nu ar trebui să puteți redimensiona SWF în afara limitelor.
Sper că veți găsi această clasă mică la fel de utilă ca mine. Rețineți că este posibil să nu funcționeze în toate browserele, deoarece toate au modalități diferite de a interpreta JavaScript.
Simțiți-vă liber să lăsați un comentariu dacă unele pași sunt neclare.
Notă: Nu am adăugat codul HTML complet pe care îl vedeți în demo pentru că am vrut să-l păstrez simplu și a fost în afara scopului acestui tutorial. Fișierul HTML din demo este inclus în pachetul de descărcare, astfel încât să puteți verifica codul sursă acolo.
