Master2 2lce 8.oct.2009
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Master2 2lce 8.oct.2009 as PDF for free.
More details
- Words: 1,070
- Pages: 8
BALOG-CRISAN Radu e-mail: [email protected]
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: [email protected]
• 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: [email protected]
• 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: [email protected]
◦ 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: [email protected]
• 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: [email protected]
• 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: [email protected]
◦ 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: [email protected]
• 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é.
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: [email protected]
• 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: [email protected]
• 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: [email protected]
◦ 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: [email protected]
• 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: [email protected]
• 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: [email protected]
◦ 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: [email protected]
• 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é.
