Macromedia Flash în acțiune. buton
Macromedia Flash în acțiune. buton
Sună incredibil, dar mulți designeri web folosesc Flash doar datorită confortului și simplității sale atunci când lucrează cu butoane. Din aceste motive, scripturile Java încet, dar cu siguranță părăsesc paginile în nonexistență, dând loc pașilor regali ai unui obiect mic, dar mândru al studiului nostru.
Button ... doar un buton
Ei bine, Flash, sper că a fost deja descărcat. Puteți începe să creați primul nostru buton. Aceasta este o problemă simplă și nu necesită cunoștințe speciale. Mai întâi trageți un dreptunghi și pictați-l cu orice culoare.
Selectați prototipul nostru și convertiți-l la simbolul Buton (selectați Inserare - Conversie în Simbol sau apăsați F8, apoi selectați Buton și apăsați Enter). Obiectul va achiziționa un cadru albastru caracteristic simbolului. Faceți clic de două ori pe butonul nou apărut și intrați în fereastra de editare. Întoarceți-vă la câmpul de desen principal făcând clic pe Scenă 1. Vedem că Timeline-ul nostru (regulator de timp) sa schimbat și a început să arate astfel:
Spre deosebire de starea obișnuită, rămân doar patru cadre: Sus, Peste, Jos și Hit, pe care vom trăi mai detaliat. În cadrul Up, puteți alege modul în care butonul va arăta în starea sa normală (când nu este apăsat și cursorul mouse-ului nu este îndreptat spre acesta). Există deja un cadru cheie, în care butonul este desenat așa cum a fost inițial creat de noi. În consecință, dacă culoarea conturului sau umplutura este modificată în modul editare buton (Simbol 1), toate modificările vor avea loc în modul principal (Scena 1). În cadrul Overframe, extragem starea butonului nostru în momentul în care cursorul mouse-ului este depășit. Ca să spunem, aici este, un înlocuitor pentru java și un panaceu pentru începători designeri. Cadrul în jos (pentru a nu fi confundat cu Down :)) descrie starea butonului când mouse-ul este apăsat pe el și până când acesta este eliberat. Mai multe detalii ar trebui să fie focalizate pe cadrul Hit. Acesta este responsabil pentru zona de acțiune pentru butonul nostru. Ie dacă extragem un alt dreptunghi peste butonul nostru, de două ori mai mult decât cel original, atunci toate evenimentele vor apărea în zona celei mai mari, deși butonul va rămâne neschimbat pe ecran la pornire. Acest lucru este util pentru crearea unui buton de text. Este suficient să creați un cadru cheie aici și să trageți orice formă deasupra textului, a cărei suprafață va fi tratată ca un buton. Un exemplu de astfel de text va fi prezentat mai jos, dar pentru moment să ne întoarcem la oile noastre. Faceți clic pe Peste cadru și creați un cadru cheie acolo (F6) (nu este vina mea că astfel de tautologii ieși :)). Apoi vopsiți butonul într-un fel diferit. Lansați clipul (Ctrl + Enter). Dacă totul a fost făcut corect, atunci când plasați mouse-ul pe un dreptunghi, ar trebui să schimbe culoarea. Introduceți cadranul cheie în cadrul Jos și scrieți ceva de genul "apăsat" pe buton. Porniți clipul și încercați să faceți clic pe buton. Hit în acest exemplu nu poate fi folosit, deoarece domeniul de aplicare al butonului este deja limitat la dreptunghiul nostru. Acest exemplu va fi o pregătire pentru explicații ulterioare, așa că asigurați-vă că totul funcționează corect pentru dvs.
Adăugați un sunet
Da, Flash o poate face. Desigur, încărcarea celei de-a șasea simfonii într-un buton mic nu este în întregime recunoscătoare, dar puteți face o mică voce care să acționeze pentru o schimbare. Principalul lucru în această afacere nu este să o exagerați, deoarece, de obicei, sunetul nu este întotdeauna plăcut de către utilizator, dacă nu este complet la locul lui. Pentru test, vom prelua sunetul standard din folderul Windows \ Media - ding.wav. Mic, sonor ... ce altceva este necesar pentru un buton bun. Trebuie de asemenea menționat faptul că simbolurile, sunetele, imaginile importate etc. sunt stocate în Bibliotecă, pe care le puteți accesa apăsând F11. Avem nevoie de el acum. Încărcați sunetul (File - Import) și, dacă fereastra bibliotecii nu este pe ecran, apăsați butonul descris mai sus. Veți vedea următoarea imagine:
După cum puteți vedea, în bibliotecă avem două simboluri: un buton și un sunet adăugat. Sunetul poate fi auzit prin apăsarea butonului cu imaginea unui triunghi, care, din vremea marelui magnetofon "Romantika", însemna "Play". Dacă utilizați această funcție, butonul va afișa cum va arăta când faceți clic pe el (conținutul cadrului inferior). Dacă nu vă aflați în modul de editare a butonului, accesați-l, selectați Peste cadru și trageți pur și simplu sunetul ding.wav din bibliotecă la imaginea butonului cu butonul din stânga al rozătoarelor drepte. Dacă operația de mai sus este efectuată corect, bara de timp se va schimba la următoarea imagine.
Adăugați animație
Aici aș dori să descrie punerea în aplicare a câteva efecte simple, care pot atrage atentia un moment la butonul, și poate chiar o declaratie de exprimare (amploarea obscenă lui va fi direct proporțională cu unghiul de curbură a mâinilor artist :)) Sa cream un nou proiect și trage Trei etichete de text care vor servi ca butoane noastre:
Acum ne vom face propria animație pentru fiecare dintre ei. Mai întâi, vom converti primul text pe simbolul butonului, apoi vom crea cadrele cheie din cronologie în cadrele Over și Hit. În "Hit", desenați orice dreptunghi care închide textul "Buton 1" pentru a seta zona de declanșare. În rubrica Peste, selectați prima inscripție și convertiți-o într-un clip de animație (F8 - Film Clip). Faceți dublu clic pe el și obțineți-l în cronologie proprie, unde puteți specifica o animație specifică pentru acest clip. Selectați primul cadru de pe riglă și selectați Inserare - Creare mișcare Tween din meniu. Creați cadre cheie în cadrele 5 și 10. Dacă totul sa făcut în mod corect, cronologia pentru clip ar trebui să arate astfel:
Deschide fereastra de redimensionare (Window - Transform) și în al cincilea cadru, setați 110% pentru verticală și orizontală. Porniți clipul pentru execuție (Ctrl + Enter). Acum, când plasați mouse-ul peste buton, inscripția ar trebui să crească treptat și apoi să scadă la dimensiunea originală. Modificați puțin animația, astfel încât să nu se schimbe doar dimensiunea, ci și culoarea butonului. Pentru a face acest lucru, selectați inscripția din același cadru al cincilea, iar în fereastra Window-Properties din câmpul Color puteți modifica luminozitatea (Luminozitate), transparența (Alpha) sau reparați obiectul (Tint). Este ultima proprietate de care avem nevoie.
Alegeți, setați orice culoare și începeți. Doar experimentați cu acești parametri, iar voi înșivă puteți obține efecte destul de interesante. O mică practică, iar pentru astfel de butoane nu vei lăsa mai mult de 1-2 minute. Cred cu primul buton pe care l-am dat seama, e timpul sa luam al doilea. Nu uitați să vă întoarceți la spațiul de lucru făcând clic pe Scena 1. Conversați inscripția pe buton, inserând cadrele cheie, ca în cele precedente, în Peste și în Tentație. Transformați o inscripție într-un clip și faceți dublu clic pe ea. Primul cadru cheie va fi deja setat. Noi creăm mai mult unul pentru celălalt și în fiecare dintre ele redimensionăm inscripția după cum urmează:
1) Butonul 2
2) la butonul 2
3) butonul 2
4) butonul 2
5) butonul 2
6) butonul 2
Ghici ce se întâmplă? Deci, asigurați-vă de acest lucru prin rularea clipului nostru pentru a efectua. Pentru cel de-al treilea buton, vom avea și un efect destul de frumos, deși nu putem chiar să numim limbajul pentru a numi o animație ... Conversia inscripției pe un buton, inserarea cadrelor cheie în Over și Tint și apoi în cadrul Over face următoarele acțiuni. Copiați textul în clipboard și apoi lipiți același "Buton 3" în spațiul de lucru. Facem textul original exact de 2 ori mai usor (acest lucru se poate realiza fie prin revopsirea acestuia, fie prin transformarea acestuia in grafica si apoi prin stabilirea transparentei la 50%) si prin glisarea cu grija a ambelor obiecte astfel incat ceva sa arate ca o imagine.
Și umbra ar trebui să fie puțin mai mică și la dreapta locului original al inscripției, iar inscripția ar trebui să se deplaseze mai sus și spre stânga pentru a crea efectul separării de fundalul alb.
Acum, sigur că toată lumea va putea distinge când cursorul mouse-ului este pe buton și când nu. Și în cele din urmă, ceea ce este cel mai necesar pentru noi pe pagină. De ce avem nevoie de butoane dacă nu fac nimic? - întrebi și vei avea absolut dreptate. În spațiul de lucru principal, selectați butonul dorit și, făcând clic dreapta pe el, selectați Acțiuni. Înainte de a deschide fereastra pentru a crea ActionScript. Ce este și ce este mâncat, îți voi spune mai târziu, pentru că are o legătură indirectă cu butoanele noastre, dar deocamdată facem toate cele de mai jos. Înainte de a deschide această fereastră:
În mod implicit, în Flash reprezintă modul normal (comuta la expertul, făcând clic pe butonul albastru, cu o săgeată și trei pătrate la stânga, care se afla pe partea dreapta), în cazul în care posibilitățile sunt foarte limitate, dar pentru un începător simplifică foarte mult sarcina, asa ca nu-l schimba . În secțiunea Browser / Network, există procedura GetUrl. Dublu click pe ea și în domeniul scrie Url: www.nestor.minsk.by/kg. Acum când faceți clic pe buton, vom merge la site-ul KG. La crearea altor scripturi se va opri în următoarele ediții ale acestor sfaturi mici să lumineze intermitent.
Cu toate butoanele. Aceste cunoștințe sunt suficiente pentru a crea butoane simple care pot decora orice pagină web.
Amintiți-vă doar că butoanele ar trebui să se integreze complet cu viziunea generală a paginii și nu ezitați să experimentați, deoarece este mai bine decât metoda "lui Tyk" pentru auto-studiu nu a fost încă inventată. Mult noroc!