Interface utilisateur

L’interface utilisateur Flash Catalyst comporte deux espaces de travail : Création et Code. Utilisez la liste déroulante des espaces de travail pour basculer de l’un à l’autre.

Espace de travail Création

L’espace de travail Création affiche une représentation graphique de vos pages et états. Cet espace de travail comporte des panneaux et des outils utilisés pour la création des projets et pour leur modification. Utilisez l’outil Main pour agripper le plan de travail et le déplacer de la même manière que si vous utilisiez les barres de défilement. Utilisez l’outil Zoom ou le menu Agrandissement pour modifier l’affichage entre 25 % et 800 % de la taille actuelle. Utilisez l’icône représentant une loupe pour zoomer sur une partie spécifique du plan de travail (appuyez sur la touche Alt (sous Windows) ou Option (sous Mac OS) et cliquez pour effectuer un zoom arrière). Lorsque vous saisissez un terme dans la zone de recherche, le client Adobe Community Help s’affiche. Il donne accès aux ressources en ligne de l’assistance et de la communauté.

Afficher le graphique à sa taille d'origine
Espace de travail Création
A.
Outils de vue

B.
Affichage tête haute

C.
Liste déroulante des espaces de travail

D.
Recherche d’aide

E.
Panneau Etats

F.
Chemin de navigation du composant

G.
Plan de travail

H.
Bibliothèque commune

I.
Panneau Outils

J.
Panneau Calques

K.
Panneau Interactions

L.
Panneau Propriétés

Plan de travail
Le plan de travail correspond à ce que les utilisateurs voient une fois l’application publiée. Il héberge les illustrations, les composants interactifs ainsi que d’autres objets constituant l’interface de l’application. Il contient des règles, des grilles et des guides pour le positionnement et l’alignement des éléments. Ces fonctions sont accessibles dans le menu Afficher. Utilisez le menu Modifier pour aligner, regrouper ou organiser (du premier plan vers l’arrière-plan) les objets sur le plan de travail.

Barre de navigation
La barre de navigation se situe juste au-dessus du plan de travail et vous indique où vous vous trouvez dans Flash Catalyst. Elle vous permet par exemple de refermer rapidement un composant ouvert pour revenir au plan de travail principal.

Panneau Etats
Le panneau Etats affiche une vignette pour chaque page de l’application. Il signale en outre les différents états d’un composant sélectionné. Vous pouvez dupliquer, supprimer, ajouter et renommer des états de page et de composant en fonction de votre projet. Pour plus d’informations, voir Types d’états.

Panneau Outils
Le panneau Outils comporte des outils pour la création, la sélection et la transformation d’objets, dont des objets simples tels que des lignes, des formes et du texte.

Panneau Calques
Le panneau Calques représente un ensemble organisé des objets de l’application (illustrations, composants, vidéos et ainsi de suite). Lorsque vous importez un document de conception créé dans Illustrator, Photoshop ou Fireworks, Adobe Flash Catalyst conserve la structure d’origine des calques. Au fur et à mesure que vous ajoutez des états à l’application, vous pouvez en afficher ou masquer les objets dans le panneau Calques. Pour plus d’informations, voir Calques.

Panneau Bibliothèque du projet
Le panneau Bibliothèque du projet affiche la liste complète des graphiques et médias disponibles dans le projet, y compris les habillages et les composants du projet. Pour plus d’informations, voir Bibliothèques.

Panneau Bibliothèque commune
La bibliothèque commune contient un ensemble de composants de structure filaire et d’objets d’espace réservé prêts à l’utilisation avec une apparence simple par défaut. Vous pouvez les faire glisser vers le plan de travail et les utiliser en l’état, ou vous pouvez les adapter à l’aspect de votre application. Pour plus d’informations, voir Qu’est-ce qu’un composant ?.

Panneau Interactions
Ajoutez des interactions définissant ce qui se produit lorsque les utilisateurs interagissent avec l’application. Vous pouvez par exemple créer des interactions définissant la transition d’un état de page ou de composant vers un autre lorsque l’utilisateur clique sur un bouton. Vous pouvez également ajouter des interactions déclenchant la lecture d’animations, contrôlant la lecture de vidéos ou ouvrant une URL. Pour plus d’informations, voir Définition de la navigation et du comportement à l’aide des interactionsAnimations.

Panneau Aligner
Le panneau Aligner contient des contrôles permettant d’aligner, de distribuer et d’harmoniser les tailles des composants et des objets sur le plan de travail. Pour plus d’informations, voir Alignement de graphiques.

Panneau Scénarios
Le panneau Scénarios offre des contrôles pour la création de transitions et de séquences d’actions ainsi que pour leur modification. Il permet également de contrôler la lecture de contenu vidéo et SWF et d’ajouter des effets sonores. Pour plus d’informations, voir Animations.

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.

Panneau Propriétés
Le panneau Propriétés permet de modifier les propriétés des objets sélectionnés (graphiques, texte et composants). Les propriétés disponibles varient en fonction de l’objet sélectionné dans le plan de travail, dans le panneau Calques ou dans le panneau Scénarios.

