Un Efect Vizual Care Ia Ochii

În acest tutorial veţi învăţa să lucraţi cu movieClipuri şi puţin ActionScript.

Pentru început creaţi o un document Flash nou.

Crearea unui nou MovieClip.



I. Creearea unui movieClip

1. Din meniul Insert alegeţi prima opţiune "New Symbol..." sau folosiţi combinatia de taste Ctrl+F8.
   
2. În câmpul Name: scrieţi "anim0", apasaţi pe Advanced şi
   bifaţi "Export for actionScript". Aveţi grija să fie bifat şi "Export
   in first frame". Fereastra a trebui sa fie asemănătoare cu cea din
   dreapta (Create New Symbol). Apasaţi OK.
   
3. Acum trebuie sa creaţi un efect vizual impresionant. Am să dau un exemplu dupa care veţi urma aceiaşi paşi de mai multe ori.
   
   
   1. Creaţi un cerc cu "Oval Tool (O)" (ţineţi apasată tasta Shift pentru un cerc perfect).
      
      
      1. Selectaţi noul element grafic (Selection Tool (V)) cu dublu clic pe centrul lui
         
      2. Mergeţi in "Color Mixer" (Window->Color Mixer sau
         Shift+F9) şi modificati la Stroke Color sa nu apara nici o linie (sau
         stergeţi linia), iar la Fill Color creati un efect Radial (Type:Radial,
         pentru centru alegeţi o culoare cu Alpha 100%, iar pentru exterior
         Alpha 0%)
         
      
      </li>
      
   2. Acum in Timeline apasaţi butonul Ad Motion Guide. În acest
      layer veţi desena o traiectorie pe care cercul creat inainte sa o
      urmeze în timpul animaţiei.
      
      
      1. Selectaţi instrumentul Pencil Tool (Y). În josul barei de instrumente la opţiuni alegeţi Smooth pentru o curbă cât mai fină.
         
      2. Desenaţi în primul frame al layerului de ghidare o curbă care să ajungă în centrul movieClipului (plusul din centrul imaginii)
         
      
      </li>
      
   3. Inseraţi pe poziţia a 30-a din Timeline un frame (selectaţi şi apasati F5). Repetaţi pasul şi pentru celălalt layer.
      
   4. Blocaţi layerul de ghidare pentru a nu vă incurca in paşii următori.
      
   5. Selectati layerul cu cercul şi in Properties la Tween alegeţi
      Motion (sau click dreapta pe frameurile layerului cu cercul şi
      selectaţi Create Motion Tween), iar Erase +100 pentru o mişcare de
      incetinire.
      
      
      1. În primul frame mutaţi cercul pe capătul liniei dinspre exterior
         
      2. În ultimul frame mutaţi cercul pe capatul liniei dinspre
         interior - astfel aţi obţinut un efect de miscare pe o traiectorie bine
         stabilită (daca totul a mers bine în framurile din layerul cu cercul ar
         trebuie să apară o săgeata neagră pe un fond mov)
         
      
      </li>
      
   6. În ultimul frame pe layerului cu cercul scrieţi in fereastra Actions (F9) "stop();"
      
   7. Pentru un efect mai intens repetaţi paşii I.3.1->I.3.5 cu
      precizarea să creaţi un nou layer pentru fiecare set de
      cerc,traiectorie
      
   
   </li>
   

Reveniţi in movieClipul principal apăsând pe Scene-1 din Timeline. Repetaţi pasul I de cel puţin 4 ori pentru diversitate...

Poziţiile butoanelor din pasul precedent. (Efectuaţi click pe imagine pentru a o mări)





II. ActionScript-ul

1. Reveniţi in movieClipul principal apăsând pe Scene-1 din Timeline.
   
2. Screţi următorul script in primul frame din timeline
   

Cod:

var detectiv = new Object();
var xm, ym, i = 0, deseneaza = 0;
detectiv.onMouseDown = function() {
   _root.xm = _root._xmouse;
   _root.ym = _root._ymouse;
   _root.deseneaza = 1;
};
detectiv.onMouseUp = function() {
   _root.deseneaza = 0;
};
onEnterFrame = function() {
   if (_root.deseneaza == 1 && Math.abs((_root.xm-_root._xmouse))>2 && Math.abs((_root.ym-_root._ymouse))>2) {
      _root.attachMovie("anim"+i%5, "mc"+i, _root.getNextHighestDepth());
      _root["mc"+i]._x=_root._xmouse;
      _root["mc"+i]._y=_root._ymouse;
      _root["mc"+i]._rotation = (_root.xm-_root._xmouse)/(_root.ym-_root._ymouse);
      _root["mc"+i]._xscale = _root["mc"+i]._yscale=((_root.xm-_root._xmouse)*(_root.ym-_root._ymouse))/30%80;
      i++;
      _root.xm = _root._xmouse;
      _root.ym = _root._ymouse;
   }
};
Mouse.addListener(detectiv);

Acest script capteazã evenimentul de apãsare a mousului şi de eliberare.
Când se apasã se seteazã coordonatele din care se începe
desenarea în funcţie de coordonatele cursorului şi se seteazã o
variabilã deseneazã cu valoarea 1.
Când se elibereazã, variabila deseneazã devine 0.
De fiecare datã cand se afişeazã un nou frame, se verificã dacã
este apãsat butonul mouse-ului si daca acesta s-a mişcat din vechea
poziţie. Dacã da se creeazã un nou movieClip cu numele "mc"+i, derivat
din "anim"+i%5 (5 daca aţi creat 5 movieClipuri la pasul I). Se seteazã
coordonatele în funcţie de coordonatele cursorului, iar rotaţia şi
scalarea se face in funcţie de vechile poziţii ale mousului.