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

Tutoriale Adobe Flash

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

GRAFICA 2D  /  Adobe Flash  /  Comunicare cu XML (3)

Album foto - foto SlideShow

12.11.2008
Album foto - foto SlideShow

In acest tutorial vom incerca sa construim doua tipuri de albume fotografice.

Total vizualizari: 8886 8886 afisari   |   Comentarii  0   |   Rating   |   (6 voturi)   |   Timp necesar: 30 min 30 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Sursa:  Thor.info.uaic.ro  
Autor:  Cosmin Varlan
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 1 2
comenteaza printeaza

In continuare in mod continuu (desi nu neaparat necesar) vom modifica dimensiunea chenarului pentru a fi cu doua unitati mai mare decat imaginea incarcata (valoarea -5 lasa doua unitati in stanga si doua in dreapta). Daca dimensiunea chenarului este aproape de cea dorita incepem sa crestem gradul de opacitate al MovieClip-ului pentru a face vizibila imaginea.

Testati exemplul apasand de doua ori CTRL+Enter (pentru a observa si preloaderul). Acest exemplu a fost realizat pentru 7 imagini: de la 0.jpg pana la 6.jpg. Ce se intampla daca una din cele 7 imagini lipseste ? Va mai functiona corect exemplul ? (incercati sa raspundeti inainte de a sterge una din imagini). Din ce motiv atunci cand expira contorul schimbam si MovieClip-ul in care incarcam urmatoarea imagine dar nu facem acest lucru si atunci cand se produce o eroare (atunci schimbam doar imaginea ce trebuie incarcata)?

Ca exercitiu incercati sa realizati acelasi exemplu fara a desena chenarul folosind instrumentele Flash-ului, adica creati acest chenar (impreuna cu animatia sa) numai folosind ActionScript.

Cel de-al doilea album fotografic va incarca o fotografie numai cand se va face cererea de incarcare. Initial vizitatorului paginii i se va afisa o lista cu imaginile disponibile (in format thumb-nail9), incarcarea efectuandu-se numai atunci cand acesta va apasa pe imaginea dorita. Fiecare imagine mica din lista se va incarca folosind un preloader dar nu pentru a afisa cat mai avem de asteptat pana la final ci pentru a sti momentul in care incarcarea este completa. Pentru a forma o lista vom atasa fiecare imagine incarcata unui MovieClip pe care-l vom putea muta sub o masca. In acest fel vom afisa doar o portiune din el. Lista va fi afisata deasupra locului in care se va incarca imaginea si din acest motiv pozele din lista vor fi afisate pe orizontala.

Pentru fiecare imagine folosita trebuie sa avem stocate (pe server) doua imagini: una mica (imaginea ce se va incarca initial in lista) si un a mare (imaginea care se va incarca atunci cand imaginea mica va fi apasata).

Numele fisierelor nu vor mai fi sub forma de numere (de fapt prima metoda era una destul de artificiala), ele vor fi incarcate dintr-un fisier XML ce contine numele tuturor imaginilor.

Fisierul XML contine doar date structurate. Un fisier in format XML care va indica Flash-ului ca are de afisat 3 imagini in format JPG va avea urmatoarea structura (imagini.xml):

<?xml version="1.0" ?>
<imagini>
    <img fisier="gradina.jpg" descriere="Gradina din spatele casei" data="10.02.2006" />
    <img fisier="apa_curgatoare.jpg" descriere="Bistrita iarna" data="01.02.2006" />
    <img fisier="pisica.jpg" descriere="Persana" data="15.07.2004" />
</imagini>

Fiecare imagine este identificata printr-un noua intrare de tip img. Singura informatie disponibila (pentru inceput) pentru fiecare imagine este numele fisierului ce va fi incarcat.

Scrieti un fisier XML cu un continut asemanator cu cel dat mai sus particularizat pentru imaginile pe care doriti sa le folositi. Denumiti acest fisier "imagini.xml". In directorul in care este situat acest fisier veti salva si proiectul flash. In plus, in acelasi director, veti adauga un director "foto" in care veti pune toate imaginile ce au fost trecute in XMLul construit.

