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  /  ActionScript (14)

Introducere in ActionScript Drawing API

01.09.2008
Introducere in ActionScript Drawing API

Acest tutorial te va invata notiunile de baza despre cum sa folosesti ActionScript Drawing API, acesta fiind un set de metode pentru desenarea liniilor, a curbelor, si de umplere dinamica. ActionScript nu dispune de metode pentru realizarea formelor predefinite, cum ar fi cercurile sau dreptunghiurile, insa poate crea forme folosind putinele, insa puternicele, metode API de desen.

Total vizualizari: 5099 5099 afisari   |   Comentarii  1   |   Rating   |   (6 voturi)   |   Timp necesar: 20 min 20 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  www.oman3d.com  
Autor:  Blue_Chi
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

Metodele de desenare API reunesc un mecanism simplu de desenare asemanator celui in stilou, care iti permite sa iti misti varful indicator, sau creionul, de la un punct la urmatorul pentru uni aceste puncte. ActionScript iti permite sa desenezi direct pe orice clip de film folosind metode simple pentru a deplasa creionul, pentru a desena folosindu-l, si pentru a umple zona pe care o acoperi prin liniile pe care le creezi.


ActionScript dispune de urmatoarele metode de desen:

  • .lineStyle (stil linie)
  • .lineGradientStyle (stil linie degrade)
  • .beginFill (incepe umplere)
  • .beginGradientFill (incepe umplere in degrade)
  • .lineTo (linie catre)
  • .curveTo (curba catre)
  • .moveTo (muta catre)
  • .endFill (incheie umplere)
  • .clear (sterge)

In acest tutorial, vom explica metodele de baza care nu implica degradeuri, si deci nu vom aborda .lineGradientStyle sau .beginGradientFill, insa si acestea prezinta similitudini de functionalitate cu alternativele lor fara degradeuri, asa ca ar trebui sa fii capabil sa prinzi si ideea de baza a acestora.

Desenarea liniilor simple folosind .lineStyle si .lineTo

Inainte de a desena ceva folosind metodele de desenare, trebuie sa avem un clip montat ca fundal pe care sa desenam, putem folosi radacina _root a clipului nostru pe post de panza, insa o buna practica ar fi sa cream un clip separat pentru desene, astfel incat sa poti manipula si controla acel clip fara sa influentezi astfel restul filmului tau flash. In loc de aceasta, este mai bine sa creezi un movie clip folosind metoda .createEmptyMovieClip(); pentru acest tutorial vom crea un clip pe care il vom denumi canvas_mc:

_root.createEmptyMovieClip("canvas_mc",1);

Vom incepe prin a desena o linie simpla, aceasta va necesita setarea stilului de linie, adica grosimea (thickness), culoarea, si alte proprietati ale linie. Acest aspect este controlat de catre metoda .lineStyle care dispune de numeroase optiuni de modificare a liniei si trebuie setat inainte de a incerca sa desenam orice linie pe care am dori sa o cream. Vom seta numai proprietatile de grosime si culoare ale stilului nostru, codul general pentru setarea acestora folosind metoda .lineStyle dupa cum urmeaza:

movieClip.lineStyle(thickness, colour);

Proprietatea de grosime (thickness) poate fi setata ca orice numar pozitiv, noi vom folosi 1 astfel incat linia noastra sa aiba o grosime de 1 pixel. Colour este setata ca un cod hexazecimal de culoare, noi vom folosi rosul care are codul de culoare 0xFF0000:

_root.createEmptyMovieClip("canvas_mc",1); 
canvas_mc.lineStyle(1,0xFF0000);

Acum, avem panza noastra gata si stilul de trasare a liniei gata, si avem nevoie sa definim punctul de incepere a liniei noastre, acesta fiind un pas optional, deoaraca, in mod predefinit, linia ar incepe de la punctul de inregistrare a movie-clip-ului, adica punctul 0,0. Noi nu dorim sa incepem de aici, asa ca vom muta stiloul nostru intr-un alt punct folosind metoda .moveTo. metoda .moveTo necesita indicarea unor coordonate _x si _y unde sa se efectueze mutarea, noi vom muta varful stiloului in punctul 50,50 pe panza clipului nostru, asa ca vom proceda in felul urmator:

_root.createEmptyMovieClip("canvas_mc",1); 
canvas_mc.lineStyle(1,0xFF0000); 
canvas_mc.moveTo(50,50);

Linia pe care dorim sa o cream va fi o linie dreapta care va incepe din punctul 50,50 (locatia curenta a stiloului nostru) si vom incheia in punctul 100,50. pentru aceasta, vom folosi metoda .lineTo care necesita furnizarea punctului de final, pe care l-am specificat ca fiind 100,50, iata cum se traduce acest lucru in cod:

_root.createEmptyMovieClip("canvas_mc",1); 
canvas_mc.lineStyle(1,0xFF0000); 
canvas_mc.moveTo(50,50); 
canvas_mc.lineTo(100,50);

Acum, iti poti testa filmul pentru a vedea cum prima ta linie colorata in rosu se deruleaza de la punctul de la punctul 50,50 la punctul 100,50. Iata o vizualizare a ceea ce tocmai am facut:

Flash

Putem continua sa desenam linii una cate una, continuand de la punctul existent si tintind urmatorul punct pentru a crea tot felul de forme, codul de mai jos va avea ca rezultat un patrat, ar trebui sa fie foarte usor de inteles:

