Flux de production de prototypage

En associant le panneau Pages à d’autres fonctions performantes de Fireworks, vous pouvez créer rapidement des prototypes de logiciels et de sites web interactifs. Pour convertir un prototype finalisé en site fonctionnel, il vous suffit de l’exporter vers Adobe Flash®, Adobe Flex®, Adobe AIR™ ou Adobe Dreamweaver®.

Pour obtenir des conseils d’ordre général sur les flux de production de prototypage, voir les articles suivants dans le pôle de développement Fireworks :

Pour visionner un didacticiel vidéo sur les principes de base de Fireworks, reportez-vous à www.adobe.com/go/lrvid4034_fw_fr.

Création des pages

Dans le panneau Pages, créez le nombre de pages ou d’écrans nécessaires à la réalisation de votre projet initial. Au fur et à mesure que votre projet évolue, vous pouvez y ajouter des pages, ou en supprimer, à votre convenance.

Disposition des éléments de conception communs

Dans la zone de travail, disposez les éléments conceptuels à reproduire sur plusieurs pages (barres de navigation et images d’arrière-plan, par exemple). Servez-vous des repères commentés pour aligner les éléments. Pour travailler avec un maximum de souplesse, structurez votre mise en page avec des feuilles de style CSS (voir les sections Repères commentés et Création de dispositions CSS)..

Partage d’éléments communs entre plusieurs pages

La modification d’un élément commun à plusieurs pages se répercute systématiquement sur toutes les pages concernées. Servez-vous d’un gabarit pour partager tous les éléments du contenu, ou partagez les calques pour copier des sous-ensembles d’éléments (voir les sections Utilisation d’un gabarit et Partage des calques).

Ajout d’éléments uniques à des pages individuelles

Sur chaque page, vous pouvez ajouter des éléments uniques de conception, de navigation ou de forme. Dans le panneau Bibliothèque commune, vous trouverez de nombreux boutons, des zones de texte et des menus contextuels qui vous permettront d’accélérer le processus de conception. Les symboles contenus dans les dossiers Flex Components, HTML, Mac, Win, web et Application et Barres de menu présentent des propriétés que vous pouvez personnaliser pour certaines occurrences de symboles (voir la section Création et utilisation de symboles de composant).

Simulation de la navigation utilisateur à l’aide de liens

A partir d’objets web tels que tranches, zones sensibles ou boutons de navigation, vous pouvez relier les différentes pages de votre prototype (voir la section Liens vers des pages d’un document Fireworks).

Exportation du prototype finalisé interactif

Pour votre prototype, Fireworks propose de nombreux formats de sortie qui conservent tous les liens hypertextes de navigation. Voir les articles suivants :

Création de dispositions CSS

Vous pouvez créer des dispositions CSS dans un document Fireworks, puis les convertir en pages HTML via des règles CSS répliquant vos dispositions. Les dispositions CSS fournissent une méthode normalisée et offrent un code compatible avec différents navigateurs.

Pour visionner un didacticiel vidéo sur la création de dispositions de page HTML CSS, voir www.adobe.com/go/lrvid4035_fw_fr. Voir également les ressources suivantes :

A propos de la mise en page CSS

Fireworks permet de concevoir des pages et d’exporter instantanément le code HTML et CSS grâce à un moteur d’exportation qui analyse l’emplacement des objets. En outre, vous pouvez définir l’alignement des pages et spécifier une image d’arrière-plan récurrente.

Vous pouvez utiliser les éléments HTML disponibles dans le dossier HTML de la bibliothèque commune. Le dossier HTML contient des éléments HTML, par exemple des boutons, des listes déroulantes et des champs de texte. Vous pouvez modifier les propriétés de ces éléments dans le panneau Propriétés du symbole. Lorsque vous faites glisser les éléments de forme sur la page, le moteur d’exportation insère des balises <form> pendant l’exportation de la disposition CSS.

Tout texte auquel a été ajoutée une tranche s’affiche sous la forme d’images dans le code HTML exporté. Pour que ce texte s’affiche sous la forme d’un texte, utilisez les composants HTML dans la bibliothèque commune. Les composants HTML comprennent les en-têtes 1 à 6 et des éléments de lien.

Règles des dispositions CSS

Quelques règles doivent être observées pendant la création des dispositions CSS pour obtenir les résultats souhaités.

Règle 1 : utilisez les rectangles pour exporter du texte et les tranches pour exporter des images

