Roadbook

Caroline Boulanger

 Page précédente

Examen de fin d'année (durée 2 heures)

Télécharger les fichiers

Etape 1 : Un moustique bat des ailes et se déplace entre 4 objets en s'arrêtant sur chaque objet

Sur le même principe que pour l'animation de la coccinelle (voir l'interpolation de mouvement de la coccinelle), après avoir créé séparément des movie-clips pour le moustique sans aile, puis les ailes, et enfin un movie-clip moustique avec les ailes animées, placer le moustique sur la scène, et ajouter une interpolation de mouvement, ou ajouter un guide mouvement classique (clic droit sur le calque avec le moustique). Dessiner ensuite le parcours du moustique.

L'animation moustique en .swf :

Etape 2 : Réalisation d'une horloge avec l'objet Date()

Création d'une horloge à aiguilles (donner des noms d'occurences aux aiguilles), et ajout d'un champ de texte dynamique qui recevra l'heure au format numérique (donner uin nom d'occurence au champ texte). Lorsqu'on ajoute les aiguilles sur l'horloge, il faut déplacer le point central de chaque aiguille vers le cetre de l'horloge pour que la rotation des 3 aiguilles se fasse correctement.

Code Action script pour les 2 horloges (AS3)
//action script pour les horloges
	import flash.events.Event;
	this.addEventListener(Event.ENTER_FRAME, showDate);
	var d:Date;
// affichage de l'heure au format numérique	
	function showDate(pEvt:Event):void{
		d = new Date();
		if (d.getHours() < 10) {
			if (d.getMinutes() >= 10) {
			oc_horl_num.text = "0" + d.getHours() + " : " + d.getMinutes() + " : " + d.getSeconds();
			}
			else {
			oc_horl_num.text = "0" + d.getHours() + " : 0" + d.getMinutes() + " : " + d.getSeconds();
			}
		} else {
			if (d.getMinutes() >= 10) {
			oc_horl_num.text = d.getHours() + " : " + d.getMinutes() + " : " + d.getSeconds();
			}
			else {
			oc_horl_num.text = d.getHours() + " : 0" + d.getMinutes() + " : " + d.getSeconds();
			}
		}
// affichage de l'heure sur l'horloge à aiguilles	
		oc_aig_heure.rotation = d.getHours()*30 + d.getMinutes()/2;
		oc_aig_min.rotation = d.getMinutes()*6;
		oc_aig_sec.rotation = d.getSeconds()*6;
	}
		
L'animation horloge au format .swf :

Etape 3 : Mise en scène dans une cuisine

Création d'une scène de cuisine (ajout d'une photo en image de fond), et ajout des précédentes animations dans la cuisine (le moustique est inséré en action script et l'horloge est ajoutée via le menu fichier / importer une animation). Ajout de 2 boutons : mettre en plein écran et quitter le mode plein écran.

Code pour les boutons plein écran et quitter plein écran :
		import flash.system.fscommand;
	//fonction plein écran avec les boutons
		function pleinecran(event:MouseEvent):void {
			fscommand("fullscreen", "true");
		}
		function quitterpleinecran(event:MouseEvent):void {
			fscommand("fullscreen", "false");
		}
		occ_btn_fullscreen.addEventListener(MouseEvent.CLICK, pleinecran);
		occ_btn_quitter.addEventListener(MouseEvent.CLICK, quitterpleinecran);
		
Code pour insertion de l'animation avec le moustique
		//Imports Flash
			import flash.net.URLRequest;
			import flash.display.Loader;

		//URL du fichier SWF externe à charger 
			var lienFichierSWF:URLRequest = new URLRequest("BOULANGER-etape1.swf"); 
		//Création d'un chargeur, pour télécharger le fichier SWF externe 
		//Création du chargeur 
			var conteneur:Loader = new Loader(); 
		//Lancement du chargement 
			conteneur.load(lienFichierSWF); 
		//Ajout de l'animation sur la scène 
			occ_moustique.addChild(conteneur); 
		

Etape 4 : Drag and drop

Ajouter dans la cuisine une fonction drag and drop : Créer deux poubelles et 2 sortes d'emballages. Les emballages doivent être déplaçables et disparaitre au dessus de la bonne poubelle.
Donner des noms d'occurence à chaque emballage et à chacune des poubelles. Relever les emplacements des poubelles (position x, position y et dimensions en pixels)

Code AS3 pour le drag and drop et disparition des objets au dessus de la bonne cible :
		//Déclaration de chaque occurence d'emballage

			occ_b1.addEventListener(MouseEvent.MOUSE_DOWN, dragObjet);
			occ_b1.addEventListener(MouseEvent.MOUSE_UP, dropVert);
			occ_b2.addEventListener(MouseEvent.MOUSE_DOWN, dragObjet);
			occ_b2.addEventListener(MouseEvent.MOUSE_UP, dropVert);
			occ_b3.addEventListener(MouseEvent.MOUSE_DOWN, dragObjet);
			occ_b3.addEventListener(MouseEvent.MOUSE_UP, dropVert);
			occ_b4.addEventListener(MouseEvent.MOUSE_DOWN, dragObjet);
			occ_b4.addEventListener(MouseEvent.MOUSE_UP, dropBleu);
			occ_b5.addEventListener(MouseEvent.MOUSE_DOWN, dragObjet);
			occ_b5.addEventListener(MouseEvent.MOUSE_UP, dropBleu);
			occ_b6.addEventListener(MouseEvent.MOUSE_DOWN, dragObjet);
			occ_b6.addEventListener(MouseEvent.MOUSE_UP, dropBleu);
		// fonction de déplacement commune à chaque emballage
			function dragObjet(evt:MouseEvent):void
			{
				evt.target.startDrag();
			}
		// fonction différente en fonction de la couleur de la poubelle
			function dropVert(evt:MouseEvent):void
			{
				evt.target.stopDrag();
				if((evt.target.x > 550)&&(evt.target.x < 610)&&(evt.target.y > 400)&&(evt.target.y < 500)){
					evt.target.visible = false;
					}
			}

			function dropBleu(evt:MouseEvent):void
			{
				evt.target.stopDrag();
				if((evt.target.x > 480)&&(evt.target.x < 530)&&(evt.target.y > 400)&&(evt.target.y < 500)){
					evt.target.visible = false;
					}
			}
		

Etape 5 : Pyramide 3D qui s'ouvre et se ferme

Réalisation d'une pyramide à base carrée dont les faces s'ouvrent (utilisation des interpolations de forme : voir l'animation du cube 3d)

Animation pyramide 3d en .swf :

L'animation finale en .swf

Ajouter la pyramide dans la cuisine.

Comparatif de poids

Fichier source (.FLA)

Fichier Flash Player (.SWF)

Fichier HTML5 (.HTML)

Poids

517 ko 247 ko -

 Page précédente