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: 8796 8796 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 primul exemplu, imaginile vor fi de dimensiuni diferite, vor fi incadrate de un chenar care se va redimensiona la incarcarea fiecarei noi imagini. Imaginile vor fi numerotate (0.jpg, 1.jpg) pentru o incarcare consecutiva (in exemplul urmator imaginile nu trebuie sa fie neaparat cu aceste denumiri). Dupa incarcarea in intregime a unei imagini, se vor gasi dimensiunile fotografiei, se va sterge vechea imagine, se va redimensiona chenarul dupa care va fi afisata noua fotografie.

Vom schimba proprietatile documentului pentru a avea dimensiunile 800x500 si o viteza de afisare de 30 de cadre pe secunda (in cazul in care imaginea este mai mare de 800x500 puteti sa realizati si o scalare a acesteia).

In timpul incarcarii unei imagini, imaginea precedenta trebuie sa fie afisata. Din acest motiv nu trebuie sa incarcam imaginea noua in acelasi MovieClip ca si precedenta - ne vom folosi de doua clipuri "m0" si "m1".

Chenarul va fi simulat de un dreptunghi ce va fi desenat folosind instrumentele Flash-ului si care apoi va fi convertit intr-un MovieClip cu numele de instanta "cadru" si cu punctul de inregistrare in centru. Când construiti dreptunghiul (a carui dimensiuni initiale nu conteaza) aveti grija ca marginea (conturul) desenului sa fie setata ca "hairline" (optiune disponibila din fereastra de proprietati imediat dupa selectarea instrumentului recangle). Cu ajutorul ferestrei "Align" (CTRL+K) pozitionati dreptunghiul in centrul scenei: apasati butonul "To stage" din dreapta dupa care apasati al doilea buton de pe primele doua rânduri (evident obiectul in forma de dreptunghi trebuie sa fie selectat).

La incarcarea unei imagini ne vom folosi de un preloader pentru a comunica vizitatorului cât mai are de asteptat pâna la incarcarea urmatoarei imagini. Din acest motiv vom importa in scriptul nostru clasa grafix.as care are o functie ce deseneaza o bara de progres. Vom face pentru inceput câteva setari cum ar fi dimensiunile fictive ale unei imagini, numarul imaginii curent afisate precum si in ce MovieClip (m0 sau m1) este afisata (initial nu avem nici o imagine incarcata dar vom face aceste setari - oarecum artificiale - pentru a avea o continuitate in incarcarile imaginilor).

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

Cu functiile ce vor afisa bara de progres deja v-ati obisnuit din excercitiul cu preloaderul ce putea gasi aparitia 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 aceasta data vom mai adauga (sau completa functiile explicate acolo) cu urmatoarele:

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 functie se va executa imediat dupa incarcarea completa, mai exact atunci când clip-ul va fi initializat (adica imaginea va fi efectiv incarcata in MovieClip-ul in care s-a dat comanda de incarcare). In aceasta functie vom reinitializa un contor care are rolul de a cronometra timpul pentru care imaginea a stat in scena - dupa un timp vom incarca urmatoarea imagine, vom reface variabilele ce reprezinta lungimea si inaltimea imaginii incarcate pentru a putea redimensiona dreptunghiul care joaca rol de chenar; ambele MovieClip-uri vor avea factorul de opacitate setat la 0 (complet transparente) si va fi repozitionata imaginea nou incarcata pentru a fi in centrul scenei (desi invizibila).

In cazul intâlnirii unei erori (eveniment captat prin intermediul functiei onLoadError), vom incerca sa incarcam urmatoarea imagine. Impartirea modulo 7 efectuata imediat dupa incrementarea numarului imaginii are rolul de a cicla cele 7 imagini de tip jpg numerotate de la 0 la 6. In momentul initializarii unei noi incarcari, contorul este setat la o valoare foarte mica pentru a impiedica incarcarea altei imagini (am vazut ca atunci când imaginea este incarcata complet, contorul este resetat la 0; de fapt de fiecare data când acest contor va depasi valoarea 200 se va incepe incarcarea unei noi imagini; nu vrem sa incepem incarcarea unei imagini in timpul incarcarii precedentei si din acest motiv initializam contorul cu un numar negativ si-l vom incrementa doar daca este 0 sau mai mare).

In continuare vom crea cele doua MovieClip-uri si vom incepe incarcarea primei imagini (din ce motiv construim un obiect de tip MovieClipLoader si cum il folosim nu mai explicam deoarece acest subiect a fost deja atins la un exercitiu 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 afisarea progresiva (transparent spre opac) a imaginilor, trebuie sa avem o functie care sa se repete incontinuu. _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;
}
};

Asa cum am promis vom incrementa contorul doar daca acesta este pozitiv, daca depaseste valoarea 200 vom trece la urmatoarea imagine, vom schimba MovieClip-ul in care incarcam imaginea, vom porni incarcarea imaginii noi, vom seta contorul la -1 (din acelasi motiv ca si prima data).

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
4555
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4465
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4415
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4290
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4170
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
SWF HTML RoR Fireworks PHP Gimp Dreamweaver StyleSheet AJAX CSS COREL DRAW Illustrator Lightroom Verilog JSON XML Word Fotografie Bridge Action Script Ruby on Rails SEO Outlook PSD XHTML Vista Swift 3D Java Photoshop Flash Excel Javascript Sony Vegas Powerpoint MySQL Python
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