E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale Adobe Fireworks

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

GRAFICA 2D  /  Adobe Fireworks  /  Sfaturi utile (2)

Cum sa creezi animatii si grafica animata in Adobe Fireworks

29.05.2009
Cum sa creezi animatii si grafica animata in Adobe Fireworks

Nimic nu capteaza mai tare ochiul pe un site decat o imagine animata. Executata cum trebuie, poate insufleti pagina web, deseori fiind primul aspect care atrage privirea vizitatorului.

Total vizualizari: 9086 9086 afisari   |   Comentarii  1   |   Rating   |   (7 voturi)   |   Timp necesar: 15 min 15 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Tutorialized.com  
Autor:  Tutorialized.com
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

Nimic nu capteaza mai tare ochiul pe un site decat o imagine animata. Executata cum trebuie, poate insufleti pagina web, deseori fiind primul aspect care atrage privirea vizitatorului. Poate fi un mod minunat de a spune "priveste aici" catre o anumita sectiune a paginii. Dar cum executam grafica animata?

Vom crea un exemplu animat

Continua sa citesti pentru a afla cat de usor este sa executi grafica animata in Adobe Fireworks.

Grafica noastra de mai sus este formata din cateva linii vectoriale, din care una (bratul omuletului) se misca putin in fiecare set de cadre. Nu avem nevoie de mai mult de 5 minute de miscari rapide pentru a parea ca omuletul face cu mana. Sa privim procedeul…

Omuletul folosit in tutorial

Omuletul nostru este format din 5 linii vectoriale - 1 pentru fiecare picior, 1 pentru corp, 1 pentru ambele brate si 1 cerc pentru cap. Vom misca vectorul care reprezinta bratul pentru a parea ca da din mana.

Crearea primelor frame-uri

Animatiile sunt executate utilizand frame-uri. O imagine din primul frame este copiata, copia este mutata putin si apoi acelasi lucru se intampla cu cel de-al doilea frame pana cand animatia ajunge la final.

Pentru a deschide bara Frames in Fireworks, click "Window" si apoi click "Frames" daca nu are deja o bifa langa acesta. In mod alternativ, tine shift si apasa F2 pe tastatura. Aceasta va deschide bara Frames asa cum este prezentat in imaginea de mai sus.

Avem deja un frame in fisierul exemplu si dorim sa executam mai multe frame-uri pentru a ne anima omuletul. Pentru a crea cel de-al doilea frame, click pe butonul "New/Duplicate Frame" de la baza barei Frames. Vom obtine un frame gol.

Click pe Frame 1 si selecteaza tot (CTRL + A pe tastatura) omuletul si copiaza (CTRL + C pe tastatura). Intoarce-te la Frame 2 si paste (CTRL + V pe tastatura). Aceasta a mutat o copie a omuletului din Frame 1 in Frame 2. Acum putem edita Frame 2 pentru a executa prima miscare a omuletului.

Selecteaza path-ul vectorului bratului omuletului utilizand sub selection tool

Sa selectam bratele omuletului (path-ul vectorului care reprezinta bratele sale) cu sub selection tool. Sub selection tool ne permite sa alegem elemente separate in cadrul unui obiect. De exemplu: putem avea un grup de 5 vectori, sa mutam unul si sa salvam fara ca totul sa fie grupat, putem utiliza sub selection pentru a alege doar un element din acel grup.

In urmatoarea etapa vom utiliza sub selection tool pentru a selecta un punct individual al vectorului care formeaza bratele si 4 puncte pe acel path (2 pentru maini si 2 pentru umeri). Cand am dat click pe path-ul vectorului bratelor, poti subselecta punctul vectorial. Punctele vectoriale apar sub forma unor casute albe care devin albastre cand sunt selectate.

Deja am selectat punctul vectorial in imaginea de mai sus. Cele doua linii albastre care se observa aparand din punctual vectorial, controleaza linia curba dintre punctul nostru selectat si punctul vectorial al umarului, despre care vom vorbi in curand. Acum, sa tragem putin punctul vectorial al mainii pentru a crea prima miscare.

Executarea primei miscari in frame-ul 2

Mai sus putem vedea prima miscare a punctului vectorial al mainii. L-am deplasat doar putin, dar daca il deplasam usor de-a lungul mai multor frame-uri, animatia va parea mai armonioasa decat cand completam animatia doar din cateva frame-uri.

Primele 2 frame-uri

Apasa play pentru a vedea primele 2 frame-uri in miscare. Pentru a dovedi ce am obtinut pana acum, putem apasa butonul play din bara Fireworks control. Omuletul nostru se misca, desi pare cam ciudat! Se poate sa constati ca omuletul isi misca mana cam repede. Sa vedem cum putem modifica viteza intre frame-uri…

Schimbarea vitezei frame-urilor

In imaginea de mai sus avem 2 frame-uri, ambele avand 50 scris langa. 50 reprezinta numarul millisecundelor rulate de un frame inainte de a trece la urmatorul. Cand vrei sa schimbi aceasta valoare, pur si simplu dublu click pe numar si modifica-l in caseta "Frame delay". Asigura-te ca este bifat "Include when exporting" pentru ca animatia sa ruleze corespunzator cand o vom exporta mai tarziu. Poti experimenta sincronizarea dar mai bine terminam animatia inainte de a ne concentra asupra sincronizarii.

