Santrauka

Šiame pavyzdyje jūs išmoksite, kaip kurti kubo perėjimo įtaką pelių apsivertus transporto priemonei.

Štai galutinis rezultatas:


Reikalavimai

Flash CS3 arba Flash CS4.

Pastaba: į šią mokymo Screenshot daroma Flash CS3. Ji veikia lygiai Flash CS4 pats.

1 žingsnis - Įdiegti poveikį sudėtinės dalies

Pirkimo Cube Perėjimo efektai čia. Prašome sekite instrukcijas, įdiegti ir tempkite komponento sudėtinės skydelio į savo. Fla bibliotekoje.

Drag sudėtinės į biblioteką

2 žingsnis - Sukurti naują sluoksnį

Jei norite kad viskas būtų tvarkingai reikia sukurti naują sluoksnį į pagrindinius terminus ir suteikia jai pavadinimą. Ar tai, kaip parodyta paveiksle žemiau.

Sukurti sluoksnį pagrindinė laiko

3 žingsnis - Sukurti fonas

Dabar galite sukurti su nuolydžiu fone. Nors tai nėra būtina atlikti poveikio, kurį ji rodo, kad poveikis taip pat dirba su skaidriais turinį (daugiau apie tai vėliau).

Pasirinkite pirmąjį rėmo, "BG" sluoksniu ir parengti su stačiakampio įrankį drobė formos. Pasirinkite stačiakampyje ir koreguoti spalvų nustatymus Have a nice gradientas (taip pat galite naudoti bet kokios kitos spalvos).

Sukurti fono forma

Spalvotas nuolydis Nustatymai

4 žingsnis - sukurkite mygtuką

Kubas poveikis turėtų reaguoti į dinamiškai vartotojų pelės narė (virtimo / Rida). Tai geriausia praktika nebuvo įtraukti atveju klausytojo poveikį sau ir vietoj to naudoti "tuščią" mygtuką.

Spustelėkite pirmą rėmo sluoksnis "btn" ir nubrėžti stačiakampį su Canvas Size (spalva nėra Mater nuo mygtukas nebus matomas). Pasirinkite stačiakampyje ir paversti jį į mygtuką su [F8] arba paspauskite dešiniuoju pelės klavišu MovieClip -> "Convert to Symbol ...".

Konvertuoti figūrą mygtukas

Nustatyti mygtuko pavadinimą į "btn" ir įsitikinkite, kad tipo "Button".

Nustatyti pavadinimas mygtukas

Dukart spustelėkite mygtuką. Dabar perkelkite pirmą dėžę "Up" iki paskutinio kadro "Hit". Tai leidžia įsitikinti, kad mygtukas bus interaktyvus, bet nematomas.

Keisti dėžę viduje mygtukas

Grįžtant prie pagrindinės tvarkaraštį ir nustatyti, pavyzdžiui, pavadinimas mygtuką "btn".

Rinkinys, pavyzdžiui, pavadinimas mygtukas

5 žingsnis - sukurkite pradėti Movieclip

Poveikis turi du Movieclip kai vaizdinės informacijos yra paimta iš. Jūs sukuriate dabar Movieclip perėjimas prasidės.

Spauskite ant pirmojo rėmelį sluoksnį img1 ". Importas vaizdas su Canvas Size, paspausdami [paspauskite Ctrl-R] arba "File" -> "Importas" -> "Importas scenoje ...".

Importo vaizdas

Dabar konvertuoti šį vaizdą Movieclip ir pavadinkite ją "img1".

Konvertuoti vaizdą Movieclip

Nustatyti pavadinimas Movieclip

Rinkinys, pavyzdžiui, pavadinimas tik sukurtos Movieclip į "img1".

Nustatyti instancijos vardas

6 žingsnis - sukurkite Pabaiga Movieclip

Pabaiga Movieclip kurioje bus tekstas, o ne vaizdas. Pasiekti šį tikslą, jums reikės šiek tiek kitoks požiūris.

Pasirinkite pirmąjį rėmelio sluoksnį img2 "(Gerai, blogai pavadinimų, feel free to teisingai, kad :) ) Ir nupiešti stačiakampį su drobė dydis. Jūs norite įsitikinti, kad pabaiga Movieclip taip pat matmenų Pradėti Movieclip. Thats why Pirmą kartą atkreipti nematoma figūrą su tokio pat dydžio kaip Pradėti Movieclip.

Lygiosios forma

Pasirinkite forma ir nustatyti alfa lygi 0 (forma dar egzistuoja, bet nematomas).

Nustatyti alfa formos

Convert figūrą Movieclip [F8] arba paspauskite dešiniuoju pelės klavišu MovieClip -> "Convert to Symbol ..." ir pavadinkite ją "img2".

