Universitatea Tehnic a Moldovei Facultatea Calculatoare Informatic i Microelectronic Catedra Automatica i Tehnologii Informaionale

Sisteme Multimedia
Lucrare de laborator nr.2 Tema: Crearea unei pagini web n Flash

a efectuat : st.gr. TI-071 Chian O. a verificat :l.s. Boleac R.

Chiinu 2010

1 Crearea unui site web cu flash

Scopul acestei lucrri de laborator const n formarea unor abiliti practice n cea ce privete crearea unui site flash utiliznd limbajul de programare actionscript 2.0. Pentru nceput s definim obiectivele. Deci site-ul va fi elaborat n mediul Macromedia Flash MX 2004, mai precis s fiu n Flash MX voi elabora obiectul-applet de tip flash care va fi ncadrat n pagina web. Obiectul flash (de aici n colo voi spune pur i simplu flash) va avea dimensiunea 550x400 px, va fi compus din trei pagini i respective trei butoane cu ajutorul crora va fi posibil navigarea prin intermediul paginilor web. S nu par prea trevial lucrarea dat background-ul fiecarei pagini adic o orecare imagine va fi ncrcat dintr-un fiier XML. Mai jos este prezentat flash-ul care va fi ncadrat n pagina web dup realizarealui propriu zis.

Figura 1 Flash-ul care va fi disponibil n pagina web

ActionScript
ActionScript este un limbaj de programare bazat pe programarea orientat obiect (OOP) i este utilizat i de Flex. La fel ca toate limbajele de programare, ActionScript are i el propria sintaxa. ActionScript 1.0 a fost introdus in sintaxa lui actual deodata cu lansarea lui Flash 5, fiind prima versiune complet programabil de Flash, conceput pentru dezvoltarea scripturilor n format .SWF. Cand a aparut Flash 6 MX s-a lrgit foarte mult mediul de programare deoarece au fost adugate foarte multe functii de control care sa permita programarea mai buna a elementelor de film. Flash 7 MX 2004 a adus la randul lui inbunatatiri fata de versiunile lui anterioare introducand versiunea 2.0 a ActionScript. Aceast versiune a limbajului poate compila i scripturi scrise n versiunea ActionScript 1.0. Cu noua versiune a limbajului, codul/aplicaia poate avea o arhitectur mai complex i mult mai bine organizat. Programarea OOP n ActionScript este o aliniere la noile standarde n programare. Apariia versiunii ActionSript 3.0 reprezint o reorganizare complet a limbajului. 3

1.2 Crearea unei pagini simple web n Flash MX 2004

Aa cum am spus flash-ul va fi elaborat n mediul Macromedia Flash MX 2004. Pentru nceput se lanseaz Flash MX i se creaz un proiect nou (File -> New -> Flash Document). Dup care cun simplu right-click pe pagina de lucru selectm opiunea Document proprietes... i setm parametrii cu urmtoarele valori dimension - 550x400px, background color - white i frame rate 12px (La lansarea aplicaiei aceste valori ar trebuie s fie setate by default).

Figura 2 Fereastra Document proprietes n fereastra timeline se creaz 4 nivele (Layer) i le numim Background, Content, Buttons, Action. Le aranjm in aa mod cum sunt prezentate n imaginea de mai jos.

Figura 3 - Fereastra Timeline n cele ce urmeaz se creaz un preloader foarte simplu, care va arta cuvntul Loading n timp ce flash-ul se ncarc. Pentru a face acest lucru, selectm nivelul Content i n al doilea frame executm un right-click i selectm opiunea Insert Frame. Dup care utiliznd instrumentul Text Tool plasm pe pagina de lucru cuvntul Loading..., pe care l aliniem pe vertical i orizonatal n centrul paginii (pentru a apela fereastra Align Panel utilizm ctrl-K).

Figur 4 Timeline-ul dup executarea pailor de mai sus Parte vizual a Preloader-ului este gata. Acum selectm al doilea frame din nivelul Action i executm un right click dup care alegem opiunea Insert Keyframe. Dup care deschidem fereastra Action i introducem codul urmtor:
if (_root.getBytesLoaded() != _root.getBytesTotal()){ gotoAndPlay(1); }

