Dans cette classe de travaux dirigés nous allons créer une exposition de feu d'artifice interactive. Quand le téléspectateur clique à une certaine position sur l'écran, un petit point est renvoyé(tiré) de la base de l'écran à où l'utilisateur a cliqué. Une fois qu'il a atteint sa position, il éclate. Essayez-le de vous.
Commençons :
* Ouvrir un nouveau document de Flash et mettre les dimensions à 300 x 300 avec 30 fps. Mettez la couleur de fond à Noir ou Bleu foncé.
* L'utilisation de l'outil Ovale (O) dessine(tire) un cercle jaune 30 x 30. Utilisez le mixer de Couleur pour donner l'effet comme indiqué.
* Convertir le cercle dans un graphique. Choisissez maintenant le nouveau symbole graphique et convertissez-le dans un Movieclip, l'appelant 'la flèche'. Supprimez l'agrafe de l'étape(la scène) et insérez ensuite un nouveau symbole (le Ctrl-+ F et choisissez l'option Movieclip, nommez-le 'l'étincelle'. Le glisser-déposer le graphique de la bibliothèque sur l'étape(la scène) et le post-ion cela pour se concentrer. Le clic sur la Scène 1 pour retourner à l'étape(la scène) principale.
* Une fois que vous l'avez fait, c'est le temps pour l'Actionscript.
* Le clic sur l'encadrement vide sur la couche de défaut et la presse (F9) pour monter le panneau(jury) d'actions, insérez la première partie du code :
_quality = "low";
ct = 10;
this.createEmptyMovieClip("clickSensor", 1);
clickSensor.onMouseDown = function() {
// when clicked, create new instance of "arrow".
this._parent.attachMovie("arrow", "a"+ct, ct);
this._parent["a"+ct].onLoad = function() {
this.tx = _root._xmouse;
this.ty = _root._ymouse;
this._x = _root._xmouse+(Math.random()*200-100);
this._y = 300;
};
this._parent["a"+ct].onLoad();
Ici nous avons mis la propriété arrow_y à 300, qui le place au fond de l'écran. Nous avons aussi choisi une coordonnée de x aléatoire, qui est dans 100 pixels de la coordonnée de x de la souris. La flèche est créée dans ces coordonnées.
Ensuite, nous voulons que chaque flèche monte en flèche dans le ciel. C'est pourquoi nous avons stocké la position de la souris dans le tx et les variables ty. C'est où nous voulons que la flèche aille, puisqu'il est où l'utilisateur a cliqué sur la souris. Ces coordonnées de traget seront utilisées dans l'événement onEnterFrame pour déplacer la flèche vers ce point. Le code pour c'est comme suit :
this._parent["a"+ct].onEnterFrame = function() {
// move this arrow
this._x += 0.08*(this.tx-this._x);
this._y += 0.08*(this.ty-this._y);
voilas le rendu
http://img372.imageshack.us/my.php?image=feu8bp.swf