Cool Flash Effect Tutorials!

Sammanfattning

I den här guiden lär du dig hur du skapar en effekt kub övergång på musen välta.

Här slutresultatet:

Krav

Flash CS3 eller Flash CS4.

Obs: screenshot i denna handledning är gjord i Flash CS3. Det fungerar exakt likadant i Flash CS4.

Steg 1 - Installera effekt komponenten

Köpa Cube övergångseffekt här. Följ instruktionerna installera och dra denna komponent av komponent panelen i biblioteket på din. Fla-filen.

Steg 2 - Skapa ett nytt lager

För att hålla ordning omkring dig bör skapa ett nytt lager på de viktigaste tidslinjen och ge den ett namn. Gör det 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 även arbetar med transparenta material (mer om detta senare).

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

Steg 4 - Skapa knapp

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

Klicka på den första bildrutan i lagret "BTN" och rita en rektangel med storleken på duken (färg inte mater eftersom knappen inte syns). Markera rektangeln och omvandla det till en knapp med [trycka på F8] eller högerklicka på MovieClip -> "Konvertera till Symbol ...".

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

Dubbelklicka på knappen. Nu drar den första keyframe "Up" till den sista rutan "Hit". På så vis, att knappen kommer att vara interaktiv, men inte syns.

Tillbaka till de viktigaste tidslinjen och anger exempel namnet på knappen "BTN".

Steg 5 - Skapa start MovieClip

Effekten behöver ha två filmklipp där visuell information är hämtade från. Du kommer nu 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 på [tryck Ctrl-R] eller "File" -> "Importera" -> "Importera on Stage ...".

Nu omvandla bilden till en MovieClip och kalla den "img1".

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

Steg 6 - Skapa End MovieClip

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

Markera den första bildrutan i lagret "img2" (ok, dålig namngivning, gärna rätta till ) Och rita en rektangel med storleken på duken. Du vill vara säker på att slutet MovieClip har samma dimensioner som Start MovieClip. Thats varför du drar först en osynlig form med samma storlek som på Start MovieClip.

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

Konvertera formen till en MovieClip [trycka på F8] eller högerklicka på MovieClip -> "Konvertera till Symbol ..." och kalla den "img2".

Dubbelklicka på just skapat MovieClip, skapa ett nytt tomt lager och lägga in texten på den nybildade lager.

Gå tillbaka till de viktigaste tidslinjen och ställ exempel namnet på MovieClip till "img2".

Steg 7 - Lägg rollover ActionScript

Markera lagret "script" och öppna "Actions" fönster med "Windows" -> "Actions" eller [tryck F9].

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

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

I linje 9 slutligen du initiera effekt (dokumentation av parametern här). Den viktigaste delen är de två första parametern. Du definierar att övergången börjar med "img1" och slutar med "img2".

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

Steg 8 - Mer komplexa ActionScript

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

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

 Var kör = false;
 Var goin = false;
 Var goOut = false;

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

 funktion _onOut (e: int) (
  if (! kör) (
  _createAnimation ( "out");
  rinnande = true;
  ) else (
  goin = true;
  goOut = false;
  )
 )

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

  if (goin) (
  _createAnimation ( "out");
  ) else (
  rinnande = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ( "i");
  ) else (
  rinnande = 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", 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);
  )
 )

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" De åtgärder 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 dem när funktionerna "_onOver" och "_onOut" (linje 8 och 18) genomförs. Men bara om det var igång är sant, om det är falskt (linje 9 och 19), börjar du övergången genast (linje 10 och 20).

Funktionen "_createAnimation" (linje 52) är din hjälpare funktion början animationen beroende av riktning "dir" du passerade som parameter.

Observera att efter kalla "removeFilter" metoden (linje 29 och 41) både in MovieClip och End MovieClip är inställda på synliga (av effekten). Thats varför du ställa MovieClip synlighet - övergången inleddes med - till falska (linje 30 och 42).

Hämta

Klicka här för att ladda ner FLA av den här guiden. Obs:. Fla inte inkluderar effekten komponenten. För att göra FLA fungera måste du köpa Cube övergångseffekt här.

Här hittar du en video tutorial på hur man kan använda en annan effekt.