ADOBE FLASH CATALYST CS5.5 User Manual

Utilisation d'

ADOBE® FLASH® CATALYST ™ CS5.5

Informations juridiquesInformations juridiques

Pour les informations juridiques, voir http://help.adobe.com/fr_FR/legalnotices/index.html.

Dernière mise à jour le 24/5/2011

Sommaire

Chapitre 1 : Nouveautés dans Flash Catalyst CS5.5

Flux de production concepteur/développeur entre Flash Catalyst CS5.5 et Flash Builder 4.5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Applications et composants redimensionnables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Nouveaux composants et panneau Bibliothèque commune . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Possibilité de modifier l’apparence des composants définis par le développeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Dénomination des composants plus intuitive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Remplacement d’objets sur le plan de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Options d’alignement avancées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Améliorations apportées au scénario de transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Améliorations apportées aux interactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Utilisation des listes de données définies par un développeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Chapitre 2 : Flux de production entre Flash Catalyst CS et Flash Builder

Structure filaire et prototype de flux de production dans Flash Catalyst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Flux de production pour équipe réduite entre Flash Catalyst et Flash Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Flux de production pour équipe nombreuse entre Flash Builder et Flash Catalyst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

iii

Chapitre 3 : Interface utilisateur

Espace de travail Création . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Espace de travail Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

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

Chapitre 4 : Importation d’illustrations

Importation de fichiers Adobe Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Importation de fichiers Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Importation de fichiers FXG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Importation d’images bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Importation de fichiers SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

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

Chapitre 5 : Création de maquettes d’application

Utilisation de composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Utilisation d’espaces réservés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Outils de dessin et de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Dessin de formes et de lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Ajout de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

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

Dimensionnement et rotation des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

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

Chapitre 6 : Composants : blocs de création d’application

Qu’est-ce qu’un composant ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Parties d’habillage et états des composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Création de composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Sommaire

Dénomination de composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Imbrication de composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Modification d’un composant en mode de modification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Autorisation du redimensionnement des composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Chapitre 7 : Redimensionnement d’applications et de composants

Création de composants redimensionnables à l’aide de contraintes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Chapitre 8 : Définition d’une structure avec des états

Types d’états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Utilisation d’états de composant et d’états d’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Etats Ajouter, Dupliquer et Supprimer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Dénomination d’états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Navigation entre les états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Affichage et masquage d’illustrations dans les états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Partage d’objets entre les états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Chapitre 9 : Calques

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

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

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

Chapitre 10 : Définition de la navigation et du comportement à l’aide des interactions

Ajout d’interactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Ciblage d’interactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Interactions Au lancement de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Interactions conditionnelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Interactions de liste conditionnelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Chapitre 11 : Animations

Animations de transitions entre des états d’affichage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Déclenchement d’animations autonomes à l’aide de séquences d’actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Chapitre 12 : Bibliothèques

Bibliothèque commune . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Bibliothèque du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

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

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

Chapitre 13 : Remplacement des illustrations répétées

Création d’une instance d’un composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Remplacement des autres illustrations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Chapitre 14 : Alignement de graphiques

Alignement mutuel de deux objets ou plus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Alignement d’objets sur le plan de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Affichage et masquage des règles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Modification des paramètres de grille et de repère . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Configuration de repères pour le dessin précis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Sommaire

Chapitre 15 : Optimisation des graphiques

Graphiques vectoriels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Graphiques (pixellisés) bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Images intégrées et liées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Conseils d’optimisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Recherche d’informations auprès de la communauté . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Chapitre 16 : Aller-retour de modification d’illustrations

Lancement et modification dans Adobe Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Lancement et modification dans Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

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

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

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

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

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

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

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

Chapitre 18 : Composants habillables personnalisés

Configuration du composant habillable personnalisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Composants habillables personnalisés (avec habillages d’espace réservé) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Composants habillables personnalisés (sans habillages d’espace réservé) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Recherche d’informations auprès de la communauté . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Chapitre 19 : Eléments vidéo et audio

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

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

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

Ajout d’effets sonores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Chapitre 20 : Aperçu et publication

Aperçu de votre projet dans un navigateur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

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

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

Chapitre 21 : Intégration de Flash Catalyst et de Flash Builder

Structure de projet permettant d’assurer la compatibilité avec Flash Catalyst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Vérification de la compatibilité avec Flash Catalyst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Transfert de fichiers entre Flash Builder et Flash Catalyst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Commande Editer le projet dans Flash Catalyst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Chapitre 22 : Raccourcis clavier

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

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

Utilisation des pages et des états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

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

Conversion d’illustrations en composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

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

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Sommaire

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

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

Chapitre 23 : Ressources

Activation et enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

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

Dernière mise à jour le 24/5/2011

Chapitre 1 : Nouveautés dans Flash Catalyst CS5.5

Ce chapitre répertorie les nouvelles fonctionnalités de Flash Catalyst CS5.5.

Flux de production concepteur/développeur entre Flash Catalyst CS5.5 et Flash Builder 4.5

