Sommaire

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 et Flash CS4.

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

Étape 1 - Installer le composant effet

Achetez l'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.

Faites glisser dans la bibliothèque de composants

Étape 2 - Créez un nouveau calque

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

Créer un calque sur le scénario principal

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

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

Sélectionnez la première image dans le bg "couche" et dessiner une forme avec l'outil rectangle sur la toile. Sélectionnez le rectangle et d'ajuster les paramètres de couleur pour avoir un gradient de Nice (vous pouvez aussi utiliser n'importe quelle autre couleur).

Créer un fond de forme

Paramètres de couleur dégradé

Étape 4 - Créer un bouton

L'effet de cube doit réagir dynamiquement à l'état des utilisateurs de la souris (roulement / déploiement). Il vaut mieux ne pas la pratique d'ajouter l'écouteur d'événement à l'effet lui-même et d'utiliser plutôt un "blanc" button.

Cliquez sur la première image dans la couche "btn" et tracez un rectangle de la taille de la toile (couleur ne dure pas puisque 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 ...».

Convertir en forme de bouton

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

Nom de l'Ensemble de bouton

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

Keyframe changement à l'intérieur bouton

Revenir au scénario principal et définir le nom de l'instance du bouton "btn".

Définir nom d'instance du bouton

Étape 5 - Création de début Movieclip

L'effet besoin de l'avoir deux Movieclip où les informations visuelles sont tirés. Vous allez maintenant créer le MovieClip la transition devra commencer.

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

Importation d'image

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

Image Convertir en Movieclip

Définissez le nom de MovieClip

Définissez le nom de l'instance du juste créé MovieClip pour "img1".

Set Nom de l'instance

Étape 6 - Créer Fin Movieclip

Le MovieClip Fin contiendra du texte au lieu d'une image. Le atteindre cela, vous aurez besoin d'une approche légèrement différente.

Sélectionnez la première image du calque "img2" (OK, mauvais nommage, n'hésitez pas à corriger cette :) ) Et tracez un rectangle de la taille de la toile. Vous voulez vous assurer que le MovieClip End a les mêmes dimensions que le MovieClip Démarrer. Thats pourquoi vous tirez d'abord une forme invisible de la même taille que le MovieClip Démarrer.

Dessiner la forme

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

Alpha Set de forme

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

Convertir en Movieclip

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

Ajouter du texte à Movieclip

Tête en arrière pour le scénario principal et définir le nom d'instance du MovieClip pour "img2".

Set Nom de l'instance

Étape 7 - Ajouter retournement ActionScript

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

Ouvrir la fenêtre de code ActionScript

Si vous souhaitez simplement avoir une transition sur roulement (et pas de back-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) (
  var myFilter: CubeTransitionEffectAS3 = CubeTransitionEffectAS3 new ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

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

Dans la première ligne vous ajoutez l'écouteur d'événement retournement à la touche. Dans la fonction «_onOver" (ligne 3), vous créez d'abord une instance de la CubeTransitionEffectAS3 avant de l'interactivité du désactiver la souris de la composante (ligne 4 et 5). Rappelez-vous que le bouton que vous avez créé précédemment prend soin des effets de la souris et vous ne voulez pas l'effet d'intervenir sur ce point.

Dans la ligne 9, enfin, tu initialiser l'effet (la documentation du paramètre ici). La partie importante sont les deux premiers paramètres. Vous déterminez que la transition commence par "img1" et se termine avec "img2".

Export fla votre dossier. 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 changement de date fonctionne très bien. Mais que faire si vous voulez également avoir une fonction de déploiement qui inverse le passage du "img2" à "img1"? Pour réaliser que vous avez besoin d'un code plus complexe. Supprimer le script et d'insérer le texte suivant: 

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

 var running = false;
 goin var = false;
 rythme disparaissent var = false;

 _onOver function (e: MouseEvent) (
  if (! running) (
  _createAnimation ( "in");
  running = true;
  ) else (
  goin = false;
  rythme disparaissent = true;
  )
 )

 _onOut function (e: MouseEvent) (
  if (! running) (
  _createAnimation ( "out");
  running = true;
  ) else (
  goin = true;
  rythme disparaissent = false;
  )
 )

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

  if (goin) (
  _createAnimation ( "out");
  ) else (
  running = false;
  rythme disparaissent = false;
  )
 )

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

  if (rythme disparaissent) (
  _createAnimation ( "in");
  ) else (
  running = false;
  goin = false;
  )
 )

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

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

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

Les variables "Goin" et "rythme disparaissent" (ligne 5 et 6) sont utilisés à cette fin. Vous les mettez quand les fonctions "_onOver" et "_onOut" (ligne 8 et 18) sont exécutés. Mais seulement si l'exécution var est vrai, si c'est faux (ligne 9 et 19), vous commencez tout de suite la transition (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 que removeFilter qu'après avoir appelé le "méthode" (ligne 29 et 41) à la fois le MovieClip de début et de fin au MovieClip sont fixés à visible (sur l'effet). Thats pourquoi vous définir la visibilité MovieClip - la transition lancé avec - à false (ligne 30 et 42).

Résultat final

Télécharger

Cliquez ici pour télécharger le fla de ce tutoriel. Note: La FLA. Ne comprend pas le composant effet. Afin de faire fonctionner le fla, vous avez besoin d'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.

  • Share / Bookmark