Ce tutoriel est écrit avec Flash CS 3.
Outil utilisé :
|
Sur toute sélection, permet de modifier l’échelle, le biseau, la rotation, l’inclinaison. La touche Alt permet de transformer symétriquement, la touche Ctrl permet de déplacer les coins indépendamment. |
Transformation
Déplacement interactif :
Nouveau document :
► créer un nouveau fichier par le menu ou les touches Ctrl + N
► dans la fenêtre Nouveau document, choisir le format de document, ici Flash A.S. 2.0 (Action Script 2.0), le langage de programmation de Flash, ainsi que A.S. 3.0 dernière génération
Paramétrage du document :
Au bas de l’interface par défaut nous avons un onglet Propriétés (que l’on ouvre par le menu , s’il n’est pas déjà ouvert).
Ce panneau Propriétés permet de configurer notre document de travail, sa taille en largeur, sa hauteur, sa couleur de fond, la vitesse de lecture des images.
► régler le document en 800 x 600 pixels, fond Blanc, cadence de 25 images/secondes
► ensuite, enregistrer ces paramètres comme les paramètres par défaut à l’ouverture de Flash, en cochant la case (voir capture)
survoler l’image pour la voir en grand
Nous avons donc ici un document de 800 x 600 pixels, fond blanc, débit de 25 images par secondes.
Fichiers sources :
Vous pouvez télécharger les 2 images utilisées pour ce tutoriel : sable.jpg et galet.png :
Télécharger : Flash déplacement interactif (images)Téléchargé 324 fois – 249,01 Ko
Pour importer les 2 images dans Flash:
► pour importer les images dans la Scène, utiliser le menu ou utiliser les touches Ctrl + R
► puis centrer l’image sable.jpg au centre de la scène à l’aide des icônes du panneau Aligner, à droite de l’interface
Ajouter le galet sur un nouveau calque :
► nommer le calque sable, puis ajouter un nouveau calque et nommez-le galet
► à partir du panneau Bibliothèque, à droite de l’interface, avec la souris glisser/déposer (ou drag and drop) l’image du galet dans la scène
Le glisser/déposer (drag and drop en anglais) est une fonction simple de Flash qui permet de déplacer un objet (symbole clip) à l’aide de la souris. Pour le réaliser la première condition est de convertir l’objet en symbole clip.
Symbole clip :
Dans Flash, dès lors que l’on veut animer un objet (image, forme, texte…) il est impératif de convertir cet objet en Symbole clip.
Un Symbole clip est une balise qui permet à Flash de distinguer les objets à animer ou à piloter via une action. L’action est une commande qui s’écrit avec un langage de programmation. Certaines actions sont pré-écrites, il suffit donc d’en choisir la syntaxe dans une liste d’actions.
Par exemple il y a des actions très simples comme Stop pour arrêter la lecture de l’animation, Play pour lire ou reprendre la lecture ou encore Goto pour aller d’un point vers un autre. Mais dans un premier temps, nous allons convertir l’image du galet en symbole.
Pour ce faire il y a plusieurs possibilités :
Soit :
► faire un clic droit et choisir Convertir en symbole
► utiliser le menu
► utiliser la touche F8 qui est son raccourci
Nous avons donc deux pistes (calques) : sable et au dessus galet.
Le calque galet est un symbole clip et nous l’avons nommé galet dans le champ occurrence du panneau Propriété du clip, en bas de l’interface de Flash.
Ce champ des occurrences sert à donner une identité, un nom à un objet si on a besoin d’avoir une action sur lui. Par exemple, si je veux déplacer un objet grâce à une fonction (action, commande écrite…) j’ai besoin de préciser de quel objet il s’agit.
Le clip du galet s’appelle galet et l’occurrence du clip s’appelle aussi galet, pour faire simple et logique. Mais nous pouvons très bien nommer l’occurrence d’un nom différent de celui du clip. L’important est que l’objet soit reconnu par la commande, dans Flash
Cela paraît un peu complexe, alors le plus simple est de passer à la pratique.
Pour plus d’informations sur le principe du Symbole clip, vous pouvez consulter le tutoriel : ► Flash, animer une boule (interpolation mouvement)
Paramétrer les actions :
Fonction starDrag :
Voici le contenu du panneau Actions en bas de l’interface, qui s’affiche également avec la touche F9.
- ► sélectionner le clip galet sur lequel nous effectuons une action
- ► dans le panneau Propriétés, en bas de l’interface, déclarer le clip en tant que bouton
- ► ouvrir la fenêtre Actions avec la touche F9
- ► activer l’assistant de script, puis dans la liste de droite choisir Fonctions globales / Contrôle sur les clips / start Drag
- ► cliquer sur la première ligne on (release)… puis cliquer sur Appuyer
- ► cliquer sur la deuxième ligne et écrire le nom de l’occurrence galet
Petite remarque : dans la fenêtre des Propriétés du clip, si on modifie le nom de occurrence galet en caillou (par exemple) et que dans la fenêtre des actions on a la syntaxe startDrag(« caillou »), cela fonctionnera également.
Fonction stopDrag :
Toujours dans cette même fenêtre Actions, nous allons ajouter la fonction stopDrag qui indiquera que lorsque l’on relâche la souris, cela relâche le galet.
Il faut ajouter la seconde action en dessous de la première, c’est à dire à partir de la quatrième ligne. Donc dans la fenêtre des Actions, dans la partie des syntaxes, cliquer à la quatrième ligne puis dans la liste à droite, choisir la fonction stopDrag. De la même manière qu’au startDrag et avec l’assistant de scripts activé, cliquez su on Release et assurez vous bien que la case relâcher est activée.
Lancer un aperçu (preview) :
► utiliser les touches Ctrl + Alt + Entrée pour une pré-visualisation rapide
Exporter l’animation :
► utiliser le menu ou les touches Ctrl + Maj + Alt + S
Fichier source en .fla :
Vous pouvez télécharger le fichier source (flash-deplacement-interactif.fla) :
Télécharger : Flash déplacement interactif (fla)Téléchargé 339 fois – 722,44 Ko
Ce tutoriel a été réécrit avec l’autorisation de son auteur.
Ce tutoriel est la propriété du site Photoshoplus. Toute reproduction, exploitation ou diffusion du présent document est interdite.
Photoshoplus ©
