Sammendrag

I denne opplæringen vil du lære hvordan du oppretter en kube overgang effekt på mus rollover.

Her er resultatet:


Krav

Flash CS3 eller Flash CS4.

Merk: Skjermbildet i denne opplæringen er laget i Flash CS3. Det fungerer akkurat det samme i Flash CS4.

Trinn 1 - Installere effekten komponenten

Kjøp Cube Overgangseffekt her. Følg instruksjonene for å installere og dra komponent fra komponenten panelet inn i biblioteket ditt. FLA fil.

Dra komponent til biblioteket

Trinn 2 - Lag et nytt layer

For å holde ting ryddig bør du lage et nytt lag på hovedtidslinjen og gi den et navn. Gjør dette som vist på skjermbildet nedenfor.

Opprette lag på hovedtidslinjen

Trinn 3 - Opprett bakgrunn

Nå kan du lage en bakgrunn med en gradient. Selv om dette ikke er nødvendig å gjøre effekten virker det viser at effekten virker også med gjennomsiktige innhold (mer om det senere).

Velg den første rammen i "BG" laget og tegne en figur med rektangelet verktøyet på lerretet. Velg rektangel og justere farge for å få en fin stigning (du kan også bruke andre farger).

Lag bakgrunn form

Color gradient innstillinger

Trinn 4 - Opprett-knappen

Kuben effekt bør reagere dynamisk på brukernes musen staten (rollover / utbygging). Det er best ikke å legge hendelsen lytteren til effekten selv og i stedet bruke en "blank"-knappen.

Klikk den første rammen i laget "btn" og tegne en firkant med størrelsen på lerretet (farger ikke mater siden knappen vil ikke være synlig). Velg rektangel og konvertere den til en knapp med [trykke F8] eller høyreklikk på videoklipp -> "Konverter til Symbol ...".

Konvertere form til knappen

Angi navnet på knappen "btn" og sørg for at typen er "Button".

Sett navn på knappen

Dobbeltklikk på knappen. Nå drar de første keyframe "Up" til den siste rammen "Hit". Dette sørger for at knappen vil være interaktive, men ikke synlig.

Endre keyframe inne knappen

Kom tilbake til hovedsiden tidslinjen og sett eksempel navnet på knappen "btn".

Sett eksempel navnet på knappen

Trinn 5 - Opprette starte videoklipp

Effekten må ha to videoklipp der visuelle informasjon er hentet fra. Du vil nå opprette videoklipp overgangen vil starte med.

Klikk på den første rammen på laget "img1". Importere et bilde med størrelsen på lerretet ved å trykke [Trykk Ctrl-R] eller "Fil" -> "Import" -> "Import på scenen ...".

Import bilde

Nå konvertere dette bildet til et videoklipp og gi den navnet "img1".

Konvertere image å videoklipp

Sett navn på videoklipp

Angi eksempel navnet på nettopp opprettet videoklipp til "img1".

Set eksempel navn

Trinn 6 - Opprett End videoklipp

The End videoklipp vil inneholde tekst i stedet for et bilde. De få til dette trenger du en litt annerledes tilnærming.

Velg det første bildet i laget "img2" (ok, dårlig navn, gjerne riktig at :) ) Og tegne en firkant med størrelsen på lerretet. Du vil være sikker på at slutten videoklipp har samme dimensjoner som Start videoklipp. Dvs hvorfor du først tegner en usynlig form med samme størrelse som Start-videoklipp.

Uavgjort form

Velg form og sette alfa-verdien til 0 (figuren er fortsatt der, men usynlig).

Sett alpha av form

Konverter figuren til et videoklipp [trykke F8] eller høyreklikk på videoklipp -> "Konverter til Symbol ..." og gi den navnet "img2".

Konverter til videoklipp

Dobbeltklikk nettopp opprettet videoklipp, opprette en ny tomt lag og putte noe tekst på det nyopprettede laget.

Legg tekst til videoklipp

Head tilbake til hovedsiden tidslinjen og sett eksempel navnet på videoklipp til "img2".

Set eksempel navn

Trinn 7 - Legg rollover ActionScript

Velg laget "script" og åpne "Handlinger" vindu med "Windows" -> "Handlinger" eller [trykke F9].

Åpne ActionScript vindu

Hvis du bare vil ha en overgang på rollover (og ingen back-overgang på utrullingen) kopiere følgende linjer i koden vinduet. 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

I den første linjen legger du rollover hendelsen lytteren til knappen. I funksjonen "_onOver" (linje 3) du først opprette en forekomst av CubeTransitionEffectAS3 før du deaktiverer musen interaktivitet av komponenten (linje 4 og 5). Husk knappen du opprettet tidligere er å ta vare på musen effekter og du ikke vil at effekten skal gripe inn på det.

I tråd 9 endelig initialiserer du effekten (dokumentasjon av parameteren her). Den viktigste delen er de to første parameter. Du definerer at overgangen starter med "img1" og slutter med "img2".

Eksportere FLA fil. Som du ser, virker effekten komponenten perfekt med transparent bakgrunn av "img2".

Trinn 8 - Mer komplekse ActionScript

OK, med forrige kode rollover fungerer helt fint. Men hva hvis du også vil ha en utbygging funksjon som reverserer overgangen fra «img2" til "img1"? For å oppnå at du trenger en mer kompleks kode. Slett skriptet og sette inn følgende: 

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

 var running = false;
 var goin = false;
 var goOut = false;

 funksjon _onOver (e: MouseEvent) (
  if (! kjører) (
  _createAnimation ( "i");
  running = true;
  ) else (
  goin = false;
  goOut = true;
  )
 )

 funksjon _onOut (e: MouseEvent) (
  if (! kjører) (
  _createAnimation ( "ut");
  running = true;
  ) else (
  goin = true;
  goOut = false;
  )
 )

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

  if (goin) (
  _createAnimation ( "ut");
  ) else (
  running = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ( "i");
  ) else (
  running = false;
  goin = false;
  )
 )

 funksjon _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 == "ut") (
  myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Det er viktig å vite at du ikke kan reversere retningen av overgangen under effekten kjører. I stedet kan "huske" handlingen til brukeren, vente til effekten er gjort og bruke revers overgangen.

Variablene "Goin" og "goOut" (linje 5 og 6) blir brukt til det formålet. Du setter dem når de funksjonene "_onOver" og "_onOut" (linje 8 og 18) er utført. Men bare hvis det var å kjøre er sant, hvis det er falske (linje 9 og 19), starter du overgangen umiddelbart (linje 10 og 20).

Funksjonen "_createAnimation" (linje 52) er hjelperen funksjon start animasjonen avhengig av retning "dir" du passerte som parameter.

Legg merke til at etter å kalle det "removeFilter" metoden (linje 29 og 41) både Start videoklipp og Enden videoklipp er satt til synlige (av effekten). Dvs hvorfor du sette videoklipp synlighet - overgangen startet med - å false (linje 30 og 42).

Sluttresultatet

Laste ned

Klikk her for å laste ned Fla av denne opplæringen. Merk:. Fla ikke inkluderer effekten komponenten. For å gjøre Fla fungere, må du kjøpe Cube Overgangseffekt her.

Her finner du en video tutorial på hvordan å implementere en annen effekt.

  • Share / Bookmark