Curs Flash

Elementele Button Symbols (Simboluri buton) se folosesc pentru a adauga interactivitate in continutul /animatia Flash.
Cu aceste Butoane utilizatorul poate efectua diferite actiuni, cum ar fi: oprirea sau pornirea unei animatii /film, saltul la anumite scene, incarcarea unei pagini web, si altele.
Crearea unui Buton in Flash se face simplu, ca si la celelalte tipuri de Symbols, prin una din cele 2 metode: convertirea unui obiect din scena in Buton sau prin utilizarea optiunii New Symbol.
- Pentru prima metoda se executa urmatorii pasi:

  1. Se selecteaza obiectul ce trebuie transformat in Buton.
  2. Se da click pe meniul Modify -> Convert to Symbol (sau tasta F8).
  3. In fereastra care apare (cea afisata mai jos) se poate da un nume (la Name) si la Type se alege optiunea Button, apoi se da OK.
Fereastra creare Buton
Simbolul creat va fi adaugat automat si in panoul Library, de aici poate fi in continuare editat.

- Pentru a doua varianta, se apeleaza optiunea New Symbol, din meniul Insert sau din optiunile panoului Library (sau Ctrl+F8). Se va deschide o fereastra ca cea din imaginea de sus, pentru setarea numelui si tipul simbolului.
- Cu aceasta metoda, dupa ce se defineste numele si tipul (in acest caz, Button) si se da OK, se va intra direct in pagina de editare pt. acel Symbol, o zona de lucru alba cu un semn "+" in centru, unde se poate lucra ca si in Scena principala, cu instrumentele de desen, imagini si sunete importate, etc.. Orice se creaza in acea pagina va fi inclus in Butonul nou creat, care este adaugat automat in Library.

Simbolurile Buton au un Timeline specific, format din 4 cadre (Frames) denumite: Up, Over, Down si Hit; dupa cum se vede in imaginea urmatoare.
Cadre Buton
Fiecare Frame are o functie specifica care ajuta la definirea si controlarea butonului in 4 stari /conditii diferite:


Iata un exemplu de creare a unui buton simplu si testarea lui (il puteti vedea si in prezentarea de mai jos, "Creare Buton Flash"). Efectuati urmatorii pasi:
1. Deschideti un document Flash nou, cu scena alba, alegeti instrumentul pentru desen dreptunghi (Rectangle Tool) si desenati pe scena un dreptunghi.
2. Acesta fiind selectat, dati click pe meniul Modify -> Convert to Symbol (sau tasta 'F8'), se va deschide fereastra pt. covertire in Symbol.
3. In aceasta fereastra alegeti la Type optiunea Button (puteti da si un nume la Name) si dati OK.
  - Simbolul Buton e creat si adaugat in Library, iar dreptunghiul din Scena devine instanta a lui.
4. In panoul Library dati dublu-click pe Simbolul Buton (sau click pe el si apoi Ctrl+E). Se va intra in pagina de editare a butonului, lucru indicat si de numele butonului aparut langa cel al scenei (Scene 1).
  - Se observa in panoul Timeline cele 4 cadre speciale (Up, Over, Down si Hit), doar primul, "Up", avand continut in el, restul fiind goale.
5. Apasati click-dreapta pe Frame-ul "Over" si alegeti optiunea Insert Keyframe. Se va crea o copie a cadrului anterior (Up) in Frame-ul "Over".
6. In acest cadru alegeti instrumentul "Oval Tool" (din bara cu unelte pt. desen, sau rapid, tasta 'O'), schimbati culoarea de la "Fill Color" si desenati un cerc in dreptunghi.
7. Apasati click-dreapta pe Frame-ul "Down" si alegeti optiunea Insert Keyframe. Se va crea o copie a cadrului anterior (Over) in Frame-ul "Down".
8. Aici alegeti instrument-ul "Free Transform" (din bara cu instrumente pt. desen, sau rapid, tasta 'Q'). Dati un click pe un loc gol din pagina, pentru a deselecta obiectele selectate, apoi click pe cercul din dreptunghi pt. a selecta doar cercul".
9. Trageti cu mouse-ul de punctele de selectie, facand din cerc un oval, apoi schimbati-i culoarea, de la "Fill Color" (una diferita de cea a dreptunghiului).
Acum sunt definite cele 3 stari ale butonului. Reveniti la Scena principala de lucru (prin click pe numele "Scene 1" din coltul stanga-sus).
  - Se observa ca in Scena apare dreptunghiul (convertit in Buton) cu starea initiala (din cadru "Up"), celelalte stari (Over si Down) fiind ascunse.
10. Acum va fi testat butonul, ca sa se vada rezultatul obtinut. Pentru aceasta se da click pe meniul Control -> Test Movie -> in Flash Professional. Se va deschide o fereastra mai mica, cu butonul in ea. Pozitionati mouse-ul deasupra dreptunghiului si tineti putin apasat click.
Se va produce efectul asteptat, la pozitionarea mouse-ului pe buton acesta se scimba aparand starea lui din cadrul "Over", iar la click pe el apare cum e definit in cadrul Down.
11. Sa incercam si efectul cadrului "Hit" din Buton. Inchideti fereastra de test si dati dublu-click pe Simbolul Buton adaugat in Library. Se intra iar in pagina de editare a butonului.
12. Apasati click-dreapta pe Frame-ul "Hit" si alegeti optiunea Insert Blank Keyframe. Se va crea o pagina alba in cadrul "Hit".

