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 Flash

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

GRAFICA 2D  /  Adobe Flash  /  Animatie (7)

Realizarea unui caleidoscop

07.06.2008
Realizarea unui caleidoscop

Cati dintre noi nu s-au jucat in copilarie cu un caleidoscop... am crescut si am schimbat jucariile: ne plac mai mult calculatoarele, ce pot face ele sau ne place sa le „convingem” sa faca ce vrem noi.

Total vizualizari: 5702 5702 afisari   |   Comentarii  0   |   Rating   |   (4 voturi)   |   Timp necesar: 10 min 10 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  http://thor.info.uaic.ro/~vcosmin/  
Autor:  Varlan Cosmin
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

Vom incepe aceasta prima parte (dealtfel destul de scurta) dedicata graficii in Flash tocmai prin realizarea unui caleidoscop. In primul rand pentru realizarea unui caleidoscop avem nevoie de un obiect care sa  isi modifice forma in timp – acesta este „motorul” caleidoscopului care va fi copiat (de fapt oglinzile caleidoscopului dadeau acest efect de copiere) in diverse pozitii – de obicei in forma circulara.Pentru a copia obiectul in diverse pozitii si a-l putea roti, vom avea nevoie ca acesta sa fie creat ca un MovieClip.

Pentru inceput vom insera in scena un nou MovieClip  (Insert -> New Symbol...) si vom selecta optiunea MovieClip; tot in aceasta fereastra vom bifa optiunea  Export for ActionScript si in campul „Identifier” vom trece „forma”. Aceste setari au rolul de a crea in librarie un obiect ce va putea fi manipulat prin intermediul identificatorului sau (acesta fiind „forma”). Faptul ca  „Export in first frame” ramane bifat va determina Flash-ul sa defineasca obiectul ca facand parte din primul cadru.

Acest lucru este uneori util (atunci cand la inceputul Flash-ului avem nevoie de acest prim obiect) dar alteori poate dauna proiectului pe care il realizam (de exemplu daca vreti sa puneti in primul cadru un obiect construit din foarte multi vectori, o imagine de dimensiuni mari sau un MP3, un eventual preloader va esua in afisarea corecta a procentului de film Flash incarcat). Pentru acest exemplu vom lasa bifata aceasta optiune:

Setarile noului MovieClip

Dupa apasarea butonului OK, va apare o fereastra ce are in centru un semn plus. Acest semn este punctul de referinta al obiectului pe care il veti crea. De exemplu, atunci cand vom aduce MovieClip-ul din librarie si-l vom pozitiona in punctul P(0,0), de fapt acest punct de refernita (semnul plus) va fi suprapus peste P(0,0) si continutul MovieClip-ului va fi asezat relativ fata de el. Cum construiti o animatie in MovieClip-ul pe care doriti sa-l creati:

Selectati primul cadru al liniei temporale si cu ajutorul instrumentului Text adaugati litera „A” scenei astfel incat semnul plus despre care tocmai am discutat sa ramana in partea stanga-sus a literei adaugate. Selectati apoi cadrul douazeci si apasati F6 (apasarea tastei F6 va duce la inserarea unui nou cadru-cheie in aceasta pozitie; operatia de inserare a unui cadru poate fi efectuata si apasand click dreapta pe cadrul douazeci  si selectarea optiunii Insert Keyframe sau din meniuri: Insert->Timeline->Keyframe).

In pozitia cadrului douazeci va apare din nou litera „A” pe care o veti edita cu ajutorul instrumentului Text si o veti transforma in litera „D”. Procedati identic adaugand in cadrul patruzeci litera „P”, in cadrul saizeci litera „O” si in sfarsit in cadrul optzeci din nou litera „A”.

Inserarea literelor la diferite cadre (se continua cu cadrul 60, 80)