Acest exemplu va fi folosit in crearea paginii personale de web in care toate filmele Flash ce vor fi incarcate la un moment dat ar fi bine sa aiba o aceeasi dimensiune. Deoarece dimensiunea scenei pentru majoritatea aplicatiilor realizate era de 640x480 si pentru ca vom dori sa includem si aceasta aplicatie in pagina noastra, dimensiunea scenei va fi setata tot la aceasta rezolutie. Pozele care se vor incarca nu trebuie sa fie de dimensiuni foarte mari, personal in pagina web nu pun imagini cu rezolutie mai mare de 320x240. Pentru fiecare imagine cu rezolutia 320x240 veti avea nevoie de inca una cu dimensiunea 96x72 (poza redimensionata). Numele imaginii mici va fi acelasi cu numele imaginii mari dar va avea prefixul "mic_" (De exemplu, imaginea mica pentru "gradina.jpg" se va numi "mic_gradina.jpg"). Imaginile mici vor fi puse in acelasi director cu cele mari.

Scriptul va fi asezat in totalitate in primul cadrul al al timeline-ului. Pentru inceput va trebui sa definim un obicet XML si sa incarcam lista imaginilor.

Deocamdata vom vedea o eventuala problema si cum ar putea fi evitata: dupa ce vom termina de incarcat fisierul XML in Flash, il vom procesa si vom incepe incarcarea fisierelor (mici) de pe server pentru a construi lista cu fisierele disponibile. Pentru fiecare imagine mica vom avea nevoie de cate un MovieClip nou si pentru fiecare MovieClip nou va trebui sa executam comanda loadMovie pentru a incarca imaginea externa.

Daca sunt putine imagini, nu exista nici o problema dar in cazul in care avem un numar mare de imagini, acestea isi vor incepe incarcarea aproape toate simultan si se vor "ingreuna" una pe celalta (de fapt probabil cu totii ati observat ca atunci cand incercati sa copiati mai multe fisiere de pe o partitie pe alta este mai avantajos sa le copiati pe rand decat simultan). Pentru inceput vom scrie scriptul care va incarca toate imaginile (mici) simultan (desi gresit, el are o anumita importanta in observarea functionarii si poate fi completat cu usurinta pentru a fi schimbat in versiunea corecta):

var imagini = new XML();
imagini.ignoreWhite = true;
imagini.onLoad = function() {
    _root.nr_max_img = _root.imagini.firstChild.childNodes.length;
    trace("numarul de poze:"+_root.nr_max_img);
    _root.createEmptyMovieClip("lista_imagini", 0);
    for (i=0; i<_root.nr_max_img; i++) {
        _root.lista_imagini.createEmptyMovieClip("img"+i, i);
        _root.lista_imagini["img"+i].loadMovie("foto/mic_"+_root.imagini.firstChild.childNodes[i].attributes.fisier);
    }
};
imagini.load("imagini.xml");

Scriptul functioneaza in felul urmator: creaza un obiect XML, ignora spatiile albe (am amintit intr-un capitol anterior ca acestea impiedica buna procesare a documentului XML), este creata functia ce se va executa in momentul incarcarii XMLului (onLoad) si se porneste incarcarea XML-ului "imagini.xml" ce contine lista fisierelor. Cateva comentarii asupra functiei onLoad: dupa incarcarea XML-ului memoram numarul de poze in variabila _root.nr_max_img si afisam acest numar de poze prin intermediul comenzii trace (aceasta este mai mult o verificare ca XMLul s-a incarcat corect). In continuare vom crea un MovieClip cu numele de instanta "lista_imagini" in care se vor incarca pe rand imaginile desemnate de XML, fiecare in propriul MovieClip.

Astfel, pentru fiecare imagine (for-ul de fapt merge de la valoarea 0 pana la numarul maxim de imagini deci vom putea prelua pe rand imaginile) vom crea cate un MovieClip nu numele de instanta "img"+i (de fapt vom avea img0, img1, img2,....) si fiecarei instante ii vom permite incarcarea prin intermediul loadMovie a imaginii asociate.

Problema care apare cu scenariul acesta este incarcarea simultana a mai multor fisiere (acest fapt este rezultatul executarii foarte rapide a buclei "for"). In final, daca in faza de test veti selecta "Bandwith Profiler" din meniul "View" si veti apasa de doua ori CTRL+Enter (reamintesc ca acest lucru simuleaza incarcarea pentru un anumit tip de banda) veti avea un rezultat ca in imaginea de mai jos.


