Macromedia flash - primul dvs. banner-ul flash

Crearea unei animații proprii în Flash poate fi chiar una care este absolut lipsită de capacitatea de a desena (sau de capacitatea de a lua mai mult decât suficient, dar degetul a condus un buldozer). Nu dispera! Vom îmbrăca degetele de lungă durată, promițându-ne să nu verificăm din nou de ce măcinătorul de carne funcționează atât de bine și să începeți să studiați elementele de bază ale viitorului măiestrie.







După cum este cunoscut, utilizat în rata de cadre de film 24 pe secundă, dar în animație, în special conceput pentru Internet, suficient de 12. mai mare rata de cadre, mișcarea lină se va dovedi, dar este mult mai de încărcare a procesorului, devine esențial în complex scene. Aceasta depinde de viteza procesorului de redare Flash, și pe computere diferite, aceasta poate varia considerabil. De obicei, acest lucru se manifestă în mișcări de frânare sau spasmodice, mai ales atunci când animații complexe, sincronizat cu audio.

După ce vom decide scenariul, vom începe creativitatea. În primul rând, vom decide care este dimensiunea banner-ului. Lăsați acest lucru să fie formatul standard de 468x60 în rețelele de schimb de bannere. Acestea sunt dimensiunile pe care trebuie să le specificați în panoul Proprietăți film al Modificați filmul [Ctrl + M], în casetele Lățime și Înălțime. În aceeași fereastră, selectați culoarea de fundal a bannerului nostru și, de asemenea, în caseta Frame Rate, specificați valoarea fps - numărul de cadre pe secundă.

După ce ați specificat toate setările filmului și ați apăsat butonul OK, verificați scara afișării scenelor. Dacă este necesar, setați-l la 100%.