Grâce à Flash Catalyst CS5.et Flash Builder 4.5, vous bénéficiez de flux de production qui facilitent réellement la collaboration concepteur/développeur. Les concepteurs et les développeurs peuvent échanger des fichiers FXP et FXPL utilisables à la fois dans Flash Catalyst et Flash Builder.

Voir « Flux de production entre Flash Catalyst CS et Flash Builder » à la page 4.

Applications et composants redimensionnables

Concevoir des applications adaptées à différentes tailles d’écran représente toujours un défi pour les concepteurs. Flash Catalyst CS5.5 permet aux concepteurs de définir des contraintes qui contrôlent comment les applications et les composants s’adaptent selon la taille et la résolution des différents écrans.

Voir « Redimensionnement d’applications et de composants » à la page 40.

Nouveaux composants et panneau Bibliothèque commune

Les composants permettent aux concepteurs de concevoir rapidement des structures filaires fonctionnelles et interactives, qui pourront être habillées ou modifiées ultérieurement par un développeur. Flash Catalyst CS5.5 comporte de nouveaux composants contenus dans un nouveau panneau Bibliothèque commune.

Voir « Bibliothèque commune » à la page 69.

Possibilité de modifier l’apparence des composants définis par le développeur

Les concepteurs peuvent désormais travailler en détail l’apparence visuelle des composants personnalisés créés par le développeur, sans qu’il soit nécessaire de comprendre le code ou la logique utilisée.

Voir « Composants habillables personnalisés » à la page 91.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Nouveautés dans Flash Catalyst CS5.5

Dénomination des composants plus intuitive

Lorsque vous convertissez une illustration en composant, ou lorsque vous cliquez deux fois sur un composant de la structure filaire afin de l’habiller, celui-ci est ajouté au panneau de la bibliothèque. Dans Flash Catalyst CS5, ces composants étaient nommés de façon automatique (Button1, Button2, etc.). Dans Flash Catalyst CS5.5, chaque fois que vous convertissez une illustration en composant ou que vous tentez d’habiller un composant de la structure filaire, une boîte de dialogue s’affiche et vous invite à nommer le composant. Ainsi, les composants qui apparaissent dans votre bibliothèque sont organisés et possèdent des noms adaptés, ce qui facilite votre travail.

Voir « Dénomination de composants » à la page 34.

Remplacement d’objets sur le plan de travail

Flash Catalyst CS5.5 simplifie l’élaboration de structures filaires fonctionnelles en vous permettant de remplacer facilement des objets sur le plan de travail. Voir « Remplacement des illustrations répétées » à la page 72.

Options d’alignement avancées

Flash Catalyst CS5.5 comporte un nouveau panneau Aligner, semblable à celui figurant dans les autres applications de conception d’Adobe comme Illustrator.

Voir « Alignement de graphiques » à la page 74.

Améliorations apportées au scénario de transitions

Flash Catalyst CS5.5 comprend un panneau Scénario amélioré qui inclut une nouvelle barre dé défilement facilitant la navigation dans les longues transitions.

Voir « Animations » à la page 61.

Améliorations apportées aux interactions

Flash Catalyst CS5.5 vous offre des possibilités d’interactions plus puissantes, dont la possibilité de déclencher des interactions par un clic double et la possibilité de cibler n’importe quel composant au sein de l’application.

Voir « Définition de la navigation et du comportement à l’aide des interactions » à la page 56.

Utilisation des listes de données définies par un développeur

Flash Catalyst CS5 voit l’introduction du panneau Données en phase de conception, qui permet aux concepteurs de créer des jeux de données fictifs afin de simuler une connexion à une source de données. Un développeur peut alors ouvrir le fichier dans Flash Builder 4 et remplacer les données fictives par une connexion à une base de données active.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Nouveautés dans Flash Catalyst CS5.5

Avec Flash Catalyst CS5.5, un concepteur peut désormais récupérer le fichier du développeur, en conservant la connexion de données intacte dans le composant Liste de données et modifier l’apparence visuelle du composant dans Catalyst. A l’exécution du projet dans Flash Catalyst, les données actives réelles seront affichées dans le composant Liste de données.

Voir « Présentation des listes de données » à la page 85.

Dernière mise à jour le 24/5/2011

Chapitre 2 : Flux de production entre Flash Catalyst CS et Flash Builder

Flash Catalyst CS5.5 et Flash Builder 4.5 permettent aux concepteurs et aux développeurs de collaborer et de travailler ensemble sur les projets. Voici des présentations de trois flux de production courants.

Structure filaire et prototype de flux de production dans Flash Catalyst

Ce flux de production présente un ensemble d’étapes courantes que les concepteurs effectuent souvent dans Flash Catalyst et dans d’autres applications CS pour produire des structure filaires et créer rapidement des prototypes d’applications. La participation d’un développeur permet d’étendre les projets Flash Catalyst à l’aide de Flash Builder, par exemple pour connecter une base de données ou des services Web. Les flux de production 2 et 3 indiquent comment les fichiers et parties d’applications, tels que les habillages et les composants, peuvent être échangés entre concepteurs et développeurs.

