Kopsavilkums

Šajā apmācība jūs uzzināsiet, kā veidot kuba pārejas ietekme uz peles apgāšanās gadījumos.

Lūk gala rezultāts:


Prasības

Flash CS3 vai Flash CS4.

Piezīme: screenshot šajā apmācība tiek veikts Flash CS3. Tas darbojas tieši pats Flash CS4.

Step 1 - instalējiet ietekme komponents

Pirkuma Cube Transition Effect šeit. Lūdzu, izpildiet instalēšanas instrukcijas un velciet detaļas no komponenta panelis stājas bibliotēku jūsu. Fla failu.

Velciet komponents vērā bibliotēka

Step 2 - Izveidojiet jaunu slāni

Lai saglabātu lietas sakārtot jums vajadzētu izveidot jaunu slāni par galveno laika un piešķir tai nosaukumu. Vai tas, kā parādīts attēlā zemāk.

Izveidot slānis uz galveno skalā

Solis 3 - Create background

Tagad jūs veidojat fona ar gradientu. Kaut gan tas nav nepieciešams veikt ietekmes darbs tas parāda, ka ietekme arī strādā ar caurspīdīgu saturu (vairāk par to vēlāk).

Atlasiet pirmo rāmja "BG" slāni un izdarīt forma ar taisnstūra rīku kanvas. Atlasiet taisnstūri un pielāgot krāsu iestatījumus, lai būtu jauki gradientam (varat izmantot arī jebkuru citu krāsu).

Izveidot fons forma

Krāsu gradientu iestatījumus

Solis 4 - Create poga

Cube efekts būtu jāreaģē dinamiski lietotājiem peles valsts (apgāšanās / izvēršana). Tā ir labākā prakse nepievienot ja klausītājam, lai efekts sevi un tā vietā lietot "tukšu" pogu.

Noklikšķiniet uz pirmā kadra slānis "btn" un izdarīt taisnstūris ar izmēru audekla (krāsa nav mater jo poga nebūs redzama). Atlasiet taisnstūri un pārvērst to pogu ar [nospiediet F8] vai nospiediet labo peles taustiņu MovieClip -> "Convert to Symbol ...".

Konvertēt formu pogas

Uzstādīt nosaukums pogu "btn", un jāpārliecinās, ka tips ir "Poga".

Set nosaukums poga

Veiciet dubultklikšķi uz pogas. Tagad vilkt pirmo keyframe "Up", lai pēdējā posmā "Hit". Tas padara pārliecināti, ka poga ir interaktīvs, bet nav redzams.

Change keyframe iekšpusē poga

Atgriezties uz galveno grafiku un noteikt, piemēram nosaukumu pogu "btn".

Set piemēram vārds poga

Solis 5 - start Movieclip

Ietekme vajadzībām ir divas Movieclip kur redzes informations tiek veikti no. Jūs tagad izveidosies Movieclip pāreja sāksies ar.

Noklikšķiniet uz pirmo korpusu, uz slānis "img1". Importēt attēlu ar izmēru audekls, nospiežot [nospiediet Ctrl-R] jeb "File" -> "Import" -> "Import uz skatuves ...".

Import image

Tagad pārveidot šo attēlu Movieclip un nosauc to par "img1".

Konvertēt attēlu Movieclip

Set nosaukums Movieclip

Uzstādīt piemēram nosaukumu tikko izveidoju Movieclip uz "img1".

Set piemēram vārds

Step 6 - Create End Movieclip

End Movieclip būs iekļauts teksts, nevis attēlu. Sasniegtu jums būs nepieciešams nedaudz citādu pieeju.

Atlasiet pirmo rāmis slāni img2 "(ok, slikta vārda, justies brīvi labot :) ), Un izdarīt taisnstūris ar izmēru kanvas. Jūs vēlaties pārliecināties, ka End Movieclip ir vienāda izmēra, kā Start Movieclip. Thats kāpēc jūs vispirms izdarīt neredzama forma ar tāda paša izmēra kā Start Movieclip.

Draw forma

Atlasiet formu un noteikt alfa vērtību 0 (forma ir joprojām tur, bet neredzama).

Noteikt alfa formas

Konvertēt formu Movieclip [nospiediet F8] vai nospiediet labo peles taustiņu MovieClip -> "Convert to Symbol ...", un nosaukums tam "img2".

Pārveidot uz Movieclip

Veiciet dubultklikšķi uz tikko izveidoto Movieclip, izveidojiet jaunu tukšu slāni un izvirzīti daži teksta, ka jaunizveidoto slāni.

Pievienot tekstu Movieclip

Dodies atpakaļ uz galveno grafiku un noteikt, piemēram nosaukumu Movieclip uz "img2".

Set piemēram vārds

Step 7 - Pievienot apgāšanās ActionScript

Izvēlieties slānis "skriptu" un atveriet "Darbības" logu ar "Windows" -> "darbības" vai [nospiediet F9].

Open ActionScript logu

Ja jūs vienkārši vēlaties būt pāreja uz apgāšanās (un ne back-pāreja uz izvēršana) kopiju šādas rindas vērā koda logā. 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 funkcija _onOver (e: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  myFilter.init (img1, img2, 75, "l-> r", 2 "easeInOutCubic", false);
 )

Kas pirmajā rindā jūs pievienojat apgāšanās gadījumā klausītājam ar pogu. Ar funkciju "_onOver" (līnija 3) vispirms izveidot gadījums CubeTransitionEffectAS3 pirms atspējosiet peli interaktivitāti detaļas (līnija 4 un 5). Atcerieties, pogas izveidoti agrāk, ir rūpes par peles efektu un jūs nevēlaties efektu iejaukties tajā.

9 Saskaņā beidzot jūs sāktu efekts (dokumentācija parametru šeit). Svarīga daļa ir pirmo divu parametru. Jūs nosakāt, ka pāreja sākas ar "img1" un beidzas ar "img2".

Eksportēt savu fla failu. Kā jūs redzat, iedarbība komponents darbojas lieliski pārredzama fona "img2".

Step 8 - sarežģītāki ActionScript

OK, ar iepriekšējā kodeksā apgāšanās darbu tikai naudas sodu. Bet ja vēlaties arī ir izvēršana funkcija, kas apvērš pāreja no "img2" uz "img1"? Lai panāktu to, ka jums ir nepieciešams sarežģītāks kods. Dzēst skriptu un ievietojiet tekstu: 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);
 btn.addEventListener (MouseEvent.ROLL_OUT, _onOut);

 var darboties = false;
 var Goin = false;
 var goOut = false;

 funkcija _onOver (e: MouseEvent) (
  if (! darbojas) (
  _createAnimation ( "in");
  rādīt = true;
  ) else (
  Goin = false;
  goOut = true;
  )
 )

 funkcija _onOut (e: MouseEvent) (
  if (! darbojas) (
  _createAnimation ( "out");
  rādīt = true;
  ) else (
  Goin = true;
  goOut = false;
  )
 )

 funkcija _inAnimationDone (e: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  if (Goin) (
  _createAnimation ( "out");
  ) else (
  rādīt = false;
  goOut = false;
  )
 )

 funkcija _outAnimationDone (e: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  if (goOut) (
  _createAnimation ( "in");
  ) else (
  rādīt = false;
  Goin = false;
  )
 )

 funkcija _createAnimation (Dir: String) (
  var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  if (dir == "in") (
  myFilter.init (img1, img2, 24, "l-> r", 2 "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) else if (dir == "out") (
  myFilter.init (img2, img1, 24, "r-> L", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Tas ir svarīgi zināt, ka jūs nevarat mainīt virzienu pārejas laikā efekts darbojas. Tā vietā jūs varat teikt "atcerēties" darbību lietotājs, pagaidiet, līdz tā ir darīts, un piemēro Revers pāreju.

Mainīgo lielumu "goin" un "goOut" (line 5 and 6) tiek izmantotas šim nolūkam. Jūs nosakāt tos pēc funkcijas "_onOver" un "_onOut" (line 8 un 18) tiek izpildīti. Bet tikai tad var darboties ir taisnība, ja tā ir nepatiesa (līnijas 9 un 19), varat sākt pāreju uzreiz (līnija 10 un 20).

Funkcija "_createAnimation" (line 52) ir jūsu palīgs funkcija sākuma animācijas atkarībā no virziena "dir", Jūs nodots kā parametrs.

Paziņojums, ka pēc zvana "removeFilter" metodi (line 29 un 41) gan Sākt Movieclip un beigas Movieclip ir noteikti, lai redzams (no effect). Thats kāpēc jūs nosakāt Movieclip visibility - pāreja sākās ar - ar nepareizām (līnijas 30 and 42).

Galīgais rezultāts

Lejupielādēt

Uzklikšķināt šeit, lai lejupielādētu fla šo pamācību. Piezīme:. Fla nav iekļauti ietekmes komponents. Lai padarītu fla darbu, jums ir nepieciešams iegādāties Cube Transition Effect šeit.

Šeit jūs varat atrast video pamācību, kā ieviest dažādas sekas.

  • Share / Grāmatzīme