Indrumar Ver1

INTRODUCERE IN FLASH
1. Noiuni de baz
Flash, este un software folosit de cele mai multe site-uri WEB. Atunci cnd
navigai pe WEB i vedei pagini care conin animaii sau butoane care fac lucruri
interesante atunci cnd sunt apsate, cel mai probabil vedei obiecte FLASH.
Flash ofer posibilitatea de a crea animaii pe web. Pe scurt, iat la ce se poate
folosi FLASH:
1. Crearea unui film flash prin creare de grafice ce vor fi animate pe durata
filmului
2. Folosirea comenzii PUBLICARE din Flash pentru a exporta filmul intr-un
fiier flash care poate fi vzut ntr-un browser internet. De asemenea Flash
creaz codul corespunztor HTML.
3. Insereaz cod HTML ce refer fiier flash, n documente HTML. Este
similar cu adugarea de grafice ntr-o pagin WEB.
4. Deschiderea browserului web, navigarea ctre pagina dorit i... vizualizarea
obiectelor flash.
Se poate folosi Flash pentru crearea de animaii care s fie adugate n pagini
Web sau se poate crea toat pagina folosind Flash n care se poate aduga text, grafice,
butoane i animaie. Se pot chiar programa aplicaii n Flash.
Urmtoarea list descrie cteva modaliti despre cum poate fi manipulat textul,
graficele i sunetele, folosind Flash:
- Crearea de text static sau animat ntr-o pagin WEB. Se poate alege s se
opreasc animaia dup cteva secunde sau s dureze pn utilizatorul vede
pagina.
- Folosirea instrumentelor Flash pentru crearea propriilor grafice sau importarea
unora deja create. Se poate pune imaginea pe ntreaga pagin, sau doar pe o
poriune a ei.
- Animarea graficelor i setarea opiunii ca obiectele s apar i s dispar,
folosind opiunea de transparen. Obiectele se pot deplasa, pot deveni mai
mari, micora sau se pot roti. Flash permite de asemenea transformarea unei
forme n alta.
- Umplerea formelor i textului cu gradieni (culori care se modific treptat n

altele). Este posibil de asemenea umplerea formelor i textul cu imagini
bitmap importate n Flash.
- Crearea de butoare care nu numai v deplaseaz la pagina dorit dar i
schimb i culoarea sau forma n acelai timp. Putei face butoane care i
modific forma atunci cnd v deplasai cu mousul deasupra lor.
- Adugarea de sunete sau video n filme. Este uor de a aduga efecte sonore n
Flash. Se poate controla i ct dureaz sau dac se repet sau nu.
- Se pot crea meniuri folosite pentru deplasarea pe site. Se pot crea instrumente
pentru navigare precum i butoane tip radio.
2. Interfaa cu utilizatorul
a) Interfaa. Dac nu ai creat niciodat animatie, ecranul Flash difer de alte
programe cu care ai putea fi obinuit aa c este bine s l cunoatem mai nti. Figura
1 prezint o vedere posibil:
Meniu
Descriere
View
V ajut s modificai vederea scenei prin modificarea zoom-ului,

sfiarea sau ascunderea diferitelor instrumente, pentru uurina
utilizrii
Insert
Permite inserarea de simboluri, de a insera i terge marcaje pe

Timeline (frame-uri sau frame-uri cheie), de a aduga layere sau scene
Modify
Permite modificarea simbolurilor, formelor sau frame-urilor, efectelor

de pe Timeline, scenelor sau chiar a ntregului film. Ofer i
instrumente pentru transformarea, alinierea, gruparea obiectelor.
Text
Permite formatarea textului i verificrile de sintax
Commands
Permite refolosirea sau managementul comenzilor salvate. O comand

reprezint orice aciune fcut n Flash, cum ar fi desenarea sau
editarea obiectelor.
Instrumente
Bara de meniuri
Evolutie n timp
- Timeline
Alte instrumente
Scena
Bar proprieti
Control
Permite controlul vizualizarea filmelor, testarea filmelor si scenelor
Window
Deschide noi ferestre, noi paneluri pentru controlul obiectelor
Help
V ajut cnd avei nevoie de ajutor.
Dreptunghiul alb din centrul imaginii reprezint scena. Ea trebuie privit ca

locul unde sunt plasate obiectele. Se pot plasa grafice i texte care apoi vor fi animate.
De asemenea Flash afiaz filmele pe scen. mprejurul scenei este o zon gri numit
Pasteboard. Se poate folosi pentru a pune pe ea obiectele create dar care nu dorii s
fie plasate pe scen nc. Coninutul plasat n acest spaiu nu apare n fiilmul final.
Deasupra scenei se observ fereastra de TIMELINE ce mparte filul creat n
frame-uri. Fiecare frame reprezint o bucatde timp (ex: 1/12 secunde). Crearea unui
film presupune doar unirea mai multor frame-uri, care vor fi afiate rapid, n ordine.
n partea stng a ferestrei este lista de straturi (layers). Atunci cnd deschidei
un fim nou, se va observa doar un singur strat, numit.... Layer 1. Straturile ajut ca
obiectele s rmn separate i s nu se contopeasc unele n altele cauznd rezultate
neateptate. De exemplu, dac dorii s avei un text fix i un punct care este animat,
este mai uor s le plasai pe straturi diferite i s animai doar stratul care conine
punctul.
n partea dreapt a Layer 1 se observ cteva ptrate, fiecare din
elereprezentnd un strat. n mod implicit, fiecare frame dureaza 1/12 secunde. Fiecare
strat are propiul rnd de frame-uri ntruct pe fiecare strat pot exista obiecte diferite,
fiecare cu propria animaie.
Un frame cheie (keyframe) este un frame care definete unele modificri n
animaie. n unele animaii, fiecare frame este un frame cheie. Alte animaii necesit
doar primul i ultimul frame s fie frame cheie.
b) Modificarea fundalului i dimensiunii scenei.
Scena ofer o vedere asupra coninutului Flash final, ce va fi n fiierul publicat.
Pentru a modifica dimensiunea acesteia precum i fundalul:
1. n panelul de instrumente, selectai Selection
2. Dai un click oriunde n spaiul gri de lng scen, astfel nct nici un oiect
sa nu fie selectat. Zona de proprietti de sub scen, va afia proprietile
ntregului document.
3. Pentru a modifica culoarea fundalului dai click pe Background color apoi
selectai culoarea dorit (de ex. albastru deschis avnd codul: #99CCFF)
4. Pentru a modifica dimensiunea, apsai Size. n fereastra care se deschide
scriei 750 pentru limea scenei, apoi apsai OK.
c) Adugarea de grafice n scen.
Pentru a aduga obiecte din Librrie n document, mai nt trebuie verificat c
este activ stratul corect. Apoi obiectele sunt trase pe scen:
1. n Timeline, dai click pe Stratul dorit pentru a-l selecta.
2. Selectati instrumentul Selection din bara de instrumente

3. Selectai obiectul dorit i tragei-l e scen. Putei folosi sgeile pentru a
aeza obiectul n locul dorit.
d) Testarea documentului.
Orice document creat trebuie salvat i verificat periodic pentru a fi siguri c se
comport corect. Pentru aceasta salvai fiierul (File Save) iar apoi selectai
Control test Movie. Coninutul Flash este vizualizat ntr-o fereastr ce vede fiiere
swf. Dei .fla este extensia pentru fiierul n lucru, extensia final pentru fiierul de
testat, exportat i publicat, este .swf.
Atunci cnd terminai de vizualizat fiierul de testare, nchidei fereastra.
3. Crearea unui Baner.

a) Primul pas este modificarea proprietilor.
n fereastra de proprieti modificai dimensiunea documentului la 160 lime i
600 nlime. (Implicit un document are dimensiunea 550x400). Este necesar s
introducei aceste valori ntruct creai un baner i ar trebui utilizat dimensiunea
standard a acestuia. De asemenea putei modifica culoarea de fundal sau frame rate-ul.
nainte de a merge mai departe, salvai documentul.
b) Importarea graficelor.
Atunci cnd lucrai n Flash, probabil vei dori ca o parte din obiecte s le
importai din exterior (avei logo-ul firmei pe care dorii s l folosii). Se pot importa o
mare varietae de tipuri de obiecte, cum ar fi PNG, JPG, AI, sau PSD. Graficele
importate sunt pstrate n librria documentului. Acolo se pot pstra att obiectele
importate, ct i simbolurile create n Flash. Un simbol este un obiect vectorial, buton,
font, sau clip video care a fost creat o dat i se poate folosi de cte ori este nevoie.
nainte de a continua salvai documentul i punei imaginile de importat n
acelai director n care este i fiierul baner.fla pe care l creai.
1. Din meniu alegei File Import Import to library
Se va deschide o fereastr care v va permite s alegei documentul de importat.
Imaginea este importat n librrie. Ea nu este vizibil pe scen nc.

2. Dac librria nu este vizibil implicit, selectai Window Library.
3. Selectai imaginea importat n librrie i tragei-o pe Scen.
Orice punei pe Scen va fi vizibil i n fiierul SWF final.
4. Dai click pe instrumentul de Selecie i apoi selectai obiectul pe scen.
Dac v uitai n panelul de proprieti, putei observa c avei posibilitatea s
modificai limea i nlimea imaginii, precum i poziia n scen.
5. Salvai documentul
c) Introducerea de straturi noi (layere).
Fereastra Timeline se afl poziionat deasupra Scenei n speiul de lucru. Ea
conine frame-uri i straturi i v ajut s organizai obiectele n document la diferite
momente de timp.
1. Selectai Layer 1 din Timeline i apoi apsai punctl alb din dreptul Layer1,
de sub lact. Astfel se blocheaz coninutul de pe stratul respectiv astfel
nct s nu fie mutat accidental din scen.
2. ntruct singurul strat existent este blocat, trebuie s creai straturi noi
nainte de a aduga noi obiecte. Nu se pot aduga obiecte ntr-un strat blocat.
3. Pentru a modifica numele unui strat, dai dublu-click pe numele lui.
Reddenumii stratul n Fundal. Atunci cnd avei straturi multiple, este
bine s dai fiecrui strat un nume sugestiv.
4. Selectai stratul Fundalapoi apsai butonul Insert Layer pentru a insera
un strat nou. Noul strat este creat deasupra celui existent.
5. Redenumii noul strat Animatie.

Toate obiectele care se vor aduga pe acest nou strat se vor afla deasupra celor
de pe nivelul anterior.
6. Salvai documentul
d) Importarea graficelor pe un anumit strat
Mai devreme ai importat imaginea direct n biblioteca documentului, iar mai
apoi ai pus obiectul pe scen. Se poate importa un obiect direct pe scen, nu numai n
librrie. Mai nti trebuie s selectai frame-ul unde dorii s selectai frame-ul unde
dorii s plasai obiectul, n Timeline iar apoi importai obiectul pe scen:
1. Selectai nivelul Animaie
2. Selectai frame-ul 1.
3. Select File Import Import to stage. Va apare o fereastr care v
permite alegerea obiectului de importat de pe disc.
4. Obiectul va fi importat pe stratul respectiv i va apare i pe scen. Obiectele
importate direct pe scen sunt adugate n mod implicit i n librrie.
e) Testarea aplicaiei
La final putei testa documentul folosind Flash. Astfel vei vedea cum arat
fiierul SWf final. Pentru aceasta selectai Control Test Movie din meniul principal.
Se va deschide aplicaia Flash Player care va vizualiza varianta compilat a fiierului
FLA.
f) Adugarea de text
Din motive decorative, este necesar s adugm i tex banerului creat. n Flash
se pot aduga cteva tipuri de text:text static, text dinamic sau text introdus de
utilizator. Textul static este folositor atunci cnd se adaug text informativ n scen sau
pentru orice alt motiv care nu necesit modificarea lui. Textul dinamic se folosete
atunci cnd trebuie ncrcat dintr-un document extern sau trebuie modificat atunci cnd
se vizualizeaz fiierul SWF.
Momentan vom aduga n banerul nostru text static. Pentru aceasta vom
urmapaii urmtori:
1. Selectai Insert Timeline Layer pentru a insera un strat nou.
2. Modificai numele acestuia n Text
3. Selectai instrumentul Text, din bara de instrumente, care arat ca o litera A
4. Dai un click pe Scen, apoi introducei textul (ex: primul meu baner)
5. n bara de instrumente verificai ca textul selectat s fie de tipul Static Text
6. Din bara de proprieti modificai fontul, dimensiunea acestuia la o valoare
convenabil, precum i culoarea
7. n bara de proprieti, la Font Rendering alegei Bitmap text (no anti-alias).
Metodele de Anti-alias ajut textele scrise mic s apar clar n aplicaii, dar fac
ca textele scrise mar s apar deformat.
Atunci cnd ai terminat, rezultatul ar trebui s arate ca in figura de mai jos.
g) Realizarea unui desen simplu

Instrumentele pentru desen se afl n bara de instrumente.
Pentru desenarea liber se folosete instrumentul tip creion (Pencil tool). El este
folosit ca i un creion obinuit pentru a crea forme libere. Oridecte ori se doerte
crearea de forme care nu sunt deja standard n bara de instrumente (patrulatere sau
cercuri) se folosete acest instrument. n plus fa de un instrument standard, sunt
ncorporate i alte opiuni interesante cum ar fi ndreptarea liniilor desenate sau
aproximarea formelor (de exemplu dac se deseneaz ceva care seamn cu un
triunghi, Flash va transforma forma respectiv intr-un triunghi.
Pentru a desena un oval:
1. Alegei instrumentul Oval din bara de instrumente.
2. Dai un click pe Scen i tragei spre colul opus pn obinei forma dorit
3. Dac dorii desenarea unui cerc, n timp ce tragei, inei apsat tasta SHIFT
Pentru a desena o linie dreapt folosind intrumentul Pen:
1. Dai click pentru punctul de nceput
2.
3.
4.
Dai click pentru punctul de final

Continuai s adugai segmente, prin adugarea de puncte adiionale
Dai dublu-click pentru a ncheia procesul
h) Realizarea unui simbol

Un simbol este un obiect creat n Flash. Un simbol poate fi un grafic, buton,
clip video i el poate fi refolosit de oricte ori este nevoie n documentul Flash sau
chiar n alte documente. Atunci cnd se creaz animaie, este mult mai convenabil s se
animeze un simbol, dect desenele direct. Aceasta nseamn c obiectele trebuie mai
nti convertite la simboluri i de abia apoi animate. Acest lucru ajut la reducerea
dimensiunii fiierelor SWF.
Pentru a crea un simbol, urmai paii:
1. Alegei instrumentul e selecie din bara de instrumente.
2. Selectai desenul realizat
3. Dac desenul este compus din mai multe pri, inei apsate tasta SHIFT i
dai click cu mouse-ul pe fiecare obiect n parte.
4. Alegei Modify Convert to symbol din meniu. Se va deschide fereastra de
conversie din imaginea urmtoare
5. Dai numele dorit (ex: Fa 1) apoi dai OK.

