Creare Butoane Symbols

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:

Se selecteaza obiectul ce trebuie transformat in Buton.
Se da click pe meniul Modify -> Convert to Symbol (sau tasta F8).
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.

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:

Up - In acest cadru se defineste cum sa apara initial butonul in continutul Flash.
Over - Aceasta stare e declansata cand utilizatorul pozitioneaza mouse-ul deasupra butonului. Aici se creaza butonul cum sa apara in aceasta conditie.
Down - Aceasta stare apare in momentul cand este apasat butonul cu mouse-ul.
Hit - In aceast Frame se defineste zona activa din buton, zona in care trebuie plasat mouse-ul pentru a actiona butonul. El este invizibil in afara paginii de editare.
Daca la acest cadru nu se face nimic (nu e folosit), suprafata activa a butonului va fi cea din ultimul Frame folosit.
- Acest Frame e util cand se doreste ca doar o anumita parte din buton sa fie activatoare (de exemplu o petala sau centrul unei flori).
- Cadrul "Hit" poate fi folosit si pentru a crea butoane invizibile, vedeti tutorialul Butoane invizibile.

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

- 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.

<<-Movie Clip Symbols -- Import Imagini->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag defineste zona de click intr-o harta creata dintr-o imagine?

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?

display overflow position

#id {
  overflow: auto;
}

Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.

onclick onmouseover onmouseout

document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}

Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".

$_SESSION $_GET $_POST

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".

who which whoever

Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.

Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".

que quien cuyo

Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.