Prototypage des applications Flex et Adobe Air

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 :

• L’article de Nick Myers sur la conception de produits interactifs à l’aide de Fireworks : http://www.adobe.com/go/learn_fw_interactiveproducts_fr

• L’article de Dave Cronin sur les tendances du prototypage : http://www.adobe.com/go/learn_fw_prototypingtrends_fr

• L’article de Matt Stow sur l’utilisation de modèles CSS prédéfinis dans Fireworks : Modèles CSS prédéfinis dans Fireworks CS4.

• L’article de Jim Babbage : Extraits du guide pratique Fireworks CS4 : importation, exportation, symboles, prototypage, muse à l’échelle.

• Les didacticiels vidéo de Dave Hogue sur l’utilisation de Fireworks pour la création de l’interaction et le prototypage rapide :

  • Utilisation de Fireworks pour la création de l’information et de l’interaction : http://www.adobe.com/go/learn_fw_infointeract_fr

  • Création de prototypes interactifs à l’aide de Fireworks : http://www.adobe.com/go/learn_fw_creatinginteractivepro_fr

  • Prototypage rapide à l’aide de Fireworks : http://www.adobe.com/go/learn_fw_rapidpro_fr

  • Fireworks partie intégrante du processus de création : http://www.adobe.com/go/learn_fw_completedesignpro_fr

• Article sur la création d’une application de site web à l’aide de Fireworks : http://www.adobe.com/go/learn_fw_designwebsiteapp_fr

• L’article de Kumar Vivek sur la création de projets pour les périphériques mobiles dans Fireworks : http://www.adobe.com/go/learn_fw_designmobiledevices_fr

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 :

• Pour partager avec des clients un prototype CSS flexible ou le peaufiner dans Adobe Dreamweaver, voir Exportation d’une disposition CSS.

• Pour créer un prototype plus classique reposant sur une table, voir Exportation de code HTML Fireworks.

• Pour distribuer une version du prototype au format PDF en vue de le commenter ou de l’imprimer, voir Exportation de fichiers Adobe PDF.

• Pour créer un prototype d’application Flex, reportez-vous à la section Prototypage d’applications Flex. Pour créer une application Adobe AIR, reportez-vous à la section Création d’une application Adobe AIR.

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 :

• Didacticiel d’exportation de fichiers CSS et d’images dans Fireworks sur http://www.adobe.com/go/learn_fw_exportcssimages_fr.

• Didacticiel de création de sites web conformes aux normes avec Fireworks sur http://www.adobe.com/go/learn_fw_standardscompliantdesign_fr.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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

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

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.

Création d’une application Adobe AIR

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.