• Modier en boucle l'illustration dans Illustrator, Photoshop

Concepteur

• Créer une structure laire dans Flash Catalyst

• Importer des conceptions complètes à partir de CS

• Créer et modier les états d'achage

• Modier en boucle l'illustration dans les applications CS

option

option 2

option

• Créer les composants interactifs

• Dénir ou modier les états des composants

option

option 2

option

• Dénir les interactions et les transitions

option

option 2

option

• Acher un aperçu et tester le projet

Publier un prototype

ou étendre dans Builder

Voir les ux de travail 2 ou 3

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 d’une structure filaire ou importation d’une création haute fidélité Créez une structure filaire de la

présentation de l’application à l’aide des outils graphiques de Flash Catalyst, ou importez un composant de création depuis Adobe Illustrator, Photoshop ou Fireworks.

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

que les éléments vidéo et audio supplémentaires de l’application.

Importation d’illustrations, de données vidéo et de données audio 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

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Flux de production entre Flash Catalyst CS et Flash Builder

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 14.

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 modification d’illustrations » à la page 80.

Création et modification des états d’affichage Créez des états en fonction de la spécification du projet. Pour plus

d’informations, voir « Types d’états » à la page 46.

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 Bibliothèque commune 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 « Qu’est-ce qu’un composant ? » à la page 30.

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 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 84.

Création ou modification d’états de composant 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 « Définition de la navigation et du

comportement à l’aide des interactions » à la page 56. Pour plus d’informations sur les transitions, voir « Animations »

à la page 61.

Test du projet Testez fréquemment le projet au cours du développement pour vous assurer du bon fonctionnement

des interactions. Voir « Aperçu de votre projet dans un navigateur Web » à la page 101.

Flux de production pour équipe réduite entre Flash Catalyst et Flash Builder

Pour les projets simples faisant appel à une équipe de une à deux personnes, les fichiers FXP peuvent permettre d’échanger un projet Flex complet entre un concepteur travaillant sur Flash Catalyst et un développeur utilisant Flash Builder. Le format FXP est un format d’archive contenant les dossiers, les fichiers et les métadonnées d’un projet.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Flux de production entre Flash Catalyst CS et Flash Builder

Concepteur

Développeur

• Créer un prototype

• Exporter FXP au développeur

• Importer FXP du concepteur

• Développer la logique applicative, la connectivité aux services Web et de données, une présentation avancée, des composants personnalisés

• Conrmer la compatibilité, exporter au format FXP au concepteur

option

option 2

option

• Importer FXP du développeur

• Créer des habillages, ajouter une interactivité

• Exporter FXP au développeur

option

option 2

option

• Importer FXP du concepteur

• Continuer à développer la logique applicative, la connectivité aux services Web et de données...

• Conrmer la compatibilité...

Publier l'application

Si la même machine est utilisée pour la conception et le développement, utilisez Editer le projet dans Flash Catalyst au lieu d’exporter les données au format FXP pour le flux de travail le plus transparent.

Un fichier FXP contient l’ensemble des ressources nécessaires pour l’utilisation du projet dans Flash Builder. Par l’intermédiaire du fichier FXP, le développeur peut fournir au concepteur des habillages, une présentation de base, l’animation et l’interactivité de base pour le projet.

A l’aide de Flash Builder, le développeur peut ajouter les comportements de logique commerciale, de connectivité de données, de présentation avancée et des composants habillables personnalisés. Il peut renvoyer le fichier FXP au concepteur pour une modification ultérieure des habillages, l’ajout de l’interactivité et de l’animation au fur et à mesure de l’avancement du projet. Le développeur doit assurer en permanence le maintien de la compatibilité avec Flash Catalyst dans le projet. Pour plus d’informations sur la compatibilité de Flash Catalyst dans Flash Builder, voir

Vérification de la compatibilité avec Flash Catalyst.

Si un travail de conception ultérieur s’avère nécessaire, le concepteur peut rouvrir le fichier FXP dans Flash Catalyst et modifier les habillages, la présentation et l’interactivité de base du projet. Il peut ensuite enregistrer le fichier FXP à nouveau et permettre au développeur d’incorporer ces modifications dans le projet à l’aide de Flash Builder.

Remarque : certains composants et autres aspects du projet peuvent être impossibles à modifier dans Flash Catalyst après leur modification dans Flash Builder.

Lorsqu’il est achevé, le projet peut être finalisé et publié dans Flash Builder.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Flux de production entre Flash Catalyst CS et Flash Builder

Flux de production pour équipe nombreuse entre Flash Builder et Flash Catalyst

Pour les projets plus complexes, les développeurs peuvent permettre aux concepteurs de modifier des parties de la création dans Flash Catalyst et déplacer ces parties uniquement dans un projet de bibliothèque Flex. Le développeur peut ensuite référencer le projet de bibliothèque à partir du projet principal, puis exporter le projet de bibliothèque au format FXPL. Le concepteur peut importer le fichier FXPL dans Flash Catalyst, apporter les modifications requises, puis exporter le fichier FXPL pour le renvoyer au développeur.

