Share
Hai mai avuto bisogno di ridimensionare il tuo SWF incorporato in base all'interazione / input dell'utente, come Newgrounds ti consente di ridimensionare determinati giochi Flash per adattarli allo schermo? Questo può essere fatto usando JavaScript e il ExternalInterface classe in ActionScript. Ma cosa succede se non lo sai JavaScript affatto?
Beh, fortunata per te c'è questa piccola classe là fuori chiamata BrowserCanvas che fa tutto il brutto lavoro per te e in questo rapido suggerimento ti mostrerò come usarlo.
Prima di tutto abbiamo bisogno di un editor di codice. Userò FlashDevelop per questo tutorial perché scriveremo entrambi ActionScript e HTML e questo è un buon editor di codice per entrambi. Questo non è qualcosa di obbligatorio, quindi puoi usare qualunque software tu voglia. Se desideri utilizzarlo, ma non sai come, dai un'occhiata a questa guida per principianti a FlashDevelop.
Quindi hai bisogno del BrowserCanvas classe quindi vai qui e scaricalo e leggi una panoramica più dettagliata di esso.
Inoltre avrai bisogno di un'immagine che rappresenterà il contenuto (ho usato il logo Activetuts +) e un'immagine che rappresenta il gestore di ridimensionamento. Ho incluso entrambi nella fonte di download, quindi dovresti stare bene.
Ora che siamo preparati, iniziamo!
Nota: Nei primi sei passaggi ho spiegato come sono fatti i preparativi e come rendere l'interfaccia utente senza fare riferimento al reale BrowserCanvas classe. Se non vuoi seguirli, puoi saltare direttamente al passaggio 7 e continuare a utilizzare il progetto che ho fornito nel pacchetto di download. Puoi trovarlo nel fonte cartella e sotto il SWFRize - pietra miliare cartella.
Aperto FlashDevelop e creare un nuovo progetto andando a Progetto> Nuovo progetto? . Dagli un nome e premi ok.
Copia anche il com cartella dal file scaricato nella directory di origine del progetto.
Posiziona il active.png e arrows.png immagini dal pacchetto scaricato in un risorse cartella all'interno del bidone directory dal tuo progetto.
Quindi aprire il Main.as file e posizionare le quattro linee evidenziate in esso (il resto sarà già stato creato automaticamente da FlashDevelop):
pacchetto import flash.display.Sprite; import flash.events.Event; public class Main extends Sprite [Embed (source = '? /bin/assets/active.png')] public var logo: Class; [Incorpora (source = '? /Bin/assets/arrows.png')] public var arrows: Class; funzione pubblica Main (): void if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); funzione privata init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init);
Questo incorporerà le due risorse in modo che possiamo usarle in fase di runtime.
In questo momento il palcoscenico ha le sue impostazioni predefinite: avrà un colore di sfondo bianco, un frame rate di 24fps e una dimensione di 800px per 600px - che è troppo grande per permetterci di dimostrare questo effetto.
Aggiungi la linea evidenziata subito prima della dichiarazione della classe:
[SWF (width = "400", height = "300", backgroundColor = "0x313131", frameRate = "60")] public class Main estende Sprite
Vogliamo anche impostare la modalità e l'allineamento della scala dello stage. Per questo aggiungeremo il setStage () metodo alla nostra classe e lo chiamiamo dall'interno del dentro() metodo.
funzione privata setStage (): void stage.align = "TL"; stage.scaleMode = "noScale"; stage.addEventListener (Event.RESIZE, onStageResize); funzione privata onStageResize (e: Event): void
Come puoi vedere ho anche aggiunto un ascoltatore di eventi sul palco per il Event.RESIZE evento, insieme alla sua appropriata funzione di gestore onStageResize ().
Va bene. Ora abbiamo il nostro stage e continueremo con l'aggiunta di alcuni contenuti.
Per prima cosa aggiungi queste due variabili alla nostra classe:
private var _logo: Bitmap; private var _arrows: Sprite;
Ora aggiungi il createObjects () metodo e chiamalo dall'interno del dentro() metodo:
funzione privata init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); funzione privata createObjects (): void _logo = new logo () come Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (nuove frecce () come Bitmap); addChild (_arrows);
Questo istanzia gli oggetti e li aggiunge all'elenco di visualizzazione.
Se si compila il codice ora vedrai che questi due si sovrappongono quindi posizioniamoli.
Consideriamo che avremmo bisogno che i nostri contenuti rimangano sempre al centro del palco e che il gestore di ridimensionamento si trovi nell'angolo in basso a destra del palco. Useremo i seguenti due metodi per fare proprio questo.
Il positionLogo () centrerà il contenuto sul palco?
private function positionLogo (): void _logo.x = stage.stageWidth * 0.5 - _logo.width * 0.5; _logo.y = stage.stageHeight * 0.5 - _logo.height * 0.5;
? e il positionArrows () imposterà il gestore di ridimensionamento nell'angolo in basso a destra del palco:
private function positionArrows (): void _arrows.x = stage.stageWidth - _arrows.width - 30; _arrows.y = stage.stageHeight - _arrows.height - 30;
Infine chiamiamoli dall'interno del dentro() metodo per fare il posizionamento attuale.
funzione privata init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); positionLogo (); positionArrows ();
Inoltre, ora è il momento di modificare il onStageResize () gestore per posizionare il logo ogni volta che lo stage viene ridimensionato.
funzione privata onStageResize (e: Event): void positionLogo ();
Compilare il codice e controllare il risultato. Sembra carino, vero? :)
L'ultima cosa che dobbiamo fare per completare l'interfaccia utente è aggiungervi un po 'di interattività.
Aggiungi questi due MouseEvent ascoltatori dopo l'ultima riga in createObjects () metodo
_arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Aggiungi anche le corrispondenti funzioni del gestore:
funzione privata onMouseDown (e: MouseEvent): void _arrows.startDrag (); addEventListener (Event.ENTER_FRAME, onEnterFrame); funzione privata 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); funzione privata onEnterFrame (e: Event): void
Come puoi vedere MOUSE_DOWN e il MOUSE_UP i gestori di eventi vengono utilizzati per il gestore di ridimensionamento e un ENTER_FRAME listener di eventi viene utilizzato per eseguire il codice per il ridimensionamento. Aggiungeremo il codice corrispondente nel onEnterFrame () gestore nei passaggi successivi.
Accentsconagua
BrowserCanvas ClasseFino ad ora abbiamo solo fatto una programmazione AS3 di base senza discutere l'idea reale di questo tutorial: ridimensionare l'area che il SWF occupa nella pagina web. Questi non erano passaggi necessari ma li ho fatti simulare uno scenario reale semplificato.
Per cominciare, prima aggiungeremo una nuova variabile chiamata _tela di tipo BrowserCanvas:
private var _canvas: BrowserCanvas;
Nota: Se non stai utilizzando un editor di codice che importa automaticamente le classi utilizzate, non dimenticare di farlo da solo.
Dopo aver creato la variabile, crea un'istanza nel createObjects () metodo.
funzione privata createObjects (): void _canvas = new BrowserCanvas (stage); _logo = new logo () come Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (nuove frecce () come Bitmap); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Come puoi vedere BrowserCanvas classe prende i seguenti tre parametri:
palcoscenico -- questo è un riferimento al palcoscenico. Questo sarà usato per garantire che il filmato Flash giusto sia miratocontainerId -- questo è un riferimento al tag div o object che contiene il film e che vogliamo ridimensionare. Questo non è realmente necessario se non si hanno più istanze dello stesso SWF incorporate nella stessa paginabrowserHacks -- un elenco di hack da applicare. In realtà non è necessario passare questo dato che per impostazione predefinita applica tutti gli hackNota: Se si compila il codice ora si dovrebbe ottenere il seguente errore:
Errore # 2067: ExternalInterface non è disponibile in questo contenitore. ExternalInterface richiede Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 e versioni successive o altri browser che supportano NPRuntime.
Questo perché il file SWF non è ancora incorporato in un contenitore HTML. Il film verrà comunque compilato con successo ma se non si desidera ottenere questo errore è possibile aggiungere un'istruzione if per verificare se il film è nel contenitore giusto. Questo può essere fatto facilmente controllando il ExternalInterface.available proprietà prima di istanziare il BrowserCanvas oggetto.
if (ExternalInterface.available) _canvas = new BrowserCanvas (stage);
L'ultima cosa che dobbiamo fare in Flash è aggiungere il codice effettivo che fa il ridimensionamento. Questo codice verrà eseguito dall'interno del onEnterFrame () gestore di eventi:
funzione privata onEnterFrame (e: Event): void if (_canvas) var w: Number = _arrows.x + _arrows.width + 30; var h: Number = _arrows.y + _arrows.height + 30; _canvas.width = w.toString (); _canvas.height = h.toString ();
Il w e h le variabili vengono utilizzate per calcolare la larghezza e l'altezza dello stage appropriate dopo le quali impostiamo le proprietà width e height di _tela oggetto alla larghezza e all'altezza corrispondenti. Queste due proprietà devono essere impostate come stringhe.
Nota: L'if-statement è lì per verificare se il _tela oggetto è stato istanziato perché se compiliamo il codice e utilizziamo il gestore di ridimensionamento riceviamo un errore. Ciò sta accadendo a causa del contenitore inappropriato di nuovo. Poiché il film viene riprodotto nel player standalone, non esiste un contenitore HTML _tela l'oggetto non è stato istanziato (guarda il passaggio precedente).
Compilare il progetto e passare al passaggio successivo.
Ora che la parte di Flash è terminata, è necessario lavorare in HTML un po ', poiché ci sono alcuni passaggi da fare perché questo funzioni correttamente.
Se stai usando FlashDevelop dovresti avere un file HTML chiamato index.html generato automaticamente nel bidone directory; se no, crearlo. Dovrebbe sembrare come questo:
SWFResize
Questo è un semplice file HTML con il SWF incorporato usando SWFObject.
Nota: Se non lo hai SWFObject puoi ottenere se da qui e posizionare il swfobject.js file in una cartella chiamata js inserito nella stessa cartella del tuo index.html e file SWF.
Questo funzionerà anche con l'incorporamento di base usando il e tag.
Salva il file HTML e aprilo. Usa il gestore di frecce doppie per ridimensionare il livello.
Quando si incorpora il file SWF utilizzando uno dei due metodi, è necessario disporre di allowScriptAccess impostato sempre. Questo è strettamente necessario in quanto consente al file SWF di fare JavaScript chiamate.
Inoltre, se si desidera che il colore dello stage SWF sia visibile, è necessario impostare il simbolo wmode parametro a opaco.
L'ultima cosa che potresti voler occupare sono le impostazioni di larghezza e altezza dell'oggetto incorporato. Potrebbe essere necessario impostarli sulla dimensione originale della fase SWF, ma ciò non è necessario in quanto il ridimensionamento funzionerà in entrambi i modi.
swfobject.embedSWF ("SWFResize.swf", "altContent", "400", "300", "9.0.0", "expressInstall.swf", flashvars, params, attributi); Probabilmente hai notato che lo stage si ridimensiona a qualsiasi larghezza e altezza. È fantastico, ma potrebbero esserci casi in cui non vuoi che questo accada perché potrebbe rovinare il layout della tua pagina o qualcosa di peggio.
Per risolvere questo problema, la classe BrowserCanvas è dotata di quattro utili proprietà che consentono di limitare le dimensioni del file SWF.
minWidth -- determina il minimo che può avere lo stageminHeight -- determina l'altezza minima che può avere lo stagelarghezza massima -- determina la larghezza massima che può avere lo stagealtezza massima -- determina l'altezza massima che può avere lo stagePer vedere come funziona, aggiungi il setMinMax () metodo alla classe AS su cui abbiamo lavorato.
funzione privata setMinMax (): void _canvas.minHeight = _canvas.minWidth = "300"; _canvas.maxHeight = "500"; _canvas.maxWidth = "800";
E modificare il createObjects () metodo in questo modo:
funzione privata createObjects (): void if (ExternalInterface.available) _canvas = new BrowserCanvas (stage); setMinMax (); _logo = new logo () come Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (nuove frecce () come Bitmap); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Ciò che fondamentalmente fa è vincolare la dimensione del file SWF a un minimo di 300px di 300px e un massimo di 800px di 500px.
Per vedere il risultato compilare il codice e ricaricare il file HTML. Ora non dovresti essere in grado di ridimensionare il SWF oltre i limiti.
Spero che tu trovi questa piccola classe tanto utile quanto me. Tieni presente che potrebbe non funzionare in tutti i browser poiché hanno tutti modi diversi di interpretare JavaScript.
Sentiti libero di lasciare un commento se alcuni passaggi non sono chiari.
Nota: Non ho aggiunto il codice HTML completo che vedi nella demo perché volevo mantenerlo semplice ed era al di fuori dello scopo di questo tutorial. Il file HTML della demo è incluso nel pacchetto di download in modo da poter controllare il codice sorgente lì.