Affichage tête haute
L’affichage tête haute fournit un accès rapide aux principales commandes liées à l’action actuelle ou à l’objet sélectionné. Il comporte les principales actions que vous pouvez appliquer à un objet sélectionné. L’affichage tête haute est activé par exemple lorsque vous sélectionnez des illustrations sur le plan de travail et permet de convertir une illustration en composant. Faites appel à l’affichage tête haute pour créer rapidement des composants.
  • Si l’affichage tête haute ne s’affiche pas lorsque vous sélectionnez un objet, cliquez sur Fenêtre > Affichage tête haute.

  • Lors de la conversion d’objets en composants, l’affichage tête haute affiche un message lorsque des étapes supplémentaires sont requises pour achever la création du composant.

  • Toutes les fonctionnalités de l’affichage tête haute sont également disponibles dans le menu principal. Vous pouvez par exemple convertir une illustration en composant en cliquant sur Modifier > Convertir l’illustration en composant.

Faites appel à l’affichage tête haute pour :

  • convertir une illustration en composant ou en partie de composant ;

  • modifier les parties et les états d’un composant ;

  • optimiser les éléments graphiques ;

  • rendre les parties d’un composant identiques dans tous les états ou copier les modifications d’un état vers un autre.

Afficher le graphique à sa taille d'origine
L’affichage tête haute est actualisé lors de la création d’une liste de composants de liste de données.

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

Espace de travail Code

L’espace de travail Code affiche le code sous-jacent à l’application. Ce code est automatiquement généré au fur et à mesure de la progression de votre travail dans Flash Catalyst.

Les applications générées dans Flash Catalyst reposent sur la structure Flex. Flex est une structure « open source » permettant la génération et le déploiement d’applications exécutables dans la plupart des navigateurs et des systèmes d’exploitation. MXML est le langage utilisé par les développeurs pour définir la mise en page, l’aspect et les comportements dans Flex. ActionScript 3.0 est le langage utilisé pour définir la logique de l’application côté client. A la publication du projet Flash Catalyst, les langages MXML et ActionScript sont compilés ensemble dans un fichier SWF.

L’affichage du code MXML permet aux concepteurs de comprendre comment l’application est programmée. L’espace de travail Code est en lecture seule. Pour modifier le code, ouvrez le projet dans Adobe Flash Player. Pour plus d’informations, voir Flux de production entre Flash Catalyst CS et Flash Builder.

Panneau de code
Ce panneau affiche le code MXML.

Panneau Erreurs
Ce panneau affiche les erreurs détectées dans le code MXML actuel.
Dans le panneau Erreurs, cliquez deux fois sur une erreur pour la localiser dans le code.

Panneau Navigateur de projet
Ce panneau affiche la structure du répertoire du projet Flex ainsi que les fichiers créés au fur et à mesure de la conception du projet dans Flash Catalyst.

Création d’un projet Flash Catalyst

Vous pouvez créer un projet de deux manières différentes :

  • Ouvrez un plan de travail vierge et créez-y votre application. Cette approche permet de générer rapidement la structure filaire d’une interface utilisateur. Flash Catalyst fournit des composants de bibliothèque commune, des outils de dessin et des fonctions pour l’importation de différents médias permettant de créer rapidement un prototype d’interface.

  • Importez un document de conception complet en tant qu’illustration multicalque créée dans Adobe Photoshop ou Illustrator ou importez une création Fireworks exportée. Cette approche vous permet d’utiliser votre programme Adobe Creative Suite préféré pour la conception, puis de convertir rapidement l’illustration en application interactive opérationnelle.

Création d’un projet avec un plan de travail vierge :

  1. Démarrez Flash Catalyst. Dans la section Créer un nouveau projet de l’écran de bienvenue, sélectionnez Projet Adobe Flash Catalyst.

    Remarque : si un projet est déjà ouvert, sélectionnez Fichier > Nouveau Projet pour lancer un nouveau projet vierge.
  2. Dans la boîte de dialogue Nouveau projet, attribuez un nom au projet, saisissez des valeurs pour les dimensions et la couleur du plan de travail, puis cliquez sur OK.

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

    Un nouveau projet est créé avec un plan de travail vierge. Par défaut, l’espace de travail Création est activé. Créez votre application en important des illustrations, en ajoutant des pages, en créant des composants et en ajoutant des interactions et des transitions.

    Remarque : vous pouvez modifier ultérieurement les valeurs du plan de travail en cliquant sur Modifier > Paramètres du plan de travail.

Création d’un projet par l’importation d’illustrations dans un document de conception multicalque :

  1. Démarrez Flash Catalyst.

  2. Dans la section Créer un projet depuis un fichier de création de l’écran de bienvenue, sélectionnez le type de fichier que vous souhaitez importer. Vous disposez des options suivantes : fichier Adobe Illustrator AI, fichier Adobe Photoshop PSD et fichier FXG (les fichiers FXG peuvent être exportés à partir d’Adobe Fireworks ainsi qu’à partir d’autres applications).

    Remarque : si un projet est déjà ouvert, sélectionnez Fichier > Importer > <Type de fichier>.

    Toutes les illustrations contenues dans le document de conception sont ajoutées au nouveau projet Flash Catalyst. Le panneau Calques reflète la structure des calques du document importé, respectant ainsi la conception d’origine.

    Créez maintenant votre application en ajoutant des pages, en créant des composants et en ajoutant des interactions et des transitions.

    Pour plus d’informations, voir Importation d’illustrations.