Crearea unui buton simplu

Un buton este derivat din clasa MovieClip. Fiecare MovieClip este
construit dintr-un număr de cadre, butonul are şi el un număr de cadre,
diferenţa este că acest număr de cadre este unul fix.

Construirea
initiala a butonului, inainte de modificarea gradientului. Este indicat
(in partea drepata jos) instrumentul cu care veti modifica gradientul



Cadrele necesare unui buton sunt cele care definesc ipostazele butonului:

• Atunci când mouse-ul este înafara butonului,
  
• Atunci când mouse-ul este deasupra butonului (butonul nu este apăsat)
  
• Când butonul este apăsat.
  

În plus, mai există un al patrulea cadru care are rolul de a
identifica care este zona în care trebuie să fie mouseul pentru a se
considera că acesta este deasupra butonului.

• Zona de definire a stării “deasupra butonului”.
  

Puteţi să începeţi fie prin inserarea unui nou Symbol pe care
să-l selectaţi de tip buton dar cei mai mulţi Flasheri preferă să
deseneze o primă stare a butonului şi apoi să convertească butonul
într-un symbol de tip buton. Aşa vom proceda şi noi:
Selectaţi instrumental rectangle din bara de instrumente (sau
apăsând tasta R) şi în fereastra de instrumente veţi găsi (în partea de
jos un mic buton de unde puteţi seta raza curburii în colţurile
dreptunghiului ce-l veţi desena – puneţi această valoare pe 10 - in
imaginea din dreapta, acest buton se observa ca fiind ultimul de pe
bara cu instrumente). De asemenea în zona de selectare a culorii,
setaţi un gradient liniar (primul de pe ultimul rând din paleta de
culori este un gradient liniar). Desenaţi un “dreptunghi” (cu marginile
rotunjite). În imagine este reprezentată fereastra cu care am setat
colturile dreptunghiului şi cum arată butonul în present. Tot în
imagine apare şi care este instrumental gradient cu care veţi încerca
să modificaţi butonul pentru a arăta ca în imaginea de jos.

Modificarea gradientului



Butonul trebuie să aibă un text care să-i dea un sens (nu facem
butoane doar de dragul de a face butoane). Totuşi pentru acest tutorial
nu m-am gândit la un sens anume pentru buton aşa că l-am denumit chiar
“buton”. Scrieţi cu ajutorul instrumentului text (setat ca text static)
cuvântul care daemnificaţie butonului dvs (dacă pătratul este prea mic
este treaba dumneavoastră să-l refaceţi) după care suprapuneţi textul
peste imaginea grafică a butonului. Selectaţi ambele componente,
apăsaţi click dreapta şi din pop-up-ul apărut, selectaţi “Convert to
Symbol” la fel ca în imagine. Aveţi grijă să selectaţi opţiunea buton
în noua fereastră apărută şi apoi acţionaţi butonul “OK”. Paşii aceştia
sunt reprezentaţi în imaginea următoare:


Construirea efectiva a butonului




Să modificăm butonul: apăsaţi dubluclick pe buton pentru a ajunge în
zona de editare. În partea de sus veţi observa cele 4 cadre de care
povesteam mai devreme. Mergeţi pe rând pe cadrele “Over”, “Down”, “Hit”
şi apăsaţi tasta F6 (pentru fiecare în parte):

Cele patru stari ale butonului dupa apasarea tastei F6




Puteţi să mergeţi pe fiecare în parte şi să modificaţi atât
backgroundul (gradientul de pe fundalul butonului) cât şi textul. Aveţi
grijă când faceţi acest lucru să nu daţi in extrema penibilă: de
exemplu un buton albastru care cand mergi cu mouseul pe el se face
verde pentru ca atunci când este apăsat să devina albastru este de-a
dreptul oribilicos. Ce voi face în acest tutorial este de a modifica
gradientul astfel: În starea over voi coborâ (folosind acelaşi
instrument de modificat gradientul) gradientul cu câţiva pixeli iar în
starea de apăsat (Down) voi ridica centrul gradientului şi îl voi roti
cu 180^o astfel încât impresia creată va fi aceea de
modificare a umbrelor şi deci dacă butonul apărea bombat în exterior
acum va fi bombat în interior. retururile finale sunt reprezentate in
imaginea urmatoare:

Modificarea starilor over si down




Revenim în scena principală:

Revenirea in scena principala




Ultima chestiune pe care o mai avem de făcut este să îi asociem un
script butonului nostrum (pentru că trebuie şi el să facă ceva
săracu’). În acest tutorial, apăsarea butonului va deschide în browser
situl google. După ce aţi ajuns în scena principală, deschideţi
fereastra pentru acţiuni (F9), selectaţi butonul şi scrieţi codul:

on (press) {
getURL("http://www.google.com");
}