ADOBE FLASH CATALYST CS5 User Manual

Utilisation de

ADOBE® FLASH® CATALYST ™ CS5

Dernière mise à jour le 29/4/2010

Utilisation d’Adobe

This user guide is protected under copyright law, furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.

This user guide is licensed for use under the terms of the Creative Commons Attribution Non-Commercial 3.0 License. This License allows users to copy, distribute, and transmit the user guide for noncommercial purposes only so long as (1) proper attribution to Adobe is given as the owner of the user guide; and (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. The best way to provide notice is to include the following link. To view a copy of this license, visit

Adobe, the Adobe logo, Acrobat, Adobe AIR, Adobe Premiere, ActionScript, After Effects, AIR, Creative Suite, Fireworks, Flash, Flash Builder, Flash Catalyst, Flex, Illustrator, and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Windows is either a registered trademark or a trademark of Microsoft Corporation in the United States and/or other countries. Mac OS is a trademark of Apple Inc., registered in the U.S. and other countries. All other trademarks are the property of their respective owners.

Updated Information/Additional Third Party Code Information available at

Portions include software under the following terms:

This product includes software developed by the Apache Software Foundation (

MPEG Layer-3 audio compression technology licensed by Fraunhofer IIS and Thomson Multimedia ( compressed audio within the Software for real time or live broadcasts. If you require an mp3 decoder for real time or live broadcasts, you are responsible for obtaining this mp3 technology license.

Speech compression and decompression technology licensed from Nellymoser, Inc. (

This product includes software developed by the OpenSymphony Group (

This product contains either BSAFE and/or TIPEM software by RSA Security, Inc.

This work is based in part on the work of the Independent JPEG Group.

This program was written with MacApp®: ©1985-1988 Apple Computer, Inc. APPLE COMPUTER, INC. MAKES NO WARRANTIES WHATSOEVER, EITHER EXPRESS OR IMPLIED, REGARDING THIS PRODUCT, INCLUDING WARRANTIES WITH RESPECT TO ITS MERCHANTABILITY OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. The MacApp software is proprietary to Apple Computer, Inc. and is licensed to Adobe for distribution only for use in combination with Adobe Flash Catalyst.

® Flash® Catalyst™ CS5

http://creativecommons.org/licenses/by-nc-sa/3.0/

http://www.adobe.com/go/thirdparty.

www.apache.org).

http://www.iis.fhg.de/amm/). You cannot use the mp3

www.nellymoser.com)

http://www.opensymphony.com/)

Sorenson Spark

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.

Notice to U.S. Government End Users: The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

™ video compression and decompression technology licensed from Sorenson Media, Inc.

Dernière mise à jour le 29/4/2010

Sommaire

Chapitre 1 : Ressources

Activation et enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Services, téléchargements et extras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Chapitre 2 : Flux de travaux Flash Catalyst

Flux de travaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Création d’un projet Flash Catalyst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Chapitre 3 : Importation d’illustrations

Importation de fichiers Adobe Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Importation de fichiers Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Importation de fichiers FXG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Importation d’images bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Importation de fichiers SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Importation d’un package de bibliothèque Flash Catalyst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Options de fidélité à l’importation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

iii

Chapitre 4 : Espace de travail

Espace de travail Création . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Espace de travail Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Chapitre 5 : Pages et états

Ajout, duplication et suppression de pages et d’états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Noms des pages et des états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Affichage des pages et des états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Affichage et masquage d’illustrations dans les pages et les états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Partage d’objets entre pages et états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Chapitre 6 : Calques

Organisation d’un projet à l’aide des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Sélection d’objets dans le panneau Calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Gestion des illustrations à l’aide des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Chapitre 7 : Bibliothèque

Gestion et positionnement des illustrations à partir du panneau Bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Exportation et importation d’un package de bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Chapitre 8 : Composants

Création d’un composant à partir d’une illustration personnalisée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Définition des propriétés des composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Mode de modification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Ajout d’un composant à structure filaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Sommaire

Chapitre 9 : Interactions

Chapitre 10 : Transitions et séquences d’actions

Création de transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Modification des transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Options de transition régulière . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Ajout d’une séquence d’actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Modification d’une séquence d’actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Chapitre 11 : Listes de données et panneaux de défilement

Présentation des listes de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Création d’un composant de liste de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Ajout de données en phase de conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Présentation d’un panneau de défilement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Création d’un composant de panneau de défilement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Chapitre 12 : Création de formes, lignes et texte

Dessin de formes et de lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Ajout de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Sélection et positionnement des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Dimensionnement et rotation des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Partage des objets dessinés avec d’autres états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Modification des propriétés de dessin et de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Propriétés des formes et des lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Propriétés de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Harmonisation des objets dans tous les états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Modes de fusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Chapitre 13 : Optimisation des graphiques

Chapitre 14 : Aller-retour de modifications

Lancement et modification dans Adobe Illustrator CS5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Lancement et modification dans Adobe Photoshop CS5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Conseils pour le maintien de la fidélité tout au long de l’aller-retour de modifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Chapitre 15 : Eléments vidéo et audio

Ajout d’une vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Définition des propriétés du lecteur vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Contrôle de la lecture de la vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Ajout d’effets sonores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Création de fichiers vidéo et audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Chapitre 16 : Publication

Sélection des options de publication et publication d’un projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Optimisation des performances de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Sommaire

Chapitre 17 : Intégration dans Flash Builder

Chapitre 18 : Raccourcis clavier

Affichage et exploration du plan de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Création et exécution de projets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Utilisation des pages et des états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Sélection d’outils dans le panneau Outils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Conversion d’illustrations en composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Modification et édition d’objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Utilisation du panneau Propriétés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Utilisation des transitions et des séquences d’actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Dernière mise à jour le 29/4/2010

Chapitre 1 : Ressources

Activation et enregistrement

Aide à l’installation

Pour obtenir de l’aide en cas de difficultés à l’installation, voir la page d’aide et d’assistance de Creative Suite à l’adresse

www.adobe.com/go/learn_cs_fr.

Activation de la licence

Lors du processus d’installation, votre logiciel Adobe contacte Adobe afin d’achever le processus d’activation de la licence. Aucune donnée personnelle n’est transmise. Pour plus d’informations sur l’activation du produit, consulter le site Web d’Adobe à l’adresse www.adobe.com/go/activation_fr.

L’activation d’une licence monoutilisateur est valable pour deux ordinateurs. Par exemple, vous pouvez installer le produit sur un ordinateur de bureau de votre lieu de travail et sur un ordinateur portable utilisé à votre domicile. Si vous souhaitez installer le logiciel sur un troisième ordinateur, vous devez d’abord le désactiver sur l’un des deux autres ordinateurs. Sélectionnez Aide > Désactiver.

Enregistrement

Enregistrez votre produit afin de bénéficier gratuitement d’une aide à l’installation, de notifications de mises à jour, ainsi que d’autres services.

❖ Pour procéder à l’enregistrement, saisissez votre ID Adobe lorsque vous y êtes invité (à l’installation ou au

démarrage du logiciel).

Si vous décidez d’ignorer cette étape, vous pourrez enregistrer votre produit à tout moment en cliquant sur Aide > Enregistrement du produit.

Programme d’amélioration des produits Adobe

Après avoir utilisé le logiciel Adobe un certain nombre de fois, une boîte de dialogue s’affiche, vous proposant de participer au Programme d’amélioration des produits Adobe.

Si vous choisissez d’y participer, des données concernant votre utilisation du logiciel Adobe seront transmises à Adobe. Aucune information personnelle n’est enregistrée ni envoyée. Le Programme d’amélioration des produits Adobe ne rassemble que les informations concernant les fonctionnalités et les outils que vous utilisez dans le logiciel, ainsi que la fréquence d’utilisation.

Vous pouvez accepter ou refuser de participer au programme à tout moment :

• Pour participer, choisissez Aide > Programme d’amélioration des produits, puis cliquez sur Oui, participer.

• Pour arrêter de participer, choisissez Aide > Programme d’amélioration des produits, puis cliquez sur Non, merci.

Adobe fournit des informations supplémentaires sur le programme d’amélioration des produits dans une liste de questions fréquentes sur le site Web d’Adobe.

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Ressources

Services, téléchargements et extras

Adobe Exchange

Visitez le site Web d’Adobe Exchange à l’adresse http://www.adobe.com/go/exchange_fr pour télécharger des exemples, ainsi que des milliers de modules externes et d’extensions fournis par Adobe et des développeurs tiers. Ces modules externes et extensions peuvent vous aider à automatiser des tâches, à personnaliser des processus et à créer des effets professionnels spécifiques, entre autres.

Téléchargements Adobe

Consulter http://www.adobe.com/go/downloads_fr pour obtenir gratuitement des mises à jour, des versions d’essai ainsi que d’autres outils logiciels utiles.

Adobe Labs

Le site Adobe Labs à l’adresse http://www.adobe.com/go/labs_fr vous permet de découvrir et d’évaluer les nouveaux produits et technologies développés par Adobe.

Adobe TV

Le canal Adobe TV disponible à l’adresse http://tv.adobe.com/fr propose des vidéos permettant de parfaire ses connaissances ou de trouver une source d’inspiration.

Supplémentaires

Le disque d’installation contient divers extras qui vous permettront de profiter pleinement de votre logiciel Adobe. Certains extras sont installés sur votre ordinateur au cours du processus d’installation, tandis que d’autres sont disponibles sur le disque.

Pour afficher les extras installés avec le logiciel, accédez au dossier de l’application sur votre ordinateur.

• Windows : [Disque de démarrage]\Program Files\Adobe\[Application Adobe]

• Mac OS : [Disque de démarrage]/Applications/[Application Adobe]

Dernière mise à jour le 29/4/2010

Chapitre 2 : Flux de travaux Flash Catalyst

Adobe Flash Catalyst CS5 est un outil permettant la création rapide d’interfaces utilisateur et de contenu interactif sans codage, tels que les publicités interactives, les guides de produit, les portefeuilles de conception et les interfaces utilisateur complexes. Commencez par établir un plan du projet, puis importez des illustrations créées dans Adobe Photoshop, Adobe Illustrator ou Adobe Fireworks. Une fois les illustrations et autres ressources importées, définissez les pages (écrans) et les composants interactifs, tels que les boutons de navigation et les barres de défilement. Ajoutez les interactions qui assureront la transition d’un état de page ou de composant vers un autre, donneront accès à une URL ou permettront de contrôler animations et vidéos. Enfin, publiez le projet comme application pour le Web ou comme application de bureau. Le projet Flash Catalyst peut être ouvert dans Adobe Flash Builder dans le cadre du développement ultérieur de l’application, par exemple sa connexion à une source de données.

Flux de travaux

Les applications Flash Catalyst sont principalement de deux types : microsites ou applications centrées sur les données.

Dans ce document, le microsite est une application qui, une fois publiée dans Flash Catalyst, est complète. Elle ne nécessite aucun développement ultérieur. L’application centrée sur les données devra en revanche faire l’objet de développements supplémentaires, par exemple l’intégration de composants contenant des données ou des services Web externes. Un développeur Flex complétera une application centrée sur les données dans Adobe Flash Builder.

Les flux de travaux pour la conception de microsites et d’applications centrées sur les données sont semblables.

jïGNG

GN

w

jïGGGG

hGGGæGmGj jïGGGGGï

[

jïGG kïGG

jïGG

]

wGGG~GGGG

Flux de travaux pour microsites

jïGNG



z~m hpy

w

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Flux de travaux Flash Catalyst

jïGNG

GN

w

jïGGGG

hGGGæGmGj

jïGGGGGï

[

jïGG kïGG

jïGG

]

zGGGïGG GG~

wGGG~GGGG

Flux de travaux pour concepteur/développeur d’applications centrées sur les données

jïGNG



w

z~m hpy

kï

Etapes des flux de travaux

Suivez ces étapes de flux de travaux générales lors de la création dans Flash Catalyst de microsites et d’applications centrées sur les données.

Planification de l’application Commencez par rédiger une spécification détaillée du projet. Cette spécification doit

décrire chaque page ou écran, les illustrations et les composants interactifs de chaque page, la navigation des utilisateurs et les différents états de chaque composant. Elle doit également décrire tous les composants de liste de données utilisés pour extraire et afficher des données externes.

Création ou acquisition des illustrations et des éléments vidéo et audio Créez les illustrations ainsi que les éléments

vidéo et audio de l’application. Dans Adobe Illustrator, Photoshop ou Fireworks, créez un document ou une composition de conception multicalque.

Importation d’illustrations, de données vidéo et de données audio Démarrez Flash Catalyst. Importez les illustrations

multicalques dans Flash Catalyst. Vous pouvez également importer des fichiers graphiques individuels ou créer des graphiques simples à l’aide des outils intégrés de dessin vectoriel. Importez des ressources supplémentaires, telles que des contenus vidéo, audio et SWF. Pour les composants centrés sur les données, tels que les listes de données, importez un échantillon de données représentatif (texte ou images). Pour plus d’informations, voir « Importation

d’illustrations » à la page 7.

Une fois une illustration importée ou créée dans Flash Catalyst, vous pouvez la modifier dans Illustrator ou

Photoshop, puis la renvoyer, ainsi modifiée, à Flash Catalyst. L’aller-retour de modifications constitue une extension des fonctionnalités de dessin et d’édition graphique de Flash Catalyst et améliore le processus de conception itératif. Pour plus d’informations, voir « Aller-retour de modifications » à la page 62.

Création et modification des états de page Créez des pages en fonction de la spécification du projet. Pour plus

d’informations, voir « Pages et états » à la page 20.

Création de composants interactifs et définition d’états de composant Convertissez les illustrations en composants

prédéfinis (boutons, barres de défilement, listes de données et ainsi de suite). Utilisez le panneau Composants à structure filaire pour ajouter rapidement des composants courants d’aspect générique. Créez des composants personnalisés pour les comportements que vous ne pouvez pas capturer à l’aide des composants intégrés. Pour plus d’informations, voir « Composants » à la page 29.

Pour les applications centrées sur les données, faites appel au panneau Données en phase de conception pour créer des composants de liste de données. Les données en phase de conception permettent l’utilisation de contenu factice (enregistrements de base de données ou images bitmap, par exemple) ne nécessitant pas de connexion effective à un système back-end. Les développeurs Flex peuvent remplacer les données en phase de conception par des données

Dernière mise à jour le 29/4/2010

réelles issues d’une base de données ou d’un service Web. Pour plus d’informations sur l’utilisation des données en phase de conception, voir « Listes de données et panneaux de défilement » à la page 45.

Les composants peuvent avoir plusieurs états. Un bouton peut avoir par exemple les états Haut, Dessus, Bas et Désactivé. Créez ou modifiez les différents états de chaque composant interactif en fonction de la spécification du projet.

Remarque : les étapes de création des états de page et des composants interactifs sont interchangeables. Certains concepteurs préfèrent commencer par créer tous les composants interactifs avant de les ajouter aux pages et aux états.

Définition des interactions et des transitions Ajoutez des interactions définissant ce qui se produit lorsque les

utilisateurs interagissent avec l’application. Vous pouvez par exemple créer des interactions définissant la transition d’un état de page ou de composant vers un autre lorsque l’utilisateur clique sur un bouton. Vous pouvez également ajouter des interactions déclenchant la lecture d’animations, contrôlant la lecture de vidéos ou ouvrant une URL. Utilisez le panneau Scénarios pour ajouter des transitions régulières animées entre les états de page et de composant ainsi que pour les modifier. Pour plus d’informations sur les interactions, voir « Interactions » à la page 36. Pour plus d’informations sur les transitions, voir « Transitions et séquences d’actions » à la page 38.

Test et publication du projet Une fois un microsite créé, vous pouvez publier le projet final en tant qu’application Web

ou application de bureau. Pour plus d’informations, voir « Publication » à la page 70.

Partage du projet avec un développeur Flex Enregistrez le fichier de projet Flash Catalyst centré sur les données

(FXP) pour en permettre le développement ultérieur dans Adobe Flash Builder. Exportez la bibliothèque du projet Flash Catalyst. L’exportation de la bibliothèque du projet crée un fichier unique contenant tous les éléments de la bibliothèque du projet. Le package est enregistré au format FXPL. Pour plus d’informations sur l’exportation d’une bibliothèque Flash Catalyst, voir « Intégration dans Flash Builder » à la page 73.

UTILISATION DE FLASH CATALYST CS5

Flux de travaux Flash Catalyst

Création d’un projet Flash Catalyst

Vous pouvez créer un projet de deux manières différentes :

• Ouvrez un plan de travail vierge et créez-y votre application. Cette approche permet de générer rapidement la

structure filaire d’une interface utilisateur. Flash Catalyst fournit des composants à structure filaire, des outils de dessin et des fonctions pour l’importation de différents médias permettant de créer rapidement un prototype d’interface.

• Importez un document de conception complet en tant qu’illustration multicalque créée dans Adobe Photoshop ou

Illustrator ou importez une création Fireworks exportée. Cette approche vous permet d’utiliser votre programme Adobe Creative Suite préféré pour la conception, puis de convertir rapidement l’illustration en application interactive opérationnelle.

Création d’un projet avec un plan de travail vierge :

1 Démarrez Flash Catalyst. Dans la section Créer un nouveau projet de l’écran de bienvenue, sélectionnez Projet

Adobe Flash Catalyst.

Remarque : si un projet est déjà ouvert, sélectionnez Fichier > Nouveau Projet pour lancer un nouveau projet vierge.

2 Dans la boîte de dialogue Nouveau projet, attribuez un nom au projet, saisissez des valeurs pour les dimensions et

la couleur du plan de travail, puis cliquez sur OK.

Un nouveau projet est créé avec un plan de travail vierge. Par défaut, l’espace de travail Création est activé. Créez votre application en important des illustrations, en ajoutant des pages, en créant des composants et en ajoutant des interactions et des transitions.

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Flux de travaux Flash Catalyst

Remarque : vous pouvez modifier ultérieurement les valeurs du plan de travail en cliquant sur Modifier > Paramètres du plan de travail.

Création d’un projet par l’importation d’illustrations dans un document de conception multicalque :

1 Démarrez Flash Catalyst.

2 Dans la section Créer un projet depuis un fichier de création de l’écran de bienvenue, sélectionnez le type de fichier

que vous souhaitez importer. Vous disposez des options suivantes : fichier Adobe Illustrator AI, fichier Adobe Photoshop PSD et fichier FXG (les fichiers FXG peuvent être exportés à partir d’Adobe Fireworks ainsi qu’à partir d’autres applications).

Remarque : si un projet est déjà ouvert, sélectionnez Fichier > Importer > <Type de fichier>.

Toutes les illustrations contenues dans le document de conception sont ajoutées au nouveau projet Flash Catalyst. Le panneau Calques reflète la structure des calques du document importé, respectant ainsi la conception d’origine.

Créez maintenant votre application en ajoutant des pages, en créant des composants et en ajoutant des interactions et des transitions.

Pour plus d’informations, voir « Importation d’illustrations » à la page 7.

Dernière mise à jour le 29/4/2010

Chapitre 3 : Importation d’illustrations

Vous pouvez importer des illustrations dans Flash Catalyst de différentes manières.

• Importez un document de conception multicalque créé dans Adobe Photoshop ou Adobe Illustrator.

Remarque : Flash Catalyst peut importer uniquement les documents de conception dont le volume est inférieur à 40 Mo.

• Importez un fichier FXG multicalque. Vous pouvez exporter un fichier FXG à partir d’Adobe Fireworks ou de toute

autre application Adobe Creative Suite.

• Importez une ou plusieurs images bitmap.

• Copiez et collez des graphiques sur le plan de travail de Flash Catalyst.

• Importez un fichier SWF.

• Importez un package de bibliothèque Flash Catalyst.

Importation de fichiers Adobe Illustrator

Vous pouvez créer un projet Flash Catalyst en important un fichier Illustrator.

1 Démarrez Flash Catalyst.

2 Dans la section Créer un projet depuis un fichier de création de l’écran de bienvenue, sélectionnez Depuis un fichier

Adobe Illustrator AI.

Si Flash Catalyst est déjà en cours d’exécution, choisissez Fichier > Nouveau projet du composant de création. Vous ne pouvez ouvrir qu’un seul projet à la fois.

3 Recherchez le fichier que vous souhaitez importer, sélectionnez-le, puis cliquez sur Ouvrir.

La boîte de dialogue Options d’importation Illustrator contient des paramètres de plan de travail et des options de fidélité. Vous pouvez définir l’importation de calques invisibles et de symboles inutilisés.

Remarque : l’option Importer les calques invisibles importe tous les calques, y compris les calques qui sont masqués dans le fichier Illustrator. L’option Inclure les symboles inutilisés importe les symboles graphiques fournis avec Illustrator ainsi que les symboles que vous avez créés.

Définissez la taille et la couleur du plan de travail. Sélectionnez les options de fidélité de l’importation et cliquez sur OK.

Dernière mise à jour le 29/4/2010

Boîte de dialogue Options d’importation Illustrator

UTILISATION DE FLASH CATALYST CS5

Importation d’illustrations

Le fichier Illustrator est automatiquement converti au format FXG, puis importé dans un nouveau projet Flash Catalyst. Si le fichier Illustrator ne comporte qu’un seul plan de travail, toutes les illustrations sont placées sur le même état de page dans Flash Catalyst. Si le fichier Illustrator comporte plusieurs plans de travail, les illustrations de chaque plan de travail sont placées sur des états de page distincts dans Flash Catalyst.

Vous pouvez copier des éléments individuels d’illustration dans Illustrator et les coller dans le plan de travail de Flash

Catalyst. Les options de fidélité à l’importation à partir d’Illustrator s’affichent également lors de l’opération de copier-coller.

Remarque : que vous importiez une illustration ou que vous la placiez dans Flash Catalyst par copier-coller, les objets situés en dehors du plan de travail d’Illustrator sont ignorés.

Les symboles d’Illustrator sont importés en tant que Graphiques optimisés. Si votre fichier Illustrator comporte

plusieurs instances du même symbole, votre document Flash Catalyst comprendra plusieurs instances du même graphique optimisé. Dans Flash Catalyst, nous conseillons d’utiliser une instance d’un objet, puis de partager cet objet avec d’autres états. Vous pouvez supprimer toutes les instances du graphique optimisé sauf une, partager la même instance avec d’autres états, puis appliquer différentes propriétés dans chaque état. Pour convertir le graphique optimisé en composant Flash Catalyst, vous devez d’abord le scinder en cliquant sur Modifier > Scinder le graphique.

Options de fidélité à l’importation à partir d’Illustrator

La boîte de dialogue Options d’importation Illustrator comporte des paramètres de fidélité qui déterminent la manière dont Flash Catalyst importe des objets avec filtres, textes, dégradés et dégradés de formes.

Filtres

Conserver le caractère modifiable Conserve les filtres Illustrator modifiables pris en charge par Flash Catalyst. Les

filtres pris en charge sont Flou (Flou gaussien), Ombre portée, Ombre intérieure, Biseau, Lueur, Lueur intérieure. Une fois les filtres importés, vous pouvez les modifier dans le panneau Propriétés.

Développer Convertissez les objets avec filtres en ensembles de vecteurs ou d’images bitmap afin de parvenir à un

aspect proche de celui d’origine obtenu dans Illustrator. Par exemple, le développement d’une ombre portée sur un rectangle créé une image de l’ombre portée derrière le rectangle d’origine. L’image et l’ombre sont deux objets distincts d’un groupe dans le panneau Calques.

Aplatir Convertissez les objets avec filtres en images (de trame) bitmap individuelles. L’image et le filtre forment une

image non modifiable.

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Importation d’illustrations

Texte

Conversion automatique Flash Catalyst détermine si le caractère modifiable du texte doit être conservé et si le texte

doit être pixellisé ou converti en vecteurs. Le résultat dépend de différents paramètres heuristiques, telles que la complexité de l’élément. Par exemple, un dégradé de formes simple est développé en vecteurs. Un dégradé de formes complexe (produisant de nombreux chemins) est pixellisé.

Conserver le caractère modifiable Importez les textes issus d’Illustrator en tant qu’objets modifiables. Une fois

importé, le texte modifiable peut être changé. Vous pouvez également en redimensionner le cadre de sélection et lui appliquer des propriétés de mise en forme dans le panneau Propriétés. Le texte modifiable risque de perdre en fidélité à l’importation.

Contours vectoriels Convertissez le texte en chemins vectoriels ressemblant à l’aspect rendu du texte.

Aplatir Convertissez le texte en une seule image (de trame) bitmap.

Dégradés

Conversion automatique Flash Catalyst décide quand conserver le caractère modifiable des dégradés et quand les

pixelliser.

Conserver le caractère modifiable Conservez le caractère modifiable des objets possédant des dégradés Illustrator.

Flash Catalyst prend en charge uniquement les dégradés linéaires. Ces derniers peuvent être modifiés dans le panneau Propriétés. Les objets possédant des dégradés radiaux ou elliptiques conservent leur caractère modifiable (sans être pixellisés), mais leurs dégradés ne peuvent pas être modifiés dans Flash Catalyst. Dans le panneau Propriétés, vous pouvez choisir les types de remplissage (uni, dégradé (linéaire) ou aucun remplissage).

Dégradé de formes

Conversion automatique Flash Catalyst décide quand conserver le caractère modifiable des dégradés de formes et

quand les pixelliser. Le résultat dépend de différents paramètres heuristiques, tels que la complexité de l’élément et les dégradés de formes pris en charge.

Aplatir Convertissez les objets avec dégradés de formes en une seule image (de trame) bitmap.

Importation de fichiers Adobe Photoshop

Vous pouvez créer un projet Flash Catalyst en important un fichier Photoshop.

1 Démarrez Flash Catalyst.

2 Dans la section Créer un projet depuis un fichier de création de l’écran de bienvenue, sélectionnez Depuis un fichier

Adobe Photoshop PSD.

Si Flash Catalyst est déjà en cours d’exécution, choisissez Fichier > Nouveau projet du composant de création. Vous ne pouvez ouvrir qu’un seul projet à la fois.

3 Recherchez le fichier que vous souhaitez importer, sélectionnez-le, puis cliquez sur Ouvrir.

La boîte de dialogue Options d’importation Photoshop contient des paramètres de plan de travail et des options de fidélité. Vous pouvez également importer les calques invisibles.

Remarque : l’option Importer les calques invisibles importe tous les calques, y compris les calques qui sont masqués dans le fichier Photoshop.

Définissez la taille et la couleur du plan de travail. Sélectionnez les options de fidélité de l’importation et cliquez sur OK.

Dernière mise à jour le 29/4/2010

Boîte de dialogue Options d’importation Photoshop

UTILISATION DE FLASH CATALYST CS5

Importation d’illustrations

Dans la boîte de dialogue Options d’importation Photoshop, cliquez sur Avancées pour spécifier les calques à

importer. Vous pouvez activer et désactiver les calques à importer, qu’ils soient ou non visibles dans Photoshop. Vous pouvez spécifier les compositions de calques Photoshop que vous souhaitez importer. Voir « Importation de compositions

de calques Photoshop » à la page 11.

Options de fidélité à l’importation à partir de Photoshop

Les options de fidélité à l’importation à partir de Photoshop déterminent la manière dont Flash Catalyst importe les calques d’image, de forme et de texte.

Calques d’image

Conserver le caractère modifiable Conservez le caractère modifiable des calques d’image avec effets. Les effets de

calques sont importés en tant qu’objets distincts dans le panneau Calques de Flash Catalyst.

Aplatir Convertissez les calques d’image avec effets en une seule image (de trame) bitmap.

Calques de forme

Recadrer Importez le masque vectoriel qui définit une forme, mais recadrez l’image bitmap résultante en fonction des

limites du masque.

Aplatir Convertissez les calques de forme avec effets en une seule image (de trame) bitmap.

Calques de texte

Conserver le caractère modifiable Importez les calques de texte en tant qu’objets de texte modifiables. Une fois

Contours vectoriels Convertissez le texte en chemins vectoriels ressemblant à l’aspect rendu du texte.

Aplatir Convertissez les calques de texte avec effets en une seule image (de trame) bitmap.

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Importation d’illustrations

Importation de compositions de calques Photoshop

Une composition de calques Photoshop fournit un instantané des calques activés et des calques désactivés dans le document Photoshop. Lorsque vous préparez un document pour l’importer dans Flash Catalyst, vous pouvez utiliser la composition de calques pour représenter chaque état de page dans votre application Flash Catalyst. Vous pouvez ensuite importer chaque composition de calques dans un état différent de Flash Catalyst.

1 Dans la boîte de dialogue Options d’importation Photoshop, cliquez sur le bouton Avancées.

La boîte de dialogue comporte des options d’importation avancées.

2 Cliquez pour ouvrir le menu de sélection des compositions de calques Photoshop et sélectionnez-en une.

Remarque : ce menu s’affiche uniquement à l’importation d’un document Photoshop contenant des compositions de calques. Dans le menu de sélection des compositions de calques Photoshop, vous pouvez également sélectionner Dernier état du document. Ceci faisant, vous importez les illustrations de tous les calques qui étaient visibles lorsque vous avez enregistré le fichier Photoshop.

Vous pouvez spécifier des options de fidélité individuelles pour chaque calque sélectionné.

3 Cliquez sur OK.

Les calques sélectionnés sont importés dans l’état de page actuel dans Flash Catalyst. Si vous créez un nouveau projet Flash Catalyst, la composition de calques est importée dans la Page 1.

• Pour importer une composition de calques dans un état de page précis, ouvrez d’abord le projet Flash Catalyst,

puis sélectionnez une page dans le panneau Pages/Etats.

• Pour placer une autre composition de calques sur une nouvelle page vierge, cliquez sur Nouvel état vierge dans

le panneau Pages/Etats. Cliquez ensuite sur Fichier > Importer > Fichier Adobe Photoshop (.psd). Sélectionnez un fichier à importer, puis cliquez sur Ouvrir. Répétez les étapes 1 à 3 pour importer la composition de calques dans la nouvelle page.

Lorsque vous importez des illustrations dans une composition de calques Photoshop, les illustrations sont centrées sur le plan de travail de Flash Catalyst. Pour conserver la mise en forme et la position des compositions de calques,

importez un calque d’arrière-plan dont les dimensions sont identiques à celles du plan de travail de Flash Catalyst.

Importation de fichiers FXG

Flash Catalyst importe les illustrations au format de fichier FXG.

1 Démarrez Flash Catalyst.

Dans la section Créer un projet depuis un fichier de création de l’écran de bienvenue, sélectionnez Depuis un fichier FXG.

Si Flash Catalyst est déjà en cours d’exécution, choisissez Fichier > Nouveau projet du composant de création. Vous ne pouvez ouvrir qu’un seul projet à la fois.

3 Recherchez le fichier que vous souhaitez importer, sélectionnez-le, puis cliquez sur Ouvrir.

Pour plus d’informations sur l’exportation d’un fichier FXG à partir de Fireworks, voir Exportation de fichiers FXG.

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Importation d’illustrations

Importation d’images bitmap

Flash Catalyst permet l’importation d’images bitmap aux formats PNG, GIF, JPG, JPEG et JPE.

1 Cliquez sur Fichier > Importer > Image.

2 Recherchez le fichier, sélectionnez-le et cliquez sur Ouvrir.

• Lorsque vous importez un fichier image unique, il est placé dans la bibliothèque du projet. Une instance est

placée sur le plan de travail, dans l’état en cours d’utilisation. Un nouveau calque est ajouté au panneau Calques pour l’objet.

• Lorsque vous importez plusieurs fichiers image, ils sont placés dans la bibliothèque du projet. Aucune image

n’est ajoutée au plan de travail. Pour ajouter une instance de l’image au plan de travail, faites-la glisser du panneau Bibliothèque vers le plan de travail.

Importation de fichiers SWF

1 Cliquez sur Fichier > Importer > Fichier SWF.

2 Recherchez le fichier, sélectionnez-le et cliquez sur Ouvrir.

• Lorsque vous importez un fichier SWF unique, il est placé dans la bibliothèque du projet. Une instance est placée

sur le plan de travail, dans l’état en cours d’utilisation. Un nouveau calque est ajouté au panneau Calques pour l’objet.

• Lorsque vous importez plusieurs fichiers SWF, ils sont placés dans la bibliothèque du projet. Aucun fichier SWF

n’est ajouté au plan de travail. Pour ajouter une instance du fichier SWF au plan de travail, faites-la glisser du panneau Bibliothèque vers le plan de travail.

• Vous ne pouvez pas afficher un aperçu du fichier SWF dans le panneau Bibliothèque de Flash Catalyst. Pour

afficher un aperçu du fichier SWF, exécutez le projet en cliquant sur Fichier > Exécuter le projet.

• Utilisez les interactions et les effets de Flash Catalyst pour contrôler la lecture des fichiers SWF. Vous pouvez

également lancer la lecture d’un fichier SWF à partir d’une image précise ou l’arrêter à une image précise. Pour plus d’informations, voir « Interactions » à la page 36.

• Seul le contenu SWF rédigé en langage ActionScript 3.0 et publié à l’aide d’Adobe Flash Professional peut être

géré dans Flash Catalyst.

• Aucune intégration directe n’est possible entre Flash Catalyst et Flash Professional. Modifiez le fichier SWF dans

Flash Professional, republiez-le, puis importez le nouveau fichier dans Flash Catalyst. Utilisez le lien Source du panneau Propriétés pour remplacer l’ancien fichier SWF par le nouveau.

Importation d’un package de bibliothèque Flash Catalyst

Pour plus d’informations sur l’importation d’illustrations dans un package de bibliothèque, voir « Exportation et

importation d’un package de bibliothèque » à la page 28.

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Importation d’illustrations

Options de fidélité à l’importation

Lorsque vous importez à partir d’Illustrator ou de Photoshop, vous devez spécifier des options de fidélité qui contrôlent comment Flash Catalyst importe vos illustrations. Il est utile de savoir quels attributs sont pris en charge par Flash Catalyst et dans quelles circonstances les illustrations doivent être aplaties ou pixellisées avant l’importation.

Options de fidélité à l’importation à partir d’Illustrator

Illustrator : filtres et effets

Les filtres Illustrator suivants sont pris en charge par Flash Catalyst. Tous les autres filtres et effets sont pixellisés ou développés en cours d’importation.

• Ombre portée

• Lueur interne

• Lueur externe

• Flou gaussien

Illustrator : attributs de texte

Les attributs de texte Illustrator pris en charge sont les suivants :

• Famille de caractères

• Style de la police

• Epaisseur de la police

• Taille de la police

• Interligne

• Souligné

• Barré

• Approche (Illustrator effectue une approche en unités de 1/000 cadratin ; FXG effectue une approche en

pourcentage de la taille d’un point)

• Décalage vertical

• Alignement

• Retrait de 1re ligne à gauche

• Espace avant

• Espace après

• Retrait à gauche

• Retrait à droite

Pour plus d’informations sur l’utilisation de texte dans Flash Catalyst, voir :

« Ajout de texte » à la page 50

« Propriétés de texte » à la page 54

Illustrator : modes de fusion

Tous les modes de fusion disponibles dans Illustrator sont pris en charge par Flash Catalyst.

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Importation d’illustrations

Options de fidélité à l’importation à partir de Photoshop

Photoshop : filtres et effets

Lorsque vous importez un fichier Photoshop, Flash Catalyst pixellise tous les effets des calques d’image, de forme et de texte. Vous pouvez faire appel aux options d’importation avancées de la boîte de dialogue pour définir les options de fidélité de chaque calque. Utilisez les paramètres suivants pour préserver l’aspect de vos illustrations :

• Pour les calques de texte comportant des effets ou des masques : activez les options Contours vectoriels ou Image

bitmap aplatie.

• Pour les masques appliqués au niveau d’un groupe de calques : activez l’option Image bitmap aplatie.

• Pour les modifications d’opacité au niveau d’un groupe de calques : activez l’option Image bitmap aplatie.

Vous pouvez également procéder à l’importation sans aplatir et réinitialiser l’opacité du calque de conception associé dans Flash Catalyst.

• Pour les modes de fusion appliqués au niveau d’un groupe de calques : activez l’option Image bitmap aplatie.

Vous pouvez également importer sans aplatir, grouper les calques correspondants, puis appliquer le mode de fusion au nouveau groupe dans Flash Catalyst.

• Calques de réglage : activez l’option Image bitmap aplatie pour tout calque situé en dessous d’un calque de réglage.

Photoshop : attributs de texte

Les attributs de texte Photoshop pris en charge sont les suivants :

• Interligne

• Crénage (uniquement le crénage automatique par paires)

• Opacité du calque de texte

• Interlettrage

• Décalage vertical

• Souligné

• Tout en capitales

• Retrait de 1re ligne

• Retrait de la marge de gauche

• Retrait de la marge de droite

• Espace avant le paragraphe

• Espace après le paragraphe

• Exposant et indice

Photoshop : modes de fusion

La liste suivante répertorie les modes de fusion Photoshop qui ne sont pas pris en charge par Flash Catalyst :

• Lumière vive

• Lumière linéaire

• Lumière ponctuelle

• Mélange maximal

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Importation d’illustrations

• Couleur plus claire

• Densité linéaire +

• Couleur plus foncée

• Fondu

• Division

Pour plus d’informations sur les modes de fusion dans Flash Catalyst, voir « Modes de fusion » à la page 57.

Dernière mise à jour le 29/4/2010

Chapitre 4 : Espace de travail

L’interface utilisateur Flash Catalyst CS5 comporte deux espaces de travail : Création et Code. Utilisez la liste déroulante des espaces de travail pour basculer de l’un à l’autre.

Espace de travail Création

L’espace de travail Création affiche une représentation graphique de vos pages et états. Cet espace de travail comporte des panneaux et des outils utilisés pour la création des projets et pour leur modification. Utilisez l’outil Main pour agripper le plan de travail et le déplacer de la même manière que si vous utilisiez les barres de défilement. Utilisez l’outil Zoom ou le menu Agrandissement pour modifier l’affichage entre 25 % et 800 % de la taille actuelle. Utilisez l’icône représentant une loupe pour zoomer sur une partie spécifique du plan de travail (appuyez sur la touche Alt (sous Windows) ou Option (sous Mac OS) et cliquez pour effectuer un zoom arrière). Lorsque vous saisissez un terme dans la zone de recherche, le client Adobe Community Help s’affiche. Il donne accès aux ressources en ligne de l’assistance et de la communauté.

C D

F H I

Espace de travail Création

A. Plan de travail B. Barre de navigation C. Outil Main D. Outil Zoom E. Menu Agrandissement F. Affichage tête haute G. Panneau Outils H. Liste déroulante des espaces de travail I. Zone de recherche

Plan de travail Le plan de travail correspond à ce que les utilisateurs voient une fois l’application publiée. Il héberge

les illustrations, les composants interactifs ainsi que d’autres objets constituant l’interface de l’application. Il contient des règles, des grilles et des guides pour le positionnement et l’alignement des éléments. Ces fonctions sont accessibles

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Espace de travail

dans le menu Afficher. Utilisez le menu Modifier pour aligner, regrouper ou organiser (du premier plan vers l’arrièreplan) les objets sur le plan de travail.

Barre de navigation La barre de navigation se situe juste au-dessus du plan de travail et vous indique où vous vous

trouvez dans Flash Catalyst. Elle vous permet par exemple de refermer rapidement un composant ouvert pour revenir au plan de travail principal.

Panneau Pages/Etats Le panneau Pages/Etats affiche une vignette pour chaque page de l’application. Il signale en

outre les différents états d’un composant sélectionné. Vous pouvez dupliquer, supprimer, ajouter et renommer des états de page et de composant en fonction de votre projet. Pour plus d’informations, voir « Pages et états » à la page 20.

Panneau Outils Le panneau Outils comporte des outils pour la création, la sélection et la transformation d’objets, dont

des objets simples tels que des lignes, des formes et du texte.

Panneau Calques Le panneau Calques représente un ensemble organisé des objets de l’application (illustrations,

composants, vidéos et ainsi de suite). Lorsque vous importez un document de conception créé dans Illustrator, Photoshop ou Fireworks, Adobe Flash Catalyst conserve la structure d’origine des calques. Au fur et à mesure que vous ajoutez des états de page et de composant à l’application, vous pouvez en afficher ou masquer les objets dans le panneau Calques. Pour plus d’informations, voir « Calques » à la page 24.

Panneau Bibliothèque Le panneau Bibliothèque affiche la liste complète des graphiques et médias disponibles dans le

projet, y compris les habillages et les composants du projet. Pour plus d’informations, voir « Bibliothèque » à la page 27.

Panneau Composants à structure filaire Les composants à structure filaire sont des composants interactifs prêts à

l’emploi présentant un aspect par défaut simple. Vous pouvez les faire glisser vers le plan de travail et les utiliser en l’état, ou vous pouvez les adapter à l’aspect général de votre application. Pour plus d’informations, voir « Composants » à la page 29.

Panneau Interactions Ajoutez des interactions définissant ce qui se produit lorsque les utilisateurs interagissent avec

l’application. Vous pouvez par exemple créer des interactions définissant la transition d’un état de page ou de composant vers un autre lorsque l’utilisateur clique sur un bouton. Vous pouvez également ajouter des interactions déclenchant la lecture d’animations, contrôlant la lecture de vidéos ou ouvrant une URL. Pour plus d’informations, voir « Interactions » à la page 36« Transitions et séquences d’actions » à la page 38.

Panneau Scénarios Le panneau Scénarios offre des contrôles pour la création de transitions et de séquences d’actions

ainsi que pour leur modification. Il permet également de contrôler la lecture de contenu vidéo et SWF et d’ajouter des effets sonores. Pour plus d’informations, voir « Transitions et séquences d’actions » à la page 38.

Panneau Données en phase de conception Après avoir créé un composant de liste de données, vous pouvez accéder

au panneau Données en phase de conception pour vérifier les données (images et texte) affichées dans la liste de données. Pour plus d’informations, voir « Listes de données et panneaux de défilement » à la page 45.

Panneau Propriétés Le panneau Propriétés permet de modifier les propriétés des objets sélectionnés (graphiques,

texte et composants). Les propriétés disponibles varient en fonction de l’objet sélectionné dans le plan de travail, dans le panneau Calques ou dans le panneau Scénarios.

Affichage tête haute L’affichage tête haute fournit un accès rapide aux principales commandes liées à l’action actuelle

ou à l’objet sélectionné. Il comporte les principales actions que vous pouvez appliquer à un objet sélectionné. L’affichage tête haute est activé par exemple lorsque vous sélectionnez des illustrations sur le plan de travail et permet de convertir une illustration en composant. Faites appel à l’affichage tête haute pour créer rapidement des composants.

Dernière mise à jour le 29/4/2010

Les commandes de l’affichage tête haute varient en fonction du contexte.

UTILISATION DE FLASH CATALYST CS5

Espace de travail

• Si l’affichage tête haute ne s’affiche pas lorsque vous sélectionnez un objet, cliquez sur Fenêtre > Affichage tête

haute.

• Lors de la conversion d’objets en composants, l’affichage tête haute affiche un message lorsque des étapes

supplémentaires sont requises pour achever la création du composant.

• Toutes les fonctionnalités de l’affichage tête haute sont également disponibles dans le menu principal. Vous pouvez

par exemple convertir une illustration en composant en cliquant sur Modifier > Convertir l’illustration en composant.

Faites appel à l’affichage tête haute pour :

• convertir une illustration en composant ou en partie de composant ;

• modifier les parties et les états d’un composant ;

• optimiser les éléments graphiques ;

• rendre les parties d’un composant identiques dans tous les états ou copier les modifications d’un état vers un autre.

A. Affichage tête haute après la sélection d’un nouveau composant de liste de données B. Message relatif au composant

Pour plus d’informations sur l’utilisation de l’affichage tête haute, voir « Composants » à la page 29, « Listes de

données et panneaux de défilement » à la page 45 et « Création de formes, lignes et texte » à la page 49.

Espace de travail Code

L’espace de travail Code affiche le code sous-jacent à l’application. Ce code est automatiquement généré au fur et à mesure de la progression de votre travail dans Flash Catalyst.

Dernière mise à jour le 29/4/2010

UTILISATION DE FLASH CATALYST CS5

Espace de travail

Les applications générées dans Flash Catalyst reposent sur la structure Flex. Flex est une structure « open source » permettant la génération et le déploiement d’applications exécutables dans la plupart des navigateurs et des systèmes d’exploitation. MXML est le langage utilisé par les développeurs pour définir la mise en page, l’aspect et les comportements dans Flex. ActionScript 3.0 est le langage utilisé pour définir la logique de l’application côté client. A la publication du projet Flash Catalyst, les langages MXML et ActionScript sont compilés ensemble dans un fichier SWF.

L’affichage du code MXML permet aux concepteurs de comprendre comment l’application est programmée. L’espace de travail Code est en lecture seule. Pour modifier le code, ouvrez le projet dans Adobe Flash Player. Pour plus d’informations, voir « Intégration dans Flash Builder » à la page 73.

Espace de travail Code

Panneau de code Ce panneau affiche le code MXML.

Panneau Erreurs Ce panneau affiche les erreurs détectées dans le code MXML actuel.

Dans le panneau Erreurs, cliquez deux fois sur une erreur pour la localiser dans le code.

Panneau Navigateur de projet Ce panneau affiche la structure du répertoire du projet Flex ainsi que les fichiers créés

au fur et à mesure de la conception du projet dans Flash Catalyst.

Dernière mise à jour le 29/4/2010

Chapitre 5 : Pages et états

La plupart des applications Internet riches présentent les informations sur plusieurs pages ou écrans, chaque page pouvant comporter différents composants interactifs, tels que des menus de navigation, des panneaux de défilement, des boutons, des contrôles multimédias et ainsi de suite. Les différentes vues auxquelles l’utilisateur a accès lorsqu’il interagit avec l’application et les composants sont appelées « états ». Flash Catalyst CS5 connaît deux types d’état.

Etats de page Ces états correspondent aux différents écrans et pages de l’application et représentent généralement le

niveau supérieur de la hiérarchie de l’application.

Etats de composant Ces états correspondent aux différents états et vues d’un composant interactif (par exemple les

états Haut, Dessus, Bas et Désactivé d’un composant Bouton).

Tous les états de page et de composant Flash Catalyst sont créés, modifiés et gérés dans le panneau Pages/Etats.

Panneau Pages/Etats affichant une application contenant deux états de page

Panneau Pages/Etats affichant les états d’un composant Bouton

Ajout, duplication et suppression de pages et d’états

Chaque nouveau projet Flash Catalyst comporte un seul état de page.

Remarque : si vous importez un fichier Illustrator contenant plusieurs plans de travail, chaque plan de travail est ajouté dans un état de page distinct.

• Pour ajouter une nouvelle page basée sur la page existante, sélectionnez cette dernière dans le panneau Pages/Etats

et cliquez sur Dupliquer l’état.

• Pour créer une nouvelle page vierge (dont tous les calques sont masqués et ne contenant aucun objet), cliquez sur

Nouvel état vierge.

• Pour supprimer une page, sélectionnez-la dans le panneau Pages/Etats et cliquez sur le bouton Supprimer

(représenté par une corbeille).

La duplication d’un état ne se traduit pas par la duplication des objets. Les objets s’affichent dans tous les états. Vous pouvez afficher et masquer les objets dans chaque état en utilisant le panneau Calques.

Dernière mise à jour le 29/4/2010

Les applications et les composants personnalisés ne peuvent avoir plus de 20 états. Une trop grande quantité d’états de page risque de ralentir les performances. Si l’application nécessite plus de 20 états, vous pouvez les encapsuler dans des composants personnalisés. Vous pouvez par exemple encapsuler les barres de menu et les autres composants qui s’affichent sur plusieurs pages.

Outre l’amélioration des performances de l’application, la création des vues de l’application à l’aide de composants personnalisés présente d’autres avantages.

UTILISATION DE FLASH CATALYST CS5

Pages et états

• Un composant personnalisé est plus polyvalent qu’un état de page. Il peut être défini par des propriétés (taille,

position, opacité) qui sont spécifiques à la page ou au composant parent dans lequel il est utilisé.

• Un composant personnalisé peut donner l’impression à l’observateur de visionner une page ou un écran de

l’application différent.

• Les composants peuvent être imbriqués à l’intérieur d’autres composants. L’imbrication de composants permet de

créer une application plus efficace comportant de nombreux états et vues.

• L’édition d’un composant en mode de modification entraîne sa mise à jour dans toute l’application.

Remarque : certains composants ont un nombre défini d’états (par exemple, Haut, Dessus, Bas et Désactivé pour un composant Bouton). Vous ne pouvez ni dupliquer ni supprimer ces états de composant, mais vous pouvez les masquer. Pour ce faire, masquez tous les calques pour l’état sélectionné.

Pour plus d’informations sur la création et la modification des composants, voir :

« Composants » à la page 29

Noms des pages et des états

Pensez aux points suivants lorsque vous décidez d’attribuer un nom à un état de page ou de composant :

• Pour renommer un état de page ou de composant, cliquez deux fois sur son nom dans le panneau Pages/Etats,

saisissez un nouveau nom, puis appuyez sur Entrée (sous Windows) ou Retour (sous Mac OS).

• Les noms d’états doivent commencer par une lettre.

• Les noms d’états ne peuvent pas contenir d’espaces.

• Les noms d’états ne peuvent pas contenir les caractères spéciaux suivants : @!#$%^&*().

Affichage des pages et des états

• Pour afficher le contenu d’une page, sélectionnez-la dans le panneau Pages/Etats. Le plan de travail affiche alors

tous les objets visibles de la page sélectionnée.

• Pour afficher les différents états d’un composant, cliquez deux fois sur le composant dans le plan de travail pour

passer en mode de modification. Lorsque vous éditez un composant en mode de modification, le panneau Pages/Etats affiche les états du composant.

Remarque : lorsque le mode de modification est activé pour un composant, le panneau Calques se divise en deux sections dans lesquelles il affiche les calques respectivement du projet et du composant ouvert. Vous pouvez faire glisser des objets à partir des calques de l’application principale vers le composant.

Pour plus d’informations sur le mode de modification, voir « Mode de modification » à la page 33.

+ 59 hidden pages