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)

Exportarea unui movie clip ca imagine .jpg sau .png

28.10.2009
Exportarea unui movie clip ca imagine .jpg sau .png

In acest tutorial iti voi arata cum poti exporta continutul unui movie clip de pe scena intr-o imagine .jpg sau .png pe calculatorul tau. Pentru aceasta aplicatie vei avea nevoie de Flash CS4 si Flash Player 10 pentru a putea salva imaginea pe disc.

Total vizualizari: 6791 6791 afisari   |   Comentarii  2   |   Rating   |   (9 voturi)   |   Timp necesar: 40 min 40 min   |   Nivel de cunostiinte necesar: Avansat  Avansat

Autor: alexandra Expert
Download
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 1 2
comenteaza printeaza

Pasul 7

Pentru a raporta mesaje, vom folosi un TextField dinamic cu numele msg_txt. Pentru moment, adauga-l pe scena si lasa-l gol.


Pasul 8

Acum avem toate elementele, deci putem sa trecem la scrierea codului. In clasa ApplicationMain vom defini urmatoarele proprietati:

private var _target;     // orice obiect de pe scena
private var _image:ByteArray;    // imaginea ca sir de octeti 
private var _filename = 'bitmapSnapshot.jpg';    // numele fisierului salvat pe disc

De asemenea, in constructor vom initializa membrul _target cu movie clip-ul pe care l-am creat la Pasul 5:

this._target =  this.export_mc;

Pasul 9

E momentul sa scriem functia pentru encodarea imaginii, deci adauga urmatorul cod in clasa ApplicationMain:

public function takeSnapshot():void{
    // preia inaltimea si latimea movie clip-ului pe care il exportam
    var $width = _target.width;
    var $height = _target.height;
                    
    // creeaza un obiect bitmap ce reprezinta imaginea
    var bmd:BitmapData = new BitmapData($width, $height, true, 0xFFFFFF);
    bmd.draw(_target, new Matrix(), null, null, null, false);
            
    // encodeaza in format png sau jpg
    var ext:String = this._filename.substr(-3);
    if (ext == 'png') {
        _image = PNGEncoder.encode(bmd);
    }    
    else if (ext == 'jpg'){
        var jpgEncoder:JPGEncoder = new JPGEncoder(100);
        _image = jpgEncoder.encode(bmd);
    }
}

Dupa cum poti observa, codul de mai sus calculeaza latimea si inaltimea movie clip-ului _target, apoi copiaza continutul acestuia intr-un obiect BitmapData cu aceleasi dimensiuni. In continuare, utilizand clasele adobe, obiectul BitmapData este transformat intr-un sir de octeti ce reprezinta de fapt o imagine .jpg sau .png.

In mod default, extensia este .jpg, dar o poti schimba in .png modificand proprietatea _filename din clasa noastra.

Nu uita ca la apasarea butonului trebuie sa apelezi aceasta functie, deci metoda btnExportPress() trebuie sa contina codul:

takeSnapshot();


 OBS. 1   Daca vrei sa salvezi un movie clip cu border, tine cont ca Flash nu calculeaza corect inaltimea si latimea acestuia, deoarece borderul este centrat pe conturul obiectului. Cu alte cuvinte, daca borderul este de 6px, trebuie sa retii dimensiunea movie clip-ului fara border si sa-i adaugi cate 3 px (adica jumatate din latimea borderului) pentru a afla inaltimea si latimea corecta.

 OBS. 2   Mastile reprezinta o problema pentru ca ele sunt luate in considerare in calculul dimensiunilor. De asemenea, retine ca encodarea are loc pentru coordonate pozitive, deci elementele cu x sau y negativ din _target vor fi ignorate.

 OBS. 3   Pentru formatul jpg sau jpeg, clasele implementate de adobe encodeaza imaginea transformand fiecare pixel din RGB in YCbCr (unde Y reprezinta luminozitatea, iar Cb si Cr sunt componentele cromatice). Imaginea este compusa octet cu octet, pornind de la headere si continuand cu octetii pentru fiecare pixel. Daca vrei sa schimbi modul de encodare al imaginii, de exemplu in Grayscale, ar trebui sa modifici headerele si sa renunti la cei doi octeti de culoare (Cb si Cr), ceea ce de fapt inseamna rescrierea algoritmului de conversie.


Pasul 10

Aproape am terminat, ceea ce mai trebuie sa faci este sa salvezi imaginea pe disc. Pentru a preveni o eroare, trebuie ca mai intai sa aflam versiunea playerului flash:

