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
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
viviĆ³ vivido viviendo
Estoy viviendo aquĆ­.
- Traiesc /Locuiesc aici.
Creare Butoane Symbols

Last accessed pages

  1. Curs si Tutoriale JavaScript (57903)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (131940)
  3. Curs CSS Online Tutoriale CSS3 (47008)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (80386)
  5. Ce este Lumea Reala (84)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (3982)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (3728)
  3. Curs HTML gratuit Tutoriale HTML5 (3146)
  4. Curs si Tutoriale JavaScript (2567)
  5. Curs CSS Online Tutoriale CSS3 (2368)