Album foto - foto SlideShow

În primul exemplu, imaginile vor fi de dimensiuni diferite, vor fi încadrate de un chenar care se va redimensiona la încărcarea fiecărei noi imagini. Imaginile vor fi numerotate (0.jpg, 1.jpg …) pentru o încărcare consecutivă (în exemplul următor imaginile nu trebuie să fie neapărat cu aceste denumiri). După încărcarea în întregime a unei imagini, se vor găsi dimensiunile fotografiei, se va şterge vechea imagine, se va redimensiona chenarul după care va fi afişată noua fotografie.

Vom schimba proprietăţile documentului pentru a avea dimensiunile 800x500 şi o viteză de afişare de 30 de cadre pe secundă (în cazul în care imaginea este mai mare de 800x500 puteţi să realizaţi şi o scalare a acesteia).

In timpul încărcării unei imagini, imaginea precedentă trebuie să fie afişată. Din acest motiv nu trebuie să încărcăm imaginea nouă în acelaşi MovieClip ca şi precedenta – ne vom folosi de două clipuri „m0” şi „m1”.

Chenarul va fi simulat de un dreptunghi ce va fi desenat folosind instrumentele Flash-ului şi care apoi va fi convertit într-un MovieClip cu numele de instanţă „cadru” şi cu punctul de înregistrare în centru. Când construiţi dreptunghiul (a cărui dimensiuni iniţiale nu contează) aveţi grijă ca marginea (conturul) desenului să fie setată ca „hairline” (opţiune disponibilă din fereastra de proprietăţi imediat după selectarea instrumentului recangle). Cu ajutorul ferestrei „Align” (CTRL+K) poziţionaţi dreptunghiul în centrul scenei: apăsaţi butonul „To stage” din dreapta după care apăsaţi al doilea buton de pe primele două rânduri (evident obiectul în formă de dreptunghi trebuie să fie selectat).

La încărcarea unei imagini ne vom folosi de un preloader pentru a comunica vizitatorului cât mai are de aşteptat până la încărcarea următoarei imagini. Din acest motiv vom importa în scriptul nostru clasa grafix.as care are o funcţie ce desenează o bară de progres. Vom face pentru început câteva setări cum ar fi dimensiunile fictive ale unei imagini, numărul imaginii curent afişate precum şi în ce MovieClip (m0 sau m1) este afişată (iniţial nu avem nici o imagine încărcată dar vom face aceste setări – oarecum artificiale – pentru a avea o continuitate în încărcările imaginilor).

#include "grafix.as"
lung = 0;
inalt = 0;
img_nr = 1;
nr_mc = 1;
contor = 0;

Cu funcţiile ce vor afişa bara de progres deja v-aţi obişnuit din excerciţiul cu preloaderul ce putea găsi apariţia unei erori:

var un_obiect:Object = new Object();
un_obiect.onLoadStart = function():Void {
    _root.createEmptyMovieClip("bara_progres", 10000);
};
 
un_obiect.onLoadProgress = function(destinatie:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
    _root.bara_progres.desenaza_bara_progres(200, 490, 400, 7, bytesLoaded, bytesTotal);
};
 
un_obiect.onLoadComplete = function():Void {
    _root.bara_progres.unloadMovie();
};

De această dată vom mai adăuga (sau completa funcţiile explicate acolo) cu următoarele:

un_obiect.onLoadInit = function(destinatie:MovieClip):Void{
    _root.contor = 0;
    _root.lung = destinatie._width;
    _root.inalt = destinatie._height;
    _root.m1._alpha = 0;
    _root.m0._alpha = 0;
    _root["m"+nr_mc]._x = (800-lung)/2;
    _root["m"+nr_mc]._y = (500-inalt)/2;
};
 
un_obiect.onLoadError = function(destinatie:MovieClip, httpStatus:Number):Void {
    _root.img_nr++;
    _root.img_nr %= 7;
    _root.monitor.loadClip(_root.img_nr+".jpg", "_root.m"+_root.nr_mc);
    _root.contor = -1;
    _root.bara_progres.unloadMovie();
};

Prima funcţie se va executa imediat după încărcarea completă, mai exact atunci când clip-ul va fi iniţializat (adică imaginea va fi efectiv încărcată în MovieClip-ul în care s-a dat comanda de încărcare). În această funcţie vom reiniţializa un contor care are rolul de a cronometra timpul pentru care imaginea a stat în scenă – după un timp vom încărca următoarea imagine, vom reface variabilele ce reprezintă lungimea şi înălţimea imaginii încărcate pentru a putea redimensiona dreptunghiul care joacă rol de chenar; ambele MovieClip-uri vor avea factorul de opacitate setat la 0 (complet transparente) şi va fi repoziţionată imaginea nou încărcată pentru a fi în centrul scenei (deşi invizibilă).

În cazul întâlnirii unei erori (eveniment captat prin intermediul funcţiei onLoadError), vom încerca să încărcăm următoarea imagine. Împărţirea modulo 7 efectuată imediat după încrementarea numărului imaginii are rolul de a cicla cele 7 imagini de tip jpg numerotate de la 0 la 6. În momentul iniţializării unei noi încărcări, contorul este setat la o valoare foarte mică pentru a împiedica încărcarea altei imagini (am văzut că atunci când imaginea este încărcată complet, contorul este resetat la 0; de fapt de fiecare dată când acest contor va depăşi valoarea 200 se va începe încărcarea unei noi imagini; nu vrem să începem încărcarea unei imagini în timpul încărcării precedentei şi din acest motiv iniţializăm contorul cu un număr negativ şi-l vom incrementa doar dacă este 0 sau mai mare).

În continuare vom crea cele două MovieClip-uri şi vom începe încărcarea primei imagini (din ce motiv construim un obiect de tip MovieClipLoader şi cum îl folosim nu mai explicăm deoarece acest subiect a fost deja atins la un exerciţiu anterior):

var monitor:MovieClipLoader = new MovieClipLoader();
monitor.addListener(un_obiect);
_root.createEmptyMovieClip("m0", 0);
_root.createEmptyMovieClip("m1", 1);
monitor.loadClip("1.jpg", "m1");

Pentru redimensionarea chenarului sau pentru afişarea progresivă (transparent spre opac) a imaginilor, trebuie să avem o funcţie care să se repete încontinuu. _root.onEnterFrame este exact ceea ce avem nevoie:

_root.onEnterFrame = function() {
if (_root.contor>=0) {
    _root.contor++;
}
if (_root.contor>200) {
    _root.img_nr++;
    _root.img_nr %= 7;
    _root.nr_mc++;
    _root.nr_mc %= 2;
    _root.monitor.loadClip(_root.img_nr+".jpg", "_root.m"+_root.nr_mc);
    _root.contor = -1;
}
_root.cadru._height = _root.cadru._height - (_root.cadru._height-_root.inalt-5)/9;
_root.cadru._width = _root.cadru._width - (_root.cadru._width-_root.lung-5)/9;
 
if (Math.abs(_root.cadru._width-_root.lung)<10) {
    _root["m"+nr_mc]._alpha += 4;
}
};

Aşa cum am promis vom incrementa contorul doar dacă acesta este pozitiv, dacă depăşeşte valoarea 200 vom trece la următoarea imagine, vom schimba MovieClip-ul în care încărcăm imaginea, vom porni încărcarea imaginii noi, vom seta contorul la -1 (din acelaşi motiv ca şi prima dată).

• Tur virtual 360°
• Buton de sunet On/Off
• Meniu color Up & Down
• Interfata Adobe Flash CS4
• In ce se transforma removeMovieClip() in AS3