Didacticiels Flash effet de refroidir!

Résumé

Dans ce tutoriel, vous apprendrez comment créer un effet de transition cube sur roulement de la souris.

Voici le résultat final:

Exigences

Flash CS3 ou Flash CS4.

Note: La capture d'écran dans ce tutoriel est fait dans Flash CS3. Il fonctionne exactement de la même dans Flash CS4.

élément Étape 1 - Installer l'effet

Achetez les effet de transition Cube ici . S'il vous plaît suivez les instructions d'installation et faites glisser le composant du panneau composant dans la bibliothèque de votre fichier. fla.

Étape 2 - Créez un nouveau calque

Pour garder les choses en ordre, vous devez créer un nouveau calque sur le scénario principal et de lui donner un nom. Pour ce faire, comme indiqué sur la capture d'écran ci-dessous.

arrière-plan Étape 3 - Création

Maintenant, vous créez un arrière-plan avec un dégradé. Même si cela n'est pas nécessaire pour faire fonctionner effet, il montre que l'effet fonctionne aussi avec un contenu transparent (plus sur cela plus tard).

Sélectionnez la première image dans le "bg" calque et dessinez une forme avec l'outil rectangle sur la toile. Sélectionnez le rectangle et d'ajuster les paramètres de couleur pour avoir un joli dégradé (vous pouvez aussi utiliser une autre couleur).

le bouton Étape 4 - Créer

L'effet de cube devrait réagir de façon dynamique à l'état de souris utilisateurs (roulement / déploiement). Il est de bonne pratique ne pas ajouter les écouteur d'événement à l'effet lui-même et d'utiliser plutôt un «blanc» le bouton.

Cliquez sur la première image dans le calque "btn" et dessinez un rectangle de la taille de la toile (couleur ne dure depuis le bouton ne sera pas visible). Sélectionnez le rectangle et le convertir à un bouton avec appuyez sur [F8] ou clic droit sur le MovieClip -> "Convertir en symbole ...».

Définissez le nom du bouton "btn" et assurez-vous que le type est "Button".

Double-cliquez sur le bouton. Maintenant, faites glisser la première image-clé "Up" à la dernière image "Hit". Cela permet de s'assurer que le bouton sera interactif, mais pas visible.

Revenez au scénario principal et définissez le nom d'occurrence du bouton "btn".

Étape 5 - Crée un MovieClip

L'effet des besoins des deux MovieClip où les informations visuelles sont tirés. Vous pouvez maintenant créer le MovieClip la transition va commencer avec.

Cliquez sur la première image sur le calque "img1". Importer une image à la taille de la toile en appuyant sur [Ctrl-R] ou "Fichier" -> "Importer" -> "Importer sur la scène ...».

Maintenant convertir cette image à un MovieClip et nommez-le «img1".

Définissez le nom de l'instance vient d'être créé MovieClip pour "img1".

Étape 6 - Créer MovieClip Fin

Le MovieClip finaux contenir du texte au lieu d'une image. La réalisation de ce que vous aurez besoin d'une approche légèrement différente.

Sélectionnez la première image de la couche "img2" (ok, mauvais nommage, n'hésitez pas à corriger cette ) Et dessinez un rectangle de la taille de la toile. Vous voulez vous assurer que le MovieClip End a les mêmes dimensions que le Premier MovieClip. Cest pourquoi il faut d'abord dessiner une forme invisible de la même taille que le Premier MovieClip.

Sélectionnez la forme et définissez la valeur alpha à 0 (la forme est toujours là, mais invisible).

Convertir la forme d'une] MovieClip [appuyez sur F8 ou cliquez droit sur le MovieClip -> "Convertir en symbole ..." et nommez-le «img2".

Double-cliquez sur le MovieClip venez de créer, créez un nouveau calque vide et mettre un texte sur le calque nouvellement créé.

Revenez au scénario principal et définissez le nom de l'instance du MovieClip pour "img2".

Étape 7 - Ajouter retournement ActionScript

Sélectionnez le calque "script" et ouvrir le "Actions" fenêtre "Windows" -> "Actions" ou appuyez sur [F9].

Si vous souhaitez simplement avoir une transition de renversement (et pas de retour à la transition sur le déploiement) de copier les lignes suivantes dans la fenêtre de code.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 _onOver function (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);
 )

