Share
Acesta este un tutorial Basix în timpul căruia vom construi primul nostru proiect în Flash Catalyst dintr-un fișier PSD pre-fabricat. Vom acoperi elementele de bază ale Catalystului: transformarea artei în componente, crearea unor efecte și transformarea acestor componente în viață - fără cod!
În acest tutorial veți învăța cum să manipulați opera de artă în Flash Catalyst și să o faceți să vină în viață.
În a doua parte a tut, după ce v-ați familiarizat cu programul, vom face unele lucruri mai complicate și vom adăuga mai multă interactivitate.
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 un nume proiectului și salvați-l ori de câte ori doriți.
Iată rezultatul final pe care îl vom realiza. Învățând principiile de lucru cu unul dintre cele mai noi produse Adobe, vom transforma operele noastre în componente, vom crea efecte strălucitoare, vom specifica icoane și vom face tranziții către pagini. De asemenea, vom face o pictogramă Adobe ca un buton care duce la o adresă URL specificată: http://active.tutsplus.com
Acest lucru poate părea a fi un exemplu extrem de simplu. Ceea ce este important este modul în care realizăm interactivitatea. Întregul proces este punct și faceți clic pe, nu există o singură linie de codare implicată.
Deschideți Adobe Flash Catalyst, apoi la fereastra de pornire selectați "Creați un nou proiect din fișierul de proiectare"> "De la fișierul Adobe Photoshop PSD ...".
Selectați Galaxy.PSD (puteți obține acest lucru din descărcarea sursei din partea de sus a tutorialului). Asigurați-vă că opțiunea "Importați straturi nevăzute" este bifată și apăsați OK.
Mai întâi de toate, ar trebui să atribuim așa-numitele "state" pentru proiectul nostru. Statele (numite și "Pagini") reprezintă modificările care se vor produce după ce utilizatorii efectuează anumite acțiuni (de exemplu, el sau ea lovește un buton).
În proiectul nostru obiectivul este următorul: după ce utilizatorul face clic pe una dintre pictogramele (Flash, Photoshop sau Dreamweaver) apare un dreptunghi cu informații despre produs. Deoarece avem trei icoane, ar trebui să adăugăm trei state suplimentare (Pagini). Pentru a face acest lucru apăsați "Duplicate State" de trei ori în panoul Pages / States. Acest lucru creează trei copii ale paginii noastre principale, în care vom face unele schimbări.
Acum este înțelept să setați numele statelor. Faceți dublu clic pe numele fiecărui stat și schimbați-l la ceva semnificativ. Am ales următoarele nume începând cu prima stare: Main, Photoshop, Flash, Dreamweaver. Vă recomandăm să dați acestor state aceleași nume - acest lucru vă va ajuta să urmați tutorialul și să evitați confuzia.
Notă: Este foarte important să păstrați structura proiectului și să alocați nume semnificative componentelor dvs. Acest lucru vă va ajuta să găsiți ceea ce aveți nevoie și să decideți unde să plasați active viitoare.
Așa că am desemnat statele pentru proiectul nostru. Acum să creăm câteva butoane. Pentru a face acest lucru, alegeți grupul Flash de straturi. Panoul HUD ar trebui să apară (dacă nu, apăsați F7). În paranteze veți vedea "2 elemente", indicând faptul că sunt selectate două elemente. Acum faceți clic pe Conversia lucrării în Component> Alegeți componenta și din meniu alegeți butonul și faceți clic pe el. Acest lucru va transforma grupul nostru de straturi într-un buton. Faceți același lucru cu grupurile Photoshop și Dreamweaver.
După ce faceți acest lucru în Panoul stratului și în panoul HUD ar trebui să arate așa (notați butonul din panoul HUD și în panoul de straturi grupurile noastre sunt convertite în straturi cu butonul de nume):
Următorul lucru pe care ar trebui să-l facem este să atribuiți statelor butoanele noastre. Dacă sunteți familiarizat cu Flash Professional, știți că există butoane cu patru stări - același lucru este valabil aici. În proiectul nostru suntem interesați de statele de peste și de jos.
Permiteți-mi să clarific semnificațiile tuturor statelor pentru cei care nu sunt familiarizați cu ele.
Să începem cu starea "Over" a butonului Photoshop - în panoul HUD faceți clic pe "Over state". Atrageți atenția asupra panoului Pagini / Stări unde pentru moment avem doar patru state (Sus, Peste, Jos, Dezactivat). De asemenea, puteți vedea că numai butonul nostru este pe deplin vizibil, iar celelalte lucrări de artă sunt decolorate în fundal.
De asemenea, aruncăm o privire la panoul nostru de straturi în care puteți vedea grupul Photoshop:
Extindeți grupul Photoshop. Selectați stratul PhotoshopIcon din Panoul stratului, apoi treceți la Panou Proprietăți> Filtre> Adăugați Filtru> Glow. Alegeți culoarea pe care o doriți (am folosit culoarea din pictogramă - # 179AFF), setați Blur la 16 și Forța la 1.
Notă: Amintiți-vă că toate acestea se efectuează în Statul Over în panoul Pagini / Stări.
Alegeți stratul Rectangle din Panoul de straturi. Uită-te la scena și veți vedea că obiectul este selectat, dar este în spatele PhotoshopIcon. Pur și simplu extindeți dreptunghiul prin aducerea mouse-ului în partea dreaptă a dreptunghiului, setați săgeata în mijloc între colțul de sus și cel inferior. Extindeți-l astfel încât să avem spațiu pentru a scrie eticheta "Photoshop".
Așa că am extins dreptunghiul. Acum, luați Instrumentul Text (comanda rapidă T) și în partea de sus a dreptunghiului scrieți cuvântul "Photoshop". În panoul Proprietăți din Instrumentul de Text am ales următoarele proprietăți (puteți alege același lucru):
Pentru moment, ar trebui să aveți ceva care arată astfel (am deselectat straturile):
OK, am setat statusul Over pentru butonul Photoshop - puteți să vă testați proiectul cu ajutorul comenzii rapide Ctrl + Enter sau să mergeți la Fișier> Executare proiect. Dacă ați urmat tutorialul și ați făcut totul corect, iconul Photoshop trebuie să se aprindă, iar textul cu dreptunghi trebuie să apară în timp ce plasați mouse-ul peste butonul.
Înapoi în proiectul nostru, puteți merge la scena principală făcând clic simplu de două ori pe spațiul gol sau apăsând pe tasta Esc. Puteți, de asemenea, să faceți clic pe link-urile de pescuit din colțul din stânga sus al scenei pe care o vedeți Galaxy / PhotoshopButton.
Repetați pașii de la 7 la 9 cu butoanele Flash și Dreamweaver. Rețineți că în efectele Glow este cel mai bine să utilizați culorile icoanelor.
Acest pas este opțional. Aș dori să adaug o anumită strălucire atunci când un utilizator face clic pe unul dintre butoane. Pentru a face acest lucru, selectăm unul din butoanele din Panoul de straturi, apoi alegeți Statul de jos din panoul HUD. Apoi, în panoul Layer mergeți la grupul Dreamweaver (sau în oricare dintre grupuri pe care preferați să îl abordați mai întâi), selectați layerul DreamweaverIcon. Odată ajuns acolo, accesați panoul Proprietăți, alegeți Filtre> Adăugați Filtru> Glare și selectați preferințele care vă plac (am folosit gri închis- # 333333). Repetați acest pas pentru celelalte grupuri.
În timpul acestui pas, vom transforma stratul AdobeIcon într-un buton și vom atribui cursorii de mână pentru pictogramele noastre. Mai întâi, selectați stratul AdobeIcon. Accesați panoul HUD și faceți clic pe butonul Alegeți componenta> Buton. După ce ați terminat, selectați noul buton, mergeți la Aspect și verificați câmpul "Cursor de mână". Faceți acest lucru pentru toate celelalte butoane (Photoshop, Flash și Dreamweaver).
Dacă vă testați proiectul veți observa că cursorul mâinii apare atunci când ștergem mouse-ul peste pictograme. Am ilustrat utilizatorilor noștri că aceste pictograme sunt butoane. Următorul pas este să alocați această opțiune altor pagini. Se poate face foarte ușor - pentru a face acest lucru, selectați pur și simplu una dintre pictograme, mergeți la panoul HUD și, odată, alegeți opțiunea "Faceți același lucru în toate celelalte state". Procedând astfel, cursorul de mână va apărea și pe alte pagini.
Notă: De asemenea, veți observa că straturile cu pictograme au același nume "Buton". Acest lucru este bine pentru un proiect simplu, cum ar fi acest lucru, dar pentru alte cele mai complicate, vă recomand să vă redenumiți straturile și să le oferiți nume semnificative.
Suntem cu un pas mai aproape de final. Acum să abordăm interacțiunile. În interacțiunile Flash Catalyst ne permiteți să comutați între diferite Pagini (State), mergeți la o anumită adresă URL, Redați, Întrerupeți sau Opriți videoclipul.
Să începem cu prima noastră interacțiune. Alegeți butonul AdobeIcon și faceți dublu clic pe panoul Interacțiuni dacă este ascuns. Cu stratul selectat, faceți clic pe butonul Add Interaction:
Aici puteți vedea lista derulantă. Întrucât suntem interesați de interacțiunea URL, alegeți următoarele opțiuni:
Folosind acești parametri, îi spunem Catalyst că atunci când un utilizator face clic pe buton, el va fi trimis la adresa URL pe care am alocat-o și că site-ul se va deschide într-o nouă fereastră de browser. De asemenea, am definit că această interacțiune este posibilă numai atunci când suntem în Statul Principal (Pagina).
Acum, să creăm interacțiunile dintre Pagini. Mai întâi trebuie să mutăm stratul AdobeIcon astfel încât să fie sub stratul de grup Rectangles. Acest lucru ne va permite să vedem dreptunghiuri peste celelalte obiecte. Pentru a face acest lucru trageți pur și simplu straturile pentru a modifica ordinea lor. Următoarea comandă de strat va fi aplicată tuturor celorlalte state:
Următorul lucru de care avem nevoie este să modificăm aspectul anumitor Pagini editând conținutul. Alegeți pagina Photoshop. În Panoul straturilor selectați stratul grupului Rectangles și îl dezvăluiți făcând clic pe unde este indicat aici:
Pictograma ochi va fi dezvăluită, iar pe pagină veți vedea dreptunghiul Adobe Dreamweaver cu textul și pictograma din interiorul acestuia. Așa cum este Photoshop Page, ar trebui să dezvăluim numai conținutul relevant pentru el. Extindeți stratul de grup Rectangle și opriți pictogramele de ochi ale grupurilor Flash și Dreamweaver - acest lucru ne va permite să vedem numai conținutul relevant al Photoshop:
Repetați aceste acțiuni pentru paginile Flash și Dreamweaver, astfel încât dreptunghiurile vizibile să fie relevante pentru software.
Dacă ați făcut totul corect, degetele din panoul Pagini / Stări ar trebui să arate astfel:
Acum, să adăugăm interacțiunea dintre Paginile principale și Photoshop. În panoul Pagini / State selectați pagina noastră principală. Apoi mergeți la Layer Panel și alegeți butonul PhotoshopIcon. După cum am făcut anterior, accesați panoul Interacțiuni și alegeți următoarele opțiuni:
Repetați acest pas pentru Dreamweaver și Pagini Flash, astfel încât, făcând clic pe o pictogramă, vom ajunge la pagina corespunzătoare.
Următorul pas este să importați o altă imagine în bibliotecă, astfel încât să putem reda tranziția înapoi la pagina principală. Accesați pagina Photoshop. Selectați stratul de grup Rectangle din panoul de straturi. Alege Fișier> Import și selectați pictograma exit.gif (din nou, aceasta este disponibilă în descărcarea Sursă în partea de sus a tutorialului):
Imaginea trebuie să apară în centrul dreptunghiului:
Și Panoul de straturi ar trebui să apară astfel:
Acum, cu ajutorul mouse-ului poziționați pur și simplu pictograma Ieșire din partea dreaptă jos a dreptunghiului alb:
Catalizatorul Flash este suficient de inteligent pentru a poziționa imaginea la locul potrivit în alte pagini. Trebuie doar să dezvălui imaginea făcând clic pe pictograma pentru ochi:
Acum trebuie să convertim pictograma Ieșire într-un buton și să setăm un efect.
Selectați pictograma Ieșire, accesați panoul HUD și convertiți-l într-un buton așa cum am făcut-o anterior.
Selectați starea Sus și selectați din panoul Proprietăți Frecvente> Opacitate. Setați opacitatea la 50. Acest lucru ne va permite să dezvăluim opacitatea completă numai atunci când mouse-ul peste butonul sau apăsați pe el:
Să adăugăm o simplă interacțiune la butonul nostru de ieșire. În Photoshop Page selectați stratul cu pictograma, faceți clic pe Add Interaction (adăugați interacțiunea) așa cum am făcut-o anterior și setați opțiunile afișate în imaginea de mai jos. Singura diferență este aceea că ar trebui să joace tranziția spre statul principal în timp ce este în orice stare:
Ați realizat prima parte a tutorialului din două părți despre elementele de bază ale aplicației Flash Catalyst. Apăsați Ctrl + Enter sau Fișier> Executare proiect pentru a verifica dacă totul funcționează bine. Pentru moment, ar trebui să existe efecte strălucitoare, iar pictograma Adobe ar trebui să conducă la adresa URL pe care ați specificat-o. Celelalte icoane (Photoshop, Flash, Dreamweaver) ar trebui să joace tranziții la paginile lor, iar Iconul de ieșire ar trebui să joace o tranziție înapoi la pagina principală.
În următoarea parte a tutorialului vom învăța cum să adăugăm animație în proiectul nostru, să adăugăm sunet și să setăm videoclipul.
Accentsconagua