Album foto - foto SlideShow

În continuare în mod continuu (deşi nu neapărat necesar) vom modifica dimensiunea chenarului pentru a fi cu două unităţi mai mare decât imaginea încărcată (valoarea -5 lasă două unităţi în stânga şi două în dreapta). Dacă dimensiunea chenarului este aproape de cea dorită începem să creştem gradul de opacitate al MovieClip-ului pentru a face vizibilă imaginea.

Testaţi exemplul apăsând de două ori CTRL+Enter (pentru a observa şi preloaderul). Acest exemplu a fost realizat pentru 7 imagini: de la 0.jpg până la 6.jpg. Ce se întâmplă dacă una din cele 7 imagini lipseşte ? Va mai funcţiona corect exemplul ? (încercaţi să răspundeţi înainte de a şterge una din imagini). Din ce motiv atunci când expiră contorul schimbăm şi MovieClip-ul în care încărcăm următoarea imagine dar nu facem acest lucru şi atunci când se produce o eroare (atunci schimbam doar imaginea ce trebuie încărcată)?

Ca exerciţiu încercaţi să realizaţi acelaşi exemplu fără a desena chenarul folosind instrumentele Flash-ului, adică creaţi acest chenar (împreună cu animaţia sa) numai folosind ActionScript.

Cel de-al doilea album fotografic va încărca o fotografie numai când se va face cererea de încărcare. Iniţial vizitatorului paginii i se va afişa o listă cu imaginile disponibile (în format thumb-nail9), încărcarea efectuându-se numai atunci când acesta va apăsa pe imaginea dorită. Fiecare imagine mică din listă se va încărca folosind un preloader dar nu pentru a afişa cât mai avem de aşteptat până la final ci pentru a şti momentul în care încărcarea este completă. Pentru a forma o listă vom ataşa fiecare imagine încărcată unui MovieClip pe care-l vom putea muta sub o mască. In acest fel vom afişa doar o porţiune din el. Lista va fi afişată deasupra locului în care se va încărca imaginea şi din acest motiv pozele din listă vor fi afişate pe orizontală.

Pentru fiecare imagine folosită trebuie să avem stocate (pe server) două imagini: una mică (imaginea ce se va încărca iniţial în listă) şi un a mare (imaginea care se va încărca atunci când imaginea mică va fi apăsată).

Numele fişierelor nu vor mai fi sub formă de numere (de fapt prima metodă era una destul de artificială), ele vor fi încărcate dintr-un fişier XML ce conţine numele tuturor imaginilor.