Metoda

_root.getBytesLoaded()

returneaz

numarul

de

bytes

ncrcai

metoda

_root.getBytesTotal() returneaz numrul total de bytes al obiectului flash.

Figura 5 Timeline-ul dup adugarea preloader-ului n continuare ne vom apuca de adugarea coninutului fiecrei pagini. Aa cum am spus site-ul va aveam trei pagini, pentru asta vom palasa aceste pageni n trei frame-uri diferite, acestea vor fi al treilea, patrulea i al cincilea frame. Aa cum am menionat background-ul va fi ncrcat dintr-un fiier XML acest lucr l vom lsa pentru sfrit, dar acuma s competm fiecare pagin cu o orecare informaie. Selectm al treilea frame de pe nivelul Background, executm un right click i selectm opiunea Insert Keyframe, trecem la al cincilea frame de pe acelai nivel executm aceai operaie numai c de data asta selectm opiunea Insert Frame.

Figura 6 Time line-nul dup inserarea frame-urilor n nivelul Background Acum ar fi momentul s crem un obiect MovieClip n nivelu Background, cu ajutorul acestui obiect va fi posibil vizualizarea imaginelor ncrcate din XML. Pentru asta n nvelul Background selectm al treilea frame i pe pagina de lucru creem un orecare obiect (e.g. un ptrat) selectm obiectul l grumpm utiliznd butoanele ctrl+G. Dup care intrm n optiunea Modify -> Convert to simbol, selectm radiobutonul Movie clip al opiunei behavior, i n cmpul name introducem image, dup care tastm butonul OK. Selectm obiectul i n fereastra proprietes n cmpul instance name introducem picture. Efectund toi aceti pai am construit un obiect MovieClip care ne va sevri mai trziu pentru vizualizarea obectelor.

Figura 7 Fereastra Convert to Symbol 6

Figura 8 Fereastra proprietes al obiectului MovieClip (picture) Dup ce am creat obiectul picture, putem continua cu ncrcarea datelor pe cele trei pagini. Pentru asta selectm al treile frame din nivelul Content executm un right click i selectm opiunea Insert Blank Keyframe. Trecem pe pagina de lucru i executm ceva aciuni cu privirea plasrii a careva date pe prima pagin a paginii web (spre exemplu cu instrumentul TextToolplasm careva text). mai jos este prezentat rima pagin dup plasarea datelor.

Figura 9 Prima pagina a site-ului web n continuare efectum acelai lucru pentru al patrulea i al cincilea frame din nivelul content. Acum a venit timpul s-i dm suflet flash-ului nostru. Pentru asta Selectm al treilea frame din nivelul Buttons i inserm un Keyframe dup care selectm al cincilea frame de pe acelai nivel i nserm n frame simplu.

Figura 10 Timeline-ulu dup executarea pailor de mai sus 7

A venit monentul s palsm butoanele care vor face posibil navigare printre paginile web. Pentru acest lucru putem crea nite butoane de sinstttor aa cum am procedat eu, sau s utilizm butoanele standart din panela Components. Dupa ce avem butoanele plasate n feresastra de lucru, selectm primul buton i n fereastra proprietes introducem textul care va fi plasat pe buton n cmpul label, dup care n cmpul instance name introducem numele de instan a butonul, acest lucru se face pentru a pute opera cu butonul n actionscript. Pentru butonul flash introducem flash_btn, Flash MX - mx_btn i About - about_btn. Repetm acest pas penttru urmtoarele dou butoane.

