Share
In questo tutorial, ricreamo il Flip Effect utilizzato nell'interfaccia utente di iPhone utilizzando Flash CS4 e ActionScript 3.0.
Diamo un'occhiata al risultato finale su cui lavoreremo (fai clic sul pulsante "i"):
Ecco in pratica cosa faremo. Avremo bisogno di due oggetti di visualizzazione da lanciare, uno davanti che sarà sul palco e visibile all'inizio, e uno che riveleremo quando l'effetto sarà finito; questo oggetto sarà nella libreria. In questo esempio sto usando MovieClip, ma puoi usare uno qualsiasi degli oggetti di visualizzazione (pulsante, componente, bitmap, sprite, forma, ecc.).
Creeremo una classe ActionsScript 3 per l'effetto, quindi un codice nel file .fla per personalizzare l'effetto come vogliamo.
Creare un nuovo documento ActionScript 3.0 (File> Nuovo ...). Potrebbe essere necessario utilizzare la versione di Flash CS4; stiamo andando ad esportare per Flash Player 10 a causa del rotationY proprietà che non è disponibile nelle versioni precedenti. Ci sono alcuni trucchi per fare in modo che Flash CS3 esporti i contenuti di Player 10, puoi fare ricerche sul Web se non hai CS4.
Imposta la dimensione dello stage su 320 x 480 pixel (è la risoluzione dell'iPhone ma puoi utilizzare qualsiasi dimensione desiderata), quindi imposta un colore di sfondo. Sto usando # 111111.
Rinominare il primo livello in UI, quindi creane un altro e nominalo Codice. Blocca il Codice strato per evitare di posizionare oggetti indesiderati su di esso.
Inizia a creare la tua prima vista. Questa è la vista che verrà vista di default, è possibile utilizzare e disegnare tutto ciò che si desidera.
Convertirlo in MovieClip (F8) e impostarne il nome istanza FirstView.
Crea la seconda vista. Questa è la vista che sarà visibile quando l'effetto è finito.
Convertilo in MovieClip, chiamalo SecondView e controllare il Esporta per ActionScript checkbox (ricorda che questa vista non sarà sul palco, la chiameremo dal pannello delle azioni).
Ora dobbiamo creare un oggetto che attiva l'effetto; un pulsante farà il lavoro. Crea un pulsante, imposta la sua posizione e nominalo infoButton. Questo pulsante sarà nella prima vista. Nel mio esempio ho creato il pulsante dentro il Movie Clip FirstView. Puoi metterlo dove vuoi, basta ricordare dove si trova in modo da non confonderlo nel codice.
Nella seconda vista, crea un altro pulsante e nominalo DoneButton. Questo pulsante capovolgerà la vista.
Salva il tuo lavoro e entriamo nel codice!
Suppongo che tu abbia già una conoscenza di base di ActionScript 3.0. Se hai dubbi specifici sulle parole chiave, consulta la Guida di Flash.
Creare un nuovo file ActionScript (File> Nuovo ...).
Ora che hai pronto il tuo file AS, inizia a scrivere:
pacchetto Classes / * Importa classi richieste per l'animazione * / import fl.transitions.Tween; importare fl.transitions.TweenEvent; importare fl.transitions.easing.Strong; / * Importa classi richieste * / importa flash.display. *; import flash.utils.Timer; import flash.events. *;
Le prime tre classi gestiscono tutte le animazioni che useremo sull'effetto. In questo caso, sto usando un forte easing per ottenere un flip di tipo iPhone, ma puoi modificarlo per ottenere un effetto diverso.
Le altre tre classi gestiscono gli elementi di visualizzazione, l'oggetto Timer che useremo per controllare l'avanzamento dell'animazione e l'ultimo gestisce gli eventi che possiamo usare.
// Abbiamo bisogno di estendere la classe in modo che possiamo usare il metodo addChild (). public class Flip estende Sprite
Estendere la classe Sprite farà sì che la nostra classe erediti tutti i metodi, le proprietà e le funzioni di Sprite. In questo caso lo usiamo per ottenere l'accesso al metodo addChild ().
private var firstView: DisplayObject; private var secondView: DisplayObject; private var initFromSide: String; durata var privata: int; private var flipTween: Tween; private var addSecondView: Boolean; // Questo è usato quando Second View è già sul palco e non nella Library, per ogni evenienza. Var privata aggiunta: booleano = falso; timer var privato: Timer = new Timer (1);
Dichiarare le variabili da usare al di fuori della funzione principale (flip), ottengono i loro valori dalla 'funzione costruttore' e hanno nomi auto-esplicativi.
La funzione di costruzione rappresenta la classe contenente il modello da cui vengono create le nuove istanze di oggetto. Questa è la funzione che dobbiamo usare per chiamare la classe.
/ * Funzione di avvio flip, con alcuni parametri in modo da poter personalizzare il tuo Flip come vuoi, ricorda che sono uguali alle variabili * / funzione pubblica Flip (frontObject: DisplayObject, backObject: DisplayObject, timeInSeconds: int, flipFromSide: String, secondViewIsInLibrary : Boolean): void firstView = frontObject; secondView = backObject; duration = timeInSeconds; initFromSide = flipFromSide; addSecondView = secondViewIsInLibrary; animateFirstView (); // Questa funzione anima la prima parte del flip. timer.addEventListener (TimerEvent.TIMER, checkFlip); // Controlliamo se è il momento di animare la Seconda visualizzazione
funzione privata animateFirstView (): void flipTween = new Tween (firstView, "scaleX", Strong.easeIn, 1,0.5, duration / 2, true); // Queste linee sono responsabili dell'animazione della scala, flipTween = new Tween (firstView, "scaleY", Strong.easeIn, 1,0.5, duration / 2, true); // Riduce la visualizzazione alla metà della sua dimensione se (initFromSide == "left") // Se l'animazione inizia da a sinistra, ci animiamo da sinistra! flipTween = new Tween (firstView, "rotationY", Strong.easeIn, 0,90, duration / 2, true); // Questa è una linea chiave, modifica la proprietà rotationY per eseguire il flip timer.start (); // Iniziamo il timer per controllare quando possiamo cambiare i MovieClip altro se (initFromSide == "right") flipTween = new Tween (firstView, "rotationY", Strong.easeIn, 0, -90, duration / 2, vero); timer.start ();
Questa funzione ha il compito di animare la prima vista. Riduce la dimensione della prima vista e controlla il lato parametro per avviare l'animazione.
Questa funzione controllerà la proprietà rotationY per controllare l'animazione della seconda vista.
funzione privata checkFlip (e: TimerEvent): void if (initFromSide == "left" && firstView.rotationY> = 90) // Se l'animazione è stata avviata da sinistra e la prima vista è pronta per passare timer.stop () ; // Interrompiamo il controllo quando si cambiano le visualizzazioni firstView.visible = false; // Nasconde la prima vista se (addSecondView &&! Added) // Se la seconda vista deve essere aggiunta dalla libreria e non è stata aggiunta secondView.x = firstView.x; // Imposta la seconda vista posizione secondView.y = firstView.y; addChild (secondView); // Aggiungi seconda vista added = true; // Set aggiunto a true per evitare l'aggiunta di molte seconde viste else / * Se Second View è in stage * / secondView.x = firstView.x; secondView.y = firstView.y; animateSecondView (); // Animate Second View, allo stesso modo in cui il primo è animato, nasconde la Second View e mostra la First View quando finito else if (initFromSide == "right" && firstView.rotationY <= -90) timer.stop(); firstView.visible = false; if (addSecondView && ! added) secondView.x = firstView.x; secondView.y = firstView.y; addChild(secondView); added = true; else /* If Second View is in stage */ secondView.x = firstView.x; secondView.y = firstView.y; animateSecondView();
Questa funzione anima la seconda vista. È quasi la stessa della prima funzione di animazione.
funzione privata animateSecondView (): void flipTween = new Tween (secondView, "scaleX", Strong.easeOut, 0.5,1, duration / 2, true); flipTween = new Tween (secondView, "scaleY", Strong.easeOut, 0.5,1, duration / 2, true); if (initFromSide == "left") flipTween = new Tween (secondView, "rotationY", Strong.easeOut, -90,0, duration / 2, true); firstView.visible = true; else if (initFromSide == "right") flipTween = new Tween (secondView, "rotationY", Strong.easeOut, 90,0, duration / 2, true); firstView.visible = true;
Salva il tuo file ActionScript come "Flip.as".
Nel file Flash, apri il pannello Azioni e scrivi:
import Classes.Flip; // Importa la classe, devi cambiare 'Classes' con la tua cartella delle classi. var flipped: Boolean = false; // Usiamo questa variabile per sapere se la prima vista era già capovolta. var secondView: SecondView = new SecondView (); // Crea un oggetto SecondView, quello nella libreria var flip: Flip; // Questa è un'istanza della nostra funzione di classe Flip callFlip (e: MouseEvent): void if (! Capovolto) // Se il FirstView non è già capovolto firstView.infoButton.visible = false; // Nasconde il pulsante in modo che l'utente non possa ripetere l'effetto quando si gira. flip = new Flip (firstView, secondView, 2, "left", true); // Questa è la linea principale, chiama la classe che indica che i MovieClip capovolgono, il tempo che l'effetto avrà, da quale parte iniziare e se il secondo MovieClip è nella Libreria. addChild (vibrazione); // Dobbiamo aggiungere la classe per far funzionare il metodo addChild (), questo è un problema molto comune quando si utilizza addChild () all'interno di una classe, ora lo sai! ;) capovolto = vero; // Imposta capovolto su true per sapere che la prima vista era già animata secondView.doneButton.visible = true; // Scopri i pulsanti in modo che possiamo usarli di nuovo secondView.buttonBar.visible = true; // Questa è solo la barra superiore nella seconda vista else if (capovolto) // Se capovolto è vero è il momento di capovolgere la seconda vista, è possibile impostare nuovi parametri per ottenere un'animazione totalmente diversa! secondView.doneButton.visible = false; flip = new Flip (secondView, firstView, 2, "right", true); addChild (vibrazione); capovolto = falso; firstView.infoButton.visible = true; secondView.buttonBar.visible = false; firstView.infoButton.addEventListener (MouseEvent.MOUSE_DOWN, callFlip); // Aggiunge i listener ai pulsanti secondView.doneButton.addEventListener (MouseEvent.MOUSE_DOWN, callFlip);
Salva il tuo lavoro e controlla che tutto vada bene. Dai un'occhiata ai nomi delle istanze, verifica il tuo codice, cerca errori o addirittura altera la grafica.
Metti alla prova il tuo film per vedere questo fantastico effetto in azione!
Assicurati che tutto funzioni come ti aspettavi; se non torni al codice o al .fla per dare un'occhiata. Se non riesci a trovare l'errore, puoi eseguire il debug del filmato premendo Maiusc + Comando + Ritorno o passando a Debug> Debug filmato.
Ricorda: hai molte opzioni per rendere l'effetto proprio come vuoi. Gioca con i parametri, gli oggetti di visualizzazione e se c'è qualcosa che pensi manchi, puoi sempre modificare la classe!
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Accentsconagua