Pages et états

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

Etats de page
Ces états correspondent aux différents écrans et pages de l’application et représentent généralement le niveau supérieur de la hiérarchie de l’application.

Etats de composant
Ces états correspondent aux différents états et vues d’un composant interactif (par exemple les états Haut, Dessus, Bas et Désactivé d’un composant Bouton).

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

Afficher le graphique à sa taille d'origine
Panneau Pages/Etats affichant une application contenant deux états de page

Afficher le graphique à sa taille d'origine
Panneau Pages/Etats affichant les états d’un composant Bouton

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

    Chaque nouveau projet Flash Catalyst comporte un seul état de page.
    Remarque : si vous importez un fichier Illustrator contenant plusieurs plans de travail, chaque plan de travail est ajouté dans un état de page distinct.

    • Pour ajouter une nouvelle page basée sur la page existante, sélectionnez cette dernière dans le panneau Pages/Etats et cliquez sur Dupliquer l’état.

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

    • Pour supprimer une page, sélectionnez-la dans le panneau Pages/Etats et cliquez sur le bouton Supprimer (représenté par une corbeille).

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

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

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

    • Un composant personnalisé est plus polyvalent qu’un état de page. Il peut être défini par des propriétés (taille, position, opacité) qui sont spécifiques à la page ou au composant parent dans lequel il est utilisé.

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

    • Les composants peuvent être imbriqués à l’intérieur d’autres composants. L’imbrication de composants permet de créer une application plus efficace comportant de nombreux états et vues.

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

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

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

    Composants

      Noms des pages et des états

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

      • Pour renommer un état de page ou de composant, cliquez deux fois sur son nom dans le panneau Pages/Etats, saisissez un nouveau nom, puis appuyez sur Entrée (sous Windows) ou Retour (sous Mac OS).

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

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

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

        Affichage des pages et des états

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

        • Pour afficher les différents états d’un composant, cliquez deux fois sur le composant dans le plan de travail pour passer en mode de modification. Lorsque vous éditez un composant en mode de modification, le panneau Pages/Etats affiche les états du composant.

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

        Pour plus d’informations sur le mode de modification, voir Mode de modification.

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

          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 :

          • Importez une nouvelle illustration.

          • Faites glisser des ressources du panneau Bibliothèque vers le plan de travail.

          • Créez de nouveaux objets avec les outils de dessin Flash Catalyst.

            Pour plus d’informations sur les outils de dessin, voir Création de formes, lignes et texte.

          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 n’est pas affichée (l’objet est masqué). Si l’icône en forme d’œil apparaît en grisé, l’objet est visible mais son calque parent est masqué. Les enfants d’un calque ou d’un groupe parent masqué le sont également.

          Absent
          Le nom de l’objet s’affiche en caractères grisés (l’objet est absent). L’objet est absent de l’état actuel mais se trouve sur au moins un autre état de l’application.

          Procédez comme suit pour afficher ou masquer des objets dans un état.
          • Activez ou désactivez l’icône en forme d’œil pour afficher ou masquer un objet.
            Cette icône est un bouton bascule. Dans le panneau Calques, cliquez sur la colonne d’affichage/de masquage (à l’extrême gauche) d’un objet pour activer ou désactiver sa visibilité.

          • Désactivez l’icône en forme d’œil d’un calque ou d’un groupe parent pour en masquer tous les enfants.

          • Sélectionnez un objet et cliquez sur Supprimer pour retirer l’objet de l’état actuel. Si l’objet existe dans d’autres états, son nom s’affiche en grisé dans le panneau Calques. Si l’objet n’existe dans aucun autre état, il disparaît du panneau Calques.

          • Activez l’icône en forme d’œil pour partager l’objet avec l’état actuel lorsque son nom est affiché en grisé.

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

            Partage d’objets entre pages et états

            Un même objet peut apparaître dans différents états. Un objet peut avoir différentes propriétés (taille, position, couleur et transparence) en fonction de l’état dans lequel il se trouve. Dans la plupart des cas, les modifications apportées à un objet ne s’appliquent qu’à l’état actuel. Après avoir positionné et modifié l’objet conformément à vos besoins, vous pouvez rapidement le partager, lui et ses propriétés, avec d’autres états.

            Cette technique permet de créer des transitions régulières d’un état à l’autre. Vous pouvez par exemple appliquer à un objet un effet de fondu en entrée ou en sortie ou un effet de transformation (d’une forme ou d’une position vers une autre).

            • Pour partager un objet avec d’autres états, sélectionnez l’objet, puis cliquez sur Etats > Partager avec l’état. Sélectionnez les états avec lesquels vous souhaitez partager l’objet.

            • Pour supprimer un objet d’un état spécifique, sélectionnez-le dans l’un des états dans lequel il se trouve et cliquez sur Etats > Supprimer de l’état. Sélectionnez l’état dont vous voulez le supprimer.

            • Pour rendre un objet identique dans tous les états, modifiez-en les propriétés, puis sélectionnez Etats > Rendre identique dans tous les autres états.

            Remarque : certaines modifications s’appliquent à tous les états. Toute modification ayant une incidence sur la hiérarchie de l’application est automatiquement partagée avec tous les états. Si vous groupez par exemple des objets ou convertissez des objets en composants, les modifications apportées s’appliquent à tous les états. L’édition d’un composant en mode de modification entraîne celle de la définition du composant dans la bibliothèque du projet. Les modifications s’appliquent à toutes les instances du composant dans tous les états.

            Pour plus d’informations sur les composants, voir Définition des propriétés des composants.

            Pour plus d’informations sur la création de transitions, voir Création de transitions.