Retrouvez gratuitement la notice de l'appareil FLASH CATALYST CS5.5 ADOBE au format PDF.
Téléchargez la notice de votre Logiciel de design et développement web au format PDF gratuitement ! Retrouvez votre notice FLASH CATALYST CS5.5 - ADOBE et reprennez votre appareil électronique en main. Sur cette page sont publiés tous les documents nécessaires à l'utilisation de votre appareil FLASH CATALYST CS5.5 de la marque ADOBE.
Dessin de formes et de lignes Ajout de texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Affichage et masquage des règles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Contrôle de la lecture de la vidéo Ajout d’effets sonores
Commande Editer le projet dans Flash Catalyst Chapitre 22 : Raccourcis clavier Affichage et exploration du plan de travail
FXPL utilisables à la fois dans Flash Catalyst et Flash Builder. Voir « Flux de production entre Flash Catalyst CS et Flash Builder » à la page 4.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Liste de données. Voir « Présentation des listes de données » à la page 85.
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.
états des composants Voir les flux de travail 2 ou 3
Création d’une structure filaire ou importation d’une création haute fidélité Créez une structure filaire de la
Création ou acquisition des illustrations et des éléments vidéo et audio supplémentaires Créez les illustrations, ainsi
Importation d’illustrations, de données vidéo et de données audio Importez les illustrations multicalques dans Flash
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
Création de composants interactifs et définition d’états de composant Convertissez les illustrations en composants
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..
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
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.
• Confirmer la compatibilité...
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.
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.
• Configurer un ou des projets de bibliothèque
« 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.
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é.
Panneau Outils Le panneau Outils comporte des outils pour la création, la sélection et la transformation d’objets, dont
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,
Affichage tête haute L’affichage tête haute fournit un accès rapide aux principales commandes liées à l’action actuelle
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.
• 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.
« Listes de données et panneaux de défilement » à la page 84 et « Création de maquettes d’application » à la page 18.
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.
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
Vous pouvez créer un projet de deux manières différentes :
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
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
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.
• Importez un package de bibliothèque Flash Catalyst.
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
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.
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.
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.
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
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.
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.
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.
3 Recherchez le fichier que vous souhaitez importer, sélectionnez-le, puis cliquez sur Ouvrir.
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.
2 Recherchez le fichier, sélectionnez-le et cliquez sur Ouvrir.
é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.
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.
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.
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.
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.
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.
• Maintenez la touche Maj enfoncée lorsque vous utilisez les outils Rectangle ou Rectangle arrondi pour créer un carré parfait.
• Faites glisser la souris lorsque vous dessinez des triangles, des hexagones, des octogones et des étoiles pour les faire pivoter.
Voir également « Modification des propriétés de dessin et de texte » à la page 21.
Texte de point Ce type de texte ne comporte aucun retour à la ligne automatique. Le champ s’agrandit pour contenir
Texte captif Le texte captif se trouve dans un cadre de sélection dont la largeur et la hauteur sont fixes. Le texte ne
é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
• 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.
Dans le panneau Propriétés, choisissez Texte de point, Texte captif ou Ajuster à la hauteur.
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.
• 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.
• 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.
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.
• 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.
(sous Mac) enfoncée pour redimensionner l’objet par rapport à son centre, et non à partir d’un angle ou d’un côté.
Pour dimensionner un composant, vous pouvez :
CS5. Voir « Lancement et modification dans Adobe Illustrator » à la page 81.
Dans le panneau Propriétés, vous pouvez modifier les propriétés des formes, des lignes et du texte.
• 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.
Rotation Faites pivoter un objet. La valeur applique un angle de rotation compris en 0 et 360 % à la position d’origine
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.
La plupart des formes et des lignes partagent les mêmes propriétés.
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.
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.
• 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
Bouchons : Aucun(e) Le bouchon désigne l’extrémité d’un tracé ouvert. L’option Aucun(e) laisse l’extrémité du tracé
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.
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.
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é.
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é.
• 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.
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.
Vous pouvez formater le texte en utilisant les options du 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.
Propriétés. Choisissez une autre couleur ou utilisez la pipette pour prélever un échantillon de couleur sur le plan de travail.
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,
Décalage vertical Définissez la position du texte par rapport à sa ligne de base en choisissant l’une des options
Interlettrage L’interlettrage diffère du crénage en ce qu’il ajuste l’espacement pour des groupes de lettres ou des blocs
Marge Ajoutez de l’espace entre le texte et la bordure du cadre de sélection.
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.
• 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.
Remarque : vous ne pouvez pas animer les modifications apportées aux 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.
Angle Modifiez l’angle auquel une ombre portée ou un biseau s’étendent par rapport à l’objet.
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.
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.
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 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.
Normal Applique à la sélection la couleur de fusion, sans interaction avec la couleur de base. Il s’agit du mode par
Obscurcir Sélectionne la couleur de base ou de fusion (la plus sombre des deux) comme couleur finale. Les zones plus
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
Soustraction Analyse les informations chromatiques de chaque calque et soustrait la couleur de fusion de la couleur
Superposition Multiplie l’inverse des couleurs de dégradé et de départ. La couleur d’arrivée est toujours plus claire.
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
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
Lumière tamisée Assombrit ou éclaircit les couleurs, selon la couleur de fusion. L’effet est semblable à la projection
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
Exclusion Produit un effet semblable au mode Différence avec un moindre contraste. La fusion avec du blanc inverse
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
Saturation Crée une couleur finale avec la luminance et la teinte de la couleur de base et la saturation de la couleur de
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
Eclaircir. Il choisit les valeurs les plus élevées des couleurs de base et de fusion afin de créer la couleur finale.
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.
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.
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.
Bibliothèque commune » à la page 33 pour plus d’informations.
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
• 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.
ê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.
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.
« 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
Curseur horizontal Un curseur horizontal permet à l’utilisateur d’effectuer son choix dans une plage de valeurs
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.
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
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
Barre d’onglets Ensemble d’onglets, généralement utilisé pour la navigation de site.
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.
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 :
ListeEquipe plutôt que ListeDonnées42.
à 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.
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.
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.
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
é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.
Lorsqu’un composant est en mode de modification, vous pouvez :
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
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.
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.
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.
é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
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
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
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.
« Modification des propriétés de dessin et de texte » à la page 21
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.
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.
• 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.
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.
Le côté droit de ce composant est désormais attaché (contraint) au bord droit de l’application parent.
A Les contraintes de centre sur un composant sont indiquées par un ressort.
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.
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.
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.
Utilisation de l’option de mosaïque pour contrôler la présentation du groupe.
Verticale Les éléments dans le groupe sont disposés verticalement. Le panneau Propriétés comporte un paramètre
Horizontale Les éléments dans le groupe sont disposés horizontalement. Le panneau Propriétés comporte un
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.
Etats d’application : Un projet simple peut comporter une vue affichée par défaut lors de l’exécution du projet et une
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.
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.
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.
• Pour ajouter un nouvel état basé sur l’état existant, sélectionnez ce dernier dans le panneau Etats et cliquez sur Dupliquer l’état.
Nouvel état vierge. 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.
• 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.
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
Pensez aux points suivants lorsque vous décidez d’attribuer un nom à un état d’application ou de composant :
• 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 @!#$%^&*().
• 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.
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 :
• 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
Procédez comme suit pour afficher ou masquer des objets dans un état.
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é.
• 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.
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.
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).
Sélectionnez les états avec lesquels vous souhaitez partager l’objet.
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.
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é.
• 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).
• 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.
• 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.
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 groupe dans le panneau Calques se limite à cet objet uniquement. Les propriétés du groupe s’affichent dans le panneau Propriétés.
Remarque : utilisez l’outil Sélection directe pour sélectionner les enfants d’un groupe dans le plan de travail.
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.
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.
Pour plus d’informations, voir « Types d’états » à la page 46.
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
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.
• 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 ;
• la lecture, la pause ou l’arrêt d’un clip vidéo.
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
4 Sélectionnez une interaction, par exemple Lire la transition vers l’état ou Aller à l’URL.
• 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.
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
8 Cliquez sur Sélectionner. 9 Sélectionnez l’état de l’autre composant. 10 Cliquez sur OK.
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.
3 Dans le panneau Interactions, cliquez sur Ajouter une interaction.
4 Dans le panneau Interactions, sélectionnez Lire la séquence d’actions (dans le deuxième menu).
5 Sélectionnez l’objet SWF dans le plan de travail. Cliquez sur Ajouter une action dans le panneau Scénarios, puis
Vous affectez ainsi l’action Lire le fichier SWF au fichier SWF.
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.
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
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.
à l'état Etat final
à des contenus différents.
Les effets de transition suivants sont ajoutés automatiquement :
• Déplacer • Effectuer une rotation • Propriétés de texte
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.
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
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.
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
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.
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
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
Rebond Cette option se caractérise par un bond en arrière de l’objet déplacé avant d’atteindre sa position finale.
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.
Commande vidéo Lit, interrompt et arrête une vidéo. Importez une vidéo et ajoutez un lecteur vidéo afin d’en
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
Définir la propriété Modifie la propriété d’un composant ou d’un groupe à la suite d’une interaction de l’utilisateur.
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
Effectuer une rotation 3D Applique à un objet une rotation en trois dimensions. Dans le panneau Propriétés,
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.
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.
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
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
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 :
• 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.
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
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
3 Répétez l’étape n°2 pour d’autres objets ou ajoutez des actions supplémentaires au même objet.
5 Pour visionner la séquence d’actions, cliquez sur le bouton de lecture (représenté par une flèche pointant vers la
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.
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.
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.
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.
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.
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
5 Renommez le calque.
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.
4 Répétez les étapes 1 à 3 pour remplacer les illustrations restantes par le composant.
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,
3 Utilisez les options Faire correspondre la taille du panneau Aligner pour égaliser la hauteur ou la largeur des objets,
« 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.
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.
« Gestion des illustrations à l’aide des calques » à la page 55.
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.
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.
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.
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 :
• 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.
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.
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.
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
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.
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.
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.
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.
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.
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
3 Pour reconvertir une image liée en image incorporée, dans le panneau Bibliothèque du projet, cliquez avec le
• 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.
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.
• 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.
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.
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.
2 Choisissez la commande Modifier > Editer dans Adobe Illustrator.
4 Apportez vos modifications.
5 Lorsque vous avez fini d’apporter des modifications, cliquez sur Terminer dans la partie supérieure de la fenêtre de
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.
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.
3 Si vous avez déjà installé les extensions, cliquez sur OK pour fermer le message.
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.
Pour plus d’informations sur l’apport de modifications dans Photoshop, voir Utilisation d’Adobe Photoshop CS5.
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.
• 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.
Catalyst. Utilisation du format FXG.
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.
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.
• 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
1 Positionnez une copie des premiers éléments de la liste de données sur le plan de travail. Ajoutez-y tout autre
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
5 Dans l’affichage tête haute, cliquez sur Convertir en partie Liste de données > Elément répété.
6 Sélectionnez l’élément répété et cliquez sur Verticale, Horizontale ou Mosaïque dans la section Présentation du
7 Cliquez deux fois sur l’élément répété pour l’ouvrir dans le panneau Pages/Etats.
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.
1 Sélectionnez le composant de liste de données sur le plan de travail et ouvrez le panneau Données en phase de
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é
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
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.
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
Supprimer l'image de Données en phase de conception.
Pour créer un panneau de défilement dans Flash Catalyst, vous aurez besoin des éléments suivants :
• 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é.
2 Ajoutez le contenu dont vous souhaitez permettre le défilement. Pour créer un texte accessible par défilement,
3 Positionnez le texte accessible par défilement ou alignez plusieurs objets dans la zone du panneau. Prévoyez une
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
Un message dans l’affichage tête haute vous rappelle de modifier les parties du composant. 6 Cliquez sur Modifier des parties.
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.
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
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.
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.
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
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
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.
vous devez sélectionner des illustrations et les affecter à des parties du composant.
états des composants » à la page 30 et « Modification d’un composant en mode de modification » à la page 35.
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.
équipe nombreuse entre Flash Builder et Flash Catalyst » à la page 7.
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.
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
3 Dans le panneau Propriétés, définissez les propriétés du lecteur vidéo. Pour supprimer les commandes de lecture
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
Mise à l’échelle : Letterbox Cette option met la vidéo à l’échelle de manière uniforme et aux dimensions maximales
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
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.
Pour plus d’informations, voir : « Création de séquences d’actions » à la page 67 « Modification de séquences d’actions » à la page 68
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.
Aucun(e) pour désactiver les commandes.
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
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
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
3 Dans le panneau Scénarios, sélectionnez Ajouter une action > Effet sonore. Sélectionnez un fichier audio et cliquez
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
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.
1 Enregistrez le projet et sélectionnez Fichier > Publier au format SWF/AIR.
4 Pour incorporer des polices dans le contenu SWF, cochez l’option Incorporer les polices (facultatif). Si votre projet
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.
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.
Pour optimiser les performances de votre application et réduire la taille du fichier, procédez comme suit :
(représenté par une corbeille) dans le panneau Calques.
• 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.
Pour plus d’informations sur l’optimisation des illustrations, voir : « Optimisation des graphiques » à la page 76
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.
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.
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.
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.
Bibliothèque et cliquez sur Ajouter un projet. Pour plus d’informations, voir Modification d’un chemin de génération de projet.
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.
« 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
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 ».
Incompatibilité de fichier
Toute incompatibilité dans l’application principale rend le projet incompatible.
Flash Catalyst. Vous pouvez modifier l’aspect de la liste dans Flash Catalyst.
Catalyst. Il peut toutefois indiquer une expérience de modification non transparente.
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.
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).
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.
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.
• 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.
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
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
3 Enregistrez les modifications et fermez le projet dans Flash Catalyst. Vous ne devez pas nécessairement quitter
4 Dans Flash Builder, sélectionnez Projet > Flash Catalyst > Reprendre le travail sur le projet dans Flash Builder. Vous
Les modifications de création sont ajoutées au projet et le projet est ouvert pour être modifié dans Flash Builder.
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.
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.
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
Si vous décidez d’ignorer cette étape, vous pourrez enregistrer votre produit à tout moment en cliquant sur Aide > Enregistrement du produit.
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 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.
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.
• Mac OS : [Disque de démarrage]/Applications/[Application Adobe]