6. Simbolul creat va fi adugat n librrie.
7. ntruct un obiect poate apare de mai multe ori pe Scen, trebuie fcut
diferena ntre numele unui obiect i numele instanei (fiecare instan are un nume
diferit). Numele instantei se definete n bara de proprieti a simbolului.
Rezultatul ar trebui s fie urmtorul:
DESENAREA IN FLASH
2
1. Crearea propriilor desene.

a) Creionul
Creionul din Flash este gndit s poat fi folosit ca i un creion real pentru a crea
forme libere. De cteori dorii s desenai o form care nu este predefinit n Flash,
putei folosi Creionul (PENCIL). Acesta are ncorporate i unele funcii speciale cum
ar fi corectarea desenelor prin ndreptarea liniilor desenate. De asemenea are i funcii
de recunoatere a formelor. De exemplu dac desenai ceva care seamn cu un
triunghi, Flash va desena un triunghi.
Pentru a-l folosi, selectai Pencil din bara de instrumente. Dai click pe scen i
desenai. Dup ce eliberai butonul mouse-ului, Flash va modifica desenul creat
aproximnd forma.
Atunci cnd selectai instrumentul Pencil, vor apare n
lista de opiuni 3 posibiliti care pot fi alese pentru
funciile de aproximare:
Straighten ndreapt liniile i transform
patrulaterele, cercurile, elipsele i triunghiurile n
forme perfecte
Smooth netetzete liniile curbe, eliminnd
neregulile. Se poate specifica gradul de netezire
Ink netezete i ndreapt uor liniile i curbele,
dar le las n mare msur aa cum au fost
desenate.
Atunci cnd folosii unul din instrumentele de desenare putei controla i alte
opiuni cum ar fi tipul liniei (Stroke style), grosimea acesteia (width sau height)
precum i tipul captului liniei (ending).
Aceste opiuni mpreun cu altele le gsii in bara de proprieti.
Grosimea liniei poate fi definit pn la maxim 200 puncte. 1 punct este egal cu
1
/72 inch.
Grosime
Culoare
Tipul liniei
Scalare simbol
Finalitatea liniei poate fi (figura din stnga):

None fr o finalitate predefinit
Round se adaug un capt rotund. Dimensiunea acestuia este jumtate
din grosimea liniei.
Square un capt ptrat se adaug la final. Dimensiunea acestuia este
jumtate din grosimea liniei.
Atunci cnd se unesc mai multe linii, exist trei tipuri de coluri (figura din
dreapta):
Miter se creaz un col ascuit
Round se creaz un col rotund
Bevel se creaz un col ascuit, tiat
Dup ce ai fcut un desen, acesta va trebui transformat n simbol (cum a fost
prezentat n platforma 1). Se poate specifica cum va fi scalat grosimea liniei ntr-un
simbol:
Normal scalarea se face att pe orizontal ct i pe vertical
Horizontal grosimea este scalat doar orizontal. Aceasta se aplic
liniilor verticale, astfel nct ele devin mai groase pe msur ce sunt mrite
Vertical grosimea este scalat doar vertical. Aceasta se aplic liniilor
orizontale, astfel nct ele devin mai groase pe msur ce sunt mrite
None liniile nu devin mai mai groase pe msur ce se scaleaz
simbolul
b)
Alte instrumente
Pentru a desena o linie putei alegei Line Tool din bara de instrumente. Pentru a
desena o linie la un unghi ce este multiplu de 45o, inei apsat tasta SHIFT atunci
cnd desenai linia. i pentru acest instrument se poate seta grosimea, stilul i culoarea
ntr-un mod asemntor cu instrumentul Creion.
Instrumentul Rectangle va desena un dreptunghi. Dac dorii s desenai un
ptrat, inei apsat tasta SHIFT atunci cnd desenai. Spre deosebire de linii, ptratele
conin dou tipuri de obiecte: interiorul i grosimea liniei.
Fill Color Specific culoarea care va fi n interiorul dreptunghiului.
Stroke Color Specific culoarea liniei care determin dreptunghiul.
Se pot specifica dimensiunile dreptunghiului n avans. n bara de proprieti
putei defini n avans lungimea, nlimea precum poziia n scen. Dup ce dai OK
acesta va aprea n scen..
Pentru a desena un oval/cerc alegei opiunea Oval din bara de instrumente. Dai
click n interiorul scenei i tragei spre colul opus. (cercurile nu au coluri, dar cred c
s-a neles ideea). Pentru a crea un cerc perfect inei apsat tasta SHIFT atunci cnd
desenai.
c)
Tierea formelor
Prima regul este c atunci cnd folosii Pencil sau Line i desenai o linie care
se intersecteaz cu alte forme, aceasta va aciona ca un cuit i le va tia. Efectul se va
vedea doar atunci cnd ncercai s selectai i s mutai obiectul. Linia desenat va fi i
ea mprit n segmente.
De exemplu, dac desenai o line frnt peste o inim, vei obine dou jumti
de inim.
Atenie: Dac imaginea care dorii s o modificai este importat dintr-o
imagine extern, nainte de a face , modificri trebuie s selectai desenul pe scen i
apoi s dai click dreapta Swap bitmap.
d) Obiecte suprapuse
O alt regul de care trebuie inut cont este c atunci cnd suprapunei dou
forme, forme de deasupra va nlocui tot ceea ce se afl sub ea. Rezultatul se poate
observa atunci cnd ncercai s mutai una din forme. Devine puin mai complicat
cnd:
Dac cele dou forme au aceeai culoare atunci se vor combina ntr-o singur
form avnd culoarea comun
Dac cele dou forme au culori diferite, ele rmn separate. n acest caz se
creaz aa-numitele decupaje
e)
Desene artistice
Putei realiza desene artistice folosind intrumentul Pensul (Brush). Avantajul

este c putei crea efecte artistice. Putei ajusta dimensiunea i forma pensulei, iar dac
avei o tabl grafic putei seta i grosimea.
Pentru a desen fie vertical sau orizontal, inei apsat tasta SHIFT. La acest
instrument nu exist a linie de contur. Exist doar forma plin.
Atunci cnd selectai instrumentul Pensul n bara de Opiuni apar diferite
modele de pensul. Ele definesc cum vor apare obiectele desenate pe scen:
Paint normal se deseneaz fr efecte speciale. Aceast opiune se folosete
cnd nu dorii s v batei capul cu alte setri
Paint fills se deseneaz umpleri i goluri pe scen. Culoarea nu va acoperi

liniile. Dei acestea par acoperite atunci cnd desenai, dup ce eliberai butonul
mouse-ului, reapar.
Paint behind se deseneaz ns patele obiectelor existente, doar n spaiul
liber de pe scen.
Paint selection se coloreaz doar obiectul selectat.
Paint inside se deseneaz n interiorul liniilor. Doar coninutul obiectului
unde se ncepe desenul va vi colorat.
f) Gradieni
Dac dorii s folosii o culoare gradat, gradienii reprezint soluia. Ei
reprezint o combinaie de dou sau mai multe culori care se contopesc treptat unul n
altul. Flash permite folosirea a maxim 16 culori.
Gradientul poate fi liniar sau radial.
Pentru a crea un gradient, urmai paii:

a. Alegei Window Color Mixer pentru a deschide instrumentul pentru
gradient. Alegei apoi Lienar sau Radial, n funcie de preferine.
b. Pentru a utiliza un gradient predefinit selectai csua Fill Color din bara de
insrumente i alegei un gradient din partea de jos a paletei de culori.
2. Adugarea de animaii simple

Putei crea animaie n Flash prin adugarea de coninut pe Timeline. Atunci
cnd cnd se vizualizeaz un Timeline, fiecare frame este vizualizat, iar cnd acest
lucru se ntmpl suficient de rapid, se creaz o animaie. Atunci cnd creai o animaie
frame cu frame, fiecare va reprezenta un frame cheie.
ntr-o animaie standard, se definesc keyframe-urile ca fiind punctele importante
din animaie, cu schimbri majore, i se las Flash s creeze coninutul frame-urilor
intermediare. Flash afieaz frame-urile interpolate cu albastru deschis sau verde
deschis i legate ntre ele cu o sgeat.
1. Alegei Modify Document
2. Modificai numrul la frame rate la 18 fps apoi dai OK. Un frame-rate mai
mare are rolul de a face animaia s par mai lin.
3. Dai dublu click pe steaua de pe banner (aveti grij s fie deja convertit la
simbol). Acest lucru va deschide simbolul n modul editare i se poate lucra cu
timeline-ul simbolului care este independent de timeline-ul fiierului.
Orice modificare pe care o facei n acest mod se refer strict la simbol, nu la

instana scenei.
4. Selectai frame 15 i apoi executai INSERT Timeline Keyframe
5. Selectai Frame 30 i apsai F6 pentru a insera un nou Keyframe.
6. Selectai frame 15 i modificai n bara de proprieti dimensiunea simbolului
7.
8.
Modificai luminozitatea la +50% (n bara de proprieti Color)

Selectai orice frame ntre 1 i 15 i apoi n Bara de proprieti Tween
selectai motion.
9. Selectai orice frame ntre 15 i 30 i apoi n Bara de proprieti Tween
selectai motion.
10. Testai fiierul rezultat
3. Crearea de butoane
Atunci cnd creai un banner, de cele mai multe ori avei nevoie s permitei
utilizatorului s dea click undeva n interiorul su i s deschidei o nou fereastr.
n Flash butoanele se creaz foarte uor. Putei crea butoane cu un desen,
rollover, cu sunete, animaii sau chiar butoane invizibile. Acestea sunt utile, de
exemplu, cnd dorii s facei ntregul banner link ctre o alt pagin.
1. Dai un click n interiorul scenei, fr a selecta nici un obiect
2. Inserai un strat nou (layer) pe care denumii-l Button
3. Selectai instrumentul Ptrat din bara de instrumente.
4. n seciunea Color selectai instrumentul Creion (Pencil) pentru a selecta
culoarea conturului.
5. Selectai No Color
6. Desenai un dereptunghi n Scen

7. Alegei instrumentul de selecie apoi selectai dreptunghiul desenat
8. Modificai dimensiunea acestuia la: 160 lime i 600 nlime, astfel nct s
acopere scena.
9. Convertii dreptunghiul ntr-un Simbol. i alegei tipul simbolului ca fiind
Button
10. Dai dublu click pe dreptunghi pentru a intra n modul de editare simboluri
11. Acum butonul creat este unul standard (Ceea ce vd utilizatorii cnd
butonul st pe scen). Dorii ns ca acesta s fie unul invizibil. De aceea
trebuie mutat din UP n frame-ul HIT.
12. Dai click pe frame-ul negru din Keyframe-ul UP (fig din stnga) i innd
butonul mouse-ului apsat, tragei-l sub key frame-ul HIT (fig din dreapta).
13. Dai click pe Scene 1 pentru a v rentoarce n Timeline-ul principal.
14. Acum este un vl albastru peste ntreaga scen. Dac v deranjeaz,
ascundei Stratul Buton (optiunea HIDE).
4. Scrierea unor aplicaii simple

Este nevoie s adugai unele scripturi cu aciuni simple la baner la acest buton
invizibil pentru a deschide un website sau pentru a trimite informaii cum ar fi de cte
ori s-a dat click pe banner. Acest lucru se realizeaz prin cod de programare (script).
Primul pas este s se dea un nume butonului, altfel codul nu are cum s
defineasc butonul din TIMELINE.
1. Selectai butonul invizibil de pe Scen
2. n bara de proprieti denumii instana inv_btn
3. Inserai un nou Strat (Layer) pe care l inserai Aciuni

4. Deschidei bara de Aciuni (Window Actions) i selectai Frame 1 din
stratul Aciuni.
5. Adugai urmtorul script:

inv_btn.onRelease = function()
{
getURL("http://www.google.ro", "_blank");
};
Evenimentul la care v referii este onRelease i anume la eliberarea butonului
mouse-ului. Apoi i spunei ce pagin s deschid, intr-o fereastr noua (_blank). Dac
dorii ca noua pagin s fie deschis n locul celei curente, inlocuii _blank cu _self.
6. Salvai documentul apoi testai-l
GRADIENTI, STRATURI, BUTOANE

3
1. Aplicarea unui gradient

1.
2.
3.
4.
5.
Alegei din bara de instrumente, instrumentul de selecie.

Selectai Steaua (obiectul asupra cruia dorii s aplicai gradientul)
Selectai Window Color mixer
n Fereastra Color Mixer la Type, selectai LINEAR
n Overflow selectai modalitatea de dispunere a gradientului
6. Selectai culoarea care va fi folosit

7. Selectai din bara de instrumente Gradient Transform. El va apare pe
Scen, lng gradient.
8. Rotii intrumentul de Gradient, astfel nct culoarea s fie dispus dup

preferine
Pentru aplicarea unui gradient radial, selectai n csua Type, n locul opiunii
LINEAR, opiunea Radial.
1
2
Avei posibilitatea att de a roti modul de dispersie a culorii 1 (asemenea
ca la tipul LINEAR), ct i raza n care este fcut trecerea 2
2. Crearea de straturi (Layers)