Toate literele introduse pana acum se comporta ca elemente textuale si noi aveam nevoie de o forma (grafica) care sa se modifice in timp. Pentru a schimba tipul literelor (din text in element grafic) selectati pe rand cadrele in care ati adaugat litere, selectati litera adaugata si apasati combinatia de taste CTRL+B (sau din meniuri Modify->Break Apart) – aceasta operatie ar trebui efectuata de cinci ori – nu uitati cadrul optzeci. In continuare selectati pe rand cadrele 0, 20, 40, 60       si de fiecare data, din fereastra de proprietati (CTRL+F3 sau din meniuri: Window ->  Properties) modificati optiunea Tween in Shape.
Deasupra liniei temporale selectati „Scene1” pentru a va reintoarce sa editati documentul initial. Din acest moment exista (cel putin) doua posibilitati de a continua:

1. Deschideti biblioteca de obiecte (prin apasarea tastei F11 sau CTRL+L sau din meniuri: Window ->   Library) si printr-o operatie  drag-and-drop aduceti in scena principala simbolul nou creat. Selectati simbolul din scena (ar trebui sa fie incadrat intr-un dreptunghi albastru) si din fereastra de proprietati setat-i numele de instanta „mc0” – MovieClip-ul original dupa care vom face copiile. Tot in fereastra de proprietati selectati in dreptului drop-down-ului „Color” optiunea „Alpha” si valoarea transparentei setati-o la 25%. Selectati primul cadru al scenei principale si (desi credeati ca ati scapat de   ActionScript) scrieti in fereastra Actions-Frame (F9 sau  Window->Developmenent Panels -> Actions) urmatorul cod:

for (i=1; i<36; i++) {
    _root.mc0.duplicateMovieClip("mc"+i, i);
    _root["mc"+i]._rotation = i*10;
}


Codul de mai sus are rolul de a duplica MovieClip-ul existent in scena de inca treizeci si cinci de ori si de a-l roti astfel incat sa se formeze o floare (operatiile se repeta din cauza instructiunii „for” de 35 de ori; aceste operatii sunt duplicare – obtinuta prin apelul functiei „duplicateMovieClip” si rotire – obtinuta prin modificarea parametrului „_rotation” caracteristic fiecarui MovieClip). Testati rezultatul apasand combinatia de taste CTRL+Enter (sau Control -> TestMovie).

2. Puteti ca sa adaugati direct primului cadru urmatorul script (care aduce din biblioteca obiectul cu numele „forma”, il duplica si ii seteaza transparenta la 25% („attactMovie” are rolul de a aduce din biblioteca un MovieClip, parametrul „_alpha” este de asemenea caracteristic oricarui MovieClip si semnifica transparenta):

for (i=0; i<36; i++) {
    _root.attachMovie("forma","mc"+i, i);
    _root["mc"+i]._rotation = i*10;
    _root["mc"+i]._alpha = 25;
}

Imaginea Caleidoscopului (evident ca in Flash va fi animata)

Dezavantajul pe care il are acest mod de construire a unui caliedoscop este aceala ca dupa  un  timp  (egal  cu  numarul cadrelor in care a fost construit – 80 impartit la viteza filmului) animatia  se  va  repeta.  Vom incerca intr-un capitol viitor sa realizam un caleidoscop care sa nu se repete (in care forma care se modifica in timp este generata aleator).

Intrebare: puteati construi caleidoscopul fara a folosi ActionScript deloc ? (incercati sa raspundeti singuri inainte de a citi raspunsul)
Raspuns: Caleidoscopul se putea construi si in intregime manual, aducand pe rand treizeci si sase de instante ale MovieClip-ului din librarie si rotite cu ajutorul ferestrei Transform (CTRL+T sau din meniuri: Window->Design Panels->Transform).

Incercati singuri sa rezolvati acest exercitiu (veti intelege – sper – de ce este atat de important ActionScript-ul si de cata munca inutila va scuteste).

Pagina:
1
comenteaza printeaza
Alte tutoriale Adobe Flash:
Noteaza acest tutorial
Rating tutorial
 
(4 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
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
4180
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4085
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4060
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
3875
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Fotografie Swift 3D SWF JSON Illustrator Fireworks Dreamweaver Gimp COREL DRAW RoR Ruby on Rails Lightroom MySQL Action Script Excel Sony Vegas CSS PSD Verilog XHTML Word Vista HTML AJAX XML Java SEO Powerpoint Outlook StyleSheet Javascript PHP Photoshop Bridge Flash Python
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