Le moteur d’exportation exporte le texte placé dans les rectangles. Comme seules les images qui sont recouvertes par des tranches rectangulaires sont exportées, placez des tranches sur les images à exporter. Ces tranches indiquent au moteur d’exportation l’emplacement de ces images.

Règle 2 : évitez la superposition des objets

Le moteur d’exportation traite le texte, les images et les rectangles comme des blocs rectangulaires. Il examine la taille et la position de ces objets pour déterminer les lignes et les colonnes logiques dans lesquelles les placer dans la disposition. Positionnez avec soin les objets en veillant à ce que les limites ne se superposent pas.

Règle 3 : planifiez la disposition des lignes et des colonnes

Le moteur d’exportation recherche les partitions logiques où une délimitation nette peut être placée entre les objets et les groupes d’objets. Délimitez les dispositions des colonnes dans un rectangle pour empêcher le moteur d’exportation d’insérer une ligne logique qui viendrait rompre la disposition des colonnes.

Règle 4 : traitez le document en deux dimensions

Lorsque vous créez votre page, utilisez des rectangles pour encadrer les objets que vous souhaitez traiter comme les enfants du rectangle. Le moteur d’exportation détecte ces relations parent-enfant. Il analyse les éléments enfants des lignes et des colonnes logiques comme dans la règle 3.

En plus de ces règles, vous devez faire attention aux points suivants :

  • Le moteur d’exportation n’exporte que des rectangles primitifs. Pour exporter les angles arrondis des rectangles, recouvrez-les avec des tranches rectangulaires.

  • Pour exporter les contours des rectangles, recouvrez-les avec des tranches rectangulaires.

  • Pour exporter les symboles, recouvrez-les avec une tranche rectangulaire.

  • Pour exporter les filtres que vous avez appliqués au texte ou aux rectangles, recouvrez-les avec des tranches rectangulaires.

Exportation d’une disposition CSS

Fireworks permet d’exporter des dispositions créées en tant que fichiers CSS. Vous pouvez ensuite ouvrir et modifier ces fichiers CSS dans Dreamweaver ou dans un autre éditeur compatible avec CSS.

  1. Choisissez la commande Fichier > Exporter.

  2. Dans le menu contextuel Exporter, sélectionnez la commande CSS et Images.

  3. Pour définir les propriétés de la page HTML, cliquez sur Options.

  4. Pour définir une image d’arrière-plan et la faire apparaître en mosaïque, cliquez sur Parcourir :

    • Pour afficher l’image une seule fois, sélectionnez Pas de répétition.

    • Pour répéter, ou mettre en mosaïque, l’image à l’horizontale et la verticale, sélectionnez Répétition.

    • Sélectionnez Répéter-x pour former une mosaïque horizontale.

    • Pour former une mosaïque verticale, sélectionnez Répéter-y.

  5. Dans le navigateur, sélectionnez un alignement de page à gauche, au centre ou à droite.

  6. Sélectionnez le défilement des pièces jointes en mode fixe ou défilement.

  7. Cliquez sur le bouton OK, puis sur Enregistrer.

Création d’une démonstration du document

Vous pouvez créer une démonstration du document Fireworks sur lequel vous travaillez. La démonstration s’ouvre dans un navigateur afin de présenter les caractéristiques et vous permet de naviguer dans les pages.

  1. Sélectionnez Commandes > Démonstration - Document actif.

  2. Sélectionnez les pages pour lesquelles vous voulez créer une démonstration, puis cliquez sur l’option de création d’une démonstration.

  3. Sélectionnez le dossier, puis cliquez sur Ouvrir.

Prototypage d’applications Flex

Le processus de prototypage pour Flex est semblable au flux de production utilisé pour les sites web et les interfaces logicielles (voir la section Flux de production de prototypage). Avec Fireworks, vous avez la possibilité de faire glisser des composants Flex dans la zone de travail, de spécifier leurs propriétés et d’exporter l’interface utilisateur résultante vers MXML. Vous pouvez ensuite améliorer l’interface utilisateur dans Flex Builder.

Création d’une interface utilisateur Flex

A l’aide du panneau Pages, créez le nombre d’écrans d’interface nécessaires à la réalisation de votre projet initial.

Insertion de composants de conception Flex dans la disposition

Dans la zone de travail, insérez des composants Flex depuis le dossier Flex dans le panneau Bibliothèque commune. Ces symboles de composant sont spécifiquement utilisés avec l’exportation MXML de façon à obtenir les résultats souhaités. Lors de l’exportation de votre document en tant que MXML, chacun de ces symboles est respectivement converti en la balise MXML qui lui correspond. Les objets qui ne sont pas reconnus comme composants Flex sont exportés en tant que bitmaps, qui sont liés au MXML via une balise <mx:Image> (voir la section Création et utilisation de symboles de composant).