_root.createEmptyMovieClip("canvas_mc",1); 
canvas_mc.lineStyle(1,0xFF0000); 
canvas_mc.moveTo(50,50); 
canvas_mc.lineTo(100,50); 
canvas_mc.lineTo(100,100); 
canvas_mc.lineTo(50,100); 
canvas_mc.lineTo(50,50);

Iti poti testa filmul pentru a vedea un mic patrat. Iata o ilustrare a ceea ce tocmai am facut pentru a-l crea:

Flash

Pentru a desena un alt obiect sau linie fara a fi nevoie sa il legam de prima linie pe care ai desenat-o, poti folosi din nou moveTo pentru a-ti deplasa stiloul fara a desena (prin opozitie cu lineTo).

Desenarea curbelor folosind .curveTo

Desenarea unei linii drepte a fost destul de usoara, deoarece ao specificat punctul de incheiere, iar linia a aparut pur si simplu trasata pana la punctul respectiv, insa, pe de alta parte, desenarea unei linii curbe este un pic mai dificila, intrucat necesita folosirea metodei curveTo pentru a stabili punctul in care linia se curbeaza (punctul de control), precum si punctul de incheiere a curbei (punctul de ancorare) din urmatorul format, in care x1 si y1 reprezinta coordonatele punctului de control, iar x2 si y2 sunt coordonatele punctului de ancorare:

movieClip_mc.curveTo(x1, y1, x2, y2);

Flash

Daca dorim sa cream o forma ovala simpla, asemenetoare cu un ochi, folosind doua linii curbe, putem realiza acest lucru folosind codul de mai jos; merita mentionat ca folosirea lui .curveTo necesita aceleasi premise obligatorii ca si .lineTo, mai exact un clip � fundal (adica o panza) si un stil de linie:

_root.createEmptyMovieClip("canvas_mc",1); 
canvas_mc.lineStyle(1,0xFF0000); 
canvas_mc.moveTo(0,50); 
canvas_mc.curveTo(25,0,50,50); 
canvas_mc.curveTo(25,100,0,50);

Flash

Crearea umplerilor folosind .beginFill

Orice forma am crea folosind .lineTo sau .curveTo, aceasta poate fi umpluta cu o culoare pentru a inchide zona creata intre liniile trasate, iar pentru a face acest lucru este suficient sa folosesti .beginFill in loc de .lineStyle si sa ii atribuim culoarea de umplere pe care dorim sa o folosim in urmatorul format:

movieClip_mc.beginFill(colourCode, transparency);

Culoarea trebuie specificata intr-un cod de culoare hexazecimal, iar transparenta trebuie setata ca orice valoare intre 0 si 100, unde 0 inseamna transparent, iar 100 inseamna opac. Nu uita ca trebuie sa specifici filmuletului sa aplice functia .beginFill inainte de a incepe sa desenezi liniile obiectului tau, iata si exemplul nostru de patrat de mai sus, insa cu conturul inlocuit de o umplere:

_root.createEmptyMovieClip("canvas_mc",1); 
canvas_mc.beginFill(0xFF0000, 100); 
canvas_mc.moveTo(50,50); 
canvas_mc.lineTo(100,50); 
canvas_mc.lineTo(100,100); 
canvas_mc.lineTo(50,100); 
canvas_mc.lineTo(50,50); 
canvas_mc.endFill();

Este important sa iti amintesti sa folosesti .endFill la punctul de incheiere pentru a te asigura ca nu colorezi in afara liniilor pe care le-am desenat. De asemenea, as vrea sa subliniez ca de fapt este posibila folosirea lui .lineStyle impreuna cu .beginFill pentru a crea forme care au atat un contur cat si o culoare de umplere.

Indepartarea intregului desen folosind .clear

Ultima metoda API de baza pe care o vom parcurge este .clear, care are functia elementara de a sterge toate desenele dintr-un clip ce foloseste metodele de desenare. Aceasta metoda sterge pur si simplu toate formele anterior desenate intr-un clip, si nu dispune de vreo functie selectoare pentru a putea sterge anumite elemente si patra altele. Pentru a sterge patratul pe care l-am creat in cadrul ultimului pas, putem apela metoda in modul urmator:

_root.createEmptyMovieClip("canvas_mc",1); 
canvas_mc.beginFill(0xFF0000, 100); 
canvas_mc.moveTo(50,50); 
canvas_mc.lineTo(100,50); 
canvas_mc.lineTo(100,100); 
canvas_mc.lineTo(50,100); 
canvas_mc.lineTo(50,50); 
canvas_mc.endFill(); 
canvas_mc.clear();


Cam asta este, nu vom discuta .lineGradientStyle sau .beginGradientFill intrucat sunt un pic cam complexe pentru un tutorial destinat incepatorilor. Simte-te liber sa postezi orice intrebare in casuta de comentarii.

Pagina:
1
comenteaza printeaza
Alte tutoriale Adobe Flash:
Noteaza acest tutorial
Rating tutorial
 
(6 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (1) spune-ti parerea
Tudor Alexandru , Luni, 01 Septembrie 2008
#1

Foarte buna aceasta parte de introducere. Mi-ar place sa vad pe site tutoriale de deseneare dinamica a unor forme mai complexe, poate si niste gradienti.

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
5030
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4985
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4830
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4805
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4605
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Fotografie Swift 3D Ruby on Rails Action Script Excel COREL DRAW Photoshop Word StyleSheet XHTML RoR PHP Lightroom MySQL Verilog SEO JSON Flash Fireworks Javascript CSS AJAX HTML Outlook Sony Vegas Python PSD Java SWF Powerpoint Gimp Dreamweaver Illustrator XML Vista Bridge
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