Concepteur

Développeur

• Importer FXPL du développeur

option

option 2

option

•

Créer des habillages visuels, ajouter une interactivité

• Exporter FXPL au développeur

option

option 2

option

• Créer un projet Flex compatible Flash Catalyst

• Congurer un ou des projets de bibliothèque

• Créer des composants habillables personnalisés ; exporter FXPL au concepteur

Développer la logique applicative, la connectivité aux services Web et de données, une présentation avancée...

• Importer FXPL du concepteur et fusionner les modications

• Créer des bibliothèques et des composants habillables personnalisés supplémentaires

• Conrmer la compatibilité, exporter au format FXPL

• Importer FXPL du développeur

• Créer des habillages et une interactivité supplémentaires

• Exporter FXPL au développeur

option

option 2

option

• Importer FXPL du concepteur et fusionner les modications

• Conrmer la compatibilité... Déployer l'application

Le projet se compose d’un projet principal et de bibliothèques de composants complémentaires. Seules les bibliothèques sont modifiées dans Flash Catalyst. Pour créer une bibliothèque dans Flash Builder, voir Création de projets de bibliothèque Flex. Pour plus d’informations sur l’utilisation de bibliothèques dans Flash Catalyst, voir « Bibliothèques » à la page 69.

Un fichier FXPL est exporté depuis la bibliothèque du projet et contient des informations concernant le composant, nécessaires au développeur pour son utilisation dans Flash Builder. Dans Flash Builder, le développeur intègre le fichier FXPL en tant que partie d’un projet plus important.

Le développeur peut exporter des fichiers FXPL pour les renvoyer au concepteur, sous forme de composants habillables personnalisés modifiables dans Flash Catalyst. Pour plus d’informations sur la création de composants habillables personnalisés dans Flash Builder, voir « Composants habillables personnalisés » à la page 91.

Vous pouvez ensuite importer les ressources de conception dans Flash Builder sous forme de nouveau projet, puis comparer et fusionner les modifications à l’aide des outils de Flash Builder. Pour plus d’informations, voir « Transfert

de fichiers entre Flash Builder et Flash Catalyst » à la page 106.

Si un travail de conception supplémentaire s’avère nécessaire, vous pouvez transmettre les fichiers FXPL sous forme d’allers-retours entre Flash Builder et Flash Catalyst. Assurez vous en permanence de maintenir la compatibilité avec Flash Catalyst dans le projet. Pour plus d’informations sur le maintien de la compatibilité avec Flash Catalyst dans le projet, voir « Vérification de la compatibilité avec Flash Catalyst » à la page 105.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Flux de production entre Flash Catalyst CS et Flash Builder

Vous pouvez ensuite utiliser les outils de Flash Builder pour créer une application entièrement fonctionnelle. Vous pouvez définir les services de données qui extraient les données au moment de l’exécution, puis lier les données renvoyées aux composants visuels de votre projet. Par exemple, lorsque vous cliquez sur un bouton, vous pouvez appeler un composant HTTPService. Le composant peut utiliser des appels de procédure à distance pour interagir avec les environnements de serveur, tels que ColdFusion ou PHP et fournir des données à l’application. Pour plus d’informations, voir Construction d’applications centrées sur les données avec Flash Builder.

Dernière mise à jour le 24/5/2011

Chapitre 3 : Interface utilisateur

L’interface utilisateur Flash Catalyst 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é.

Espace de travail Création A. Outils de vue B. Affichage tête haute C. Liste déroulante des espaces de travail D. Recherche d’aide E. Panneau Etats F. Chemin de navigation du composant G. Plan de travail H. Bibliothèque commune I. Panneau Outils J. Panneau Calques K. Panneau Interactions L. Panneau Propriétés

B C

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 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.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Interface utilisateur

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 Etats Le panneau 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 « Types d’états » à la page 46.

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 à l’application, vous pouvez en afficher ou masquer les objets dans le panneau Calques. Pour plus d’informations, voir « Calques » à la page 53.

Panneau Bibliothèque du projet Le panneau Bibliothèque du projet 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èques » à la page 69.

Panneau Bibliothèque commune La bibliothèque commune contient un ensemble de composants de structure filaire

et d’objets d’espace réservé prêts à l’utilisation avec une apparence simple par défaut. Vous pouvez les faire glisser vers le plan de travail et les utiliser en l’état, ou vous pouvez les adapter à l’aspect de votre application. Pour plus d’informations, voir « Qu’est-ce qu’un composant ? » à la page 30.

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 « Définition de la navigation et du comportement à l’aide des interactions » à la page 56« Animations » à la page 61.

Panneau Aligner Le panneau Aligner contient des contrôles permettant d’aligner, de distribuer et d’harmoniser les

tailles des composants et des objets sur le plan de travail. Pour plus d’informations, voir « Alignement de graphiques » à la page 74.

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 « Animations » à la page 61.

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 84.

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.

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

haute.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Interface utilisateur

• 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.

L’affichage tête haute est actualisé lors de la création d’une liste de composants de liste de données.