a) Straturi masc
Un strat masc ascunde toate obiectele la care se refer din stratele asociate, cu
excepia acelora din interiorul unei forme. Putei folosi mtile pentru a crea efecte
speciale cum ar fi puncte luminoase sau... guri n imagine (nchipuii-v c v uitai
pe gaura unei chei).
Pentru a crea un strat masc care simuleaz privirea prin gaura unei chei,
urmai paii:
1. Creai obiectele din scen
2. Selectai stratul cel mai de sus, i inserai nc un strat deasupra. Acest nou
strat va deveni stratul masc. Denumii-l Masca
3. Desenai sau importai o form plin, text sau simbol care va fi folosit n
noul strat. Partea plin a formei va deveni transparent (gaura), iar partea
liber va fi opac
4. Dai click-dreapta pe numele stratului Masca i alegeti din meniul ce apare:
MASK.
Masca se va aplica doar ultimului strat (cel dinaintea stratului masc). Efectul
este vizibil imediat:
5. Pentru a aduga i alte straturi sub masc, selectai-le pe rnd, apoi dai
click dreapta Properties i alegei la tip, MASKED.
Atunci cnd crei o masc, aceasta va bloca (lock) straturile asupra crora se
aplic. De aceea, nu se mai pot efectua modificri asupra lor.
Pentru a putea s le editm, ele trebuie mai nti s fie deblocate.
Dac dorii ca un anumit strat s nu mai fie sub masc, exist dou posibiliti:
Click-dreapta Properties i schimbai tipul pe Normal
Trageti stratul respectiv deasupra stratului masc. Va fi automat scos
de sub efectul acesteia.
b) Animarea stratelor masc
Stratele masc sunt mult mai interesante atunci cnd le animai. Putei s le
mutai, redimensionai, s le schimbai forma. Dac ati creat masca anterioar, putei
s o deplasai deasupra scenei pentru a vizualiza ce se afl sub ea. Putei crea aceeai
tehnic pentru a plimba un punct luminos deasupra scenei. Ceea ce nu putei face este
s animai obiectele din stratul masc s se deplaseze de-a lungul unei anumite ci.
Pentru aceasta efectuai paii (paii detaliai au fost prezentai n capitolul
anterior):
1. Convertii desenul la Simbol
2. Dai dublu click pe desen pentru a intra n modul de editare simbol
3. Creai cteva key-frame-uri cu desenul n diferite poziii n scen
4. Creai Motion Tween ntre key-frame-uri
c) Crearea stratelor de ghidaj
Un strat ghid (Guide Layer) este un strat invizibil la final. Acesta se poate
folosi pentru:
Animaie puei amplasa un traseu pe stratul ghid pentru a controla
micarea unui obiect animat
Gril dei Flash v las s afiai pe ecran ghidaje pentru a desena mai
prcis, putei totui plasa linii de ghidaj pe un astfel de strat
Desenare putei importa o imagine pe un strat de ghidaj, apoi s desenati
dup ea pe un strat obinuit. Desigur c putei folosi un strat obinuit pe care
s--l tergei mai apoi. Dar dac dorii s revenii, este mai greu
Pentru a crea un strat de ghidaj:
1. Poziionai-v pe stratul care dorii s l ghidai
2. Creai un strat nou. Redenumii-l NOTE.
3. Dai click-dreapta pe el i alegei Guide Layer.
Statul este acum un strat ghid.
Pentru a-l transforma napoi ntr-un strat obinuit folosii aceeai procedur.
Atunci cnd folosii stratul ghid ca i un ghid de micare, trebuie s creai o
legtur cu stratul ce conine obiectele de animat (stratul ghidat).
Pentru a crea o astfel de legtur, folosii una din posibilitile:
- Creai un strat nou, sub stratul ghid
- Tragei un strat existent sub stratul ghid
Alegei MODIFY Layer i alegei Guided n csua Layer Properties
- Flash indenteaz stratul ghidat sub stratul Ghid pentru a observa mai uor c
este un strat ghidat.
- Avnd stratul ghid nc selectat, alegei instrumentul Text din bara de
instrumente.
- Pe scen, lng stea, adugai: Informaii: Obiect animat. n mod implicit,
micarea se repet
- Salvai documentul i testai-l
Dac dorii s tergei legtura cu stratul ghid, tragei stratul ghidat desupra
stratului ghid i alegei Modify Timeline Layer Properties i selectai
NORMAL la proprieti
3. Lucrul cu text
a) Creai o csu de text expandabil
Atunci cnd adugai text pe scen, putei defini dimensiunea csuei text sau
crei o csu care se redimensioneaz astfel nct s se potriveasc textului pe care l
scriei. Pentru a aduga text n scen urmai paii:
1. Dai click undeva n scen, fr a selecta vreun obiect.
2. Selectai instrumentul TEXT
a. n bara de proprieti setai proprietile : static text, font: Arial ,
size 13.
b. n Timeline selectai stratul Text.
c. Dai un click pe scen apoi ncepei s scriei textul: Baner creat
de Gigel. Csua de text se redimensioneaz pe msur ce scriei
d. Repoziionai csua n locul dorit n baner.
Dac dorii o csu text de dimensiune fix, n loc s dai click pe scen,
desenai un dreptunghi, care va reprezenta csua.
b) Adugarea unei csue de inserare text
Putei crea csue text (input text field) pentru a da posibilitatea utilizatorului s
interacioneze cu aplicaia Flash.
1. n Timeline selectai stratul TEXT
2. I instrumentul Selecie selectat, dai un click n scen, departe de alte
obiecte
3. Selectai instrumentul TEXT
4. n bara de Proprieti facei setrile:
a. La Text Type selectai INPUT TEXT
b. Selectai dimensiune font 12, font Arial.

c. Selectai Single Line n Line Type.
d. Verificai s fie selectat optiunea Show Border.
c) Adugarea text dinamic

Un input text este o instan a obiectului ActionScript TextField cruia putei s
i asignai proprieti sau metode. Este bine s numii fiecare instan a obiectelor
aflate pe scen pentru a v putea referi la ele de oriunde..
1. Selectai Input textul pe care l-ai creat. n bara de proprieti, la
Instance name introducei: firstName_txt.
2. Adugai o nou csu pe care denumii-o lastName_txt
Textul dinamic poate afia text din surse externe. Mai departe vei folosi un
fiier extern denumit Instructiuni.txt aflat n directorul curent al fiierului fla.
1. Creai fiierul text n care introducei textul: Acest fisier trebuie sa fie n
acelai loc cu flisierul surs
2. Selectai stratul TEXT.
3. Selectai instrumentul text.
4. n bara de proprieti, selectai opiunile:
a. Selectai Dynamic text, la tipul textului
b. Selectai Arial, dimensiune 6
c. Selectai tipul la Multiline
d. Denumii instana: newFeatures_txt
5. Desenai csua pe scen
6. Intrai n fereastra Actions Frame i adugai urmtorul script:
// Load text as variable and assign it to the
// dynamic text field
var features_lv:LoadVars = new LoadVars();
features_lv.onLoad = onText;
features_lv.load("Instructiuni.txt");
function onText(success:Boolean) {
if (success) {
newFeatures_txt.text= features_lv.toString();
} else {
newFeatures_txt.text = "unable to load text
file.";
}
}
d) Verificarea ortografiei
Flash 8 introduce noi opiuni cum ar fi cea de verificare a ortografiei n
majoritatea locurilor unde apare text n document, inclusiv campuri text, nume de
straturi, i stringuri din scripturi.
Pentru a verifica ortografia urmai paii:
1. Slectai Text Spelling Setup
2. Verificai faptul c este bifat Check Text Fields Content i c ai selectat
dicionarul dorit
3. Selectai Text Check Spelling i rspundei mesajelor aprute
e) Adugai o component buton
Componentele sunt clipuri care ofer o posibilitate facil de a aduga funcii
avansate la documentul creat, fr s fii nevoit s cunoatei ActionScript. Vom crea
un Buton care face suma a dou numere.
ntruct acesta se bazeaz pe ActionScript 2.0, mai nti trebuie configurat
setrile de publicare:
1. Selectai File Publish Setings
2. Selectai Action Script 2.0 n meniul pop-up.
3. n Timeline selectai stratul Text
4. Facei vizibil pe scen fereastra Window Components
5. Tragei componenta User Interface Button, pe scen
6. Denumii instana calcul
Pentru a putea face ast operaie, trebuie definite variabilele pentru fiecare n
parte n ActionScript.
7. n Timeline selectai Frame 1 din stratul text i deschidei fereastra Actions
8. Adugai urmtorul script:
// Declare variables and values for car part
prices
var nr_1 = 200;
var nr_2 =50;
var rez = 0;
//Set initial values for the quantity text fields.
nr1.text = 0;
nr2.text = 0;
rezultat.text = 0;
9. Declarai o funcie care s rein ntr-o variabila rez, suma celor 2 numere:
this.onEnterFrame = function (){
rez.text = Number (nr1.text)*Number (nr_1) +
Number (nr2.text)*Number (nr_2);
};
f) Adugai un handler de eveniment pentru buton
criei un handler pentru componenta buton pentru a gestiona click-urile mouseului.
Vei folosi handlerul on( ) pentru a face acest calcul.
1. Selectai componenta Buton i mergei la ActionScript
2. Selectai Buton <Calcul> n partea stng sub componente pentru a specifica
c acest handler este ataat direct de buton i nu de un anumit frame.
3. Adugai scriptul:
on(click) {
with(_parent){
rezultat.text=Number(nr1.text)+ Number(nr2.text);
}
}
4. Publicarea pe un site.
Acum avei deja creat un banner cu grafice, animaie i care reacioneaz la
click. Pentru a vedea cum arat pe o pagin HTML, executai paii:
1. Selectai File Publish Preview HTML.
2. Dai click pe banner pentru a vedea efectul
3. nchidei pagina.
5. Inserarea Banerului ntr-un fisier HTML

1. Selectai File Publish
2. Fiierul va fi exportat ntr-un fiier cu extensia swf (cum fiierul nostru se
numea test.fla, fiierul rezultat va fi test.swf)
3. Deschidei pagina n care dorii s inserai banerul
4. Salvai o copie a acesteia n directorul unde se afl i fiierul exportat
swf.
5. Deschidei n modul editare fiierul html n care dorii s inserai banerul
6. n interiorul tag-ului body, inserai urmtorul cod:
<object width="160" height="600" title="aa">
<param name="movie" value="test.swf">
<param name="quality" value="high">
<embed src="test.swf" quality="high" width="160"
height="600"></embed>
</object>
7. Salvai fiierul.
Butoane, Scripting
4
1. Crearea unui buton din mai multe obiecte grupate

a) Crearea Butoanelor
Putei crea butoane care s cuprind text i grafice, incluznd imagini bitmap i
obiecte grupate. Vom crea mai departe un buton care include un logo i text.
1. Deschidei un nou document i definii dimensiunea Scenei de 500 x 500
2. Importai pe scen o sigl i adugai text
3. Selectai cele dou componente pe scen i dai Modify Convert to
symbol
4. Denumii-le BtnSiLogo i alegei buton la tipul simbolului
5. n matricea Registration, verificai c este bifat cmpul din stnga sus.
Acesta reprezint punctul de plecare de unde simbolul este aliniat i rotit.
6. Denumiti instana, n bara de proprieti: logo_btn
b) Vizualizarea zonei click-abile
Atunci cnd opiunea Enable Simple Buttons este activ, se pot observa
opiunile mai puin complexe ale butoanelor, cum ar fi zona pentru click, culorile
folosite pentru diferitele stri ale butoanelor.
Un design mai complex pentru butoane cum ar fi animaiile, nu sunt posibile.
1. Dai un click n scen, pentru a deselecta orice obiect
2. Selectai Control Enable Simple Buttons
3. Plimbai mouse-ul peste buton pentru a vedea efectele. Observai c zona
alb dintre logo i text nu este o zon activ.
4. Selectai Control Enable Simple Buttons din nou pentru a dezactiva
opiunea. Va trebui s redefinim zona activ pentru buton pentru a acoperi
i zona neactiv.
5. Pe scen dai dublu click pe scen pentru a intra n Timeline-ul butonului.
Butonul Are urmtoarele stri: Up, Over, Down i Hit.
6. Redenumii numele stratului n HIT AREA.
7. Selectai Frame-ul 4 (Hit Frame) i apsai F6 pentru a aduga un
keyframe.
8. n bara de instrumente alegei ptratul.
9. Desenai pe scen un patrulater care acoper ct mai exact zona ocupat de

logo i text. Aceasta va defini zona unde poate fi apsat butonul.
10. Apsai Scene 1 pentru a iei din modul de editare

11. Selectai Control Enable Simple Buttons. Zona activ a butonului s-a
modificat conform dreptunghiului desenat.
12. Deselectai Control Enable Simple Buttons
c) Creai animaie pentru o stare a butonului
Vom crea o animaie simpl pentru starea Over a butonului.
1.
2.
3.
4.
5.
6.
7.
8.
9.
Pe scen dai dublu click pe buton pentru a intra n modul de editare

Inserai un nou strat pe care l denumii Culoare
Ascundei toate celelalte straturi cu excepia acestuia
Selectai n acest strat, keyframe-ul OVER.
Convertii-l la simbol. Denumii-l ButonAnim i selectai ca i tip
MovieClip (nu buton).
Dai dublu click pe buton pentru a intra n modul de editare
Selectai frame-ul 15 i apsai F6 pentru a insera un key-frame
Cu selecia nc pe Frame-ul 15, selectai butonul i modificai la
proprieti luminozitatea
Dai click oriunde n Timeline ntre frame 1 i 15
d) Adugai o aciune pentru buton