"Insert Keyframe" creaza in cadrul respectiv o copie a celui precedent, iar "Insert Blank Keyframe" creaza o pagina goala in acel Frame.

13.In aceasta pagina alba a cadrului "Hit", in dreptul semnului "+", desenati un cerc mic (astfel incat sa fie cuprins in zona care stiti ca se afla dreptunghiul in celelalte cadre, in raport cu acel "+").
  - Semnul "+" este un indiciu de reper pentru a putea desena in pagna alba, tinand cont de cum este el pozitionat in raport cu desenele din celelalte cadre.
Acest cerculet va reprezenta zona activa a butonului.
14. Acum testam si rezultatul obtinut dupa editarea in Frame-ul "Hit". Dati iar click pe meniul Control -> Test Movie -> in Flash Professional. In fereastra de test butonul apare la fel, pozitionati mouse-ul pe diferite locuri din el, dati si click, observati ca efectul de schimbare de la starile "Over" si "Down" (pt. click) apare doar cand mouse-ul se afla in zona in care s-a desenat cerculetul in cadrul "Hit", dar acesta e invizibil.
  - In zona activa mouse-ul capata aspectul unei "manute cu deget indicator".
- Iata si prezentarea Flash a acestui exemplu.

- Creare Buton Flash

creare_buton_flash
- Fisierul FLA cu acest exemplu il puteti descarca de la: FLA - Ex. Creare Buton.

Ca sa testati butonul direct in Scena de lucru, dati click pe meniul Control -> Enable Simple Buttons.
Cu aceasta optiune activata, butonul va afisa starea "over" cand mouse-ul este pozitionat deasupra lui in Scena, precum si starea "Down" la click pe el.
- Pentru a reveni la modul de lucru normal pt. Buton, dezactivati optiunea "Enable Simple Buttons" (dand iar click pe ea in meniul "Control").


Editarea unui element Buton se face la fel ca la celelalte tipuri de Symbol. Se alege Simbolul din panoul Library si se apasa "Ctrl+E" (sau dublu-click pe acel Symbol). Se va deschide pagina alba pentru editarea lui.
- Ca la toate tipurile de Symbols, si la "Button" modificarile facute vor fi transferate si Instantelor lui.

Instantele simbolului Buton se creaza la fel ca la "Graphic" si "Movie Clip", se trag cu mouse-ul din Library in Scena de lucru.
- Editarea unei Instante Button se face la fel ca la celelalte tipuri, prin dublu-clik pe Instanta, sau click-dreapta pe ea si se alege una din optiunile: Edit, Edit in Place sau Edit in New Window. Se va deschide pagina de editare.
- Ca si in cazul editarii Simbolului parinte, orice modificare facuta instantei in pagina ei de editare va fi transferata automat originalului (din Library) si la celelalte Instante.
- Modificarile ce se pot face unei Instante direct in Scena unde a fost trasa (cu "Free Transform Tool", sau filtre si efecte de culoare) nu vor afecta celelalte copii sau originalul; dar va aplica schimbarile facute si la celelalte stari (Over, Down, Hit).
- Daca se sterge Simbolul parinte (din Library), vor fi sterse toate instantele lui.

Puteti gasi cateva zeci de Template-uri de butoane gata facute in programul Flash. Alegeti meniul Window -> Common Libraries -> Buttons. Se va deschide un panou cu mai multe directoare pentru diferite tipuri de butoane. Directoarele pot fi deschise prin dublu-cklick, apoi butoanele pot fi trase in Scena (vor fi adaugate in Library).

Pentru ca un buton sa poata face ceva interactiv cand cineva da click pe el, trebuie folosit si cu ActionScript.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care atribut face ca optiunea din <select> sa fie selectata?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Optiune 1</option>
 <option value="val2" selected="selected">Optiune 2</option>
</select>
Care din aceste valori CSS creaza culoare gradient pentru fundal?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
Care cod creaza un array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicati functia PHP folosita pentru redirect la alta pagina.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
Indicati articolul corect la cuvantul "garden" in propozitia: "... garden is a place with flowers".
An The A
The garden is a place with flowers.
- Gradina este un loc cu flori.
Indicati articolul corect pentru cuvantul: "jardín" (gradina)
la los el
El jardín es un lugar de flores.
- Gradina e un loc cu flori.
Creare Butoane Symbols

Last accessed pages

  1. Jokes - Glume, Bancuri, Humor (2) (17325)
  2. Creare Meniu Dublu (2843)
  3. PHP Functii Anonime - Closures (925)
  4. Curs si Tutoriale JavaScript (134779)
  5. Lectia 89, Recapitulare 77-78 (81)

Popular pages this month

  1. Coduri pt culori (122)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (88)
  3. Curs HTML gratuit Tutoriale HTML5 (73)
  4. Elemente principale HTML (40)
  5. Exercitii engleza - English Tests and exercises - Grammar (39)