Flash Tutorials Cool Effect!

Resumo

Neste tutorial, vostede aprender a crear un efecto de transición cubo no rato capotamento.

Aquí o resultado final:

Requisitos

Flash CS3 ou Flash CS4.

Nota: A imaxe deste tutorial está feito en Flash CS3. Funciona exactamente da mesma en Flash CS4.

compoñente Paso 1 - Instala o efecto

Adquira o efecto da transición Cube aquí . Por favor, siga as instrucións de instalación e arrastra o compoñente do panel de compoñentes para a biblioteca do seu arquivo. fla.

Paso 2 - Crear unha nova capa

Para manter as cousas pranchados, ten que crear unha nova capa na Timeline principal e darlle un nome. Fai isto como se mostra na imaxe de abaixo.

background Paso 3 - Crear

Agora se crea un fondo con un gradiente. Aínda que isto non sexa necesario facer o efecto que o traballo amosa que o efecto tamén funciona con contido transparente (máis sobre isto máis tarde).

Seleccione o primeiro marco da capa "bg e debuxar unha forma coa ferramenta rectángulo na pantalla. Seleccione o rectángulo e axuste as opcións de cores para ter un gradiente agradable (tamén pode usar calquera outra cor).

botón Paso 4 - Crear

O efecto cubo debe reaccionar dinamicamente para o estado do rato usuarios (rollover / rollout). É mellor práctica para non engadir o oínte de eventos para o efecto en si e si para usar un botón en branco ".

Prema no primeiro cadro da capa btn "e deseñar un rectángulo co tamaño da pantalla (de cor non mater xa que o botón non será visible). Seleccione o rectángulo e convertela-lo para un botón coa prema [F8] ou o botón dereito sobre o MovieClip -> "Converter en símbolo ...".

Define o nome do botón para "btn" e asegúrese de que o tipo é "Button".

Dun dobre clic no botón. Agora, arrastra o primeiro cadro clave "Up" para o último marco "Hit". Isto torna-se, que o botón será interactiva, pero non visible.

Voltar para a Timeline principal e establecer o nome da instancia do botón de "btn".

Paso 5 - Crear iniciar Movieclip

O efecto ten os dous teñen Movieclip onde a información visuais son retirados. Vai agora crear o movieclip a transición ha comezar.

Prema no primeiro recadro da capa "img1". Importar unha imaxe co tamaño da pantalla premendo [Ctrl-R] ou "File" -> "Importar" -> "Importar no escenario ...".

Agora converter esta imaxe nun movieclip co nome "img1".

Establece o nome da instancia do recén criado Movieclip con "img1".

Paso 6 - Crear un Movieclip Fin

O Movieclip End contén un texto en vez dunha imaxe. A conseguir isto, vai ter unha visión lixeiramente diferente.

Seleccione o primeiro marco da capa "img2" (ok, nomeando malo, Sinto-se a liberdade de corrixir esta ) E deseño dun rectángulo co tamaño da pantalla. Queres estar seguro de que o Movieclip End ten as mesmas dimensións do Movieclip Start. Isto é porque primeiro deseña unha forma invisible co mesmo tamaño que o Movieclip Start.

Seleccione a forma e establecer o valor alpha a 0 (o formato aínda está aí, pero invisible).

Converte a forma dun [Movieclip] presionar F8 ou prema co botón dereito sobre o MovieClip -> "Converter en símbolo ..." co nome "img2".

Faga dobre clic no Movieclip recén criada, cree unha nova capa baleira e poñer algún texto sobre a capa recén criada.

Xefe de volta para a Timeline principal e establecer o nome da instancia do MovieClip para "img2".

Paso 7 - Engadir rollover ActionScript

Seleccione a capa "script" e abra as "Accións" fiestra de "Windows" -> "Accións" ou preme [F9].

Se simplemente quere ter unha transición en capotamento (e non de transición de volta en implantación) Copia as seguintes liñas na fiestra de código.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

Na primeira liña que engadir o oínte de evento para o botón de rolagem. Na función _onOver "(liña 3), primeiro crear unha instancia da CubeTransitionEffectAS3 antes de desactivar a interactividade do rato do compoñente (liña 4 e 5). Lembre, o botón que creou anteriormente está coidando dos efectos do rato e non quere que o efecto de interferir niso.

Na liña 9, finalmente, lle arrincar o efecto ( documentación do parámetro aquí ). A parte importante é o parámetro dous primeiros. Vostede define a transición que comeza con "img1" e remata con "img2".

Exportar o arquivo fla. Como verás, o compoñente de efecto funciona perfectamente co fondo transparente "img2".

Paso 8 - Máis complexo ActionScript

OK, co código anterior a rolagem funciona moi ben. Pero e se tamén quere ter unha función de distribución que desfacer a transición de "img2" para "img1"? Para conseguir o que precisa un código máis complexo. Eliminar o script e introducir o seguinte:

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

 execución var = false;
 indo var = false;
 goOut var = false;

 _onOver función (e: MouseEvent) (
  if (! executando) (
  _createAnimation ("in");
  executando = true;
  Else ()
  indo = false;
  goOut = true;
  )
 )

 _onOut función (e: MouseEvent) (
  if (! executando) (
  _createAnimation ("out");
  executando = true;
  Else ()
  indo = true;
  goOut = false;
  )
 )

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

  se indo () (
  _createAnimation ("out");
  Else ()
  execución = false;
  goOut = false;
  )
 )

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

  se goOut () (
  _createAnimation ("in");
  Else ()
  execución = false;
  indo = false;
  )
 )

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

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

É importante saber que non pode invertir a dirección da transición durante o efecto está en execución. No seu canto pode "lembrar" a acción do usuario, agarde ata que o efecto faise e aplicar a transición avesso.

As variables indo "e" goOut "(liña 5 e 6) son utilizados para este fin. Vostede define-las cando as funcións _onOver "e" _onOut "(liña 8 e 18) son executados. Pero só se a var execución é verdadeiro, se é falso (liña 9 e 19), comeza a transición inmediatamente (liña 10 e 20).

A función _createAnimation "(liña 52) é a súa función auxiliar o inicio da animación, dependendo da dirección" dir "que pasou como parámetro.

Teña en conta que, tras chamar o removeFilter "método" (liña 29 e 41), tanto o Movieclip Start e End Movieclip están definidos para visibles (fóra do efecto). É por iso que definir a visibilidade Movieclip - a transición iniciado con - para a liña (false 30 e 42).

Descargar

Prema aquí para baixar o fla deste tutorial. Nota: A. Fla non inclúe o compoñente de efecto. Co fin de facer o traballo fla, necesitas comprar o efecto de transición Cube aquí .

Aquí podes atopar un vídeo tutorial de como aplicar un efecto diferente .