BALOG-CRISAN Radu

e-mail: radu.balog-crisan@univ-fcomte.fr

Master 2 2LCE
08.Oct.2009 (TP 1/3 - 4 heures)

TP Flash

Introduction: explications générales sur Flash

• L'interface Flash (Outils, Propriétés, Bibliothèque, Scénario, etc.)

• Raccourcis importants:
◦ Aligner: Ctrl+K
◦ Bibliothèque: Ctrl+L
◦ Action Script: F9
◦ Tester l'animation: Ctrl+Enter
◦ Outil de sélection: V
◦ Convertir en symbole: F8
◦ Fenêtre Composants: Ctrl+F7
• L'organisation des calques (dossier de calques, renommer)
• L'organisation dans la bibliothèque (mc_, btn_, img_, dossier)
• L'organisation clips, boutons, textes, images qui sont dans la scène (_mc, _btn,
_img). Accès à un clip depuis des autres clips (ex: menu_mc.uglow_mc.x).
• Propriétaires du document Flash (titre, description, dimensions, couleur
d'arrière-plan, cadence, unités de la règle)
• Le code Action Script doit être clair et structuré (premier calque pour le code AS,
ajouter des commentaires explicites)
◦ Le code Action Script dans Flash est sensible à la casse

Projet site Flash pour vendre... des ordinateurs portables

La date limite du rendu de projet est le 16.Nov.2009

• Création d'un nouveau fichier Flash Action Script 3. Nous pouvons établir la taille
du scène: 800x600px

• Création d'un menu en Flash

• Nous avons d'abord besoin de créer l'arrière-plan avec les outils rectangle et
dégradé. (Les dimensions de la barre de menu sont, dans ce projet, 800x50px)
• Vous pouvez utiliser l'outil pour transformation (raccourci: F) de dégradé pour
modifier le dégradé
• Convertir l'arrière-plan que vous avez créé dans un clip en utilisant la touche:
F8. Vous pouvez nommer le clip de l'arrière-plan: mc_background, dans
la bibliothèque.
• Nous pouvons créer des boutons en utilisant les outils rectangle et dégradé.
Utilisez l'outil pipette pour avoir la même dégradé que sur l'arrière-plan du
menu. Les dimensions des boutons sont 150x40px. Vous pouvez convertir en clip
et nommer le clip: mc_buttonbase, dans la bibliothèque.
• Créer à nouveau un rectangle (150x10px), de couleur blanche et convertir en
clip et nommer le clip: mc_undelineglow, dans la bibliothèque.
 BALOG-CRISAN Radu
e-mail: radu.balog-crisan@univ-fcomte.fr

• Ajouter un nouveau clip dans la bibliothèque et nommer le clip: mc_menu. Dans

les propriétés, vous pouvez lui donner le nom: menu_mc, avec _mc comme
suffixe. Dans ce clip, ajouter le clip: mc_background, mc_buttonbase et
mc_undelineglow. Convertir mc_buttonbase en type Bouton (utilisant la touche:
F8) et nommer le: btn_menu_home, dans la bibliothèque.

• Copier dans chaque état

du bouton (Haut,
Dessus, Abaissé,
Cliqué) le clip
mc_buttonbase,
utilisant la touche: F6.
Ajoutez un nouveau
calque dans lequel sera
le texte.

Quelle est la différence entre

texte statique, dynamique et
texte de saisie?!

• Vous pouvez vous placer sous état: Dessus. Pour ajouter un filtre, rayonnement
pour notre bouton.
 BALOG-CRISAN Radu
e-mail: radu.balog-crisan@univ-fcomte.fr

• Maintenant vous pouvez faire la même chose pour: Abaissé, ajouter un filtre,
rayonnement avec avec une nouvelle couleur.
• De la même façon créer un nouveau bouton
pour chaque zone du menu. Vous pouvez
organiser les calques, du clip menu_mc,
comme vous pouvez voir sur l'image suivante.
• Concernant le clip mc_undelineglow ajouter
deux filtres: rayonnement et flou. Et dans les
propriétés, vous pouvez lui donner le nom:
uglow_mc, avec _mc comme suffixe.
• Dans les propriétés donner un nom pour
chaque bouton que vous avez créé, avec
suffixe _btn (par exemple: home_btn,
laptops_btn, contact_btn, viewcart_btn)

Pourquoi avons-nous besoin de donner le suffixe _mc, _btn ?

• Vous pouvez organiser les éléments dans la

bibliothèque de la manière suivante.

• Sur la scène principale, organisez le calque. Le

premier calque est toujours Action Script,
comme vous pouvez le voir.

• Menu Action Script Code

• Pour déplacer le uglow_mc avec le avec la souris:

◦ Nous allons ajouter un nouvel écouteur de type:
MouseEvent.MOUSE_MOVE qui fera appel à fonction: callM, lorsque la
souris se déplace. Dans cette fonction, nous allons calculer les marges
pour le clip. Et nous allons le placer dans le milieu du pointeur de la
souris.
◦ Utiliser updateAterEvent et travail avec la cadence
 BALOG-CRISAN Radu
e-mail: radu.balog-crisan@univ-fcomte.fr

◦ Nous voulons maintenant que lorsque le clic-souris est baissée

(MouseEvent.MOUSE_DOWN), le clip uglow_mc sera placée sous le bouton
cible. Pour cela, nous allons ajouter un nouvel écouteur de type:
MouseEvent.MOUSE_DOWN, sur le clip menu_mc qui appellera la fonction
magnetF chaque moment de la souris est baissé. Cette fonction fixera
le menu_mc.uglow_mc.x au x de la bouton cible.
 BALOG-CRISAN Radu
e-mail: radu.balog-crisan@univ-fcomte.fr

• Afficher les différentes pages en clinquant sur le menu:

◦ Premièrement, nous allons créer nos
pages d'affichage. Dans la bibliothèque,
nous pouvons organiser les éléments
comme dans la figure a droite.
◦ Nous pouvons créer dans la zone
d'affichage du site, un clip nommé:
displayZone_mc. Dans le clip
displayZone_mc nous avons
l'organisation de calques suivante:

◦ Pour chaque fenêtre d'affichage, nous

avons un nouveau calque.

◦ Sur le calque AS nous avons d'abord

besoin de cacher toutes les zones
d'affichage en utilisant la
propriété visible = false. Ensuite
nous allons ajouter un nouvel écouteur
de type: MouseEvent.CLICK, sur le
clip menu_mc.home_btn qui appellera
la fonction homeF. Cela, nous le ferons
pour chaque bouton.
 BALOG-CRISAN Radu
e-mail: radu.balog-crisan@univ-fcomte.fr

• Importation dans Flash à partir d'un fichier XML des métadonnées des
ordinateurs portables

• Construisez votre fichier XML. Par

exemple:
• Nous allons ajouter, sur le clip
laptops_mc, des nouveaux composants
de la fenêtre des composants
(Ctrl+F7):
◦ List - displayCategory_mc -
Dans lequel nous allons ajouter
tous les modèles portables;
◦ TileList - displayProducts_mc
- Dans lequel nous allons
ajouter tous les ordinateurs
portables de la catégorie en
cours de sélection;
◦ TextInput - price_mc - Dans
lequel nous allons afficher le
prix de l'ordinateur portable;
◦ Button - addtocart_mc -
Quand on clique ici, nous
allons ajouter l'ordinateur
portable sélectionné au panier.

• En clip viewcart_mc nous allons ajouter un TileList où seront affichés tous les
ordinateurs portables sélectionnés.

• Dans le calque AS, utilisez les classes suivantes pour afficher le contenu du XML
dans les composants:
◦ URLRequest
◦ URLLoader
 BALOG-CRISAN Radu
e-mail: radu.balog-crisan@univ-fcomte.fr

◦ XML
◦ DataProvider
◦ Array

• Lorsque nous sélectionnons une des catégories, nous voulons afficher tous les
éléments de cette catégorie
◦ Pour cela nous avons besoin d'un écouteur de type: Event.CHANGE, sur
le clip displayCategory_mc qui appellera la fonction selectCategory, et
deux variables globales de type Numéro: currentCategory et
currentItem. Dans ces variables nous allons retenir la catégorie
actuelle sélectionnée et l'ordinateur portable sélectionnés.
 BALOG-CRISAN Radu
e-mail: radu.balog-crisan@univ-fcomte.fr

• Afficher le prix de l'ordinateur portable sélectionné.

• Ajouter le portable sélectionné dans le panier lorsque le bouton Add To Cart est
cliqué.