Fişierul XML conţine doar date structurate. Un fişier în format XML care va indica Flash-ului că are de afişat 3 imagini în format JPG va avea următoarea structură (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 identificată printr-un nouă intrare de tip img. Singura informaţie disponibilă (pentru început) pentru fiecare imagine este numele fişierului ce va fi încărcat.

Scrieţi un fişier XML cu un conţinut asemănător cu cel dat mai sus particularizat pentru imaginile pe care doriţi să le folosiţi. Denumiti acest fişier „imagini.xml”. În directorul în care este situat acest fişier veţi salva şi proiectul flash. În plus, în acelaşi director, veţi adăuga un director „foto” în care veţi pune toate imaginile ce au fost trecute în XMLul construit.

Acest exemplu va fi folosit în crearea paginii personale de web în care toate filmele Flash ce vor fi încărcate la un moment dat ar fi bine să aibă o aceeaşi dimensiune. Deoarece dimensiunea scenei pentru majoritatea aplicaţiilor realizate era de 640x480 şi pentru că vom dori să includem şi această aplicaţie în pagina noastră, dimensiunea scenei va fi setată tot la această rezoluţie. Pozele care se vor încărca nu trebuie să fie de dimensiuni foarte mari, personal în pagina web nu pun imagini cu rezoluţie mai mare de 320x240. Pentru fiecare imagine cu rezoluţia 320x240 veţi avea nevoie de incă una cu dimensiunea 96x72 (poza redimensionată). Numele imaginii mici va fi acelaşi cu numele imaginii mari dar va avea prefixul „mic_” (De exemplu, imaginea mică pentru „gradina.jpg” se va numi „mic_gradina.jpg”). Imaginile mici vor fi puse în acelaşi director cu cele mari.

Scriptul va fi aşezat în totalitate în primul cadrul al al timeline-ului. Pentru început va trebui să definim un obicet XML şi să încărcăm lista imaginilor.

Deocamdata vom vedea o eventuală problemă şi cum ar putea fi evitată: după ce vom termina de încărcat fişierul XML în Flash, îl vom procesa şi vom începe încărcarea fişierelor (mici) de pe server pentru a construi lista cu fişierele disponibile. Pentru fiecare imagine mică vom avea nevoie de câte un MovieClip nou şi pentru fiecare MovieClip nou va trebui să executăm comanda loadMovie pentru a încărca imaginea externă.

Dacă sunt puţine imagini, nu există nici o problemă dar în cazul în care avem un număr mare de imagini, acestea îşi vor începe încărcarea aproape toate simultan şi se vor „îngreuna” una pe celaltă (de fapt probabil cu toţii aţi observat că atunci când încercaţi sa copiaţi mai multe fişiere de pe o partiţie pe alta este mai avantajos să le copiaţi pe rând decât simultan). Pentru început vom scrie scriptul care va încărca toate imaginile (mici) simultan (desi gresit, el are o anumită importanţă în observarea funcţionării şi poate fi completat cu uşurinţă pentru a fi schimbat în versiunea corectă):

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 funcţionează în felul următor: crează un obiect XML, ignoră spaţiile albe (am amintit într-un capitol anterior că acestea împiedică buna procesare a documentului XML), este creată funcţia ce se va executa în momentul încărcării XMLului (onLoad) şi se porneşte încărcarea XML-ului „imagini.xml” ce conţine lista fişierelor. Câteva comentarii asupra funcţiei onLoad: după încărcarea XML-ului memorăm numărul de poze în variabila _root.nr_max_img şi afişăm acest număr de poze prin intermediul comenzii trace (aceasta este mai mult o verificare că XMLul s-a încărcat corect). În continuare vom crea un MovieClip cu numele de instanţă „lista_imagini” în care se vor încărca pe rând imaginile desemnate de XML, fiecare în propriul MovieClip.

Astfel, pentru fiecare imagine (for-ul de fapt merge de la valoarea 0 până la numărul maxim de imagini deci vom putea prelua pe rând imaginile) vom crea câte un MovieClip nu numele de instanţă „img”+i (de fapt vom avea img0, img1, img2,....) şi fiecărei instanţe îi vom permite încărcarea prin intermediul loadMovie a imaginii asociate.

Problema care apare cu scenariul acesta este încărcarea simultană a mai multor fişiere (acest fapt este rezultatul executării foarte rapide a buclei „for”). În final, dacă în faza de test veţi selecta „Bandwith Profiler” din meniul „View” şi veţi apăsa de două ori CTRL+Enter (reamintesc că acest lucru simulează încărcarea pentru un anumit tip de bandă) veţi avea un rezultat ca în imaginea de mai jos.

Aşa cum am zis, încărcarea de acest tip constituie o problemă atunci când numărul fişierelor este mare. În acest caz, pentru a evita „aglomerarea” ar trebui să nu permitem Flash-ului să încarce altă imagine decât dacă cea anterioară a fost încărcată cu succes (sau dacă imaginea nu se găseşte pe server.

Pentru a determina momentul încărcării complete a unei imagini vom apela la un „listener” asemănător cu cel făcut în cadrul preloaderelor dar de această dată nu va avea nevoie de desenarea unei bare de progres ci doar de tratarea evenimentelor onLoadComplete şi eventual a lui onLoadError (pentru a putea trece la următoarea imagine ce trebuie încărcată dacă cea curentă nu a fost găsită pe server).

În scriptul ce va încarca imaginile prin intermediul listenerului trebuie să avem grijă ca dacă imaginea nu este găsită pe server (sau apare o eroare de încărcare) să nu creăm un nou MovieClip pentru încărcarea imaginii următoare (de fapt o altă soluţie ar putea fi ca în tratarea evenimentului onLoadError să distrugem MovieClip-up ce a cauzat eroarea). Din acest motiv vom folosi două contoare, unul pentru a reţine la al câtelea MovieClip am ajuns (variabila i) şi al doilea pentru a şi care este imaginea ce va fi încărcată (variabila j).

Un alt aspect este modul în care încărcăm imaginile. În cadrul funcţiei _root.OnEnterFrame vom testa în mod continuu dacă putem încărca o următoare imagine (prin testarea unei variabile care va avea valoarea false pe durata încărcării unei imagini) şi numai în cazul în care aceasta este adevărată (se va face true doar la apariţia evenimentului onLoadComplete) înseamnă că momentan nu se încarcă nimic şi vom putea încărca următoarea imagine.

Scriptul este următorul:

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");

• Link-uri catre fisiere, site-uri si adrese de email.
• Bila cu efect de respingere si particule
• Utilizarea Bone Tool
• Efect de stralucire
• Realizarea unei carti de oaspeti (GuestBook)