Share
In questo tutorial imparerai come creare finestre trascinabili usando Flash e AS3. Tratterò le nozioni di base del trascinamento della selezione, dei limiti delle finestre, dell'aggiunta di contenuti e di come ridurre al minimo la finestra.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Okey, andiamo! Crea un nuovo documento premendo CTRL + N e selezionando File Flash (ActionScript 3). Imposta le dimensioni dello stage su 600x400 px e il colore dello sfondo su #EEE. Nella finestra Proprietà, impostare la classe su finestre e salva il tuo file come windows.fla.
Seleziona lo strumento Rettangolo (R) e disegna un rettangolo con 280x90 px. Seleziona la tua forma, vai alla palette Colori (Finestra> Colore) e crea una sfumatura da #FFF a #CCC.
Premi F per lo strumento Sfumatura, seleziona la sfumatura, ruotala di 90 gradi (tenendo premuto il tasto Maiusc mentre ruoti) e accorciala in modo da adattarla al rettangolo.
Seleziona tutta la forma, premi F8 per convertire in simbolo, chiamala windowArea e impostare il punto di registrazione in alto a sinistra.
Selezionare il simbolo e nella finestra Proprietà impostare il nome dell'istanza su windowArea.
Per il bordo, usa il filtro Bagliore, con una sfocatura 2px, forza 500%, colore # 666666. Ho usato un bagliore perché se si utilizza un tratto, quando si ridimensiona la finestra anche il tratto verrà ridimensionato.
Seleziona di nuovo lo strumento Rettangolo (R) e disegna un rettangolo con 280x22 px e un tratto 1px con il colore # 666. Crea un altro rettangolo sopra, ma questa volta nelle Opzioni rettangolo imposta il raggio dell'angolo di Rettangolo su 5.
Ora, elimina gli angoli necessari come nell'immagine qui sotto.
Quindi, dipingi la forma, selezionala, vai alla palette Colori (Finestra> Colore) e crea una sfumatura dal n. 999 al n. 333. Ruota il gradiente di 90 gradi, come abbiamo fatto nel passaggio precedente.
Seleziona la forma completa, premi F8. Nome: windowBar; Tipo: pulsante; Registrazione: in alto a sinistra.
Selezionare il simbolo e nella finestra Proprietà impostare il nome dell'istanza su windowBar.
Fai doppio clic sulla forma, crea i fotogrammi chiave per il Al di sopra di e Giù stati. Ora cambia i colori per ognuno.
Ho scelto:
Crea un rettangolo tondo con raggio di 5x x 5 px e modificalo in modo che assomigli a qualcosa di seguito.
Il segno meno lo fai creando un rettangolo 5x2 px con il colore # 999. Imposta il nome dell'istanza su minimizeBtn.
Ho usato gli stessi colori della windowBar, ma lo stato UP con un 40% di alpha per il gradiente.
Disporre tutte le forme sotto forma di una finestra, premere F8 e creare una MovieClip con il nome finestra e registrazione: in alto a sinistra.
Nella libreria, fare clic con il tasto destro sulla finestra e andare su Proprietà. Imposta la classe a finestra. In questo modo la finestra verrà assegnata alla classe che creeremo in seguito.
Seleziona il simbolo e nel Finestra Proprietà imposta il nome dell'istanza su finestra. Nei filtri, fare clic su Aggiungi filtro (il pulsante cerchiato nell'immagine sottostante) e aggiungi un'ombra esterna con il colore # 333 come di seguito:
Fare doppio clic sul simbolo per modificarlo. Seleziona tutto (CTRL + A), Clic destro> Distribuisci ai livelli.
In un nuovo livello, scrivi il testo per il titolo della finestra con Arial, 11pt, colore #CCC, letter-spacing: 1. Impostalo su Testo dinamico e nominalo windowTitle.
Ora che il design è completo, iniziamo a programmare la nostra scena. La prima cosa che faremo è creare il nostro file ActionScript.
Premi Ctrl + N o vai su File> Nuovo e seleziona File ActionScript. Salvalo nella stessa directory e con lo stesso nome (windows.as) del tuo file FLA.
Ora creiamo il nostro pacchetto e importiamo le classi necessarie:
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.events.KeyboardEvent; import flash.events.ContextMenuEvent; import flash.geom.Rectangle; import flash.filters.DropShadowFilter; import flash.text.TextFormat; importare fl.transitions.Tween; importare fl.transitions.easing. *; importare fl.transitions.TweenEvent; la finestra della classe pubblica estende MovieClip
Ora è necessario assegnare funzioni ai nostri pulsanti. Avrai bisogno di una funzione quando inizieremo a trascinare il windowBar, un altro per fermare il trascinamento, uno per portare la finestra in alto quando si fa clic su di esso, e un altro per ridurlo al minimo.
Aggiungi questi ascoltatori di eventi al finestra di funzione pubblica () nel nostro codice:
la finestra public class estende MovieClip // variables public var title: String; public function Window () // set windowTitle title = windowTitle.text; windowTitle.mouseEnabled = false; // funzioni windows this.addEventListener (MouseEvent.MOUSE_UP, onWindowClick); this.windowBar.addEventListener (MouseEvent.MOUSE_DOWN, onWindowStartDrag); this.windowBar.addEventListener (MouseEvent.MOUSE_UP, onWindowStopDrag); this.minimizeBtn.addEventListener (MouseEvent.MOUSE_UP, reduceWindow);
Il pubblico var titolo è usato per il titolo della finestra. Lo useremo più tardi.
Dal momento che il windowTitle è un testo dinamico disabilitiamo le sue funzioni del mouse in modo che non influenzino l'area di trascinamento del windowBar.
È qui che iniziamo a divertirci! Copia il seguente codice dopo il finestra di funzione pubblica ():
/ * START DRAG ********************************************** ************ / funzione privata onWindowStartDrag (e: MouseEvent): void var windowWidth = this.width; var windowHeight = this.height; var windowBarWidth = e.target.width; var windowBarHeight = e.target.height; var boundsRect: Rectangle; // limiti trascinabili della finestra if (windowArea.visible) boundsRect = new Rectangle (0, 0, stage.stageWidth-windowWidth, stage.stageHeight-windowHeight); else boundsRect = new Rectangle (0, 0, stage.stageWidth-windowBarWidth, stage.stageHeight-windowBarHeight); // trace (boundsRect); this.startDrag (false, boundsRect); // porta la finestra in primo piano.addChild (this);
La prima cosa che facciamo qui è creare variabili per le larghezze e altezze della Finestra e del windowBar.
Successivamente, i confini della finestra. Creeremo due limiti: uno quando la finestra è normale (se windowArea è visibile) e un altro quando è ridotto a icona. Puoi farlo creando un rettangolo con le dimensioni dello stage. Il rettangolo supporta quattro attributi (x, y, larghezza, altezza). Inizia nell'angolo dello schermo (x: 0; y: 0) e si estende fino all'altro angolo dello schermo. Perché i limiti sono legati al punto di registrazione della finestra, dovremo sottrarre la larghezza e l'altezza della finestra (o il windowBarè nel caso in cui la finestra sia minimizzata).
Dopo che i limiti sono stati impostati, imposteremo la finestra per il trascinamento. Trascineremo Questo, la classe Window. In altre parole, l'intera finestra.
this.startDrag (false, boundsRect);
Il startDrag la funzione supporta due attributi: lockCenter e limiti. Se non vuoi limiti, scrivi questo:
this.startDrag (false);
Se abbiamo diverse finestre, sarà necessario portare la finestra corrente nella parte superiore del display. Lo facciamo con il addChild aggiungendolo di nuovo allo stage:
// porta la finestra in primo piano.addChild (this);
Questo è davvero semplice. Useremo il stopDrag funzione qui. Basta copiare quanto segue al tuo codice dopo il precedente onWindowStartDrag funzione:
/ * STOP DRAG ********************************************** ************ / funzione privata onWindowStopDrag (e: MouseEvent): void this.stopDrag ();
Ancora una volta, davvero semplice. Quando clicchiamo sulla finestra, lo porteremo in primo piano usando addChild.
/ * WINDOW CLICK ********************************************** ************ / funzione privata onWindowClick (e: MouseEvent): void // porta la finestra a front stage.addChild (this);
Per minimizzare / mostrare la finestra, commuteremo la visibilità del windowArea come questo:
/ * MINIMIZE WINDOW ********************************************** ************ / private function reduceWindow (e: MouseEvent): void windowArea.visible =! windowArea.visible;
Puoi migliorare questa situazione svanendo la finestra e nascondendola, e viceversa:
/ * MINIMIZE WINDOW ********************************************** ************ / private function reduceWindow (e: MouseEvent): void var fade: Tween; if (windowArea.visible) fade = new Tween (windowArea, "alpha", Strong.easeOut, 1, 0, 0.5, true); fade.addEventListener (TweenEvent.MOTION_FINISH, fadeFinish); else fade = new Tween (windowArea, "alpha", Strong.easeOut, 0, 1, 0.5, true); windowArea.visible =! windowArea.visible; fade.start (); function fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
Tween supporta i seguenti valori:
Tween (oggetto, "proprietà", EasingType, inizio, fine, durata, useSeconds);
Per una lettura più ampia, utilizzare i LiveDocs.
Nel nostro caso, quello che stiamo facendo è, se il windowArea è visibile (significato: non ridotto a icona), svanirà il windowArea e quando termina l'interpolazione (TweenEvent.MOTION_FINISH), nasconderà il windowArea. Viceversa se è minimizzato.
Useremo la variabile t cambiare il windowTitle. Le altre due righe servono solo a risolvere un problema di spaziatura delle lettere. Se non li scrivi, Flash ripristina la spaziatura delle lettere su zero.
/ * SET TITLE DI WINDOW ********************************************* ************* / public function Titolo (t: String): void var fmt: TextFormat = windowTitle.getTextFormat (); windowTitle.text = t; windowTitle.setTextFormat (FMT); // letter spacing issue title = t;
Questa funzione verrà utilizzata in seguito in questo modo:
Accentsconagua
YourWindowName.Title ("Nome della tua finestra"); Questa funzione riceverà due attributi: la larghezza e l'altezza della finestra. Se nessuno dei due è compilato, verrà impostato sulla dimensione predefinita (280x112 px)
Quello che facciamo qui è cambiare la larghezza del windowBar, il windowArea e il windowTitle. Per l'altezza cambiamo semplicemente il windowArea, lasciando l'altezza della finestra alle sue dimensioni predefinite, proprio come una normale finestra.
Durante il ridimensionamento dovremo ripristinare la posizione del pulsante Riduci a icona. Che è uguale alla larghezza della finestra meno la larghezza del pulsante e 6px.
/ * SET SIZE DI WINDOW ********************************************* ************* / funzione pubblica Dimensione (Larghezza: int = 280, Altezza: int = 112): void // modifica larghezza windowBar.width = Larghezza; windowArea.width = Larghezza; windowTitle.width = Width - 45; // cambia altezza del contenuto windowArea.height = Height; // reset minimBtn scale / position minimizzaBtn.x = Larghezza - minimizzaBtn.width - 6;
Questa funzione verrà utilizzata in seguito in questo modo:
YourWindowName.Size (350.200);
Ricordi quando abbiamo posizionato un'ombra esterna sotto la finestra? Bene, se si posiziona la finestra in base al codice, sarà necessario aggiungere anche l'ombra esterna per codice.
Tutti gli attributi di cui sopra possono essere impostati in base al codice. Copia la funzione e modifica i valori secondo i tuoi gusti:
/ * SET FILTER: DROP SHADOW ******************************************* *************** / funzione pubblica DropShadow (color: String = "333333"): void var dropShadow: DropShadowFilter = new DropShadowFilter (); dropShadow.blurX = 5; dropShadow.blurY = 5; dropShadow.strength = 1; dropShadow.quality = 1; // 1- basso; 2- media; 3- alto (max: 15) dropShadow.angle = 45; dropShadow.distance = 1; dropShadow.alpha = 1; dropShadow.knockout = false; dropShadow.inner = false; dropShadow.hideObject = false; dropShadow.color = int ("0x" + colore); this.filters = new Array (dropShadow); // aggiungi filtro alla finestra Questa funzione riceverà una stringa con il codice esadecimale del colore. Se questo non è riempito, il valore del colore predefinito sarà # 333333.
Il qualità può andare da 1 a 15, essendo 1 2 3 - basso, medio e alto. Abbiamo usato basso, qui.
Il colore deve essere convertito da a Stringa ad int.
Dopo aver definito gli attributi dobbiamo aggiungere il filtro alla finestra come nell'ultima riga. Questo creerà un schieramento di filtri. Il che significa che puoi aggiungere anche altri filtri alla finestra.
this.filters = new Array (dropShadow);
Questa funzione verrà utilizzata in seguito in questo modo:
YourWindowName.DropShadow ( "FF0000"); // aggiunge un'ombra rossa
Ora cambia nel tuo file Flash, crea un nuovo livello, chiamalo AS3 e premi F9 per ActionScript (o vai su Finestra> Azioni).
Aggiungere una finestra è molto semplice. Tutto quello che devi fare è creare una variabile (chiamiamola mywindow), assegnandolo al Finestra classe e l'aggiungere la finestra alla fase:
var myWindow: window = new window; addChild (mywindow);
Questo produrrà una finestra con i suoi valori predefiniti.
Puoi modificare diversi attributi della finestra:
Di nuovo, la prima cosa da fare è creare la variabile assegnata dalla classe Window:
var myWindow: window = new window;
Quindi puoi iniziare a cambiare gli attributi:
myWindow.Title ("Cabo Verde"); myWindow.DropShadow ( "66CC00"); // aggiunge una bella ombra di lime
myWindow.Size (350.200);
myWindow.x = 20; myWindow.y = 20;
addChild (mywindow);
Il codice tutto sarà così:
var myWindow: window = new window; myWindow.Title ("Cabo Verde"); myWindow.DropShadow ( "66CC00"); myWindow.Size (350.200); myWindow.x = 20; myWindow.y = 20; addChild (mywindow); 
Ecco un altro esempio con due finestre aggiunte dal codice e una predefinita nello stage:
var janela: window = new window; var janela02: window = new window; janela.Title ("Cabo Verde"); janela.DropShadow ( "66CC00"); janela.Size (350.200); janela.x = 20; janela.y = 20; janela02.Title ( "Ninjas!"); janela02.DropShadow ( "FF0000"); janela02.Size (250.200); janela02.x = 40; janela02.y = 150; addChild (Janela); addChild (janela02); 
Se hai bisogno di sapere il titolo della finestra, puoi usare questo:
trace (janela.title);
Ben fatto per aver seguito finora! Dovresti ora avere un risultato simile a quello che abbiamo visto all'inizio:
Se ti accorgi di questo, puoi modificare tutti gli attributi della finestra ma il contenuto rimane lo stesso. Quindi creiamo il contenuto.
Apri la Movie Clip di Windows, crea un nuovo livello per il contenuto e vai a Inserisci> Nuovo simbolo (CTRL + F8). Scegli Movie Movie, nominalo soddisfare e premi OK. Ora posizionalo su X: 0, Y: 22.
Seleziona il nuovo simbolo di contenuto appena creato e imposta il suo nome di istanza su SODDISFARE.
Fai doppio clic sul contenuto, assegna un nome al livello esistente soddisfare e creane un altro chiamato AS3. In quest'ultimo, premi F9 e scrivi:
Stop();
Questo sarà il nostro contenuto predefinito. Significato, niente!
Ora creane un altro fotogramma chiave e posizionare un'immagine per esempio. Ricorda le dimensioni della finestra che utilizzerai. Aggiungi un altro keyframe e scrivi del testo. Ora abbiamo 3 fotogrammi chiave: 1. nessun contenuto, 2. immagine, 3. testo.
Per quanto riguarda il codice, aggiungi questo al tuo file di classe:
/ * MODIFICA CONTENUTO ********************************************** ************ / funzione pubblica Contenuto (c: int): void CONTENT.gotoAndStop (c);
Davvero semplice Daremo semplicemente il keyframe a cui vorremmo andare.
Avrai anche bisogno di cambiare il minimizeWindow funzione a questo:
/ * MINIMIZE WINDOW ********************************************** ************ / private function reduceWindow (e: MouseEvent): void var fade: Tween; if (windowArea.visible) CONTENT.visible =! CONTENT.visible; fade = new Tween (windowArea, "alpha", Strong.easeOut, 1, 0, 0.5, true); fade.addEventListener (TweenEvent.MOTION_FINISH, fadeFinish); else fade = new Tween (windowArea, "alpha", Strong.easeOut, 0, 1, 0.5, true); windowArea.visible =! windowArea.visible; CONTENT.visible =! CONTENT.visible; fade.start (); function fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
Nell'esempio precedente, aggiungi questo al codice:
janela.Content (2); // va al fotogramma chiave dell'immagine
Ecco il codice completo:
var janela: window = new window; var janela02: window = new window; janela.Title ("Cabo Verde"); janela.DropShadow ( "66CC00"); janela.Size (350.240); janela.Content (2); // va al fotogramma chiave image janela.x = 20; janela.y = 20; janela02.Title ( "Ninjas!"); janela02.DropShadow ( "FF0000"); janela02.Size (250.200); janela02.Content (3); // va al keyframe del testo janela02.x = 40; janela02.y = 150; addChild (Janela); addChild (janela02); Quindi, c'è un modo semplice per creare una finestra trascinabile (molto simile a quella che vediamo su Windows). Se vuoi andare oltre, puoi modificare il contenuto MovieClip, aggiungere testo, pulsanti, immagini, ecc. Puoi aggiungere barre di scorrimento, chiamare il contenuto tramite XML o qualsiasi altra cosa tu possa pensare. Le possibilità sono infinite!
Ecco un altro fantastico esempio:
Questo è eXOTRik e spero che tu abbia trovato questo utile. È il mio primo tutorial, spero di portarvi altri trucchi ninja. Ayaaaa!