Figura 11 Pagina de lucru dup plasarea butoanelor Dup ce avem practice pregtit interfaa grafic a paginilor web, putem scri codul surs care ar face posibil navigarea printer paginele flas-ului dat. Pentru asta selectm al treilea frame din nivelul actions executm un right-click i selectm opiunea Insert Blank Keyframe. n fereastra proprietes introducem urmtorul cod.
stop(); flash_btn.onRelease = function () { gotoAndStop(3); //getImage(0); } mx_btn.onRelease = function (){ gotoAndStop(4); //getImage(1); } about_btn.onRelease = function (){ gotoAndStop(5); //getImage(2); }

Prima funcie stop() oprete flash-ul pe frame-ul trei care reprezinta pagina de start. n dependen de care buton este tastat se va trece pe frame-ul respectiv i se va opri. Observai c

funciile getImage() sunt comentate pe motiv c ele raspund de plasarea imaginei pe paginele rspective, de acea ele vor fi activate dup ce voi realiza citirea din fiierul XML. Pentru nceput creem un nou nivel pe care l numim Action_movie, trecem la al treilea frame i nserm un keyframe gol (Blank Keyframe) . Expandm fereastra Action i introducem urmtorul cod.
function loadXML(loaded) { if (loaded) { xmlNode = this.firstChild; image = []; total = xmlNode.childNodes.length; for (i=0; i<total; i++) { image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue; } getImage(0); } else { content = "file not loaded!"; } } var a:Number; xmlData = new XML(); xmlData.ignoreWhite = true; xmlData.onLoad = loadXML; xmlData.load("images.xml"); p = 0; this.onEnterFrame = function() { filesize = picture.getBytesTotal(); loaded = picture.getBytesLoaded(); preloader._visible = true; if (loaded != filesize) { preloader.preload_bar._xscale = 100*loaded/filesize; } else { preloader._visible = false; if (picture._alpha<100) { picture._alpha += 10; } } }; function getImage(a) { if (loaded == filesize) { picture._alpha = 0; picture.loadMovie(image[a], 1); } }

Apropo am uitat s menionez ca de la bun nceput creem un fiier XML.

<?xml version="1.0" encoding="utf-8" standalone="yes"?> <images> <pic> <image>1.JPG</image> </pic> <pic> <image>2.JPG</image> </pic> <pic> <image>3.JPG</image> </pic> </images>

Prima linie de cod definete tipul documentului si versiunea de XML folosita. Dupa aceea cream o categorie-mama numita images. In aceasta categorie avem 3 copii numii pic, i fiecare copil mai are nc cte un subcopil image. Acum s continum cu partea de ActionScript. Definim o variabil de tip XML numita fisierXML. In ordinea liniilor de cod efectuam urmatoarele operatiuni: setam atributul ignoreWhite ca adevrat, aceasta fiind setat default ca fals, n momentul n care ncepem ncarcarea fiierului XML pornim funcia loadXML si dup aceea setm calea ctre fiierul XML. IMPORTANT! ignoreWhite trebuie setat ca adevrat inainte de a ncarca fiierul XML pentru ca acesta poate corupe coninutul ncarcabil. Defapt, acest atribut nu face altceva dect sa ii spun Flash-ului sp sarp peste spaiile goale dintre elementele fiierului XML. Acum a venit momentul s activm funciile getImage() cu idicarea n calitate de parametru imagine care urmeaz sa fie ncrcat. Mai jos avei posibilitatea s vizualizai coninitul paginii web dup ce afost exportat ntr-un format HTML. Nu m voi opri al faptul cum se export flash-ul pe motiv c dup prerea mea acest lucru este unul trivial.

Figura 12 Vizualizarea pagine web create n brewser-ul Firefox

10

Concluzie
Macromedia Flash MX 2004 est un editor puternic are faciliteaz lucrul n cea ce priveze construirea unui orecare apllet, imagin GIF, flash sau aunei pagini web. Pe parcursul elaborrii lucrrii de aborator am observat c elaborarea animaiei n Flash este destul de simpl cea reprezint un punct forte. Nu este necesar cunotine de HTML, XHTML sau XML pentru a crea o pagin web simpl (e.g. lucrarea de laborator nr2). Nu depinde de plarform sau Browsere este de ajuns doar de instalat Flash Plazer-ul. Mai pot s menionez faptul c actionscript este un limabj puternic i ncepnd cu vesiunea a doua limbajul suport programarea orientat pe obiecte, ns implemenatrea OOP-ului n versiunea 3 este mult mai reuit.

11

Bibliografie
1. , - ActionScript 2.0. - 2005 2. Actionscript library - http://www.actionscript.org/actionscripts_library/

12