Atunci cnd utilizatorul d click pe buton i animaia vrei c Animaia s se
finalizeze. Vei folosi ActionScript pentru a controla deplasarea derulrii animaiei n
Timeline.
1. Adugai un nou strat n Timeline-ul de animaie al butonului i denumii-l:
Aciuni.
2. Pe stratul de Aciuni adugai un keyframe la frame-ul 15.
3. Deschidei fereastra de aciuni
4. Avnd frame-ul 15 selectat, Mergei la GLOBAL FUNCTIONS
Timeline Control din bara de instrumente a meniului Actions i dai dublu
click pe STOP. Aciunea stop v las s specificai faptul c aciunea se va
opri cnd ajunge la Frame-ul 15.
5. Dai click pe Scene 1 de deasupra scenei, deasupra Scenei, pentru a iei din
modul editare simbol.
6. Selectai Control Enable Simple Buttons pentru a testa butonul (apoi
dezactivai-l
e) Adugai navigaie pentru un buton
Putei aduga navigaie la un buton pentru a deschide o pagin web i fr s
cunoatei ActionScript.
1. Pe Scen selectai butonul
2. Selectai Window Behaviors i dai Add Behaviour apoi selectai Web
Go to Web Page
3. n csua pentru link (URL) dai adresa dorit. Selectai de asemenea
_blank pentru a deschide pagina ntr-o pagin nou.
4. Dai OK
2. Programarea ActionScript
a) Flash conine mult mai multe aciuni dect cele prezentate mai departe.
Putei recunoate printre instruciunile disponibile i cteva familiale cum ar fi FOR,
WHILE sau IF.
Obiectele care pot fi mutate pe ecran sunt cel mai des folosite pentru
jocuri,bri culisabile sau alte scopuri mai utile. Pentru a crea un astfel de elment
urmai paii:
1. Alegei Insert New Simbol pentru a crea un simbol.
2. n fereastra de creare simbol, dai un nume simbolului, alegei Movie Clip
i dai OK
3. Pe scen creai un obiect pe care dorii ca utilizatorul s aib posibilitatea
s-l mute
4. Alegei Edit Edit Document pentru a reveni la Timeline-ul principal
5. Tragei clipul creat din Library pe Scen
6. Dai un nume instanei: clip1
7. Selectai primul frame n Timeline
8. Deschidei fereastra de ActionScript
9. Dai click pe butonul de Script Assist pentru a opri aceast opiune, dac
este selectat
10. Adugai urmtorul cod:
clip1.onPress=function(){
this.startDrag();}
clip1.onRelease=stopDrag;
b) Adugarea de comentarii n codul Action Script
Este posibil s dorii s obinei i alte informaii suplimentare atunci cnd
adugai cod, legat de instruciunile respective. Fereastra de Help afieaz informaii
legate de instruciunea adugat.
n panelul Script din fereastra Actions, selectai cuvntul cheie pentru care
dorii s aflai mai multe detalii. Apsai butonul de help i vor apare informaiile
despre cuvntul cutat.
Pentru a aduga comentarii la scripturi, Adugai la nceputul liniei //.
Dac comentariile se ntind pe mai multe linii, putei folosi /* ... */
c) Scrierea unei funcii pentru un buton
O funcie este de fapt o comand scris n ActionScript. O funcie poate fi
refolosit de oricte ori este nevoie.
Vom scrie o funcie care face simbolul vizibil pe ecran (visible = true) atunci
cnd eliberai butonul mouse-ului.
1. Adugai n scen un buton pe care l convertii la simbol
2. Redenumii butonul: buton1
3. Adugai comentariul
//funcie de afiare simbol
4. n fereastra de ActionScript (din Timeline-ul principal) adugai scriptul
buton1.onRelease = function()
{
clip1._visible = false;
};
d) Verificarea sintaxei
Pentru a se executa corect, ActionScript depinde de o sintax corect. Pentru
acest lucru, Flash ofer o serie de posibiliti:
Click n fereastra de Action Script n colul din dreapta sus: Check
Syntax
Apsai butonul Check Syntax din butoanele de la bara de ActionScript
e) Script extern
Aciunile pot fi pstrate i n fiiere externe pe care Flash le va ncrca atunci
cnd este nevoie. Acest lucru face ca scriptul s fie mult mai uor de refolosit. Este
mult mai uor de refolosit i corectat codul dac este pus n intregime ntr-un singur
loc.
Pentru a crea un fiier separat de ActionScript n Flash, alegei File New i
alegei ActionScript File din New Document. Tastai codul script acolo i salvai
fisierul. Fiierul salavat va avea extensia .as.
Pentru a include codul dintr-un fiier extern, adugai acest cod acolo unde
avei nevoie folosind:
#include nume_fiier.as
f) O funcie care execut rotirea oricrui obiect
1. Creati pe scen o csu text, dinamic n care s putei afia ceva.
2. Selectai primul frame din stratul principal i deschidei fereastra de aciuni
3. Introducei scriptul
// ENTER RotateDisplayOrDrag() function here
function RotateDisplayOrDrag (whichPiece) {
if (<not set yet>) {
} else if (<not set yet>) {
} else {
}
}
Parametrul which piecece identific obiectul selectat va fi apelat de 3 ori n
corpul funciei. Atunci cnd funcia este apelat, parametrul este substituit cu obiectul
slectat.
Acum am creat structra de baza a funciei
4. Selectai condiia if din linia de cod. Adugai Key.isDown(18) la
condiie. Acest cuvnt cheie v permite s aflati ce tast a apsat
utilizatorul. Codul 18 reprezint codul pentru tasta ALT. Deci se va
verifica dac utilizatorul a apsat acea linie de cod.
5. Din Bara de instrumente Actions Categoria Miscellaneous Actions dai
dublu click pe aciunea evaluatepentru a insera o nou linie de cod.
Tastai _root[whichPiece]._rotation += 90 la expresie. Se va roti piesa
selectat dac utilizatorul are apsat tasta ALT.
6. Adugai la condiia din else if condiia: Key.isDown(Key.SHIFT)
7. Adugai : pieceNumber = whichPiece.slice(5)
Aceast linie afieaz numrul obiectului. Metoda SLICE taie un numr de
caractere din numele instanei (n cazul nostru 5). Rezultatul funciei se va
pstra n variabila pieceNumber.
8. Selectai linia de cod ELSE
9. Adugai condiia: _root[whichPiece]
10. Adugai n corpul funciei startDrag(_root[whichPiece],false, 20, 20,
780, 580);
11. Codul final ar trebui s fie urmtorul:
function RotateDisplayOrDrag (whichPiece) {

if (Key.isDown(18)) {
_root[whichPiece]._rotation += 90;
} else if (Key.isDown(Key.SHIFT)) {
pieceNumber = whichPiece.slice(5);
} else {
startDrag(_root[whichPiece],false, 20, 20,
780, 580);
}
}
g) Apelul unei funcii
O funcie poate fi apelat din orice frame a unui clip, acolo unde avei nevoie
de acea aciune. Avei nevoie de o cale (target path) pentru a apela o funcie. La noi
toate funciile sunt declarate n primul frame, deci calea este _root.
1. Creai un buton care s aib ca i efect apelul funciei.
2. Adugai scriptul:
// ENTER RotateDisplayOrDrag() function here
btnFct.onRelease = RotateDisplayOrDrag (clip1);
function RotateDisplayOrDrag (clip1) {
if (Key.isDown(18)) {
_root[clip1]._rotation += 90 ;
} else if (Key.isDown(Key.SHIFT)) {
_root[clip1]._rotation -= 90 ;
}
h) Exemplu de Script care afieaz un ceas digital

1.
2.
3.
4.
5.
Creai un document care conine 3 straturi: fundal, text i Aciuni

Selectai frame-ul 1 din stratul Background i desenai cadrul ceasului
Selectai Frame2 i apsai F5
Mergei la Fame 1 din stratul text i inserai o csu de tipul Dynamic Text
Selectai frame 2 i apsai F5
6. Dai numele instanei text: clock_txt

7. Mergei la Frameul 1 din stratul Actions
8. Adugai acest Script:
time=new Date(); // time object
var seconds = time.getSeconds()
var minutes = time.getMinutes()
var hours = time.getHours()
if (hours<12) {
ampm = "AM";
}
else{
ampm = "PM";
}
while(hours >12){
hours = hours - 12;
}
if(hours<10)
{
hours = "0" + hours;
}
if(minutes<10)
{
minutes = "0" + minutes;
}
if(seconds<10)
{
seconds = "0" + seconds;
}
clock_txt.text = hours + ":" + minutes + ":" +
seconds +" "+ ampm;
9. Mergei la frameul 2 din stratul Actions i apsai F6 pentru a aduga un nou

keyframe
10. Adugai la frame 2 urmtorul apel:
gotoAndPlay(1);
i) Exemplu de Script care genereaz efectul gravitaiei asupra unei bile
1.
2.
3.
4.
5.
Creai dou cercuri pline, unul mai mare i unul mai mic
Converii-le la simboluri i alegei tipul movie clip.
Denumii instana obiectului mai mare parent iar cea mic, child
Creai o linie diagonal
Convertii-o la simbol (movie clip) i dai numele instanei line
6. n timeline-ul principal, adugai urmtoarea comand:

_root.line._visible = 0;
7. Selectai obiectul Child i adugai scriptul:
onClipEvent (load)
{
spring = false;
startX = _x;
startY = _y;
spX = 0;
spY = 0;
_root.line._visible = 1;
parentx = _root.parent._x;
parenty = _root.parent._y;
_root.line._x = parentx;
_root.line._y = parenty;
_root.line._xscale = _root.child1._x-parentx;
_root.line._yscale = _root.child1._y-parenty;
}
onClipEvent (mouseDown)
{
startDrag ("", true);
spring = true;
}
onClipEvent (mouseUp)
{
stopDrag ();
spring = false;
}
onClipEvent (enterFrame)
{
parentx = _root.parent._x;
parenty = _root.parent._y;
_root.line._x = parentx;
_root.line._y = parenty;
_root.line._xscale = _root.child._x-parentx;
_root.line._yscale = _root.child._y-parenty;
//!spring = if false
if (!spring)
{
//code to create the movements
spX += (startX-_x);
spY += (startY-_y);
spX *= .09;
spY *= .09;
_x += spX;
_y += spY;
}
}
j) Exemplu de Script care genereaz efectul de ninsoare
1. Creai un mic cerc plin, colorat n alb (fulgul de nea)
2. Convertii-l la simbol (movie clip) i denumii instana snow
3. Selectai simbolul pentru a intra n timeline-ul su.

4. Creai 3 keyframe-uri
5. n primul Keyframe adugai comanda:
mov = 0;
ran = getProperty("", _x);
6. n cel de-al doilea keyframe adugai comenzile:
setProperty ("", _y, mov=mov+2);
snowy = getProperty("", _y);
setProperty ("", _x, (ran+random(2)));
if(snowy > 310)
{
setProperty ("", _y, 50);
mov=0;
ran = ran - 10;
}
7. n cel de-al 3-lea keyframe adugai comanda:
gotoAndPlay (2);
8. Mergei n timeline-ul principal i creai 2 keyframe-uri
9. Adugai urmtorul script n primul keyframe:
if (snowparticles<150)
{
duplicateMovieClip("snow","snow" add i,i)
scale=random(60)+10
setProperty("snow" add i,_x,random(450))
setProperty("snow" add i,_xscale,scale)
setProperty("snow" add i,_yscale,scale)
snowparticles++
i++
}
10. Adugai urmtoarea comand n cel de-al doilea keyframe:
gotoAndPlay (2);
Slide Show, Adugarea de coninut audio - video

5
1. Crearea unei prezentri Slide Show
a) Crearea Documentului
Putei crea n Flash i prezentri Slide Show. Pentru aceasta primul pas este
crearea documentului.
1. Dai File New
2. Alegei New Flash Slide Presentation
Observai n slide-urile prezentate faptul c exist o ierarhie ntre ele: exit un
slide master i o serie de slide-uri motenite. Coninutul slide-ului master va apare
n toate slide-urile din document. Fiecare din slide-urile copil are propriul su
Timeline.
b) Adugarea de coninut n slide-uri
Atunci cnd creai un document de tipul acesta, exist implicit posibilitatea
de a naviga ntre slide-uri folosind sgeile de la tastatur.
Pentru a aduga butoane de navigaie pe slide-uri urmai paii:
1. n ierarhia de slide-uri selectai slide-ul pe care dorii s adugai
butoanele
2. Alegei Frame 1 n Timeline
3. Creai un buton pe care il convertii la simbol
4. Denumii simbolul Btn_next
5. Mergei n Window Behaviors i n fereastra care se deschide dai +
6. Selectai Screen Go To Next Slide
7. Repetai paii 3 6 pentru a crea butonul de revenire la slide-ul precedent
8. Testai prezentarea
c) Adugai un nou slide
Putei aduga cu uurin un nou slide:
1. n bara de Outline selectai ultimul slide.
2. Dai click dreapta i alegei Insert Screen
3. Dai dublu click pe slide-ul nou introdus pentru a-l redenumi.
4. Putei trage slide-ul n sus sau jos pentru a-i modifica ordinea.
d) Adugarea de tranziii
Tot ce se adaug pe slide-ul master va fi motenit pe fiecare din celelalte
slide-uri, inclusiv proprietile.
Pentru a face prezentarea mai interesant, putei aduga i unele tranziii ntre
slide-uri.
1. n fereastra de Outline, selectai slide-ul master.
2. Mergei n Window Behaviors i n fereastra care se deschide dai +
(Add)
3. Selectai Screen Transition
4. Alegei, de exemplu, opiunea Fade
5. n fereastra Behavior dai click pe Reveal n coloana Event i alegei din
fereastra care se deschide Reveal Child pentru a deschide urmtorul
slide.
2. Adugarea de coninut audio

a) Importul unui fiier audio
Pentru a aduga sunete n Flash trebuie mai nti s importai fiierul audio.
Putei importa fiiere AIFF, WAV, MP3. Flash pune aceste sunete n Library.
Pentru sunete se pot defini 3 parametri: sample rate, bit rate, channels. Aceti
parametri afecteaz att calitatea ct i dimensiunea fiierului.
Pentru a importa un fiier audio alegei
1. File Import Import to Library pentru a deschide fereastra de import
2. Alegei fiierul pe care dorii s l importai
3. Dai Open
Pentru a aduga n document fiierul executai paii:
1. Creai un strat nou pentru sunet

2. Tragei din Library sunetul pe scen. Flash extinde sunetul pn la
urmtorul keyframe. Dac nu exist un urmtor keyframe, trebuie s
adugai unul pentru a putea vedea sunetul.
3. Din lista Sound din bara de Proprieti, alegei sunetul pe care dorii s l
adugai
4. Dac dorii, alegei un efect din lista de efecte
5. Alegei una din urmtoarele opiuni pentru sincronizare:
a. Event ncepe s fie auzit atunci cnd primul Keyframe al su
este activ, i continu pn la final, chiar dac animaia se
oprete. Dac Flash face activ keyframe-ul de nceput, clipul
audio este restartat. Folosii aceast opiune dac vrei, de
exemplu, s fie difuzat sunetul de fiecare dat cnd este apsat un
buton.
b. Start - ncepe s fie auzit atunci cnd primul Keyframe al su este
activ, i continu pn la final, chiar dac animaia se oprete.
Dac Flash face activ keyframe-ul de nceput, clipul audio nu
este restartat.
c. Stop - Oprete sunetul
d. Stream sincronizeaz sunetul cu Timeline-ul. Flash poate sri
peste anumite frame-uri dac acestea nu sunt suficient de rapide
ct s in pasul cu sunetul.
b) Editarea fiierelor audio
Dup ce punei n scen un fiier audio, putei s l editai: putei terge
poriuni nedorite sau putei aduga efecte pe unele poriuni.
Pentru a edita un sunet, urmai paii:
1. dai click pe frame-ul care conne sunetul, sau mportai un sunet, aa cum
a fost prezentat mai nainte
2. deschidei fereastra de proprieti
3. Dai click pe butonul Edit pentru a deschide fereastra de editare:
4. Butoanele din partea dreapt jos v dau posibilitatea de a afia fie frameurile pe care le ocup, fie timpul n secunde.
Pentru a modifica volumul fiierului audio, Flash arat un unele linii care
incadreaz sunetul.Acolo unde volumul se modific, Flash poziioneaz nite
ptrate, numite handlere.
Pentru a modifica volumul, tragei de aceste gandlere n sus pentru a mri
volumul sau n jos pentru a reduce volumul.
Dac dorii s adugai i alte handlere n plus fa de cele deja existente, dai
un click pe linia de contur. Flash va aduga automat alte handlere.
c) Compresia fiierelor audio
Sunetul poate mri dimensiunea fiierului Flash foarte mult. De aceea trebuie
s fii foarte ateni atunci cnd l folosii. Este bine s compresai fiierul folosit i
eventual s reducei calitatea pn ajunge la o dimensiune acceptabil.
Sampling rate se refer la rata cu care un calculator msoara sunetul i l
convertete n dat numeric. O rat mai ridicat nseamn o calitate mai bun.
Flash ofer dou posibiliti de a controla proprietile:
- Folosirea setrile Publish unde se vor specifica toate proprietile pentru
sunetele existente n fiierul Flash
- Folosirea ferestrei de proprieti pentru sunet pentru a specifica proprietile
pentru fiecare sunet n parte.
Pentru a deschide fereastra de proprieti, dai dublu click n Library, pe
iconul din dreptul numelui fiierului audio. Se va deschide fereastra:
Tipurile de compresie care pot fi folosite sunt:

- Default - aceast compresie folosete setrile specificate n Publish
- ADPCM - Putei face o conversie de la stereo la mono pentru a reduce

dimensiunea fiierului. Putei alege ntre un sampling rate de 5, 11,22 i 44
kHz. De asemenea putei alege ntre 2,3, 4 sau 5 bits.
- MP3 Este cea mai bun metod de compresie.
- Raw export sunetul fr nici o compresie
- Speech este o compresie optimizat pentru voce
Dup ce specificai tipul compresiei, apsai butonul TEST pentru a verifica
rezultatul
3. Adugarea de coninut video

a) Importul unui fiier video
Standardul Flash a devenit n ultima vreme universal adoptat. Se estimeaz c
aprox. 97% din utilizatori dein Flash Player. Se pot crea filmulee sau se pot
importa Fiiere n diferite formate cum ar fi: avi, mpeg, mov, dv.
Aceste fiiere pot fi incluse n diferite moduri: cea mai simpl metod este
integrarea fiierului video n fiierul swf i vizualizarea lui n Timeline. Aceast
metod funcioneaz bine pentru filmule scurte, sub 10 sec. Clipurile mai mari ar
nsemna s dureze foarte mult download-ul.
O alt posibilitate este aceea de a face streamming de pe un server WEB sau
Flash Communication Server. Aceata presupune ca filmul s fie vizualizat pe
msur ce este downloadat.
nainte de a include un fiier video ntr-o aplicaie Flash, trebuie s verificai
faptul c clipul video are acelai frame rate ca i aplicaia Flash. n caz contrar
rezultatul ar putea fi unul neplcut. De aceea, nainte de a importa clipul, modificai
Flash astfel ca cele dou framerate-uri s coincid.
1. Dai click pe un keyframe
2. Mergei la File Import Import Video
3. Bifai On your Computer pentru a importa fiierul din calculatorul
propriu
4. Dai click pe Choosepentru a alege fiierul
5. Selectai butonul Embed Video in SWF and play in Timeline i apoi
dai next
6. Selectai movie clip din fereastra Symbol. Dac nu dorii s editai clipul,
selectai butonul radio Embed the entire Video
7. Pentru a edita filmul dai Edit, apoi apsai NEXT.
8. Pentru a modifica nceputul unui clip, tragei triunghiul din stnga la

frame-ul dorit.
Pentru a modifica finalul clipului, tragei triunghiul din dreapta
9. Dai Preview pentru a vizualiza rezultatul
10. Dup finalizarea modificrilor dai + pentru a crea un clip cu noile
setri
11. Pentru a redenumi clipul dai dublu click pe numele existent n list i
introducei noul nume
12. Dai NEXT pentru a continua
13. Va apare fereastra de Encoding. Alegei profilul care este cel mai
convenabil
14. Dai NEXt i apoi FINISH
15. Dac dorii s modificai ceva, dai GOBACK
b) Video Streaming
Putei face ca fiierul video s fie vizualizat nainte de a fi descrcat complet.
Aceast posibilitate face ca timpul de ateptare pentru utilizator s fie minim.
Pentru aceasta, urmai paii:
1. Dai click pe un keyframe
2. Mergei la File Import Import Video
3. Bifai On your Computer pentru a importa fiierul din calculatorul propriu
4. Dai click pe Choosepentru a alege fiierul
5. Selectai unul din butoanele: Progressive Download from a Web Server,

Stream from Flash Video Streaming Service, sau Stream from Flash
Communication Server i apoi dai next
Dac nu deinei un Serviciu Flash pentru Video Streaming, alegei prima
opiune: Download from a web service.
6. Alegei profilul dorit de codificare
7. Pentru a edita filmul dai Edit, apoi apsai NEXT
8. Putei modifica i n acest caz punctul de nceput i de final
9. Putei alege de asemenea la ultimul pas i interfaa de vizualizare a clipului
10. Pentru a vedea detaliile clipului, mergei la WINDOW Comp[onent
Inspector
11. Pentru a testa fiierul alegei Control Test Movie
Introducere SVG
1
SVG este un limbaj folosit pentru a descrie grafice 2D si aplicatii grafice

in XML.
Inainte de incepe lucrul cu SVG trebuie cunoscute:
HTML
Basic XML
1 .Ce este SVG?
Denumirea provine de la Scalable Vector Graphics

SVG foloseste grafice bazate pe vectori pentru WEB
SVG defineste graficele in format XML
Graficele realizate cu SVG nu isi modifica calitatea atunci cand sunt
redimensionate
Fiecare element sau atribut din fisierele SVG pot fi animate
SVG este recomandat de World Wide Web Consortium (W3C)
SVG integreaza alte standarde W3C cum ar fi DOM si XSL
2. Avantajele SVG
SVG 1.1 a devenit o recomandare a W3C in Ianuarie 2003.
Sun Microsystems, Adobe, Apple, IBM si Kodak sunt organizatii implicate in
definire limbajului SVG.
Avantajele folosirii SVG fata de alte formate de imagini (cum ar fi JPEG si GIF)
sunt:
Fisierele SVG pot fi modificate foarte usor de orice editor text (exemplu
notepad)
Fisierele SVG sunt de dimensiune mica si mult mai compresibile decat
fisierele JPEG si GIF
Imaginile SVG pot fi redimensionate
Imaginile SVG pot fi imprimate la caliate si rezolutie foarte bune
Imaginile pot fi marite fara degradere a calitatii
Textul in SVG este selectabil si poate fi cautat
SVG lucreaza cu tehnologia Java

SVG este un standard deschis
Fisierele SVG sunt XML pur
Pricipalul competitor al SVG este Flash. Cele doua tehnologii au multe

caracteristici comune. Cel mai mare avantaj al SVG fata de Flash este integrarea
cu alte standarde XSL si DOM. Flash-ul este o tehnologie care nu este sursa
deschisa.
Cel mai mare devantaj al SVG este ca nu toate browserele suporta
complet SVG.
Viitorul SVG-ului insa se anunta starlucitor deoarece Mozzila si
Microsoft vor suporta complet SVG. . Adobe GoLive 5 suporta deja SVG si
numarul de editoare de SVG este in crestere.
Lista de implementari ale SVG la site-ul oficial W3C
Pentru a vizualiza fisierele SVG trebuie instalat un plug-in cum este
Adobe SVG Viewer.
3. Vizualizarea fisierelor SVG

Fisierelor SVG nu pot fi vizualizate daca nu este instalat SVG Viewer .
Salvati Adobe SVG Viewer
a) Exemplu SVG
SVG este scris in XML pur.
In exemplul urmator este un fisier SGG. Fisierele SVG trebuie salvate cu
extensia .svg:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.
dtd">
<svg
width="100%"
height="100%"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<title>Test</title>
<desc>Acesta este primul SVG</desc>
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
Testati fisierul SVG!

Prima linie contine o declatie XML. Se observa prezenta atributului
standalone care specifica daca fisierul SVG este independent sau contine o
referinta la un fisier extern. standalone="no" inseamna ca documentul SVG nu
are nici o referinta la un fisier extern - in acest caz- DTD.
Cea de-a doua si a 3- a linie fac referire la fisierul extern DTD in care sunt
definite elementele care sunt permise pentru definirea SVG. Fisierul DTD este
localizat la adresa: "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd".
Fisierul DTD se gaseste la W3C si contine toate elementele permise de SVG .
Codul SVG incepe cu marcajul <svg> si se termina cu marcajul </svg> .
Acesta reprezinta elementul radacina. Atributele width si height seteaza
dimensiunea documnetului SVG. Atributul version defineste versiunea de SVG
care este folosita iar atributul xmlns defineste spatial de nume pentru SVG.
Elementul <circle> este folosit pentru a crea un cerc. Atributele cx si cy
definesc coordonatele centrului cercului. Daca acestea sunt omise, implicit
centrul cercului va avea coordonatele (0,0). Atributul r defineste raza cercului.
Atributele stroke si stroke-width definesc culoarea si grosimea
conturului formei. Grosimea conturului a fost setata la 2 px, culoarea la negru.
Pentru a defini culoarea cu care umplem forma se foloseste atributul fill . Pentru
exemplul nostru acesta este setat la rosu.
Obeservatie: Ca si pentru orice fisier XML orice marcaj deschis trebuie
sa fie urmat de perechea sa de inchidere.
4. Structura SVG
SVG poate fi definit ca pagina de sine statatoare SVG, ca un obiect
incapsulat intr-altul sau ca un document XHTML .
Cea mai puternica dintre cele 3 metode este afisarea SVG prin folosirea
spatiului de nume.
a)
Pagina SVG de sine statatoare
Exemplul urmator defineste o pagina SVG de sine statatoare. Fisierul

trebuie salvat cu extensia .svg.
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
>
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" x="0" y="0">
....
....
....
</svg>
Deoarece SVG este bazat pe XML cele mai multe motoare de cautare nu
vor colecta informatia din paginile SVG de sine statatoare. Pentru a rezolva
aceasta problema putem insera SVG ca element incapsulat intr-o pagina
XHTML.
b) SVG ca element inclus
Exemplul urmator arata cum se include un document SVG intr-un document
XHTML:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html>
<body>
<object
data="test.svg"
width="500"
height="500" type="image/svg+xml">
<embed
src="test.svg"
width="500"
height="500" type="image/svg+xml" />
</object>
</body>
</html>
Testati fisierul XHTML!
Se observa folosirea marcajelor <object> si <embed>. Conform standardului
XHTML putem utiliza numai marcajul <object>, dar deoarece Nescape nu
suporta acest tag, cel mai indicat este sa folosim ambele marcaje.
Folosind aceasta metoda, documentul va fi luat in considerare de motoarele
de cautare. Totodata, folosind aceasta metoda, este usor sa integram si alte
obiecte (sunete, muzica, Flash) in aceeasi pagina web.
DEFINIREA FORMELOR IN SVG

2
SVG poseda cateva elemente predefinite pentru crearea de forme.
a)
Crearea de forme in SVG
Elemente predefinite in SVG pentru a crea forme sunt:
Dreptunghi<rect>
Cerc<circle>
Elipsa <ellipse>
Linie <line>
Polilinie <polyline>
Poligon <polygon>
Curbe <path>
1. Elementul de marcaj<rect>
Marcajul <rect> este folosit pentru a crea dretunghiuri si diverse variatii
ale dreptunghiurilor.
Exemplu:
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd
">
<svg width="100%" height="100%" version="1.1"
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
Explicarea codului:
Atributele width si height definesc dimensiunile drpetunghiului
Atributul style este folosit pentru a defini proprietatile CSS
Proprietatea CSS fill defineste culoarea de umplere a dreptunghiului (fie

o valoare rgb, un nume de culoare sau o valoare hexadecimala)
Proprietatea CSS stroke-width defineste grosimea conturului
dreptunghiului
Proprietatea CSS stroke defineste culoarea conturului
Exemplu cu folosirea unor atribute noi:

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>
Explicaia codului:
Atributul x defineste coordonata orizontala a coltului stanga sus al
dreptunghiului
Atributul y defineste coordonata verticala a coltului stanga sus al
dreptunghiului
Proprietatea CSS fill-opacity defineste opacitatea culorii de umplere a
dreptunghiului (domeniu posibil: 0 to 1)
Proprietatea CSS stroke-opacity defineste opacitatea culorii conturului
dreptunghiului (domeniu posibil: 0 to 1)
Definirea opacitatii pentru intregul element:

style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>
Exemplu: crearea unui dreptunghi cu colturile rotunjite:
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>
Explicarea codului:
Atributele rx si ry rotunjesc colturile dreptunghiului
2. Elementul de marcaj<circle>
Marcajul <circle> este folosit pentru crearea cercurilor.
<svg
width="100%"
height="100%"
version="1.1"
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
Explicarea codului:
Atributele cx si cy definesc coordonatele x si y ale centrului cercului.
Daca acestea sunt omise, centrul cercului are coordonatele (0, 0).
Atributul r defineste raza cercului
3. Elementul de marcaj<ellipse>
Elementul <ellipse> este folosit pentru crearea unui obiect de tip elipsa.
Definirea elipsei este asemanatoare definirii cercului, numai ca pentru elipsa
raza x este diferita de raza y.
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
Explicarea codului:
Atributele cx si cy definesc coordonatele x si y ale centrului cercului.
Daca acestea sunt omise, centrul cercului are coordonatele (0, 0).
Atributul rx definieste raza orizontala a elipsei
Atributul ry definieste raza verticala a elipsei
Exemplu: crearea a 3 elipse
style="fill:purple"/>
style="fill:lime"/>

style="fill:yellow"/>
</svg>
Exemplu: crearea a 2 elipse care se intersecteaza (una galbena si cealalta alba):
style="fill:yellow"/>
style="fill:white"/>
</svg>
4. Elementul de marcaj <line>

Acest element este folosit pentru crearea unei linii:
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
Explicarea codului:
Atributul x1 defineste punctul de start al liniei pe axa OX
Atributul y1 defineste punctul de start al liniei pe axa Oy
Atributul x2 defineste punctul de sfarsit al liniei pe axa OX
Atributul y2 defineste punctul de sfarsit al liniei pe axa OY
5. Elementul de marcaj <polygon>