Dans la première ligne que vous ajoutez un écouteur d'événement de roulement sur le bouton. Dans la fonction "_onOver" (ligne 3) vous devez d'abord créer une instance de la CubeTransitionEffectAS3 avant de désactiver la souris sur l'interactivité de la composante (ligne 4 et 5). N'oubliez pas, le bouton que vous avez créé est antérieure à la prise en charge des effets de la souris et vous ne voulez pas l'effet d'intervenir à ce sujet.

Dans la ligne 9, enfin vous initialisez l'effet ( la documentation du paramètre ici ). Le rôle important que sont les deux premiers paramètres. Vous définissez ce que la transition commence par "img1» et se termine par "img2".

Exportez votre fichier FLA. Comme vous le voyez, la composante effet fonctionne parfaitement avec le fond transparent de «img2".

Étape 8 - Plus complexe ActionScript

OK, avec le code précédent le basculement fonctionne très bien. Mais que faire si vous voulez aussi avoir une fonction de déploiement qui inverse le passage du "img2" à "img1"? Pour atteindre ce dont vous avez besoin d'un code plus complexe. Supprimez le script et insérer le texte suivant:

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

 en cours d'exécution var = false;
 goin var = false;
 goOut var = false;

 _onOver function (e: MouseEvent) (
  if (! en cours d'exécution) (
  _createAnimation ("in");
  en cours d'exécution = true;
  ) Else (
  goin = false;
  goOut = true;
  )
 )

 _onOut function (e: MouseEvent) (
  if (! en cours d'exécution) (
  _createAnimation ("out");
  en cours d'exécution = true;
  ) Else (
  goin = true;
  goOut = false;
  )
 )

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

  si (Goin) (
  _createAnimation ("out");
  ) Else (
  en cours d'exécution = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ("in");
  ) Else (
  en cours d'exécution = false;
  goin = false;
  )
 )

 _createAnimation fonction (dir: String) (
  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 == "out") (
  L myFilter.init (img2 img1, 24, «r->", 2 ", easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Il est important de savoir, qu'on ne peut pas inverser le sens de la transition au cours de l'effet est en cours d'exécution. Au lieu de cela, vous pouvez «se souvenir» de l'action de l'utilisateur, attendre que l'effet se fait et d'appliquer la transition revers.

Les variables "tu" et "goOut" (ligne 5 et 6) sont utilisés à cette fin. Vous définissez les cas où les fonctions "_onOver" et "_onOut" (ligne 8 et 18) sont exécutés. Mais seulement si le Var en cours d'exécution est vrai, si c'est faux (ligne 9 et 19), vous commencez la transition tout de suite (lignes 10 et 20).

La fonction "_createAnimation" (ligne 52) est votre fonction d'assistance au début de l'animation en fonction de la direction "dir" vous avez passé en paramètre.

Notez qu'après l'appel de la removeFilter "méthode" (ligne 29 et 41) à la fois le début et la MovieClip MovieClip finale sont fixés au visible (de l'effet). Thats pourquoi vous avez défini la visibilité MovieClip - la transition a commencé avec - à false (ligne 30 et 42).

Télécharger

Cliquez ici pour télécharger le fla de ce tutoriel. Note: L'. Fla ne comprend pas la composante effet. Afin de faire fonctionner le fla, vous devez acheter l' effet de transition Cube ici .

Ici vous pouvez trouver un didacticiel vidéo sur la façon de mettre en œuvre un effet différent .