Refredar Efecte Tutorials Flash!

Resum

En aquest tutorial aprendràs com crear un efecte de transició cub en rollover del ratolí.

Aquí el resultat final:

Requeriments

Flash CS3 o Flash CS4.

Nota: La captura de pantalla en aquest tutorial està fet en Flash CS3. Funciona exactament igual en Flash CS4.

Pas 1 - Instal l'efecte de components

Comprar el efecte de transició Cub aquí . Si us plau, seguiu les instruccions d'instal lació i arrossegar el component des del tauler de components a la biblioteca del seu arxiu. fla.

Pas 2 - Crear una nova capa

Per mantenir les coses ordenades s'ha de crear una nova capa en la línia de temps principal i donar-li un nom. Feu això com es mostra a la pantalla de sota.

Pas 3 - Creació de fons

Ara es crea un fons amb un degradat. Encara que això no és necessari per fer que l'efecte que mostra que l'efecte també treballa amb el contingut transparents (més sobre això més endavant).

Seleccioneu el primer fotograma de la "bg" capa i dibuixar una forma amb l'eina de rectangle en el llenç. Seleccioneu el rectangle i ajustar les opcions de color per tenir un gradient agradable (també es pot utilitzar qualsevol altre color).

Pas 4 - Crear botó

L'efecte de cub ha de reaccionar de forma dinàmica a l'estat del ratolí usuaris (rollover / llançament). El millor és la pràctica de no afegir el detector d'esdeveniments amb el mateix efecte i en lloc d'utilitzar un "blanc" botó.

Feu clic al primer fotograma de la capa "btn" i dibuixa un rectangle amb la mida de la tela (el color no mater ja que el botó no serà visible). Seleccioneu el rectangle i convertir-lo en un botó amb prémer [F8] o clic dret sobre el clip de pel lícula -> "Convertir en símbol ...".

Definiu el nom del botó a "btn" i assegureu-vos que el tipus és "Button".

Feu doble clic al botó. Ara arrossegament el primer fotograma clau "Up" fins a l'últim fotograma "Hit". Això s'assegura que el botó es interactiu però no és visible.

Per tornar a la línia de temps principal i establir el nom d'instància del botó de "btn".

Pas 5 - Crear inici MovieClip

L'efecte de les necessitats dels dos movieclip on la informació visual s'han pres de. Ara anem a crear l'movieclip la transició començarà amb.

Feu clic al primer fotograma de la capa "img1". Importar una imatge amb la mida de la tela en prémer [Ctrl-R] o "File" -> "Importa" -> "Importar a l'escenari ...".

Ara convertir aquesta imatge a un clip de pel lícula i assigneu-li el nom "img1".

Definiu el nom d'instància del clip de pel lícula que acaba de crear "img1".

Pas 6 - Crear MovieClip Fi

El MovieClip Cap contindrà text en lloc d'una imatge. El aconseguir això tindrà un enfocament lleugerament diferent.

Seleccioneu el primer fotograma de la capa "img2" (ok, nomenant malament, no dubteu a corregir aquesta ) I dibuixeu un rectangle amb la mida del llenç. Vostè vol assegurar-se que el clip de pel lícula final té la mateixa dimensió que el clip de pel lícula de començament. És per això que primer dibuixi una forma invisible amb la mateixa mida que el movieclip Inici.

Seleccioneu la forma i establir el valor alfa a 0 (la forma segueix aquí, però invisible).

Converteixi la forma d'un] movieclip [premeu F8 o feu clic dret en el clip de pel lícula -> "Convertir en símbol ..." i el nom "img2".

Feu doble clic al clip de pel lícula que acabeu de crear, crear una nova capa buida i posar una mica de text en aquesta capa de nova creació.

Torna a la línia de temps principal i establir el nom d'instància del clip de pel lícula a "img2".

Pas 7 - Afegir bolcada ActionScript

Seleccioneu la capa d'"script" i obriu el "Accions" finestra "Windows" -> "Accions" o [], premeu F9.

Si simplement voleu tenir una transició en rollover (i no tornar a la transició de llançament) còpia les línies següents a la finestra de codi.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 _onOver funció (i: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 CubeTransitionEffectAS3 = new ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

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

A la primera línia d'afegir el detector d'esdeveniments de transferència al botó. En la funció "_onOver" (línia 3) crear per primera vegada una instància de la CubeTransitionEffectAS3 abans de desactivar la interactivitat del ratolí del component (línia 4 i 5). Recordeu que el botó que ha creat anteriorment s'ocupa dels efectes de ratolí i no voleu que l'efecte d'interferir en això.

En la línia 9, finalment es inicialitza l'efecte ( la documentació dels paràmetres que aquí ). La part important són els dos primers paràmetres. Es defineix que la transició comença amb "img1" i acaba amb "img2".

Exportar l'arxiu FLA. Com podeu veure, el component d'efecte funciona perfectament amb el fons transparent de "img2".

Pas 8 - Més complex ActionScript

Bé, amb el codi anterior el traspàs funciona bé. Però el que si vostè també vol tenir una funció de desplegament que inverteix la transició de "img2" a "img1"? Per a això es necessita un codi més complex. Elimineu el guió i afegir el següent:

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

 executant var = false;
 Goin var = false;
 goOut var = false;

 _onOver funció (i: MouseEvent) (
  if (! córrer) (
  _createAnimation ("in");
  executa = true;
  Else ()
  Goin = false;
  goOut = true;
  )
 )

 _onOut funció (i: MouseEvent) (
  if (! córrer) (
  _createAnimation ("fora");
  executa = true;
  Else ()
  Goin = true;
  goOut = false;
  )
 )

 _inAnimationDone funció (i: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  if (goin) (
  _createAnimation ("fora");
  Else ()
  executa = false;
  goOut = false;
  )
 )

 _outAnimationDone funció (i: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  if (goOut) (
  _createAnimation ("in");
  Else ()
  executa = false;
  Goin = false;
  )
 )

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

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

És important saber, que no es pot invertir la direcció de la transició durant l'efecte s'està executant. En comptes d'això pot "recordar" l'acció de l'usuari, espereu fins que l'efecte es porta a terme i aplicar la transició pestanyes.

Les variables "goin" i "goOut" (línia 5 i 6) s'utilitzen amb aquesta finalitat. S'estableix que quan les funcions "_onOver" i "_onOut" (línia 8 i 18) s'executen. Però només si la var córrer és veritat, si és fals (línia 9 i 19), d'iniciar la transició immediatament (la línia 10 i 20).

La funció "_createAnimation" (línia 52) és la seva funció auxiliar del començament de l'animació en funció de la direcció "dir" li passa com a paràmetre.

Tingueu en compte que després de trucar al removeFilter "mètode" (línia 29 i 41) tant en el movieclip d'inici i de finalització el movieclip s'estableixen en visible (fora de l'efecte). És per això que s'estableix la visibilitat MovieClip - la transició va començar amb - a false (la línia 30 i 42).

Descarregar

Feu clic aquí per descarregar el fla d'aquest tutorial. Nota: L'arxiu. Fla no inclou el component d'efecte. Per tal de fer la feina fla, necessita adquirir l' efecte de transició Cub aquí .

Aquí pot trobar un vídeo tutorial de com aplicar un efecte diferent .