Pour plus d’informations sur l’utilisation de l’affichage tête haute, voir « Qu’est-ce qu’un composant ? » à la page 30, « Listes de données et panneaux de défilement » à la page 84 et « Création de maquettes d’application » à la page 18.

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 24/5/2011

UTILISATION DE FLASH CATALYST

Interface utilisateur

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 « Flux de production entre Flash Catalyst CS et Flash Builder » à la page 4.

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.

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 de bibliothèque commune, des outils de dessin et des fonctions pour l’importation de différents médias permettant de créer rapidement un prototype d’interface.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Interface utilisateur

• 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.

L’option de redimensionnement est activée par défaut. Elle permet le redimensionnement du projet en fonction de différentes situations de visualisation. Voir « Redimensionnement d’applications et de composants » à la page 40.

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.

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 14.

Dernière mise à jour le 24/5/2011

Chapitre 4 : 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.

Vous pouvez également sélectionner 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 24/5/2011

UTILISATION DE FLASH CATALYST

Importation d’illustrations

Boîte de dialogue Options d’importation Illustrator

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 dans Flash Catalyst. Si le fichier Illustrator comporte plusieurs plans de travail, les illustrations de chaque plan de travail sont placées dans des états 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.

lors de la création dans Illustrator d’un document destiné à l’importation dans Flash Catalyst, utilisez le profil de document Flash Catalyst. Pour plus d’informations sur les nouveaux profils de documents dans Illustrator, voir A

propos des nouveaux profils de documents.

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.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Importation d’illustrations

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.

Boîte de dialogue Options d’importation Photoshop

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.

Importation de fichiers FXG

Flash Catalyst importe des illustrations au format de fichier FXG, lequel peut être créé par des programmes comme Adobe Fireworks.

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.

Vous pouvez également sélectionner 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.

Importation d’images bitmap

Flash Catalyst accepte les images bitmap enregistrées au format 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.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Importation d’illustrations

• 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 du projet. 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 « Définition de la navigation et du comportement à l’aide des interactions » à la page 56.

• 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 71.

Dernière mise à jour le 24/5/2011

Chapitre 5 : Création de maquettes d’application

Flash Catalyst comprend des outils pour la création rapide de prototypes ou de maquettes d’application. Par exemple, les graphiques d’espace réservé préconstruits permettent d’indiquer rapidement la taille et l’emplacement des médias, des avatars, des cartes, des graphiques, etc. A l’aide des outils de dessin et de texte, vous pouvez rapidement créer et modifier des formes de base et du texte ou modifier et améliorer les composants filaires.

Utilisation de composants

La plupart des maquettes d’application comprennent des composants. Pour plus d’informations sur les composants, voir « Qu’est-ce qu’un composant ? » à la page 30.

Utilisation d’espaces réservés

Le panneau Bibliothèque commune contient un ensemble d’espaces réservés permettant de représenter des objets courants. Dans de nombreux cas, ces espaces réservés sont conservés pendant l’ensemble du travail dans Flash Catalyst et finalement remplacés par un développeur dans Flash Builder. Vous pouvez également les utiliser en tant qu’espaces réservés temporaires pour tester une présentation en attendant les illustrations finales.

Flash Catalyst comprend les espaces réservés suivants :

• Image

• Vidéo

• SWF

• Unité d’annonce - tête de liste (728 x 90)

• Unité d’annonce - gratte-ciel (120 x 600)

• Unité d’annonce - standard (300 x 250)

• Avatar

• Carte

• Graphique à barres

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Création de maquettes d’application

• Graphique à colonnes

• Graphique linéaire

• Graphique à secteurs

Les espaces réservés peuvent être ajoutés au plan de travail en les faisant glisser depuis la bibliothèque commune vers le plan de travail. Vous pouvez remplacer un espace réservé par l’illustration finale à l’aide de la commande Remplacer par. Pour plus d’informations, voir « Remplacement des illustrations répétées » à la page 72.

Outils de dessin et de texte

Les outils de dessin et de texte de Flash Catalyst permettent d’ajouter des éléments simples ne nécessitant pas les fonctionnalités graphiques et textuelles avancées d’Illustrator ou de Photoshop ; ils permettent également de personnaliser les composants filaires intégrés. Les outils de dessin et de texte figurent dans la barre d’outils de dessin de Flash Catalyst.

vous pouvez modifier et améliorer les illustrations créées avec les outils de dessin de Flash Catalyst dans Illustrator ou dans Photoshop. Voir « Aller-retour de modification d’illustrations » à la page 80.

Dessin de formes et de lignes

Barre d’outils Dessin de Flash Catalyst

• Cliquez sur un outil de dessin du panneau Outils pour le sélectionner. Certains outils partagent un emplacement

dans le menu. Pour sélectionner un outil masqué, cliquez avec le bouton de la souris et maintenez-le enfoncé pour ouvrir le menu contextuel, puis sélectionnez un outil.

• Faites glisser l’outil vers le plan de travail pour dessiner une forme.

• Maintenez la touche Maj enfoncée lorsque vous utilisez les outils Rectangle ou Rectangle arrondi pour créer un

