Roadbook

Caroline Boulanger

 Page précédente - Page suivante 

Contrôle d'occurences

Télécharger les fichiers

Création de l'objet à déplacer

Créer un movie clip avec l'image à contrôler. La placer sur la scène dans un calque dédié, et lui donner un nom d'occurence. Ici "occ_tomate".

Création des boutons d'action

Créer des boutons pour chaque contrôle souhaité (insertion / symbole / bouton)

Placer chaque bouton sur la scène, dans un calque nommé "boutons". En les plaçant sur la scène, leur donner à chacun un nom d'occurence différent (par le panneau Propriétés). Par exemple : "occ_dir_haut", "occ_rotation_basdroite", ou "occ_raz".

Action Script

Afficher le panneau "Actions" (touche F9) et, après avoir déclaré la liste des occurences présentes, créer les fonctions associées.

			import flash.events.MouseEvent;
			import flash.ui.Mouse;

			stop();
		//initialisation des paramètres
			var initX = occ_tomate.x;
			var initY = occ_tomate.y;
			var initR = occ_tomate.rotation;
			var paramsXDep = initX;
			var paramsYDep = initY;
			var paramsRDep = initR;
		// déclaration de chaque bouton d'action, et association avec les fonctions correspondantes
			occ_dir_haut.addEventListener(MouseEvent.CLICK, MoveTop);
			occ_dir_bas.addEventListener(MouseEvent.CLICK, MoveBottom);
			occ_dir_droite.addEventListener(MouseEvent.CLICK, MoveRight);
			occ_dir_gauche.addEventListener(MouseEvent.CLICK, MoveLeft);
			occ_dirbg.addEventListener(MouseEvent.CLICK, Movebg);
			occ_dirbd.addEventListener(MouseEvent.CLICK, Movebd);
			occ_dirhg.addEventListener(MouseEvent.CLICK, Movehg);
			occ_dirhd.addEventListener(MouseEvent.CLICK, Movehd);
			occ_taille_moins.addEventListener(MouseEvent.CLICK, Reduire);
			occ_taille_plus.addEventListener(MouseEvent.CLICK, Agrandir);
			occ_btn_alpha_moins.addEventListener(MouseEvent.CLICK, AlphaMoins);
			occ_btn_alpha_plus.addEventListener(MouseEvent.CLICK, AlphaPlus);
			occ_rotation_hautgauche.addEventListener(MouseEvent.CLICK, RotateTopRight);
			occ_rotation_hautdroite.addEventListener(MouseEvent.CLICK, RotateTopLeft);
			occ_rotation_basgauche.addEventListener(MouseEvent.CLICK, RotateBottomRight);
			occ_rotation_basdroite.addEventListener(MouseEvent.CLICK, RotateBottomLeft);
			occ_raz.addEventListener(MouseEvent.CLICK, ResetParams);
		// fonctions	 
			function MoveTop (evt:MouseEvent):void {
				initY -= 10;
				occ_tomate.y = initY;
			}
			function MoveBottom (evt:MouseEvent):void {
				initY += 10;
				occ_tomate.y = initY;
			}
			function MoveRight (evt:MouseEvent):void {
				initX += 10;
				occ_tomate.x = initX;
			}
			function MoveLeft (evt:MouseEvent):void {
				initX -= 10;
				occ_tomate.x = initX;
			}
			function Movehg (evt:MouseEvent):void {
				initY -= 10;
				occ_tomate.y = initY;
				initX -= 10;
				occ_tomate.x = initX;
			}
			function Movehd (evt:MouseEvent):void {
				initY -= 10;
				occ_tomate.y = initY;	
				initX += 10;
				occ_tomate.x = initX;
			}
			function Movebg (evt:MouseEvent):void {
				initY += 10;
				occ_tomate.y = initY;
				initX -= 10;
				occ_tomate.x = initX;
			}
			function Movebd (evt:MouseEvent):void {
				initY += 10;
				occ_tomate.y = initY;
				initX += 10;
				occ_tomate.x = initX;
			}
			function Reduire (evt:MouseEvent):void {
				occ_tomate.width = occ_tomate.width-50; 
				// Change the vertical scale to match the horizontal scale,  
				// to keep the size proportional. 
				occ_tomate.scaleY = occ_tomate.scaleX;
			}
			function Agrandir (evt:MouseEvent):void {
				occ_tomate.width = occ_tomate.width+50; 
				// Change the vertical scale to match the horizontal scale,  
				// to keep the size proportional. 
				occ_tomate.scaleY = occ_tomate.scaleX;
			}
			function AlphaMoins (evt:MouseEvent):void {
				occ_tomate.alpha = occ_tomate.alpha-0.1; 
			}
			function AlphaPlus (evt:MouseEvent):void {
				occ_tomate.alpha = occ_tomate.alpha+0.1; 
			}
			function RotateTopRight (evt:MouseEvent):void {
				initR += 45;
				occ_tomate.rotation = initR;
			}
			function RotateTopLeft (evt:MouseEvent):void {
				initR -= 45;
				occ_tomate.rotation = initR;
			}
			function RotateBottomRight (evt:MouseEvent):void {
				initR -= 45;
				occ_tomate.rotation = initR;
			}
			function RotateBottomLeft (evt:MouseEvent):void {
				initR += 45;
				occ_tomate.rotation = initR;
			}
			function ResetParams (evt:MouseEvent):void {
				occ_tomate.x = paramsXDep;
				occ_tomate.y = paramsYDep;
				occ_tomate.rotation = paramsRDep;
				occ_tomate.alpha = 1;
			}
		

L'animation en HTML5

Conversion avec Swiffy

Comparatif de poids

Fichier source (.FLA)

Fichier Flash Player (.SWF)

Fichier HTML5 (.HTML)

Poids

7 ko 21 ko 24 ko

 Page précédente - Page suivante