Remarque :

Lors de la modification d’un composant de conception Flex dans Fireworks, vous pouvez copier le code XML modifié dans votre projet Flex. Vous gagnez ainsi du temps si vous souhaitez répliquer le comportement du composant modifié dans votre projet.

Les symboles Curseur, BarreDeDéfilement, Onglet et Info-bulle sont ignorés pendant une sortie MXML étant donné que ces composants ne sont pas directement convertis depuis Fireworks vers MXML. Par exemple, le symbole BarreDeDéfilement s’affiche automatiquement dans les instances du conteneur Flex lorsqu’il est possible de faire défiler leur contenu. Dans Fireworks, ces symboles font simplement office d’indicateurs sur le mode de fonctionnement des parties d’une conception d’interface.

Remarque :

Les tranches d’image, les survols et les zones sensibles s’appliquent uniquement aux prototypes HTML. Evitez ces objets web lors de la création de prototypes Flex.

Partage de composants Flex communs entre plusieurs pages

Si un composant Flex est commun à plusieurs pages, toute modification met automatiquement à jour toutes les pages (ou écrans) affecté(e)s. Servez-vous d’un gabarit pour partager tous les composants Flex qu’il contient ou partagez les calques pour copier des sous-ensembles des composants (voir les sections Utilisation d’un gabarit et Partage des calques).

Spécification de propriétés pour les composants Flex

Dans le panneau Propriétés du symbole (Fenêtre > Propriétés du symbole), spécifiez les propriétés et les événements de chaque composant Flex inséré dans la zone de travail.

Exportation de la disposition Flex au format MXML

Exportez la disposition d’interface utilisateur Flex, puis ouvrez le fichier MXML résultant dans Flex. Fireworks exporte le MXML requis tout en conservant le style et le positionnement absolu. Les développeurs Flex peuvent utiliser cette interface sans avoir à recréer la disposition dans Flex.

Modification des propriétés de composants Flex

Vous pouvez modifier les propriétés et les événements des composants Flex dans le panneau Propriétés du symbole.

  1. Sélectionnez le composant Flex dans la zone de travail.

  2. Ouvrez le panneau Propriétés du symbole (Fenêtre > Propriétés du symbole).

  3. Définissez les propriétés et les événements du composant dans le panneau Propriétés du symbole.

Exportation d’un document Fireworks au format MXML

Fireworks peut vous permettre de structurer des applications Internet enrichies (RIA) en activant l’exportation d’actifs de bibliothèque communs en tant que composants connus à utiliser dans Adobe Flex Builder. Fireworks exporte le code Flex requis (MXML) tout en conservant le style et le positionnement absolu.

Lors de la finalisation d’un prototype d’application Flex, exportez-le au format MXML en vue d’éditions supplémentaires dans Flex Builder. En mode de conception, le prototype ressemble à son équivalent Fireworks, sauf en ce qui concerne les composants tels que les curseurs et les barres de défilement qui ne sont pas exportés.

  1. Choisissez la commande Fichier > Exporter.

  2. Dans le menu contextuel Exporter, sélectionnez MXML et images.

  3. Sélectionnez l’option Placer les images dans des sous-dossiers si vous souhaitez enregistrer les images dans un dossier distinct de celui contenant le code MXML.

  4. Sélectionnez l’option Page active uniquement pour n’exporter que la page sélectionnée.

  5. Cliquez sur Enregistrer pour terminer l’exportation.

    Les images associées au prototype sont exportées vers le dossier d’images. De plus, les images des pages MXML complètes sont également créées avec les autres fichiers d’images. Vous pouvez supprimer les pages MXML car elles ne requièrent pas ces images d’aperçu.

Création et exportation d’habillages Flex

Vous pouvez habiller des composants Flex dans Fireworks, puis les exporter afin de les utiliser dans des sites web et des interfaces d’application Flex.

Composants Flex d’habillage

Vous pouvez créer des habillages pour de nombreux composants Flex basés sur les modèles d’habillage Flex et les modifier dans Fireworks.

  1. Sélectionnez Commandes > Habillage Flex > Nouvel habillage Flex.

  2. Procédez de l’une des manières suivantes :

    • Pour créer des habillages Flex pour tous les composants disponibles, sélectionnez Composants multiples.

      Fireworks crée un seul document avec tous les composants Flex disponibles.

    • Pour spécifier les composants pour lesquels vous voulez créer des habillages, sélectionnez Composants spécifiques.

      Sélectionnez uniquement les composants qui ont un style spécifique ou sélectionner toutes les instances du composant.

  3. Cliquez sur OK.

