Outils pour utilisateurs

Outils du site


cours2009:multimedia:flip_clock_class_et_flashdevelop

FlipClock : Class et FlashDevelop

Le but de ce TP est de modifier le code pour le mettre sous forme de Classe et utiliser FlashDevelop pour le développement (écrire le code).

Pour les utilisateurs de Mac. Faites ce TP sur Windows. Chez vous, vous pouvez utiliser Flash Builder. Vous pouvez obtenir une licence gratuite à l'adresse suivante : http://www.adobe.com/devnet/flex/free/index.html

Synopsis de l'activité

  • Faire un projet (Flash IDE) sous FlashDevelop.
  • Y placer le fichier ”.fla” et le modifier pour :
    • Que l'horloge soit dans un symbole.
    • Que ce symbole soit lié à la Classe : Horloge (fichier ”Horloge.as”).
  • Si le temps le permet : Faire de même pour les chiffres.
    • N'avoir qu'un symbole ”Chiffre” (renommer ”Chiffre anim”)
    • Créer sous FalshDevelop une Classe Chiffre (fichier ”Chiffre.as”).
      • Modifier le code du panneau d'action pour le “placer” dans la Classe.
    • Lier le symbole ”Chiffre” à la Classe Chiffre.
    • Utiliser Chiffre à la place de ”Chiffre code”.

Faire un projet sous FlashDevelop

Lancez FlashDevelop :

Utilisez le menu “Projet” pour faire un nouveau projet :

Renseignez la boite de dialogue comme suit :

  • Choisir “Flash IDE Projet” (on va compiler avec l'IDE de Flash).
  • Donnez un nom au projet.
  • Choisir l'emplacement où l'enregistrer.
  • Par convention, créez un dossier qui a le nom du projet (l'option le fait pour vous).

Il se peut qu'il vous soit demander votre nom (c'est pour documenter automatiquement le code) :

Vous pouvez accéder au dossier du projet depuis FlashDevelop :

Ajouter le fichier ”.fla” au dossier :

Vous devez voire le ”.fla” dans le projet :

Interaction Flash IDE et FlashDevelop

Important ouvrez le ”.fla” avec Flash : Pour utiliser FalshDevelop, il est nécessaire de décocher l'option : “Déclarer automatiquement les occurrences de scène”.
Déclarer automatiquement les occurrences de scène

Vous pouvez lancer l'exécution depuis FlashDevelop avec la touche F5:

Des points intéressants :

  • Pour les Symboles, Flash à générer automatiquement des Classes
    • On va les remplacer par les nôtres.
  • Les Classes ont des variables d'instances qui correspondent aux noms d'occurrences donnés dans Flash (pour les occurrences placées sur le symbole correspondant à la Classe).
    • Vos Classes devront comporter les mêmes variables d'instances.

Mise en place d'une Classe

Place d'une Classe dans le Projet

Décompresser l'archive de org.pracht.flipClock.Horloge dans le dossier du projet. Vous devez obtenir :

Bien vérifier la correspondance des répertoires avec le nom qualifié de l'import.

Important : vérifiez que vos noms d'occurrences correspondent aux noms des variables d'instances. Pas besoin de modifier le fichier ”.fla”. Adapter le code de la classe.

Lier une Classe à un symbole

Important :

  • Si ce n'est pas déjà fait, modifier le fichier ”.fla” pour que l'horloge soit dans un symbole.
  • Il faut aussi supprimer le code (calque “Actions”) du panneau d'action. Le but de la Classe étant de le remplacer.

Modifier les propriétés du symbole pour effectuer la liaison :

important : tester en cliquant sur la marque verte qu'il trouve bien votre Classe et n'en génère pas une automatiquement.

Tester et valider !

Votre horloge doit fonctionner comme avant. La seule différence et le fait que le code est maintenant dans une Classe. Les moyens pour y arriver peuvent sembler complexes. Mais au total cela permettra une bien meilleure gestion du code.

Plus loin...

Maintenant vous allez faire la même activité pour l'affichage des chiffres.

Une différence est le fait que l'on avait mis en place ”Chiffre code” pour recevoir le code. Ce n'est plus nécessaire. La Classe va remplacer ce symbole et elle sera liée à ”Chiffre anim” (que l'on pourra renommer en ”Chiffre” tout court.

Faire une classe avec FashDevelop

Utiliser FlasDevelop pour faire une Classe (menu contextuel sur le dossier du “package”) :

Renseigner le dialogue qui automatise la création de fichier de Classe :

  • Vérifier le “package”.
  • Donner le nom de Classe
  • Spécifier la Classe de base en utilisant le bouton “Browse …”.
    • Il suffit de taper le début du nom (”MovieClip”) pour faire la sélection.

Vous devez obtenir un code à compléter :

Adapter le code pour le placer dans une Classe

Important : les modifications sont à faire dans le CORPS de la Classe.

// EXEMPLE :
package org.pracht.flipClock 
{
	import flash.display.MovieClip;
 
	/**
	 * ...
	 * @author pierre pracht
	 */
	public class Chiffre extends MovieClip
	{
		// Corps de la Classe
 
		public function Chiffre() 
		{
			// Ceci est le corps du constructeur !
		}
 
	}
 
}

Occurrences nommées

Il est nécessaire d'ajouter les déclarations des occurrences nommées dans le symbole.

Ce sont des variables d'instances (à placer dans la déclaration de Classe). Elles doivent être public pour que Flash puisse les associer aux occurrences des symboles.

C'est dans ce cas les quatre panneaux (haut/bas et départ/ arrivée).

public var arriveeBas_mc : MovieClip;
public var arriveeHaut_mc : MovieClip;
public var departBas_mc : MovieClip;
public var departHaut_mc : MovieClip;

Variables d'instances

Les variables employer dans le panneau d'action deviennent des variables d'instance (à placer dans la déclaration de Classe).

Il suffit d'ajouter à leurs déclarations un modificateur d'accès. On choisira private car elles sont propres au fonctionnement interne de l'objet.

Méthode

Les fonctions déclarées dans le panneau d'action deviennent des méthodes.

  • animVers devient une méthode public car elle doit être appelée depuis le code de l'horloge pour lancer l'animation.
  • fixeDepart et fixeArrivee seront des méthodes private car elles servent à la gestion interne de l'objet.

Important : Il n'est plus nécessaire de faire référence au nom d'occurrence : ”animation_mc”. Le code est directement lié au symbole portant l'animation. On pourrait remplacer ce nom par this qui fait référence à l'objet lui-même. Mais comme this est implicite en AS3 ; il suffit de le retirer du code.

Le constructeur

FlashDevelop à fait par défaut un constructeur (la méthode).

On peut le laisser vide ou si du code était présent sur le panneau d'action, le placer à cet endroit. Dans notre cas on peut mettre un simple stop() pour s'assurer que l'animation ne se joue pas au démarrage (juste après la création des objets).

Lier une Classe à un symbole

Identique à précédemment :

Il ne reste plus qu'a tester.

Au besoin, le fichier de départ et le résultat. Ne pas l'utiliser ! Je vous le donne, car il est important que vous finissiez l'activité, car ce ne sont que des manipulations. Rien qui est une compétence autre que de savoir se servir du logiciel. Si vous ne savez pas le faire, cela vous handicapera dans les activités suivantes. Donc, finissez chez vous l'activité si besoin et demandez-moi ([email protected]) si vous n'arrivez pas à réaliser une étape.

cours2009/multimedia/flip_clock_class_et_flashdevelop.txt · Dernière modification: 2010/04/20 22:00 (modification externe)