Asa cum am zis, incarcarea de acest tip constituie o problema atunci cand numarul fisierelor este mare. In acest caz, pentru a evita "aglomerarea" ar trebui sa nu permitem Flash-ului sa incarce alta imagine decat daca cea anterioara a fost incarcata cu succes (sau daca imaginea nu se gaseste pe server.

Pentru a determina momentul incarcarii complete a unei imagini vom apela la un "listener" asemanator cu cel facut in cadrul preloaderelor dar de aceasta data nu va avea nevoie de desenarea unei bare de progres ci doar de tratarea evenimentelor onLoadComplete si eventual a lui onLoadError (pentru a putea trece la urmatoarea imagine ce trebuie incarcata daca cea curenta nu a fost gasita pe server).

In scriptul ce va incarca imaginile prin intermediul listenerului trebuie sa avem grija ca daca imaginea nu este gasita pe server (sau apare o eroare de incarcare) sa nu cream un nou MovieClip pentru incarcarea imaginii urmatoare (de fapt o alta solutie ar putea fi ca in tratarea evenimentului onLoadError sa distrugem MovieClip-up ce a cauzat eroarea). Din acest motiv vom folosi doua contoare, unul pentru a retine la al catelea MovieClip am ajuns (variabila i) si al doilea pentru a si care este imaginea ce va fi incarcata (variabila j).

Un alt aspect este modul in care incarcam imaginile. In cadrul functiei _root.OnEnterFrame vom testa in mod continuu daca putem incarca o urmatoare imagine (prin testarea unei variabile care va avea valoarea false pe durata incarcarii unei imagini) si numai in cazul in care aceasta este adevarata (se va face true doar la aparitia evenimentului onLoadComplete) inseamna ca momentan nu se incarca nimic si vom putea incarca urmatoarea imagine.

Scriptul este urmatorul:

var imagini = new XML();
imagini.ignoreWhite = true;
imagini.onLoad = function() {
    
    // cream un listener:
    var un_obiect:Object = new Object();
    un_obiect.onLoadComplete = function():Void {
        _root.lista_imagini["img"+mc_curent].nr_imagine = img_curent;
        _root.poti_incarca_urmatoarea = true;
    };
    un_obiect.onLoadError = function(destinatie:MovieClip, httpStatus:Number):Void {
        _root.poti_incarca_urmatoarea = true;
        _root.eroare_de_incarcare = true;
    };
    var monitor:MovieClipLoader = new MovieClipLoader();
    monitor.addListener(un_obiect);
    
    // am terminat de creat listenerul
    _root.nr_max_img = _root.imagini.firstChild.childNodes.length;
    trace("numarul de poze:"+_root.nr_max_img);
    _root.createEmptyMovieClip("lista_imagini", 0);
    _root.poti_incarca_urmatoarea = true;
    _root.eroare_de_incarcare = false;
    
    i = 0;
    j = 0;
    _root.onEnterFrame = function() {
        if ((_root.poti_incarca_urmatoarea) && (j<_root.nr_max_img)) {
            _root.poti_incarca_urmatoarea = false;
            if (!_root.eroare_de_incarcare) {
                _root.lista_imagini.createEmptyMovieClip("img"+i, i);
            } else {
                i--;
                _root.eroare_de_incarcare = false;
            }
            _root.lista_imagini["img"+i]._x = i*100;
            _root.mc_curent = i;
            _root.img_curent = j;
            monitor.loadClip("foto/mic_"+_root.imagini.firstChild.childNodes[j].attributes.fisier,_root.lista_imagini["img"+i]);
            i++;
            j++;
        }
        
        if ((j==_root.nr_max_img) && (_root.poti_incarca_urmatoarea)){
            nr_total_mc = i;
            for (i=0; i<nr_total_mc; i++) {
                _root.lista_imagini["img"+i].onPress = function() {
                    incarca_imagine_mare("foto/"+_root.imagini.firstChild.childNodes[this.nr_imagine].attributes.fisier);
                };
            }
            _root.onEnterFrame = null;
        }
    };
};
imagini.load("imagini.xml");
Pagina:
« 1 2
comenteaza printeaza
Alte tutoriale Adobe Flash:
Noteaza acest tutorial
Rating tutorial
 
(6 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4795
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4730
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4605
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4540
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4400
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
XHTML Action Script Swift 3D Fotografie COREL DRAW Bridge Verilog XML SEO Python JSON Fireworks SWF StyleSheet HTML CSS Illustrator Sony Vegas Gimp Flash AJAX Javascript Ruby on Rails RoR Powerpoint Photoshop Vista Excel Outlook PHP Java MySQL PSD Lightroom Dreamweaver Word
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software