Les animations en ActionScript

Gérer les accélérations

Dans cette section, des symboles sont disposés arbitrairement dans la scène. Lorsque le pointeur de la souris bouge, les symboles bougent aussi, mais avec une inertie (voir Figure 1.4). Nous allons apprendre ici à définir le mouvement d’un symbole en fonction de la position du pointeur, en lui affectant un effet de retard qui donne une illusion d’amortissement. À retenir • Pour simplifier un programme, il est souhaitable de centraliser, sous la forme d’un dénominateur commun, ce qui est susceptible d’alléger le code, à travers une ou plusieurs variables par exemple. • Les conditions permettent de modifier l’orientation d’une animation dès qu’elle atteint une certaine limite. Figure 1.4 Aperçu de l’exercice.  Exemples > chap1_animationEnActionScript_3.fla Le document que nous utilisons présente la structure suivante : le décor masqué et situé audessus du calque fond_mc, est composé d’un dégradé et de trois symboles de type MovieClip, repartis chacun vers les calques de la scène principale. Chaque symbole est, en outre, placé par rapport à son centre, au milieu de la scène. Mais, à l’intérieur de chacun des symboles, les éléments sont repositionnés de sorte qu’ils ne se superposent pas complètement afin de permettre à l’utilisateur d’interagir avec ces objets, malgré leur position commune (voir Figure 1.5). Dans la partie supérieure, un calque actions présente le code utilisé pour l’animation. L’astuce, ici, pour créer un effet de flottement des symboles sans toutefois redéfinir leur position relative les uns par rapport aux autres, est que nous utilisons un positionnement identique de tous les symboles. Mais chaque objet, dont le code contrôle le positionnement, se déplace avec un retardement. Si bien que nous avons l’illusion que les objets oscillent de part et d’autre en fonction de la position du pointeur, et reviennent toujours à leur position relative, prédéfinie dans la composition. Cette organisation structurelle permet de simplifier la gestion du déplacement du groupe que constitue l’ensemble des symboles sans avoir à multiplier inutilement les conteneurs et les lignes de code. Du côté du code, toujours dans notre document, chaque clip est par ailleurs déplacé en incrémentant ses propriétés à travers un gestionnaire de type ENTER_FRAME, comme dans l’exemple précédent, mais des variables nous permettent de définir, en plus, des coefficients d’accélération pour générer l’effet de retardement

Gérer le défilement de panoramiques en boucle

Cet exemple propose un défilement panoramique ininterrompu. Il est programmé avec un gestionnaire de type ENTER_FRAME et contient des conditions. Ces conditions restaurent la position des éléments du panoramique lorsqu’il atteint une certaine limite. Les éléments composant le décor panoramique sont dupliqués de part et d’autre afin de permettre, lorsque le défilement atteint sa limite, d’effectuer son repositionnement de manière imperceptible (voir Figure 1.6). Exemples > ch1_animationEnActionScript_4.fla Le document que nous utilisons présente la structure suivante : au-dessus du calque fond_mc et sous le masque, le décor se compose de deux symboles, le ciel et une colline. Chacun de ces symboles contient une image préalablement travaillée dans Photoshop de sorte qu’elle peut être dupliquée plusieurs fois de suite horizontalement sans que l’on ne perçoive de rupture dans le graphisme. Nous obtenons une texture de type motif, qui raccorde aussi bien à droite qu’à gauche l’image référente située, elle, au centre de la composition. Ainsi, dans Flash, à l’intérieur de chaque symbole, l’image est répétée trois fois. Elles sont effectivement dupliquées de part et d’autre afin de permettre au symbole de sortir du champ visuel que constitue la largeur de la scène, sans pour autant laisser un vide dans le décor pendant le défilement. Ainsi, si le défilement s’effectue de gauche à droite, l’image placée à gauche comblera, en raccord, le trou que nous aurions pu percevoir si l’image n’avait pas été dupliquée de ce côté-ci. Inversement, si le défilement se fait de droite à gauche, l’image située à droite, avec raccord, permet de ne pas voir le trou qui résulte du déplacement du symbole, lorsque celui-ci est animé vers la gauche. Figure 1.6 Aperçu de l’exercice.  Chaque image est donc placée d’abord une fois à l’origine du symbole (x = 0 et y = 0). Puis, elle est dupliquée une fois à gauche et une fois à droite, toujours à l’intérieur du symbole qui contient l’image, de part et d’autre de l’emplacement initial de la première image. Les images répétées forment un ensemble continu et parfaitement homogène. La rupture entre chaque image est imperceptible. Les deux symboles, ainsi mis en forme, sont placés également à une abscisse de 0 sur la scène principale, en témoigne la position du centre de chacun de ces symboles (voir Figure 1.7) Réaliser une image de type motif, raccord, pour panoramiques. Pour réaliser une image que vous pourrez répéter de manière indéterminée de part et d’autre sans que l’on n’en perçoive la rupture, procédez comme suit : 1. Dans Photoshop, ouvrez une image qui représente un décor ou une texture. 2. Déverrouillez le calque principal et déplacez cette image hors champ, de sorte que l’un des côtés se retrouve au centre de la fenêtre de document. Le reste du document est à présent occupé par de la transparence. 3. Dupliquez l’image et placez la copie vers la zone vide en faisant se chevaucher légèrement les deux extrémités de chaque image au centre du document. 4. Puis, gommez (directement ou avec les masques de fusion) le bord de l’image dupliquée, pour révéler l’image originale située en arrière-plan. Fusionnez au besoin les deux calques. Vous devez éliminer toute rupture encore perceptible entre les deux images. Utilisez éventuellement l’outil Tampon pour retravailler plus précisément les zones de transition. 5. Enfin, recadrez l’image de sorte que chaque extrémité coïncide avec l’autre. 6. Exportez pour le Web au format JPEG ou PNG-24.