Share
În timpul acestui tutorial vă voi conduce prin construirea unui cursor simplu care va defila un microsite personal. Vom folosi clasa GreenSock Timeline Lite și vom demonstra cât de ușor se poate face fluxul de lucru pentru animația Flash.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Din când în când, se produc schimbări în viața noastră, schimbări care ne obligă să re-gândim modul în care acționăm. Acest lucru este valabil mai ales în comunitatea noastră, unde ne confruntăm zilnic cu schimbări care pun la îndoială modul în care construim ceea ce construim.
Unele dintre aceste modificări sunt pentru cel mai rău lucru, ca pierderea suportului pentru webservice .php în Flash ide, dar cele mai multe dintre ele sunt spre bine, ca sfaturi de optimizare. Din când în când, cineva face o clasă care revoluționează modul în care ne gândim la Flash.
Ca papervision3d a fost pentru 3d, sau Box2D pentru fizică, există acum Cronologie pentru animație. Acest pachet simplu va schimba în cele din urmă modul în care structurați animația ActionScript, făcând posibilă crearea unui număr nelimitat de cronologie virtuală, complet dinamic, oferindu-vă un control deplin asupra animației dvs. Dacă nu, puteți să adăugați orice caracteristică de care aveți nevoie ca plugin.
Aceasta este cea mai dificilă parte a întregului tutorial ...
Mergeți la http://blog.greensock.com/timelinemax și descărcați o copie a platformei GreenSock tweening pentru AS3. Este un fișier zip, salvați-l pe unitatea hard disk, exportați totul într-un dosar și copiați dosarul "com" în rădăcina unde intenționați să utilizați clasa. Întregul lot este foarte bine documentat (după cum puteți vedea în dosarul docs) și aveți chiar și un vizualizator de ușurință.
În afară de folderul com, am creat o listă Main.as pentru a servi ca o clasă de documente și o TimelineMicrosite.fla pentru desenul UI. De asemenea, am copiat insigna-made-with-tweenmax-108x54.gif din dosarul cu insigne care a apărut în fișierul zip pe care l-am descărcat mai devreme.
Nu mă voi concentra pe cum să creez o interfață cu utilizatorul, deoarece acest lucru depinde de dvs. Cu toate acestea, vă voi oferi îndrumările pe care le-am urmat pentru a face acest microsite.
Începeți prin crearea a cinci straturi și denumirea lor: fundal, diapozitive, navigare, player și subsol.
Stratul de fundal conține un gradient simplu, nimic altceva. Stratul de diapozitive conține mai multe cartușe. Fiecare movieclip este o zonă a microsite-ului. În acest caz, acestea sunt home_mc, about_mc, works_mc și contacts_mc. Fiecare dintre ele a imortalizat filme cu nume de instanțe.
Stratul de navigație are un navigator_mc movieclip, în interiorul căruia există o selecție_mc. Structura sa este așa cum se arată în imaginea de mai jos.
Footer-ul este doar un import al insignei tweenmax. Iată arborele complet:
Știți cu toții cum se face acest lucru bine? În cazul în care ați uitat aici scheletul pentru o clasă de documente principale:
pachet public class Main extinde MovieClip funcția publică Main (): void
Dacă utilizați fdt, flash builder, eclipsa cu flex sdk sau flash se dezvoltă, probabil că le importați automat, dar dacă utilizați Flash ide pentru a codifica, pe lângă simpatia mea, va trebui să importați și:
pachet import flash.display.MovieClip; importul 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 extinde MovieClip funcția publică Main (): void
Doriți ca funcția dvs. de clasă principală să configureze scena pentru dvs..
funcția publică Main (): void // Aceasta va configura animația diapozitivelor setupSlides (); // Aceasta va seta navigarea diapozitivelor setupNavigation ();
Vom lucra cu aceste variabile:
// O matrice care va stoca diapozitivele pentru a accesa mai ușor galerii private var: Array; // Un număr care va stabili o marjă pentru diapozitivele private var offset: Number // O cronologie care va memora sliderul tweens private var slideline: TimelineMax // O cronologie care va stoca fiecare slide tween private var singlelines: TimelineMax; // Această cronologie grupează cronologia principală de animație și cronologia animațiilor unice de cronologie privată cronologie: TimelineMax;
Miezul microsite-ului. Eu folosesc 3 funcții de bază ale acestui motor, dar mai întâi imaginați cronologia ca și cum ar fi fost o cronologie reală.
privat setSlides (): void // populează diapozițiile diapozitivelor = array nou (home_mc, about_mc, works_mc, contacts_mc) // stabilește offset offset = 110 // instanțează linia temporală pentru diapozițiile principale slideline = new TimelineMax / instantiates cronologia pentru fiecare din diapozitivele singlelines = new TimelineMax (); // instatiates cronologia care va conține celelalte 2 linii temporale timeline = new TimelineMax (); var i: int = 0 în timp ce (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();
Avem nevoie doar de o variabilă, iar glisorul trebuie să știe cât de mult să alunece.
privat var scroll_amount: Număr;
Acum, vom seta valoarea scroll și vom asocia câteva ascultători unor funcții.
funcția privată setupNavigation (): void // stabilește valoarea de defilare scroll_amount = navigation_mc.width-navigation_mc.selection_mc.width navigation_mc.selection_mc.buttonMode = true // pe Mouse Down apeluri downHandler funcție navigation_mc.selection_mc.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); // acest ascultător este setat pe scenă în cazul în care trageți out stage.addEventListener (MouseEvent.MOUSE_UP, upHandler) // juca, întrerupe și derulați asociațiile de asistare a evenimentelor play_bt.addEventListener (MouseEvent.CLICK, playSlides) pause_bt.addEventListener (MouseEvent.CLICK , pauseSlides) rewind_bt.addEventListener (MouseEvent.CLICK, rewindSlides)
Aceasta este metoda care se numește atunci când mouse-ul este în jos peste dragger. Acționează ascultătorul de mutare a mouse-ului care îi spune diapozitivelor unde să meargă. De asemenea, elimină orice ascultător care este asociat cu playerul.
funcția privată downHandler (e: MouseEvent): void // asigură că actualizarea slider-ului este dezactivată înainte de ao face drababilă setUpdateSlider (false) // adaugă un ascultător mișcării mouse-ului, de fiecare dată când mouse-ul se mișcă, actualizează etapa de diapozitive de navigare. addEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) // începe tragerea glisorului navigation_mc.selection_mc.startDrag (false, nou dreptunghi (0, 0, scroll_amount, 0)); // Actualizare navigare 1 timp updateNavigationSlides (null)
Aceasta este metoda numită atunci când mouse-ul este în sus. Oprește pur și simplu trageți și îndepărtează ascultătorul.
funcția privată upHandler (e: MouseEvent): void // îndepărtează ascultătorul pe mișcările mouse-ului stage.removeEventListener (MouseEvent.MOUSE_MOVE, updateNavigationSlides) // oprește navigarea navigation_mc.selection_mc.stopDrag ()
Îmi place cum pot să "dau și să opresc" la o etichetă sau la un moment dat într-o linie de timp complet virtual:
funcția privată updateNavigationSlides (e: MouseEvent): void // merge la acea parte în timp, // calculul este o fracțiune proporțională simplă între poziția x a selecției și durata cronologică curentă timeline.gotoAndStop (navigation_mc.selection_mc.x * timeline.totalDuration / scroll_amount)
Folosirea animației ActionScript ca video este la fel de ușoară ca setarea unui interval de timp și apelul de redare (), pauză () sau inversă ().
// setează cursorul pentru a fi actualizat și reia funcția privată tween playSlides (e: MouseEvent): void timeline.timeScale = 1 timeline.play (); setUpdateSlider (true) // elimină cursorul pentru a fi actualizat și întrerupe funcția privată pauseSlides (e: MouseEvent): void setUpdateSlider (false) // stabilește intervalul de timp și inversează funcția privată twin rewindSlides (e: MouseEvent) timeline.timeScale = 5 timeline.reverse (); setUpdateSlider (true)
Deoarece există două metode de navigare pe acest microsite, trebuie să ne asigurăm că nu influențează celălalt, ceea ce ar putea provoca bug-uri mai târziu. Așadar, trebuie să setăm un setter mic pentru a identifica dacă va actualiza cursorul sau nu în funcție de animația cronologică, în loc de opusul. Pentru asta vom crea un setUpdateSlider
funcția privată setUpdateSlider (bool: boolean) // caz fals, verifică dacă există un ascultător, dacă pauză reală animație și elimină tween dacă (timeline.hasEventListener (TweenEvent.UPDATE) && bool == false) timeline.pause () timeline.removeEventListener (TweenEvent.UPDATE, updateNavigationSlider) // caz adevărat, verifică dacă există un ascultător dacă animația falsă se joacă dacă (! timeline.hasEventListener (TweenEvent.UPDATE) && bool == true) timeline. relua(); timeline.addEventListener (TweenEvent.UPDATE, updateNavigationSlider)
Această funcție se numește de fiecare dată când se actualizează un eveniment tween
funcția privată updateNavigationSlider (e: TweenEvent): void // face exact același lucru cu updateNavigationSlides, dar inversează fracția astfel încât să actualizeze poziția select_mc navigation_mc.selection_mc.x = timeline.currentTime * scroll_amount / timeline.totalDuration
Această funcție se numește de fiecare dată când se actualizează un eveniment tween:
pachet import flash.display.MovieClip; importul 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 extinde MovieClip functie publica Main (): void // Aceasta va seta animatia diapozitivelor setSlides (); // Aceasta va seta navigarea diapozitivelor setupNavigation (); //////////////// SLIDES //////////////// // O matrice care va stoca diapozitivele pentru accesarea mai usoara a ferestrelor private var : Array; // Un număr care va stabili o marjă pentru diapozitivele private var offset: Number // O cronologie care va memora sliderul tweens private var slideline: TimelineMax // O cronologie care va stoca fiecare slide tween private var singlelines: TimelineMax; // Această cronologie grupează cronologia principală de animație și cronologia animațiilor unice de cronologie privată cronologie: TimelineMax; privat setSlides (): void // populează diapozițiile diapozitivelor = array nou (home_mc, about_mc, works_mc, contacts_mc) // stabilește offset offset = 110 // instanțează linia temporală pentru diapozițiile principale slideline = new TimelineMax / instantiates cronologia pentru fiecare din diapozitivele singlelines = new TimelineMax (); // instaciates cronologia care va conține celelalte 2 cronologii timeline = new TimelineMax (); var i: int = 0 în timp ce (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
Fii Timeline Lite sau Timeline Max, construirea de experiențe grafice interactive cu ele este foarte ușor.
Acest tutorial doar zgârie suprafața a ceea ce poate face clasa. Ea are un flux de lucru foarte flexibil, eu lucrez încă în felul meu, dar vă asigur că după ce ați jucat cu această clasă și ați realizat cum să gândiți cu ea, veți înțelege hype-ul meu.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
Accentsconagua