carré parfait.

• Pour créer un rectangle avec angles arrondis, utilisez l’outil Rectangle arrondi. Vous pouvez également utiliser

l’outil Rectangle et modifier la valeur Coins dans le panneau Propriétés.

• Maintenez la touche Maj enfoncée lorsque vous utilisez l’outil Ellipse pour dessiner un cercle parfait.

• Faites glisser la souris lorsque vous dessinez des triangles, des hexagones, des octogones et des étoiles pour les faire

pivoter.

• Utilisez l’outil Ligne pour dessiner des lignes. Maintenez la touche Maj enfoncée pour dessiner des lignes

parfaitement horizontales et verticales ou ayant un angle d’exactement 45 degrés.

Voir également « Modification des propriétés de dessin et de texte » à la page 21.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Création de maquettes d’application

Ajout de texte

L’outil Texte vous permet de créer trois types de texte.

Texte de point Ce type de texte ne comporte aucun retour à la ligne automatique. Le champ s’agrandit pour contenir

tout le texte. Pour ajouter une ligne, vous pouvez appuyer sur Entrée (sous Windows) ou Retour (sous Mac) pour insérer un saut de ligne.

Texte captif Le texte captif se trouve dans un cadre de sélection dont la largeur et la hauteur sont fixes. Le texte ne

pourra jamais dépasser la largeur ou la hauteur spécifiée. Il est mis à la ligne automatiquement. Vous pouvez toutefois également ajouter des sauts de ligne manuels. Si l’intégralité du texte n’entre pas dans le cadre de sélection, le texte en surplus est masqué. Une icône d’excédent apparaît sur la ligne inférieure du cadre de sélection. Cliquez sur cette icône pour ajuster automatiquement la hauteur du cadre de sélection.

Ajuster à la hauteur Le texte est placé dans un cadre de largeur fixe mais de hauteur variable. Il ne dépasse pas la

largeur du cadre de sélection et est automatiquement mis à la ligne. Vous pouvez également insérer des sauts de ligne manuels. La hauteur du cadre de sélection est automatiquement adaptée à la quantité de texte saisi.

• Sélectionnez l’outil Texte et cliquez sur le plan de travail ou faites-y glisser le curseur.

• Cliquez avec l’outil Texte sur le plan de travail pour placer le point d’insertion et créer un Texte de point.

• Faites glisser l’outil Texte sur le plan de travail pour créer un Texte captif. Vous pouvez redimensionner un cadre

de sélection de texte de deux manières. Cliquez deux fois à l’intérieur du cadre pour afficher quatre poignées de sélection. Faites glisser les poignées pour redimensionner le cadre. Vous pouvez également utiliser les outils Sélection ou Sélection directe pour sélectionner le cadre du texte. Sélectionnez le cadre pour afficher huit poignées de sélection. Faites glisser les poignées pour redimensionner le cadre.

• Pour modifier le type d’un objet de texte, utilisez les outils Sélection ou Sélection directe pour sélectionner le cadre.

Dans le panneau Propriétés, choisissez Texte de point, Texte captif ou Ajuster à la hauteur.

• Le redimensionnement de texte de type Ajuster à la hauteur le convertit en Texte captif.

Remarque : vous pouvez également copier du texte à partir de sources externes et le coller dans le plan de travail. Le texte copié ne conserve pas sa mise en forme d’origine.

Pour plus d’informations sur la mise en forme de l’aspect du texte, voir « Modification des propriétés de dessin et de

texte » à la page 21.

Sélection et positionnement des objets

• Utilisez l’outil Sélection (représenté par une flèche noire) pour sélectionner et déplacer des objets groupés ou non

groupés.

• Utilisez l’outil Sélection directe (représenté par une flèche claire) pour sélectionner les objets appartenant à un

groupe.

• Faites glisser un objet sélectionné pour le déplacer vers le plan de travail. Pour déplacer un objet le long d’un axe

parfaitement horizontal ou vertical, maintenez la touche Maj enfoncée.

• Sélectionnez un objet et déterminez-en la position précise en modifiant ses valeurs x/y dans le panneau Propriétés.

•

Lorsque vous positionnez des objets sur le plan de travail de l’application principale, les valeurs x et y sont définies par rapport à l’angle supérieur gauche du plan de travail. Les coordonnées de l’angle supérieur gauche sont X:0 et Y:0.

• Lorsque vous positionnez des éléments à l’intérieur d’un composant en mode de modification, les valeurs x et y sont

définies par rapport aux limites du composant.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Création de maquettes d’application

• Dans un groupe d’objets, les positions x et y des enfants sont définies par rapport à l’angle supérieur gauche du

groupe.

Vous pouvez déplacer les objets de 1 pixel vers le haut, le bas, la gauche ou la droite avec les touches fléchées. Le déplacement équivaut à 10 pixels si vous maintenez simultanément la touche Maj enfoncée.

Dimensionnement et rotation des objets

• Lorsque vous sélectionnez un objet, huit poignées de sélection s’affichent. Faites glisser ces poignées pour