public function getFlashPlayerVersion(){
    // Afla versiunea playerului cu functia globala getVersion()
    var versionNumber:String = Capabilities.version;
            
    // Versiunea este o lista de elemente despartite prin ","
    var versionArray:Array = versionNumber.split(",");
    var length:Number = versionArray.length;
            
    // Versiunea principala contine si tipul sistemului de operare
    // deci o impartim in doua pentru a afla numarul principal
    var platformAndVersion:Array = versionArray[0].split(" ");
                        
    var majorVersion:Number = parseInt(platformAndVersion[1]);
    var minorVersion:Number = parseInt(versionArray[1]);
    var buildNumber:Number = parseInt(versionArray[2]);
            
    trace("Platforma: "+platformAndVersion[0]);
    trace("Versiune principala: "+majorVersion);
    trace("Versiune secundara: "+minorVersion);
    trace("Build: "+buildNumber);
    trace("-----");
            
    return majorVersion;
}

Dupa ce ai scris metoda de mai sus, adauga linia urmatoare in functia takeSnapshot():

var flashVersion  = this.getFlashPlayerVersion();

Pasul 11

Utilizand versiunea playerului aflata cu functia getFlashPlayerVersion(), vom raporta un mesaj de eroare daca aceasta este mai mica decat 10. In caz contrar, totul este in regula si putem salva imaginea pe disc, deci adauga codul de mai jos in metoda takeSnapshot():

// daca versiunea e mai mica de 10, afiseaza un mesaj de eroare
if (flashVersion < 10){
    this.msg_txt.text = "Eroare, trebuie sa ai instalat Flash Player 10";
}
// altfel, salveaza imaginea pe hard disk
else{
    var saveFile:FileReference = new FileReference();
    saveFile.addEventListener(Event.COMPLETE, saveCompleteHandler);
    saveFile.addEventListener(Event.CANCEL, saveCancelHandler);
    saveFile.addEventListener(IOErrorEvent.IO_ERROR, saveIOErrorHandler);
    saveFile.save(_image, this._filename);
}

Poti observa ca am adaugat niste handlere pentru anumite evenimente (daca imaginea a fost salvata cu succes, daca s-a apasat butonul Cancel sau daca a survenit o eroare):

private function saveCompleteHandler(event:Event):void{
    event.target.removeEventListener(Event.COMPLETE, saveCompleteHandler);
    event.target.removeEventListener(Event.CANCEL, saveCancelHandler);
    event.target.removeEventListener(IOErrorEvent.IO_ERROR, saveIOErrorHandler);
    
    this.msg_txt.text = "Imaginea a fost salvata";
}
 
private function saveCancelHandler(event:Event):void{
    event.target.removeEventListener(Event.COMPLETE, saveCompleteHandler);
    event.target.removeEventListener(Event.CANCEL, saveCancelHandler);
    event.target.removeEventListener(IOErrorEvent.IO_ERROR, saveIOErrorHandler);
    
    this.msg_txt.text = "Actiune anulata";
}
 
private function saveIOErrorHandler(event:IOErrorEvent):void{
    event.target.removeEventListener(Event.COMPLETE, saveCompleteHandler);
    event.target.removeEventListener(Event.CANCEL, saveCancelHandler);
    event.target.removeEventListener(IOErrorEvent.IO_ERROR, saveIOErrorHandler);
    
    this.msg_txt.text = "Eroare la salvare";
}


 OBS. 4   In cazul in care vrei ca aplicatia sa functioneze si pe versiuni anterioare ale playerului Flash, poti utiliza scripturi .php pentru a incarca (folosind URLRequest) si apoi descarca imaginea de pe server. Problema este ca orice fereastra deschisa din interiorul swf-ului tau va fi interpretata ca un pop-up si este foarte posibil ca ea sa fie blocata de browser.

Poti downloada sursa completa a acestui tutorial daca accesezi pagina de resurse. Nu ezitati sa-mi scrieti daca aveti intrebari.

Pagina:
« 1 2
comenteaza printeaza

Cuvinte cheie:   flash,   cs4,   fla,   swf,   movie clip,   export,   salvare,   save,   jpg,   png,   JPGEncoder,   PNGEncoder,   BitString,   File

Alte tutoriale Adobe Flash:
Noteaza acest tutorial
Rating tutorial
 
(9 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (2) spune-ti parerea
alexandra alexandra , Miercuri, 28 Octombrie 2009, ora 13:19
#2

Pot sa-ti spun unde am folosit eu functia asta - pentru un proiect whiteboard in care trebuia sa export ce desena utilizatorul. Sigur, nu se limiteaza la asta, e foarte utila si pentru desenarea/salvarea cartilor de vizita sau a felicitarilor de ex, dar in general, ca sa ai ce exporta, trebuie sa ai input de la utilizator.

Raporteaza acest comentariu ca injurios!
alext_1020 alext_1020 , Miercuri, 28 Octombrie 2009, ora 12:52
#1

Imi place! Inca nu stiu unde o sa pot folosi aceasta functie ... dar... e bine de stiut ca este!

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