Exportation d’habillages Flex

  1. Sélectionnez Commandes > Habillage Flex > Exporter habillage Flex.

  2. Sélectionnez le dossier d’exportation du document Fireworks et cliquez sur Ouvrir.

Restrictions de l’exportation MXML

Avant d’utiliser la fonction d’exportation Flex MXML, il est important de connaître ses fonctionnalités et ses limites :

L’exportation MXML ne procède pas à l’habillage des composants

L’exportation au format MXML ne crée pas d’habillages pour les composant dans Flex, même si vous les avez modifiés dans Fireworks. L’exportation au format MXML génère simplement des documents MXML à utiliser dans Flex. Ces documents peuvent également comporter des images liées pour des objets Fireworks qui ne peuvent pas être convertis en balises MXML. Ces images sont ajoutées au document MXML via des balises <mx:Image>.

L’exportation MXML ignore les tranches

L’exportation au format MXML étant conçue pour générer un document doté de balises à utiliser avec Flex, les tranches ne sont pas prises en compte dans la création d’images ou de cellules de tableau. Lorsque l’exportation au format MXML crée des images, elle utilise les paramètres d’optimisation du document pour déterminer le format d’image et la méthode de compression.

Les propriétés MXML sont limitées aux propriétés de symboles enrichis

L’exportation au format MXML base les propriétés d’une balise MXML sur le composant Flex dans Fireworks. Fireworks fournit un sous-ensemble de composants Flex avec un nombre de propriétés limité.

Les styles sont intégrés

Les propriétés reconnues en tant que styles sont séparées des balises MXML créées, mais sont conservées dans le même document MXML dans une balise <mx:Style>. Fireworks ne peut pas définir les styles dans un fichier CSS externe.

Les cadres ne sont pas pris en charge

Lors de la création de conceptions et de mises en page pour une sortie MXML, n’utilisez pas de cadres. Si vous souhaitez obtenir des conceptions différentes dans un document, utilisez des pages.

Prototypage d’applications Adobe AIR

Grâce à Adobe® AIR™ pour Fireworks, vous pouvez convertir un prototype Fireworks en une application de bureau. Par exemple, certaines pages de prototype interagissent entre elles pour afficher des données. Vous pouvez utiliser Adobe AIR pour regrouper cet ensemble de pages en une petite application qui peut être installée sur l’ordinateur d’un utilisateur. Lorsqu’un utilisateur exécute l’application depuis son bureau, celle-ci se charge et affiche le prototype dans sa propre fenêtre d’application, indépendamment d’un navigateur. L’utilisateur peut ainsi consulter le prototype en local sur son ordinateur sans connexion Internet.

Voir l’article d’Ethan Eismann sur Adobe AIR et l’expérience utilisateur de la marque : http://www.adobe.com/go/learn_fw_airexperiencebrand_fr.

Ajout d’événements de souris Adobe AIR

Vous pouvez ajouter des événements de souris Adobe AIR prédéfinis aux objets de votre document. Fireworks propose quatre événements de souris prédéfinis : fermer la fenêtre, faire glisser la fenêtre, agrandir la fenêtre et réduire la fenêtre.

  1. Sélectionnez les objets sur la zone de travail auxquels vous souhaitez appliquer les événements de souris.

  2. Sélectionnez la commande Commandes > Evénements de souris 3D et choisissez l’événement.

Aperçu d’une application Adobe AIR

Vous pouvez prévisualiser une application Adobe AIR sans définir de paramètres d’application Adobe AIR.

  1. Choisissez la commande Commandes > Créer un package AIR, puis cliquez sur l'option Aperçu.