dimensionner l’objet verticalement, horizontalement ou diagonalement.

Remarque : vous ne pouvez pas ajouter, supprimer ou modifier les points d’un chemin dans Flash Catalyst. Vous pouvez lancer et modifier l’illustration dans Adobe Illustrator. Pour plus d’informations, voir « Aller-retour de

modification d’illustrations » à la page 80.

• Lorsque vous faites glisser les poignées de sélection d’un objet pour le redimensionner, maintenez enfoncée la

touche Maj pour conserver le rapport hauteur/largeur existant. Maintenez la touche Alt (sous Windows) ou Option (sous Mac) enfoncée pour redimensionner l’objet par rapport à son centre, et non à partir d’un angle ou d’un côté.

• Utilisez l’outil Transformation pour faire pivoter et redimensionner les objets sélectionnés. Sélectionnez d’abord

un objet, puis l’outil Transformation. Pour redimensionner l’objet, faites glisser ses poignées de sélection. Pour faire pivoter un objet, positionnez le curseur sur l’objet et faites glisser la souris. Pour appliquer une rotation par angles de 45 degrés, maintenez simultanément la touche Maj enfoncée. Vous pouvez également utiliser l’outil Rotation pour déplacer le point de transformation, autour duquel l’objet pivote.

• Pour commuter entre les outils Transformation et Sélection, sélectionnez l’outil Transformation, puis appuyez sur

la touche Ctrl (sous Windows) ou Commande (sous Mac).

Pour dimensionner un composant, vous pouvez :

• Dimensionnez chacune de ces parties dans le mode de modification. Voir « Modification d’un composant en mode

de modification » à la page 35.

• Dimensionnez toutes les parties du composants en même temps à l’aide de l’option Modifier dans Adobe Illustrator

CS5. Voir « Lancement et modification dans Adobe Illustrator » à la page 81.

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

Dans le panneau Propriétés, vous pouvez modifier les propriétés des formes, des lignes et du texte.

• Les propriétés affichées varient en fonction de l’élément sélectionné. Certaines propriétés sont propres à un élément

en particulier. D’autres, par exemple Filtres, sont communes à la plupart des objets de Flash Catalyst.

• Lorsque vous sélectionnez un groupe, le panneau affiche les propriétés du groupe, et non de ses enfants.

• Lorsque le curseur de la souris survole une valeur numérique du panneau Propriétés, le curseur prend la forme d’un

doigt pointé surmonté d’une flèche à double pointe. Faites-le glisser horizontalement pour augmenter ou diminuer la valeur. Vous pouvez également cliquer sur la valeur, puis en saisir une nouvelle. Vous pouvez également cliquer deux fois sur la valeur et en saisir une nouvelle.

• Cliquez sur le triangle situé en regard d’une propriété pour en afficher les options avancées, telles que l’opacité du

remplissage ou la rotation du dégradé.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Création de maquettes d’application

Les propriétés Opacité et Rotation sont communes aux formes, aux lignes, au texte ainsi qu’à la plupart des objets Flash Catalyst.

Opacité Vous pouvez définir l’opacité d’un objet sur une valeur comprise entre 0 % et 100 %. Un objet ayant une

opacité de 0 % est transparent.

Rotation Faites pivoter un objet. La valeur applique un angle de rotation compris en 0 et 360 % à la position d’origine

de l’objet. La position d’origine d’une forme, par exemple une étoile, dessinée à un angle précis, est de 0 degré. Utilisez des valeurs négatives pour faire pivoter l’objet dans le sens contraire des aiguilles d’une montre.

Pour plus d’informations sur la copie des propriétés d’un objet vers ses instances dans les autres états, voir « Partage

d’objets entre les états » à la page 52.

Propriétés des formes et des lignes

La plupart des formes et des lignes partagent les mêmes propriétés.

Propriétés des formes et des lignes

Rotation de Appliquez à une ligne un angle de rotation précis par rapport à sa position actuelle. La position obtenue

après rotation devient la nouvelle position d’origine (0 degré).

Coins Ce paramètre vous permet d’arrondir les angles d’un rectangle. Vous pouvez modifier les angles d’un rectangle

ou d’un rectangle arrondi.

Trait et remplissage

L’intérieur d’une forme est désigné par le terme Remplissage ; sa bordure ou son contour par le terme Trait. Vous disposez de trois types : aucun, plein et dégradé linéaire.

• Sélectionnez l’option Plein, Dégradé ou Aucun.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Création de maquettes d’application

• Si vous choisissez l’option Plein, cliquez sur la case du sélecteur de couleurs pour modifier la couleur.

• Si vous sélectionnez plusieurs objets ayant des traits et des remplissages différents, les propriétés n’affichent aucun

trait ni remplissage. Toute modification des propriétés est répercutée sur tous les objets sélectionnés.

Les propriétés de remplissage et de trait sont les suivantes :

Epaisseur Cette option modifie l’épaisseur d’un trait.

Opacité Les propriétés de remplissage et de trait ont leur propre valeur d’opacité, distincte de la valeur d’opacité de

l’objet.

