Manuel du propriétaire | Adobe FLASH CATALYST CS5.5 Manuel utilisateur
Ajouter à Mes manuels122 Des pages
▼
Scroll to page 2
of
122
Utilisation d' ADOBE® FLASH® CATALYST ™ CS5.5 Pour les informations juridiques, voir http://help.adobe.com/fr_FR/legalnotices/index.html. Informations juridiques Dernière mise à jour le 24/5/2011 iii 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 Applications et composants redimensionnables .............................. 1 ........................................................................ 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 Améliorations apportées aux interactions ..................................................................... 2 .............................................................................. 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 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 Importation de fichiers FXG Importation d’images bitmap Importation de fichiers SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Outils de dessin et de texte Dessin de formes et de lignes Ajout de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Création de composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Dernière mise à jour le 24/5/2011 iv UTILISATION DE FLASH CATALYST Sommaire Dénomination de composants Imbrication de composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Modification d’un composant en mode de modification Autorisation du redimensionnement des composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Etats Ajouter, Dupliquer et Supprimer Dénomination d’états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Navigation entre les états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Affichage et masquage d’illustrations dans les états Partage d’objets entre les états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Interactions conditionnelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Exportation et importation d’un package de bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Alignement d’objets sur le plan de travail Affichage et masquage des règles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Modification des paramètres de grille et de repère Configuration de repères pour le dessin précis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Dernière mise à jour le 24/5/2011 v UTILISATION DE FLASH CATALYST Sommaire Chapitre 15 : Optimisation des graphiques Graphiques vectoriels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Graphiques (pixellisés) bitmap Images intégrées et liées Conseils d’optimisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Contrôle de la lecture de la vidéo Ajout d’effets sonores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Optimisation des performances de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Chapitre 21 : Intégration de Flash Catalyst et de Flash Builder Structure de projet permettant d’assurer la compatibilité avec Flash Catalyst Vérification de la compatibilité avec Flash Catalyst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Transfert de fichiers entre Flash Builder et Flash Catalyst Commande Editer le projet dans Flash Catalyst Chapitre 22 : Raccourcis clavier Affichage et exploration du plan de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 vi UTILISATION DE FLASH CATALYST Sommaire Utilisation du panneau Propriétés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Utilisation des transitions et des séquences d’actions Chapitre 23 : Ressources Activation et enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Services, téléchargements et extras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Dernière mise à jour le 24/5/2011 1 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 2 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 3 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 4 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. • Modifier en boucle l'illustration dans Illustrator, Photoshop Concepteur option option option option 2 option option 2 option option 2 option Publier un prototype ou étendre dans Builder • Créer une structure filaire dans Flash Catalyst ou • Importer des conceptions complètes à partir de CS • Créer et modifier les états d'affichage • Créer les composants • Définir les interactions • Afficher un aperçu interactifs et les transitions et tester le projet • Modifier en boucle l'illustration dans les applications CS • Définir ou modifier les états des composants Voir les flux 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 5 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 6 UTILISATION DE FLASH CATALYST Flux de production entre Flash Catalyst CS et Flash Builder Concepteur • Créer un prototype • Importer FXP du développeur • Exporter FXP au développeur option option 2 option • Créer des habillages, ajouter une interactivité • Exporter FXP au développeur Développeur option option 2 option Publier l'application • Importer FXP du concepteur • 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 • Continuer à développer la logique applicative, la connectivité aux services Web et de données... • Confirmer la compatibilité... • Confirmer la compatibilité, exporter au format FXP au concepteur 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 7 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 option option 2 option • Importer FXPL du développeur • Importer FXPL du développeur • Créer des habillages visuels, ajouter une interactivité • Créer des habillages et une interactivité supplémentaires • Exporter FXPL au développeur • Exporter FXPL au développeur Développeur option option 2 option option option 2 option • Créer un projet Flex compatible Flash Catalyst • Importer FXPL du concepteur et fusionner les modifications • Importer FXPL du concepteur et fusionner les modifications • Configurer un ou des projets de bibliothèque • Créer des bibliothèques et des composants habillables personnalisés supplémentaires • Confirmer la compatibilité... • Créer des composants habillables personnalisés ; exporter FXPL au concepteur Déployer l'application • Confirmer la compatibilité, exporter au format FXPL Développer la logique applicative, la connectivité aux services Web et de données, une présentation avancée... 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 8 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 9 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é. A B C D I E J F K G L H 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 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 10 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 11 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 12 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 13 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 14 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. 4 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 15 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 16 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. 4 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. 2 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 17 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 18 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 19 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 20 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 21 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 22 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 23 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 24 UTILISATION DE FLASH CATALYST Création de maquettes d’application A B 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 25 UTILISATION DE FLASH CATALYST Création de maquettes d’application Propriétés de texte Les propriétés suivantes sont propres au texte : Police Modifiez la police et le style (gras et italique, par exemple). Les cinq premières polices répertoriées sont des « polices Web » ne pouvant pas être incorporées dans une application. Taille Sélectionnez la taille du texte (valeur comprise entre 1 et 720 points). Souligné Appliquez au texte un soulignement. Barré Formatez le texte de manière telle à ce qu’il apparaisse barré. Alignement Alignez le texte dans le cadre de sélection en choisissant l’une des options disponibles (Gauche, Droite, Centre, Justifié). Décalage vertical Définissez la position du texte par rapport à sa ligne de base en choisissant l’une des options disponibles (Aucun, Exposant, Indice). Crénage Ajoutez un espace prédéfini entre deux caractères afin d’en améliorer la lisibilité. Hauteur de la ligne Réglez l’espacement entre chaque ligne du texte. Vous pouvez définir une valeur en pixels ou un pourcentage par rapport à la taille actuelle de la police. Interlettrage L’interlettrage diffère du crénage en ce qu’il ajuste l’espacement pour des groupes de lettres ou des blocs entiers de texte. Utilisez ce paramètre pour modifier l’aspect général et la lisibilité du texte, le rendant plus aéré ou au contraire plus dense. Marge Ajoutez de l’espace entre le texte et la bordure du cadre de sélection. Dernière mise à jour le 24/5/2011 26 UTILISATION DE FLASH CATALYST Création de maquettes d’application Filtres Les filtres ne sont pas spécifiques aux formes, aux lignes ou au texte. Vous pouvez appliquer les mêmes filtres à des images bitmap, à des composants ou à des lecteurs vidéo. Vous pouvez également appliquer des filtres à des groupes. Dans ce cas, le filtre est appliqué à tous les enfants du groupe sans distinction. Ajout de filtres Le panneau Filtres permet d’appliquer les filtres suivants : Flou, Ombre portée, Ombre intérieure, Biseau, Lueur et Lueur intérieure. • Cliquez sur le bouton Ajouter un filtre (représenté par un signe plus), puis sélectionnez un filtre. • Une fois le filtre appliqué, des paramètres supplémentaires s’affichent dans le panneau Propriétés. • Vous pouvez appliquer plusieurs filtres au même objet. L’ordre d’application des filtres dans Flash Catalyst a une incidence sur l’aspect final des filtres combinés. • Pour supprimer un filtre, cliquez sur le bouton de suppression (la croix « x » entourée d’un cercle). Remarque : vous ne pouvez pas animer les modifications apportées aux filtres. Propriétés du filtre Ombre portée Propriétés des filtres Couleur Sélectionnez une couleur pour le filtre. Cliquez sur la case du sélecteur de couleurs pour l’ouvrir et choisissez une couleur. Vous pouvez également sélectionner la pipette pour prélever un échantillon de couleur dans le plan de travail. Distance Définissez la distance à laquelle une ombre portée ou une lueur s’étendent au-delà du bord de l’objet. Définissez la distance à laquelle un flou s’étend à l’intérieur d’un objet à partir de son bord. Définissez la dimension d’un bord en biseau. Angle Modifiez l’angle auquel une ombre portée ou un biseau s’étendent par rapport à l’objet. Vous pouvez modifier la direction de laquelle la lumière semble provenir en adaptant la distance et l’angle du filtre Ombre portée. Flou Ajoutez un flou pour atténuer l’effet d’un filtre. Opacité Modifiez l’opacité pour donner au filtre un aspect plus réaliste. Intensité L’augmentation de l’intensité accroît la visibilité du filtre, au risque toutefois de le rendre moins réaliste. Dernière mise à jour le 24/5/2011 27 UTILISATION DE FLASH CATALYST Création de maquettes d’application Masquage Le masquage dissimule l’objet d’origine et n’affiche que les parties qui auraient été visibles si l’objet l’avait également été. Masquer l’objet Ce paramètre dissimule l’objet d’origine et affiche le filtre, y compris les parties qui seraient masquées si l’objet était visible. L’activation de ce paramètre n’a aucun effet lorsque le paramètre Masquage est également sélectionné. Remarque : un bogue connu provoque une erreur de dimensionnement des effets de filtre par rapport à leur objet lorsque vous modifiez l’agrandissement. La pixellisation de l’objet peut entraîner le décalage de la position du filtre. Les effets sont affichés correctement lorsque l’agrandissement est défini sur 100 %. Ils le sont également à la publication de l’application. Modes de fusion Les modes de fusion déterminent comment les objets multicalques sont fusionnés. Lorsque vous examinez l’effet d’un mode de fusion, pensez en termes de couleurs : • La couleur de base est la couleur d’origine de l’image. • La couleur de fusion est la couleur appliquée au calque qui se trouve au-dessus de cette image. • La couleur finale est la couleur résultant de la fusion. A B C Comparaison entre un objet supérieur avec mode de fusion Normale (à gauche) et mode de fusion Lumière crue (à droite) A. Couleurs de départ des objets sous-jacents avec une opacité de 100 % B. Couleur de fusion de l’objet supérieur C. Couleurs d’arrivée après application du mode de fusion Lumière crue à l’objet supérieur Descriptions de mode de fusion Sélectionnez Mode de fusion dans la section Aspect du panneau Propriétés. Normal Applique à la sélection la couleur de fusion, sans interaction avec la couleur de base. Il s’agit du mode par défaut. Obscurcir Sélectionne la couleur de base ou de fusion (la plus sombre des deux) comme couleur finale. Les zones plus claires que la couleur de fusion sont remplacées. Les zones plus foncées que la couleur de fusion restent inchangées. Produit Multiplie la couleur de base par la couleur de fusion. La couleur d’arrivée est toujours plus foncée. Le produit d’une couleur quelconque par le noir rend du noir. Le produit d’une couleur quelconque par le blanc n’a aucune incidence sur la couleur. Cet effet équivaut à dessiner sur une page à l’aide de plusieurs marqueurs magiques. Densité couleur + Assombrit la couleur de base de sorte à refléter la couleur de fusion. La fusion avec du blanc ne produit aucun effet. Soustraction Analyse les informations chromatiques de chaque calque et soustrait la couleur de fusion de la couleur de base. Dans les images 8 et 16 bits, les valeurs négatives obtenues sont écrêtées à zéro. Dernière mise à jour le 24/5/2011 28 UTILISATION DE FLASH CATALYST Création de maquettes d’application Eclaircir Analyse les informations chromatiques de chaque calque et sélectionne la couleur de base ou de fusion (la plus claire) comme couleur finale. Les pixels plus foncés que la couleur de fusion sont remplacés, et les pixels plus clairs demeurent intacts. Superposition Multiplie l’inverse des couleurs de dégradé et de départ. La couleur d’arrivée est toujours plus claire. Une superposition avec le noir n’a aucune incidence sur la couleur. Une superposition avec le blanc produit du blanc. Cet effet équivaut à projeter plusieurs images diapositives les unes sur les autres. Densité couleur - Eclaircit la couleur de base de sorte à refléter la couleur de fusion. La fusion avec du noir ne produit aucun effet. Ajouter Analyse les informations chromatiques de chaque calque et éclaircit la couleur de base pour reproduire la couleur de fusion par augmentation de la luminosité. La fusion avec du noir ne produit aucun effet. Incrustation Multiplie ou superpose les couleurs, selon la couleur de base. Les motifs ou les couleurs s’incrustent sur l’image existante, conservant les tons clairs et les tons foncés de la couleur de base tout en mélangeant la couleur de fusion afin de refléter la luminosité ou l’obscurité de la couleur d’origine. Lumière tamisée Assombrit ou éclaircit les couleurs, selon la couleur de fusion. L’effet est semblable à la projection d’une lumière diffuse sur l’illustration. Si la couleur de fusion (source lumineuse) contient moins de 50 % de gris, l’illustration est éclaircie comme si elle était estompée. Si elle contient plus de 50 % de gris, l’illustration est assombrie comme si elle était surexposée. Lorsque vous dessinez avec un noir ou un blanc pur, vous obtenez une zone nettement plus foncée ou plus claire, mais vous n’obtenez ni un noir ni un blanc pur. Lumière crue Multiplie ou superpose les couleurs, selon la couleur de fusion. L’effet est semblable à la projection d’une lumière de projecteur crue sur l’illustration. Si la couleur de fusion (source lumineuse) contient moins de 50 % de gris, l’illustration est éclaircie comme si elle était filtrée. Ce mode est idéal pour ajouter des tons clairs à l’illustration. Si elle contient plus de 50 % de gris, l’illustration est assombrie comme si elle était multipliée. Ce mode est idéal pour ajouter des ombres à l’illustration. Lorsque vous peignez avec un noir ou un blanc pur, vous obtenez un noir pur ou un blanc pur. Différence Soustrait la couleur de fusion à la couleur de base ou la couleur de base à la couleur de fusion, selon la couleur ayant une luminosité supérieure. La fusion avec du blanc inverse les valeurs de la couleur de base. La fusion avec du noir ne produit aucun effet. Exclusion Produit un effet semblable au mode Différence avec un moindre contraste. La fusion avec du blanc inverse les composants de la couleur de base. La fusion avec du noir ne produit aucun effet. Inverser Inverse les couleurs de base et de fusion. Teinte Crée une couleur finale avec la luminance et la saturation de la couleur de base et la teinte de la couleur de fusion. Saturation Crée une couleur finale avec la luminance et la teinte de la couleur de base et la saturation de la couleur de fusion. Ce mode ne produit aucun effet sur une zone dont la saturation est nulle (grise). Couleur Crée une couleur finale avec la luminance de la couleur de base et la teinte et la saturation de la couleur de fusion. Ce mode conserve les niveaux de gris de l’illustration. Il est idéal pour colorer les images monochromes et teinter les images couleur. Luminosité Crée une couleur finale avec la teinte et la saturation de la couleur de base et la luminance de la couleur de fusion. Ce mode produit l’effet inverse du mode Couleur. Couleur plus claire Compare la somme de toutes les valeurs des couleurs de dégradé et de départ et affiche la couleur présentant la valeur la plus élevée. Le mode Couleur plus claire ne génère pas une troisième couleur, issue de la fusion Eclaircir. Il choisit les valeurs les plus élevées des couleurs de base et de fusion afin de créer la couleur finale. Dernière mise à jour le 24/5/2011 29 UTILISATION DE FLASH CATALYST Création de maquettes d’application Couleur plus foncée Compare la somme de toutes les valeurs des couleurs de dégradé et de départ et affiche la couleur présentant la valeur la plus faible. Le mode Couleur plus foncée ne génère pas une troisième couleur, issue de la fusion Obscurcir. Il choisit les valeurs les plus faibles des couleurs de base et de fusion afin de créer la couleur finale. Copier alpha (si isolé) S’applique à un alpha ou un masque de transparence. Effacer alpha (si isolé) Supprime tous les pixels de couleur de base, dont les couleurs de l’image d’arrière plan. Remarque : les modes de fusion Copier alpha et Effacer alpha fonctionnent uniquement à l’intérieur d’un composant dont le mode de fusion est défini sur Isolé. Dernière mise à jour le 24/5/2011 30 Chapitre 6 : Composants : blocs de création d’application Qu’est-ce qu’un composant ? Les composants sont les éléments fondamentaux de tout projet Flash Catalyst. Tous les contrôles visuels de l’application, tels que les boutons, les menus et les barres de défilement sont des composants. Tout élément de l’application destiné à une interaction avec l’utilisateur est un composant. Lors de la création d’un composant, vous définissez une combinaison d’éléments visuels et de comportements interactifs pouvant être réutilisée au sein d’une application. Les composants représentent également une manière de regrouper des éléments de l’application afin de faciliter leur gestion et leur modification. Parties d’habillage et états des composants Tous les composants sont constitués de parties d’habillage et d’états. Les parties d’habillage définissent les aspects visuels du composant. Certains composants sont limités à une seule partie, d’autres peuvent présenter de nombreuses parties. Certaines de ces parties peuvent être obligatoires et doivent être spécifiées lors de chaque utilisation du composant, alors que d’autres peuvent être facultatives. Un bouton, par exemple, présente à la fois une étiquette obligatoire (le texte affiché par le bouton) et une forme facultative utilisée comme arrière-plan. Les barres de défilement présentent un curseur obligatoire (déplacé par les utilisateur pour effectuer le défilement) et une piste obligatoire (barre parcourue par le curseur). Elles comportent également des flèches facultatives aux deux extrémités. Les composants de type personnalisé/générique comportent toujours une seule partie : l’illustration utilisée pour la création du composant. Les états définissent l’aspect du composant lors de l’interaction avec l’utilisateur. Sur le plan conceptuel, les états de composant sont identiques aux états d’application. Voir « Types d’états » à la page 46 pour plus d’informations générales sur les états. Certains composants présentent un ensemble d’états prédéfinis non modifiables. C’est le cas par exemple d’un bouton, qui présente les états Haut, Dessus, Bas et Désactivé. Les composants du type personnalisé/générique présentent un seul état lors de leur création, mais vous pouvez librement ajouter des états au besoin. Ce bouton présente une partie obligatoire : Etiquette, et quatre états : Haut, Dessus, Bas et Désactivé. Dernière mise à jour le 24/5/2011 31 UTILISATION DE FLASH CATALYST Composants : blocs de création d’application Ce champ de recherche présente deux parties : Affichage d’invite et Affichage de texte, et quatre états : Normal, Désactivé, Invite normale et Invite désactivée. Cette barre de défilement présente quatre parties : Curseur, Piste, Bouton gauche, Bouton droit, et trois états : Normal, Désactivé et Inactif. Cette liste de données présente une partie : Elément répété, et deux états : Normal et Désactivé. Création de composants Création d’instances de composants A chaque fois que vous faites glisser un composant à partir de la bibliothèque du projet ou de la bibliothèque commune, ou que vous convertissez une illustration en composant, vous créez une instance du composant. Les composants peuvent être créés directement dans Flash Catalyst, exister au préalable dans la structure Flex ou être mis à disposition par un développeur. Pour plus d’informations sur la création d’instances à partir de la bibliothèque du projet, voir « Bibliothèque du projet » à la page 69. Dernière mise à jour le 24/5/2011 32 UTILISATION DE FLASH CATALYST Composants : blocs de création d’application Vous pouvez convertir vos propres illustrations en composant personnalisé/générique ou les utiliser comme habillage pour un composant Flex existant. Voir « Création d’un composant à partir d’une illustration propre » à la page 32 pour obtenir des informations détaillées sur la création de composants personnalisés/génériques. Vous pouvez créer des instances de composants qui existent dans la structure Flex, disposant d’un aspect prédéfini, en les faisant glisser depuis la bibliothèque commune. Voir « Insertion de composants Flex depuis le panneau Bibliothèque commune » à la page 33 pour plus d’informations. Création d’un composant à partir d’une illustration propre Vous pouvez utiliser vos propres illustrations pour créer un composant personnalisé/générique ou comme habillage pour un composant de la structure Flex. Lors de la conversion d’une illustration en composant personnalisé/générique, Flash Catalyst regroupe les objets sélectionnés en un nouveau composant. Lors de la conversion de votre propre illustration en composant Flex, l’illustration est appliquée comme habillage du composant. Le composant est ajouté à la bibliothèque du projet et s’affiche dans la catégorie Composants du panneau Bibliothèque du projet. Flash Catalyst remplace automatiquement l’illustration par une instance du composant. Le composant fait maintenant partie de votre application. Vous pouvez en partager l’instance avec d’autres états. L’instance du composant est également représentée dans le panneau Calques. Pour convertir une illustration en composant : 1 Dans le panneau Calques ou le plan de travail, sélectionnez les objets que vous souhaitez convertir en composant. 2 Dans l’affichage tête haute, cliquez sur Choisir un composant et sélectionnez un type de composant. Vous pouvez sélectionner l’un des types Flex existants ou le composant personnalisé/générique. Remarque : certains projets comprennent des composants habillables personnalisés, répertoriés au bas de la liste déroulante des types de composants de l’affichage tête haute. Pour plus d’informations, voir « Composants habillables personnalisés » à la page 34. Dernière mise à jour le 24/5/2011 33 UTILISATION DE FLASH CATALYST Composants : blocs de création d’application 3 Dès lors que vous sélectionnez le type de composant, l’affichage tête haute est modifié afin de vous permettre de basculer vers le mode de modification pour ce composant. Voir « Modification d’un composant en mode de modification » à la page 35. • Pour baser un composant sur un autre, cliquez avec le bouton droit de la souris sur le nom du composant dans le panneau Bibliothèque du projet et cliquez sur Dupliquer. • Pour renommer un composant dans le panneau Bibliothèque du projet, cliquez avec le bouton droit de la souris sur le nom du composant et sélectionnez Renommer. Vous pouvez également cliquer deux fois sur le nom du composant. Saisissez un nouveau nom et appuyez sur Entrée (sous Windows) ou Retour (sous Mac OS). Les noms des composants peuvent contenir uniquement des lettres, des chiffres et des traits de soulignement. Ils ne peuvent être attribués qu’une seule fois dans le projet et ne peuvent commencer que par une lettre ou un trait de soulignement. lorsque vous créez un composant à partir d’une illustration partagée entre plusieurs états, vous perdez les propriétés spécifiques aux états ou les effets de transition associés à cet élément lors de la création du composant. Il est préférable de définir la structure des composants avant de créer des transitions. Si vous prévoyez de convertir des illustrations en composants, évitez de les partager avec d’autres états avant d’avoir créé les composants. Insertion de composants Flex depuis le panneau Bibliothèque commune La bibliothèque commune affiche des composants Flex préconstruits disponibles pour votre application. Certains de ces composants disposent d’habillages pouvant être modifiés dans Flash Catalyst, désignés par une icône de crayon dans le panneau. D’autres ne comportent aucun habillage pouvant être modifié dans Flash Catalyst. Vous pouvez faire glisser les deux types de composants sur le plan de travail afin de les utiliser dans votre application. Remarque : le panneau Bibliothèque commune contient également un ensemble d’espaces réservés distincts des composants, correspondant plutôt à des images pour la structure filaire d’éléments d’interface communs. Voir « Utilisation d’espaces réservés » à la page 18. Voici les composants dont vous pouvez modifier les habillages : Bouton Permet d’ajouter au projet une interaction utilisateur de base. Case à cocher Utilisée dans un groupe de sélections dont l’utilisateur peut sélectionner zéro options ou plus. Liste de données Ensemble d’éléments présentés dans une liste à défilement. Barre de défilement horizontale Ajoute une barre de défilement horizontale à un autre composant afin de permettre son défilement. Curseur horizontal Un curseur horizontal permet à l’utilisateur d’effectuer son choix dans une plage de valeurs prédéfinie. Bouton radio Permet de présenter à l’utilisateur un ensemble d’options mutuellement exclusives. Entrée texte Champ de texte simple permettant à l’utilisateur de saisir des valeurs. Dernière mise à jour le 24/5/2011 34 UTILISATION DE FLASH CATALYST Composants : blocs de création d’application Bouton bascule Présente une fonctionnalité semblable au bouton, mais le bouton bascule conserve l’aspect « sélectionné » jusqu’à la sélection d’un autre bouton du même groupe. Barre de défilement verticale Identique à la barre de défilement horizontale, mais d’orientation verticale. Curseur vertical Identique au curseur horizontal, mais d’orientation verticale. Voici les composants dont les habillages ne peuvent pas être modifiés : Barre de boutons Ensemble de boutons bascule, généralement utilisé pour la navigation de site. Liste déroulante Liste déroulante permettant aux utilisateurs de sélectionner une option dans une liste de valeurs fournies, ou de saisir leur propre valeur. Déroulant Liste dans laquelle les utilisateurs peuvent effectuer leur choix dans un ensemble de valeurs fournies. Liste numérique Permet aux utilisateurs de sélectionner une valeur numérique en saisissant un numéro ou en parcourant une plage de valeurs à l’aide des flèches. Barre d’onglets Ensemble d’onglets, généralement utilisé pour la navigation de site. Composants habillables personnalisés Les développeurs peuvent créer dans Flash Builder des composants avec des états et des parties prédéfinis. Vous pouvez ensuite utiliser Flash Catalyst pour définir l’aspect et l’ergonomie de ces composants habillables personnalisés. Pour plus d’informations, voir « Composants habillables personnalisés » à la page 91. Dénomination de composants Au final, vos composants doivent être référencés ou modifiés par un développeur Flex dans Flash Builder. Par conséquent, il est important de nommer les composants au fur et à mesure de leur création, avec des noms faciles à comprendre pour le développeur. Voici quelques bonnes pratiques pour la dénomination : • Attribuez à chaque composant un nom clair, représentant son utilisation. Plutôt que Bouton, donnez à un élément de navigation le nom BoutonAccueil. Un composant de liste de données personnalisé devrait être nommé ListeEquipe plutôt que ListeDonnées42. • Dans Flex, tous les composants natifs utilisent une structure de casse nommée Pascal, dans laquelle tous les noms à un seul mot portent une majuscule. Les noms à plusieurs mots sont combinés en un seul mot et la première lettre de chaque mot est une majuscule. Puisque la majorité des développeurs Flex utilise cette méthode de dénomination par habitude, il est conseillé de faire de même. Ainsi, utilisez Fans au lieu de fans et DistributionEtEquipe au lieu de distributionetéquipe. • Communiquez avec votre développeur. Si vous ne trouvez pas de nom adapté pour un composant, demandez à votre développeur. La communication est essentielle pour optimiser le flux de production entre vous et le développeur. Imbrication de composants Les composants peuvent être imbriqués à l’intérieur d’autres composants. Par exemple, après la création de composants personnalisés/génériques, vous pouvez inclure d’autres composants tels que les boutons, entrées de texte, barres de défilement ou même d’autres composants personnalisés/génériques. Dernière mise à jour le 24/5/2011 35 UTILISATION DE FLASH CATALYST Composants : blocs de création d’application Certains composants nécessitent l’imbrication d’autres composants en leur sein afin d’obtenir le comportement souhaité. Par exemple, afin de créer une liste de données ou un panneau avec une barre de défilement, vous devez inclure un composant de barre de défilement dans la définition. Dans cet exemple, un composant nommé « TabsListSkin » est imbriqué dans un composant nommé « MenuBar », à son tour imbriqué dans un composant nommé « ContentSection ». En double-cliquant sur un composant sur le plan de travail, vous pouvez accéder à l’intérieur des composants imbriqués ; en cliquant sur le nom dans le chemin de navigation, vous pouvez naviguer en arrière et sortir des composants imbriqués. Modification d’un composant en mode de modification Après avoir ajouté un composant au plan de travail, vous pouvez l’éditer en mode de modification, puis en modifier les différentes parties. Les changements apportés à des parties de composant en mode de modification s’appliquent à toutes les instances du composant dans tous les états. Les propriétés appliquées dans chaque état (par exemple l’opacité) sont conservées. Tous les composants, à l’exception des composants génériques/personnalisés, présentent un ensemble d’états prédéfinis non modifiables. Les composants du type personnalisé/générique ne présentent aucun état prédéfini et vous pouvez librement ajouter des états au besoin. 1 Sélectionnez le composant que vous souhaitez modifier. Si le type de composant présente des parties obligatoires devant être spécifiées, l’affichage tête haute affiche un message indiquant que vous devez spécifier des parties et présente un bouton permettant de basculer en mode de modification afin de définir les parties. Si le composant ne comporte aucune partie obligatoire ou si les parties obligatoires ont déjà été définies, l’affichage tête haute liste les états du composant sous forme de boutons. En cliquant sur l’un des boutons d’état, vous pouvez accéder au mode de modification. Dans l’affichage tête haute, sélectionnez l’état que vous voulez modifier ou cliquez sur Modifier des parties ou Modifier l’apparence. Remarque : vous pouvez également cliquer deux fois sur un composant pour accéder au mode de modification ou sélectionner Modifier > Modifier le composant. Flash Catalyst bascule en mode de modification, qui se traduit par la mise en grisé de l’arrière-plan. Les états du composant s’affichent dans le panneau Etats. La barre de navigation affiche le nom du composant ouvert. Le panneau Calques est subdivisé en sections. La section supérieure affiche les calques du composant en cours de modification. En dessous, une ou plusieurs sections affichent les calques de l’application principale et les composants parents éventuels. Vous pouvez faire glisser des objets d’une section à l’autre. Dernière mise à jour le 24/5/2011 36 UTILISATION DE FLASH CATALYST Composants : blocs de création d’application Barre de navigation 2 Utilisez le panneau Calques pour masquer ou afficher une illustration dans chaque état. Lorsqu’un composant est en mode de modification, vous pouvez : • Vous pouvez dupliquer des états, ajouter de nouveaux états vierges ou supprimer des états dans le panneau Etats si vous modifiez un composant personnalisé/générique. • modifier si nécessaire l’illustration dans chaque état en utilisant les outils de dessin et le panneau Propriétés. Vous pouvez par exemple modifier la taille, le trait, le remplissage et l’opacité d’une forme ainsi que d’autres parties du composant. 3 Quittez le mode de modification en appuyant sur la touche Echap ou en cliquant sur le nom de l’application dans la barre de navigation située au-dessus du plan de travail. Vous pouvez également double-cliquer sur la zone en grisé du plan de travail ou sélectionner Modifier > Quitter le mode de modification. Le déplacement des parties d’un composant qui se trouve en mode de modification est susceptible d’entraîner son redimensionnement. Lorsque l’option Redimensionner les limites du composant automatiquement du menu Modifier est cochée, les limites du composant sont automatiquement redimensionnées dans tous les états. Lorsque cette option n’est pas activée, vous pouvez sélectionner Ecrêter selon les limites du composant dans le menu Modifier. L’option Ecrêter selon les limites du composant écrête toute partie dépassant le composant. Dernière mise à jour le 24/5/2011 37 UTILISATION DE FLASH CATALYST Composants : blocs de création d’application Modification de définitions et instances de composants Il est important de noter que la modification d’un composant en mode de modification concerne la définition correspondante. Toutes les modifications apportées à la définition affectent l’ensemble des instances de ce composant dans l’application. Vous pouvez changer certaines propriétés des instances individuelles des composants, telles que la taille et la position, sans modifier la définition correspondante, en sélectionnant simplement l’instance sur le plan de travail et en apportant les modification nécessaires. Définition des propriétés d’instance Les composants présentent un ensemble de propriétés modifiables dans le panneau Propriétés, telles que leur position sur le plan de travail, leur opacité et leur rotation. A A. Lorsqu’un composant de liste de données est sélectionné sur le plan de travail, le panneau Propriétés permet la modification d’un ensemble de propriétés. Pour modifier les propriétés d’un composant, sélectionnez le composant dans le plan de travail et modifiez ses propriétés dans le panneau Propriétés. Lorsque vous appliquez des propriétés aux composants, les modifications ne s’appliquent qu’à l’état actuel. Vous ne modifiez pas le composant proprement dit ; vous appliquez uniquement ces propriétés à cette instance dans cet état. Pour appliquer les mêmes propriétés à la même instance dans tous les autres états, sélectionnez le composant sur le plan de travail, puis Etats > Rendre identique dans tous les autres états. Pour apporter d’autres modifications s’appliquant à toutes les instances du composant, modifiez le composant à l’aide du mode de modification. Les changements apportés à un composant en mode de modification s’appliquent à toutes les instances dans tous les états. Voir « Modification d’un composant en mode de modification » à la page 35. Les propriétés d’un composant sont les suivantes : Accepte les événements de souris Cette option rend un objet visible à la souris. Si vous désélectionnez l’option Accepte les événements de souris, les événements de la souris sont transmis à l’élément suivant dans l’ordre des calques. La modification de ce paramètre n’entraîne pas celle de l’affichage du composant. Dernière mise à jour le 24/5/2011 38 UTILISATION DE FLASH CATALYST Composants : blocs de création d’application Transparence accepte la souris Les zones situées à l’intérieur des limites d’un composant ou d’un groupe transparent réagissent aux événements de la souris (survols et clics). La zone réactive à la souris est toujours un rectangle (elle ne suit pas les contours des pixels opaques). Dans la plupart des cas, les objets situés en dessous de la zone transparente ne répondent plus aux survols et aux clics de la souris car ils sont bloqués par le groupe ou composant transparent qui les recouvre. Supposons que vous avez créé une liste de texte dont l’image d’arrière-plan s’étend sur l’ensemble de la zone de la liste. Pour que la liste soit visible, les différents éléments de la liste (éléments répétés) doivent avoir un arrière-plan transparent. Cochez la case « Transparence accepte la souris » pour permettre à l’utilisateur de cliquer à tout endroit de la liste pour la sélectionner (sans être limité au texte opaque). Index de tabulation Cette option contrôle l’ordre des éléments lorsque l’utilisateur actionne la touche de tabulation pour déplacer le focus du clavier. Les nombres faibles placent l’élément en début de séquence. La valeur -1 définit un ordre par défaut basé sur l’ordre du panneau Calques. Focus par tabulation Cette option active le déplacement du focus sur le composant par tabulation. Lorsque cette case n’est pas sélectionnée, l’actionnement de la touche de tabulation ne permet pas de déplacer le focus sur le composant. Dans ce cas, l’utilisateur doit cliquer sur le composant pour lui donner le focus. Info-bulle Saisissez le texte qui s’affiche en info-bulle lorsque l’utilisateur interagit avec le composant. Afficher comme mot de passe Cette option remplace le contenu des champs de texte par des astérisques. Modifiable Lorsque cette option est désactivée, le texte d’un composant Entrée texte peut être sélectionné mais ne peut pas être modifié. Caractères max. Cette option redimensionne automatiquement le composant Entrée texte de manière à accepter le nombre de caractères spécifié. Cette propriété s’applique uniquement aux composants d’entrée de texte à structure filaire qui n’ont pas été redimensionnés manuellement. Index sélectionné L’élément sélectionné par défaut dans une liste. Le premier élément est 0, le deuxième est 1, et ainsi de suite. La valeur -1 indique l’absence de sélection. Anneau de sélection La couleur du contour ou de la mise en surbrillance d’un composant qui a le focus. Curseur en forme de main Une main avec un doigt pointé s’affiche lorsque la souris survole l’objet. Texte accessible Le texte décrivant l’objet pour les lecteurs d’écran. Groupe de boutons radio Vous ne pouvez sélectionner qu’un seul bouton radio à l’intérieur d’un groupe. Les boutons radio dont cette propriété porte le même nom appartiennent à un même groupe. Ils appartiennent également au même groupe lorsqu’ils sont regroupés dans un même composant ou lorsqu’ils sont regroupés au niveau de l’application. Format de page Cette option spécifie la distance de déplacement d’un curseur dans une barre de défilement lorsque l’utilisateur clique dans le rail de la barre. Taille d’étape Cette option spécifie la distance de déplacement d’un curseur dans une barre de défilement lorsque l’utilisateur clique sur les flèches de la barre. Dans un curseur horizontal/vertical, ce paramètre définit la distance de déplacement lorsque l’utilisateur appuie sur les touches fléchées. Intervalle d’alignement Ce paramètre définit la progression par incréments du curseur le long de la barre de défilement, par opposition à un déplacement fluide. Les paramètres Format de page et Taille d’étape sont toujours des multiples de l’intervalle d’alignement. Pour plus d’informations sur la définition des propriétés des objets, voir : « Modification des propriétés de dessin et de texte » à la page 21 Dernière mise à jour le 24/5/2011 39 UTILISATION DE FLASH CATALYST Composants : blocs de création d’application Redimensionnement des définitions de composants Si vous redimensionnez un composant lors de la modification de sa définition, vous redimensionnez toutes les instances de ce composant. Si toutes les instances du composant présentent la taille d’origine, indiquant que vous n’avez modifié aucune instance manuellement, elles seront simplement redimensionnées pour correspondre à la nouvelle définition du composant. Si toutefois certaines instances du composant ont été redimensionnées ou contraintes des deux côtés sur le plan de travail, Flash Catalyst affiche une boîte de dialogue indiquant que vous avez redimensionné des instances lorsque vous quittez le mode de modification. Dans ce cas, les instances ne sont pas redimensionnées ; au lieu de cela, l’illustration dans le composant est redimensionnée. Par exemple, prenons un bouton dont la largeur initiale est de 100 pixels. Vous placez une instance de ce bouton sur le plan de travail et conservez la taille initiale. Ensuite, vous placez une seconde instance que vous redimensionnez avec une taille de 200 pixels à l’aide de l’outil Transformation manuelle ou du panneau Propriétés. Ensuite, vous doublecliquez sur l’une des instances pour accéder au mode de modification. En mode de modification, vous ajoutez une illustration qui augmente la largeur par défaut du bouton à 250 pixels. Lorsque vous quittez le mode de modification, une boîte de dialogue s’affiche, indiquant que vous avez modifié la taille. La première instance du bouton, ayant conservé la taille initiale, est simplement étendue à 250 pixels. En revanche, le second bouton conserve la taille définie (200 pixels) et l’illustration dans le bouton est compressée dans la largeur inférieure. Ce même problème se produit si vous effectuez un déplacement ou une rotation d’une illustration dans la définition d’un composant, impliquant une modification de la taille globale de l’illustration. Flash Catalyst affiche un cadre de sélection indiquant les dimensions globales de l’illustration, afin de vous permettre de visualiser, en mode de modification, si les modifications apportées affectent les dimensions et sont à l’origine de ce comportement. Si certaines instances de composants apparaissent déformées suite au redimensionnement de la définition, vous pouvez sélectionner l’illustration et cliquer sur le bouton Réinitialiser à la taille par défaut du panneau Propriétés pour redimensionner l’instance conformément à la taille de la définition. Autorisation du redimensionnement des composants Vous pouvez rendre les composants redimensionnables afin que les instances individuelles du composant puissent exister avec des tailles différentes et pour que les composants puissent être redimensionnés de manière dynamique afin de s’adapter à différentes tailles d’écran. Pour plus d’informations, voir « Redimensionnement d’applications et de composants » à la page 40. Dernière mise à jour le 24/5/2011 40 Chapitre 7 : Redimensionnement d’applications et de composants Flash Catalyst permet de créer des applications capables de s’adapter à différentes tailles d’écran ou à un redimensionnement de l’écran par l’utilisateur. Les composants contenus dans l’application peuvent être configurés pour une mise à l’échelle dynamique en cas de redimensionnement de l’application. Afin de configurer une application pour le redimensionnement, effectuez l’une des opérations suivantes : • sélectionnez la case à cocher Redimensionnable dans la boîte de dialogue Nouveau projet ; • accédez à Modifier > Paramètres du plan de travail et sélectionnez la case à cocher Redimensionnable. Lors du travail sur une application redimensionnable, vous pouvez tester son aspect à différentes tailles en faisant glisser le curseur d’aperçu dans le coin inférieur droit du plan de travail. Déplacement du curseur de redimensionnement dans le coin inférieur droit d’une application redimensionnable. Dernière mise à jour le 24/5/2011 41 UTILISATION DE FLASH CATALYST Redimensionnement d’applications et de composants Test de l’application redimensionnable Création de composants redimensionnables à l’aide de contraintes Les composants peuvent être redimensionnés à l’aide de la définition de contraintes. Une contrainte attache un côté particulier du composant au côté de son parent, ce qui implique sa mise à l’échelle en cas de redimensionnement du parent. Les composants peuvent être contraints à leurs parents. Lors de la modification de l’application principale, les composants correspondant à des enfants directs du plan de travail affichent des poignées de contrainte lorsqu’ils sont sélectionnés sur le plan de travail. Lors de la manipulation d’un composant en mode de modification, les composants correspondant à des enfants directs du composant modifié affichent ces poignées. Cliquez sur la poignée de contrainte correspondant au côté sur lequel vous voulez définir la contrainte. Vous pouvez définir des contraintes sur autant de côtés que nécessaire. Pour définir rapidement des contraintes sur l’ensemble des quatre côtés, cliquez avec le bouton droit sur le composant et sélectionnez Ajouter des contraintes à tous les objets sélectionnés. Dernière mise à jour le 24/5/2011 42 UTILISATION DE FLASH CATALYST Redimensionnement d’applications et de composants Sélection d’une poignée de contrainte d’un composant sur le plan de travail. Le côté droit de ce composant est désormais attaché (contraint) au bord droit de l’application parent. Vous pouvez supprimer une contrainte en cliquant sur la poignée de contrainte à l’endroit où elle touche le composant parent. Vous pouvez supprimer toutes les contraintes en une seule fois en cliquant sur le composant avec le bouton droit et en sélectionnant Supprimer les contraintes, ou en sélectionnant Contraintes > Tout supprimer à partir du menu Modifier. Dernière mise à jour le 24/5/2011 43 UTILISATION DE FLASH CATALYST Redimensionnement d’applications et de composants La plupart des contraintes redimensionnent le composant en fonction de la position du bord du composant par rapport au bord du parent. Il s’agit dans ce cas d’une contrainte fixe. Toutefois, vous pouvez également utiliser des contraintes de centre qui fixent le centre du composant, impliquant le déplacement du composant si son parent est redimensionné, mais pas sa mise à l’échelle. Vous pouvez modifier une contrainte en contrainte de centre en cliquant avec le bouton droit sur une poignée de contrainte et en sélectionnant Centre. La ligne de contrainte affiche un ressort. A Les contraintes de centre sur un composant sont indiquées par un ressort. Redimensionnement de composants sans contrainte Si vous redimensionnez manuellement sur le plan de travail un composant dont les enfants n’ont pas de contraintes définies, le cadre de sélection du composant est redimensionné, mais les enfants ne changent ni de taille, ni d’emplacement. L’affichage tête haute affiche un message, indiquant que le contenu du composant est de taille fixe et que pour rendre le contenu redimensionnable vous devez le modifier et appliquer des contraintes. Pour plus d’informations sur la modification des composants, voir « Modification d’un composant en mode de modification » à la page 35. Redimensionnement de groupes Une contrainte portant sur un groupe définit la position du groupe par rapport à son parent au lieu de sa taille. Les groupes ne peuvent pas comporter de contraintes sur des côtés opposés. Par exemple, si vous définissez une contrainte sur le côté gauche d’un groupe, puis tentez de définir une contrainte sur le côté droit, la contrainte gauche est automatiquement supprimée. Vous pouvez toutefois ajouter une contrainte sur le haut ou le bas, mais pas les deux. Pour rendre un groupe redimensionnable, vous devez le dissocier et le convertir en composant personnalisé. Pour plus d’informations sur la création de composants personnalisés, voir « Création d’un composant à partir d’une illustration propre » à la page 32. Vous ne pouvez pas définir de contraintes sur les enfants d’un groupe. Si vous sélectionnez un élément d’un groupe à l’aide de l’outil Sélection directe, il n’affiche pas de poignées de contrainte. Utilisation de mises en page gérées Vous pouvez déléguer la gestion de la présentation d’un groupe à la structure Flex en sélectionnant l’une des quatre options de la section Présentation du panneau Propriétés. Dernière mise à jour le 24/5/2011 44 UTILISATION DE FLASH CATALYST Redimensionnement d’applications et de composants Quatre instance d’un composant de bouton ont été regroupées pour former cette présentation gérée. Leur présentation est contrôlée par les options du panneau Propriétés. Utilisation de l’option de mosaïque pour contrôler la présentation du groupe. Absolue Option de présentation par défaut, permettant de déplacer et de positionner librement les éléments dans le groupe. Verticale Les éléments dans le groupe sont disposés verticalement. Le panneau Propriétés comporte un paramètre permettant de modifier l’espacement entre les éléments ou la marge autour de chaque élément. Horizontale Les éléments dans le groupe sont disposés horizontalement. Le panneau Propriétés comporte un paramètre permettant de modifier l’espacement entre les éléments ou la marge autour de chaque élément. Dernière mise à jour le 24/5/2011 45 UTILISATION DE FLASH CATALYST Redimensionnement d’applications et de composants Mosaïque Les éléments dans le groupe sont disposés en mosaïque. Le panneau Propriétés comporte des options permettant d’ajuster la direction de juxtaposition, l’alignement des éléments dans chaque cellule, ainsi que l’espacement horizontal et vertical. Remarque : lors de la sélection de l’option Verticale, la hauteur de tous les éléments est convertie en pourcentage afin d’assurer une hauteur égale pour l’ensemble des éléments. Avec l’option Horizontale, les largeurs sont converties en pourcentages. Si vous souhaitez obtenir des hauteurs ou largeurs différentes pour les éléments, vous devez ouvrir le projet dans Flash Builder et modifier le code directement. Après avoir appliqué à un groupe la présentation gérée verticale, horizontale ou en mosaïque, vous ne pouvez plus sélectionner des éléments individuels du groupe. Les enfants du groupe restent affichés sur le panneau Calques, mais une icône supplémentaire indique qu’ils font partie d’une présentation gérée. Vous pouvez sélectionner un calque du groupe, mais le panneau Propriétés reste vide car vous ne pouvez pas modifier l’élément. Vous pouvez réorganiser l’ordre de superposition des éléments du groupe, mais vous ne pouvez pas faire glisser un calque en-dehors du groupe. Dernière mise à jour le 24/5/2011 46 Chapitre 8 : Définition d’une structure avec des états Types d’états La plupart des projets d’application que vous générez nécessitent plusieurs vues pour l’affichage d’informations. Les « états » désignent les différentes vues affichées par un utilisateur lors de la navigation dans l’application, ou en cliquant sur un élément interactif (tel qu’un bouton) dans l’application. Il existe deux types d’états : Etats d’application : Un projet simple peut comporter une vue affichée par défaut lors de l’exécution du projet et une vue distincte qui affiche un formulaire permettant à l’utilisateur de saisir des données. Ce projet comporte deux vues définies comme états d’application : normal et uploadForm. Vous contrôlez ce qui s’affiche dans un état en activant et désactivant les calques dans le panneau Calques. Dernière mise à jour le 24/5/2011 47 UTILISATION DE FLASH CATALYST Définition d’une structure avec des états Dans le panneau Etats, cliquez sur une vignette pour sélectionner l’état correspondant ; puis utilisez le panneau Calques pour modifier ce qui s’affiche dans l’état sélectionné. Etats de composant. En reprenant l’exemple précédent, un état d’affichage sous forme de formulaire peut comprendre des boutons interactifs permettant de déclencher le téléchargement du contenu. Ces composants de bouton peuvent également disposer d’états, aussi appelés états de composant, qui définissent l’aspect du bouton à un moment donné, généralement en lien avec un événement de souris ou une autre interaction utilisateur. Ce bouton interactif nommé « highlightButtonSkin » possède quatre états de composant : Haut, Dessus, Bas et Désactivé. Pour modifier l’aspect de l’état Bas, par exemple, sélectionnez l’état, puis les objets à modifier et ajustez les valeurs dans le panneau Propriétés. Dernière mise à jour le 24/5/2011 48 UTILISATION DE FLASH CATALYST Définition d’une structure avec des états Utilisation d’états de composant et d’états d’application Une bonne pratique consiste à générer la plus grande partie possible de l’application à l’aide d’états de niveau composant au lieu d’états de niveau application. Généralement, vous obtenez des applications plus efficaces et plus performantes en encapsulant des vues et des fonctionnalités uniques de l’application dans des états de niveau composant. Etats d'application composant personnalisé Etats des composants composant Button Vous pouvez utiliser des composants personnalisés/génériques pour créer des états de niveau composant. Dernière mise à jour le 24/5/2011 49 UTILISATION DE FLASH CATALYST Définition d’une structure avec des états performances supérieures 2 états d'application composant personnalisé 1 composant personnalisé 2 9 états d'application composant personnalisé 1 16 états d'application performances inférieures L’utilisation d’un nombre réduit d’états de niveau application permet d’optimiser les performances. Pour maintenir un niveau de performances acceptable, Flash Catalyst accepte au maximum 20 états de niveau application dans un projet. Vous pouvez toutefois générer des applications efficaces comportant plus de 20 états au total à l’aide des composants personnalisés/génériques. Les composants de type personnalisé/générique peuvent également contenir jusqu’à 20 états. Par conséquent, avec moins d’états de niveau application et plus de composants personnalisés/génériques, vous obtenez un nombre supérieur de vues uniques dans l’application, tout en conservant une structure efficace. Pour plus d’informations sur la définition d’états de composant de forme libre à l’aide des composants personnalisés/génériques, voir « Création d’un composant à partir d’une illustration propre » à la page 32. Etats Ajouter, Dupliquer et Supprimer Tous les états d’application et de composant Flash Catalyst sont créés, modifiés et gérés dans le panneau Etats. Chaque nouveau projet Flash Catalyst comporte un seul état. Dernière mise à jour le 24/5/2011 50 UTILISATION DE FLASH CATALYST Définition d’une structure avec des états Remarque : si vous importez un fichier Illustrator contenant plusieurs plans de travail, chaque plan de travail est ajouté dans un état distinct. • Pour ajouter un nouvel état basé sur l’état existant, sélectionnez ce dernier dans le panneau Etats et cliquez sur Dupliquer l’état. • Pour créer un nouvel état vierge (dont tous les calques sont masqués et ne contenant aucun objet), cliquez sur Nouvel état vierge. • Pour supprimer un état, sélectionnez-le dans le panneau 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. Les applications et les composants personnalisés ne peuvent avoir plus de 20 états. Une trop grande quantité d’états 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 états. Outre l’amélioration des performances de l’application, la création de différentes vues de l’application à l’aide de composants personnalisés présente d’autres avantages. • Un composant personnalisé est plus polyvalent qu’un état. Il peut être défini par des propriétés (taille, position, opacité) qui sont spécifiques à l’état ou au composant parent dans lequel il est utilisé. • Un composant personnalisé peut donner l’impression à l’observateur de visionner un état 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 : « Qu’est-ce qu’un composant ? » à la page 30 Dénomination d’états Pensez aux points suivants lorsque vous décidez d’attribuer un nom à un état d’application ou de composant : • Pour renommer un état de page ou de composant, cliquez deux fois sur son nom dans le panneau 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 de caractères spéciaux comme par exemple @!#$%^&*(). Dernière mise à jour le 24/5/2011 51 UTILISATION DE FLASH CATALYST Définition d’une structure avec des états Navigation entre les états • Pour afficher le contenu d’un état, sélectionnez-la dans le panneau Etat. 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 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 « Modification d’un composant en mode de modification » à la page 35. Affichage et masquage d’illustrations dans les états Lorsque vous importez un document de conception, l’illustration est ajoutée à un état dans Flash Catalyst. Pour ajouter des objets supplémentaires à une page, exécutez l’une des opérations suivantes : • Importez une nouvelle illustration. • Faites glisser des ressources du panneau Bibliothèque vers le plan de travail. • Créez de nouveaux objets avec les outils de dessin Flash Catalyst. Pour plus d’informations sur les outils de dessin, voir « Création de maquettes d’application » à la page 18. Lorsque vous ajoutez des objets à un état, ces objets sont présents et existent dans cet état. Un objet présent peut être affiché ou masqué. Les informations suivantes permettent de déterminer la présence et la visibilité des objets dans l’état actuel en utilisant le panneau Calques. Présent et visible Le nom de l’objet est affiché en caractères noirs (l’objet est présent) et l’icône en forme d’œil est noire (l’objet est visible). Présent et masqué Le nom de l’objet est affiché en caractères noirs (l’objet est présent), mais l’icône en forme d’œil n’est pas affichée (l’objet est masqué). Si l’icône en forme d’œil apparaît en grisé, l’objet est visible mais son calque parent est masqué. Les enfants d’un calque ou d’un groupe parent masqué le sont également. Absent Le nom de l’objet s’affiche en caractères grisés (l’objet est absent). L’objet est absent de l’état actuel mais se trouve sur au moins un autre état de l’application. Procédez comme suit pour afficher ou masquer des objets dans un état. • Activez ou désactivez l’icône en forme d’œil pour afficher ou masquer un objet. Cette icône est un bouton bascule. Dans le panneau Calques, cliquez sur la colonne d’affichage/de masquage (à l’extrême gauche) d’un objet pour activer ou désactiver sa visibilité. • Désactivez l’icône en forme d’œil d’un calque ou d’un groupe parent pour en masquer tous les enfants. • Sélectionnez un objet et cliquez sur Supprimer pour retirer l’objet de l’état actuel. Si l’objet existe dans d’autres états, son nom s’affiche en grisé dans le panneau Calques. Si l’objet n’existe dans aucun autre état, il disparaît du panneau Calques. • Activez l’icône en forme d’œil pour partager l’objet avec l’état actuel lorsque son nom est affiché en grisé. Dernière mise à jour le 24/5/2011 52 UTILISATION DE FLASH CATALYST Définition d’une structure avec des états • Dans le panneau Calques, sélectionnez un objet et cliquez sur le bouton Supprimer (représenté par une corbeille) pour le retirer de tous les états ainsi que du panneau Calques. Remarque : modifiez la valeur du paramètre Opacité dans le panneau Propriétés pour rendre un objet invisible ou partiellement transparent. Pour plus d’informations sur le panneau Calques, voir « Calques » à la page 53. Partage d’objets entre les états Un même objet peut apparaître dans différents états. Un objet peut avoir différentes propriétés (taille, position, couleur et transparence) en fonction de l’état dans lequel il se trouve. Dans la plupart des cas, les modifications apportées à un objet ne s’appliquent qu’à l’état actuel. Après avoir positionné et modifié l’objet conformément à vos besoins, vous pouvez rapidement le partager, lui et ses propriétés, avec d’autres états. Cette technique permet de créer des transitions régulières d’un état à l’autre. Vous pouvez par exemple appliquer à un objet un effet de fondu en entrée ou en sortie ou un effet de transformation (d’une forme ou d’une position vers une autre). • Pour partager un objet avec d’autres états, sélectionnez l’objet, puis cliquez sur Etats > Partager avec l’état. Sélectionnez les états avec lesquels vous souhaitez partager l’objet. • Pour supprimer un objet d’un état spécifique, sélectionnez-le dans l’un des états dans lequel il se trouve et cliquez sur Etats > Supprimer de l’état. Sélectionnez l’état dont vous voulez le supprimer. • Pour rendre un objet identique dans tous les états, modifiez-en les propriétés, puis sélectionnez Etats > Rendre identique dans tous les autres états. Remarque : certaines modifications s’appliquent à tous les états. Toute modification ayant une incidence sur la hiérarchie de l’application est automatiquement partagée avec tous les états. Si vous groupez par exemple des objets ou convertissez des objets en composants, les modifications apportées s’appliquent à tous les états. L’édition d’un composant en mode de modification entraîne celle de la définition du composant dans la bibliothèque du projet. Les modifications s’appliquent à toutes les instances du composant dans tous les états. Pour plus d’informations sur les composants, voir « Définition des propriétés d’instance » à la page 37. Pour plus d’informations sur les transitions, voir « Animations » à la page 61. Dernière mise à jour le 24/5/2011 53 Chapitre 9 : Calques Le panneau Calques donne accès à quelques fonctions principales. Il fournit une structure organisée pour l’affichage et la gestion des objets de l’application (ou d’un composant ouvert en mode de modification). Il indique également quels objets se trouvent dans l’état actuel et y sont visibles. La page ou l’état actuel est signalé dans le panneau Pages/Etats. Voir « Affichage et masquage d’illustrations dans les états » à la page 51. A B C D E F G H Panneau Calques A. Afficher/Masquer B. Verrouiller/Déverrouiller C. Calque sélectionné D. Carré bleu signalant la présence d’objets sélectionnés E. Objet absent de l’état sélectionné F. Créer un nouveau calque G. Créer un sous-calque H. Supprimer le calque Organisation d’un projet à l’aide des calques Le panneau Calques affiche tous les objets de l’application dans une série de lignes empilées. Les lignes peuvent représenter des calques, des sous-calques, des objets (images, formes, textes et composants) et des groupes (objets groupés). L’icône en forme d’œil située sur la gauche de la ligne signale que l’objet est visible dans la page ou l’état actuel. Lorsque l’icône en forme d’œil s’affiche en grisé, la ligne est visible, mais le calque ou le groupe parent est masqué dans l’état actuel. Les objets qui n’existent pas dans l’état actuel s’affichent en grisé sans icône en forme d’œil. Les objets qui existent dans l’état actuel mais y sont masqués s’affichent normalement sans icône en forme d’œil. Une icône en forme de cadenas dans la deuxième colonne d’une ligne signale que l’objet est verrouillé. Un calque verrouillé peut être visionné mais ne peut pas être modifié. Le verrouillage des calques permet d’éviter la sélection ou le déplacement accidentel de contenu. Le calque cible destiné à accueillir le contenu que vous ajoutez au plan de travail apparaît sur fond bleu clair. La ligne ou l’objet sélectionné apparaît sur un fond d’un bleu légèrement plus foncé. Le petit carré bleu signale que la ligne contient un objet sélectionné. Vous pouvez vous baser sur l’emplacement de ces carrés pour trouver l’élément sélectionné. Dernière mise à jour le 24/5/2011 54 UTILISATION DE FLASH CATALYST Calques Remarque : Si vous travaillez sur un projet qui a été modifié ou créé par un développeur dans Flash Builder, il peut arriver que des calques comportant des objets dont la visibilité est définie par code ActionScript puissent être affichés ou masqués selon les actions de l’utilisateur. Dans ce cas, Catalyst affichera une icône dans la colonne Verrouiller, indiquant que la visibilité de ces éléments est définie par du code. • Pour développer ou réduire un calque ou un groupe, cliquez sur la petite flèche. • Pour renommer la ligne représentant un calque, un objet ou un groupe, cliquez deux fois sur le nom actuel, saisissez le nouveau nom et appuyez sur la touche Entrée (sous Windows) ou Retour (sous Mac OS). • Pour ajouter un calque, cliquez sur le bouton Créer un calque ou Créer un sous-calque. • Vous pouvez supprimer un calque, un objet ou un groupe de tous les états de l’application. Pour ce faire, sélectionnez-en la ligne et cliquez sur le bouton Supprimer (représenté par une corbeille) dans le panneau Calques. L’objet est supprimé de chaque état. Terminologie du panneau Calques de Flash Catalyst La liste suivante établit les correspondances terminologiques entre les calques Flash Catalyst et les calques Illustrator, Photoshop et Fireworks. • Un claque Flash Catalyst est l’équivalent d’un calque Illustrator, d’un groupe de calques Photoshop et d’un dossier de calques Fireworks. • Un objet Flash Catalyst est l’équivalent d’un objet Illustrator, d’un calque Photoshop et d’un calque Fireworks. Sélection d’objets dans le panneau Calques Le plan de travail et le panneau Calques vous permettent de sélectionner des calques, des objets ou des groupes (ou objets groupés). • Pour sélectionner un seul objet, cliquez sur sa ligne dans le panneau Calques. Remarque : utilisez les outils Sélection ou Sélection directe pour sélectionner un objet ou un groupe dans le plan de travail. • Tout en maintenant la touche Maj enfoncée, cliquez sur des objets du panneau Calques pour en sélectionner une suite consécutive. • Pour sélectionner des objets non consécutifs, cliquez tout en maintenant enfoncée la touche Ctrl (sous Windows) ou la touche Commande (sous Mac). Remarque : cliquez tout en maintenant la touche Maj enfoncée pour sélectionner plusieurs objets dans le plan de travail. • La sélection d’un calque dans le panneau Calques englobe tous les sous-calques qu’il comporte. • La sélection d’un groupe dans le panneau Calques se limite à cet objet uniquement. Les propriétés du groupe s’affichent dans le panneau Propriétés. • Pour sélectionner les enfants d’un groupe individuellement, sélectionnez chaque ligne correspondante dans le panneau Calques. Remarque : utilisez l’outil Sélection directe pour sélectionner les enfants d’un groupe dans le plan de travail. Dernière mise à jour le 24/5/2011 55 UTILISATION DE FLASH CATALYST Calques Gestion des illustrations à l’aide des calques Lorsque vous importez un document de conception créé dans Adobe Illustrator, Photoshop ou Fireworks (FXG), Flash Catalyst conserve la conception d’origine. Une fois les illustrations organisées en calques, vous pouvez commencer à créer les différents composants, états de composants et pages de l’application. Utilisez le panneau Calques pour déterminer quelle illustration est visible, masquée ou présente sur chaque page. • Cliquez sur l’icône en forme d’œil pour masquer ou afficher un objet dans l’état actuel. Un objet masqué demeure présent dans l’état actuel mais n’y est plus visible. • Pour supprimer un objet de l’état actuel, sélectionnez-le et appuyez sur la touche Supprimer. L’objet disparaît de l’état actuel. S’il existe encore dans un autre état, son nom apparaît en grisé dans le panneau Calques. Vous pouvez le ramener sur l’état actuel en cliquant sur le bouton d’affichage et de masquage qui lui correspond. • Vous pouvez utiliser les illustrations dans plusieurs calques pour créer des composants interactifs, tels qu’un bouton ou une barre de défilement. Les composants peuvent avoir différents états, tels que Haut, Dessus, Bas et Désactivé. Lorsque vous modifiez un composant en mode de modification, le panneau Calques se développe et affiche les objets se trouvant dans le composant sélectionné. Utilisez le panneau Calques pour masquer ou afficher les illustrations dans chaque état d’un composant. • Lorsque vous modifiez une illustration dans un état de page ou de composant, tous les attributs de taille, de position et d’affichage de l’objet sont mémorisés pour chaque état. L’aspect d’un même objet peut varier d’un état à l’autre. Pour plus d’informations, voir « Types d’états » à la page 46. • Pour modifier l’ordre d’empilage des objets dans l’application, faites glisser les lignes du panneau Calques vers le haut ou vers le bas. Vous pouvez également modifier l’ordre d’empilage des objets à l’intérieur d’un calque ou d’un groupe. Faites glisser la ligne de l’objet ou sélectionnez l’objet, puis cliquez sur Modifier > Organiser > Mettre au premier plan, Avancer d’un plan, Reculer d’un plan ou Mettre à l’arrière-plan. Remarque : l’ordre d’empilage des calques est identique dans tous les états. Contrairement aux propriétés des objets, l’ordre d’empilage ne peut pas varier en fonction de l’état. Pour plus d’informations sur les composants et la modification des objets, voir : « Modification d’un composant en mode de modification » à la page 35 « Création de maquettes d’application » à la page 18 Dernière mise à jour le 24/5/2011 56 Chapitre 10 : Définition de la navigation et du comportement à l’aide des interactions Les interactions sont des événements qui se produisent en réponse à des actions effectuées par les utilisateurs, telles que le fait de cliquer sur un bouton. Par exemple, l’application peut afficher un nouvel état lorsqu’un utilisateur clique sur un bouton. Dans ce cas, vous définissez donc une interaction déclenchée par le fait que l’utilisateur clique sur le bouton. Avec le « dernier » bouton de navigation sélectionné sur le plan de travail, le panneau Interactions permet d’affecter une interaction Lors d’un clic qui déclenche une interaction vers le « dernier » état d’affichage. Flash Catalyst comporte de nombreuses interactions intégrées que vous pouvez rapidement ajouter à des composants ou à des objets groupés, parmi lesquelles : • la transition d’un état de composant ou d’application vers un autre ; • le déclenchement d’une séquence d’actions, telle que la lecture d’un son, le déplacement d’un objet ou l’exécution d’une animation ; • l’accès à une URL ; • la lecture, la pause ou l’arrêt d’un clip vidéo. Dernière mise à jour le 24/5/2011 57 UTILISATION DE FLASH CATALYST Définition de la navigation et du comportement à l’aide des interactions Dans le panneau Interactions, sélectionnez l’événement déclenchant l’interaction, tel que Lors d’un clic. Ajout d’interactions Vous pouvez ajouter des interactions aux composants, aux graphiques optimisés, aux lecteurs vidéo ou aux illustrations groupées. Utilisez les groupes pour interrompre les interactions lorsque vous n’avez pas besoin d’un composant réutilisable. 1 Sélectionnez un composant ou un groupe. 2 Cliquez sur Ajouter une interaction dans le panneau Interactions. 3 Sélectionnez un événement déclenchant l’interaction, tel que par exemple Lors d’un clic ou Lorsque le curseur survole. 4 Sélectionnez une interaction, par exemple Lire la transition vers l’état ou Aller à l’URL. • Si vous sélectionnez Lire la séquence d’actions, modifiez la séquence d’actions dans le panneau Scénarios. Pour plus d’informations, voir « Modification de séquences d’actions » à la page 68. • Si vous sélectionnez Aller à l’URL, saisissez l’URL et choisissez la fenêtre dans laquelle la page Web doit être affichée. Dernière mise à jour le 24/5/2011 58 UTILISATION DE FLASH CATALYST Définition de la navigation et du comportement à l’aide des interactions • Si vous ajoutez une interaction utilisée pour contrôler une vidéo, sélectionnez la vidéo. Cette vidéo doit se trouver dans le projet. • Si vous sélectionnez Lire la transition vers l’état, définissez l’état à afficher lorsque l’événement se produit. Vous pouvez également choisir un autre composant et lire une transition vers son état en sélectionnant le composant, puis son état. Vous pouvez uniquement lire des transitions vers des états dans d’autres composants personnalisés. Remarque : par défaut, les nouvelles interactions s’appliquent à chaque instance d’un composant ou d’un groupe, à moins que vous ne spécifiiez un état précis lors de l’ajout de l’interaction. Le paramètre par défaut est Lors de tout état. Toute interaction définie uniquement pour un état de page ou de composant spécifique est dite conditionnelle. Ciblage d’interactions Vous pouvez construire des interactions grâce auxquelles des composants peuvent déclencher des transitions vers d’autres états dans des composants autres que le parent. Par exemple, un bouton dans un composant peut servir à déclencher un changement d’état dans un autre composant. Pour créer une interaction qui cible un autre composant, suivez les étapes ci-dessous : 1 Double-cliquez sur le composant contenant le composant devant lancer l’interaction. 2 Sélectionnez le composant auquel vous voulez ajouter l’interaction. 3 Sur le panneau Interactions, sélectionnez Ajouter une interaction. 4 Sélectionnez l’événement à utiliser et choisissez Lire la transition vers l’état. 5 Sélectionnez Choisir une cible. 6 Cliquez sur Sélectionner un autre élément. 7 Sélectionnez l’autre composant à l’aide de la souris. Vous pouvez utiliser la barre de navigation pour quitter le mode de modification du composant si vous devez sélectionner un composant à un niveau différent de l’application. 8 Cliquez sur Sélectionner. 9 Sélectionnez l’état de l’autre composant. 10 Cliquez sur OK. Vous pouvez uniquement cibler des états dans d’autres composants personnalisés. Interactions Au lancement de l’application Vous pouvez créer une interaction qui sera lue automatiquement au lancement de l’application. Il s’agit d’une interaction Au lancement de l’application. Pour le type d’interaction, vous pouvez choisir de lire une transition vers un état, d’accéder à une URL, de contrôler une vidéo ou de lire une séquence d’actions. Par exemple, utilisez une interaction Au lancement de l’application afin de déclencher une séquence d’actions pour lire un fichier SWF. Lorsque vous ajoutez une séquence d’actions à l’aide de l’interaction Au lancement de l’application, assurez-vous de n’avoir effectué aucune sélection sur le plan de travail lorsque vous cliquez sur Ajouter une interaction. Les actions définies sont exécutées dès le lancement de l’application. Pour cela, procédez comme suit : 1 Importez le fichier SWF dans le projet Flash Catalyst. Dernière mise à jour le 24/5/2011 59 UTILISATION DE FLASH CATALYST Définition de la navigation et du comportement à l’aide des interactions 2 Assurez-vous de n’avoir effectué aucune sélection sur le plan de travail. 3 Dans le panneau Interactions, cliquez sur Ajouter une interaction. Remarque : en l’absence de sélection sur le plan de travail, Au lancement de l’application est l’événement par défaut pour le déclenchement de l’interaction. 4 Dans le panneau Interactions, sélectionnez Lire la séquence d’actions (dans le deuxième menu). Une séquence d’actions vide est ajoutée au panneau Scénarios. 5 Sélectionnez l’objet SWF dans le plan de travail. Cliquez sur Ajouter une action dans le panneau Scénarios, puis sélectionnez Commande SWF > Lire. Vous affectez ainsi l’action Lire le fichier SWF au fichier SWF. Interaction Au lancement de l’application exécutant une séquence SWF à partir d’une image spécifique Interactions conditionnelles Les interactions conditionnelles sont des comportements impliquant qu’une condition soit remplie. Par exemple, lorsque l’utilisateur qui visionne la page 1 clique sur Suivant, la page 2 s’affiche. S’il visionne la page 2 et clique sur suivant, la page 3 s’affiche. L’ajout d’interactions conditionnelles est identique à l’ajout d’autres interactions, à ceci près que vous définissez pour le paramètre conditionnel une valeur plus spécifique que Lors de tout état. Interactions de liste conditionnelles Vous pouvez ajouter des interactions conditionnelles à une liste de données afin de déclencher une action à la sélection d’un élément de la liste. La liste peut se composer d’images ou de texte. Les interactions conditionnelles sont analogues aux autres interactions à ceci près que le paramètre conditionnel Lors de tout état se transforme en paramètre A la sélection d’un élément ou A la sélection d’un élément précis. Si vous sélectionnez A la sélection d’un élément précis, vous devez saisir le numéro de l’élément de la liste déclenchant l’interaction. Dernière mise à jour le 24/5/2011 60 UTILISATION DE FLASH CATALYST Définition de la navigation et du comportement à l’aide des interactions Interaction de liste conditionnelle Dernière mise à jour le 24/5/2011 61 Chapitre 11 : Animations Animations de transitions entre des états d’affichage Les transitions sont des animations qui sont lues dans un projet interactif lorsqu’un utilisateur passe d’un état à un autre, ou d’un état de composant à un autre. Les fondus en entrée, les fondus en sortie, la rotation ou le déplacement d’objets, ou encore le redimensionnement d’images sont des transitions courantes. Les effets de transition Flash Catalyst sont créés en se basant sur des animations axées sur le temps. Chaque fois que le contenu dans un état de votre projet diffère du contenu dans un autre état, Flash Catalyst crée automatiquement une transition par défaut. Ces transitions par défaut s’affichent dans le panneau Scénarios. Initialement, les transitions par défaut présentent une durée de zéro seconde. Elles doivent alors être considérées comme des espaces réservés : elles n’ont aucun effet jusqu’à ce que vous allongiez leur durée. Commencer à l'état Etat final Une transition par défaut, avec une durée nulle, est créée automatiquement dans le scénario entre deux états (Principal et Voler) correspondant à des contenus différents. Vous pouvez modifier une transition, en ajustant par exemple la vitesse pour ralentir ou accélérer l’action ou en faisant glisser les barres d’effet dans le scénario. Vous pouvez configurer le minutage du fondu en sortie d’une image dans votre état de départ par rapport au minutage du fondu en entrée d’une image dans votre état de fin, en déplaçant les barres d’effet. Dernière mise à jour le 24/5/2011 62 UTILISATION DE FLASH CATALYST Animations Commencer Etat à l'état final Réglage des transitions Fondu en entrée et Fondu en sortie afin de rallonger la durée nécessaire au passage de l’état de départ à celui de fin, pour une transition plus graduelle. Remarque : le type de la transition par défaut (fondu, déplacement, etc.) dépend de la manière dont les instances d’un objet diffèrent les unes des autres d’un état à l’autre. Les effets de transition suivants sont ajoutés automatiquement : • Appliquer un fondu (en entrée ou en sortie) • Déplacer • Effectuer une rotation • Redimensionner Aucun effet de transition n’est ajouté lorsque vous modifiez les propriétés suivantes : • Trait ou Remplissage • Opacité • Coins • Modes de fusion • Ajout de filtres • Edition du texte d’un objet de texte (un même objet de texte dont le type varie dans chaque état) • Propriétés de texte Dernière mise à jour le 24/5/2011 63 UTILISATION DE FLASH CATALYST Animations Modification des transitions 1 Dans le panneau Etats, sélectionnez soit l’état de départ, soit l’état de fin de la transition. Remarque : pour modifier la transition d’un composant, cliquez deux fois sur le composant pour l’ouvrir en mode de modification. Les transitions du composant s’affichent dans le panneau Scénarios. 2 Dans la section Transitions d’état du panneau Scénarios, sélectionnez une transition. 3 Cliquez sur Transition régulière. La transition par défaut passe de 0 seconde à 0,5 seconde créant ainsi une transition régulière entre les états. Remarque : vous pouvez également cliquer sur la flèche pointant vers le bas située sur la droite du bouton Transition régulière, puis saisir une durée pour la transition. 4 Pour réduire ou augmenter la durée d’une transition, faites glisser la poignée de redimensionnement. Pour avancer ou reculer le début de la transition, faites glisser la barre d’effet de la transition et non la poignée de redimensionnement. A B C D A. Le point vert signifie que la transition a été modifiée. B. Bouton de lecture de la transition C. Faites glisser la barre d’effet pour ajuster le minutage de la transition. D. Faites glisser la poignée de redimensionnement pour spécifier la durée de l’effet (ici un fondu). 5 Pour visionner la transition, cliquez sur le bouton de lecture (représenté par une flèche pointant vers la droite) dans le panneau Scénarios. Le panneau Propriétés vous permet également de définir les propriétés de la transition sélectionnée. Remarque : les barres d’effet de transition sont mises en couleur. Les barres d’effet s’affichent en vert. L’effet sélectionné s’affiche en bleu. Dernière mise à jour le 24/5/2011 64 UTILISATION DE FLASH CATALYST Animations Options des transitions Vous pouvez définir les transitions de façon à ce qu’elles soient automatiquement inversées ou répétées et contrôler leur comportement en cas d’interruption. Répétition de transitions Pour comprendre ce qu’inverser une transition signifie, prenons l’exemple d’un projet contenant deux états et un objet dans chaque état. Si vous définissez une transition permettant de déplacer l’objet lors du passage de l’état 1 à l’état 2 avec une durée d’une seconde, il arrive souvent que vous souhaitiez que cette même transition d’une seconde replace l’objet à sa position initiale lors du passage de l’état 2 à l’état 1. Pour cela, il vous suffit de cliquer sur la case Inversion automatique dans le panneau Propriétés lorsque la transition est sélectionnée. Une flèche gauche-droite s’affiche dans la transition pour signaler que l’inversion est activée. Interruption de transitions Il peut arriver qu’une transition soit interrompue par une autre transition. Par exemple, pendant que la lecture de la transition entre l’état 1 et l’état 2, votre utilisateur clique sur un bouton pour revenir à l’état 1. Vous pouvez contrôler ce qui se passe dans cette situation en sélectionnant le paramètre de votre choix dans le panneau Propriétés pour la transition. Vous pouvez choisir l’option Transitions régulières, auquel cas la transition sera interrompue, puis sera lue à partir de son emplacement actuel, ou l’option Aligner sur la fin, qui placera immédiatement l’objet à la fin de la transition avant de reprendre la lecture. Répétition de transitions entières Des effets individuels peuvent être définis de façon à se répéter au cours des transitions, mais vous pouvez également configurer la transition entière de sorte qu’elle se répète en sélectionnant la case Répéter dans le panneau Propriétés de la transition, puis en définissant les options désirées. Propriétés communes des effets Durée Déterminez la durée de l’effet, de son début à sa fin. Délai Retardez le début de l’effet par rapport au début de la transition ou de la séquence d’actions. Répéter Répétez l’effet autant de fois que spécifié. Sélectionnez Toujours pour répéter l’effet sans interruptions. Opacité De/Vers Définissez l’opacité de début et de fin d’un objet dans un effet de fondu en entrée/sortie. Positions X et Y Définissez la position de début et de fin d’un objet dans un effet de déplacement. Largeur (L) et Hauteur (H) Définissez la position de début et de fin d’un objet dans un effet de redimensionnement. Angle de et Angle vers Définissez l’angle de début et de fin d’un objet dans un effet de rotation. Accélération Ajoutez une accélération ou une décélération progressive au cours d’une animation afin d’en accroître le réalisme. Modification de l’origine de la transition Les transitions Déplacer, Redimensionner et Rotation vous permettent de spécifier le point d’origine. Si vous sélectionnez une transition Déplacer, vous pouvez choisir l’option Transition d’état pour déplacer l’objet depuis son emplacement dans un état jusqu’à sa destination dans l’autre état. Vous pouvez également sélectionner l’option Déplacement relatif et spécifiez un nombre de pixels sur les axes x et y selon lesquels l’objet doit se déplacer dans la transition, ou l’option Emplacement spécifique pour indiquer le point de destination. Dernière mise à jour le 24/5/2011 65 UTILISATION DE FLASH CATALYST Animations Dans le cas d’une transition Redimensionner, vous pouvez choisir l’option Déplacement relatif pour redimensionner l’objet, de sa taille d’origine dans le premier état à sa taille dans le second, ou l’option Taille spécifique pour définir la largeur et la hauteur à adopter. De même, la transition Rotation vous permet de choisir l’option Déplacement relatif ou Angle spécifique. Transitions d’accélération Vous pouvez accroître le réalisme des mouvements en appliquant des accélérations aux effets. L’accélération se compose de deux phases : l’accélération, suivie de la décélération. L’accélération est définie dans le panneau Propriétés et comporte plusieurs options : Valeur par défaut Cette option applique un taux constant de modification du début à la fin. Linéaire Cette option se caractérise par un démarrage lent, suivi d’une accélération rapide d’entrée dans l’effet. Le débit reste ensuite constant jusqu’à quelques instants de la fin de l’effet, lorsque le débit ralentit avec une décélération de sortie d’effet. Sinus Cette option se caractérise par une accélération jusqu’à un point central, immédiatement suivie d’une décélération. Puissance La puissance s’apparente au Sinus. Elle se caractérise en effet également par une accélération jusqu’à un point déterminé, immédiatement suivie d’une décélération. Elle en diffère cependant par la propriété Exposant. L’accélération et la décélération augmentent proportionnellement à la valeur définie pour cette propriété. Elastique Cette option conduit à l’alignement automatique de l’objet déplacé avec un tressaillement dès qu’il atteint sa destination. Rebond Cette option se caractérise par un bond en arrière de l’objet déplacé avant d’atteindre sa position finale. Ajout d’effets supplémentaires à une transition Vous pouvez ajouter plusieurs effets aux objets pour créer des transitions plus sophistiquées. Par exemple, un objet peut simultanément s’afficher par fondu en entrée, effectuer une rotation 3D et émettre un effet sonore. 1 Ouvrez le panneau Scénarios. 2 Dans la section Transitions d’état du panneau Scénarios, sélectionnez une transition. 3 Sélectionnez un objet du scénario. 4 Cliquez sur Ajouter une action et choisissez une action ou un effet dans le menu déroulant. 5 Modifiez les propriétés de l’effet dans le panneau Scénarios ou Propriétés. La liste ci-dessous répertorie les effets et les actions du menu déroulant Ajouter une action : Commande vidéo Lit, interrompt et arrête une vidéo. Importez une vidéo et ajoutez un lecteur vidéo afin d’en permettre la lecture. Pour plus d’informations, voir « Eléments vidéo et audio » à la page 98. Commande SWF Lit et arrête une séquence SWF. Vous pouvez également lancer la lecture d’une séquence SWF à partir d’une image précise ou l’arrêter à une image précise. Définissez la valeur Trame de démarrage dans le panneau Propriétés. Définir l’état du composant Affiche l’état spécifié d’un composant. Spécifiez l’état à afficher dans le panneau Propriétés. Définir la propriété Modifie la propriété d’un composant ou d’un groupe à la suite d’une interaction de l’utilisateur. Spécifiez la propriété à modifier dans le panneau Propriétés. Dernière mise à jour le 24/5/2011 66 UTILISATION DE FLASH CATALYST Animations Appliquer un fondu Applique un fondu à un objet, d’une valeur d’opacité à l’autre (fondu en entrée ou fondu en sortie). Définissez les valeurs d’opacité De et Vers dans le panneau Propriétés. Effet sonore Lit tout effet sonore de la bibliothèque du projet. Dans le panneau Propriétés, définissez si le son doit être lu une fois ou répété. Si vous sélectionnez l’option Répéter, vous pouvez définir le nombre de répétitions du son. Cochez l’option Toujours pour activer la lecture en boucle du son. Déplacer Déplace un objet d’un emplacement vers un autre. Dans le panneau Propriétés, choisissez l’option Déplacement relatif pour déplacer un objet d’un nombre précis de pixels par rapport à sa position d’origine. L’option Emplacement spécifique vous permet de déplacer un objet vers des coordonnées X et Y précises. Utilisé dans le cadre d’une transition, l’effet est basé sur la position dans l’ancien et dans le nouvel état. Redimensionner Redimensionne un objet. Dans le panneau Propriétés, choisissez l’option Redimensionnement relatif pour modifier la hauteur et la largeur d’un objet en lui appliquant un pourcentage de sa taille actuelle. L’option Taille spécifique permet de spécifier un nombre précis de pixels pour la hauteur et la largeur. Utilisé dans le cadre d’une transition, l’effet est basé sur la taille dans l’ancien et dans le nouvel état. Effectuer une rotation Applique une rotation à un objet. Dans le panneau Propriétés, choisissez l’option Relatif pour appliquer à l’objet une rotation par rapport à son angle actuel (pour autant que la position d’origine de l’objet présente déjà un angle de rotation). Choisissez l’option Angle spécifique pour faire pivoter l’objet d’un angle spécifique (en commençant à 0°). Utilisé dans le cadre d’une transition, l’effet est basé sur l’angle dans l’ancien et dans le nouvel état. Effectuer une rotation 3D Applique à un objet une rotation en trois dimensions. Dans le panneau Propriétés, définissez les paramètres Angle de et Angle vers pour la rotation autour de l’axe central, vertical et horizontal de l’objet. Fonds, traits, dégradés et filtres de transition Vous pouvez modifier le fond et le trait d’un objet pendant une transition. Par exemple, vous avez une étoile remplie de la couleur orange dans un état et remplie de la couleur bleue dans un autre état, vous pouvez définir une transition pour animer le changement de la couleur. Cette transition est automatiquement ajoutée au scénario lorsqu’il existe un objet présentant des couleurs différentes selon l’état. Le même comportement s’applique aux traits : si vous modifiez le trait d’un objet d’un état à l’autre, une transition Trait de couleur unie sera ajoutée au scénario. De la même façon, les transitions de dégradé sont ajoutées automatiquement. Cependant, une transition de dégradé est ajoutée seulement si le dégradé possède le même nombre de tons directs dans les deux états et si le fond de la forme correspond à un dégradé dans les deux états. Vous ne pourrez pas créer une animation entre un fond uni et un fond en dégradé. Les fonds en dégradé ou les traits en dégradé peuvent être utilisés. Vous pouvez également animer des filtres. Si vous définissez un filtre sur un objet dans un état, puis que vous modifiez l’une des propriétés du filtre dans un autre état, une transition sera ajoutée au scénario. Options de transition régulière Cliquez sur Transition régulière dans le panneau Scénarios pour ajouter des paramètres de transition régulière par défaut aux effets du scénario. Vous pouvez modifier les paramètres par défaut dans la boîte de dialogue Options de transition régulière. Dernière mise à jour le 24/5/2011 67 UTILISATION DE FLASH CATALYST Animations Boîte de dialogue Options de transition régulière Durée Cette option définit la durée totale de la transition, de son début à sa fin. La transition débute à 0 seconde du scénario et non au début de la lecture du premier effet. Simultané Cette option applique des transitions régulières identiques à chaque effet sur la base de la valeur définie dans le champ Durée. Chaque effet débute et se termine au même instant. Lissage intelligent Cette option ajuste la durée et le délai (instant de début) de chaque effet, créant ainsi une série d’effets décalés. Les effets sont lus à différents instants au cours d’une durée que vous spécifiez. Flash Catalyst exécute les effets par ordre logique, en commençant par les fondus en sortie des objets. Une fois les fondus en sortie effectués, il exécute les effets de redimensionnement et de déplacement, suivis des fondus en entrée. Remplacer les effets existants Cette option remplace les paramètres de transition existants par les paramètres de la boîte de dialogue. Déclenchement d’animations autonomes à l’aide de séquences d’actions Création de séquences d’actions Les séquences d’actions sont des interactions déclenchant une ou plusieurs actions. Les séquences d’actions se produisent à l’intérieur d’un même état et peuvent donc être répétées indéfiniment. C’est le cas par exemple d’un objet qui s’anime lorsque le curseur de la souris le survole. Les types d’actions disponibles sont les suivants : • Lecture, pause et arrêt d’une vidéo • Contrôle de la lecture d’une séquence SWF • Définition de l’état d’un composant • Définition des propriétés d’un objet • Application d’un fondu à un objet • Ajout d’un effet sonore • Déplacement, redimensionnement et rotation d’un objet • Application d’une rotation 3D à un objet Les séquences d’actions peuvent être ajoutées à des composants ou à des groupes dans le panneau Interactions. Dernière mise à jour le 24/5/2011 68 UTILISATION DE FLASH CATALYST Animations Remarque : pour ajouter une séquence d’actions à un composant ou à un groupe à l’intérieur d’un autre composant, cliquez deux fois sur le composant parent pour l’ouvrir en mode de modification. 1 Sélectionnez le composant ou le groupe auquel vous souhaitez ajouter la séquence d’actions. 2 Cliquez sur Ajouter une interaction dans le panneau Interactions. 3 Sélectionnez le déclencheur de la séquence d’actions. 4 Sélectionnez l’interaction Lire la séquence d’actions. 5 Définissez l’état dans lequel la séquence d’actions doit se produire (ou conservez le paramètre par défaut Lors de tout état). 6 Cliquez sur OK. Une séquence d’actions vide est ajoutée au panneau Scénarios. Vous pouvez maintenant la modifier. Les séquences d’actions ne sont rien de plus que des jeux d’effets. Pour créer la séquence, vous pouvez donc cliquer sur Ajouter une action, puis sélectionner l’effet désiré et définir ses propriétés et sa durée. Vous pouvez définir la répétition d’actions spécifiques ou même de la séquence entière dans le panneau Propriétés de la séquence d’actions. Modification de séquences d’actions Les séquences d’actions peuvent être modifiées dans le panneau Scénarios. La modification d’une action est analogue à celle d’une transition. 1 Dans le panneau Scénarios, sélectionnez la séquence d’actions que vous souhaitez modifier. 2 Sélectionnez un objet dans le plan de travail, cliquez sur Ajouter une action, puis sélectionnez une action ou un effet dans le menu contextuel. 3 Répétez l’étape n°2 pour d’autres objets ou ajoutez des actions supplémentaires au même objet. Le panneau Scénarios affiche une barre d’effet pour chaque action ajoutée à la séquence. Séquence d’actions dans le panneau Scénarios 4 Pour réduire ou augmenter la durée d’un effet, faites glisser la poignée de redimensionnement. Pour avancer ou reculer le début de l’action, faites glisser la barre d’effet et non la poignée de redimensionnement. 5 Pour visionner la séquence d’actions, cliquez sur le bouton de lecture (représenté par une flèche pointant vers la droite) dans le panneau Scénarios. Dernière mise à jour le 24/5/2011 69 Chapitre 12 : Bibliothèques Flash Catalyst contient deux bibliothèques pour stocker les ressources communes et partagées. Bibliothèque commune Le panneau Bibliothèque commune contient les ressources Flex préconstruites disponibles pour l’ensemble des projets. Pour une discussion détaillée, voir « Insertion de composants Flex depuis le panneau Bibliothèque commune » à la page 33. Bibliothèque du projet Le panneau Bibliothèque du projet contient les ressources utilisées dans un projet particulier. Les composants que vous créez dans votre projet et les ressources importées, par exemple des images et des médias, sont stockés dans le panneau Bibliothèque du projet. A B C D Panneau Bibliothèque A. Lecture/Pause de la vidéo B. Importer le package de bibliothèque C. Exporter le package de bibliothèque D. Supprimer La Bibliothèque du projet présente deux catégories : Composants Objets interactifs créés par la conversion d’illustrations en composants ou par la modification de composants à structure filaire afin de créer des habillages personnalisés. Dernière mise à jour le 24/5/2011 70 UTILISATION DE FLASH CATALYST Bibliothèques Images Fichiers bitmap (PNG, GIF, JPG, JPE, JPEG) et contenu SWF Médias Fichiers vidéo et audio (FLV/F4V, mp3) Graphiques optimisés Dans un fichier de graphique optimisé, toutes les informations MXML (vecteur, trait, chemin, remplissage et ainsi de suite) sont conservées dans un fichier FXG distinct. Les graphiques optimisés sont créés lors de la conversion d’illustrations en graphiques optimisés en utilisant les options de l’affichage tête haute ou les fonctions du menu Modifier. Les symboles d’un fichier Illustrator importé sont automatiquement convertis en graphiques optimisés. Pour plus d’informations, voir « Optimisation des graphiques » à la page 76. Remarque : lorsque vous importez un fichier Illustrator, Photoshop ou FXG, les images bitmap sont stockées dans un sous-dossier distinct de la catégorie Images. Gestion et positionnement des illustrations à partir du panneau Bibliothèque Les illustrations importées et les composants créés peuvent être réutilisés dans d’autres parties de votre projet. L’opération de glissement d’un élément de la bibliothèque vers le plan de travail entraîne l’ajout d’une instance de cette ressource à l’application. Un nouvel objet est créé dans le dossier du calque cible dans le panneau Calques. Il est recommandé de donner un nom descriptif à chaque objet du panneau Calques. Cette instance de la ressource est présente dans chaque état de l’application. Une fois ajoutée à l’application, la ressource peut être partagée avec d’autres états. Vous pouvez l’afficher et la masquer, ou la supprimer d’un état. Pour plus d’informations, voir « Partage d’objets entre les états » à la page 52. Le glissement d’un autre exemplaire de la même ressource vers le plan de travail entraîne la création d’une seconde instance de cette ressource dans l’application. Elle apparaît donc deux fois dans le panneau Calques. Dans la plupart des cas, il est préférable de ne pas ajouter deux instances d’une même ressource. Pour qu’une ressource s’affiche dans plusieurs états, ajoutez une instance et partagez-la avec les autres états. Remarque : si vous éditez un composant en mode de modification, la ressource est ajoutée au composant et non à l’application. Si vous souhaitez que la ressource s’affiche à la fois dans le composant et dans l’application principale, vous pouvez faire appel à deux instances de la ressource. Pour plus d’informations, voir « Modification d’un composant en mode de modification » à la page 35. • Pour renommer un élément dans le panneau Bibliothèque, cliquez deux fois sur son nom, saisissez le nouveau nom et appuyez sur la touche Entrée (sous Windows) ou Retour (sous Mac). • Pour afficher l’aperçu d’une image dans le panneau Bibliothèque, sélectionnez-la. L’aperçu s’affiche dans la partie supérieure du panneau. Pour afficher l’aperçu d’un clip audio ou vidéo, sélectionnez-le et cliquez sur le bouton de lecture qui apparaît. • Pour supprimer un élément du projet, sélectionnez-le dans le panneau Bibliothèque et cliquez sur le bouton Supprimer (représenté par une corbeille). La suppression d’un élément de la Bibliothèque entraîne la suppression de toutes ses instances du projet. Remarque : les panneaux Calques et Bibliothèque ne sont pas liés. La modification du nom d’une instance d’un élément dans le panneau Calques n’a aucune répercussion sur le nom de la définition d’origine de l’élément dans le panneau Bibliothèque. La modification des propriétés d’un élément de bibliothèque dans un état n’a aucune répercussion sur les propriétés de la ressource dans les autres états. Cependant, l’édition d’un composant en mode de modification entraîne celle de la définition de l’élément dans la bibliothèque du projet. La modification de la définition de l’élément est répercutée sur chaque instance de l’élément dans les différents états. Dernière mise à jour le 24/5/2011 71 UTILISATION DE FLASH CATALYST Bibliothèques Exportation et importation d’un package de bibliothèque Le panneau Bibliothèque facilite la coopération des membres de l’équipe de conception. L’exportation d’un package de bibliothèque crée un package unique contenant tous les éléments de bibliothèque du projet. Le package est enregistré au format FXPL. Les packages FXPL peuvent être utilisés pour distribuer les ressources du projet à différentes équipes. Par ressources, on entend les logos, les contenus vidéo, les composants et ainsi de suite. Le partage au format FXPL permet de rationaliser le travail. Si vous créez une application centrée sur les données, votre document FXPL peut être importé dans Flash Builder par un développeur Flex. • Pour exporter une bibliothèque, cliquez sur le bouton Exporter le package de bibliothèque. Indiquez le nom et l’emplacement du fichier, puis cliquez sur Enregistrer. • Pour importer une bibliothèque, cliquez sur le bouton Importer le package de bibliothèque. Recherchez le fichier, sélectionnez-le et cliquez sur Ouvrir. Remarque : avant d’exporter le package de bibliothèque, vérifiez que vous avez attribué aux ressources (y compris aux composants) des noms descriptifs. Evitez d’envoyer aux développeurs un package de bibliothèque dont les ressources portent des noms peu éloquents tels que Bouton1, Bouton2, et ainsi de suite. Pour plus d’informations, voir « Flux de production entre Flash Catalyst CS et Flash Builder » à la page 4. Dernière mise à jour le 24/5/2011 72 Chapitre 13 : Remplacement des illustrations répétées Flash Catalyst permet de remplacer les illustrations répétées par un composant réutilisable. Les composants de création contiennent souvent des illustrations représentant un élément répété, tel qu’un bouton dans une barre de navigation. Vous pouvez convertir une instance de l’illustration en composant, puis appliquer ce composant aux instances répétées. Création d’une instance d’un composant La première étape de la réutilisation de composants consiste à créer une instance unique du composant à appliquer aux éléments répétés. 1 Sélectionnez l’illustration qui constitue une instance de l’élément répété. 2 Sélectionnez Choisir un composant dans l’affichage tête haute et sélectionnez le type de composant approprié. 3 Nommez le composant. 4 Si nécessaire, modifiez le composant pour configurer les parties obligatoires éventuelles ou effectuez les modifications souhaitées du composant. 5 Renommez le calque. Remplacement des autres illustrations Lorsque vous disposez d’une instance du composant, vous pouvez l’utiliser pour remplacer les autres illustrations de l’élément répété. 1 Sélectionnez l’illustration qui représente l’élément répété. 2 Cliquez sur l’illustration avec le bouton droit de la souris et sélectionnez Remplacer par... 3 Sélectionnez le composant créé dans les étapes précédentes. Dernière mise à jour le 24/5/2011 73 UTILISATION DE FLASH CATALYST Remplacement des illustrations répétées Utilisation de la commande Remplacer par... pour le remplacement d’une illustration d’espace réservé par un composant de bouton personnalisé. 4 Répétez les étapes 1 à 3 pour remplacer les illustrations restantes par le composant. Ian Giblin fournit un excellent didacticiel sur Adobe Developer Connection, qui aborde l’utilisation de Flash Catalyst et Illustrator pour créer des prototypes haute fidélité. Dernière mise à jour le 24/5/2011 74 Chapitre 14 : Alignement de graphiques Flash Catalyst propose cinq aides principales permettant de faciliter le dessin et l’alignement de graphiques. Il s’agit du panneau Aligner, des règles, de repères personnalisés, d’une grille visible pour la mesure et l’alignement d’illustrations, ainsi que du panneau Propriétés pour le positionnement et le dimensionnement d’objets au pixel près. Alignement mutuel de deux objets ou plus Pour aligner plusieurs objets entre eux, effectuez les étapes suivantes : 1 Sélectionnez tous les éléments à aligner. 2 Utilisez les options Aligner du panneau Aligner pour aligner les objets en fonction de leurs bords horizontaux, verticaux, gauches ou droits ou de leurs centres. 3 Utilisez les options Faire correspondre la taille du panneau Aligner pour égaliser la hauteur ou la largeur des objets, ou les deux. Remarque : lors du redimensionnement de composants, notez que les objets compris dans le composant sont redimensionnés uniquement s’ils présentent des contraintes définies. Pour plus d’informations sur cette opération, voir « Redimensionnement d’applications et de composants » à la page 40. Si vous sélectionnez deux objets ou plus ayant fait l’objet d’une rotation, puis utilisez la commande Faire correspondre la largeur, les largeurs des objets sont mis en correspondance, mais pas nécessairement les hauteurs. Ceci s’applique également à la mise en correspondance des largeurs. Si vous sélectionnez trois objets ou plus, vous pouvez également utiliser l’option Distribuer du panneau Aligner pour distribuer les formes selon leurs bords supérieur, gauche, droit ou inférieur, ou selon leurs centres horizontaux. Vous pouvez utiliser l’option Espace pour égaliser l’espace vertical ou horizontal entre les objets. Alignement d’objets sur le plan de travail Si vous sélectionnez un ou plusieurs objets, vous pouvez également les aligner sur le plan de travail. Vous devez cocher l’option Relatif au plan de travail dans la partie supérieure du panneau, même si vous avez sélectionné un seul objet. Dernière mise à jour le 24/5/2011 75 UTILISATION DE FLASH CATALYST Alignement de graphiques Remarque : l’alignement de plusieurs objets sur le plan de travail risque de provoquer leur chevauchement. Utilisez le panneau Calques pour modifier l’ordre de superposition des objets. Pour plus d’informations sur cette opération, voir « Gestion des illustrations à l’aide des calques » à la page 55. Affichage et masquage des règles Par défaut, les règles s’affichent au-dessus et à gauche du plan de travail. Elles facilitent le positionnement des illustrations et sont particulièrement utiles lors du placement de repères personnalisés. Vous pouvez masquer les règles pour agrandir le plan de travail, mais elles occupent un espace tellement réduit qu’il peut être utile de les laisser activées en permanence. Pour masquer les règles, sélectionnez Affichage > Afficher les règles pour désactiver cette option et masquer les règles. Modification des paramètres de grille et de repère L’utilisation de la grille revient à placer sur le plan de travail une feuille de papier millimétré transparente. Elle présente des lignes verticales et horizontales dont l’espacement est parfait pour faciliter l’alignement et le dessin d’illustrations à mesures précises. Afin de modifier le paramètre par défaut pour toutes les lignes de grille et les repères, sélectionnez Affichage > Paramètres grille et guide. Configuration de repères pour le dessin précis Les repères sont un autre outil idéal pour l’alignement et le placement d’un ou plusieurs objets sur le plan de travail. Contrairement à la grille, vous pouvez placer des repères horizontaux et verticaux à n’importe quel endroit. Utilisez la règle pour le placement exact de vos repères personnalisés. Les mêmes repères sont répercutés sur l’ensemble des états dans l’application. Pour ajouter un repère personnalisé, positionnez le curseur sur la règle horizontale ou verticale et faites-le glisser vers le plan de travail. Un repère s’affiche. Relâchez le bouton de la souris pour placer le repère dans le plan de travail. Dernière mise à jour le 24/5/2011 76 Chapitre 15 : Optimisation des graphiques La publication des applications générées à l’aide de Flash Catalyst étant destinée à une exécution dans Flash Player ou AIR, il est important d’optimiser les graphiques employés pour assurer un chargement rapide et un fonctionnement efficace de l’application. L’objectif est de créer en sortie un fichier SWF de taille minimale pour l’application. Si la taille du fichier SWF en sortie est importante et que les performances du projet sont médiocres, cela peut être lié à l’inclusion des éléments suivants : • graphiques vectoriels trop complexes ; • images pixellisées de résolution trop élevée ; • fichiers image incorporés de taille importante. Catalyst comprend des commandes pour l’optimisation des graphiques vectoriels et des images pixellisées, ainsi que pour la conversion de fichiers image incorporés en fichier image liés. Pour accéder à ces commandes, effectuez une sélection sur le plan de travail et sélectionnez l’une des options sous Optimiser l’illustration dans l’affichage tête haute. Graphiques vectoriels Les graphiques vectoriels (parfois nommés formes vectorielles ou objets vectoriels) sont composés de lignes et de courbes définies par des objets mathématiques nommés vecteurs, qui décrivent une image en fonction de ses caractéristiques géométriques. Vous pouvez librement déplacer et modifier les graphiques vectoriels sans perte de détail ou de clarté. En effet, ces graphiques sont indépendants de la résolution et conservent des bords nets lors du redimensionnement. Les objets créés avec les outils de dessin de Flash Catalyst sont des graphiques vectoriels, à l’instar de nombreux objets créés dans les applications Creative Suite telles qu’Illustrator ou Fireworks. Pourquoi optimiser les graphiques vectoriels ? Catalyst peut importer les graphiques vectoriels jusqu’à 40 Mo, avec une limite de 6 500 tracés par objet. Catalyst assure toutefois un rendu individuel de chaque vecteur, par conséquent les objets complexes peuvent provoquer des réductions de performances considérables dans les applications publiées. Dernière mise à jour le 24/5/2011 77 UTILISATION DE FLASH CATALYST Optimisation des graphiques Conversion de graphiques vectoriels en graphiques vectoriels optimisés La commande Optimiser les graphiques vectoriels permet de convertir plusieurs objets vectoriels en un seul objet graphique flash de bas niveau. Elle présente l’avantage de réduire la taille du fichier tout en conservant la possibilité de modification ultérieure par reconversion de l’objet en vecteurs. Pour convertir les objets vectoriels en graphiques vectoriels optimisés : 1 Sélectionnez les objets sur le plan de travail. 2 Dans l’affichage tête haute, sélectionnez Optimiser l’illustration > Optimiser les graphiques vectoriels. 3 Un nouveau graphique est ajouté à la section Graphiques optimisés de la bibliothèque du projet ; le graphique optimisé peut être renommé en cliquant deux fois sur son nom. Pour modifier les objets vectoriels d’origine dans un graphique vectoriel optimisé : 1 Sélectionnez les objets sur le plan de travail. 2 Dans l’affichage tête haute, sélectionnez Optimiser l’illustration > Scinder le graphique. Conversion de graphiques vectoriels en images pixellisées La commande Pixelliser permet de convertir les objets vectoriels en image pixellisée unique. Cette opération réduit considérablement la taille et la complexité des graphiques, mais présente l’inconvénient de ne pas autoriser la reconversion en vecteurs pour une modification ultérieure. Si vous devez conserver la flexibilité de modifier vos graphiques vectoriels, utilisez la commande Convertir en graphique optimisé. Pour convertir un objet vectoriel en image pixellisée : 1 Sélectionnez les objets sur le plan de travail. 2 Dans l’affichage tête haute, sélectionnez Optimiser l’illustration > Pixelliser. 3 Un fichier .png contenant l’image pixellisée est ajouté à la bibliothèque du projet. Graphiques (pixellisés) bitmap Les images pixellisées, parfois nommées images bitmap, utilisent une grille rectangulaire de pixels (contraction de picture element) pour représenter les images. Chaque pixel correspond à un emplacement et à une couleur précis. Lors de l’utilisation d’images pixellisées, vous modifiez des pixels plutôt que des objets ou des formes. Les images pixellisées correspondent au format électronique le plus courant pour les images à tons continus, telles que les photos ou les peintures numériques, car elles représentent de manière efficace les graduations subtiles de nuances et de couleurs. Les images pixellisées dépendent de la résolution, c’est-à-dire qu’elles contiennent un nombre fixe de pixels. Par conséquent, elles peuvent présenter des pertes de détail et apparaître crénelées en cas d’agrandissement à trop grande échelle. Les images créées dans les applications Creative Suite telles que Photoshop sont généralement des images pixellisées. Pourquoi optimiser les images pixellisées ? Catalyst importe les images pixellisées avec une taille maximale de 2048 x 2048 pixels (20 millions de pixels au total). Toutefois, les grandes images pixellisées (par exemple, les images à haute résolution créées pour l’impression ou les grandes images masquées) peuvent diminuer les performances de l’application de manière inutile. Essayez toujours d’utiliser des images pixellisées à 72 ppp et de taille aussi réduite que possible. Dernière mise à jour le 24/5/2011 78 UTILISATION DE FLASH CATALYST Optimisation des graphiques Compression d’images pixellisées La commande Comprimer permet d’ajouter une compression aux images pixellisées. Elle permet de réduire considérablement la taille du projet, mais comme pour toutes les compressions, vous devez trouver le juste équilibre entre la qualité de l’image et la taille optimale du fichier. Lors de la compression d’une image pixellisée, une copie compressée est ajoutée au panneau Bibliothèque. Ce panneau conserve également l’image d’origine non compressée. Pour comprimer une image pixellisée : 1 Sélectionnez l’image sur le plan de travail. 2 Sur l’affichage tête haute, sélectionnez Optimiser l’illustration > Comprimer... 3 Saisissez le taux de compression. Images intégrées et liées Par défaut, les images ajoutées à l’application sont incorporées et publiées en tant que partie intégrante du fichier SWF. Pour réduire la taille de l’application, vous pouvez lier les images. Une image liée est stockée en dehors de l’application (fichier SWF) et chargée à l’exécution de l’application. Si vous liez des ressources, copiez les fichiers liés sur le serveur Web sur lequel vous déployez votre application (fichier SWF). Pour convertir une image en image liée ou incorporée : 1 Sélectionnez l’image sur le plan de travail. 2 Sélectionnez Convertir en image liée dans l’affichage tête haute, sous Optimiser l’illustration, ou en cliquant avec le bouton droit sur le nom de l’image dans le panneau Bibliothèque du projet. 3 Pour reconvertir une image liée en image incorporée, dans le panneau Bibliothèque du projet, cliquez avec le bouton droit sur l’icône d’image liée en regard du nom de l’image et sélectionnez Incorporer l’image. Les images liées comportent une icône en regard de leur nom dans le panneau Bibliothèque du projet. Dernière mise à jour le 24/5/2011 79 UTILISATION DE FLASH CATALYST Optimisation des graphiques Conseils d’optimisation Prenez en considération les points ci-dessous lors de la création d’une application optimisée. Utilisation d’une structure efficace • Ne créez qu’une seule instance d’une ressource et partagez-la avec les autres états. Pour plus d’informations, voir « Partage d’objets entre les états » à la page 52. • Lors de l’ajout de plusieurs vidéos à un projet, faites appel à une seule instance de lecteur vidéo. Vous pourrez ensuite en modifier les propriétés dans les différents états en fonction de la source vidéo que le lecteur doit afficher et traiter. Pour plus d’informations, voir « Ajout d’une vidéo » à la page 98. • Limitez le nombre d’états d’application principale dans l’application. Pour créer plusieurs vues ou écrans, ayez recours aux différents états d’un composant personnalisé. Utilisez des composants imbriqués pour accroître la profondeur du contenu et réduire le nombre de pages des sites créés. Pour plus d’informations, voir « Qu’est-ce qu’un composant ? » à la page 30. Optimisation avant importation L’optimisation des performances de l’application avant l’ajout d’illustrations au projet peut se faire de différentes manières. • Veillez à ce que les images bitmap/de trame aient une résolution de 72 ppp. • Vérifiez que le mode colorimétrique est RVB. • Dans Illustrator, faites appel à la fonction Aligner sur la grille en pixels. Lorsque vous créez des illustrations pour Flash Catalyst dans Adobe Illustrator, vous pouvez utiliser le profil de document Flash Catalyst pour appliquer automatiquement les paramètres optimaux. Le profil applique des paramètres définissant la taille du document, le mode de couleur, la résolution et l’alignement sur la grille en pixels. Dans Illustrator, cliquez sur Document Flash Catalyst dans la section de création d’une nouvelle section de l’écran de bienvenue. Vous pouvez également sélectionner Fichier > Nouveau pour ouvrir la fenêtre Nouveau document. Cliquez pour ouvrir le menu Nouveau profil de document et sélectionnez Flash Catalyst. • Lorsque vous créez des vidéos, utilisez un paramètre prédéfini ou des réglages de codec et de compression optimisés pour le Web. Recherche d’informations auprès de la communauté Sur le Pôle de développement Adobe, Ian Giblin a rédigé un article concernant les bonnes pratiques pour la préparation dans Illustrator des illustrations destinées à Flash Catalyst. Voir Best Practices for using Adobe Illustrator with Flash Catalyst CS5.5. Sur le blog FlashCats, Tara Feener a publié un article concernant l’optimisation. Voir Optimizing for smaller SWF output. Dernière mise à jour le 24/5/2011 80 Chapitre 16 : Aller-retour de modification d’illustrations La fonction d’aller-retour de modifications de Flash Catalyst permet de lancer et de modifier les illustrations de l’application en utilisant les fonctionnalités d’édition enrichies d’Adobe Illustrator CS5 et d’Adobe Photoshop CS5. Ouvrez l’illustration dans Illustrator ou Photoshop, apportez vos modifications, puis revenez à Flash Catalyst. Remarque : FXG est le format GIF (Graphics Interchange Format) riche utilisé pour l’aller-retour de modifications. Pour plus d’informations sur les fichiers FXG, voir . • Utilisez Illustrator pour effectuer un aller-retour de modifications sur des bitmaps et des vecteurs. Modifiez un objet unique, une sélection mixte d’objets ou un groupe. Illustrator vous permet également de modifier les composants suivants : Bouton, Case à cocher, Bouton radio, Barre de défilement horizontale, Barre de défilement verticale, Entrée texte, Bouton bascule, Curseur horizontal ou Curseur vertical. Vous ne pouvez pas effectuer un aller-retour de modifications sur des composants personnalisés/génériques. Remarque : vous ne pouvez pas effectuer d’aller-retour de modifications sur plus d’un composant à la fois. Vous ne pouvez pas non plus effectuer d’aller-retour de modifications sur des graphiques optimisés à l’aide de la fonction Optimiser les graphiques vectoriels. • Utilisez Photoshop pour modifier les images bitmap, une sélection de plusieurs images ou un groupe contenant uniquement des images. Remarque : si un composant fait partie d’une sélection mixte ou d’un groupe, le composant personnalisé est représenté par un calque substituable non modifiable dans Photoshop ou Illustrator. • Les modifications apportées à un vecteur (forme ou texte) ne s’appliquent qu’à l’état dans lequel vous sélectionnez le vecteur. • Modifiez la structure des objets dans Flash Catalyst. La modification de la structure des objets en cours d’allerretour de modifications risque de porter atteinte au comportement voulu des objets ou des transitions dans lesquelles ils se produisent. • La modification d’une image ou d’un composant stocké dans la bibliothèque Flash Catalyst constitue une modification de la définition de l’objet. Si l’objet est partagé avec plusieurs états, les modifications s’appliquent à tous les états. Si l’image est utilisée à l’intérieur d’un composant, les modifications sont répercutées dans le composant. Vous pouvez simuler la modification d’une image bitmap située dans un seul état. Ajoutez un calque dans Photoshop en y plaçant une copie de l’image d’origine. Apportez des modifications au calque copié et désactivez l’icône en forme d’œil du calque d’origine. • Lorsque vous effectuez un aller-retour de modifications sur un bouton (ou sur un autre composant), ses états s’affichent en tant que calques distincts dans Illustrator et Photoshop. Si vous effectuez un aller-retour de modifications sur un groupe, ses enfants sont affichés en tant que calques distincts. • Lorsque vous effectuez un aller-retour de modifications sur un objet, les objets environnants du plan de travail sont visibles (en grisé) à titre de référence. Dans Illustrator et Photoshop, ces objets sont représentés par des calques d’arrière-plan verrouillés et ne peuvent pas être modifiés. Dernière mise à jour le 24/5/2011 81 UTILISATION DE FLASH CATALYST Aller-retour de modification d’illustrations Lancement et modification dans Adobe Illustrator 1 Sélectionnez sur le plan de travail l’objet que vous souhaitez modifier. 2 Choisissez la commande Modifier > Editer dans Adobe Illustrator. L’objet s’ouvre dans Illustrator. A titre de référence, les autres objets du plan de travail sont affichés en grisé au cours de l’édition. L’illustration non modifiable est ajoutée au calque d’arrière-plan d’Illustrator et est verrouillée. Un message vous informe que vous modifiez un objet à partir d’Adobe Flash Catalyst. 3 Si le message Editer dans Adobe Illustrator s’affiche, cliquez sur OK. 4 Apportez vos modifications. Pour afficher correctement les modes de fusion dans Illustrator, créez un rectangle plein derrière les fusions. 5 Lorsque vous avez fini d’apporter des modifications, cliquez sur Terminer dans la partie supérieure de la fenêtre de l’application. La boîte de dialogue Options FXG s’ouvre. 6 Cliquez sur OK pour fermer cette boîte de dialogue et revenir à Flash Catalyst. 7 Revenez à Flash Catalyst. Les modifications apportées dans Illustrator s’affichent dans Flash Catalyst. Dernière mise à jour le 24/5/2011 82 UTILISATION DE FLASH CATALYST Aller-retour de modification d’illustrations Pour plus d’informations sur l’apport de modifications dans Illustrator, voir Flux de production Illustrator et Flash Catalyst. Lancement et modification dans Adobe Photoshop Pour effectuer un aller-retour de modifications dans Photoshop, téléchargez et installez les extensions Flash Catalyst FXG pour Photoshop. Les extensions englobent le module d’extension FXG ainsi que le script Simplifier les calques pour FXG. Remarque : Les extensions Flash Catalyst FXG pour Photoshop doivent être installées avant que des illustrations de projet Flash Catalyst puissent être ouvertes et modifiées dans Photoshop. Pour plus d’informations sur le téléchargement et l’installation des extensions, voir www.adobe.com/go/photoshopfxg. 1 Sélectionnez l’image bitmap que vous souhaitez éditer dans Photoshop. 2 Cliquez sur Modifier > Editer dans Adobe Photoshop. Un message vous invite à télécharger et à installer les extensions FXG pour Photoshop. 3 Si vous avez déjà installé les extensions, cliquez sur OK pour fermer le message. Adobe Photoshop CS5 démarre et l’image bitmap sélectionnée s’affiche dans la zone de travail de Photoshop. Dans Photoshop, un message vous rappelle d’exécuter les scripts FXG avant de revenir à Flash Catalyst. 4 Apportez vos modifications dans Photoshop. Une fois les modifications effectuées, enregistrez le fichier PSD avant d’exécuter le script Simplifier les calques pour FXG. Le fichier PSD est votre fichier maître. Il conserve tous les styles de calque (effets), tous les calques de réglage, tous les masques de fusion et tous les objets dynamiques que vous avez ajoutés. 5 Cliquez sur Fichier > Scripts > Simplifier les calques pour FXG. Dernière mise à jour le 24/5/2011 83 UTILISATION DE FLASH CATALYST Aller-retour de modification d’illustrations 6 Cliquez sur Fichier > Fermer, puis sur Oui pour enregistrer les modifications. 7 Revenez à Flash Catalyst. Les modifications apportées dans Photoshop s’affichent dans Flash Catalyst. Pour plus d’informations sur l’apport de modifications dans Photoshop, voir Utilisation d’Adobe Photoshop CS5. Conseils pour le maintien de la fidélité tout au long de l’aller-retour de modifications Lorsque vous effectuez un aller-retour de modifications entre Flash Catalyst et Illustrator ou Photoshop, vous faites appel au format FXG pour déplacer des objets d’une application à l’autre. Suivez les conseils suivants pour conserver la fidélité de vos illustrations Flash Catalyst et les modifications apportées tout au long de l’aller-retour. • Les filtres ajoutés dans Flash Catalyst peuvent être modifiés dans Illustrator. • Si vous appliquez une rotation ou un filtre à une image bitmap dans Flash Catalyst, vous ne pourrez l’éditer dans Photoshop qu’après l’avoir pixellisée. Sélectionnez Modifier > Pixelliser. • Les filtres et effets ajoutés dans Illustrator sont convertis en vecteurs ou bitmaps lorsque vous revenez à Flash Catalyst. • Pour ajouter des effets de calque, des masques, des calques de forme et des calques de réglage dans Photoshop, vous devez exécuter le script Simplifier les calques pour FXG avant de revenir à Flash Catalyst. L’exécution de ce script ne comporte aucun danger. Il est conseillé de toujours exécuter le script avant de revenir à Flash Catalyst. • Définissez toujours Couleurs d’épreuve sur RVB moniteur dans Illustrator afin de réduire les différences lorsque vous comparez des couleurs dans Flash Catalyst et dans Illustrator. Exécutez la procédure suivante pour modifier la valeur du paramètre Couleurs d’épreuve dans Illustrator : 1 Choisissez Affichage > Couleurs d’épreuve (pour sélectionner cette option). 2 Sélectionnez Affichage > Format d’épreuve > RVB Moniteur. Pour plus d’informations sur la définition des couleurs d’épreuve dans Illustrator, visionner la vidéo suivante (accéder au repère de la 27e minute) :Structuring UI design comps for use in Flash Catalyst. Pour plus d’informations, voir : « Importation d’illustrations » à la page 14 Utilisation du format FXG. Dernière mise à jour le 24/5/2011 84 Chapitre 17 : Listes de données et panneaux de défilement Lorsque vos projets doivent contenir une large quantité de contenu dans un espace limité, la création d’images, de panneaux et de listes de défilement est une solution tout à fait adaptée. Flash Catalyst inclut deux composants interactifs conçus spécialement à cette fin, à savoir les listes de données et les panneaux de défilement. Une liste de données est un type de composant spécial servant à récupérer et afficher une série d’éléments liés. Notez que le nom « liste de données » peut porter légèrement à confusion. Chaque enregistrement unique compris dans une liste de données Flash Catalyst peut comprendre des illustrations, du texte ou une combinaison des deux. Il ne s’agit pas nécessairement d’une liste. Généralement, une liste de données prend la forme d’une feuille de calcul ou d’une table de données. A l’aide de Flash Catalyst, vous pouvez générer un composant Liste de données qui affiche un mur d’images en mosaïque. Une liste peut prendre la forme d’une pellicule défilante ou d’une série de vignettes, à partir de laquelle vous sélectionnez et affichez un autre contenu ou accéder à de nouveaux emplacements dans l’application. Ajoutez-lui une barre de défilement pour accroître le nombre d’éléments qu’elle contient. Dernière mise à jour le 24/5/2011 85 UTILISATION DE FLASH CATALYST Listes de données et panneaux de défilement Vous pouvez créer une liste de données horizontale. L’ajout de flèches de défilement permet de naviguer dans la liste. Présentation des listes de données Les listes de données peuvent être créées directement dans Flash Catalyst ou développées dans Flash Builder. Si la liste a été créée dans Flash Catalyst et que les éléments de données n’ont pas été modifiés dans Flash Builder, vous pouvez modifier l’ensemble de l’habillage ou de l’aspect de la liste de données et de ses éléments. Si elle a été créée dans Flash Builder, ou si un développeur a modifié les données dans une liste créée dans Flash Catalyst, vous pouvez modifier l’habillage de la liste, mais pas tous les éléments de données individuels dans Flash Catalyst. Vous pouvez facilement habiller une liste de concepteur ou modifier son apparence visuelle dans Catalyst. • Vous pouvez disposer la liste de données horizontalement ou verticalement et l’aligner sur la grille de la page. • Ajoutez-lui une barre de défilement pour accroître le nombre d’éléments qu’elle contient. • Chaque composant de liste de données doit comporter un élément maître appelé « Elément répété ». L’élément répété est un modèle définissant l’aspect de chaque élément de la liste. Vous pouvez par exemple créer un élément répété avec une image, un texte descriptif et différents états Haut, Dessus et Bas. Chaque élément de la liste partage ces propriétés et ces éléments communs. A l’exécution, les modifications apportées à l’élément répété sont automatiquement appliquées à chaque élément de la liste. Lorsque vous importez depuis Flash Builder un projet qui contient une liste créée par le développeur, il est probable que les données qu’elle contient ne puissent pas être modifiées. Flash Catalyst affiche des espaces réservés à la place des données. Si les données sont de type texte, des données d’espace réservé s’afficheront pour chaque élément. S’il s’agit de données de type image, vous verrez des images d’espace réservé. Quel que soit le nombre d’éléments censés apparaître dans la liste, Flash Catalyst affiche uniquement cinq espaces réservés. Les listes de données sont composées de trois parties : les données, l’habillage de la liste et l’habillage de l’élément répété. A l’aide de Catalyst, vous pouvez habiller la liste et le rendu de l’élément. Lors de l’habillage du rendu de l’élément, vous pouvez modifier les propriétés qui n’ont pas d’incidence sur les données sous-jacentes. Par exemple, si la liste contient du texte, vous pouvez changer la police, la couleur, la taille et d’autres propriétés similaires. Dernière mise à jour le 24/5/2011 86 UTILISATION DE FLASH CATALYST Listes de données et panneaux de défilement Liste de données utilisant des données en phase de conception ou fictives. Dernière mise à jour le 24/5/2011 87 UTILISATION DE FLASH CATALYST Listes de données et panneaux de défilement Liste de données de développeur, dans laquelle les données sous-jacentes ont été ajoutées dans Flash Builder. Les éléments visuels restent modifiables dans Catalyst, mais les données sont protégées. Création d’un composant de liste de données 1 Positionnez une copie des premiers éléments de la liste de données sur le plan de travail. Ajoutez-y tout autre contrôle requis pour la liste (curseur, barre de défilement ou autre). Dimensionnez le contrôle en fonction de votre plan de conception. Sélectionnez ces objets. A B A A. Image et texte utilisés en tant qu’éléments répétés B. Ajoutez une barre de défilement aux listes de données contenant plusieurs éléments. 2 Dans l’affichage tête haute, cliquez sur Choisir un composant > Liste de données. Dernière mise à jour le 24/5/2011 88 UTILISATION DE FLASH CATALYST Listes de données et panneaux de défilement Flash Catalyst crée une liste de données et affiche un message dans l’affichage tête haute. Ce message vous invite à spécifier les éléments graphiques que vous souhaitez utiliser pour la partie requise de la liste de données. La partie requise est un élément répété. 3 Sans désélectionner le nouveau composant dans le plan de travail, cliquez sur Modifier des parties dans l’affichage tête haute. Flash Catalyst bascule en mode de modification afin de vous permettre de modifier les parties et les états du composant. 4 Sur le plan de travail, sélectionnez les éléments que vous souhaitez utiliser comme élément répété. N’y incluez ni la barre de défilement ni d’autres contrôles. 5 Dans l’affichage tête haute, cliquez sur Convertir en partie Liste de données > Elément répété. Flash Catalyst convertit l’élément sélectionné en partie d’élément répété. Par défaut, la liste est alignée verticalement. 6 Sélectionnez l’élément répété et cliquez sur Verticale, Horizontale ou Mosaïque dans la section Présentation du panneau Propriétés. Utilisez le panneau Propriétés pour appliquer d’autres mises en forme, telles que la marge des cellules. Utilisez les poignées de sélection pour dimensionner le cadre de sélection de l’élément répété en fonction de votre plan de conception. 7 Cliquez deux fois sur l’élément répété pour l’ouvrir dans le panneau Pages/Etats. Un élément répété possède les états Normal, Dessus et Sélectionné. 8 Modifiez les éléments dans chaque état conformément à votre plan de conception. 9 Fermez le composant de liste de données et retournez au plan de travail. Vous avez créé un composant de liste de données affichant un seul et même élément, répété un certain nombre de fois. Vous pouvez utiliser le panneau Données en phase de conception pour remplacer les images provisoires par des données plus réalistes. Le panneau Données en phase de conception indique aux développeurs quel sera l’aspect de l’application lors de son exécution. Ajout de données en phase de conception 1 Sélectionnez le composant de liste de données sur le plan de travail et ouvrez le panneau Données en phase de conception. Ce panneau affiche les éléments de la liste. A ce stade, chaque élément de la liste est identique. 2 Si l’élément répété comporte du texte, vous pouvez modifier le texte de chaque élément de la liste. Si l’élément répété comporte une image, cliquez sur l’une des images provisoires du panneau Données en phase de conception. La boîte de dialogue Sélectionner une ressource s’ouvre. 3 Dans la boîte de dialogue Sélectionner une ressource, choisissez l’image que vous souhaitez afficher dans la liste de données, puis cliquez sur OK. Le panneau Données en phase de conception affiche le nouveau texte et les nouvelles images. Remarque : si la bibliothèque du projet ne contient pas l’image que vous souhaitez afficher dans la liste des données, vous pouvez l’importer. 4 Remplacez les autres éléments répétés par des données en phase de conception. Dernière mise à jour le 24/5/2011 89 UTILISATION DE FLASH CATALYST Listes de données et panneaux de défilement 5 Pour ajouter d’autres éléments à la liste de données, cliquez sur Ajouter une ligne et remplacez l’image provisoire par l’image de votre choix. 6 Sélectionnez Modifier > Ajouter un texte à Données en phase de conception ou Ajouter une image à Données en phase de conception pour ajouter des images ou du texte supplémentaire à l’élément répété. Une nouvelle colonne est ajoutée au panneau Données en phase de conception. Pour supprimer un élément de la liste des éléments répétés, sélectionnez l’élément et choisissez Modifier > Supprimer le texte de Données en phase de conception ou Supprimer l'image de Données en phase de conception. A B A. Panneau Données en phase de conception (développé) B. Boîte de dialogue Sélectionner une ressource Remarque : vous pouvez également utiliser le panneau Données en phase de conception pour modifier les éléments affichés dans d’autres composants tels que les barres de boutons ou les listes déroulantes. Présentation d’un panneau de défilement Pour créer un panneau de défilement dans Flash Catalyst, vous aurez besoin des éléments suivants : • Un objet définissant la zone du panneau, par exemple une forme rectangulaire (facultatif) • Le contenu de défilement, par exemple un long bloc de texte ou une série d’images (obligatoire) • Une barre de défilement permettant le défilement du contenu (recommandée) Remarque : la création d’un panneau de défilement sans barre de défilement est possible mais sera inutile si les utilisateurs n’ont pas la possibilité de consulter le contenu masqué. Dernière mise à jour le 24/5/2011 90 UTILISATION DE FLASH CATALYST Listes de données et panneaux de défilement Création d’un composant de panneau de défilement 1 Importez ou dessinez un objet afin de définir la zone du panneau (facultatif). 2 Ajoutez le contenu dont vous souhaitez permettre le défilement. Pour créer un texte accessible par défilement, utilisez l’outil Texte du panneau Outils. 3 Positionnez le texte accessible par défilement ou alignez plusieurs objets dans la zone du panneau. Prévoyez une marge le long du bord inférieur ou du côté droit du panneau pour placer une barre de défilement. Remarque : le contenu de défilement dépasse provisoirement de la zone du panneau. 4 Créez un composant de barre de défilement ou faites glisser une barre de défilement à partir du panneau Composants à structure filaire. Positionnez la barre de défilement et adaptez ses dimensions à la zone du panneau. Deux exemples de parties de panneau de défilement, avant la création du composant de panneau de défilement 5 Sélectionnez toutes les parties requises pour le panneau de défilement. Dans l’affichage tête haute, cliquez sur Choisir un composant > Panneau de défilement. Un message dans l’affichage tête haute vous rappelle de modifier les parties du composant. 6 Cliquez sur Modifier des parties. Un autre message vous explique comment créer la partie défilante du panneau. 7 Sélectionnez les objets que vous souhaitez faire défiler (bloc de texte ou série d’objets). 8 Dans l’affichage tête haute, cliquez sur Convertir en partie Panneau de défilement > Contenu de défilement. Un nouveau cadre de sélection définit la zone visible du contenu de défilement. 9 Si nécessaire, adaptez les dimensions du cadre de sélection du contenu de défilement à la zone du panneau. 10 Utilisez la barre de navigation pour fermer le panneau de défilement. Sélectionnez Fichier > Exécuter le projet pour tester le composant. Composant Panneau de défilement complet permettant de faire défiler un bloc de texte dans un panneau de dimensions limitées Pour plus d’informations sur la création de texte dans Flash Catalyst, voir « Création de maquettes d’application » à la page 18. Dernière mise à jour le 24/5/2011 91 Chapitre 18 : Composants habillables personnalisés Flash Catalyst est fourni avec différents composants filaires et permet de convertir les illustrations personnalisées en un ensemble de composants prédéfinis. Toutefois, de nombreuses applications nécessitent des composants personnalisés. Un développeur peut créer un composant personnalisé dans Flash Builder et se concentrer uniquement sur la structure et le comportement correspondants. En définissant le composant dans Flash Builder comme composant habillable personnalisé, le développeur peut laisser les aspects visuels du composant (son habillage) au concepteur. Le concepteur peut alors importer le composant dans Flash Catalyst et créer l’habillage. Configuration du composant habillable personnalisé Les concepteurs et les développeurs doivent collaborer et discuter de la fonctionnalité souhaitée du composant, afin de créer une entente mutuelle sur les parties, les états et les comportements nécessaires, ainsi que sur la dénomination. Le développeur lance le flux de production en créant le composant habillable personnalisé dans Flash Builder. Pour connaître les étapes détaillées (pour les développeurs) de la création de composants habillables personnalisés, voir Création d’un composant ActionScript habillable dans Utilisation de Flash Catalyst. Le concepteur importe ensuite le composant habillable personnalisé dans Flash Catalyst et modifie son « habillage » ou son aspect visuel. Selon votre projet particulier et votre équipe de développement, vous pouvez éventuellement travailler sur des composants habillables personnalisés disposant déjà d’habillages « factices » ou d’espace réservé. Voici des étapes indiquant comment traiter ces deux situations. Composants habillables personnalisés (avec habillages d’espace réservé) Lorsque les développeurs incluent un habillage d’espace réservé pour le composant habillable personnalisé, il apparaît dans le panneau Bibliothèque du projet de Catalyst après l’importation. L’inclusion d’un habillage d’espace réservé dans un composant habillable personnalisé dans Flash Builder est considérée comme une bonne pratique, car elle permet de clarifier l’utilisation du composant et donne au concepteur une représentation visuelle à faire glisser sur le plan de travail de Flash Catalyst. Vous pouvez recevoir des composants habillables personnalisés dans un fichier FXP ou FXPL. S’ils sont contenus dans un fichier FXP, ouvrez simplement ce fichier comme projet dans Flash Catalyst. S’ils sont au format FXPL, effectuez les étapes suivantes : 1 Avec le projet ouvert, cliquez sur Importer le package de bibliothèque (.fxpl) dans le panneau Bibliothèque. 2 Sélectionnez le fichier FXPL qui définit le composant habillable personnalisé. 3 Le composant habillable personnalisé s’affiche dans la bibliothèque du projet et peut être glissé sur le plan de travail. Dernière mise à jour le 24/5/2011 92 UTILISATION DE FLASH CATALYST Composants habillables personnalisés Importation d’un package de bibliothèque contenant un composant habillable personnalisé nommé « DragAndDropListSkin ». Le développeur inclut un habillage « factice » pour le composant, celui-ci s’affiche dans la bibliothèque du projet et peut être glissé sur le plan de travail. 4 Positionnez le composant sur le plan de travail comme souhaité. Vous pouvez modifier l’habillage factice en double-cliquant sur le composant. Pour plus d’informations, voir « Modification d’un composant en mode de modification » à la page 35. 5 Si le composant habillable personnalisé contient du code de développeur ne devant pas être modifié dans Flash Catalyst, vous obtenez des messages d’avertissement correspondants. Dernière mise à jour le 24/5/2011 93 UTILISATION DE FLASH CATALYST Composants habillables personnalisés Flash Catalyst vous indique si un composant habillable personnalisé contient du code de développeur protégé issu de Flash Builder ; dans ce cas, la liste de données importée est connectée à des données protégées. Composants habillables personnalisés (sans habillages d’espace réservé) La première étape dans l’utilisation d’un composant habillable personnalisé dépourvu d’habillage d’espace réservé consiste à convertir l’illustration à utiliser comme habillage en instance du composant. Préparation de l’illustration 1 Dans votre fichier de projet Flash Catalyst, importez ou créez l’illustration nécessaire pour l’habillage du composant. Par exemple, pour un composant de bouton ou de menu, dessinez les formes et le texte qui représentent le bouton. Dernière mise à jour le 24/5/2011 94 UTILISATION DE FLASH CATALYST Composants habillables personnalisés 2 Sélectionnez toutes les illustrations destinées à l’habillage du composant. Importation du composant habillable personnalisé 1 Cliquez sur Importer le package de bibliothèque (.fxpl) dans le panneau Bibliothèque du projet. 2 Sélectionnez le fichier FXPL qui définit le composant habillable personnalisé. Dernière mise à jour le 24/5/2011 95 UTILISATION DE FLASH CATALYST Composants habillables personnalisés Conversion de l’illustration sélectionnée vers le composant 1 En maintenant l’illustration sélectionnée, dans l’affichage tête haute, cliquez sur Choisir un composant, puis sur Composant habillable. Remarque : l’option Composant habillable apparaît sous Convertir l’illustration en composant uniquement si la bibliothèque du projet contient un composant habillable personnalisé. Si cette option n’apparaît pas dans l’affichage tête haute, assurez-vous d’avoir importé le fichier FXPL définissant le composant, ou contactez le développeur. 2 Dans la boîte de dialogue Sélectionner le composant habillable, sélectionnez le composant habillable reçu du développeur. Flash Catalyst vous invite à nommer l’habillage en cours de création pour le composant et suggère un nom basé sur les conventions de bonnes pratiques de dénomination. Vous pouvez modifier ce nom si nécessaire ; voir « Dénomination de composants » à la page 34. L’illustration est à présent convertie en instance du composant habillable personnalisé. Comme pour certains composants intégrés plus complexes, vous devez éventuellement affecter des parties dans le composant habillable personnalisé. Dernière mise à jour le 24/5/2011 96 UTILISATION DE FLASH CATALYST Composants habillables personnalisés Attribution d’illustrations à des parties du composant 1 Dans l’affichage tête haute, cliquez sur Modifier des parties. L’affichage tête haute est actualisé pour indiquer que vous devez sélectionner des illustrations et les affecter à des parties du composant. 2 Sur le plan de travail, sélectionnez les illustrations adaptées pour une partie du composant, puis cliquez sur le nom d’une partie dans l’affichage tête haute pour les affecter. Répétez les étapes 1 et 2 autant de fois que nécessaire pour terminer l’affectation de parties à votre composant habillable personnalisé. Pour plus d’informations sur les parties et les états de composants, voir « Parties d’habillage et états des composants » à la page 30 et « Modification d’un composant en mode de modification » à la page 35. Dernière mise à jour le 24/5/2011 97 UTILISATION DE FLASH CATALYST Composants habillables personnalisés Exportation de l’habillage du composant pour l’envoi Lorsque vous avez terminé de modifier l’habillage de votre composant habillable personnalisé, vous pouvez le renvoyer au développeur pour l’intégration dans le projet Flash Builder. 1 Cliquez sur Exporter le package de bibliothèque (.fxpl) dans le panneau Bibliothèque du projet. 2 Enregistrez le fichier FXPL avec un nom conforme aux conventions convenues avec votre développeur. Pour consulter un aperçu des avantages que les composants habillables personnalisés peuvent apporter à un flux de production conception-développement pour les équipes de taille réduite à moyenne, voir « Flux de production pour équipe nombreuse entre Flash Builder et Flash Catalyst » à la page 7. Recherche d’informations auprès de la communauté Vous pouvez consulter une collection grandissante de composants habillables personnalisés disponibles au téléchargement dans le blog FlashCats. Ces composants présentent une large gamme d’options, y compris le composant contextuel utilisé dans les illustrations de cette page. Dernière mise à jour le 24/5/2011 98 Chapitre 19 : Eléments vidéo et audio Flash Catalyst CS5 prend en charge l’importation de fichiers vidéo FLV et F4V ainsi que de fichiers audio mp3. Les fichiers sont ajoutés à la section Médias du panneau Bibliothèque. Le panneau Bibliothèque affiche la taille de chaque fichier vidéo ou audio à droite du nom du fichier. Ajout d’une vidéo 1 Pour importer un fichier vidéo, sélectionnez Fichier > Importer > Fichier vidéo/audio. Recherchez le fichier, sélectionnez-le et cliquez sur Ouvrir. La vidéo s’affiche dans le panneau Bibliothèque. Pour en visionner un aperçu, sélectionnez la vidéo dans le panneau Bibliothèque et cliquez sur le bouton de lecture situé dans la partie supérieure du panneau. 2 Pour ajouter une vidéo au projet, faites-la glisser du panneau Bibliothèque vers le plan de travail. Flash Catalyst place automatiquement la vidéo dans un contrôle Lecteur vidéo. 3 Dans le panneau Propriétés, définissez les propriétés du lecteur vidéo. Pour supprimer les commandes de lecture vidéo, sélectionnez l’option Aucun(e) pour le paramètre Barre de commandes du panneau Propriétés. Propriétés du lecteur vidéo Vous pouvez importer un fichier FLV ou F4V contenant uniquement des données audio et aucune donnée vidéo. Un fichier vidéo ne contenant que des données audio se comporte comme un fichier vidéo normal. Utilisez cette méthode pour procéder à la lecture de fichiers audio volumineux, par exemple des commentaires ou des bandes sonores. Dernière mise à jour le 24/5/2011 99 UTILISATION DE FLASH CATALYST Eléments vidéo et audio Définition des propriétés du lecteur vidéo Pour définir les propriétés du lecteur vidéo, sélectionnez-le dans le plan de travail (ou dans le panneau Calques). Dans le panneau Propriétés, définissez les propriétés. Les propriétés d’un lecteur vidéo peuvent varier en fonction de l’état dans lequel il se trouve. Opacité Modifiez l’opacité de la vidéo dans le lecteur. Volume Définissez le volume de la piste audio dans le fichier vidéo. Barre de commandes Modifiez les commandes s’affichant sous le lecteur vidéo. Vous pouvez choisir entre Structure filaire, Standard et Aucun(e). Source : Etablissez un lien à la vidéo source dans la bibliothèque du projet. Vous pouvez lire différents fichiers vidéo avec le même lecteur vidéo en modifiant la propriété Source du lecteur en fonction de l’état. L’utilisation d’un seul lecteur vidéo constitue un moyen d’optimiser une application. Mise à l’échelle : Aucun Les vidéos ne sont pas mises à l’échelle et s’affichent à leur taille d’origine. Elles sont recadrées lorsque le cadre de sélection du lecteur est de dimensions inférieures à la vidéo source. Mise à l’échelle : Letterbox Cette option met la vidéo à l’échelle de manière uniforme et aux dimensions maximales sans la recadrer. Des barres blanches ou noires s’affichent autour de la vidéo si les proportions de la vidéo diffèrent de celles du cadre de sélection du lecteur. Mise à l’échelle : Zoom Cette option met la vidéo à l’échelle uniformément de manière à ce qu’elle remplisse entièrement le cadre. La vidéo peut être recadrée. Mise à l’échelle Etirer Cette option met la vidéo à l’échelle de manière non uniforme afin de l’ajuster au cadre de sélection du lecteur vidéo. La vidéo n’est pas recadrée mais peut paraître déformée à la suite de la mise à l’échelle non uniforme. Lecture automatique La lecture de la vidéo est lancée automatiquement. Boucle La vidéo est lue jusqu’à la fin, puis la lecture recommence au début. Muet Le volume est réglé sur 0. Texte accessible Texte reconnu par les technologies adaptatives, telles que les lecteurs d’écran. Vous pouvez utiliser une séquence d’actions pour définir la propriété d’une vidéo. Vous pouvez par exemple lier plusieurs boutons à un même lecteur vidéo. Le bouton 1 lit la vidéo 1, le bouton 2 la vidéo 2, et ainsi de suite. Ajoutez une interaction qui modifie l’opacité de la vidéo lorsque la vidéo est activée ou désactivée. Ajoutez une interaction pour couper le son de l’audio ou régler le volume de la vidéo sur un niveau précis. Pour plus d’informations, voir : « Création de séquences d’actions » à la page 67 « Modification de séquences d’actions » à la page 68 Dernière mise à jour le 24/5/2011 100 UTILISATION DE FLASH CATALYST Eléments vidéo et audio Contrôle de la lecture de la vidéo Lorsque vous ajoutez un lecteur vidéo à l’application, la valeur de sa propriété Barre de commandes est Structure filaire. Cette option se caractérise par des commandes de lecture vidéo d’aspect générique. Elles comportent un bouton de lecture/pause, une barre de progression, un indicateur de l’instant et un bouton Plein écran. • Pour modifier les commandes vidéo, utilisez la propriété Barre de commandes du panneau Propriétés. Vous pouvez choisir les commandes à structure filaire bleues, les commandes standard monochromes ou l’option Aucun(e) pour désactiver les commandes. • Vous pouvez également faire appel à une interaction pour contrôler la lecture de la vidéo. Vous pouvez par exemple masquer les commandes vidéo dans le panneau Propriétés et assigner ensuite des interactions (lecture, pause et arrêt) à des boutons personnalisés. L’activation du bouton Plein écran en cours de lecture ouvre la vidéo dans une nouvelle fenêtre. Toutes les interactions utilisées pour la transition vers un nouvel état de l’application ne fonctionneront pas. Pour visionner la vidéo en mode plein écran, n’incluez aucune interaction de transition vers l’état dans les commandes vidéo. Pour plus d’informations, voir : « Création de séquences d’actions » à la page 67 « Modification de séquences d’actions » à la page 68 Ajout d’effets sonores Vous pouvez ajouter des effets sonores à des transitions ou à des séquences d’actions déclenchées par des objets interactifs tels que les composants Bouton. Vous ne pouvez pas faire glisser des effets sonores du panneau Bibliothèque vers le plan de travail. 1 Importez des fichiers audio en sélectionnant Fichier > Importer > Fichier vidéo/audio. Recherchez le fichier .mp3 que vous souhaitez importer, sélectionnez-le et cliquez sur Ouvrir. Le fichier audio s’affiche dans le panneau Bibliothèque. Pour l’écouter, sélectionnez-le dans le panneau Bibliothèque et cliquez sur le bouton de lecture situé dans la partie supérieure du panneau. 2 Sélectionnez une transition ou une séquence d’actions dans le panneau Scénarios. Vous pouvez également sélectionner un objet interactif dans le plan de travail. 3 Dans le panneau Scénarios, sélectionnez Ajouter une action > Effet sonore. Sélectionnez un fichier audio et cliquez sur OK. Flash Catalyst comporte un série de sons Ces sons se trouvent dans le dossier C\Program Files\Adobe\Adobe Flash Catalyst CS5.5\sound effects (sous Windows) ou Applications/Adobe Flash Catalyst CS5.5/sound effects (sous Mac OS). Pour plus d’informations sur l’ajout et le contrôle de données audio, voir : « Définition de la navigation et du comportement à l’aide des interactions » à la page 56 « Création de séquences d’actions » à la page 67 « Modification de séquences d’actions » à la page 68 Dernière mise à jour le 24/5/2011 101 Chapitre 20 : Aperçu et publication Vous pouvez afficher un aperçu de vos projets dans un navigateur Web pendant que vous travaillez et publier vos projets interactifs finaux sous la forme de fichiers SWF ou AIR. Par défaut, Flash Catalyst génère deux versions d’un projet. La première, déployable sur le Web, comporte les fichiers nécessaires à l’exécution du projet en tant qu’application Web. Cette version ne peut pas être exécutée localement. La seconde, à exécution locale, ne peut pas être exécutée à partir d’un serveur Web ou d’une URL de lancement. Flash Catalyst comporte également une option permettant la génération d’une application Adobe AIR. Aperçu de votre projet dans un navigateur Web Il est conseillé de visualiser votre travail régulièrement dans un navigateur Web avant de publier une version finale. Cela vous permet de contrôler de façon plus efficace l’exactitude et les performances réelles de votre projet. ❖ Cliquez sur Fichier > Exécuter le projet. Flash Catalyst lance le projet dans votre navigateur par défaut. Affichez un aperçu de votre projet dans un navigateur Web en sélectionnant Fichier > Exécuter le projet. Sélection des options de publication et publication d’un projet 1 Enregistrez le projet et sélectionnez Fichier > Publier au format SWF/AIR. Les options Générer une version accessible, Générer une version chargeable sur un serveur Web et Générer une version consultable hors ligne sont sélectionnées par défaut. Dernière mise à jour le 24/5/2011 102 UTILISATION DE FLASH CATALYST Aperçu et publication Boîte de dialogue Publier au format SWF 2 Sélectionnez le dossier dans lequel vous voulez enregistrer les fichiers du projet. 3 Pour créer une application Adobe AIR, cochez la case Générer une application AIR (facultatif). 4 Pour incorporer des polices dans le contenu SWF, cochez l’option Incorporer les polices (facultatif). Si votre projet ne contient aucune police à incorporer, l’option correspondante est désactivée. Boîte de dialogue Incorporation des polices Incorporez toute police autre qu’Arial, Courier New, Georgia, Times New Roman et Verdana. L’incorporation de polices non Web garantit que les utilisateurs verront la conception exactement de la même manière que vous, qu’ils disposent ou non des mêmes polices que vous. Cliquez sur le bouton Avancées pour ouvrir la boîte de dialogue Incorporation des polices. Vous pouvez y spécifier les polices et les plages de caractères que vous souhaitez incorporer. En limitant le nombre d’éléments à incorporer, vous pouvez réduire la taille du fichier SWF publié. 5 Cliquez sur Publier. Dans le dossier spécifié, Flash Catalyst crée un sous-dossier auquel il attribue le nom du projet. A l’intérieur de ce dossier, il publie un dossier et des fichiers distincts pour chaque version du projet que vous publiez. Pour déployer le projet publié sur le Web, chargez le contenu complet du dossier deploy-to-web sur le serveur Web. Vous pouvez renommer le dossier de déploiement sur le Web, mais pas les fichiers qu’il contient. Dernière mise à jour le 24/5/2011 103 UTILISATION DE FLASH CATALYST Aperçu et publication Les fichiers publiés comportent l’enveloppe main.html pour le fichier SWF. Ce fichier fait référence au code swfobject.js qui procède à la vérification de la version de Flash Player et renvoie à sa mise à niveau. Vous pouvez réutiliser ce code dans vos fichiers HTML. Vous pouvez également utiliser une page HTML conçue dans un programme tel qu’Adobe Dreamweaver et insérer le fichier SWF publié dans cette page. Pour plus d’informations sur l’insertion de fichiers SWF dans les pages dans Dreamweaver, voir Insertion de fichiers SWF. Remarque : si le projet a été modifié dans Flash Builder, il est recommandé d’effectuer la publication depuis Flash Builder au lieu de Flash Catalyst. Optimisation des performances de l’application Pour optimiser les performances de votre application et réduire la taille du fichier, procédez comme suit : • Supprimez les objets inutilisés de l’application. Si un objet n’est pas utilisé dans un état (et n’est pas inclus dans une transition), supprimez-le de cet état. Sélectionnez-le et appuyez sur Supprimer pour le retirer de l’état actuel uniquement. Si un objet n’est pas utilisé dans une application, sélectionnez-le et cliquez sur le bouton Supprimer (représenté par une corbeille) dans le panneau Calques. • Convertissez les images en images liées. • Optimisez les graphiques vectoriels à l’aide des options Optimiser l’illustration de l’affichage tête haute. • Comprimez les graphiques dans le panneau Bibliothèque. Dans le panneau Bibliothèque, sélectionnez un graphique avec le bouton droit de la souris, cliquez sur Options de compression, réduisez la valeur du paramètre Qualité et cliquez sur OK. • N’incorporez pas les polices dont il est probable que les utilisateurs soient déjà équipés. Si vous souhaitez incorporer des polices, cliquez sur le bouton Avancées pour en limiter l’ampleur d’incorporation. Pour plus d’informations sur l’optimisation des illustrations, voir : « Optimisation des graphiques » à la page 76 Dernière mise à jour le 24/5/2011 104 Chapitre 21 : Intégration de Flash Catalyst et de Flash Builder Flash Catalyst CS 5.5 et Flash Builder 4.5 fournissent des flux de production étroitement intégrés permettant aux concepteurs et aux développeurs de collaborer et de travailler ensemble sur un même projet. Structure de projet permettant d’assurer la compatibilité avec Flash Catalyst Flash Catalyst CS 5.5 prend en charge un sous-ensemble de fonctionnalités et de composants disponibles dans la structure Flex 4.5. Par conséquent, il est important de structurer le projet pour un fonctionnement transparent dans Flash Catalyst. Planification du projet Lors de la planification de votre projet, identifiez les parties visuelles appartenant au concepteur et les parties logiques appartenant au développeur. En général, le concepteur est chargé des objets visuels, des animations et de la présentation de base du projet. Le développeur est habituellement chargé de l’architecture, de la fonctionnalité et de la présentation de niveau application du projet. Flash Catalyst et Flash Builder proposent plusieurs outils permettant de définir un contrat précis entre conception et développement. La séparation du projet entre projet principal et projets de bibliothèque compatibles avec Flash Catalyst définit clairement les parties du projet modifiables par le concepteur. L’utilisation de composants habillables fournit une séparation précise entre la logique et les visuels au niveau du composant. Utilisation de projets de bibliothèque Les projets de bibliothèque permettent de séparer la conception et la logique au niveau du projet. Il sont utilisés par les développeurs afin de séparer des parties du projet devant être modifiées dans Flash Catalyst. Les projets de bibliothèque simplifient également le processus de fusion, car généralement le développeur ne modifie pas le projet de bibliothèque lorsqu’il est en cours d’utilisation par le concepteur. Création d’un projet principal et d’un projet de bibliothèque complémentaire compatible avec Flash Catalyst 1 Créez le projet Flex principal. Pour plus d’informations, voir Création de projets Flex. 2 Créez un projet de bibliothèque Flex. Assurez-vous que le projet est compatible avec Flash Catalyst en sélectionnant Rendre le projet compatible avec Flash Catalyst dans l’assistant Nouveau projet de bibliothèque Flex. Pour plus d’informations, voir Création de projets de bibliothèque Flex. 3 Ajoutez le projet de bibliothèque au chemin de génération du projet Flex principal. Pour cela, accédez à Projet > Propriétés et sélectionnez Chemin de génération Flex. Sélectionnez l’onglet Bibliothèque et cliquez sur Ajouter un projet. Pour plus d’informations, voir Modification d’un chemin de génération de projet. Dernière mise à jour le 24/5/2011 105 UTILISATION DE FLASH CATALYST Intégration de Flash Catalyst et de Flash Builder 4 Placez les composants habillables et les habillages dans le projet de bibliothèque et les fichiers de code dans le projet principal. Remarque : le projet principal dépend du projet de bibliothèque. Par conséquent, la bibliothèque ne peut contenir aucun code dépendant du projet principal et doit être autonome. Voir aussi « Transfert de fichiers entre Flash Builder et Flash Catalyst » à la page 106 Utilisation de composants habillables L’architecture d’habillage de Flex permet de créer des composants habillables pouvant être étendus, qui sont compatibles avec Flash Catalyst. Grâce à la création de composants habillables dans Flash Builder et la création visuelle d’habillages dans Flash Catalyst, vous pouvez séparer la conception et la logique au niveau du composant. Un composant habillable contient la partie logique d’un composant, tandis que l’habillage contient les éléments visuels et les règles de présentation. En outre, un composant habillable peut indiquer que son habillage contient des parties et des états. Le composant hôte peut contrôler les parties et les états de l’habillage par programmation. En restreignant la communication entre le composant habillable et ses habillages aux parties et aux états, vous obtenez deux parties indépendantes et flexibles. Pour plus d’informations sur la création de composants habillables personnalisés dans Flash Builder, voir Exemple : création d’un composant Spark habillable. après la création d’une définition de composant habillable dans Flash Builder, créez un exemple d’habillage initial. Dans ce cas, si vous importez le projet dans Flash Catalyst, l’habillage apparaît dans le panneau Composants de Flash Catalyst. Vous pouvez alors facilement modifier l’habillage dans Flash Catalyst. La création d’un exemple d’habillage aide le concepteur à comprendre la structure de base de l’habillage. Voir aussi « Composants habillables personnalisés » à la page 91 Utilisation du vérificateur de compatibilité Flash Catalyst pour rationnaliser votre flux de travail de développement de conception Vérification de la compatibilité avec Flash Catalyst Comme tout outil de codage visuel, Flash Catalyst prend en charge uniquement un sous-ensemble de code Flex. Toutefois, Flash Builder fournit un vérificateur de compatibilité qui indique précisément les parties du code pouvant être modifiées dans Flash Catalyst. Lorsque vous créez un projet compatible avec Flash Catalyst dans Flash Builder, le vérificateur de compatibilité avec Flash Catalyst (Projet > Propriétés > Flash Catalyst) est automatiquement activé. Lorsque vous créez un projet dans Flash Catalyst et l’importez dans Flash Builder, il est automatiquement configuré pour être compatible avec Flash Catalyst. Si vous introduisez des incompatibilités lors de la modification du projet, Flash Builder affiche les erreurs de compatibilité dans la vue Erreurs en indiquant les parties du code pouvant être modifiées dans Flash Catalyst. Vous ne devez pas nécessairement résoudre toutes les erreurs de compatibilité avant d’ouvrir un projet dans Flash Catalyst. La colonne « Type » de la vue Erreurs affiche l’impact de chaque erreur de compatibilité. Les erreurs qui empêchent l’ouverture du projet dans Flash Catalyst s’affichent sous forme d’avertissements. Les erreurs moins graves s’affichent comme notifications d’« information ». Dernière mise à jour le 24/5/2011 106 UTILISATION DE FLASH CATALYST Intégration de Flash Catalyst et de Flash Builder Type d’incompatibilité Description Incompatibilité de projet Le projet ne peut pas être ouvert dans Flash Catalyst. Incompatibilité de fichier Le fichier ne peut pas être modifié dans Flash Catalyst. Toute incompatibilité dans l’application principale rend le projet incompatible. Incompatibilité de composant habillable Le composant ne peut pas être habillé dans Flash Catalyst ou la partie d’habillage ne peut pas être affectée dans Flash Catalyst. Incompatibilité de données en phase de conception Les données de liste sont contrôlées par un code d’application non modifiable dans Flash Catalyst. Vous pouvez modifier l’aspect de la liste dans Flash Catalyst. Avertissement de compatibilité avec Flash Catalyst Cet avertissement n’affecte pas la capacité de modification du projet dans Flash Catalyst. Il peut toutefois indiquer une expérience de modification non transparente. Pour plus d’informations sur les erreurs de compatibilité avec Flash Catalyst, voir www.adobe.com/go/learn_fcprojectcompat_fr. Transfert de fichiers entre Flash Builder et Flash Catalyst Les fichiers FXP permettent d’échanger un projet Flex complet ou des composants, des habillages de composant et des ressources entre un concepteur et un développeur. Pour les projets complexes, vous pouvez structurer l’interface utilisateur du projet sous forme de série de composants habillables et d’habillages, à l’aide d’un projet de bibliothèque. Pour plus d’informations, voir Utilisation de projets de bibliothèque Flex. Vous pouvez ensuite transmettre des fichiers FXLP en allers-retours entre Flash Builder et Flash Catalyst afin d’échanger uniquement les habillages de composants et les ressources de conception. Pour s’assurer que tout est fait dans l’ordre, le créateur peut importer les fichiers FXPL dans un projet Flash Catalyst, créer des habillages visuels et ajouter l’interactivité. Utilisez les flux de production d’exportation et d’importation suivants pour transmettre les fichiers FXP et FXPL sous forme d’allers-retours entre Flash Builder et Flash Catalyst. Transfert de fichiers de Flash Builder à Flash Catalyst • Pour exporter un fichier FXP ou FXPL de Flash Builder vers Flash Catalyst, sélectionnez Projet > Flash Catalyst > Exporter un projet Flash Catalyst. • Pour importer le fichier FXP ou FXPL de Flash Builder dans Flash Catalyst, accédez à Fichier > Importer et sélectionnez Fichier Adobe FXG (.fxg) ou Package de bibliothèque (.fxpl). Transfert de fichiers de Flash Catalyst à Flash Builder • Pour exporter un fichier FXP ou FXPL de Flash Catalyst vers Flash Builder, accédez à Fichier > Exporter et sélectionnez Fichier Adobe FXG (.fxg) ou Package de bibliothèque (.fxpl). • Pour importer un fichier FXP ou FXPL de Flash Catalyst dans Flash Builder, sélectionnez Projet > Flash Catalyst > Importer un projet Flash Catalyst. Modification de fichiers FXP à l’aide de la commande Editer le projet dans Flash Catalyst Si Flash Builder et Flash Catalyst sont installés sur le même ordinateur, vous pouvez utiliser la commande Editer dans Flash Catalyst pour modifier les fichiers FXP. Dernière mise à jour le 24/5/2011 107 UTILISATION DE FLASH CATALYST Intégration de Flash Catalyst et de Flash Builder Pour plus d’informations, voir « Commande Editer le projet dans Flash Catalyst » à la page 107. Fusion de modifications de Flash Catalyst à Flash Builder Lors de l’importation de fichiers FXP ou FXPL de Flash Catalyst dans Flash Builder, vous pouvez comparer et fusionner les différences entre les deux projets à l’aide de l’éditeur de comparaison. Vous pouvez également utiliser un outil de fusion tiers de votre choix. Lorsque vous créez des éléments de conception dans Flash Catalyst, vous pouvez les intégrer dans Flash Builder en important le fichier FXP ou FXPL avec les méthodes suivantes. • Importez les éléments de conception dans un nouveau projet, puis comparez et fusionnez les modifications à l’aide des outils de Flash Builder. • Importez le contenu de la bibliothèque dans le projet existant. • Remplacez le fichier FXP existant avec la version mise à jour uniquement si aucune modification n’a été apportée au projet dans l’intervalle. Remarque : il est impossible de remplacer les projets de bibliothèque (.fxpl). Pour comparer les projets à l’aide de l’éditeur de comparaison, sélectionnez les projets en maintenant la touche Ctrl enfoncée tout en cliquant sur les projets à comparer. Ensuite, cliquez avec le bouton droit de la souris sur les projets sélectionnés et choisissez Comparer > Réciproquement. Les résultats s’affichent dans le panneau Comparaison de texte. Remarque : lors de la fusion, vous observez plusieurs modifications dans les fichiers de paramètres, tels que actionScriptProperties, ou dans les fichiers en sortie, tels que bin-debug, ou dans d’autres parties du projet. Vous pouvez généralement ignorer ces modifications et vous concentrer uniquement sur les modifications du dossier source. Pour plus d’informations sur l’utilisation de l’éditeur de comparaison, voir la documentation d’Eclipse. Commande Editer le projet dans Flash Catalyst Utilisez la commande Editer le projet dans Flash Catalyst si vous disposez de Flash Builder et de Flash Catalyst sur le même ordinateur. Vous pouvez lancer Flash Catalyst depuis Flash Builder et apporter directement au projet toute modification de conception nécessaire, sans transmettre les fichiers entre Flash Builder et Flash Catalyst. 1 Pour lancer Flash Catalyst directement depuis Flash Builder, sélectionnez Projet > Flash Catalyst > Editer le projet dans Flash Catalyst. Vous pouvez également sélectionner Flash Catalyst > Editer le projet dans Flash Catalyst dans le menu contextuel du projet. 2 Modifiez la création de l’application, si nécessaire. Lorsque vous modifiez le projet dans Flash Catalyst, le projet est verrouillé dans Flash Builder. Le projet est verrouillé afin d’écarter toute modification conflictuelle. 3 Enregistrez les modifications et fermez le projet dans Flash Catalyst. Vous ne devez pas nécessairement quitter Flash Catalyst. 4 Dans Flash Builder, sélectionnez Projet > Flash Catalyst > Reprendre le travail sur le projet dans Flash Builder. Vous pouvez également sélectionner Flash Catalyst > Reprendre le travail sur le projet dans Flash Builder dans le menu contextuel du projet. Dernière mise à jour le 24/5/2011 108 UTILISATION DE FLASH CATALYST Intégration de Flash Catalyst et de Flash Builder Dans ce cas, vous êtes invité à enregistrer les modifications effectuées dans Flash Catalyst. L’enregistrement des modifications renvoie le projet récemment enregistré dans Flash Builder. En arrière plan, la version du projet exportée initialement à partir de Flash Builder est supprimée lorsque la version récemment enregistrée du projet est importée avec succès à partir de Flash Catalyst. Les modifications de création sont ajoutées au projet et le projet est ouvert pour être modifié dans Flash Builder. Dernière mise à jour le 24/5/2011 109 Chapitre 22 : Raccourcis clavier Les raccourcis clavier vous permettent de sélectionner rapidement des outils et d’exécuter des commandes sans avoir recours aux menus. S’ils sont disponibles, les raccourcis clavier apparaissent à droite du nom de la commande dans le menu. Outre les raccourcis clavier, vous pouvez utiliser des menus contextuels pour accéder à de nombreuses commandes. Les menus contextuels affichent les commandes associées à l’outil, à la sélection ou au panneau actif. Pour afficher un menu contextuel, cliquez sur une zone avec le bouton droit de la souris (sous Windows) ou en maintenant la touche Ctrl enfoncée (sous Mac OS). Remarque : les raccourcis sont disponibles dans tous les modules avec des claviers US complets, sauf indication contraire. L’étendue de cette fonctionnalité peut varier en fonction des claviers et des langues. Affichage et exploration du plan de travail Résultat Windows Mac OS Commute entre les espaces de travail Création et Code Ctrl + P Commande + P Actualise le plan de travail F5 F5 Affiche/masqu e tous les panneaux de l’espace de travail F4 ou tabulation F4 ou tabulation Affiche/masqu e l’affichage tête haute F7 F7 Zoom avant Ctrl + = ou Ctrl + + Commande + = ou Commande + + Zoom arrière Ctrl + - Commande + - Ajuste le plan de travail à la fenêtre Ctrl + 0 Commande + 0 Commute en zoom 50 % Ctrl + 5 Commande + 5 Commute en zoom 100 % Ctrl + 1 ou Ctrl + Alt + 0 Commande + 1 ou Commande + Option + 0 Commute en zoom 200 % Ctrl + 2 Commande + 2 Commute en zoom 400 % Ctrl + 4 Commande + 4 Commute en zoom 800 % Ctrl + 8 Commande + 8 Dernière mise à jour le 24/5/2011 110 UTILISATION DE FLASH CATALYST Raccourcis clavier Résultat Windows Mac OS Affiche les règles dans le plan de travail Ctrl + R Commande + R Affiche la grille dans le plan de travail Ctrl + 7 Commande + 7 Aligne sur la grille Ctrl + Maj + ‘ Commande + Maj + ‘ Verrouille les guides Ctrl + Alt + ; Commande + Option + ; Affiche les guides Ctrl + ; Commande + ; Aligne sur les guides Ctrl + Maj + ; Commande + Maj + ; Modifie les paramètres du plan de travail Ctrl + J Command + J Active la recherche de texte dans l’espace de travail Code Ctrl + F Commande + F Accède à l’aide de la communauté F1 F1 Création et exécution de projets Résultat Windows Mac OS Crée un projet Ctrl + N Commande + N Enregistre un projet Ctrl + S Commande + S Enregistre un projet en tant que nouveau fichier Ctrl + Maj + S Commande + Maj + S Enregistre une copie d’un projet Ctrl + Alt + S Commande + Alt + S Ouvre un projet Ctrl + O existant Commande + O Ferme un projet Ctrl + W Commande + W Exécute le projet dans un navigateur Ctrl + Entrée Commande + Retour Dernière mise à jour le 24/5/2011 111 UTILISATION DE FLASH CATALYST Raccourcis clavier Résultat Windows Mac OS Quitte l’application Flash Catalyst Ctrl + Q Commande + Q Utilisation des pages et des états Résultat Windows Mac OS Applique les mêmes propriétés à toutes les instances d’un même objet dans les autres états Ctrl + Alt + M Commande + Option + M Ajoute un nouvel état vierge Ctrl + Maj + B Commande + Maj + B Duplique un état Ctrl + Maj + D Commande + Maj + D Partage (copie) un objet avec (dans) tous les autres états Ctrl + Alt + A Commande + Alt + A Supprime de Ctrl + Del tous les états de l’application Commande + Del Supprime de l’état actuel Suppr ou Retour arrière Suppr ou Retour arrière Sélection d’outils dans le panneau Outils Résultat Windows Mac OS Outil Sélection directe A A Outil Sélection V V Outil Main H H Outil Q Transformation (rotation) Q Outil Zoom Z Z Outil Texte T T Dernière mise à jour le 24/5/2011 112 UTILISATION DE FLASH CATALYST Raccourcis clavier Résultat Windows Mac OS Outil Rectangle U arrondi U Outil Rectangle M M Outil Ellipse L L Outil Ligne N ou \ N ou \ Conversion d’illustrations en composants Résultat Windows Mac OS Convertit une illustration en composant Bouton Ctrl + Maj + U Commande +Maj + U Convertit une illustration en composant Entrée texte Ctrl + Maj + I Commande + Maj + I Convertit une illustration en Composant personnalisé/g énérique Ctrl + Maj + C Commande + Maj + C Modification et édition d’objets Résultat Windows Mac OS Ouvre un composant un mode de modification Ctrl + E Commande + E Ouvre une illustration dans Adobe Illustrator CS5 Ctrl + Alt + L Commande + Option + L Ouvre une Ctrl + Alt + P illustration dans Adobe Photoshop CS5 Commande + Option + P Groupe les objets sélectionnés Commande + G Ctrl + G Dernière mise à jour le 24/5/2011 113 UTILISATION DE FLASH CATALYST Raccourcis clavier Résultat Windows Mac OS Applique les mêmes propriétés à toutes les instances d’un même objet dans les autres états Ctrl + Alt + M Commande + Option + M Mettre au premier plan Ctrl + D Commande + D Mettre à l’arrière-plan Ctrl + B Commande + B Avance d’un plan Ctrl + T Commande + T Recule d’un plan Ctrl + K Commande + K Aligne à gauche les objets sélectionnés Ctrl + Alt + 1 Commande + Option + 1 Centre horizontaleme nt les objets sélectionnés Ctrl + Alt + 2 Commande + Option + 2 Aligne à droite les objets sélectionnés Ctrl + Alt + 3 Commande + Option + 3 Aligne en haut les objets sélectionnés Ctrl + Alt + 4 Commande + Option + 4 Centre verticalement les objets sélectionnés Ctrl + Alt + 5 Commande + Option + 5 Aligne en bas les objets sélectionnés Ctrl + Alt + 6 Commande + Option + 6 Quitte le mode Echap de modification Echap Déplace de 1 pixel Touches fléchées Touches fléchées Déplace de 10 pixels Maj + Touches fléchées Maj + Touches fléchées Annule une modification Ctrl+Z Commande+Z Dernière mise à jour le 24/5/2011 114 UTILISATION DE FLASH CATALYST Raccourcis clavier Utilisation du panneau Propriétés Résultat Windows Mac OS Active/désactiv I e la pipette dans le sélecteur de couleurs I Augmente/dim Flèches vers le haut/bas inue par incrément les valeurs numériques Flèches vers le haut/bas Atteint les valeurs maximales ou minimales autorisées Page précédente/suivante Page précédente/suivante Utilisation des transitions et des séquences d’actions Résultat Windows Mac OS Ajoute une nouvelle interaction Ctrl + Alt + I Commande + Option + I Active la lecture Ctrl + Maj + P ou Entrée ou l’arrêt dans le scénario Commande + Maj + P ou Entrée Ajoute des transitions régulières Commande + Option + T Ctrl + Alt + T Dernière mise à jour le 24/5/2011 115 Chapitre 23 : 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 24/5/2011 116 UTILISATION DE FLASH CATALYST 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 24/5/2011