Conception d'un composant personnalisé

TUTORIELS

BETRAINED

Plus dʼinformations sur www.info-betrained.fr BEtrained Centre de formation continue agréé

PAO / Bureautique / Internet Expertise Filemaker Pro Expertise CMS JOOMLA! Intégration HTML / CSS

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

TABLE DES MATIERES 1- Concevoir le "Panneau de défilement"!

3

2- Concevoir le composant personnalisé!

7

3- Concevoir les interactions et animations!

11

4- Import/Export de bibliothèques Flash CATALYST (.fxpl)!

12

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Conception d'un composant personnalisé Objectif: Nous allons concevoir dans cet exercice un composant personnalisé contenant lui-même un autre composant, imbriqué, de type “Panneau de défilement”. A l'issu de cette réalisation, l'idée va être de pouvoir réutiliser comme bon vous semble, sans le refaire à chaque fois que nécessaire, ce composant dans d'autres applications Flash CATALYST CS5 en important le contenu d'une bibliothèque externe (Que nous aurons bien entendu au préalable exporté) Voici les sources de cet exercice: Cliquez ici...

1- Concevoir le "Panneau de défilement" Commençons par créer un projet avec une taille arbitraire de 400×400 avec un fond noir (#000000). Avec l'outil TEXTE ajoutons une zone de texte sur la scène. Comme vous le constatez sur la figure ci-après, celle-ci va au-delà des limites du projet. Par la suite la taille de la zone visible sera gérée par le panneau de défilement que nous réaliserons. Par un double clic pour pourrez ajouter du faux-texte de remplissage (Source: http:// www.lipsum.com ou http://www.fillerati.com si vous souhaitez utiliser des extraits de grands auteurs littéraires). Mettez en forme le texte avec le panneau propriété en changeant par exemple ici la couleur du texte en blanc, un alignement horizontal justifié et une marge de 8.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Dans le panneau latéral composants à structure filaire, glissons dans la scène une Barre de défilement verticale. Ajustons la hauteur de l'objet. Cette hauteur fera référence lors de la transformation de ces deux objets (Zone de texte + Barre de défilement) en panneau de défilement.

Sélectionnons maintenant ces deux objets pour les transformer en panneau de défilement

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Cliquons ensuite sur modifier des parties pour déclarer la zone de texte…

… en contenu de défilement.

(Si besoin…) Ajuster et/ou repositionner le panneau de défilement dans la scène et en alignement avec la barre de défilement vertical à sa droite.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Revenir ensuite à la racine du projet à l'aide du fil d'Ariane en haut de la fenêtre du projet (Ici: Clic sur info_bulle_resultat qui est pour notre exemple le nom du projet Flash CATALYST).

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

2- Concevoir le composant personnalisé Dessinons un rectangle avec les coins arrondis en haut du composant que nous venons de créer.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Fond blanc, sans contour avec une ombre interne…

Ensuite un triangle avec cette fois une ombre portée…

Et enfin une zone de texte qui servira de titre à notre panneau.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Sélectionnons l'ensemble des objets et transformons les en composant personnalisé/ générique

Par un double clic sur ce nouveau composant, nous allons définir le triangle comme l'élément servant à “ouvrir” le panneau. Sélectionnons-le et allons le transformer en bouton.

Deux états vont nous être nécessaires: • •

Le panneau fermé Le panneau ouvert

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Cliquons sur dupliquer l'état et renommons ces deux états par un double clic sur le titre. Supprimons dans le 1er le panneau de défilement. Agrandissons dans le 2e le rectangle blanc. Comme ce rectangle a été conçu après la zone de texte il se trouve par-dessus. Dans la palette des calques à droite, faites-le glisser sous panneau de défilement. Le texte ayant une couleur identique au fond de ce rectangle (Blanc), changeons la couleur de ce texte par des doubles clics successifs pour arriver à la sélection de ce texte et à l'application de cette nouvelle teinte (Ici en noir). Utilisons à nouveau le fil d'Ariane pour nous repositionner sur le composant personnalisé, ici CustomComponent1

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

3- Concevoir les interactions et animations Sélectionnons le triangle noir et définissons l'interaction. Celui-ci doit à la fois ouvrir le panneau blanc (Lire la transition ouvert dans Etat ferme) mais aussi fermer le panneau (Lire la transition ferme dans Etat ouvert). Cela nécessitera doit d'affecter 2 interactions à ce triangle. Dans l'état ouvert tournons le triangle d'un quart de tour vers la droite avec l'outil rotation en lui mettant “la tête en bas”, ce qui accentuera l'effet de déploiement vers le bas du panneau blanc.

Animons maintenant les changements d'état. Flash CATALYST a détecté automatiquement les changements de propriétés des éléments graphiques (Suppression du panneau et Agrandissement du rectangle) qui se sont traduit par des effets de fondu et redimensionnement dans le panneau scénario en bas de la fenêtre. Cliquons sur transition régulière pour affecter a tous les effets une durée identique, et redéfinissons les actions en fonctions des effets d'apparition et de disparition recherchés.

Testons maintenant le résultat en choisissant exécuter le projet dans le menu fichier

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

4- Import/Export de bibliothèques Flash CATALYST (.fxpl) Cette dernière étape est fondamentale si vous souhaitez dans d'autres projets ré-utiliser ce composant. Attention: Flash CATALYST exporte l'intégralité de la bibliothèque, ne vous permettant pas de choisir ceux que vous souhaitez exporter. Faites donc en sorte de n'avoir dans votre projet servant à concevoir ce composant type que le stricte nécessaire. Pensez enfin à renommer vos composants par des nom explicites, surtout si votre projet est repris par un développeur dans Flash Builder. Il n'en sera que plus simple pour lui de s'y retrouver !

Dans le panneau bibliothèque, choisissons exporter le package de bibliothèque. Cela déclenche l'ouverture de la boite de dialogue vous permettant de choisir le lieu de stockage de ce fichier portant l'extension FXPL. Sauvegardez votre projet et essayez enfin dans un nouveau projet Flash CATALYST d'utiliser à nouveau votre bibliothèque en important cette fois votre package FXPL. A vous de jouer !…

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

TUTORIELS

BETRAINED

Plus dʼinformations sur www.info-betrained.fr BEtrained Centre de formation continue agréé

PAO / Bureautique / Internet Expertise Filemaker Pro Expertise CMS JOOMLA! Intégration HTML / CSS

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Turn static files into dynamic content formats.

Create a flipbook