Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Bouger un objet sans scrollbar (Barre de défilement)

Compatible Flash Catalyst CS5. Cliquer pour en savoir plus sur les compatibilités.Par BEtrained (Laurent BRIERE), le 12 octobre 2010

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Objectif: utiliser les deux flèches à gauche et à droite pour bouger la sphère latéralement et lui faire faire une rotation sur elle-même. (Tester l'animation ci-dessus en utilisant les deux flèches)

Créons tout d'abord un projet dont la taille ici importe peu. Fichier/Nouveau projet et choisissons une taille de 800×200 sur fond Blanc.

1- Concevoir les objets graphiques de la scène

Dessinez à l'aide des outils de dessins vectoriel de Flash Catalyst:

  • un premier triangle dont la pointe est orientée à gauche (Utiliser l'outil rotation)
  • une autre version tournée vers la droite (Copier/Coller de la 1ere forme et rotation)
  • un cercle (astuce: maintient de la touche Majuscule pour obtenir un cercle homothétique)
  • une ellipse associée à une couleur noir, en réduisant son opacité et en y ajoutant un “filtre” Flou pour symboliser l'ombre du cercle au sol
  • Aligner les objets (Clic droit de votre souris en ayant sélectionné les objets à aligner)

Afin de manipuler plus facilement le cercle et son ombre, groupons-les. Il sera ainsi possible, un peu plus loin dans cet exercice, d'animer le groupe ou l'un des éléments de ce groupe.

Petit conseil: pensez à nommer vos objets au fur et à mesure que vous les créez, en respectant quelques règles de nommage simples (pas d'espace ni de majuscule) ceci dans la perspective notamment d'une finalisation de votre projet dans Flash Builder par exemple. Des noms explicites et normalisés faciliterons le travail du développeur.

2- Préparation des Interactions Flash Catalyst

Sélectionnez la flèche de gauche et, dans la boîte de dialogue flottante (…noire), cliquez sur Sélectionner un composant et Bouton. Faites la même opération sur la flèche de droite.

En gardant cette dernière sélectionnée, allez dans le panneau INTERACTIONS et par exemple “lors du clic”, choisir de “lire la séquence d'actions” et cliquez sur OK.

Cela aura pour conséquence de transformer la Flèche en élément déclencheur (Bouton) d'un mouvement effectué sur le cercle central.

Dans le panneau SCENARIO en bas, sélectionnez le groupe objet et ombre dans la palette des calques et sur Ajouter une action et Déplacer.

Dans le panneau PROPRIETES, effectuer un “déplacement relatif” sur l'axe des X d'une valeur de 100 (…pixels) et de 0 sur l'axe des Y. (A noter: X=-100 bougera le cercle vers la gauche cette fois-ci.).

Pour ajouter un peu plus réalisme au mouvement, vous pouvez ajouter une Accélération de type “Elastique” d'une durée de 1,5 seconde par exemple. Toujours dans le panneau SCENARIO.

Ne sélectionnez ensuite que le cercle (Nom: “objet” dans la palette des calques) à l'intérieur de ce groupe objet et ombre et cliquez à nouveau sur Ajouter une action pour opter cette fois pour une rotation de 90° sur une durée de 0,4 seconde.

Il ne vous reste plus maintenant qu'à effectuer les même opérations que précédemment sur la flèche de gauche :

  • Sélection de la Flèche
  • Interaction de type séquence d'action
  • Sélection du groupe pour le déplacement
  • Sélection de l'objet seul pour la rotation

Pour tester votre animation, dans le menu FICHIER, choisir exécuter le projet et si celui-ci vous convient, le publier au format AIR et/ou SWF.

A vous de jouer !!

Lien: cette astuce est également disponible à la vente au format vidéo sur le site de Weecast.fr (Tuto.com) - http://fr.tuto.com/flash-catalyst/mouvements-multiples-et-sequences-d-animations-flash-catalyst,12372.html