Share
Durante questo tutorial ti mostrerò come creare un semplice cursore che farà scorrere un microsito personale. Utilizzeremo la classe GreenSock Timeline Lite e dimostreremo quanto sia semplice per il flusso di lavoro di animazione Flash.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Di volta in volta, i cambiamenti accadono nelle nostre vite, cambiamenti che ci costringono a ripensare il modo in cui agiamo. Questo è particolarmente vero nella nostra comunità, in cui ogni giorno ci troviamo di fronte a cambiamenti che mettono in discussione il modo in cui costruiamo ciò che costruiamo.
Alcuni di questi cambiamenti sono pessimi, come perdere il supporto per i servizi Web. Php in Flash ide, ma la maggior parte di essi sono in meglio, come l'ottimizzazione dei suggerimenti. Una volta ogni tanto qualcuno fa una lezione che rivoluziona il modo in cui pensiamo a Flash.
Piace Papervision3D era per 3d, o box2d per la fisica, c'è ora Sequenza temporale per l'animazione. Questo semplice pacchetto alla fine cambierà il modo di strutturare l'animazione di ActionScript, rendendo possibile la creazione di una quantità infinita di timeline virtuali, completamente dinamicamente, per un controllo totale dell'animazione. In caso contrario, puoi semplicemente aggiungere qualsiasi funzionalità di cui hai bisogno come plug-in.
Questa è la parte più difficile dell'intero tutorial ...
Basta andare su http://blog.greensock.com/timelinemax e scaricare una copia della piattaforma di tweening GreenSock per AS3. È un file zip, salvarlo sul disco rigido, esportarlo tutto in una cartella e copiare la cartella "com" nella directory principale di dove si intende utilizzare la classe. L'intero lotto è molto ben documentato (come puoi vedere nella cartella dei documenti) e hai anche un semplice visualizzatore.
Oltre alla cartella com ho creato un Main.as per servire come una classe di documento e un TimelineMicrosite.fla per il disegno dell'interfaccia utente. Ho anche copiato badge-made-with-tweenmax-108x54.gif dalla cartella badges che è arrivata nel file zip che abbiamo scaricato in precedenza.
Non mi concentrerò su come creare un'interfaccia utente, poiché questo dipende completamente da te. Tuttavia, ti fornirò le linee guida che ho seguito per realizzare questo microsito.
Inizia creando cinque livelli e nominali: sfondo, diapositive, navigazione, lettore e piè di pagina.
Il livello di sfondo contiene un gradiente semplice, nient'altro. Il livello delle diapositive contiene diversi Movie Clip. Ogni Movie Clip è un'area del microsito. In questo caso sono home_mc, about_mc, works_mc e contacts_mc. Ognuno di essi ha filmati animati nidificati con nomi di istanze.
Il livello di navigazione ha un clip di navigazione navigation_mc, all'interno del quale c'è un selection_mc. La sua struttura è come mostrato nell'immagine qui sotto.
Il piè di pagina è solo un'importazione del badge tweenmax. Ecco l'albero completo:
Sapete tutti come va fatto? Nel caso in cui hai dimenticato ecco lo scheletro per una classe di documento principale:
pacchetto public class Main estende MovieClip public function Main (): void
Se stai usando fdt, flash builder, eclipse con flex sdk o flash sviluppato, probabilmente li importi automaticamente, ma se stai usando il Flash ide per codificare, allora oltre alla mia simpatia dovrai anche importare:
package import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import com.greensock.TweenLite; import com.greensock.TimelineMax; import com.greensock.events.TweenEvent; import com.greensock.easing.Linear; public class Main estende MovieClip public function Main (): void
Vuoi che la tua funzione principale della classe configuri la scena per te.
public function Main (): void // Questo imposterà l'animazione delle slides setupSlides (); // Questo imposterà le slides navigation setupNavigation ();
Lavoreremo con queste variabili:
// Un array che memorizzerà le diapositive per facilitare le diapositive var private: Array; // Un numero che imposterà un margine per le diapositive private var offset: Number // Una timeline che memorizzerà le diapositive delle interpolazioni private var slideline: TimelineMax // Una timeline che memorizzerà ogni diapositiva tra le var singleline private: TimelineMax; // Questa timeline raggruppa la linea temporale dell'animazione principale e la timeline delle animazioni singole diapositive timeline privata: TimelineMax;
Il nucleo del microsito. Io uso 3 funzioni base di questo motore, ma prima immagino la timeline come se fosse una vera timeline.
funzione privata setupSlides (): void // popola le diapositive slides = new Array (home_mc, about_mc, works_mc, contacts_mc) // imposta l'offset offset = 110 // istanzia la timeline per le diapositive principali slideline = new TimelineMax () / / istanzia la timeline per ciascuna delle slide singlelines = new TimelineMax (); // instace la sequenza temporale che conterrà le altre 2 timeline timeline = new TimelineMax (); var i: int = 0 while (i < slides.length) //sets an index so i know in wich position the current slide is slides[i].index = i //aligns the slides slides[i].x = i * 650 + offset //creates the tweens and appends them to a timeline slideline.insert(TweenLite.to(slides[i], 3, x:slides[i].x - 650*3,ease:Linear.easeNone )) //increments the i for the next loop i++ //initial states home_mc.text_mc.alpha = 0 home_mc.image_mc.alpha = 0 about_mc.text_mc.alpha = 0 works_mc.text_mc.alpha = 0 works_mc.image1_mc.alpha = 0 works_mc.image2_mc.alpha = 0 works_mc.image3_mc.alpha = 0 contacts_mc.text_mc.alpha = 0 //sequencing the animations singlelines.append(TweenLite.to(home_mc.text_mc, 0.2, alpha:1 )) singlelines.append(TweenLite.to(home_mc.image_mc, 0.2, alpha:1 ), -0.1) singlelines.append(TweenLite.to(about_mc.text_mc, 0.2, alpha:1 ), 0.5) singlelines.append(TweenLite.to(works_mc.text_mc, 0.2, alpha:1 ),0.15) singlelines.append(TweenLite.to(works_mc.image1_mc, 0.2, alpha:1 ), 0.05) singlelines.append(TweenLite.to(works_mc.image2_mc, 0.2, alpha:1 ), 0.05) singlelines.append(TweenLite.to(works_mc.image3_mc, 0.2, alpha:1 ), 0.05) singlelines.append(TweenLite.to(contacts_mc.text_mc, 0.2, alpha:1 ),0.55) //makes both timelines active at the same time. timeline.appendMultiple([slideline, singlelines]); //starts timeline paused timeline.pause();
Abbiamo solo bisogno di una variabile, ed è per il cursore sapere quanto scivolare.
private var scroll_amount: Number;
Ora impostiamo lo scroll_amount e associamo alcuni listener ad alcune funzioni.
funzione privata setupNavigation (): void // imposta la quantità di scroll scroll_amount = navigation_mc.width-navigation_mc.selection_mc.width navigation_mc.selection_mc.buttonMode = true // su Mouse Down chiama downHandler function navigation_mc.selection_mc.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); // questo listener è impostato sul palco nel caso in cui si trascini stage.addEventListener (MouseEvent.MOUSE_UP, upHandler) // riproduce, mette in pausa e riavvolge le associazioni del gestore di eventi play_bt.addEventListener (MouseEvent.CLICK, playSlides) pause_bt.addEventListener (MouseEvent.CLICK , pauseSlides) rewind_bt.addEventListener (MouseEvent.CLICK, rewindSlides)
Questo è il metodo che viene chiamato quando il mouse è giù sopra il trascinatore. Attiva l'ascoltatore della mossa del mouse che dice alle diapositive dove andare. Rimuove anche qualsiasi ascoltatore associato al giocatore.
funzione privata downHandler (e: MouseEvent): void // si assicura che l'aggiornamento del cursore sia disattivato prima di renderlo trascinabile setUpdateSlider (false) // aggiunge un listener al movimento del mouse così ogni volta che il mouse lo sposta aggiorna lo stage delle diapositive di navigazione. addEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) // avvia il trascinamento del cursore navigation_mc.selection_mc.startDrag (false, new Rectangle (0, 0, scroll_amount, 0)); // aggiorna la navigazione 1 volta updateNavigationSlides (null)
Questo è il metodo che viene chiamato quando il mouse è attivo. Interrompe semplicemente il trascinamento e rimuove l'ascoltatore.
funzione privata upHandler (e: MouseEvent): void // rimuove il listener sui movimenti del mouse stage.removeEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) // interrompe il trascinamento navigation_mc.selection_mc.stopDrag ()
Mi piace come posso "andare e fermarmi" su un'etichetta o su un tempo in una timeline completamente virtuale:
funzione privata updateNavigationSlides (e: MouseEvent): void // passa a quella parte nel tempo, // il calcolo è una frazione di proporzione semplice tra la posizione x della selezione e la durata della timeline corrente timeline.gotoAndStop (navigation_mc.selection_mc.x * timeline.totalDuration / scroll_amount
Usare l'animazione di ActionScript come video è facile come impostare una scala cronologica e chiamare play (), pause () o reverse ().
// imposta il dispositivo di scorrimento in modo che venga aggiornato e riattiva la funzione privata playSlides (e: MouseEvent): void timeline.timeScale = 1 timeline.play (); setUpdateSlider (true) // rimuove il cursore da aggiornare e sospende la funzione privata pauseSlides (e: MouseEvent): void setUpdateSlider (false) // imposta la scala cronologica e inverte la funzione privata tween rewindSlides (e: MouseEvent): void timeline.timeScale = 5 timeline.reverse (); setUpdateSlider (true)
Dato che ci sono due metodi per navigare in questo microsito, dobbiamo assicurarci che uno non influisca sull'altro, che potrebbe causare bug in seguito. Quindi abbiamo bisogno di impostare un piccolo setter per identificare se aggiornerà il cursore o meno secondo l'animazione della timeline, invece del contrario. Per questo creiamo un setUpdateSlider
funzione privata setUpdateSlider (bool: Boolean) // caso false, controlla se c'è un listener, se true mette in pausa l'animazione e rimuove l'interpolazione if (timeline.hasEventListener (TweenEvent.UPDATE) && bool == false) timeline.pause () timeline.removeEventListener (TweenEvent.UPDATE, updateNavigationSlider) // caso true, controlla se c'è un listener, se false riproduce l'animazione if (! timeline.hasEventListener (TweenEvent.UPDATE) && bool == true) timeline. curriculum vitae(); timeline.addEventListener (TweenEvent.UPDATE, updateNavigationSlider)
Questa funzione viene chiamata ogni volta che si aggiorna un evento interpolato
funzione privata updateNavigationSlider (e: TweenEvent): void // fa esattamente la stessa cosa di updateNavigationSlides, ma inverte la frazione in modo tale che aggiorni la posizione selection_mc navigation_mc.selection_mc.x = timeline.currentTime * scroll_amount / timeline.totalDuration
Questa funzione viene chiamata ogni volta che si aggiorna un evento interpolato:
package import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import com.greensock.TweenLite; import com.greensock.TimelineMax; import com.greensock.events.TweenEvent; import com.greensock.easing.Linear; public class Main extends MovieClip public function Main (): void // Questo imposterà l'animazione delle slides setupSlides (); // Questo imposterà le slides navigation setupNavigation (); //////////////// SLIDES ///////////////// // Un array che memorizzerà le diapositive per facilitare le diapositive private var di accesso : Array; // Un numero che imposterà un margine per le diapositive private var offset: Number // Una timeline che memorizzerà le diapositive delle interpolazioni private var slideline: TimelineMax // Una timeline che memorizzerà ogni diapositiva tra le var singleline private: TimelineMax; // Questa timeline raggruppa la linea temporale dell'animazione principale e la timeline delle animazioni singole diapositive timeline privata: TimelineMax; funzione privata setupSlides (): void // popola le diapositive slides = new Array (home_mc, about_mc, works_mc, contacts_mc) // imposta l'offset offset = 110 // istanzia la timeline per le diapositive principali slideline = new TimelineMax () / / istanzia la timeline per ciascuna delle slide singlelines = new TimelineMax (); // instace la linea temporale che conterrà le altre 2 timeline timeline = new TimelineMax (); var i: int = 0 while (i < slides.length) //sets an index so i know in wich position the current slide is slides[i].index = i //aligns the slides slides[i].x = i * 650 + offset //creates the tweens and appends them to a timeline slideline.insert(TweenLite.to(slides[i], 3, x:slides[i].x - 650*3,ease:Linear.easeNone )) //pauses the slideline so it won't start automatically //increments the i for the next loop i++ //initial states home_mc.text_mc.alpha = 0 home_mc.image_mc.alpha = 0 about_mc.text_mc.alpha = 0 works_mc.text_mc.alpha = 0 works_mc.image1_mc.alpha = 0 works_mc.image2_mc.alpha = 0 works_mc.image3_mc.alpha = 0 contacts_mc.text_mc.alpha = 0 //sequencing the animations singlelines.append(TweenLite.to(home_mc.text_mc, 0.2, alpha:1 )) singlelines.append(TweenLite.to(home_mc.image_mc, 0.2, alpha:1 ), -0.1) singlelines.append(TweenLite.to(about_mc.text_mc, 0.2, alpha:1 ), 0.5) singlelines.append(TweenLite.to(works_mc.text_mc, 0.2, alpha:1 ),0.15) singlelines.append(TweenLite.to(works_mc.image1_mc, 0.2, alpha:1 ), 0.05) singlelines.append(TweenLite.to(works_mc.image2_mc, 0.2, alpha:1 ), 0.05) singlelines.append(TweenLite.to(works_mc.image3_mc, 0.2, alpha:1 ), 0.05) singlelines.append(TweenLite.to(contacts_mc.text_mc, 0.2, alpha:1 ),0.55) timeline.appendMultiple([slideline, singlelines]); timeline.pause(); private function gotoLabel(label:String):void slideline.tweenTo(label,ease:Linear.easeInOut); //////////////////NAVIGATION///////////////////// private var scroll_amount:Number; private function setupNavigation():void //sets the scroll ammount scroll_amount = navigation_mc.width-navigation_mc.selection_mc.width navigation_mc.selection_mc.buttonMode = true //on Mouse Down calls downHandler function navigation_mc.selection_mc.addEventListener(MouseEvent.MOUSE_DOWN, downHandler); //this listener is set on stage in case you drag out stage.addEventListener(MouseEvent.MOUSE_UP, upHandler) //play, pause and rewind event handler associations play_bt.addEventListener(MouseEvent.CLICK, playSlides) pause_bt.addEventListener(MouseEvent.CLICK, pauseSlides) rewind_bt.addEventListener(MouseEvent.CLICK, rewindSlides) private function downHandler(e:MouseEvent):void //makes sure that the slider update is off before making it draggable setUpdateSlider(false) //adds a listener to mouse movement so every time the mouse moves it updates the navigation slides stage.addEventListener(MouseEvent.MOUSE_MOVE, updateNavigationSlides) //starts drag of the slider navigation_mc.selection_mc.startDrag(false, new Rectangle(0, 0, scroll_amount, 0)); //updates navigation 1 time updateNavigationSlides(null) private function upHandler(e:MouseEvent):void //removes the listener on mouse movements stage.removeEventListener(MouseEvent.MOUSE_MOVE, updateNavigationSlides) //stops the drag navigation_mc.selection_mc.stopDrag() private function updateNavigationSlides(e:MouseEvent):void //goes to that part in time, the calculation is a simple proportion fraction between the x position of the selection and the current timeline duration timeline.gotoAndStop(navigation_mc.selection_mc.x*timeline.totalDuration/scroll_amount) //sets slider to be updated and resumes tween private function playSlides(e:MouseEvent):void timeline.timeScale = 1 timeline.play(); setUpdateSlider(true) //removes slider to be updated and pauses tween private function pauseSlides(e:MouseEvent):void setUpdateSlider(false) //sets the timescale and reverses the tween private function rewindSlides(e:MouseEvent):void timeline.timeScale = 5 timeline.reverse(); setUpdateSlider(true) private function setUpdateSlider(bool:Boolean) //case false, checks to see if there is a listener, if true pauses animation and removes tween if (timeline.hasEventListener(TweenEvent.UPDATE) && bool == false) timeline.pause() timeline.removeEventListener(TweenEvent.UPDATE,updateNavigationSlider) //case true, checks to see if there's a listener, if false plays animation if (!timeline.hasEventListener(TweenEvent.UPDATE) && bool == true) timeline.resume(); timeline.addEventListener(TweenEvent.UPDATE,updateNavigationSlider) private function updateNavigationSlider(e:TweenEvent):void //does exactly the same as updateNavigationSlides, but inverts the fraction so that updates the selection_mc position navigation_mc.selection_mc.x=timeline.currentTime*scroll_amount/timeline.totalDuration
Sia che si tratti di Timeline Lite, o di Timeline Max, la creazione di esperienze di motion graphic interattive con loro è davvero facile.
Questo tutorial graffia solo la superficie di ciò che la classe può fare. Ha un flusso di lavoro molto flessibile, sto ancora lavorando su di esso, ma ti assicuro che dopo aver giocato con questo corso e aver capito come pensarlo, capirai il mio hype.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Accentsconagua