Elementul <polygon> este folosit pentru crearea de grafice care cintin cel
putin 3 linii.
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
Explicatia codului:
Atributul points defineste coordonatele x si y pentru fiecare colt al
poligonului
Exemplu: crearea unui poligon cu 4 colturi:
<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc; stroke:#000000;strokewidth:1"/>
</svg>
6. Elementul de marcaj <polyline>

Acest element creeaza orice tip de forma care contine mai multe linii
drepte:
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
7. Elementul de marcaj <path>

Elementul <path> este folosit pentru a crea un drum:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
Observatie: toate comenzile de mai sus pot fi scrise si cu litere mici.
Literele mari inseamna pozitionare absoluta, iar cele mic pozitionare relativa.
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
>

<path d="M250 150 L150 350 L350 350 Z" />
</svg>
Drumul definit in exemplul de mai sus incepe la pozitia 250 150 se
continua cu linia de la pozitia 150 350 apoi cu linia de la pozitia 350 350 si in
final se inchide la pozitias 250 150.
Exemplu:crearea unei spirale spirale:
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
8. Inserarea textului in documentul SVG

<text x="60" y="165" style="font-family: sansserif; font-size: 14pt; stroke: none; fill:
black;">Cat</text>
</svg>
Tema 1:
Creati un grafic ca in urmatoare figura:
Structura documentului SVG

3
Cum am mentionat si in capitolul anterior, SVG permite sa separam

structura documentului de prezentare.
1. Folosirea stilurilor in SVG

Cu SVG, prezentarea graficului se poate face in 4 moduri: inline, definind
stilurile in interiorul documentului SVG, folosirea unui fisier extern in care s-au
definit stilurile sau folosind atribute de prezentare.
a) Stilurile Inline
Exemplu: folosirea stilurilor inline
<circle
cx="20"
cy="20"
r="10"
black; stroke-width: 1.5; fill:
blue; fill-opacity: 0.6" />
style="stroke:
b) Stiluri interne
Exemplu: folosirea stilurilor definite in interiorul fisierului SVG
<svg width="200px" height="200px" viewBox="0 0 200
200">
<defs>
<style type="text/css"><![CDATA[
circle {
fill: #ffc;
stroke: blue;
stroke-width: 2;
stroke-dasharray: 5 3
}
]]></style>
</defs>
<circle cx="20" cy="20" r="10"/>
<circle cx="60" cy="20" r="15"/>
<circle cx="20" cy="60" r="10" style="fill: #cfc"/>

<circle cx="60" cy="60" r="15" style="stroke-width:
1;
stroke-dasharray: none;"/>
</svg>
c) Stiluri externe
Exemplu : definirea unui fisier extern . css
rect { stroke-dasharray: 7 3; }
circle.yellow { fill: yellow; }
.thick { stroke-width: 5; }
.semiblue { fill:blue; fill-opacity: 0.5; }
Exemplu: referirea unui fisier .css in SVG
<?xml version="1.0"?>
<?xml-stylesheet href="ext_style.css" type="text/css"?>
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="200px" viewBox="0 0 200 200"
preserveAspectRatio="xMinYMin meet">
<line x1="10" y1="10" x2="40" y2="10"/>
<rect x="10" y="20" width="40" height="30"/>
<circle class="yellow" cx="70" cy="20" r="10"/>
<polygon class="thick" points="60 50, 60 80, 90 80"/>
<polygon class="thick semiblue"
points="100 30, 150 30, 150 50, 130 50"/>
</svg>
d) Atribute de prezentare
SVG permite specificarea informatiei folosind atribute de prezentare. In
loc sa folosim stiluri putem sa utilizam atribute de prezentare:
In loc de:
<circle cx="10" cy="10" r="5"
style="fill: red; stroke:black; stroke-width: 2;"/>
Putem sa folosim proprietatile atributului:

<circle cx="10" cy="10" r="5"
fill="red" stroke="black" stroke-width="2"/>
Acest mod insa imbina prezentarea cu structura.
Cu ajutorul stilurilor se pot aplica o serie de de caracteristici pentru toate
aparitiile unui element in document. Puterea si flexibilitatea stilurilor permit
realizarea unor schimbari in mai multe documente fara mult prea efort.
2. Gruparea si referirea obiectelor

In SVG se pot grupa diverse elemente pentru a face documentul mai
structurat si mai usor de inteles.
a) Elementul <g>
Elementul <g> include toti copiii sai intr-un grup si adesea are atributul id
pentru a da grupului un nume unic. Fiecare grup are propriile elemente <title> si
<desc>
Stilul care este specificat pentru elementul <g> va fi aplicat tuturor elementelor
din grup.
Exemplu: folosirea elementului g
240">
<title>Grouped Drawing</title>
<desc>Stick-figure drawings of a house and
people</desc>
<g
id="house"
style="fill:
none;
stroke:
black;">
<desc>House with door</desc>
<rect x="6" y="50" width="60" height="60"/>
<polyline points="6 50, 36 9, 66 50"/>
<polyline points="36 110, 36 80, 50 80, 50

110"/>
</g>
<g
id="man"
style="fill:
none;
stroke:
black;">
<desc>Male human</desc>
<circle cx="85" cy="56" r="10"/>
<line x1="85" y1="66" x2="85" y2="80"/>
<polyline points="76 104, 85 80, 94 104" />
<polyline points="76 70, 85 76, 94 70" />
</g>
<g
id="woman"
style="fill:
none;
stroke:
black;">
<desc>Female human</desc>
<circle cx="110" cy="56" r="10"/>
<polyline points="110 66, 110 80, 100 90, 120
90, 110 80"/>
<line x1="104" y1="104" x2="108" y2="90"/>
<line x1="112" y1="90" x2="116" y2="104"/>
<polyline points="101 70, 110 76, 119 70" />
</g>
</svg>
b) Elementul <use>
Graficele complexe adesea contin elemente care se repeta. Cu ajutorul
elementului <use> putem afisa de ori cate ori dorim un grup de elemente definite
o singura data.
Pentru a specifica un grup care se refoloseste trebuie sa precizam URI in
atributul xlink:href si sa specificam coordonatele x si y ale locatiei unde dorim
sa apara grupul.
<use xlink:href="#house" x="70" y="100"/>
<use xlink:href="#woman" x="-80" y="100"/>
<use xlink:href="#man" x="-30" y="100"/>
c) Elementul defs
In precedentul exemplu se pot observa cateva dezavantaje:
Pentru a refolosi graficul man si woman trebuie sa stim pozitiile

originale si sa le folosim pe acestea ca baza
Atributele fill si stroke sunt definite de la inceput si nu pot fi
suprascrise de elementul <use>
In document for fi desenate toate cele 3 grafice definite in cadrul
grupurilor
Elementul <defs> rezolva toate aceste probleme. Incadrand obiectele

grupate intre tagurile <defs></defs>, putem doar sa le definim fara sa le afisam.
Specificatia SVG recomanda ca toate obiectele care sunt refolosite in cadrul
documentului sa fie definite in cadrul tagurilor <defs>.
Exemplu: folosirea elementului <defs>
240">
<title>Grouped Drawing</title>
<desc>Stick-figure drawings of a house and
people</desc>
<defs>
<g id="house" style="stroke: black;">
<desc>House with door</desc>
<rect x="0" y="41" width="60" height="60" />
<polyline points="0 41, 30 0, 60 41" />
<polyline points="30 101, 30 71, 44 71, 44
101" />
</g>
<g
id="man"
style="fill:
none;
stroke:
black;">
<desc>Male human</desc>
<circle cx="10" cy="10" r="10"/>
<line x1="10" y1="20" x2="10" y2="44" />
<polyline points="1 58, 10 44, 19 58" />
<polyline points="1 24, 10 30, 19 24" />
</g>
<g
id="woman"
style="fill:
none;
stroke:
black;">
<desc>Female human</desc>
<circle cx="10" cy="10" r="10" />
<polyline points="10 20, 10 34, 0 44, 20 44,

10 34" />
<line x1="4" y1="58" x2="8" y2="44" />
<line x1="12" y1="44" x2="16" y2="58" />
<polyline points="1 24, 10 30, 19 24" />
</g>
<g id="couple">
<desc>Male and female human</desc>
<use xlink:href="#man" x="0" y="0" />
<use xlink:href="#woman" x="25" y="0" />
</g>
</defs>
<use
xlink:href="#house"
x="0"
y="0"
style="fill: #cfc;" />
<use xlink:href="#couple" x="70" y="40" />
<use
xlink:href="#house"
x="120"
y="0"
style="fill: #99f;" />
<use xlink:href="#couple" x="190" y="40" />
<use xlink:href="#woman" x="0" y="145" />
<use xlink:href="#man" x="25" y="145" />
<use
xlink:href="#house"
x="65"
y="105"
style="fill: #c00;" />
</svg>
Elementul <use> nu este restrictionat la folosirea obiectelor din acelasi
fisier in care el apare; folosirea atributului xlink:href poate specifica orice fisier
valid sau URI.
De exemplu daca cream un fisier organization.svg care contine
urmatoarele elemente:
<g id="company_mascot">

</g>
<g id="company_logo" style="stroke: none;">
<polygon points="0 20, 20 0, 40 20, 20 40"
style="fill: #696;" />
style="fill: #c9c;" />

</g>
<g id="partner_logo">
</g>
Elementele din acest fisier pot fi referite in alt fisier in acest fel :
<use xlink:href="identity.svg#company_logo" x="200"
y="200" />
d) Elementul <symbol>
Elementul <symbol> specifica in alta maniera modul de grupare al
elmentelor. Spre deosebire de elementul <g>, elementul <symbol> nu este
niciodata afisat deci nu este nevoie ca acesta sa fie definit in cadrul elementului
<defs>.
e) Elementul <image>
Cu ajutorul elementului <image> se poate include in document, fie un
intreg fisier SVG sau o imagine. Pot fi incluse fisiere JPEG, PNG, GIF in
documentul SVG.
310">
style="fill: #999999;"/>
style="fill: #cceeff;"/>
<image xlink:href="kwanghwamun.jpg" x="72" y="92"
width="160" height="120"/>
</svg>
3. Transformarea coodonatelor sistemului

Avem nevoie ca un grafic sa fie rotit, redimensionat sau mutat la o alta
locatie. Pentru aceasta SVG prin intermediul elementelor sale permite aceste
transformari.
a) Translatarea
In urmatorul exemplu, in documentul SVG este definit un patrat la
coordonatele (0,0). Acelasi patrat este redesenat la coordonatele (50,50).
Exemplu: translatarea graficului
200">
<g id="square">
<rect
x="0"
y="0"
width="20"
height="20"
style="fill: black; stroke-width: 2;"/>
</g>
<use xlink:href="#square" x="50" y="50"/>
</svg>
Folosirea atributelor x, y este o
transform="translate(x-value, y-value)".
forma
scurta
atributului
Exemplu: mutarea coordonatelor sistemului prin translatie

200">
<g id="square">
<rect
x="0"
y="0"
width="20"
height="20"
style="fill:
none;
stroke:black;
stroke-width:
2;"/>
</g>
<use
xlink:href="#square"
transform="translate(50,50)"/>
</svg>
b) Transformarea de scara
Este posibila redimensionarea unui obiect folosind atributul:
transform="scale( value)" . In acest caz si coordonata x si y sunt inmultimte cu
valoarea value.
Daca dorim ca coordonata x sa fie inmultita cu o valoare si coordonata y cu alta

valoare atunci vom folosi atributul: transform="scale( x-value, y-value)"
Exemplu: Scalarea uniforma a unui obiect
200">
<g id="square">
style="fill: none; stroke: black;"/>
</g>
<use xlink:href="#square" transform ="scale(2)" />
</svg>
Exemplu: Scalarea neuniforma a unui obiect
200">
<g id="square">
style="fill: none; stroke: black;"/>
</g>
<use xlink:href="#square" transform="scale(3,
1.5)"/>
</svg>
c) Aplicarea de transformari multiple
Este posibil sa definim mai multe transformari pentru un obiect.
Exemplu:
<line x1="0" y1="0" x2="0" y2="100" style="stroke:
gray;"/>
<line x1="0" y1="0" x2="100" y2="0" style="stroke:
gray;"/>
<rect x="10" y="10" height="20" width="15"
transform="translate(30, 20) scale(2)"
style="fill: gray;"/>
4. Rotatia
Este posibila rotirea sistemului de coordonate prin specificarea unui
unghi. Unghiul se masoara in sensul acelor de ceasornic, considerand linia
orizontala ca avand ungiul zero.
Exemplu: rotirea in jurul originii
<polyline points="100 0, 0 0, 0 100" style="stroke:
black; fill: none;"/>
<rect
x="70"
y="30"
width="20"
height="20"
style="fill: gray;"/>
<rect
x="70"
y="30"
width="20"
height="20"
transform="rotate(45)" style="fill: black;"/>
Exemplu: rotirea in jurul unui punct folosind transfromarea rotate(angle,
centerX, centerY)
<circle cx="50" cy="50" r="3" style="fill: black;"
/>
<g id="arrow" style="stroke: black;">
<line x1="60" y1="50" x2="90" y2="50" />
<polygon points="90 50, 85 45, 85 55" />
</g>
<!rotirea in jurul unui punct -->
<use
xlink:href="#arrow"transform="rotate(60,50,50)"/>
<use xlink:href="#arrow"transform="rotate(-90, 50 ,
50) "/>
<use xlink:href="#arrow" transform="rotate(-150, 50
50)" />
a) Transformarile skewX si skewY
SVG dispune si de alte transformari: skewX si skewY. Froma generala
pentru aceasta transformare este: skewX(angle) and skewY(angle).
Exemplu: skewX and skewY
<g style="stroke: gray; stroke-dasharray: 4 4;">
<line x1="0" y1="0" x2="200" y2="0"/>