Création d’une application Adobe AIR

  1. Sélectionnez Commandes > Créer un package AIR et définissez les options suivantes :

    Nom de l’application

    Spécifiez le nom qui s’affiche sur les écrans d’installation lorsque des utilisateurs installent l’application. L’extension spécifie le nom du site Fireworks par défaut.

    ID de l’application

    Entrez un ID unique pour votre application. N’utilisez pas d’espaces ni de caractères spéciaux dans l’ID. Les seuls caractères valides sont 0 à 9, a à z, A à Z, . (point) et - (tiret). Ce paramètre est obligatoire.

    Version

    Spécifiez un numéro de version pour votre application. Ce paramètre est obligatoire.

    Dossier du menu Programmes

    Spécifiez un dossier dans le menu Démarrer de Windows où vous souhaitez créer le raccourci vers l’application. (Non applicable sous Mac OS)

    Description

    Ajoutez la description à afficher lorsque l’utilisateur l’installe l’application.

    Copyright

    Spécifiez l’avis de copyright qui s’affiche dans la section indiquant des informations sur les applications Adobe AIR installées sous Mac OS. Ces informations ne sont pas utilisées pour les applications installées sous Windows.

    Contenu du package

    Sélectionnez l’option Document actif pour définir automatiquement le dossier à partir duquel les fichiers sont inclus.

    Contenu racine

    Cliquez sur Parcourir pour choisir la page qui s’affiche en tant que contenu racine. Si vous avez sélectionné Document actif, le contenu racine est défini automatiquement.

    Fichiers inclus

    Spécifiez les fichiers ou dossiers à inclure dans votre application. Vous pouvez ajouter des fichiers HTML et CSS, des fichiers d’image et des fichiers de bibliothèque JavaScript. Cliquez sur le bouton Plus (+) pour ajouter des fichiers et sur l’icône de dossier pour ajouter des dossiers. Pour supprimer un fichier ou un dossier de la liste, sélectionnez-le et cliquez sur le bouton Moins (-). Les fichiers ou les dossiers sélectionnés à inclure dans le package Adobe AIR doivent appartenir au dossier du contenu racine.

    Chrome système et Transparent

    Spécifiez le style de fenêtre (ou chrome) à utiliser lorsque les utilisateurs exécutent l’application sur leur ordinateur. Le chrome système entoure l’application avec le contrôle de fenêtre standard du système d’exploitation. Le chrome transparent supprime le chrome système standard et vous permet de créer le vôtre pour l’application. Vous pouvez donc créer des fenêtres d’application qui ne sont pas rectangulaires.

    Largeur et Hauteur

    Spécifiez les dimensions de la fenêtre d’application en pixels lorsqu’elle s’ouvre.

    Sélectionner les images d’icône

    Cliquez pour sélectionner des images personnalisées pour les icônes de l’application. Sélectionnez le dossier pour chaque taille d’icône et choisissez l’image à utiliser. Seuls les fichiers PNG sont pris en charge pour les images d’icônes de l’application.

    Remarque :

    Les images personnalisées sélectionnées doivent résider dans le site de l’application et leurs chemins doivent être relatifs à la racine du site.

    Signature numérique

    Cliquez sur Définir pour signer votre application à l’aide d’une signature numérique. Ce paramètre est obligatoire. Pour plus d’informations, reportez-vous aux sections suivantes.

    Package de fichiers

    Spécifiez le dossier dans lequel est enregistré le nouveau programme d’installation de l’application (fichier .air). L’emplacement par défaut est la racine du site. Cliquez sur le bouton Parcourir pour choisir un autre emplacement. Le nom de fichier par défaut est basé sur le nom du site suivi de l’extension .air. Ce paramètre est obligatoire.

Signature d’une application Adobe AIR à l’aide d’un certificat numérique

Une signature numérique permet de garantir que le code d’une application n’a pas été modifié ou corrompu depuis sa création par l’auteur du logiciel. Toutes les applications Adobe AIR nécessitent une signature numérique et ne peuvent être installées sans celle-ci.

  1. Dans la boîte de dialogue Créer un package AIR, cliquez sur le bouton Définir situé en regard de l’option Signature numérique.

  2. Dans la boîte de dialogue Signature numérique, effectuez l’une des opérations suivantes :

    • Pour signer une application avec un certificat numérique préacheté, cliquez sur le bouton Parcourir, sélectionnez le certificat, entrez le mot de passe correspondant et cliquez sur OK.

    • Pour créer votre propre certificat numérique d’auto-signature, cliquez sur le bouton Créer et remplissez la boîte de dialogue. L’option de type de clé du certificat fait référence au niveau de sécurité du certificat : 1024-RSA utilise une clé 1 024 bits (moins sécurisée) et 2048-RSA une clé 2 048 bits (plus sécurisée). Lorsque vous avez terminé, cliquez sur Créer. Ensuite, entrez le mot de passe correspondant dans la boîte de dialogue Signature numérique et cliquez sur OK.

      Remarque :  vous devez disposer de Java® Runtime Environment (JRE) sur votre ordinateur.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne