Retrouvez gratuitement la notice de l'appareil FLASH CATALYST CS5 ADOBE au format PDF.
Téléchargez la notice de votre Développement Web au format PDF gratuitement ! Retrouvez votre notice FLASH CATALYST CS5 - 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 de la marque ADOBE.
Noms des pages et des états
Propriétés de texte
Ajout d’effets sonores
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]
Les applications Flash Catalyst sont principalement de deux types : microsites ou applications centrées sur les données. Dans ce document, le microsite est une application qui, une fois publiée dans Flash Catalyst, est complète. Elle ne nécessite aucun développement ultérieur. L’application centrée sur les données devra en revanche faire l’objet de développements supplémentaires, par exemple l’intégration de composants contenant des données ou des services Web externes. Un développeur Flex complétera une application centrée sur les données dans Adobe Flash Builder. Les flux de travaux pour la conception de microsites et d’applications centrées sur les données sont semblables.
GN Suivez ces étapes de flux de travaux générales lors de la création dans Flash Catalyst de microsites et d’applications centrées sur les données. Planification de l’application Commencez par rédiger une spécification détaillée du projet. Cette spécification doit
Création ou acquisition des illustrations et des éléments vidéo et audio Créez les illustrations ainsi que les éléments
Importation d’illustrations, de données vidéo et de données audio Démarrez Flash Catalyst. Importez les illustrations
Une fois une illustration importée ou créée dans Flash Catalyst, vous pouvez la modifier dans Illustrator ou Photoshop, puis la renvoyer, ainsi modifiée, à Flash Catalyst. L’aller-retour de modifications constitue une extension des fonctionnalités de dessin et d’édition graphique de Flash Catalyst et améliore le processus de conception itératif. Pour plus d’informations, voir « Aller-retour de modifications » à la page 62. Création et modification des états de page Créez des pages en fonction de la spécification du projet. Pour plus d’informations, voir « Pages et états » à la page 20. Création de composants interactifs et définition d’états de composant Convertissez les illustrations en composants
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
Flux de travaux Flash Catalyst
Les composants peuvent avoir plusieurs états. Un bouton peut avoir par exemple les états Haut, Dessus, Bas et Désactivé. Créez ou modifiez les différents états de chaque composant interactif en fonction de la spécification du projet. Remarque : les étapes de création des états de page et des composants interactifs sont interchangeables. Certains concepteurs préfèrent commencer par créer tous les composants interactifs avant de les ajouter aux pages et aux états. Définition des interactions et des transitions Ajoutez des interactions définissant ce qui se produit lorsque les
Utilisez le panneau Scénarios pour ajouter des transitions régulières animées entre les états de page et de composant ainsi que pour les modifier. Pour plus d’informations sur les interactions, voir « Interactions » à la page 36. Pour plus d’informations sur les transitions, voir « Transitions et séquences d’actions » à la page 38. Test et publication du projet Une fois un microsite créé, vous pouvez publier le projet final en tant qu’application Web ou application de bureau. Pour plus d’informations, voir « Publication » à la page 70. Partage du projet avec un développeur Flex Enregistrez le fichier de projet Flash Catalyst centré sur les données
Flash Catalyst. L’exportation de la bibliothèque du projet crée un fichier unique contenant tous les éléments de la bibliothèque du projet. Le package est enregistré au format FXPL. Pour plus d’informations sur l’exportation d’une bibliothèque Flash Catalyst, voir « Intégration dans Flash Builder » à la page 73.
Vous pouvez créer un projet de deux manières différentes :
Illustrator ou importez une création Fireworks exportée. Cette approche vous permet d’utiliser votre programme Adobe Creative Suite préféré pour la conception, puis de convertir rapidement l’illustration en application interactive opérationnelle. Création d’un projet avec un plan de travail vierge : 1 Démarrez Flash Catalyst. Dans la section Créer un nouveau projet de l’écran de bienvenue, sélectionnez Projet Adobe Flash Catalyst. Remarque : si un projet est déjà ouvert, sélectionnez Fichier > Nouveau Projet pour lancer un nouveau projet vierge. 2 Dans la boîte de dialogue Nouveau projet, attribuez un nom au projet, saisissez des valeurs pour les dimensions et
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.
Flux de travaux Flash Catalyst
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 7.
Vous pouvez importer des illustrations dans Flash Catalyst de différentes manières.
Remarque : Flash Catalyst peut importer uniquement les documents de conception dont le volume est inférieur à 40 Mo.
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
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.
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.
La boîte de dialogue Options d’importation Illustrator comporte des paramètres de fidélité qui déterminent la manière dont Flash Catalyst importe des objets avec filtres, textes, dégradés et dégradés de formes. Filtres Conserver le caractère modifiable Conserve les filtres Illustrator modifiables pris en charge par Flash Catalyst. Les filtres pris en charge sont Flou (Flou gaussien), Ombre portée, Ombre intérieure, Biseau, Lueur, Lueur intérieure. Une fois les filtres importés, vous pouvez les modifier dans le panneau Propriétés. Développer Convertissez les objets avec filtres en ensembles de vecteurs ou d’images bitmap afin de parvenir à un aspect proche de celui d’origine obtenu dans Illustrator. Par exemple, le développement d’une ombre portée sur un rectangle créé une image de l’ombre portée derrière le rectangle d’origine. L’image et l’ombre sont deux objets distincts d’un groupe dans le panneau Calques. Aplatir Convertissez les objets avec filtres en images (de trame) bitmap individuelles. L’image et le filtre forment une image non modifiable.
Conserver le caractère modifiable Importez les textes issus d’Illustrator en tant qu’objets modifiables. Une fois importé, le texte modifiable peut être changé. Vous pouvez également en redimensionner le cadre de sélection et lui appliquer des propriétés de mise en forme dans le panneau Propriétés. Le texte modifiable risque de perdre en fidélité à l’importation. Contours vectoriels Convertissez le texte en chemins vectoriels ressemblant à l’aspect rendu du texte. Aplatir Convertissez le texte en une seule image (de trame) bitmap.
Conversion automatique Flash Catalyst décide quand conserver le caractère modifiable des dégradés et quand les
Conversion automatique Flash Catalyst décide quand conserver le caractère modifiable des dégradés de formes et quand les pixelliser. Le résultat dépend de différents paramètres heuristiques, tels que la complexité de l’élément et les dégradés de formes pris en charge. Aplatir Convertissez les objets avec dégradés de formes en une seule image (de trame) bitmap.
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.
Remarque : l’option Importer les calques invisibles importe tous les calques, y compris les calques qui sont masqués dans le fichier Photoshop. 4 Définissez la taille et la couleur du plan de travail. Sélectionnez les options de fidélité de l’importation et cliquez sur OK.
Les options de fidélité à l’importation à partir de Photoshop déterminent la manière dont Flash Catalyst importe les calques d’image, de forme et de texte. Calques d’image Conserver le caractère modifiable Conservez le caractère modifiable des calques d’image avec effets. Les effets de calques sont importés en tant qu’objets distincts dans le panneau Calques de Flash Catalyst. Aplatir Convertissez les calques d’image avec effets en une seule image (de trame) bitmap.
Recadrer Importez le masque vectoriel qui définit une forme, mais recadrez l’image bitmap résultante en fonction des limites du masque. Aplatir Convertissez les calques de forme avec effets en une seule image (de trame) bitmap.
Conserver le caractère modifiable Importez les calques de texte en tant qu’objets de texte modifiables. Une fois importé, le texte modifiable peut être changé. Vous pouvez également en redimensionner le cadre de sélection et lui appliquer des propriétés de mise en forme dans le panneau Propriétés. Le texte modifiable risque de perdre en fidélité à l’importation. Contours vectoriels Convertissez le texte en chemins vectoriels ressemblant à l’aspect rendu du texte. Aplatir Convertissez les calques de texte avec effets en une seule image (de trame) bitmap.
1 Dans la boîte de dialogue Options d’importation Photoshop, cliquez sur le bouton Avancées.
2 Cliquez pour ouvrir le menu de sélection des compositions de calques Photoshop et sélectionnez-en une.
Dernier état du document. Ceci faisant, vous importez les illustrations de tous les calques qui étaient visibles lorsque vous avez enregistré le fichier Photoshop. Vous pouvez spécifier des options de fidélité individuelles pour chaque calque sélectionné. 3 Cliquez sur OK.
Lorsque vous importez des illustrations dans une composition de calques Photoshop, les illustrations sont centrées sur le plan de travail de Flash Catalyst. Pour conserver la mise en forme et la position des compositions de calques, importez un calque d’arrière-plan dont les dimensions sont identiques à celles du plan de travail de Flash Catalyst.
1 Démarrez Flash Catalyst. 2 Dans la section Créer un projet depuis un fichier de création de l’écran de bienvenue, sélectionnez Depuis un fichier FXG.
Vous ne pouvez ouvrir qu’un seul projet à la fois. 3 Recherchez le fichier que vous souhaitez importer, sélectionnez-le, puis cliquez sur Ouvrir.
• Lorsque vous importez un fichier image unique, il est placé dans la bibliothèque du projet. Une instance est placée sur le plan de travail, dans l’état en cours d’utilisation. Un nouveau calque est ajouté au panneau Calques pour l’objet.
1 Cliquez sur Fichier > Importer > Fichier SWF. 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 « Interactions » à la page 36.
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 28.
Options de fidélité à l’importation à partir d’Illustrator Illustrator : filtres et effets Les filtres Illustrator suivants sont pris en charge par Flash Catalyst. Tous les autres filtres et effets sont pixellisés ou développés en cours d’importation.
• Style de la police • Epaisseur de la police • Taille de la police • Interligne • Souligné • Barré • Approche (Illustrator effectue une approche en unités de 1/000 cadratin ; FXG effectue une approche en pourcentage de la taille d’un point) « Ajout de texte » à la page 50 « Propriétés de texte » à la page 54 Illustrator : modes de fusion Tous les modes de fusion disponibles dans Illustrator sont pris en charge par Flash Catalyst.
Lorsque vous importez un fichier Photoshop, Flash Catalyst pixellise tous les effets des calques d’image, de forme et de texte. Vous pouvez faire appel aux options d’importation avancées de la boîte de dialogue pour définir les options de fidélité de chaque calque. Utilisez les paramètres suivants pour préserver l’aspect de vos illustrations :
• Pour les modifications d’opacité au niveau d’un groupe de calques : activez l’option Image bitmap aplatie. Vous pouvez également procéder à l’importation sans aplatir et réinitialiser l’opacité du calque de conception associé dans Flash Catalyst.
Vous pouvez également importer sans aplatir, grouper les calques correspondants, puis appliquer le mode de fusion au nouveau groupe dans Flash Catalyst.
Photoshop : attributs de texte Les attributs de texte Photoshop pris en charge sont les suivants :
• Crénage (uniquement le crénage automatique par paires) • Opacité du calque de texte • Interlettrage • Décalage vertical • Souligné • Tout en capitales • Retrait de 1re ligne • Retrait de la marge de gauche • Retrait de la marge de droite • Espace avant le paragraphe • Espace après le paragraphe • Exposant et indice Photoshop : modes de fusion La liste suivante répertorie les modes de fusion Photoshop qui ne sont pas pris en charge par Flash Catalyst :
• Lumière linéaire L’espace de travail Création affiche une représentation graphique de vos pages et états. Cet espace de travail comporte des panneaux et des outils utilisés pour la création des projets et pour leur modification. Utilisez l’outil Main pour agripper le plan de travail et le déplacer de la même manière que si vous utilisiez les barres de défilement. Utilisez l’outil Zoom ou le menu Agrandissement pour modifier l’affichage entre 25 % et 800 % de la taille actuelle. Utilisez l’icône représentant une loupe pour zoomer sur une partie spécifique du plan de travail (appuyez sur la touche Alt (sous Windows) ou Option (sous Mac OS) et cliquez pour effectuer un zoom arrière). Lorsque vous saisissez un terme dans la zone de recherche, le client Adobe Community Help s’affiche. Il donne accès aux ressources en ligne de l’assistance et de la communauté.
Panneau Pages/Etats Le panneau Pages/Etats affiche une vignette pour chaque page de l’application. Il signale en
états de page et de composant en fonction de votre projet. Pour plus d’informations, voir « Pages et états » à la page 20. Panneau Outils Le panneau Outils comporte des outils pour la création, la sélection et la transformation d’objets, dont
Panneau Calques Le panneau Calques représente un ensemble organisé des objets de l’application (illustrations, composants, vidéos et ainsi de suite). Lorsque vous importez un document de conception créé dans Illustrator, Photoshop ou Fireworks, Adobe Flash Catalyst conserve la structure d’origine des calques. Au fur et à mesure que vous ajoutez des états de page et de composant à l’application, vous pouvez en afficher ou masquer les objets dans le panneau Calques. Pour plus d’informations, voir « Calques » à la page 24. Panneau Bibliothèque Le panneau Bibliothèque affiche la liste complète des graphiques et médias disponibles dans le
Panneau Composants à structure filaire Les composants à structure filaire sont des composants interactifs prêts à
à la page 29. Panneau Interactions Ajoutez des interactions définissant ce qui se produit lorsque les utilisateurs interagissent avec l’application. Vous pouvez par exemple créer des interactions définissant la transition d’un état de page ou de composant vers un autre lorsque l’utilisateur clique sur un bouton. Vous pouvez également ajouter des interactions déclenchant la lecture d’animations, contrôlant la lecture de vidéos ou ouvrant une URL. Pour plus d’informations, voir « Interactions » à la page 36« Transitions et séquences d’actions » à la page 38. Panneau Scénarios Le panneau Scénarios offre des contrôles pour la création de transitions et de séquences d’actions ainsi que pour leur modification. Il permet également de contrôler la lecture de contenu vidéo et SWF et d’ajouter des effets sonores. Pour plus d’informations, voir « Transitions et séquences d’actions » à la page 38. Panneau Données en phase de conception Après avoir créé un composant de liste de données, vous pouvez accéder au panneau Données en phase de conception pour vérifier les données (images et texte) affichées dans la liste de données. Pour plus d’informations, voir « Listes de données et panneaux de défilement » à la page 45. Panneau Propriétés Le panneau Propriétés permet de modifier les propriétés des objets sélectionnés (graphiques,
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.
Faites appel à l’affichage tête haute pour :
• modifier les parties et les états d’un composant ; • optimiser les éléments graphiques ; • rendre les parties d’un composant identiques dans tous les états ou copier les modifications d’un état vers un autre.
L’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.
L’affichage du code MXML permet aux concepteurs de comprendre comment l’application est programmée. L’espace de travail Code est en lecture seule. Pour modifier le code, ouvrez le projet dans Adobe Flash Player. Pour plus d’informations, voir « Intégration dans Flash Builder » à la page 73.
Panneau Erreurs Ce panneau affiche les erreurs détectées dans le code MXML actuel.
Panneau Navigateur de projet Ce panneau affiche la structure du répertoire du projet Flex ainsi que les fichiers créés
La plupart des applications Internet riches présentent les informations sur plusieurs pages ou écrans, chaque page pouvant comporter différents composants interactifs, tels que des menus de navigation, des panneaux de défilement, des boutons, des contrôles multimédias et ainsi de suite. Les différentes vues auxquelles l’utilisateur a accès lorsqu’il interagit avec l’application et les composants sont appelées « états ». Flash Catalyst CS5 connaît deux types d’état. Etats de page Ces états correspondent aux différents écrans et pages de l’application et représentent généralement le
Etats de composant Ces états correspondent aux différents états et vues d’un composant interactif (par exemple les états Haut, Dessus, Bas et Désactivé d’un composant Bouton).
Remarque : si vous importez un fichier Illustrator contenant plusieurs plans de travail, chaque plan de travail est ajouté dans un état de page distinct.
Nouvel état vierge.
(représenté par une corbeille). La duplication d’un état ne se traduit pas par la duplication des objets. Les objets s’affichent dans tous les états. Vous pouvez afficher et masquer les objets dans chaque état en utilisant le panneau Calques.
Outre l’amélioration des performances de l’application, la création des vues de l’application à l’aide de composants personnalisés présente d’autres avantages.
Remarque : certains composants ont un nombre défini d’états (par exemple, Haut, Dessus, Bas et Désactivé pour un composant Bouton). Vous ne pouvez ni dupliquer ni supprimer ces états de composant, mais vous pouvez les masquer. Pour ce faire, masquez tous les calques pour l’état sélectionné. Pour plus d’informations sur la création et la modification des composants, voir : « Composants » à la page 29
Pensez aux points suivants lorsque vous décidez d’attribuer un nom à un état de page ou de composant :
• Les noms d’états ne peuvent pas contenir d’espaces. • Les noms d’états ne peuvent pas contenir les caractères spéciaux suivants : @!#$%^&*().
• Pour afficher le contenu d’une page, sélectionnez-la dans le panneau Pages/Etats. Le plan de travail affiche alors tous les objets visibles de la page sélectionnée.
Pages/Etats affiche les états du composant. Remarque : lorsque le mode de modification est activé pour un composant, le panneau Calques se divise en deux sections dans lesquelles il affiche les calques respectivement du projet et du composant ouvert. Vous pouvez faire glisser des objets à partir des calques de l’application principale vers le composant. Pour plus d’informations sur le mode de modification, voir « Mode de modification » à la page 33.
Lorsque vous importez un document de conception, l’illustration est ajoutée à un état de page 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 formes, lignes et texte » à la page 49. Lorsque vous ajoutez des objets à un état de page ou de composant, 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
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.
• Dans le panneau Calques, sélectionnez un objet et cliquez sur le bouton Supprimer (représenté par une corbeille) pour le retirer de tous les états ainsi que du panneau Calques. Remarque : modifiez la valeur du paramètre Opacité dans le panneau Propriétés pour rendre un objet invisible ou partiellement transparent. Pour plus d’informations sur le panneau Calques, voir « Calques » à la page 24.
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.
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 des composants » à la page 31. Pour plus d’informations sur la création de transitions, voir « Création de transitions » à la page 38.
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
• Pour ajouter un calque, cliquez sur le bouton Créer un calque ou Créer un sous-calque. • Vous pouvez supprimer un calque, un objet ou un groupe de tous les états de l’application. Pour ce faire, sélectionnez-en la ligne et cliquez sur le bouton Supprimer (représenté par une corbeille) dans le panneau Calques. L’objet est supprimé de chaque état. Terminologie du panneau Calques de Flash Catalyst La liste suivante établit les correspondances terminologiques entre les calques Flash Catalyst et les calques Illustrator, Photoshop et Fireworks.
• 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 « Pages et états » à la page 20.
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 : « Mode de modification » à la page 33 « Création de formes, lignes et texte » à la page 49
Images Fichiers bitmap (PNG, GIF, JPG, JPE, JPEG) et contenu SWF Médias Fichiers vidéo et audio (FLV/F4V, mp3) Graphiques optimisés Dans un fichier de graphique optimisé, toutes les informations MXML (vecteur, trait, chemin,
Remarque : lorsque vous importez un fichier Illustrator, Photoshop ou FXG, les images bitmap sont stockées dans un sous-dossier distinct de la catégorie Images.
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 pages et états » à la page 22.
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 « Mode de modification » à la page 33.
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.
Le panneau Bibliothèque facilite la coopération des membres de l’équipe de conception. L’exportation d’un package de bibliothèque crée un package unique contenant tous les éléments de bibliothèque du projet. Le package est enregistré au format FXPL. Les packages FXPL peuvent être utilisés pour distribuer les ressources du projet à différentes équipes. Par ressources, on entend les logos, les contenus vidéo, les composants et ainsi de suite. Le partage au format FXPL permet de rationaliser le travail. Si vous créez une application centrée sur les données, votre document FXPL peut être importé dans Flash Builder par un développeur Flex.
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 « Intégration dans Flash Builder » à la page 73.
Les composants sont les éléments constitutifs des projets. Les boutons, barres de défilement, curseurs, cases à cocher, panneaux et listes déroulantes sont des exemples de composants. Flash Catalyst fournit un ensemble de composants avec états et comportements intégrés, par exemple Haut, Dessus, Bas et Désactivé pour un bouton simple. Vous pouvez également créer des composants personnalisés dont vous définirez vous-même les états et les comportements ou créer des composants contenant d’autres composants. Un panneau de défilement peut par exemple contenir une barre de défilement et des boutons. Une fois le composant créé, vous pouvez ajouter des interactions définissant le comportement souhaité lorsqu’utilisateur et composant interagissent. Pour plus d’informations sur les interactions, voir « Interactions » à la page 36. Vous pouvez généralement créer un composant de deux manières :
Les types de composant disponibles dans l’affichage tête haute ou à partir du menu Modifier > Convertir l’illustration en composant sont les suivants :
• Case à cocher • Bouton radio Remarque : les listes de données étant des composants de type complexe, elles sont traitées dans un chapitre distinct. Pour plus d’informations sur les listes de données, voir « Listes de données et panneaux de défilement » à la page 45.
Lors de la conversion d’une illustration en composant, Flash Catalyst regroupe les objets sélectionnés en un nouveau composant. Le composant est ajouté à la bibliothèque du projet et s’affiche dans la catégorie Composants du panneau Bibliothèque. 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 s’affiche également 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 Convertir l’illustration en composant et sélectionnez un type de composant.
Remarque : certains composants doivent remplir des conditions spécifiques et ne fonctionnent correctement qu’une fois définies les parties requises. Une liste de données par exemple doit comporter un élément répété et une barre de défilement doit contenir un rail et un curseur. Si un composant doit remplir des conditions spéciales, l’affichage tête haute comporte un message décrivant la procédure à suivre pour compléter le composant. Les commandes de création et de modification des composants sont également disponibles dans le menu Modifier.
Bibliothèque et cliquez sur Dupliquer.
(sous Windows) ou Retour (sous Mac OS). Les noms des composants peuvent contenir uniquement des lettres, des chiffres et des traits de soulignement. Ils ne peuvent être attribués qu’une seule fois dans le projet et ne peuvent commencer que par une lettre ou un trait de soulignement.
Chaque composant peut s’afficher dans plusieurs états et posséder un ensemble unique de propriétés dans chaque état. Un bouton peut par exemple être activé à la page 1 et être désactivé à la page 2. D’autres propriétés des composants sont par exemple l’opacité, les filtres et la rotation. L’état d’un composant désactivé dans le panneau Propriétés est signalé comme étant désactivé. Définissez l’état désactivé de manière à apparaître sélectionné. Désactivez ensuite le bouton dans son état cible. Par exemple, en présence d’un bouton de navigation libellé 1 dont l’activation mène à la page 1, désactivez le bouton à la page 1. A la page 1, le bouton est désactivé et apparaît sélectionné. Pour modifier les propriétés d’un composant, sélectionnez le composant dans le plan de travail et modifiez ses propriétés dans le panneau Propriétés. Lorsque vous appliquez des propriétés aux composants, les modifications ne s’appliquent qu’à l’état actuel. Le composant n’est pas modifié. Pour appliquer les mêmes propriétés au même composant dans tous les autres états, sélectionnez le composant, puis Etats > Rendre identique dans tous les autres états. Remarque : vous ne pouvez pas modifier la taille (hauteur et largeur) d’une instance de composant. Pour redimensionner un composant ou apporter d’autres modifications s’appliquant à toutes ses instances, modifiez le composant en utilisant le mode de modification. Les changements apportés à un composant en mode de modification s’appliquent à toutes les instances dans tous les états. Voir « Mode de modification » à la page 33.
Accepte les événements de souris Cette option rend un objet visible à la souris. Si vous désélectionnez l’option
Transparence accepte la souris Les zones situées à l’intérieur des limites d’un composant ou d’un groupe transparent
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
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.
nombre de caractères spécifié. Cette propriété s’applique uniquement aux composants d’entrée de texte à structure filaire qui n’ont pas été redimensionnés manuellement. Index sélectionné L’élément sélectionné par défaut dans une liste. Le premier élément est 0, le deuxième est 1, et ainsi de suite. La valeur -1 indique l’absence de sélection. Anneau de sélection La couleur du contour ou de la mise en surbrillance d’un composant qui a le focus. Curseur en forme de main Une main avec un doigt pointé s’affiche lorsque la souris survole l’objet. Texte accessible Le texte décrivant l’objet pour les lecteurs d’écran. Groupe de boutons radio Vous ne pouvez sélectionner qu’un seul bouton radio à l’intérieur d’un groupe. Les boutons
Format de page Cette option spécifie la distance de déplacement d’un curseur dans une barre de défilement lorsque
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 51
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. 1 Sélectionnez le composant que vous souhaitez modifier. Dans l’affichage tête haute, sélectionnez l’état que vous
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 différents états du composant s’affichent dans le panneau Pages/Etats. La barre de navigation affiche le nom du composant ouvert.
Panneau Calques avec un composant en mode de modification
• modifier si nécessaire l’illustration dans chaque état en utilisant les outils de dessin et le panneau Propriétés. Vous pouvez par exemple modifier la taille, le trait, le remplissage et l’opacité d’une forme ainsi que d’autres parties du composant. 3 Quittez le mode de modification en appuyant sur la touche Echap ou en cliquant sur le nom de l’application dans
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.
1 Dans le panneau Pages/Etats, sélectionnez la page à laquelle vous souhaitez ajouter le composant. 2 Dans le panneau Calques, sélectionnez le calque cible auquel vous souhaitez ajouter le composant. 3 Dans le panneau Composants à structure filaire, faites glisser un composant vers le plan de travail. 4 Dans le panneau Outils, utilisez l’outil Sélectionner pour positionner le composant sur le plan de travail. 5 Utilisez le panneau Propriétés pour définir les propriétés du composant, par exemple sa taille.
• la lecture, la pause ou l’arrêt d’un clip vidéo.
événement, par exemple Lire la vidéo. Enfin, sélectionnez l’état dans lequel cette interaction se produit.
Vous pouvez ajouter des interactions à des composants ou à une illustration groupée. Utilisez les groupes pour interrompre les interactions lorsque vous n’avez pas besoin d’un composant réutilisable. 1 Sélectionnez un composant ou un groupe. 2 Cliquez sur Ajouter une interaction dans le panneau Interactions. 3 Sélectionnez un événement déclenchant l’interaction, tel que par exemple Lors d’un clic ou Lorsque le curseur
4 Sélectionnez une interaction, par exemple Lire la transition vers l’état ou Aller à l’URL.
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. Interactions conditionnelles Les interactions conditionnelles sont des comportements impliquant qu’une condition soit remplie. Par exemple, lorsque l’utilisateur qui visionne la page 1 clique sur Suivant, la page 2 s’affiche. S’il visionne la page 2 et clique sur suivant, la page 3 s’affiche. L’ajout d’interactions conditionnelles est identique à l’ajout d’autres interactions, à ceci près que vous définissez pour le paramètre conditionnel une valeur plus spécifique que Lors de tout état. Interactions de liste conditionnelles Vous pouvez ajouter des interactions conditionnelles à une liste de données afin de déclencher une action à la sélection d’un élément de la liste. La liste peut se composer d’images ou de texte. Les interactions conditionnelles sont analogues aux autres interactions à ceci près que le paramètre conditionnel Lors de tout état se transforme en paramètre A la sélection d’un élément ou A la sélection d’un élément précis. Si vous sélectionnez A la sélection d’un élément précis, vous devez saisir le numéro de l’élément de la liste déclenchant l’interaction.
Vous pouvez créer une séquence d’actions qui sera automatiquement exécutée au lancement de l’application. Pour créer une interaction Au lancement de l’application, veillez à ce qu’aucun objet ne soit sélectionné dans le plan de travail avant de cliquer sur le bouton Ajouter une interaction. Les actions définies seront exécutées dès le lancement de l’application.
Transitions Les transitions sont des animations exécutées une seule fois lorsque l’utilisateur passe d’un état de page ou de composant à un autre. Les transitions se composent d’actions qui les définissent. Les fondus, les rotations et déplacements d’objets ou le redimensionnement d’images comptent parmi les transitions les plus répandues. Séquences d’actions Les séquences d’actions sont des interactions déclenchant une ou plusieurs actions. Elles peuvent
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
Lorsqu’un objet est présent dans deux états ET que certaines propriétés de l’objet diffèrent d’un état à l’autre, une transition par défaut est ajoutée au scénario. Cette transition par défaut a une durée de 0 seconde. Vous pouvez afficher et modifier les transitions dans le panneau Scénarios. Remarque : le type de la transition par défaut (fondu, déplacement, etc.) dépend de la manière dont les instances d’un objet diffèrent les unes des autres d’un état à l’autre.
• Propriétés de texte
1 Dans le panneau Pages/Etats, sélectionnez soit l’état de départ, soit l’état de fin de la transition.
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
Transitions et séquences d’actions
Barres jaunes d’effet Flash Catalyst Dans certains cas, les modifications apportées à des objets appartenant à une transition peuvent avoir des répercussions négatives sur l’aspect de la transition. Des barres jaunes s’affichent par exemple lorsque vous déplacez un groupe (ou ses enfants) d’un côté de la transition. Flash Catalyst ajoute des effets pour compenser la modification et corriger automatiquement la transition. Les effets ajoutés se présentent sous forme de barres jaunes et un message apparaît dans l’affichage tête haute. Exemple de message : « Ce groupe possède des enfants avec des propriétés différentes dans d’autres états. Des effets ont été ajoutés aux scénarios pour assurer une lecture correcte. » Suivez les règles suivantes pour conserver l’aspect voulu de la transition :
Propriétés communes des effets Durée Déterminez la durée de l’effet, de son début à sa fin. Délai Retardez le début de l’effet par rapport au début de la transition ou de la séquence d’actions. Répéter Répétez l’effet autant de fois que spécifié. Sélectionnez Toujours pour répéter l’effet sans interruptions. Opacité De/Vers Définissez l’opacité de début et de fin d’un objet dans un effet de fondu en entrée/sortie. Positions X et Y Définissez la position de début et de fin d’un objet dans un effet de déplacement. Largeur (L) et Hauteur (H) Définissez la position de début et de fin d’un objet dans un effet de redimensionnement. Angle de et Angle vers Définissez l’angle de début et de fin d’un objet dans un effet de rotation. Accélération Ajoutez une accélération ou une décélération progressive au cours d’une animation afin d’en accroître le
Transitions d’accélération Vous pouvez accroître le réalisme des mouvements en appliquant des accélérations aux effets. L’accélération se compose de deux phases : l’accélération, suivie de la décélération. 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
L’accélération et la décélération augmentent proportionnellement à la valeur définie pour cette propriété. Elastique Cette option conduit à l’alignement automatique de l’objet déplacé avec un tressaillement dès qu’il atteint sa destination. Rebond Cette option se caractérise par un bond en arrière de l’objet déplacé avant d’atteindre sa position finale.
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.
Appliquer un fondu Applique un fondu à un objet, d’une valeur d’opacité à l’autre (fondu en entrée ou fondu en sortie). Définissez les valeurs d’opacité De et Vers dans le panneau Propriétés. Effet sonore Lit tout effet sonore de la bibliothèque du projet. Dans le panneau Propriétés, définissez si le son doit être lu une fois ou répété. Si vous sélectionnez l’option Répéter, vous pouvez définir le nombre de répétitions du son. Cochez l’option Toujours pour activer la lecture en boucle du son. Déplacer Déplace un objet d’un emplacement vers un autre. Dans le panneau Propriétés, choisissez l’option Déplacement relatif pour déplacer un objet d’un nombre précis de pixels par rapport à sa position d’origine. L’option Emplacement spécifique vous permet de déplacer un objet vers des coordonnées X et Y précises. Utilisé dans le cadre d’une transition, l’effet est basé sur la position dans l’ancien et dans le nouvel état.
Transitions et séquences d’actions
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,
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.
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
Transitions et séquences d’actions
1 Sélectionnez le composant ou le groupe auquel vous souhaitez ajouter la séquence d’actions. 2 Cliquez sur Ajouter une interaction dans le panneau Interactions. 3 Sélectionnez le déclencheur de la séquence d’actions. 4 Sélectionnez l’interaction Lire la séquence d’actions. 5 Définissez l’état dans lequel la séquence d’actions doit se produire (ou conservez le paramètre par défaut Lors de
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
Transitions et séquences d’actions
Présentation des listes de données Une liste de données est un composant spécial permettant d’afficher une série d’éléments associés. Vous pouvez par exemple utiliser une liste de données pour afficher un recueil de vignettes dans une galerie de photos.
• 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.
Catalyst, vous pouvez spécifier des données d’espace réservé à afficher dans la liste en utilisant le panneau Données en phase de conception.
1 Positionnez une copie des premiers éléments de la liste de données sur le plan de travail. Ajoutez-y tout autre
3 Sans désélectionner le nouveau composant dans le plan de travail, cliquez sur Modifier des parties dans l’affichage
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 Modifier des parties > Elément répété (requis).
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 la nouvelle image. 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.
Listes de données et panneaux de défilement
Vous trouverez ici Flash Catalyst Beta 1: Building a Website II un très bon exemple de création d’une liste de données.
En conception Web, la principale difficulté réside dans la limitation de l’espace disponible pour l’affichage du contenu requis. Une solution consiste à créer des panneaux de défilement. Un panneau forme un conteneur d’interface utilisateur bien défini. L’ajout de contenu de défilement et d’une barre de défilement vous permet de placer une grande quantité d’informations dans un espace limité. 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é.
Listes de données et panneaux de défilement
1 Importez ou dessinez un objet afin de définir la zone du panneau (facultatif). 2 Ajoutez le contenu dont vous souhaitez permettre le défilement. Pour créer un texte accessible par défilement,
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 Modifier des parties > 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
Flash Catalyst CS5 offre des outils pour la création et la modification de formes et de texte de base. Ces outils sont généralement utilisés pour créer rapidement un prototype d’application. Ils permettent également de personnaliser les composants à structure filaire intégrés ou d’ajouter rapidement des éléments ne nécessitant pas les fonctions avancées d’une application Creative Suite. Les outils de dessin et de texte se situent dans la barre d’outils de dessin de Flash Catalyst. Remarque : une fois créées avec les outils de dessin, les illustrations peuvent être modifiées dans Adobe Illustrator ou Adobe Photoshop grâce à la fonctionnalité d’aller-retour de modifications de Flash Catalyst. Voir « Aller-retour de modifications » à la page 62.
• 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 51.
L’outil Texte vous permet de créer trois types de texte. Texte de point Ce type de texte ne comporte aucun retour à la ligne automatique. Le champ s’agrandit pour contenir
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 51.
• 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.
Création de formes, lignes et texte
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 modifications » à la page 62.
(sous Mac) enfoncée pour redimensionner l’objet par rapport à son centre, et non à partir d’un angle ou d’un côté.
Remarque : vous ne pouvez pas redimensionner un composant. Le seul moyen de redimensionner un composant consiste à en modifier les parties en mode de modification. Voir « Mode de modification » à la page 33.
Un objet graphique dessiné dans Flash Catalyst est ajouté uniquement à l’état actuel. Une fois créé, l’objet peut être ajouté à d’autres états de l’application ou du composant. Le partage d’un objet avec d’autres états le rend présent et visible dans les états spécifiés. Les propriétés d’un objet partagé avec plusieurs états peuvent varier d’un état à l’autre. 1 Sélectionnez l’objet. 2 Sélectionnez Etats > Partager avec l’état > Tous les états (ou sélectionnez un état spécifique).
Dans le panneau Propriétés, vous pouvez modifier les propriétés des formes, des lignes et du texte.
Création de formes, lignes et texte
Les propriétés Opacité et Rotation sont communes aux formes, aux lignes, au texte ainsi qu’à la plupart des objets Flash Catalyst. Opacité Vous pouvez définir l’opacité d’un objet sur une valeur comprise entre 0 % et 100 %. Un objet ayant une opacité de 0 % est transparent. Rotation Faites pivoter un objet. La valeur applique un angle de rotation compris en 0 et 360 % à la position d’origine
Pour plus d’informations sur la copie des propriétés d’un objet vers ses instances dans les autres états, voir « Harmonisation des objets dans tous les états » à la page 56.
La plupart des formes et des lignes partagent les mêmes propriétés.
Création de formes, lignes et texte
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 choisissez l’option Plein, cliquez sur la case du sélecteur de couleurs pour modifier la couleur. • Si vous sélectionnez plusieurs objets ayant des traits et des remplissages différents, les propriétés n’affichent aucun trait ni remplissage. Toute modification des propriétés est répercutée sur tous les objets sélectionnés. Les propriétés de remplissage et de trait sont les suivantes : Epaisseur Cette option modifie l’épaisseur d’un trait. Opacité Les propriétés de remplissage et de trait ont leur propre valeur d’opacité, distincte de la valeur d’opacité de
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
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é.
Création de formes, lignes et texte
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 « Harmonisation des objets dans tous les états » à la page 56.
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.
Création de formes, lignes et texte
Propriétés. Choisissez une autre couleur ou utilisez la pipette pour prélever un échantillon de couleur sur le plan de travail.
Police Modifiez la police et le style (gras et italique, par exemple). 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 disponibles (Aucun, Exposant, Indice). Crénage Ajoutez un espace prédéfini entre deux caractères afin d’en améliorer la lisibilité. Hauteur de la ligne Réglez l’espacement entre chaque ligne du texte. Vous pouvez définir une valeur en pixels ou un pourcentage par rapport à la taille actuelle de la police. Interlettrage L’interlettrage diffère du crénage en ce qu’il ajuste l’espacement pour des groupes de lettres ou des blocs
Marge Ajoutez de l’espace entre le texte et la bordure du cadre de sélection.
Création de formes, lignes et texte
Vous pouvez appliquer les modifications apportées aux propriétés d’un objet à tous les états dans lesquels il se trouve. 1 Sélectionnez l’objet. 2 Dans l’affichage tête haute, sélectionnez Rendre identique dans tous les autres états.
Les filtres ne sont pas spécifiques aux formes, aux lignes ou au texte. Vous pouvez appliquer les mêmes filtres à des images bitmap, à des composants ou à des lecteurs vidéo. Vous pouvez également appliquer des filtres à des groupes. Dans ce cas, le filtre est appliqué à tous les enfants du groupe sans distinction. Ajout de filtres Le panneau Filtres permet d’appliquer les filtres suivants : Flou, Ombre portée, Ombre intérieure, Biseau, Lueur et Lueur intérieure.
• 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.
Création de formes, lignes et texte
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. Masquage Le masquage dissimule l’objet d’origine et n’affiche que les parties qui auraient été visibles si l’objet l’avait également été. Masquer l’objet Ce paramètre dissimule l’objet d’origine et affiche le filtre, y compris les parties qui seraient masquées
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
claires que la couleur de fusion sont remplacées. Les zones plus foncées que la couleur de fusion restent inchangées. Produit Multiplie la couleur de base par la couleur de fusion. La couleur d’arrivée est toujours plus foncée. Le produit d’une couleur quelconque par le noir rend du noir. Le produit d’une couleur quelconque par le blanc n’a aucune incidence sur la couleur. Cet effet équivaut à dessiner sur une page à l’aide de plusieurs marqueurs magiques. Densité couleur + Assombrit la couleur de base de sorte à refléter la couleur de fusion. La fusion avec du blanc ne
Soustraction Analyse les informations chromatiques de chaque calque et soustrait la couleur de fusion de la couleur de base. Dans les images 8 et 16 bits, les valeurs négatives obtenues sont écrêtées à zéro. Eclaircir Analyse les informations chromatiques de chaque calque et sélectionne la couleur de base ou de fusion (la plus claire) comme couleur finale. Les pixels plus foncés que la couleur de fusion sont remplacés, et les pixels plus clairs demeurent intacts. Superposition Multiplie l’inverse des couleurs de dégradé et de départ. La couleur d’arrivée est toujours plus claire.
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
Création de formes, lignes et texte
Luminosité Crée une couleur finale avec la teinte et la saturation de la couleur de base et la luminance de la couleur de fusion. Ce mode produit l’effet inverse du mode Couleur. Couleur plus claire Compare la somme de toutes les valeurs des couleurs de dégradé et de départ et affiche la couleur présentant la valeur la plus élevée. Le mode Couleur plus claire ne génère pas une troisième couleur, issue de la fusion Eclaircir. Il choisit les valeurs les plus élevées des couleurs de base et de fusion afin de créer la couleur finale. Couleur plus foncée Compare la somme de toutes les valeurs des couleurs de dégradé et de départ et affiche la couleur présentant la valeur la plus faible. Le mode Couleur plus foncée ne génère pas une troisième couleur, issue de la fusion Obscurcir. Il choisit les valeurs les plus faibles des couleurs de base et de fusion afin de créer la couleur finale. Copier alpha (si isolé) Applique un masque alpha. Effacer alpha (si isolé) Supprime tous les pixels de couleur de base, dont les couleurs de l’image d’arrière plan.
Flash Catalyst prend en charge les graphiques vectoriels et bitmap. Les objets créés avec les outils de dessin de Flash Catalyst sont des graphiques vectoriels. Ce type de graphique convient particulièrement bien aux illustrations, aux textes en petits caractères ou aux images de couleurs vives créées avec des lignes et des formes qui doivent rester nettes quelle que soit l’échelle appliquée. Les graphiques bitmap s’adaptent mieux à la photographie. Optimisez les images bitmap volumineuses ou les dessins vectoriels contenant des centaines de chemins. L’optimisation des images en facilite le traitement dans Flash Catalyst. Elle entraîne également une exécution plus efficace de l’application finale. Vous pouvez par exemple optimiser des ensembles complexes de graphiques vectoriels (par exemple les illustrations de forme libre et les logos d’entreprise) qui ne changent pas d’un état à l’autre. Graphiques vectoriels Les graphiques vectoriels sont des équations mathématiques décrivant la distance entre deux
Images bitmap (pixellisées) Les images bitmap se composent d’un certain nombre de pixels mappés sur une grille.
Dans Flash Catalyst, les options d’optimisation graphique comportent la conversion de graphiques vectoriels en graphiques bitmap, la compression des images et la conversion d’images incorporées en fichiers liés. Lorsque vous sélectionnez un objet graphique, les options d’optimisation s’affichent dans l’affichage tête haute.
Pixelliser Cette option convertit un graphique vectoriel statique ou un texte en image bitmap. Utilisez-la pour
Remarque : la pixellisation d’un objet graphique possédant un mode de fusion risque d’en fausser l’affichage. Comprimer Cette option permet de comprimer une image bitmap. La compression d’image réduit la taille du fichier de l’image, mais en diminue également la qualité. La compression appliquée à une image contenant de la transparence
Convertir en image liée 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 est 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).
L’optimisation d’images s’accompagne de compromis. L’utilisation de l’option Optimiser les graphiques vectoriels permet la division ultérieure du graphique et la réédition du contenu. Cette option entraîne la création d’un fichier SWF moins volumineux que l’image bitmap. La pixellisation d’un graphique (conversion en bitmap) offre de meilleures performances dans Flash Catalyst, mais produit un fichier SWF plus volumineux. La mise à l’échelle d’une image bitmap risque d’en fausser l’affichage. Optimisation du contenu Le meilleur moyen d’optimiser une application est de procéder à une utilisation optimale des ressources, des pages, des états et des composants. Prenez en considération les points suivants lors de la création d’une application optimisée :
• Ne créez qu’une seule instance d’une ressource et partagez-la avec les autres états. Pour plus d’informations, voir « Partage d’objets entre pages et états » à la page 22.
« Composants » à la page 29. Optimisation avant importation L’optimisation des performances de l’application avant l’ajout d’illustrations au projet peut se faire de différentes manières.
• 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.
La fonction d’aller-retour de modifications de Flash Catalyst permet de lancer et de modifier les illustrations de l’application en utilisant les fonctionnalités d’édition enrichies d’Adobe Illustrator CS5 et d’Adobe Photoshop CS5. Ouvrez l’illustration dans Illustrator ou Photoshop, apportez vos modifications, puis revenez à Flash Catalyst. Remarque : FXG est le format GIF (Graphics Interchange Format) riche utilisé pour l’aller-retour de modifications. Pour plus d’informations sur les fichiers FXG, voir .
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.
1 Sélectionnez sur le plan de travail l’objet que vous souhaitez modifier. 2 Choisissez la commande Modifier > Editer dans Adobe Illustrator CS5.
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 plus d’informations sur l’apport de modifications dans Illustrator CS5, voir Flux de production Illustrator et 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. 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 CS5.
3 Si vous avez déjà installé les extensions, cliquez sur OK pour fermer le message.
Aller-retour de modifications
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. 6 Cliquez sur Fichier > Fermer, puis sur Oui pour enregistrer les modifications. 7 Revenez à Flash Catalyst.
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.
Flash Catalyst CS5 prend en charge l’importation de fichiers vidéo FLV et F4V ainsi que de fichiers audio mp3. Les fichiers sont ajoutés à la section Médias du panneau Bibliothèque. Le panneau Bibliothèque affiche la taille de chaque fichier vidéo ou audio à droite du nom du fichier.
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
Pour définir les propriétés du lecteur vidéo, sélectionnez-le dans le plan de travail (ou dans le panneau Calques). Dans le panneau Propriétés, définissez les propriétés. Les propriétés d’un lecteur vidéo peuvent varier en fonction de l’état dans lequel il se trouve. Opacité Modifiez l’opacité de la vidéo dans le lecteur. Volume Définissez le volume de la piste audio dans le fichier vidéo. Barre de commandes Modifiez les commandes s’affichant sous le lecteur vidéo. Vous pouvez choisir entre Structure filaire, Standard et Aucun(e). Source : Etablissez un lien à la vidéo source dans la bibliothèque du projet. Vous pouvez lire différents fichiers vidéo avec le même lecteur vidéo en modifiant la propriété Source du lecteur en fonction de l’état. L’utilisation d’un seul lecteur vidéo constitue un moyen d’optimiser une application. Mise à l’échelle : Aucun Les vidéos ne sont pas mises à l’échelle et s’affichent à leur taille d’origine. Elles sont recadrées
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 : « Ajout d’une séquence d’actions » à la page 43 « Modification d’une séquence d’actions » à la page 43
Eléments vidéo et audio
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 : « Ajout d’une séquence d’actions » à la page 43 « Modification d’une séquence d’actions » à la page 43
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\sound effects (sous Windows) ou Applications/Adobe Flash Catalyst CS5/sound effects (sous Mac OS). Pour plus d’informations sur l’ajout et le contrôle de données audio, voir : « Interactions » à la page 36 « Ajout d’une séquence d’actions » à la page 43 « Modification d’une séquence d’actions » à la page 43
Eléments vidéo et audio
Vous pouvez faire appel à différentes applications pour créer des fichiers FLV et F4V, par exemple Adobe Flash Professional CS5, Adobe Premiere Pro CS5, Adobe After Effects CS5 et Adobe Media Encoder. Chacune de ces applications contient de nombreux paramètres prédéfinis. Sélectionnez un format (FLV/F4V), puis un paramètre prédéfini, tel que Web - Qualité moyenne pour Flash 8 et version ultérieure. A la sélection d’un paramètre prédéfini, le codec vidéo et audio ainsi que d’autres paramètres (taille de l’image, cadence et vitesse de transmission) sont définis automatiquement. Vous pouvez également choisir un paramètre prédéfini, puis en modifier les valeurs individuellement. Codage Le codage consiste à convertir une vidéo en un format compatible avec Adobe Flash Player. Flash Catalyst
De préférence, codez un fichier qui n’est pas comprimé. Si vous convertissez un fichier qui a déjà été comprimé à l’aide d’un autre format, puis vous décomprimez ce fichier, l’encodeur précédent peut entraîner un bruit vidéo. Codec Algorithme de codage/décodage qui contrôle la manière dont les fichiers vidéo sont comprimés au cours du codage et décomprimés au cours de la lecture. H.264 Standard de diffusion sur le Web basé sur le format MPEG-4. Ce standard est recommandé pour divers dispositifs, dont les vidéos haute définition (HD), les téléphones mobiles 3GPP et les dispositifs iPod vidéo. On2 VP6 Codec standard de codage des fichiers au format FLV pour Flash Player 8 et version ultérieure. Sorenson Spark Format de compression vidéo requis pour Flash Player 6 et 7. MP3 Format de fichier standard pour Internet ainsi que pour de nombreux lecteurs audio numériques portables. Advanced Audio Coding (AAC) Schéma de codage standardisé pour les données audio numériques.
Flash Catalyst CS5 vous permet de publier une application Internet riche entièrement opérationnelle par la création d’un fichier SWF. Par défaut, Flash Catalyst génère deux versions de l’application. La première comporte les fichiers nécessaires à l’exécution du projet en tant qu’application Web. Cette version ne peut pas être exécutée localement. La seconde peut être exécutée localement, mais ne peut pas l’être à partir d’un serveur Web ou d’une URL de lancement. Flash Catalyst comporte également une option permettant la génération d’une application Adobe AIR. Remarque : depuis Flash Player 9, la structure Flex est mise en cache. Tout utilisateur de Flash Player 9 avec structure Flex peut télécharger le fichier de déploiement sur le Web à partir de votre serveur Web. Pour les autres utilisateurs, il est recommandé de placer les fichiers de structure Flex à proximité du fichier SWF sur le serveur Web.
1 Enregistrez le projet et sélectionnez Fichier > Publier au format SWF/AIR.
3 Pour créer une application Adobe AIR, cochez la case Générer une application AIR (facultatif).
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.
Les fichiers publiés comportent l’enveloppe main.html pour le fichier SWF. Ce fichier fait référence au code swfobject.js qui procède à la vérification de la version de Flash Player et renvoie à sa mise à niveau. Vous pouvez réutiliser ce code dans vos fichiers HTML.
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.
Qualité et cliquez sur OK.
Pour plus d’informations sur l’optimisation des illustrations, voir : « Optimisation des graphiques » à la page 60
Une fois que des services, des liaisons à des données et des fonctionnalités back-end auront été ajoutés, toute modification ultérieure ne pourra être effectuée que dans Flash Builder. Vous pourrez toutefois parfaire la conception de l’application dans Flash Catalyst et créer une mise à jour du fichier FXP que les développeurs pourront fusionner avec leur copie du projet. Afin de faciliter la coopération entre conception et développement, il est recommandé de séparer le code ajouté par les développeurs du code créé par Flash Catalyst.
élément au composant dans Flash Catalyst. Ajoutez plutôt quelques éléments de données en phase de conception à titre de prototype.
• Attribuez aux ressources de la bibliothèque des noms uniques, que les développeurs n’auront pas de difficulté à reconnaître.
• Donnez des noms uniques et parlants à tous les états de page, composants et états de composant. Pour plus d’informations sur l’intégration dans Flash Builder, voir : Prise en charge des projets Catalyst
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.
Notice Facile