Accueil | Tutoriaux

Tutoriaux : Placement et redimensionnement d'un clip à l'aide de la souris.
 

1. Introduction

Ce tutoriel permet de comprendre comment il est possible de placer dynamiquement sur la scène un clip qui se trouve dans la bibliothèque puis de régler à l'aide de la souris les facteurs d'échelle _xscale et _yscale afin de modifier ses dimensions. Le clip en question se réduit à sa plus simple expression puisqu'il s'agit dans cet exemple d'un carré ! L'animation ci-contre permet de déformer ce carré pour obtenir des rectangles : il faut considérer ce tutoriel comme la genèse d'un simple outil de dessin...
2. Dans la bibliothèque
 

1) Créez un clip dans lequel vous tracez un rectangle de 100 pixels de longueur et de 100 pixels de largeur, autrement dit un carré ! Le choix de la dimension de ce carré n'est pas anodin : il permet de simplifier le script à venir. Très important : le centre de ce clip doit se confondre avec le sommet supérieur gauche du carré : vous devez donc sélectionner votre carré et cliquer sur les boutons "aligner les bords gauches" et "aligner les bords supérieurs" du panneau aligner.

2) Dans le panneau "proriétés de liaison", cochez la case "exporter pour actionscript" et tapez "rectangle" dans le champ de texte "identifiant". Désormais, nous pourrons placer dynamiquement des occurrences de ce clip sur la scène à l'aide de la fonction attachMovie.
 
3. Le code et l'animation


Le code ci-dessous se décompose en trois parties :
- lorsque le bouton gauche de la souris est enfoncé, une nouvelle occurrence du clip "rectangle" est placée sur la scène. 
- tant que le bouton gauche de la souris reste enfoncé, les dimensions de l'occurrence du clip "rectangle" sont modifiées en fonction des coordonnées du curseur.
- quand le bouton gauche de la souris est relâché, les dimensions de l'occurrence du clip "rectangle" deviennent définitives.

 
p = 0;
 
onMouseDown = function() {
delete clip.onEnterFrame;
clip=this.attachMovie("rectangle", "r"+p, p);
clip._x=this._xmouse;
clip._y=this._ymouse;
clip.onEnterFrame=redimensionner;
p++;
}
 
onMouseUp = function() {
delete clip.onEnterFrame;
}
 
function redimensionner() {
this._xscale=_xmouse-this._x;
this._yscale=_ymouse-this._y;
}
 Cliquez dans cette zone pour placer des rectangles.
 
4. Le code avec ses commentaires
 
La variable p est initialisée à zéro et permet de compter les différentes occurrences du clip "rectangle" qui seront placées sur la scène.
p=0;
 
Quand le bouton gauche de la souris est enfoncé...
onMouseDown = function() {
 
Une ligne de code dont on pourrait se passer...
delete clip.onEnterFrame;
 
On place une occurrence du clip "rectangle" sur la scène : ces occurrences se nommeront successivement r0, r1, r2, r3...
clip=this.attachMovie("rectangle", "r"+p, p);
 
On place l'occurrence du clip "rectangle" à l'endroit où se trouve notre curseur.
clip._x=this._xmouse;
clip._y=this._ymouse;
 
On appelle une fonction qui s'appelle "redimensionner" et qui permettra de définir la longueur et la largeur du rectangle en fonction des nouvelles coordonnées du curseur.
clip.onEnterFrame=redimensionner;
 
On augmente la variable p d'une unité.
p++;
 
Fin de la fonction onMouseDown.
}
 
Lorsque le bouton de la souris est relâché, on annule l'appel à la fonction "redimensionner". Les dimensions du rectangle deviennent définitives.
onMouseUp = function() {
delete clip.onEnterFrame;
}
 
Le noeud du problème : la relation mathématique entre les coordonnées du curseur et les facteurs d'échelle _xscale et _yscale du rectangle (ou pour être plus précis : du carré !). Tout fonctionne correctement car le carré dans la bibliothèque a une dimension de 100 pixels !

function redimensionner() {
this._xscale=_xmouse-this._x;
this._yscale=_ymouse-this._y;
}
 
5. Pour aller plus loin...
 

J'entends déjà certaines personnes me dire : "okay, super mais le clip que je souhaite placer sur la scène n'est pas un vulgaire carré mais une splendide fleur de 140 pixels de largeur et de 170 pixels de hauteur et votre script ne fonctionne pas dans ce cas !".

Suffit de modifier la fonction "redimensionner" !!

function redimensionner() {
this._xscale=100*(_xmouse-this._x)/140;
this._yscale=100*(_ymouse-this._y)/170;
}

Cliquez dans cette zone pour construire un parterre de fleurs.
 
Accueil | Tutoriaux