In acest tutorial Flash - AS3 puteti invata cum se schimba culoarea la un obiect MovieClip din scena cu Actionscript 3.0 si clasa ColorTransform.
Clasa ColorTransform permite setarea culorii obiectelor afisate in prezentarea Flash.
Mai intai se creaza un obiect ColorTransform cu new ColorTransform(), se foloseste proprietatea color la acest obiect pentru a seta culoarea, apoi acest obiect se aplica ca valoare la: obiect_MovieClip.transform.colorTransform .
Iata codul:
// creare obiect ColorTransform
var obj_color:ColorTransform = new ColorTransform();
// setare culoare (aici albastru)
obj_color.color = 0x0000ff;
// aplica transformarea culorii la obiectul movie clip (va afecta intreg obiectul, inclusiv liniile)
obiect_MovieClip.transform.colorTransform = obj_color;
Iata un exemplu practic. Patru butoane vor fi utilizate pentru a schimba culoarea unui patrat transformat in MovieClip; fiecare buton cu o culoare.
Pasii de creare a acestei prezentari Flash:
Deschideti un nou document Flash AS3. Selectati Rectangle Tool si desenati un patrat in scena.
Acum se transforma patratul in Symbol Movie Clip.
Avand patratul selectat, click Modify - Convert to Symbol (sau F8), la "Type" alegeti optiunea Movie Clip, apoi click OK.
Cu patratul selectat, deschideti panoul "Properties", si dati-i un nume de instanta: patrat (in caseta text cu: <Instance Name>).
Alegeti instrumentul Oval Tool si desenati un cerc in scena, sub patrat.
Acum se transforma cercul in buton.
Avand cercul selectat, click Modify - Convert to Symbol (sau F8), alegeti la "Type" optiunea Button (la "Name" puteti sa-i dati un nume, de exemplu "Buton"), apoi click OK.
Cu cercul selectat, deschideti panoul "Properties", si adaugati numele de instanta: b_rosu (acest buton va fi folosit pt. schimbarea culorii patratului in rosu).
Acum se adauga in scena inca trei instante de cerc-buton, pentru alte culori: verde, galben si albastru.
Deschideti panoul "Library", click pe Butonul creat si trageti-l in scena, astfel se adauga o noua instanta de button. Click si trageti inca doua instante.
- Asezati patratull si cercurile (butoanele) ca in prezentarea de mai sus.
Acum se da un nume de instanta diferit pentru fiecare buton din scena (acest nume se foloseste in ActionScript pt. a face legatura dintre obiectul din scena si codul AS3).
Selectati primul cerc (cu "Selection tool"), deschideti panoul "Properties", si adaugati numele de instanta: b_verde (acest buton va fi utilizat pt. schimbarea culorii patratului in verde).
Selectati al doilea buton si dati-i numele de instanta: b_galben (in panoul "Properties").
Selectati al treilea buton adaugat si dati-i numele de instanta: b_albastru .
- Culorile de afisare a butoanelor vor fi definite din ActionScript.
Acum se scrie codul ActionScript care adauga culoare butoanelor si schimba culoarea patratului cand se apasa click pe buton (explicatiile sunt in comentariile din cod).
Click Insert -> Timeline -> Layer pentru a crea un nou layer (strat) in Timeline (Layer 2). Dublu-click pe numele lui in Timeline si modificati-l in "Actions".
- E o metoda eficienta sa aveti un Layer separat, cu nume specific, pt. codul ActionScript.
Click-dreapta pe primul Frame (Cadru) din stratul Actions si alegeti Actions. Flash va deschide un panou in care se scrie codul ActionScript.
Copiati codul urmator si adaugati-l in acel panou:
// creare Array cu instantele butoanelor
var btns:Array = [b_rosu, b_verde, b_galben, b_albastru];
// creare obiect ce stocheaza culorile pt. fiecare buton
var set_colors:Object = {'b_rosu':0xff0000, 'b_verde':0x00ff00, 'b_galben':0xffff00, 'b_albastru':0x0000ff};
// seteaza un obiect ColorTransform
var obj_color:ColorTransform = new ColorTransform();
// parcurge array-ul "btns", cu instantele butoanelor
for(var i:int=0; i<btns.length; i++) {
// seteaza si adauga culoare la fiecare buton
obj_color.color = set_colors[btns[i].name];
btns[i].transform.colorTransform = obj_color;
// inregistreaza un eveniment CLICK pt. fiecare buton
btns[i].addEventListener(MouseEvent.CLICK, changeColor);
}
// functie apelata de evenimentele CLICK
function changeColor(evt:Event):void
{
// obtine numele de instanta a butonului apasat
var b_name = evt.target.name;
// seteaza si schimba culoarea patratului (patrat)
obj_color.color = set_colors[b_name];
patrat.transform.colorTransform = obj_color;
}
- Daca vreti mai putine sau mai multe butoane, modificati Array-ul "btns" si obiectul "set_colors", reducand sau adaugand noi instante si culori, in functie de butoanele din scena.
Salvati acest document Flash si apasati "Ctrl+Enter" ca sa vedeti rezultatul.
- Fisierul FLA cu exemplu din acest tutorial poate fi descarcat de la: Tutorial Schimba culoarea la obiect MovieClip.