Bouchons : Aucun(e) Le bouchon désigne l’extrémité d’un tracé ouvert. L’option Aucun(e) laisse l’extrémité du tracé

au niveau de celui-ci.

Bouchons : Rond Ajoute des extrémités semi-circulaires qui s’étendent au-delà du tracé d’une longueur équivalant à

la moitié de la largeur du tracé.

Bouchons : Carré Cette option ajoute un bouchon carré au-delà de la fin du tracé, d’une longueur correspondant à la

moitié de la largeur du trait.

Jonctions Une jonction est un emplacement caractérisé par le changement de direction d’une ligne (angle).

Limite de pointe Définissez l’apparence de la pointe d’une jonction.

Utilisation du sélecteur de couleurs

Cliquez sur la case du sélecteur de couleurs des propriétés Remplissage ou Trait pour l’ouvrir. Vous pouvez y sélectionner une couleur ou saisir une valeur hexadécimale. Pour obtenir un plus grand choix de couleurs, faites glisser le curseur (flèche pointant vers la droite) vers le haut ou vers le bas. Sélectionnez une nouvelle plage de couleurs, puis faites glisser le curseur de la souris dans le champ de couleurs pour en choisir une nouvelle. Vous pouvez également prélever un échantillon de couleur dans l’application en utilisant la pipette.

Menu contextuel de sélection des couleurs

La sélection de l’icône de la pipette dans le sélecteur de couleurs active la pipette dans le plan de travail. Une fois cet outil activé, vous pouvez effectuer les opérations suivantes :

• Cliquez sur le plan de travail pour définir comme nuance la couleur que vous avez sélectionnée avec la pipette.

Après avoir prélevé un échantillon de couleur sur le plan de travail, la fenêtre de sélection des couleurs disparaît. L’outil précédemment utilisé est réactivé.

• Cliquez à nouveau sur la pipette pour ne pas fermer la fenêtre de sélection des couleurs et rétablir l’outil

précédemment utilisé.

• Si vous sélectionnez plusieurs objets de différentes couleurs, les propriétés indiquent qu’aucune couleur n’est

appliquée. La sélection d’une couleur dans le nuancier applique la nouvelle couleur à tous les objets sélectionnés.

Dégradés

Lorsque vous sélectionnez l’option de dégradé pour le remplissage ou le trait, un nuancier affiche un aperçu du dégradé de gauche à droite. Un motif en damier indique la présence de zones de transparence. Des taquets interactifs situés sous le nuancier permettent d’interrompre le dégradé.

Dernière mise à jour le 24/5/2011

UTILISATION DE FLASH CATALYST

Création de maquettes d’application

A. Nuancier du dégradé B. Taquets de couleur du dégradé

• Cliquez sur le nuancier pour ajouter un nouveau taquet.

• Cliquez sur un taquet sans le déplacer pour en définir la couleur et l’opacité.

• Faites glisser un taquet pour le déplacer.

• Eloignez par glissement un taquet du nuancier pour l’en supprimer.

Remarque : vous ne pouvez pas supprimer de taquets lorsque le nuancier en compte uniquement deux. Vous pouvez supprimer le premier ou le dernier taquet pour autant que le nuancier comporte d’autres taquets intermédiaires.

• Si vous sélectionnez plusieurs objets possédant des dégradés différents (ou ne possédant aucun dégradé), les

propriétés indiquent qu’aucun dégradé n’est appliqué. Cliquez sur la nuance vierge pour réinitialiser le dégradé par défaut de tous les éléments.

• Le trait ou le remplissage peut passer de plein à dégradé. Dans ce cas, le dégradé part de la couleur d’origine pour

aboutir à la couleur noire. Lors du passage de dégradé à plein, la couleur de départ du dégradé est utilisée comme couleur pleine. Lors du passage d’aucun à dégradé, le dégradé ira de noir à blanc.

• Vous pouvez utiliser la propriété Rotation pour modifier l’angle du dégradé.

Cliquez avec le bouton central de la souris sur le cadran de rotation des propriétés de remplissage du dégradé pour modifier l’angle ou la direction du dégradé de 180 °.

Pour plus d’informations sur la copie des propriétés d’un objet vers ses instances dans les autres états, voir « Partage

d’objets entre les états » à la page 52.

Propriétés de texte

Vous pouvez formater le texte en utilisant les options du panneau Propriétés.

• Pour formater un texte, sélectionnez son cadre de sélection, puis spécifiez ses propriétés dans le panneau Propriétés.

• Pour formater la partie d’un texte, cliquez deux fois à l’intérieur du cadre de sélection et mettez en surbrillance le

texte dont vous souhaitez modifier la mise en forme. Les propriétés définies ne s’appliquent qu’au texte mis en surbrillance.

• Pour modifier la couleur d’un texte, sélectionnez-le et cliquez sur la case du sélecteur de couleurs dans le panneau

Propriétés. Choisissez une autre couleur ou utilisez la pipette pour prélever un échantillon de couleur sur le plan de travail.

Dernière mise à jour le 24/5/2011

+ 92 hidden pages