Crearea arcului path-ului vectorului bratului

In frame 2, bratul se deplaseaza in sus dar dorim sa adaugam si o arcuire. Selecteaza punctul vectorial al mainii utilizand sub selection tool din nou. Linia albastra care apare ne permite sa controlam arcul path-ului vectorului dintre punctul vectorial al mainii si cel al umarului drept. In imaginea de mai sus deplasam punctul superior pentru a parea ca bratul se misca de parca s-ar arcui din cot. Aminteste-ti ca oricand poti reveni asupra actiunilor (CTRL + Z pe tastatura) daca nu iti plac modificarile efectuate.

Animeaza bratul pana cand mana se poate deplasa inainte si inapoi.

Am continuat cu metoda urmatoare; copiind tot omuletul din ultimul frame intr-un nou frame, mutand bratul usor si repetand actiunea.

La frame 10 suntem gata sa animam partea superioara a bratului. Nu te ingrijora daca pana acum ai folosit mai multe sau mai putine frame-uri, noi am considerat ca 10 fac animatia sa para armonioasa dar orice numar apropiat va avea acelasi efect. Bratul se afla acum in pozitia in care sta pe loc dar mana continua sa se mute inainte si inapoi. Pentru aceasta avem nevoie de un punct vectorial suplimentar. Acest nou punct vectorial va reprezenta incheietura.

Adaugarea unui punct vectorial pentru incheietura.

Ca mai inainte, selecteaza path-ul vectorului bratului cu sub selection tool. Pentru a adauga un punct vectorial suplimentar trebuie sa utilizam pen tool , pe care l-am utilizat in tutorialul precedent: "Remove Background/Cut Out Image in Fireworks/Photoshop", daca vreti sa aflati mai multe. Aici il vom utiliza doar o data deci cunostintele prealabile nu sunt necesare.

Cand ati selectat pen tool, click pe path-ul vectorial path acolo un dear trebui sa fie punctul vectorial al incheieturii. Acum putem deplasa punctul vectorial superior care reprezinta capatul mainii si path-ul (care reprezinta intreaga mana) se va deplasa intre punctul superior si cel al incheieturii.

Animatia mainii

In frame-ul 11 si 12 am deplasat mana in stanga si acum trebuie adusa in pozitia initiala. Pentru a economisi ceva timp, nu mutam mana inapoi ci copiem intregul omulet din frame 11 in frame 13, si apoi din frame 10 in frame 14. Aceasta a inversat deplasarea catre stanga a mainii si a retrimis-o in centru. Putem crea apoi frame 15 si 16 pentru a deplasa mana la dreapta. Frame-urile 17 si 18 vor avea frame-urile 15 si 14 copiate in ele deci mana se reintoarce la centru.

In animatia noastra, vom muta mana din nou la stanga, se va reintoarce la centru si apoi mana va cobori. Deja am animat destule frame-uri pentru aceasta, asadar urmatoarele frame-uri vor repeta actiunea din frame-urile 11, 12, 13 si 14. Caderea bratului este animata utilizand frame-urile 1 - 9 inversate.

Schimbarea sincronizarii intre frame-uri

Animatia noastra se completeaza in 31 frame-uri dar dupa apasarea butonului play, pare cam inceata. Putem da click pe frame 1 in bara Frames, tinem apasat Shift pe tastatura si selectam ultimul frame. Aceasta ne va selecta toate frame-urile. Acum putem da dublu click pe oricare dintre casetele de sincronizare de langa un frame si modifica sincronizarea tuturor frame-urilor. Am ales 7 millisecunde pentru fiecare frame pentru a face ca animatia sa para armonioasa.

Ruland animatia ar trebui sa vezi omuletul facandu-ti cu mana! Daca nu-ti place vreun frame, poti selecta pur si simplu acel frame si-l poti modifica. Poti modifica si viteza unui singur frame daca doresti sa ai anumite puncte mai lente sau mai rapide.

Exportul animatiei pentru a o utiliza pe web

Cand animatia este gata, trebuie sa o exportam ca fisier animated GIF. Apasa F6 pe tastatura pentru a deschide bara "Optimize". Selecteaza "Animated GIF" si allege optiunile pe care le-am selectat in imaginea de mai sus. Acestea pot varia, dar in cazul animatiei noastre, aceste setari vor oferi o calitate buna si o dimensiune rezonabila a fisierului. Putem da click apoi pe "File" si "Export…" si salva fisierul nostru animated GIF in computer.

Acum avem o imagine animata gata de a fi utilizata pe internet!

Pagina:
1
comenteaza printeaza
Alte tutoriale Adobe Fireworks:
Noteaza acest tutorial
Rating tutorial
 
(7 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (1) spune-ti parerea
dutty17 , Marti, 08 Martie 2011, ora 00:01
#1

Chiar tare tutorial ,l-am examinat cu atentie ..maine dimineata il pun in practica :)!

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
5045
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
5005
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4845
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4820
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4620
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Powerpoint RoR SWF HTML PHP Photoshop Vista Swift 3D CSS AJAX MySQL Excel XHTML Dreamweaver Illustrator Javascript Fireworks XML Ruby on Rails Fotografie Flash SEO Python Java StyleSheet PSD Gimp Outlook Lightroom Word JSON Bridge Action Script Sony Vegas COREL DRAW Verilog
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software