Acum vom crea bazele viitorului banner - o inscripție în mișcare:
  • Selectați instrumentul Text [T].
  • Deschideți bara de instrumente a acestui instrument: panouri de ferestre Caracterele [Ctrl + T] sau faceți clic pe butonul cu litera "A" în colțul din dreapta jos al ferestrei.
  • În meniul derulant Font al panoului Caractere, selectați fontul chirilic, de exemplu, arial Cyr.
  • Setați dimensiunea dorită, de exemplu 35, și culoarea.
  • Faceți clic pe locul de la începutul inscripției (în cazul nostru - la începutul bannerului) și introduceți textul. Dacă apare dintr-o dată dimensiunea sau culoarea aleasă, comutați la săgeata [M] (săgeata neagră din bara de instrumente) și selectați textul făcând clic pe ea. În jurul textului va apărea un cadru, acum îl puteți modifica în panoul Caractere: dimensiunea, culoarea fontului etc.

    E timpul pentru prima animație. Calmează mâinile tremurând de emoție și continuă să creeze:
  • Transformați textul într-un simbol: Introduceți Conversia în Simbol [F8]. Nu uitați să îi dați un nume adecvat și să specificați tipul graficului. Simbolul creat va fi plasat în biblioteca proiectului curent.
  • Selectați cel de-al 20-lea cadru din Cronologie și introduceți cadranul cheie Insert Keyframe [F6]. În stânga noului cadru apare o bară gri, care vine din primul cadru cheie.
  • Reveniți la primul cadru și mutați inscripția pe banner pentru marginea sa, de exemplu, la marginea dreaptă.
  • Menținerea primul cadru, deschideți panoul de setări cadru panouri rama ferestrei [Ctrl + F] (puteți face clic pe butonul Afișare Instanță din colțul din dreapta jos al ecranului), apoi se trece la fila Frame.
  • În meniul derulant Tweening (construirea cadrelor intermediare), selectați tipul de animație - Motion, adică animația de mișcare. Bara gri dintre cadrele cheie va deveni albastră cu săgeata spre dreapta.

    Timpul necesar pentru a reda un film sau clip de la începutul redării este afișat în linia de statistici Timeline. Durata efectivă a episoadelor individuale poate diferi ușor de valoarea afișată, calculată pe baza setărilor fps. Aceasta depinde în principal de complexitatea calculelor necesare pentru a construi o imagine a unui singur cadru și de viteza calculatorului.

    Folosirea straturilor este o modalitate foarte bună de a crea un film. În plus, obiectele plasate pe straturi diferite pot fi suprapuse sau ascunse, creând o simulare a volumului scenei, aplicarea corectă a straturilor poate reduce semnificativ dimensiunea fișierului finit. Orice obiect care urmează să fie animat trebuie plasat pe propriul său strat. Deci, veți obține efectele necesare mult mai rapid și veți reduce sarcina procesorului.







    Pentru fiecare strat, încercați să veniți cu un nume potrivit. Pentru a modifica numele stratului, faceți dublu clic pe numele stratului și introduceți unul nou.

    Dacă se presupune că butoanele vor avea obiecte animate, creați în prealabil caracterele Clipuri de caractere și apoi plasați-le doar în cadrul butonului corespunzător.

    Conform scenariului nostru, textul nu trebuie doar să "meargă" pe ecran, ci, după un timp, să dispară. Prin urmare, va trebui să chinuim simbolul cu textul mai mult, pentru că animăm simbolul, nu textul în sine.

  • Introduceți un nou cadru cheie, de data aceasta pe locul 60. Sper că sunteți deja obișnuiți cu faptul că pentru aceasta trebuie să selectați cadrul corespunzător și să apăsați F6? Astfel, am stabilit timpul pentru afișarea statică a textului după oprire - aproximativ trei secunde și jumătate.
  • Introduceți ultimul cadru cheie, de exemplu cel de-al 80-lea.
  • Din lista derulantă, selectați efectul alfa și, deplasând cursorul, setați opacitatea la zero.

  • Mergeți la cea mai recentă cheie cheie (60) și setați tipul de animație Motion la fel ca în cazul primului cadru cheie.

    Acum trebuie să adăugați ultimul element al filmului - un pătrat rotativ:

  • Creați un nou simbol: Introduceți simbolul nou [Ctrl + F8], atribuiți numele necesar și setați tipul filmului.
  • Selectați instrumentul Rectangle [R] și setați culoarea de umplere și tipul de margine. Culoarea poate fi selectată pe panoul (panoul Mixer), apelat prin meniul (Mixer panou de ferestre) sau prin butonul corespunzător din colțul din dreapta jos al programului.
  • Desenați un pătrat, încercând să faceți ca centrul semnei obiectului să cadă într-adevăr pe centrul pătratului sau să mutați pătratul deja desenat.
  • Transformați pătratul într-un simbol grafic, așa cum ați făcut anterior cu textul.
  • Introduceți cadranul cheie, de exemplu, pe cel de-al 30-lea cadru.
  • Selectați primul cadru, deschideți panoul Cadru pentru acest cadru și specificați tipul familiar de animație de mișcare.
  • În meniul derulant Rotire, selectați rotația în sensul acelor de ceasornic - CW, iar în câmpul Times, specificați câte revoluții ar trebui să realizeze obiectul (de exemplu, unul).

    Rămâne foarte puțin - să plasăm filmul creat pe scenă, adică pe bannerul nostru:

  • Treceți la modul scenă făcând clic pe fila Scene1 de deasupra listei de straturi.
  • Adăugați un nou strat. Pentru a face acest lucru, faceți clic pe imaginea hârtiei cu colțul curbat și semnul plus sub lista de straturi.
  • Mergeți la primul cadru al stratului creat, selectându-l cu ajutorul mouse-ului.
  • Deschideți biblioteca proiectului: Library Library [Ctrl + L] sau făcând clic pe cartea din colțul din dreapta jos al ecranului.
  • Găsiți clipul video al pătratului rotativ din bibliotecă și transferați-l în scenă, plasând bannerul în locul potrivit.
  • Dacă, atunci când creați un pătrat, ați făcut o greșeală cu dimensiunile, - este în regulă, utilizați modificatorul Scale, schimbând dimensiunea pătratului la cele necesare.
  • Asigurați-vă că Flash a creat o riglă ne-animată pentru acest strat în panoul Cronologie, egală cu durata precedentă. Dacă acest lucru nu se întâmplă, faceți clic pe ultimul cadru al stratului și introduceți un cadru gol: Insert / Flame [F5].

    Desigur, ar fi posibil să ne ocupăm de ceea ce a fost deja creat, dar numai visăm la pace! Nu credeți că pătratul care se rotește este foarte singur și că nu va afecta câțiva prieteni colorați? Pentru a face acest lucru, nu trebuie să creați clipuri video noi, ci să le folosiți pe cele existente cu modificări mici pentru fiecare instanță:

  • Plasați pe banner mai multe pătrate prin glisarea clipului video corespunzător din biblioteca proiectului pe scena, pe stratul deja existent cu primul pătrat.
  • După ce patratele și-au luat locul și se potrivesc în mărime, selectați unul dintre ele făcând clic pe el cu ajutorul mouse-ului.
  • Deschideți panoul de efecte al instanței Efecte și selectați efectul Tint din meniul derulant. Setați culoarea dorită pentru fiecare dintre pătrate.

    Dacă vorbim despre banner-ul, vreau să menționez că unele rețea banner sunt limitate la adoptarea Flash-role de o anumită dimensiune, iar unele necesită plasarea obligatorie a butoanelor, realizarea rolului de fond (substrat), cu un scenariu special pentru actionSript.

    Bannerul este de neconceput fără posibilitatea de a accesa site-ul atunci când faceți clic pe el, altfel nu este un banner, ci un film obișnuit Flash. Prelucrarea intrărilor de taste din Flash este preluată prin simbolurile butoanelor cu fragmentele de cod atribuite acestora în ActionScript.

    Crearea unui buton diferă foarte puțin de crearea unui clip video: Introduceți simbolul nou [Ctrl + F8] (tipul de simbol - buton). Caracteristica principală a butonului este că linia sa de timp este utilizată în afara casetei. Conține doar patru cadre, care nu sunt asociate secvenței de animație. În cadrul Up, este reprezentată starea normală a butonului, în cadrul Over - vizualizarea când cursorul mouse-ului este depășit, jos - butonul apăsat și Hit - zona de răspuns.

  • Desenați un dreptunghi în primul cadru al butonului, egal cu dimensiunea întregului banner și având o culoare de fundal. Dimensiunile pot fi bifate în panoul Informații numit prin butonul din colțul din dreapta jos al ferestrei cu imaginea pătratului și a săgeților de coordonate sau prin meniul: Panouri de ferestre Informații [Ctrl + alt + I].
  • Mergeți la al doilea cadru - Peste, introduceți cadranul cheie [F6]. Modificați culoarea dreptunghiului selectând-l și selectând culoarea de umplere.
  • Setați zona de răspuns a butonului din cadrul - Hit, introducând doar un alt cadru [F5] pentru acest cadru.
  • Reveniți la scena principală, creați un nou strat și plasați butonul în el, aliniați-l cu marginea bannerului.

    Acum trebuie să faceți butonul să deschideți site-ul necesar. Pentru a face acest lucru, trebuie să învățăm cum să alocăm scriptul obiectului actionScript:







    Trimiteți-le prietenilor: