Kokkuvõte

Sel juhendaja õpid, kuidas luua kuutiosiirros mõju hiire ümbermineku korral.

Siin lõpptulemus:


Nõuded

Flash CS3 või Flash CS4.

Märkus: pildil on see õppekava on tehtud Flash CS3. See toimib täpselt sama Flash CS4.

Samm 1 - Installi toime osa

Ostu Cube siirrostehoste siin. Palun järgige paigaldamise juhis ja lohista komponendi osa paneeli arvesse raamatukogu oma. FLA fail.

Drag osa võtta raamatukogu

Samm 2 - Luua uus kiht

Selleks, et hoida asjad korras tuleks luua uus kiht peamiste ajaskaala ja anda talle nimi. Kas see, nagu näidatud alltoodud pildil.

Loo kiht peamine ajaskaala

Samm 3 - Loo taust

Nüüd loote taustal gradiendi. Kuigi seda ei ole vaja teha mõju töö see näitab, et selle mõju toimib ka läbipaistva sisuga (rohkem, et hiljem).

Valige esimene raam "BG" layer ja joonista kujund ristküliku tööriist lõuendile. Valige ristkülik ja kohandab värvi seaded on kena gradient (võid kasutada ka mõnda teist värvi).

Loo taust kuju

Värv kalde seaded

Samm 4 - Loo nupp

Kuubik mõju peaks reageerima dünaamiliselt kasutajate hiire seisund (ümbermineku / levikuga). On hea tava mitte lisada sündmuse kuulaja selle kohta, ennast ja selle asemel kasutada "tühi" nuppu.

Klõpsake esimese raami layer "btn" ja juhtida ristkülik lõuendi suuruse (värvi ei Mater sest nupp ei ole nähtav). Valige ristkülik ja teisendab selle nupu koos [klahvi F8] või paremklõps MovieClip -> "Convert to Symbol ...".

Convert kuju nupp

Määra nimi nupule "btn" ja veenduma, et tüüp on "Nupp".

Määra nimi nupp

Topeltklõpsake nuppu. Nüüd tõmmake esimene keyframe "Üles", et viimase raami "Hit". See tagab, et nupp on interaktiivne, kuid mitte nähtav.

Muuda keyframe sees nupp

Tulles tagasi peamine ajakava ja määrata näiteks nimi nupule "btn".

Set näiteks nimi nupp

Aste 5 - Loo algus Movieclip

Mõju peab olema kaks Movieclip kui visuaalne info on võetud. Te saate nüüd luua Movieclip üleminek algab.

Klõpsake esimese raami layer "img1". Import Pildi suurus lõuend, vajutades [Ctrl-R] või "Fail" -> "Import" -> "Import etapi kohta ...".

Import pilt

Nüüd muuta see pilt Movieclip ja nimi on "img1".

Teisenda pilt Movieclip

Määra nimi Movieclip

Set näiteks nimi äsjaloodud Movieclip et "img1".

Set näiteks nimi

Samm 6 - Loo lõpp Movieclip

Lõpp Movieclip sisaldab teksti asemel pilti. Selle saavutamiseks vajate pisut teistsugust lähenemist.

Valige esimene kaader layer "img2" (OK, halva nime, võite vabalt parandada, et :) ) Ja juhtida ristkülik lõuendi suuruse. Sa tahad teha kindlaks, et lõpp Movieclip on samade mõõtmetega nagu Start Movieclip. Thats miks sa esimese juhtida nähtamatu kuju sama suur kui Start Movieclip.

Draw kuju

Valige kuju ja määrata alfa väärtuseks 0 (kuju on ikka veel olemas, kuid nähtamatu).

Määra alfa kuju

Convert kuju Movieclip [klahvi F8] või paremklõps MovieClip -> "Convert to Symbol ..." ja nime "img2".

Teisenda Movieclip

Topeltklõpsake äsjaloodud Movieclip, luua uus tühi layer ja pane natuke teksti kohta, et vastloodud kihi.

Lisa tekst Movieclip

Head tagasi peamine ajakava ja määrata näiteks nimi Movieclip et "img2".

Set näiteks nimi

Samm 7 - Lisa ümbermineku ActionScript

Vali kiht "skripti" ja avatud "Actions" akna "Windows" -> "Actions" või [vajutage F9].

Avatud ActionScript aknas

Kui soovite lihtsalt on ülemineku kohta pikendamist (ja mitte tagasi-ülemineku kohta levikuga) koopia järgmised read arvesse kood aknasse. 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 funktsiooni _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);
 )

Esimeses reas lisate over sündmuse kuulaja, et nuppu. Kui funktsioon "_onOver" (rida 3) loote astme CubeTransitionEffectAS3 enne eemaldate hiire interaktiivsust osa (rida 4 ja 5). Pea meeles, et nupu loodud varem hoolitseb hiire mõju ja te ei soovi mõju häirida sellest.

Kooskõlas 9 Lõpuks te initsialiseerida mõju (dokumentatsioon parameeter siin). Oluliseks osaks on kaks esimest parameetrit. Saate määrata, et üleminek algab "img1" ja lõpeb "img2".

Viige FLA fail. Nagu näete, mõju komponent toimib ideaalselt läbipaistev taust "img2".

Aste 8 - Keerulisemad ActionScript

OK, eelmise koodi ümbermineku töötab just fine. Aga kui tahad saada levikuga funktsioon, mis teistpidi üleminek "img2" kuni "img1"? Et seda saavutada, pead keerulisem koodi. Kustuta skripti ja lisatakse järgmine: 

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

 var töötab = false;
 var lähed = false;
 var goOut = false;

 funktsiooni _onOver (E: MouseEvent) (
  if (! running) (
  _createAnimation ( "in");
  töötab = true;
  ) else (
  Goin = false;
  goOut = true;
  )
 )

 funktsiooni _onOut (E: MouseEvent) (
  if (! running) (
  _createAnimation ( "out");
  töötab = true;
  ) else (
  Goin = true;
  goOut = false;
  )
 )

 funktsiooni _inAnimationDone (e: Sündmus) (
  e.target.removeFilter ();
  img1.visible = false;

  if (lähed) (
  _createAnimation ( "out");
  ) else (
  töötab = false;
  goOut = false;
  )
 )

 funktsiooni _outAnimationDone (e: Sündmus) (
  e.target.removeFilter ();
  img2.visible = false;

  if (goOut) (
  _createAnimation ( "in");
  ) else (
  töötab = false;
  Goin = false;
  )
 )

 funktsiooni _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);
  )
 )

Oluline on teada, et te ei saa vastupidises suunas ülemineku ajal toime töötab. Selle asemel saate "mäleta" meetme kasutaja, oodake, kuni tulemus on teinud ja rakendavad revers üleminek.

Muutujad "Goin" ja "goOut" (rida 5 ja 6) on selleks kasutatud. Saad määrata neile kui funktsiooni "_onOver" ja "_onOut" (rida 8 ja 18) on teostatud. Aga ainult siis, kui var töötab on tõsi, kui see on vale (liin 9 ja 19), hakkate ülemineku kohe (real 10 ja 20).

Funktsioon "_createAnimation" (rida 52) on teie abistaja funktsiooni käivitamiseks animatsioon sõltuvalt suunas "dir" te möödunud parameeter.

Pange tähele, et pärast kutsutakse "removeFilter" meetod (rida 29 ja 41) nii Start Movieclip ja lõpp Movieclip on sätestatud, et nähtav (välja efekt). Thats miks te seate Movieclip nähtavus - üleminek algas - false (rida 30 ja 42).

Lõpphääletus

Alla laadima

Kliki siia, et laadida FLA käesoleva juhendaja. Märkus. FLA ei hõlmab mõju komponent. Et teha FLA töö, pead ostma Cube siirrostehoste siin.

Siit leiate video tutorial, kuidas rakendada erinevat mõju.

  • Aktsia / järjehoidjatesse