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  /  ActionScript (14)

Efect de lupa

26.09.2008
Efect de lupa

In ce consta acest efect: avem o imagine afisata si prin intermediul unui instrument vom mari regiuni din poza.

Total vizualizari: 9397 9397 afisari   |   Comentarii  5   |   Rating   |   (7 voturi)   |   Timp necesar: 15 min 15 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

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

In ce consta acest efect: avem o imagine afisata si prin intermediul unui instrument vom mari regiuni din poza. Atunci cand marim o imagine de tip raster (adica formata din pixeli) nu vom face altceva decat sa marim dimensiunea pixelului si desi imaginea este marita, calitatea acesteia va ramane aceeasi - de exemplu daca intr-o portiune de imagine avem un scris ce nu poate fi inteles, marind imaginea nu facem decat sa marim pixelii, scrisul respectiv va ramane tot indescifrabil - nu putem extrage informatii suplimentare dintr-o resursa ce contine putine informatii.

Totusi putem falsifica aceasta poveste avand ca singura poza o poza detaliata care sa fie micsorata in timpul rularii. Poza va aparea mica dar cand vom duce instrumentul de marire peste poza (mica) vor fi afisate detalii din poza originala (cea dinaintea misorarii).

Pentru inceput importati in scena o imagine bogata in detalii cu dimensiuni destul de mari (am ales o imagine de 1024x768 pixeli). Convertiti imaginea in MovieClip cu punctul de inregistrare in stanga sus si dati ca identificator sirul de caractere "imagine".

In continuare vom construi lupa. Cu ajutorul instrumentul Oval, tinand tasta Shift apasata desenati un cerc care sa aiba ca interior un gradient circular. Puteti repozitiona gradientul prin intermediul instrumentului GradientTransform sau cu PaintBucket pentru a avea un rezultat asemanator cu cel din imaginea urmatoare:


Efectul de lupa

Convertiti rezultatul in MovieClip cu punctul de inregistrare in centru. Setati un factor de opacitate (alpha din fereastra de proprietati) de 20% pentru obiectul rezultat si setati-i numele de instanta "lupa" (din fereastra de proprietati - stanga).

Ţinand apasata tasta CTRL repozitionati lupa pentru a realiza o copie. Copiei ii veti seta numele de instanta "masca". Cum functioneaza lupa: atunci cand cursorul mouse-ului este dus deasupra imaginii (cea micsorata) la pozitia lupei (in interiorul sau) va fi afisata imaginea originala (pentru a afisa numai o portiune din imaginea originala ne vom folosi de o masca - copia lupei). Sa trecem la partea interesanta: script-ul ce ne ajuta in construirea lupei:

Pentru inceput vom initializa cateva variabile:

f_marire = 2.3;
mic_x = 0;
mic_y = -30;

Dupa care vom trece la adaugarea in scena a MovieClip-ului ce contine imaginea initiala si micsorarea sa (pentru a da impresia ca imaginea este mai mica):

_root.createEmptyMovieClip("img_mica",_root.getNextHighestDepth());
_root.img_mica.attachMovie("imagine", "mica", 0);

Vom repozitiona imaginea mica unde ne convine cel mai mult (pozitie data de variabilele mic_x, mic_y):

_root.img_mica._x = mic_x;
_root.img_mica._y = mic_y;

Dupa care vom micsora imaginea pentru a arata cu adevarat mai mica:

_root.img_mica._width = _root.img_mica._width/f_marire;
_root.img_mica._height = _root.img_mica._height/f_marire;

Pentru a putea arata in scena (sub lupa mai exact) si imaginea mare, trebuie sa aducem in scena si originalul:

_root.createEmptyMovieClip("img_mare",_root.getNextHighestDepth());
_root.img_mare.attachMovie("imagine", "mare", 1);

Mascam imaginea mare folosind drept masca duplicatul lupei (care poarta numele de instanta "masca"):

_root.img_mare.setMask(_root.masca);

Vom ascunde cursorul mouse-ului pentru a nu influenta vizualizarea corecta a imaginii marite:

Mouse.hide();
_root.masca._visible = false;
_root.img_mare._visible = false;

Şi in final, de fiecare data cand vom misca mouse-ul vom repozitiona lupa si masca la pozitia cursorului mouse-ului (care acum este invizibil) respectiv vom repozitiona imaginea mare (ar trebui sa deplasam imaginea mare pentru ca daca pe imaginea mica lupa de deplaseaza 320 de puncte, trebuie sa fie afisate mai multe puncte din imaginea mare - respectiv 320xf_marire):


 
_root.onMouseMove = function(){
    if (!_root.img_mare._visible) _root.img_mare._visible = true;
    
    _root.masca._x = _xmouse;
    _root.masca._y = _ymouse;
    
    _root.img_mare._x = -_xmouse*(f_marire-1)+_root.img_mica._x*(f_marire);
    _root.img_mare._y = -_ymouse*(f_marire-1)+_root.img_mica._y*(f_marire);
    updateAfterEvent();
};

Pagina:
1
comenteaza printeaza
Alte tutoriale Adobe Flash:
Noteaza acest tutorial
Rating tutorial
 
(7 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (5) spune-ti parerea
emiliapausan , Miercuri, 02 Martie 2011, ora 22:18
#5

Codul este scris in AS2?
Daca da, cum se moduifica pt AS3 (eu lucrez cu AS3).
Nu mai injtereseaza decat zonele in care apar modificari semnificative.

Raporteaza acest comentariu ca injurios!
cristi , Sambata, 21 Martie 2009
#4

trimite-mi si mie pe mess te rog mult acest cod cu fotografie.MULTUMESC ANTICIPAT!!!

Raporteaza acest comentariu ca injurios!
Ionut , Luni, 16 Martie 2009
#3

Daca urmariti pasii corect, va functiona. Cel putin la mine a mers. Eu am facut in Flash 8 (Studio 8).
Puteti sa si downloadati sursa acestui tutorial.

Raporteaza acest comentariu ca injurios!
dragulin , Vineri, 13 Martie 2009
#2

de ce nu merge am fc si eu exact ca in tutorial
dar imi da erori de la script
sa ne spuna cineva daca mai e nevoie de completat cu ceva
sau daca e necesar sa ai cunostinte despre action script?
poate rsp cineva

Raporteaza acest comentariu ca injurios!
Alex , Duminica, 26 Octombrie 2008
#1

Pai am facut ce scria si la script imi da ca are erori. Dc?
Sper sa imi raspunda cineva.

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