Derulare imagine cu ajutorul mouse-ului

Flash - Animatie

Acest tutorial flash iti va explica cum sa obtii controlul asupra unei imagini, putand sa o derulezi la stanga sau la dreapta doar miscand mouse-ul in aceasta directie.


Rezultatul:

Click pe imagine pentru a activa animatia.

 1.Pentru inceput descarcam o fotografie de tip - panorama.
  Click dreapta pe urmatoarea - save.


2.Deschide un nou document in Flash - File - New - daca folosesti Flash CS3/CS4 selecteaza Flash File(ActionScript 2.0) - OK


3.Imaginile fotografiei sunt: Inaltime: 300px, Latime: 2734px. Inaltimea trebuie sa se pastreze iar pentru latime vom folosi o valorea mai mica.
  Asadar apasa CTRL + J si modifica la Dimensions: 450px (width) x 300px (height), si pentru Frame Rate modificam la valoarea 25fps.


4.Adaugam imaginea in scena.
  File - Import - Import to Stage.. - selectam imaginea - Open.

5.Avand selectata imaginea, deschidem panoul Align (Window - Align) si aliniem imaginea in scena, bifand "To Stage" si dand click pe cele 3 iconite:


6.Selectam imaginea si apasam tasta F8 pentru a o converti intr-un movie clip, ii dam un nume, bifam Movie clip si apasam OK:


7.Apasam CTRL + F3 si avand selectata imaginea ii atribuim un nume - imagine_mc - apasam Enter:


8.De sus, din panoul Timeline (CTRL + ALT + T) selectam primul frame dupa care apasam tasta F9 pentru a deschide panoul Actions:


9.Copiem urmatorul cod:

this.onMouseMove = function() {
 constrainedMove(imagine_mc, 3, 1);
};

function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
 var mousePercent:Number = _xmouse/Stage.width;
 var mSpeed:Number;
 if (dir == 1) {
  mSpeed = 1-mousePercent;
 } else {
  mSpeed = mousePercent;
 }
 target.destX = Math.round(-((target._width-Stage.width)*mSpeed));
 target.onEnterFrame = function() {
  if (target._x == target.destX) {
  delete target.onEnterFrame;
  } else if (target._x>target.destX) {
  target._x -= Math.ceil((target._x-target.destX)*(speed/140));
  } else if (target._x<target.destX) {
  target._x += Math.ceil((target.destX-target._x)*(speed/140));
  }
 };
}


10.Acum pentru a vedea rezultatul fie apasam CTRL + Enter sau de sus File - Publish Preview - Flash.

Rezultatul:


Click pe imagine pentru a activa animatia.
 Click aici pentru a creea un cont nou
Aboneaza-te prin RSS
Comentarii (38)add comment

cosminel4u said:

Super tare ! Ce tip de program Flash folosesti ? :D Cum se numeste ? :D
 
Reporteaza Abuz
Displace
Apreciaza
iunie 03, 2009
Voturi: +0

admin1 said:

Exista doar un tip de flash - mai multe versiuni. In acest tutorial am folosit Adobe Flash CS3
 
Reporteaza Abuz
Displace
Apreciaza
iunie 03, 2009 | url
Voturi: +1

cosminel4u said:

Multumesc mult !
 
Reporteaza Abuz
Displace
Apreciaza
iunie 04, 2009
Voturi: +1

cosminel4u said:

Nu e explicat bine ... cum deschid imaginea ?
Cum selectez marimea ?
De unde ? :|
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009
Voturi: -1

admin said:

Ai sa vezi daca ai sa fii mai atent.
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009 | url
Voturi: -1

cosminel4u said:

Ok... am reusit ... dar nu merge scriptul ala ... imi da eroare .. zice ca :
Statement block must be terminated by '}'
De ce ?
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009
Voturi: -1

admin said:

Incearca sa copii din nou codul de pe site.

PS: Fii atent cand lasi un comentariu, ce ai gandit cand l-ai pus pe cel de mai sus ? Cum de ti-ai dat seama ca nu am specificat cum sa deschizi imaginea?
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009
Voturi: +0

cosminel4u said:

A fost o greseala .. dar codul acela il copiez perfect si imi zice eroarea aia :|
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009
Voturi: +0

admin said:

Cati ani ai ? Ti-am mai spus sa-l mai copii o data !!! Nu te-ai gandit poate l-am modificat, catusi de putin?
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009 | url
Voturi: -1

cosminel4u said:

Acum merge ... am adugat } la sfarsit de tot !
:D
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009
Voturi: +0

cosminel4u said:

Dar tot mai am o intrebare .. cum il uploadez ca sa il pun pe un forum ?
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009
Voturi: -1

cosminel4u said:

Tu cum l-ai pus pe site ? Ca vreau sa pun si eu pe site asta !
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009
Voturi: +0

admin said:

Fugi si invata HTML
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009 | url
Voturi: +0

cosminel4u said:

Cum il pun ? pe ce site il uploadez ? zi-mi si mie
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009
Voturi: +0

admin said:

Ti-am spus mai sus, in rest nu iti mai zic nimic.
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009 | url
Voturi: +0

cosminel4u said:

Gata :D L-am uploadat aici
http://www.spamtheweb.com
Si l-am pus intre tag-urile :
[flash][/flash]
Uite :
[flash]http://www.spamtheweb.com[/flash]
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009
Voturi: +0

Mihai said:

si ca sa numai vibreze cum fac?
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009 | url
Voturi: +0

cosminel4u said:

Vibreaza doar atunci cand nu mai misti mouseul ;)
 
Reporteaza Abuz
Displace
Apreciaza
iunie 08, 2009
Voturi: +0

Sakramento23 said:

Eu am photoshop cs3 dar nu gasesc flashu :| imi ziceti si mie unde il gasesc ?
 
Reporteaza Abuz
Displace
Apreciaza
octombrie 28, 2009 | url
Voturi: +0

admin said:

Adobe Flash nu este inclus in Adobe Photoshop. Trebuie sa ai kit-uri separate.
 
Reporteaza Abuz
Displace
Apreciaza
octombrie 28, 2009
Voturi: +0

Sakramento23 said:

k.... ms
 
Reporteaza Abuz
Displace
Apreciaza
octombrie 29, 2009 | url
Voturi: +0

r0bytza said:

Wei...da de unde iau alta poza deaia...sa arate ca a ta...Nu gasesc pe google :( >:( :'(
 
Reporteaza Abuz
Displace
Apreciaza
decembrie 07, 2009 | url
Voturi: -1

UpLoaD^ said:

urmez toti pasii si cand sa dau CTRL Enter se deschide imaginea, dar nu si merge :|. Ma puteti ajuta?
 
Reporteaza Abuz
Displace
Apreciaza
decembrie 09, 2009
Voturi: +0

Luminitafelicia said:

Pt.acest tutorial aveti nevoie de Photoshop ca sa puteti obtine o fotografie tip panorama,utilizind comanda PhotoMerge(luati mai multe fotografii,sa fie la aceleasi dimensiuni,le modificati daca e cazul contrastul,culoarea,luminozitatea,apoi le lipiti cu comanda PhotoMerge din meniul File-Automate).Salvati fotografia obtinuta,apoi deschideti programul Flash si urmati pasii din acest tutorial,avind grija ca imediat ce ati importat imaginea sa-i schimbati dimensiunile si cadrele pe secunda,respectiv FrameRate din Document Properties.Ca animatia sa va reuseasca trebuie sa aveti grija ca numele atribuit imaginii respectiv:imagine_mc,sa ramina acelasi din codul pe care-l copiati in action,altfel clipul nu va merge.Nu schimbati denumirea imaginii,scrieti-o care este in cod adica:imagine_mc.La final exportati documentul in format movie.Multumim pt.tutorial e frumos.
 
Reporteaza Abuz
Displace
Apreciaza
ianuarie 17, 2010
Voturi: +1

Adrian-ps said:

Auzi? asta se poate face si in photoshop ? adik pot realiza acelasi efect si cu ps?
 
Reporteaza Abuz
Displace
Apreciaza
aprilie 01, 2010
Voturi: +0

frOg! said:

eu am CS4.. am urmat toti pasi si mi-a iesit .. bun tutorial
 
Reporteaza Abuz
Displace
Apreciaza
mai 15, 2010 | url
Voturi: +0

valentin said:

Unii din voi sunteti bata rau:|
gen:[asa ca pt un top:|]
1. Auzi? asta se poate face si in photoshop ?[genial=))]
2. Eu am photoshop cs3 dar nu gasesc flashu :| imi ziceti si mie unde il gasesc ?
3. Tu cum l-ai pus pe site ? Ca vreau sa pun si eu pe site asta !
4. Nu e explicat bine ... cum deschid imaginea ?
Cum selectez marimea ?
De unde ? :|
 
