gtemata.com

Cum de a crea un banner simplu animat cu Flash CS3

Dacă doriți să creați un banner animat utilizând tehnologii învechite, acest tutorial vă va arăta cum să utilizați Adobe Flash și Action Script 2.0 pentru a crea un banner animat. Rețineți că în zilele noastre toate acestea pot fi realizate mult mai ușor folosind codurile HTML și jаvascript.

paşi

Imagine intitulată Efectuați un banner simplu animat în Flash CS3 Pasul 1
1
Deschideți Adobe Flash și creați un nou document. Editați documentul apăsând Cmd + J pe Mac și Ctrl + J pe PC. În opțiuni, selectați o dimensiune de 468x60 pentru banner (aceasta este dimensiunea standard a unui banner), apoi setați culoarea de fundal dorită și faceți clic pe OK. Pentru acest tutorial, vom folosi culoarea neagră ca fundal.
  • Imagine intitulată Efectuați un banner simplu animat în Flash CS3 Pasul 2
    2
    Mergeți la Niveluri și atribuiți o etichetă la primul nivel. În acest tutorial, vom crea un cerc, deci numele stratului va fi "Cercul". Deplasați mouse-ul peste instrumentul dreptunghiular, faceți clic pe acesta și țineți-l apăsat pentru a afișa meniul și alegeți instrumentul oval. Apoi eliberați mouse-ul. Deplasați bannerul și creați un cerc de orice dimensiune. În acest tutorial, dimensiunile vor fi destul de mari, astfel încât în ​​banner se va vedea doar un cerc mic, iar dimensiunile sunt 175,5 x 175,5
  • Imagine intitulată Efectuați un simplu banner animat în Flash CS3 Pasul 3
    3
    Acum că ați creat cercul, apăsați F8 (Mac și PC) pentru a face ca fereastra să apară ca simbol. Faceți clic pe grafic și redenumiți simbolul "cerc" și apăsați OK. Ați creat un simbol pentru animație. Accesați zona de niveluri și deplasați mouse-ul peste cel de-al cincilea cadru și apăsați F6 (Mac și PC). În acest fel, veți crea un cadru cheie cu un cerc exact în același punct. Faceți clic din nou pe primul cadru și deplasați cercul făcând clic pe acesta. Acum o vom face într-o animație.
  • Imagine intitulată Efectuați un simplu banner animat în Flash CS3 Pasul 4
    4
    Accesați panoul de proprietăți din partea de jos a ecranului și deplasați mouse-ul peste opțiunile de culoare. Dați clic pe opțiuni și mutați canalul alfa, setându-l la 0%. În acest fel, cercul va ști, dar nu vă faceți griji, este încă acolo, ascuns.
  • Imaginea intitulă Efectuați un banner simplu animat în Flash CS3 Pasul 5
    5
    Reveniți la zona Niveluri și faceți clic dreapta pe cadranul cheie dintre prima și ultima cheie cheie și faceți clic pe "Creare mișcare Tween". Dacă totul a mers bine, ați creat prima parte a animației. Următorul lucru pe care îl vom face este să adăugăm textul.
  • Imagine intitulată Efectuați un simplu banner animat în Flash CS3 Pasul 6
    6
    Creați un strat de text și numiți-l "text", deoarece acesta este exact ceea ce vom crea în acest strat. Mergeți la al șaselea cadru al stratului de text și faceți clic pe butonul din dreapta al mouse-ului. Selectați Inserare cadru nou. În acest fel, vom avea un nou cadru gol pentru a lucra la. Accesați paleta de instrumente și faceți clic pe T pentru a alege instrumentul de text. Deplasați-vă pe banner și tastați cuvintele pe care le doriți. În acest tutorial, vom introduce cuvântul "banner" și, cu textul încă selectat, apăsați F8 pentru a crea un grafic și tastați "text" ca nume. Acum, faceți clic pe OK. Acum, textul dvs. poate fi animat.


  • Imaginea intitulă Efectuați un simplu banner animat în Flash CS3 Pasul 7
    7
    Acum, reveniți la nivelul cercului și faceți clic pe al șaselea cadru. În acest moment, țineți cadrul și trageți-l în cel de-al 16-lea keyframe. În acest fel, cercul va fi vizibil pe durata animației. Mutați textul din zona din cerc, dar asigurați-vă că nu este prea departe spre stânga. Mergeți la Layere și mențineți stratul de text și mutați-l sub nivelul cercului. În acest fel, o parte din text va dispărea, oferindu-ne efectul pe care îl căutam.
  • Imagine intitulată Efectuați un simplu banner animat în Flash CS3 Pasul 8
    8
    Blocați nivelul cercului și ascundeți-l, pentru a vă asigura că nu este deteriorat și că putem vedea ce facem. Faceți clic pe cel de-al 15-lea cadru din stratul de text și creați un cadru cheie apăsând F6. Faceți clic pe textul din cadrul celui de-al 16-lea cadru și mutați-l unde doriți să apară textul, dar asigurați-vă că ultima literă se află în partea stângă a cercului. Puteți face clic pentru a face cercul vizibil dacă nu sunteți sigur în cazul în care este cercul.
  • Imagine intitulată Efectuați un simplu banner animat în Flash CS3 Pasul 9
    9
    După ce ați poziționat unde doriți, mergeți la stratul de text, apoi, între cele două cadre cheie, creați o mișcare tween făcând clic cu butonul din dreapta al mouse-ului și selectând "Create Motion Tween". După ce ați terminat, creați un al treilea nivel și redenumiți-l cu Script de acțiune. Mergeți la ultimul cadru (al 16-lea cadru) și creați un nou cadru apăsând F6. Mergeți la Fereastră  Acțiuni și introduceți stop () - în acest moment, închideți fereastra.
  • Imagine intitulată Efectuați un simplu banner animat în Flash CS3 Pasul 10
    10
    Accesați calea fișierului în care doriți să salvați aplicația. Apelați animația "banner". Mergeți mai jos și selectați Export ca și faceți clic pe partea care spune .swf, deschizând meniul de opțiuni. Mergeți la "gif animat (.GIUF) și faceți clic pe acesta, astfel încât animația să fie salvată în format gif și faceți clic pe OK.
  • Imagine intitulată Efectuați un simplu banner animat în Flash CS3 Pasul 11
    11
    Felicitări! Ați creat un banner simplu pentru a vă arăta prietenilor dvs.!
  • Sfaturi

    • Luați în considerare ideea de adaptare la un standard modern, cum ar fi HTML 5

    Avertismente

    • Acest banner nu va fi compatibil cu iOS sau cu orice alt sistem de operare mobil.
    Distribuiți pe rețelele sociale:

    înrudit