Konvertuoti į Movieclip

Dukart spustelėkite ką tik sukurtą Movieclip, sukurti naują tuščią sluoksnį ir įdėti tekstą tą naujai sukurtą sluoksnį.

Pridėti tekstas Movieclip

Grįžkite į pagrindinius terminus ir nustatyti, pavyzdžiui, pavadinimas Movieclip į "img2".

Nustatyti instancijos vardas

7 etapas - Įdėti virtimo ActionScript

Pažymėkite sluoksnio "scenarijus" ir atidarykite "Veiksmai" langas su "Windows" -> "Actions" arba [paspauskite F9].

Atidaryti ActionScript langą

Jei tiesiog norite turėti dėl pereinamojo laikotarpio termino pratęsimo (o ne nugaros pereinamosios Rida) kopiją šias eilutes į kodo langas. 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 funkcija _onOver (E: MouseEvent) (
  var MyFilter: CubeTransitionEffectAS3 = nauji CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  ADDCHILD (MyFilter);

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

Pirmoje eilutėje pridėsite apsivertus klausytojo mygtuką. Be funkcija "_onOver" (3 eilutė) pirmą kartą kuriate iš CubeTransitionEffectAS3 instancija išjungti pelės sąveikos sudedamosios dalies (eilutė 4 ir 5). Atminkite, kad mygtuką sukurta anksčiau yra rūpintis pelės poveikio ir nenorite, kad poveikis kištis į tai.

Laikantis 9 galiausiai jums inicijuoti poveikio (dokumentacija parametras čia). Svarbi dalis yra pirmųjų dviejų parametrų. Norėdami nustatyti, kad perėjimas prasideda "img1" ir baigiasi "img2".

Eksportuoti savo Fla. Kaip matote, poveikis komponentas veikia puikiai su skaidriais fone "img2".

8 etapas - Daugiau kompleksas ActionScript

Gerai, su ankstesnių kodas virtimo veikia gerai. Bet kas, jei jūs taip pat norite turėti diegimo funkcija nesėkmių iš "img2 perėjimas" į "img1"? Norint pasiekti, kad jums reikia daugiau sudėtingų kodas. Ištrinti scenarijų ir įtraukti taip: 

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

 var veikia = false;
 var goin = false;
 var goOut = false;

 funkcija _onOver (E: MouseEvent) (
  if (! rodyti) (
  _createAnimation ( "in");
  veikia = true;
  ) else (
  goin = false;
  goOut = true;
  )
 )

 funkcija _onOut (E: MouseEvent) (
  if (! rodyti) (
  _createAnimation ( "out");
  veikia = true;
  ) else (
  goin = true;
  goOut = false;
  )
 )

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

  if (Goin) (
  _createAnimation ( "out");
  ) else (
  veikia = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ( "in");
  ) else (
  veikia = false;
  goin = false;
  )
 )

 funkcija _createAnimation (dir: String) (
  var MyFilter: CubeTransitionEffectAS3 = nauji 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);
  )
 )

Svarbu žinoti, kad jūs negalite pakeisti perėjimo kryptimi per efektas veikia. Vietoj to jums gali "prisiminti" naudotojo veiksmų, palaukti, kol poveikis yra padaryta ir taikyti Revers perėjimą.

Kintamųjų "Važiuojam" ir "goOut" (linija 5 ir 6) yra naudojamos tam tikslui. Jūs nustatote, kai jų funkcijas "_onOver" ir "_onOut" (linija 8 ir 18) yra įvykdytas. Bet tik jei var veikia, tiesa, jei jis klaidingas (eilutė 9 ir 19), galite pradėti perėjimą iš karto (atitinka 10 ir 20).

Funkcija "_createAnimation" (52 eilutė), tai Jūsų pagalbininkas funkcija paleisti Animacijos priklausomai nuo krypties "dir" Jums perduodamas kaip parametras.

Atkreipkite dėmesį, kad po to, kai raginama "removeFilter" metodą (eilutė 29 41) tiek Pradėti Movieclip ir pabaiga Movieclip yra nustatyta matomas (iš efektas). Thats why galite nustatyti Movieclip matomumas - perėjimas prasidėjo - false (eilutė 30 ir 42).

Galutinis rezultatas

Atsisiųsti

Spauskite čia jei norite atsisiųsti šią pamoka FLA. Pastaba. FLA nėra apima poveikį komponentas. Kad FLA darbą, Jums reikia įsigyti Cube Perėjimo efektai čia.

Čia galite rasti video pamoka apie tai, kaip įgyvendinti skirtingą poveikį.

  • Dalintis / Išsaugoti