Cool Flash Effect Tutorials!

Samenvatting

In deze tutorial leer je hoe je een kubus overgang effect op de muis rollover maken.

Hier het eindresultaat:

Vereisten

Flash CS3 of Flash CS4.

Opmerking: De screenshot in deze tutorial is gemaakt in Flash CS3. Het werkt precies hetzelfde in Flash CS4.

Stap 1 - Installeer de component ingang

Koop de Cube Transition Effect hier. Volg de installatie instructies en sleep het onderdeel van de component paneel in de bibliotheek van uw. Fla bestand.

Stap 2 - Maak een nieuwe laag

Om alles netjes moet u een nieuwe laag over de belangrijkste tijdlijn te maken en geef het een naam te houden. Doe dit zoals op de screenshot hieronder.

Stap 3 - Maak achtergrond

Nu u een achtergrond met een kleurverloop. Hoewel dit niet noodzakelijk is om het effect werkt het laat zien dat het effect werkt ook met transparante inhoud (daarover later meer) te maken.

Selecteer het eerste frame in de "BG" laag en teken een vorm met de rechthoek tool op het doek. Selecteer de rechthoek en aanpassen van de kleur-instellingen op een mooie kleurverloop hebben (je kunt ook een andere kleur).

Stap 4 - Maak knop

De kubus van kracht moet dynamisch reageren op de gebruikers muis staat (rollover / rollout). Het is het beste praktijk niet naar het evenement luisteraar toe te voegen aan het effect zelf en in plaats daarvan gebruik van een "blanco" knop.

Klik op het eerste frame in de layer "btn" en teken een rechthoek met de grootte van het doek (kleur niet mater omdat de knop niet zichtbaar). Selecteer de rechthoek en te converteren naar een knop met [druk op F8] of klik met de rechtermuisknop op de MovieClip -> "Convert to Symbol ...".

Zet de naam van de knop om "btn" en zorg ervoor dat het type is "Button".

Dubbelklik op de knop. Sleep nu het eerste keyframe "Omhoog" tot het laatste frame "Hit". Dit zorgt ervoor, dat de knop interactief zijn, maar niet zichtbaar.

Ga terug naar de belangrijkste tijdlijn en zet de instantie naam van de knop om "btn".

Stap 5 - Maak start Videoclip

Het effect behoeften van de twee Videoclip waar de visuele informatie zijn van genomen. U zult nu de Videoclip van de overgang zal beginnen.

Klik op het eerste frame op de layer "img1". Importeer een afbeelding met de grootte van het doek door te drukken op [Ctrl-R] of "Bestand" -> "Import" -> "Import on Stage ...".

Nu zetten deze afbeelding naar een movieclip en noem deze "img1".

Stel de instance naam van de zojuist gecreëerde Videoclip op "img1".

Stap 6 - Einde Videoclip

The End Videoclip zal tekst bevatten in plaats van een afbeelding. De verwezenlijking van deze u een iets andere aanpak nodig heeft.

Selecteer het eerste frame van de layer "img2" (ok, slechte naamgeving, voel je vrij om juist dat ) En teken een rechthoek met de grootte van het doek. U wilt er zeker van dat het einde Videoclip heeft dezelfde afmetingen als de Start Videoclip. Thats waarom je eerste trekking een onzichtbare vorm met dezelfde grootte als de Start Videoclip.

Selecteer de vorm en zet de alpha waarde op 0 (de vorm is er nog steeds, maar onzichtbaar).

Zet de vorm op een Videoclip [druk op F8] of klik met de rechtermuisknop op de MovieClip -> "Convert to Symbol ..." en de naam "img2".

Dubbelklik op de zojuist aangemaakte Videoclip, maak een nieuwe lege laag en leg een tekst op die nieuwe laag.

Ga terug naar de belangrijkste tijdlijn en zet de naam van de instantie Videoclip op "img2".

Stap 7 - Voeg rollover ActionScript

Selecteer de laag "script" en open het "Acties" venster met "Windows" -> "Acties" of [druk op F9].

Als je gewoon wilt een overgang op rollover hebben (en geen back-overgang op uitrol) kopieer de volgende regels in de code-venster.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

In de eerste regel voegt u de rollover-gebeurtenis luisteraar aan de knop. In de functie "_onOver" (lijn 3), maak je eerst een instantie van het CubeTransitionEffectAS3 uitschakelen voordat u de muis interactiviteit van de component (lijn 4 en 5). Vergeet niet, eerder de knop die u hebt gemaakt is het verzorgen van de muis effecten en u wilt niet het effect op dat te bemoeien.

In lijn 9 eindelijk initialiseren je het effect (documentatie van de parameter hier). De belangrijk onderdeel zijn de twee eerste parameter. U bepaalt dat de overgang begint met "img1" en eindigt met "img2".

Exporteer uw fla bestand. Zoals u ziet, is het effect component werkt perfect met de transparante achtergrond van "img2".

Stap 8 - Meer complexe ActionScript

OK, met de vorige code van de rollover werkt prima. Maar wat als je ook wilt hebben een roll-out functie die de overgang van "img2" naar "img1 omkeert"? Om dat te bereiken heb je een meer complexe code. Verwijder het script en plaats de volgende:

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

 var draaien = false;
 var goin = false;
 var goOut = false;

 functie _onOver (e: MouseEvent) (
  if (! lopen) (
  _createAnimation ( "in");
  lopen = true;
  ) else (
  goin = false;
  goOut = true;
  )
 )

 functie _onOut (e: MouseEvent) (
  if (! lopen) (
  _createAnimation ( "out");
  lopen = true;
  ) else (
  goin = true;
  goOut = false;
  )
 )

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

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

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

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

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

Het is belangrijk om te weten, dat je niet kunt de richting van de overgang in de omgekeerde effect wordt uitgevoerd. In plaats daarvan kunt u "onthouden" de actie van de gebruiker, wachten tot het effect is gedaan en de toepassing van de revers overgang.

De variabelen 'goin' en 'goOut "(lijn 5 en 6) worden gebruikt voor dat doel. U stelt hen wanneer de functies "_onOver" en "_onOut" (lijn 8 en 18) worden uitgevoerd. Maar alleen als de var lopen waar is, als het valse (lijn 9 en 19), begin je meteen de overgang (lijn 10 en 20).

De functie "_createAnimation" (lijn 52) is uw helper functie de start de animatie afhankelijk van de richting "dir" u doorgegeven als parameter.

Merk op dat na het aanroepen van de "removeFilter" methode (lijn 29 en 41) zowel de Start Videoclip en het Einde Videoclip zijn ingesteld om zichtbaar (van het effect). Thats waarom u de zichtbaarheid Videoclip - de overgang begonnen met - om valse (lijn 30 en 42).

Downloaden

Klik hier voor het downloaden van de fla van deze tutorial. Opmerking: De. Fla niet opgenomen is het effect component. Om de fla werken, moet u de Cube Transition Effect hier kopen.

Hier vindt u een video tutorial van hoe je een ander effect te voeren.