<line x1="20" y1="0" x2="20" y2="90"/>
<line x1="120" y1="0" x2="120" y2="90"/>
</g>
<g transform="translate(20, 0)">
<g transform="skewX(30)">
<polyline points="50 0, 0 0, 0 50" style="fill:
none; stroke: black; stroke-width: 2;"/>
<text x="0" y="60">skewX</text>
</g>
</g>
<g transform="skewY(30)">
<polyline points="50 0, 0 0, 0 50" style="fill:
none; stroke: black; stroke-width: 2;"/>
<text x="0" y="60">skewY</text>
</g>
</g>
5. Filtre
Filtrele SVG pot fi folosite pentru a crea efecte pe diferite forme sau texte.
In SVG exista urmatoarele filtre:
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
Se pot adauga mai multe filtre aceluiasi element. Filtrele se pot defini in
cadrul elementului <defs>.
Exemplu : SVG Gaussian Blur
<svg
width="100%"
height="100%"
version="1.1"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="3" />
</filter>
</defs>
<ellipse
cx="200"
cy="150"
rx="70"
ry="40"
style="fill:#ff0000;stroke:#000000;
strokewidth:2;filter:url(#Gaussian_Blur)"/>
</svg>
Explicarea codului:
Atributul id defineste in cadrul elemetului <filter> numele unic al
filtrului
Efectul filtrului este definit cu tagul <feGaussianBlur>. Prefixul fe este
folosit pentru toate filtrele
Atributul stdDeviation al elementului <feGaussianBlur> defineste
cantitatea de blur
Atributul in="SourceGraphic" defineste ca efectul sa fie aplicat asupra
intregului grafic
Proprietatea filter:url(#Gaussian_Blur) este folosita pentru a lega un
element de un filtru definit
Animatie in SVG
4
Pana in acest moment am creat imagini statice care o data create nu mai
puteau fi schimbate.
In acest capitol vom studia doua metode pentru a nima obiectele grafice:
prima metoda animatie: in care miscarea este controlata de autor; a doua
metoda, folosirea scripturilor permite utilizatorului care vizualizeaza graficul sa
modifice imaginea.
1. Elemente de baza ale animatiei in SVG

Caracteristicile animatiilor in SVG sunt bazate pe specificatiile World
Wide Web Consortium's Synchronized Multimedia Integration Language Level
2 (SMIL2) http://www.w3.org/TR/smil20/.
Exemplu : redimensionarea unui dreptunghi
<rect
x="10"
y="10"
width="200"
stroke="black" fill="none">
<animate
attributeName="width"
attributeType="XML"
from="200" to="20"
begin="0s" dur="5s"
fill="freeze" />
</rect>
height="20"
Explicarea codului:
<animate>: specificarea inceputului animatiei
attributeName : specificarea atributului a carui valoare se poate
schimba in timp
attributeType="XML": width este un atribut XML al elementului
<rect>. Alta valore comuna a atributului attributeType este CSS,
indicand ca proprietatea pe care dorim sa o schimbam este o
proprietate CSS. Daca nu specificam nici o valoare pentru acest
atribut, se va cauta mai intai printre proprietatile CSS definite si apoi

printre atributele XML.
from="200" to="20" : valorile de start si sfarsit pentru atributul
width.Exista de asemenea atributul by care se poate folosi in locul
atributului to si reprezinta deplasarea care se aduga la valorii se start.
begin="0s" dur="5s" : aceste atribute stabilesc momentele de timp
cand animatia trebuie sa inceapa si cand trebuie sa se termine.Timpul
este masurat in secunde in acest exemplu.
fill="freeze": dupa 5 secunde de la inceperea animatiei se pastreaza
atributul si valoarea sa. Daca indepartam aceasta linie, atributul va
reveni la valoarea originala de 200 px .
Exemplu: Mai multe animatii definite pe un singur obiect
style="stroke: black; fill: green; style: fillopacity: 0.25;">
<animate attributeName="width" attributeType="XML"
from="20"
to="250"
begin="0s"
dur="8s"
fill="freeze"/>
<animate attributeName="height" attributeType="XML"
from="20"
to="200"
begin="0s"
dur="8s"
fill="freeze"/>
<animate
attributeName="fill-opacity"
attributeType="CSS" from="0.25" to="1" begin="0s"
dur="3s" fill="freeze"/>
<animate
attributeName="fill-opacity"
attributeType="CSS" from="1" to="0.25" begin="3s"
</rect>
Exemplu: Animatii pe obiecte multiple
<rect
x="10"
y="10"
width="20"
height="20"
style="stroke: black; fill: #cfc;">
<animate
attributeName="width"
attributeType="XML"
begin="0s"
dur="8s"
from="20"
to="120"
fill="freeze"/>
<animate
attributeName="height"
attributeType="XML"
begin="0s"
dur="8s"
from="20"
to="120"
fill="freeze"/>
</rect>
<circle cx="70" cy="70" r="20" style="fill: #ccf;
stroke: black;">
<animate attributeName="r" attributeType="XML"
begin="2s"
dur="4s"
from="20"
to="50"
fill="freeze"/>
</circle>
2. Masurarea timpului
Momentul 0 de timp in SVG este considerat momentul in care documentul
SVG s-a incarcat. Si momentul de final este considerat momentul in care
parasim pagina. Cronometrul pentru animaia SVG pornete atunci cnd SVG sa terminat de ncrcat.
Valoarea de timp trebuie sa fie urmata de o metrica: h(ore), min(minute),
s(secunde), ms(milisecunde). Daca nu se specifica nici o metrica, implicit timpul
va fi considerat in secunde.
Exemplu: Sincronizarea animatiilor
<circle cx="60" cy="60" r="30" style="fill: #f9f; stroke: gray;">
<animate id="c1" attributeName="r" attributeType="XML"
begin="0s" dur="4s" from="30" to="10" fill="freeze"/>
</circle>
<circle cx="120" cy="60" r="10" style="fill: #9f9; stroke: gray;">
<animate attributeName="r" attributeType="XML"
begin="c1.end" dur="4s" from="10" to="30" fill="freeze"/>
</circle>
3. Actiune repetata
Atributul repeatCount permite sa setam de cate ori dorim sa se repete
animatia.
Exemplu: Animatii repetate

<circle cx="60" cy="60" r="30" style="fill: none;
stroke: red;">
<animate attributeName="cx" attributeType="XML"
begin="0s"
dur="5s"
repeatCount="2"
from="60"
to="260" fill="freeze"/>
</circle>
<circle cx="260" cy="130" r="30" style="fill: #ccf;
stroke: black;">
<animate
attributeName="cx"
attributeType="XML"
begin="0s" dur="5s" repeatDur="8s"
from="260" to="60" fill="freeze"/>
</circle>
Asa cum a fost posibila sincronizarea unei animatii cu inceputul sau
sfarsitul alteia, de asemenea se poate stabili inceputul unei animatii cu inceputul
repetitiei unei altei animatii.
Exemplu : Sincronizarea unei animatii cu repetare
<circle cx="60" cy="60" r="30" style="fill: none;
stroke: red;">
<animate
id="circle-anim"
attributeName="cx"
attributeType="XML"
begin="0s"
dur="5s"
repeatCount="3" from="60" to="260" fill="freeze"/>
</circle>
<rect
x="230"
y="100"
width="60"
height="60"
style="fill: #ccf; stroke: black;">
<animate attributeName="x" attributeType="XML"
begin="circle-anim.repeat(1) + 2.5s" dur="5s"
from="230" to="30" fill="freeze"/>
</rect>
4. Elementul set
Toate animatiile exemplificate mai sus modificau valoarea unui atribut in
timp.
Daca se doreste, de exemplu, ca un text la inceput invizibil sa sa fie vizibil

la un anumit moment de timp, se foloseste elementul <set> care are nevoie de
atributul to si de informatia de timp.
Toate aceste animaii i-au modificat valoarea n timp. Este posibil s
dorii setarea unui atribut sau proprietate ne-numeric. De exemplu putei dori ca
un text care este invizibil la nceput s devin vizibil la un moment dat. n acest
caz nu este nevoie neaprat att de fromct i de to. Putem folosi comanda
<set> care necesit doar atributul to.
Exemplul urmtor micoreaz un cerc la 0 i afieaz un text la o jumtate
de secund dup ce a disprut cercul.
Exemplu: elementul set
<circle cx="60" cy="60" r="30" style="fill: #ff9;
stroke: gray;">
<animate
id="c1"
attributeName="r"
attributeType="XML" begin="0s" dur="4s" from="30"
to="0" fill="freeze"/>
</circle>
<text
text-anchor="middle"
x="60"
y="60"
style="visibility: hidden;">
<set attributeName="visibility" attributeType="CSS"
to="visible" begin="4.5s" dur="1s" fill="freeze"/>
Exemplu!!!!!
</text>
5. Elementul animateColor
Elementul <animate> nu este aplicabil si pentru culori, deoarece culoarea
nu este o valoare numerica. Animatia pentru culori se face cu ajutorul
elementului <animateColor>. Atributele sale from si to iau ca valori, culori.
Exemplu: animateColor
<circle cx="60" cy="60" r="30" style="fill: #ff9;
stroke: gray; stroke-width: 10;">
<animateColor attributeName="fill" begin="2s"
dur="4s" from="#ff9" to="red" fill="freeze"/>
<animateColor
begin="2s"
dur="4s"
fill="freeze"/>
</circle>
attributeName="stroke"
from="gray"
to="blue"
6. Elementul animateTransform
Elemntul <animate> nu este aplicabil nici pentru transformari: rotatie,
translatare, scalaresau deformare. Animatia pentru transformari se realizeaza cu
ajutorul elementului <animateTransform>. Atributul sau attributeName este
setat cu valoarea transform, iar atributul type este setat la una din valorile:
translate, scale, rotate, skewX sau skewY.
Exemplu: animateTransform
<g transform="translate(120,60)">
<rect x="-10" y="-10" width="20" height="20"
style="fill: #ff9; stroke: black;">
<animateTransform
attributeType="XML"
attributeName="transform" type="scale"
from="1"
to="4
2"
begin="0s"
dur="4s"
fill="freeze"/>
Stretch
</rect>
</g>
7. Elementul animateMotion
Folosinf elementul <animateTransform> pentru translatare, obiectul va
fi translatat de- a lungul unui linii drepte. Elementul
<animateMotion>
permite translatarea obiectelor de-a lungul unei directii arbitrare.
Exemplu:
<g>
<rect
x="0"
y="0"
width="30"
height="30"
style="fill: #ccc;"/>
<circle cx="30" cy="30" r="15" style="fill:
#cfc; stroke: green;"/>
<animateMotion from="0,0" to="60,30" dur="4s"

fill="freeze"/>
</g>
Daca se doreste miscarea pe o directie mai complexa se poate folosi
elementul <path > pentru definirea acestei directii.
Exemplu: Animatie folosind o directie mai complexa
<!directia pe care va fi deplasat triunghiul -->
<path d="M50,125 C 100,25 150,225, 200, 125"
style="fill: none; stroke: blue;"/>
<path
d="M-10,-3
L10,-3
L0,-25z"
style="fill:
yellow; stroke: red;">
<animateMotion path="M50,125 C 100,25 150,225, 200,
125" dur="6s" fill="freeze"/>
</path>
Exemplu: Animatie de-a lungul unui drum cu autorotatie
<path d="M50,125 C 100,25 150,225, 200, 125"
style="fill: none; stroke: blue;"/>
<path
d="M-10,-3
L10,-3
L0,-25z"
style="fill:
yellow; stroke: red;" >
<animateMotion path="M50,125 C 100,25 150,225, 200,
125" rotate="auto"
</path>
8. Folosirea hiperlegaturilor in SVG

Exemplu: Hiperlegaturi in SVG
<a xlink:href="pisica.svg">
<text
x="100"
y="30"
style="font-size:
12pt;">Pisica</text>
</a>
<a xlink:href="http://www.w3schools.com">
<circle cx="50" cy="70" r="20" style="fill:

red;"/>
style="fill: green;"/>
<path
d="M120
90,
140
50,
160
90
Z"
style="fill: blue;"/>
</a>
Scripturi in SVG
5
Scripturi care sa interactioneze cu graficele create in SVG se pot scrie in

ECMA Script (the European Computer Manufacturer's Association).
Intereactiunile apar atunci cand obiectele grafice raspund la evenimente.
Obiectele pot raspunde la evenimentele mouse-ului: click, mousedown,
mouseup, mouseout, mousemove, sau la evenimente legate de starea obiectului:
load, keydown, keyup.
Pentru a permite obiectelor sa raspunda la un eveniment, trebuie adaugat
atributul oneventName elementului corespunzator. Valoarea acestui atribut va fi
o expresie scrisa in scriptul ECMA, de obicei apelul unui functii. Aceste functii
au ca parametru de obicei, obiectul evt(cuvant rezervat). Obiectul evt are
proprietati si metode care descriu evenimentul care a aparut.
Exemplu: Schimbarea unui obiect
<script type="text/ecmascript"> [1]
<![CDATA[ [2]
function mareste_cerc(evt) [3]
{
var cerc = evt.getTarget(); [4]
cerc.setAttribute("r", 50); [5]
}
function micsoreaza_cerc(evt) [6]
{
var cerc = evt.getTarget();
cerc.setAttribute("r", 25);
}
]]> [7]
</script>
<circle cx="150" cy="100" r="25" fill="red" [8]
onmouseover="mareste_cerc(evt)" [9]
onmouseout=" micsoreaza_cerc (evt)"/>
<text x="150" y="175" style="text-anchor: middle;">
Positionati mouse-ul deasupra cercului pentru a schimba dimensiunea.
</text>
[1] Tagul <script> indica inceputul scriptului. Atributul type indica se tip de
script este folosit.
[2]
In XML caracterul < introduce un tag, de asemenea ampersand-ul care
defineste o entitate. Deoarece ECMA script nu este XML se doreste indepartarea
acestui mod de comportare.
<![CDATA[ indica ca simbolurile < si ampersand-ul sa nu mai fie tratate ca
in XML.
[3]
Functia mareste_cerc are un singur parametru, evenimentul care
declanseaza apelul.
[4]
Se foloseste metoda evt.getTarget pentru a returna o referinta la obiectul
grafic care declanseaza evenimentul si se memoreaza in variabila cerc.
[5]
Pentru a schimba atributul unui obiect grafic, este apelata functia
setAttribute care are 2 parametri: numele atributului care va fi modificat si noua
valoarea la care va fi setat atributul.
Functia corespondent getAttribute care are ca parametru numele atributului
returneaza valoarea atributului ca un string. Aceste functii sunt parte ale DOM
(Document Object Model). DOM este un standard API pentru a accesa,
modifica, rearanja elementele dintr-un document XML.
[6] Functia miscoreaza_cerc este similara cu precedenta.
[7] Tagul ]]> indica terminarea scriptului. De aici simbolul < si & vor fi
interpretate ca in XML. Tagul </script> marcheaza terminarea scriptului ECMA
si reintoarcerea in documentul SVG/XML.
[8] Se defineste obiectul cerc pentru care atributele nu sunt definite cu stiluri
ci sunt atribute de prezentare pentru a avea acces la ele.
[9] Aici este granita intre SVG si ECMA script. Pe evenimetul onmouseover
se apeleaza functia mareste_cerc, iar pe evenimentul onmouseout se apeleaza
functia micsoreaza_cerc.
1. Schimbarea atributelor pentru mai multe obiecte

Uneori dorim ca evenimentul care apare pe obiectul A pentru a-i schimba
diferite atribute sa fie folosit si pentru obiectul B. In exemplul urmator se
modifica dimensiunea unui obiect (tricou) atunci cand utilizatorul apasa pe unul
dintre cele 3 butoane. Butonul curent selectat isi schimba culoarea dupa ce a fost
apasat.
Exemplu: Modificarea mai multor obiecte

<svg width="400" height="250" viewBox="0 0 400
250"
onload="init(evt)"> [1]
<script type="text/ecmascript">
<![CDATA[
var scaleChoice = 1; [2]
var scaleFactor = new Array(1.25,
1.5, 1.75);
function init(evt)
{
transformShirt();
}
function setScale(n)
{
obj
=
svgDocument.getElementById("scale"
+
scaleChoice); [3]
obj.setAttribute("fill",
"white");
scaleChoice = n;
obj
=
svgDocument.getElementById("scale"
+
scaleChoice);
obj.setAttribute("fill",
"#ffc");
transformShirt();
}
function transformShirt()
{
var
obj
=
svgDocument.getElementById("shir
t"); [4]
obj.setAttribute("transform",
"scale("
+
scaleFactor[scaleChoice] + ")");
obj.setAttribute("strokewidth",1
scaleFactor[scaleChoice]);
]]>
</script>
<defs>
<path id="shirt" [5]
d="M -6 -30, -32 -19, -25.5 -13, -22
-14, -22 30, 23 30,
23 -14, 26.5 -13, 33 -19, 7 -30
A 6.5 6 0 0 1 -6 -30"
fill="white" stroke="black"/> [6]
</defs>
<use xlink:href="#shirt" x="150" y="150"/>
<g onclick="setScale(0)"> [7]
<rect id="scale0" x="100" y="10" width="30"
height="30"
fill="white" stroke="black"/>
<text
x="115"
y="30"
textanchor="middle">S</text>
</g>
<g onclick="setScale(1)">
height="30"
fill="#ffc" stroke="black"/>
<text
x="155"
y="30"
textanchor="middle">M</text>
</g>
<g onclick="setScale(2)">
height="30"
fill="white" stroke="black"/>
<text
x="195"
y="30"
textanchor="middle">L</text>
</g>
</svg>
[1]
Imediat dupe ce documentul a terminat sa se incarce, pe evenimentul
onload este apelata functia init. De cele mai multe ori se foloseste acest
eveniment pentru a verifica ca toate variabilele au fost setate corespunzator.
[2]
Acest script lucreaza in functie de butonul ales(S,M, L), setand in mod
corescpunzaor factorul de scalare
[3]
Obiectul svgDocument este o referinta la intregul document SVG si va
fi folosit print intermediul proprietatilor si metodelor sale pentru a accesa diverse
parti ale documentului SVG.
Functia getElementById are ca parametru un string si returneaza obiectul al
carui id este exact stringul transmis ca parametru.
Functia setScale gaseste butonul curent care a fost selectat si ii schimba
culoarea la alb.Apoi modifica culoarea noului buton apasat la galben si
dimensiunea obiectului tricou..
[4]
Functia transformShirt apeleaza metoda getElementById pentru a
accesa obiectul grafic al carui id este shirt si modifica atributul transform la
dimensiunea selectata.
[5]
Se defineste obiectul tricou
[6]
Daca dorim schimbarea unor atribute cu ajutorul scriptului, trebuie sa
avem atribute de prezentare, in locul celor definite cu stiluri.
[7]
Fiecare dintre butoane apeleaza functia setScale cand este apasat
2. Interactiunea cu paginile HTML

Este posibila integrarea unui grafic SVG intr-o pagina web, folosind
elementul<embed>.
Atributele relevante sunt src a carui valoare este URL graficului, width si
height care reprezinta inaltimea si latimea graficului, type a carui valoare este
image/svg+xml. O data adaugat intr-o pagina HTML, se poate aduaga cod in
cadrul scriptului SVG si in codul script al paginii HTML asa incat sa poata
comunica intre ele.
In exemplu care urmeaza vom integra exemplul de mai sus intr-o pagina
HTML. Aceasta pagina web va avea un formular prin intermediul caruia
utilizatorul va putea sa stabileasca procentajele pentru culoarea in care doreste sa
apara obiectul grafic.
Exemplu:
<html>
<head>
<title>SVG and HTML</title>
</head>
<body bgcolor="white">
<h2>SVG si HTML</h2>
<div align="center">
<embed src="shirt_interact.svg"
width="400" height="250"
type="image/svg+xml" />
<form name="rgbForm">
Red:
<input
id="fld0"
type="text"
value="100"
onchange="updateSVG(0, this.value)" />% <br
Green:
<input
id="fld1"
type="text"
value="100"
onchange="updateSVG(1, this.value)" />% <br
Blue:
<input
id="fld2"
type="text"
value="100"
onchange="updateSVG(2, this.value)" />%
</form>
</div>
</body>
</html>
size="5"
/>
size="5"
/>
size="5"
Here is the script that goes into the head of the HTML document.
Function updateSVG
checks to see that the input value is an integer (it will discard any decimal part),
and, if so,
calls setShirtColor. setShirtColor is actually a reference to a function that exists
in the
SVG document, and it will be the SVG document's responsibility to connect the
function
to this HTML reference.
Function updateHTMLField will be called from the SVG document's script. It
will
receive a form field number and a percent value, which it will display in the
appropriate
form field.
<script language="Javascript">
<!-function updateSVG(which, amount)
{
amount = parseInt(amount);
if (!isNaN(amount))
{
window.setShirtColor(which, amount);
}
}
function updateHTMLField(which, percent)
{
document.rgbForm["fld" + which].value = percent;
}
// -->
</script>
Let us now turn our attention to the SVG document. The parent of the document
is the
browser window in which it is embedded. We use the reserved word parent
in the init
function to connect the SVG document's svgSetShirtColor function to the HTML
page's
setShirtColor reference.
function init(evt)
{
parent.setShirtColor = svgSetShirtColor;
svgDocument = evt.getTarget().getOwnerDocument();
transformShirt();
}
Since there are now effectively two ways to set the color values, we'll make
things more
modular by rewriting doColorDrag to call the new svgSetShirtColor function:
function doColorDrag(evt, which)
{
/*
* If no slider is active, or the event is on a
* slider other than the active one, do nothing
*/
if (slideChoice < 0 || slideChoice != which)

{
return;
}
/*
* Get the slider indicator line object, and the
* mouse position (relative to the top of the color
bar)
*/
var obj = evt.getTarget();
var pos = evt.getClientY() - 10;
/*
* Since pos=0 is at the 100% point on the scale,
* take 100-pos and send that to svgSetShirtColor
* along with the slider number.
*/
svgSetShirtColor(which, 100 - pos);
}
Function svgSetShirtColor will do what the remainder of doColorDrag used to
do, with
two major differences. It uses the slider number that it is given as the first
parameter, not
the global sliderChoice variable. The second parameter is now a
percentage; in the
original version it was the y-position of the mouse. These are the sorts of
changes you
have to make when you decide to modularize simple code that was written for an
ad-hoc
example.
function svgSetShirtColor(which, percent)
{
var obj;
var colorStr;
var newText;
/* Clamp values to range 0..100 */
if (percent < 0) { percent = 0; }
if (percent > 100) { percent = 100; }
/* Move the slider line to the new mouse position
*/
obj = svgDocument.getElementById("slide" + which);

obj.setAttribute("y1", 100-percent);
obj.setAttribute("y2", 100-percent);
rgb[which] = percent;
/*
* Put together all the color values and
* change the shirt's color accordingly.
*/
colorStr = "rgb(" + rgb[0] + "%," +
rgb[1] + "%," + rgb[2] + "%)";
obj = svgDocument.getElementById("shirt");
obj.setAttribute("fill", colorStr);
/*
* Change text to match slider position
*/
obj = svgDocument.getElementById("pct" + which);
newText = svgDocument.createTextNode(rgb[which] +
"%");
obj.replaceChild(newText, obj.getFirstChild());
}
This code accomplishes the HTML to SVG communication. Our last step is to
communicate from SVG back to HTML if the user decides to choose colors with
the
slider. Rather than continuously update the HTML fields, we have made the
design
decision to update the HTML when dragging stops. We add the boldface code to
function
endColorDrag. The result is shown in Figure 11-12; the screenshot has been
edited to
eliminate unnecessary whitespace).
function endColorDrag()
{
/*
* If a slider was being moved, send the slider
number
* and its value back to the updateHTMLField
function
* in the parent web browser window.
*/
if (slideChoice >= 0)
{
parent.updateHTMLField(slideChoice,
rgb[slideChoice]);
}
/* In any case, nobody's being dragged now */
slideChoice = -1;
}
11.9.6 Scripting and Animation Together
Scripting and animation can work together. You can start an animation in
response to an
event, and you can use the beginning, end, or repetition of an animation to
invoke a
function. Example 11-20 shows a trapezoid and a button. When you click the
button, a
message saying "Animation in progress" appears, and the trapezoid rotates 360
degrees.
Example 11-20. Scripting and Animation Together
<script type="text/ecmascript">
<![CDATA[
function init(evt)
{
/* initialization code goes here */
}
function setMessage(visStatus) [1]
{
var
message
=
svgDocument.getElementById("message");
message.setAttribute("visibility", visStatus);
}
// ]]>
</script>
<g id="button"> [2]
<rect x="10" y="10" width="40" height="20" rx="4"
ry="4"
style="fill: #ddd;"/>
<text
x="30"
y="25"
style="text-anchor:
middle;">Start</text>
</g>
<text
id="message"
x="60"
y="25"
visibility="hidden"> [3]
Animation in progress.
</text>
<path d="M-25 -15, 0 -15, 25 15, -25 15 Z"
style="stroke: gray; fill: #699;">
<animateTransform
id="trapezoid"
attributeName="transform"
type="rotate" from="0" to="360"
begin="button.click" [4]
dur="6s"
onbegin="setMessage('visible')" [5]
onend="setMessage('hidden')"/>
</path>
</g>
[1] Here's the function, which takes the visibility status that was passed to it,
and sets the
message's visibility property accordingly.
[2] The start button is a simple rounded rectangle with text. The entire group
gets the id.

[3] The message, initially hidden. Again, we use a presentation attribute here
rather than
a style, since we'll be modifying the attribute.
[4] Instead of giving the begin time for the animation in terms of seconds, we
begin
whenever a click event is detected on the button object. Since we're
waiting for the
event, we use click rather than the event handler attribute onclick.
[5] The next two lines are event handlers, so they begin with the prefix on.
When the
animation begins (onbegin), we call setMessage with the argument
'visible'; when it
ends (onend) we call the same function with the argument 'hidden'.[4]
[4] The event handler onrepeat is invoked each time an animation repeats
after
the first iteration.

Indrumar Ver1

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Indrumar Ver1

Încărcat de

Drepturi de autor:

Formate disponibile

INTRODUCERE IN FLASH

- Umplerea formelor i textului cu gradieni (culori care se modific treptat n

V ajut s modificai vederea scenei prin modificarea zoom-ului,

Permite inserarea de simboluri, de a insera i terge marcaje pe

Permite modificarea simbolurilor, formelor sau frame-urilor, efectelor

Permite formatarea textului i verificrile de sintax

Permite refolosirea sau managementul comenzilor salvate. O comand

Permite controlul vizualizarea filmelor, testarea filmelor si scenelor

Deschide noi ferestre, noi paneluri pentru controlul obiectelor

V ajut cnd avei nevoie de ajutor.

Dreptunghiul alb din centrul imaginii reprezint scena. Ea trebuie privit ca

2. Selectati instrumentul Selection din bara de instrumente

3. Crearea unui Baner.

Se va deschide o fereastr care v va permite s alegei documentul de importat.

Imaginea este importat n librrie. Ea nu este vizibil pe scen nc.

5. Redenumii noul strat Animatie.

g) Realizarea unui desen simplu

Dai click pentru punctul de final

h) Realizarea unui simbol

5. Dai numele dorit (ex: Fa 1) apoi dai OK.

1. Crearea propriilor desene.

Finalitatea liniei poate fi (figura din stnga):

Putei realiza desene artistice folosind intrumentul Pensul (Brush). Avantajul

Paint fills se deseneaz umpleri i goluri pe scen. Culoarea nu va acoperi

Pentru a crea un gradient, urmai paii:

2. Adugarea de animaii simple

Orice modificare pe care o facei n acest mod se refer strict la simbol, nu la

Modificai luminozitatea la +50% (n bara de proprieti Color)

6. Desenai un dereptunghi n Scen

4. Scrierea unor aplicaii simple

3. Inserai un nou Strat (Layer) pe care l inserai Aciuni

5. Adugai urmtorul script:

GRADIENTI, STRATURI, BUTOANE

1. Aplicarea unui gradient

Alegei din bara de instrumente, instrumentul de selecie.

6. Selectai culoarea care va fi folosit

8. Rotii intrumentul de Gradient, astfel nct culoarea s fie dispus dup

2. Crearea de straturi (Layers)

b. Selectai dimensiune font 12, font Arial.

c) Adugarea text dinamic

5. Inserarea Banerului ntr-un fisier HTML

1. Crearea unui buton din mai multe obiecte grupate

9. Desenai pe scen un patrulater care acoper ct mai exact zona ocupat de

10. Apsai Scene 1 pentru a iei din modul de editare

Pe scen dai dublu click pe buton pentru a intra n modul de editare

d) Adugai o aciune pentru buton

function RotateDisplayOrDrag (whichPiece) {

h) Exemplu de Script care afieaz un ceas digital

Creai un document care conine 3 straturi: fundal, text i Aciuni

6. Dai numele instanei text: clock_txt

9. Mergei la frameul 2 din stratul Actions i apsai F6 pentru a aduga un nou

6. n timeline-ul principal, adugai urmtoarea comand:

3. Selectai simbolul pentru a intra n timeline-ul su.

Slide Show, Adugarea de coninut audio - video

2. Adugarea de coninut audio

1. Creai un strat nou pentru sunet

Tipurile de compresie care pot fi folosite sunt:

- ADPCM - Putei face o conversie de la stereo la mono pentru a reduce

3. Adugarea de coninut video

8. Pentru a modifica nceputul unui clip, tragei triunghiul din stnga la

5. Selectai unul din butoanele: Progressive Download from a Web Server,

SVG este un limbaj folosit pentru a descrie grafice 2D si aplicatii grafice

1 .Ce este SVG?