Cool Flash Effect Tutorials!

Sammanfattning

I denna tutorial får du lära dig att skapa en effekt kub övergång på musen välta.

Här slutresultatet:

Krav

Flash CS3 eller Flash CS4.

Obs! Skärmdump i den här genomgången gjordes i Flash CS3. Det fungerar exakt likadant i Flash CS4.

Steg 1 - Installera effekt komponenten

Köp Cube övergångseffekt här . Följ installera instruktionerna och dra komponenten från den del panelen in i biblioteket på din. fla-filen.

Steg 2 - Skapa ett nytt lager

För att hålla ordning omkring du bör skapa ett nytt lager om de viktigaste tidslinjen och ge den ett namn. Gör detta som visas på skärmbilden nedan.

Steg 3 - Skapa bakgrund

Nu kan du skapa en bakgrund med en toning. Även om detta inte är nödvändigt för att effekten arbete visar att effekten fungerar även med öppet innehåll (mer om det senare).

Markera den första bilden i "BG" lager och rita en figur med rektangel verktyget på duken. Markera rektangeln och justera färginställningarna att ha en fin gradient (du kan även använda någon annan färg).

Steg 4 - Skapa knapp

Kuben effekt bör reagera dynamiskt på användarna musen staten (välta / utbyggnad). Det är bäst att inte lägga till händelsen lyssnaren att effekten i sig och istället använda en "blank"-knappen.

Klicka på första inramar i skiktet "BTN" och dra en rektangel med storleken på duken (färg inte mater eftersom knappen kommer inte att synas). Markera rektangeln och konvertera det till en Knapp med tryck [F8] eller högerklicka på MovieClip -> "Konvertera till Symbol ...".

Ange namnet på knappen "BTN" och kontrollera att typen är "knappen".

Dubbelklicka på knappen. Nu drar den första keyframe "Upp" till sista bildrutan "Hit". Detta ser till att knappen blir interaktiv, men inte syns.

Kom tillbaka till huvudmenyn tidslinjen och ange exempel namnet på knappen "BTN".

Steg 5 - Skapa börja MovieClip

Effekten behöver ha två MovieClip där visuella informationer är hämtade från. Du kommer att skapa MovieClip Övergången kommer att börja med.

Klicka på första inramar på lagret "img1". Importera en bild med storleken på duken genom att trycka [trycka Ctrl-R] eller "File" -> "Import" -> "Importera på scen ...".

Nu konvertera bilden till ett MovieClip och döp den till "img1".

Ange exempel namnet på den just skapade MovieClip till "img1".

Steg 6 - Skapa End MovieClip

The End MovieClip kommer att innehålla text i stället för en bild. Det uppnå detta behöver du en något annorlunda strategi.

Markera den första bildrutan i lagret "img2" (ok, dåligt namn, gärna rätta till ) Och dra en rektangel med storleken på duken. Du vill vara säker på att slutet MovieClip har samma mått som Start MovieClip. Därför har du först rita en osynlig form med samma storlek som på Start MovieClip.

Markera formen och ställ in alpha värdet till 0 (formen är kvar men osynliga).

Konvertera formen till ett MovieClip [] tryck F8 eller högerklicka på MovieClip -> "Konvertera till Symbol ..." och ge den namnet "img2".

Dubbelklicka på just skapade MovieClip, skapa ett nytt tomt lager och lägga lite text om att nybildade lager.

Gå tillbaka till huvudmenyn tidslinjen och ange exempel namnet på MovieClip till "img2".

Steg 7 - Lägg till årsskiftet ActionScript

Markera lagret "script" och öppna "Actions" fönster "Windows" -> "åtgärder" eller [tryck på F9].

Om du bara vill ha en övergång på välta (och ingen back-övergången på Utbyggnaden) kopiera följande rader i koden fönstret.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

På första raden du lägger lyssnaren överföringshändelse till knappen. I funktionen "_onOver" (linje 3) du först skapa en instans av CubeTransitionEffectAS3 innan du inaktiverar musen interaktivitet av komponenten (linje 4 och 5). Kom ihåg att knappen du skapade tidigare, är att ta hand om musen effekter och du inte vill effekten att lägga sig på det.

I linje 9 till slut du initierar effekten ( dokumentation av egenskapen här ). Den viktiga delen är de två första parameter. Du definierar att övergången börjar med "img1" och slutar med "img2".

Exportera dina FLA-filen. Som ni ser fungerar effekten komponent perfekt med genomskinlig bakgrund av "img2".

Steg 8 - Mer komplicerade ActionScript

OK, med den tidigare koden årsskiftet fungerar alldeles utmärkt. Men om du också vill ha en utbyggnad funktion som vänder på den övergång från "img2" till "img1"? För att uppnå detta behöver du en mer komplex kod. Ta bort skriptet och infoga följande:

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

 var igång = false;
 var goin = false;
 var goOut = false;

 funktion _onOver (e: MouseEvent) (
  if (! kör) (
  _createAnimation ("i");
  kör = true;
  ) Else (
  goin = false;
  goOut = true;
  )
 )

 funktion _onOut (e: MouseEvent) (
  if (! kör) (
  _createAnimation ("ut");
  kör = true;
  ) Else (
  goin = true;
  goOut = false;
  )
 )

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

  if (goin) (
  _createAnimation ("ut");
  ) Else (
  kör = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ("i");
  ) Else (
  kör = false;
  goin = false;
  )
 )

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

  if (dir == "i") (
  myFilter.init (img1, img2, 24, "l-> r", två "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) Else if (dir == "ut") (
  myFilter.init (img2, img1, 24, r-> l ", 2," easeInOutCubic ", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Det är viktigt att veta, att du inte kan vända riktningen på övergången under effekten är igång. Istället kan du "komma ihåg" effekten av användaren, vänta tills effekten är gjort och tillämpa revers övergången.

Variablerna "Goin" och "goOut" (linje 5 och 6) används för detta ändamål. Du ställer in dem när de funktioner "_onOver" och "_onOut" (linje 8 och 18) genomförs. Men bara om den var igång är sant, om det är falskt (linje 9 och 19), du börjar övergången direkt (linje 10 och 20).

Funktionen "_createAnimation" (linje 52) är din hjälpare funktionen starta animationen beroende på riktning "dir" du skickas som parameter.

Observera att efter kalla "removeFilter"-metoden (linje 29 och 41) både Start MovieClip och End MovieClip är inställda på synliga (av effekten). Därför har du anger MovieClip synlighet - övergången inleddes med - till false (linje 30 och 42).

Hämta

Klicka här för att ladda ner fla av denna tutorial. Obs!. FLA inte inbegriper effekten komponenten. För att FLA arbete, måste du köpa Cube övergångseffekt här .

Här hittar du en video tutorial om hur man ska genomföra en annan effekt .