Share
În timpul acestui tutorial Basix vom învăța cum să adăugăm caracteristicile finale la proiectul nostru Flash Catalyst existent. Ne vom uita la interacțiunea netedă între pagini, acțiuni suplimentare de mutare, sunete și video. Ca și în tutorialul anterior, nu este necesar niciun cod!
Notă: puteți să vă salvați Proiectul Flash Catalyst în orice moment și apoi să continuați atunci când vă este confortabil. Pentru a face acest lucru mergeți la File> Save As ... dați proiectului un nume și salvați-l într-un director corespunzător.
Verificați rezultatul final pe care intenționăm să-l realizăm. Prin acoperirea principiilor Catalyst vom învăța cum să creăm tranziții netede ale paginii, să aplicăm animație 3D, să adăugăm sunet la butoanele noastre și să adăugăm și niște videoclipuri.
Deschideți Adobe Flash Catalyst. În fereastra de pornire, selectați Deschidere proiect> Fișier descărcat. Selectați Galaxy2.fxp, pe care îl puteți obține de la sursa de descărcare din partea de sus a paginii.
Deschideți panoul Timeline făcând dublu clic pe numele său. Ne sunt prezentate toate interacțiunile posibile între pagini:
Dacă doriți să vedeți interacțiunile cu o anumită pagină, scrieți-o în fereastra de căutare:
Puteți face acest lucru și cu meniul drop-down:
Acum să acoperi câteva lucruri cu privire la cronologia însăși. Aici avem 5 puncte importante:
Ok, acum sunteți familiarizați cu cronologia, astfel încât să putem adăuga o animație pe paginile noastre. Să începem cu tranziția dintre pagina principală și pagina Photoshop. În panoul Cronologie cu Photoshop Layer selectat (dacă este selectat, veți vedea umplerea albastră), faceți clic pe săgeata de lângă butonul Smooth Transition:
Aici vedem meniul care ne permite să setăm anumiți parametri. Durata este durata animației; Am hotarat sa-l las la 1 sec si pentru Timing am folosit optiunea "Smart Smoothing". Nu avem nevoie de "Simultaneous" deoarece aplicăm doar animație unui singur strat. Și, bineînțeles, nu este nevoie să suprascriem nimic, așa că lăsați câmpul de marcare necompletat.
Am aplicat o tranziție netedă la una dintre pagini. Să ne uităm la imagine și să vedem ce sa schimbat:
Mai întâi puteți examina efectul pe care l-am setat utilizând butonul Redare. Aici puteți vedea că acum avem o linie solidă albastră cu cuvintele "Fade In" din interior. Aceasta înseamnă că am aplicat animația în Photoshop Layer. Faceți clic pe linia solidă albastră și examinați panoul Proprietăți:
Vedem că spune Fade în partea de sus; aceasta indică numele efectului aplicat. Avem câteva opțiuni suplimentare: opacitatea este setată la Auto, dar dacă doriți să o ajustați singură, debifați marcajul de selectare și setați propriii parametri în "De la" și "La". De asemenea, puteți vedea că putem schimba durata și chiar seta timpul de întârziere pentru efect. Relaxarea este o altă opțiune importantă, mai ales dacă sunteți familiarizat cu Flash Professional. O voi lăsa în mod implicit, dar nu ezitați să experimentați cu asta.
Următorul lucru pe care ar trebui să-l facem este să aplicăm animația pe butonul Ieșire. Selectați stratul "Buton" de pe panoul Timeline (rețineți - Trecerea la Photoshop trebuie să fie selectată în fereastra din partea stângă a panoului Timeline) și apoi să faceți clic din nou pe săgeata lângă butonul Smooth Transition. În caseta de dialog, setați durata la 0,5 secunde:
Să separăm timpul de animație. Selectați stratul "Butonul Ieșire". Avem două metode pentru a face acest lucru.
Mergeți la panoul Properties (Proprietăți) și setați layerul Delay for the Exit (Ieșire) pentru 1 sec:
Alternativ, puteți selecta linia verde de pe stratul butonului de ieșire pentru a deveni albastru, apoi faceți clic și trageți-l în segmentul de pe linia de timp care ne convine (în cazul nostru este 1 sec):
Există încă o modalitate de a ajusta durata animației. Este foarte important și foarte ușor de utilizat. Pentru a modifica durata de animație pur și simplu cu stratul selectat, deplasați mouse-ul peste săgeata mică de la sfârșitul segmentului de animație, țineți apăsat butonul stâng al mouse-ului și trageți în direcția dorită (dreapta - extindere, stânga - scurtare):
Să trecem la o altă pagină; Pagina Flash. În panoul "Timeline" selectați Meniu> Tranziție Flash. Din nou, setați același efect Fade In pentru ambele straturi, așa cum am avut în pașii 5-7:
Să adăugăm mai multă interacțiune. În panoul "Timeline" cu stratul "Flash" selectat, faceți clic pe butonul din partea de jos a butonului "+ Adăugați acțiune". Din meniul drop-down selectați Rotire:
Acum avem trei elemente selectate din layerul Flash și puteți vedea că toate acestea au efectul Rotate aplicat:
Ok, alegeți unul dintre efectele Rotire (efectul Rotire pe care ați făcut clic pe albastru) din panoul Timeline și accesați fereastra Proprietăți. Odată ce ați setat prima opțiune la un unghi specific și unghiul însuși setat la 360 ° - aceasta va finaliza rotația. Durata de 0,5 sec ar trebui să fie OK, dar ești liber să experimentezi - scopul meu este doar să-ți arăt ce poți să faci :)
După ce l-ați aplicat la unul dintre elementele, setați aceleași setări la cele două rămase, deci toate cele trei vor avea o rotație de 360 ° și aceeași durată. Apoi puteți previzualiza animația. Acum avem efecte de rotație și de estompare pentru această pagină Flash.
Să mergem mai departe și să adăugăm efecte la pagina Dreamweaver. În panoul Timeline, selectați Meniu principal> Tranziție Dreamweaver. Din nou, repetați Pașii 5-7 pe Pagina astfel încât să se producă Fade In Effect:
Cu layerul Dreamweaver selectat, faceți clic pe butonul "+ Add Action" și selectați "Rotate 3D" din meniul drop-down.
Acum ar trebui să te uiți la ceva asemănător cu acest lucru (efectul Rotate 3D este aplicat tuturor celor trei elemente de pe cronologie):
Să le personalizăm. Selectați una dintre animațiile 3D Rotate și accesați panoul Proprietăți. Acolo avem câteva opțiuni. În afara duratei, întârzierii și relaxării, avem trei tipuri de rotație. Deci, de la stânga la dreapta: În primul rând - rotește obiectul în jurul axei X, în al doilea rând - rotește obiectul în jurul axei Y, iar al treilea - este o rotație simplă pe care o aveam în pagina Flash. Și pentru fiecare tip de rotație putem seta unghiul de pornire și valoarea finală.
Pentru DreamweaverRect folosesc rotația de la 0 la 360 ° în jurul axei Y:
Pentru DreamweaverIcon și Text folosesc rotația de la 0 la 360 ° în jurul axei X cu 0.5 Delay:
Deci, ar trebui să aveți următoarea imagine și să vă puteți testa animația cu butonul Play:
Următorul lucru pe care ar trebui să-l realizăm este să setăm videoclipul. Vom adăuga un videoclip la pagina Flash deoarece videoclipul în sine este despre Flash Catalyst și Flash Player. Pentru aceasta, alegeți pagina Flash. Apoi mergeți la File> Import> Video / Sound File. Alegeți fișierul Adobe.flv descărcat din fișierul sursă asociat în partea de sus a tutorialului.
Următorul lucru de care avem nevoie este să alocăm fișierul grupului Flash. Pur și simplu selectați Playerul video din Panoul straturilor, țineți apăsat butonul stânga al mouse-ului și glisați respectivul player video în stratul grupului Flash până se extinde și se introduce în el. După ce ați făcut acest lucru, ar trebui să vedeți următoarele:
Acum hai să ascundem pictograma Flash și textul, astfel încât va exista doar un videoclip. Pentru a face acest lucru, faceți clic pe pictogramele pentru ochi pe aceste straturi, astfel încât acestea vor dispărea (puteți șterge și aceste straturi, depinde de dvs. - pur și simplu selectați aceste straturi și faceți clic pe pictograma Trash în partea din dreapta-jos a panoului Straturi).
Următorul lucru pe care trebuie să-l faceți este să redimensionați videoclipul astfel încât să se potrivească în interiorul dreptunghiului. Selectați stratul "Video Player" și mouse-ul peste colțul din stânga sus al videoclipului, astfel încât să vedeți două săgeți orientate spre diferite direcții (mouse-ul trebuie să fie peste pătratul alb). Țineți butonul stâng al mouse-ului și începeți să trageți. De asemenea, veți observa că există și alte pătrate albe și pătratul albastru în centru. În același mod, trageți-le astfel încât să poziționați videoclipul central (dacă doriți să mutați videoclipul însuși, nu colțurile acestuia, îndreptați mouse-ul în centrul videoclipului și trageți).
Hai să mergem la panoul Proprietăți și să explorăm ce este oferit.
Mai întâi vedem poziția videoclipului pe scenă, lățimea și înălțimea acestuia. Dacă doriți să le modificați după cum am setat următoarele opțiuni: X - 179, Y - 89, Lățime (W) - 281, Înălțime (H) - 154. Apoi observați că avem deja controalele video - Panoul Proprietăți ne oferă două controale video preconfigurate (Wireframe și Standard), dar vom adăuga propriile butoane pentru controlul videoclipului, deci setați-l pe Nici unul.
Pentru modul Scalare, am optat de asemenea pentru a seta "None". În afară de Niciunul, putem seta Modul de Scalare pentru A Stretch, Letterbox sau Zoom - aici puteți experimenta și seta cele mai bune ce vă convine. Dacă doriți să previzualizați cum va arăta, verificați opțiunea "Auto Play" (rețineți că atunci când ați terminat experimentarea, debifați opțiunea Redare automată).
Pe langa functia Auto Play avem optiunea "Loop" si "Muted". Nu avem nevoie să ștergem un videoclip, așa că lăsați-l să nu fie verificat și de asemenea dorim să auzim sunetul, astfel că opțiunea Muted trebuie să fie și neschimbată.
Acum, mergeți la submeniul Component și Aspect. Asigurați-vă că opțiunea "Acceptă evenimentul mouse-ului" este bifată (dacă nu este bifată, nu vom putea seta propriile butoane la Video). Opțiunea "Tooltip" ne permite să scriem descrierea videoclipului și atunci când utilizatorul face mouse-ul peste el, el sau ea va vedea descrierea.
"Volumul", cred, este clar., /
În opțiunea Aspect puteți seta un anumit mod de amestecare și puteți verifica opțiunea "Cursor manual" astfel încât atunci când utilizatorul se deplasează peste videoclip, săgeata mouse-ului se va transforma în cursorul mâinii.
Acum este momentul să setați butoanele de control pe videoclipul nostru. Cu grupul de strat Flash selectat, mergeți la File> Import> Image and import Play.png. Faceți același lucru pentru Stop.png. Transformați-le în butoane și plasați sub video (întotdeauna o bună practică pentru a le redenumi). De asemenea, le puteți aplica unele efecte, dar nu este necesar - Am setat opacitatea în starea Up pentru 75 la ei (dacă nu știi cum să faci asta, fii sigur că-mi vezi primul tutorial pe Flash Catalyst unde am discuta astfel de lucruri).
... și situația din panoul straturilor ar trebui să fie după cum urmează:
Acum, pentru cea mai ușoară parte - accesați Panoul de Interacțiuni, selectați butonul Redare, iar în Panoul Interacțiuni alegeți următoarele opțiuni: În primul rând - Apăsați pe clic, al doilea - Redați videoclipul, al treilea - selectați videoclipul "Adobe1.flv" numai când în Flash Page:
Faceți același lucru pentru butonul Stop, dar în loc de "Play Video", setați opțiunea "Stop Video".
Acum, când am setat comenzile în videoclipul nostru, lăsați-l să testeze - apăsați Ctrl + Enter sau mergeți la File> Run Project.
Ultimul lucru pe care trebuie să-l facem este să aplicăm sunet butoanelor noastre. Mai întâi să importăm sunetul. Accesați Fișier> Importare> Fișier video / sunet și navigați la folderul rădăcină Flash Catalyst instalat. Acolo, selectați "Sound Effects / Flash Beep.mp3". Bineînțeles că putem folosi propriile noastre sunete, dar am vrut să vă arăt că Flash Catalyst are un pachet de sunete pre-instalat. Alegeți oricare dintre cele potrivite. Odată ce ați fost importat, îl puteți previzualiza - mergeți la panoul Bibliotecă și în partea inferioară navigați la subfolderul Media și selectați "Flash Beep.mp3" - veți observa că în fereastra de sus a apărut butonul Redare. Dacă faceți clic pe el, veți auzi sunetul butonului:
Notă: Aici veți găsi, de asemenea, toate fișierele noastre grafice, mediile și componentele.
Să finalizăm proiectul și să adăugăm sunet la butoane în timpul stărilor lor. Pentru a face acest lucru, selectați unul din butoanele din panoul "Straturi", mergeți la starea de peste. În panoul "Timeline", cu pictograma selectată, dați clic pe butonul "+ Adăugați acțiune" și selectați Efectul de sunet:
Din caseta de dialog selectați "Beep Flash" și faceți clic pe OK:
Situația de pe cronologie ar trebui să fie următoarea:
Repetați acest pas la pictogramele Flash și Photoshop și ați terminat. Rulați Proiectul!
Acum știți nu numai cum să vă transformați opera de artă în componente, ci cum să adăugați o interacțiune lină între pagini, să aplicați diferite variante de animație, să folosiți video și sunet în proiectele dvs. și să le controlați. Catalizatorul Flash este o aplicație uimitoare și acum puteți pur și simplu fără a scrie o singură linie de cod să vă aduceți opera de artă la viață.
Sper că v-ați bucurat să urmați acest proiect și să învățați cum să utilizați Flash Catalyst. Practicați și veți obține rezultate excelente! Vă mulțumim și pentru că ați citit tutorialul meu :)
Accentsconagua