Cool Tutorials Efecte Flash!

Resum

En aquest tutorial aprendrem a crear un efecte de cub en la transició de bolcada del ratolí.

Aquí el resultat final:

Requisits

Flash CS3 o Flash CS4.

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

Pas 1 - Instal lar el component d'efecte

Compri l'efecte de la transició Cube aquí. Si us plau, seguiu les instruccions d'instal lació i arrossegueu 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 ha de crear una nova capa a la línia de temps principal i donar-li un nom. Feu això com es mostra a la imatge.

Pas 3 - Crear un 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 transparent (més sobre això més endavant).

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

Pas 4 - Crear un botó

L'efecte d'cub ha de reaccionar dinàmicament als usuaris l'estat del ratolí (rollover / implantació). NO es tracta de les millors pràctiques per afegir el detector d'esdeveniments en el sentit de si mateix 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 (color no mater des del botó no serà visible). Seleccioneu el rectangle i el converteixen en un botó amb [premeu F8] o feu clic dret sobre el movieclip -> "Convertir en símbol ...".

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

Feu doble clic al botó. Ara arrossegueu el primer fotograma clau "amunt" fins a l'últim fotograma Hit ". Això assegura, que el botó serà interactiva, però no és visible.

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

Pas 5 - Crear iniciar movieclip

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

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

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

Establir el nom d'instància de la recent creada movieclip a "img1".

Pas 6 - Crear Fi movieclip

El movieclip final contindrà el text en lloc d'una imatge. L'aconseguir això tindrà un enfocament lleugerament diferent.

Seleccioneu el primer fotograma de la capa d' "img2" (ok, noms malament, no dubteu a corregir aquest ) I dibuixar un rectangle amb la mida de la tela. Vostè vol assegurar que el movieclip final té les mateixes dimensions que el movieclip d'inici. És per això per primera vegada establir una forma invisible, amb la mateixa mida que el movieclip d'inici.

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

Converteixi la manera F8 un [movieclip premsa] o feu clic dret sobre el movieclip -> "Convertir en símbol ..." i el nom "img2".

Feu doble clic al movieclip acabeu de crear, crear una nova capa buida i posar una mica de text a la capa de nova creació.

Cap de tornada a la línia de temps principal i establir el nom d'instància de l'movieclip a "img2".

Pas 7 - Afegir bolcada d'ActionScript

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

Si simplement voleu tenir una transició en rollover (i sense el suport directe de transició en el desplegament) còpia de les següents línies en la finestra de codi.

 (btn.addEventListener MouseEvent.ROLL_OVER, _onOver);

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

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

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

Per últim en la línia 9 inicialitzar l'efecte (la documentació dels paràmetres d'aquí). La part important són els dos primers paràmetres. Vostè 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 d'ActionScript

OK, 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 aconseguir que es necessita un codi més complex. Elimineu la seqüència de comandaments i afegir el text següent:

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

 var executant = false;
 goin var = false;
 goOut var = false;

 _onOver function (e: MouseEvent) (
  if (! running) (
  _createAnimation ( "a");
  running = true;
  ) Else (
  goin = false;
  goOut = true;
  )
 )

 _onOut function (e: MouseEvent) (
  if (! running) (
  _createAnimation ( "out");
  running = true;
  ) Else (
  goin = true;
  goOut = false;
  )
 )

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

  si (Goin) (
  _createAnimation ( "out");
  ) Else (
  running = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ( "a");
  ) Else (
  running = false;
  goin = false;
  )
 )

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

  if (dir == "a") (
  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);
  )
 )

És important saber, que no es pot invertir la direcció de la transició durant l'efecte s'està executant. En el seu lloc es pot "recordar" a l'acció de l'usuari, espereu fins que l'efecte es porta a terme i aplicar la transició Revers.

Les variables "Goin" i "goOut" (línia 5 i 6) s'utilitzen per a aquest fi. S'estableix quan les funcions "_onOver" i "_onOut" (línia 8 i 18) són executats. Però només si el funcionament var és cert, si és falsa (línia 9 i 19), s'inicia la transició immediatament (la línia 10 i 20).

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

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

Descarregar

Feu clic aquí per descarregar el fla d'aquest tutorial. Nota: El fitxer. Fla no inclou el component d'efecte. Per tal de fer que el fla, vostè necessita comprar l'efecte de la transició de cub aquí.

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