Reporteaza Abuz
Displace
Apreciaza
iunie 28, 2010
Voturi: -2

Anda said:

Am o problema stupida! incerc sa fac un cerc plin :'( si cand il desenez imi apare un cerc gol cu linia de culoarea din outline colour.Sunt incepatoare.
 
Reporteaza Abuz
Displace
Apreciaza
iulie 18, 2010
Voturi: +0

alexander said:

Nai exista si Macromedia, nu numai Adobe Flash sau Flash-urile din Photoshop ;)
 
Reporteaza Abuz
Displace
Apreciaza
iulie 30, 2010
Voturi: +0

alexander said:

*Mai
 
Reporteaza Abuz
Displace
Apreciaza
iulie 30, 2010
Voturi: +0

tiffany jewelry said:

eu am CS4.. am urmat toti pasi si mi-a iesit .. bun tutorial
 
Reporteaza Abuz
Displace
Apreciaza
noiembrie 26, 2010 | url
Voturi: +0

Roberto said:

eu am reusit sa o fac, foarte bine explicat 10x, dar am o problema... cand nu se mai misca mouse-ul imi trepideaza imaginea... cum rezolv problema?
 
Reporteaza Abuz
Displace
Apreciaza
aprilie 21, 2011 | url
Voturi: +0

Coach Outlet Online said:

fdafdsafdsafdHere you will find all the latest Coach Outlet coupons.
 
Reporteaza Abuz
Displace
Apreciaza
iulie 28, 2011 | url
Voturi: +0

deyu16 said:

interesant ms
 
Reporteaza Abuz
Displace
Apreciaza
august 24, 2011 | url
Voturi: +0

website said:

Am o problema stupida! incerc sa fac un cerc plin :'( si cand il desenez imi apare un cerc gol cu linia de culoarea din outline colour.Sunt incepatoare.
 
Reporteaza Abuz
Displace
Apreciaza
septembrie 16, 2011 | url
Voturi: +0

moncler said:

moncler outlet, moncler 2012, moncler cheap, moncler sale
 
Reporteaza Abuz
Displace
Apreciaza
decembrie 08, 2011 | url
Voturi: +0

moncler pas cher said:

moncler pas cher, manteaux moncler
, doudoune moncler
 
Reporteaza Abuz
Displace
Apreciaza
decembrie 16, 2011 | url
Voturi: +0

lacoste polo shirts said:

For those that would like to extend his or her's appearance together with unusual quality then for him or her it truly is really your best option. Equally container is packed with scents which range relating to variants want natural green pear, Siberian wood, patchouli and additionally vetiver.
 
Reporteaza Abuz
Displace
Apreciaza
decembrie 28, 2011 | url
Voturi: +0

Adauga un comentariu
Micsoreaza | Mareste

busy