Export PDF

de : Adobe Fireworks CS4 : Les fondamentaux

Acheter

À propos de cette vidéo

La nouveauté majeure de cette version est la possibilité d'exporter en PDF un ensemble de pages tout en conservant l'interactivité attribuée aux zones de découpe.

Un extrait de : Adobe Fireworks CS4 : Les fondamentaux

Chassant auparavant sur les terres de Photoshop, Fireworks, application désormais intégrée à la CS4, a trouvé son indépendance dans la préparation d’images pour Internet et la réalisation de prototypes d’applications web. Trait d’union entre les différents logiciels de la Creative Suite, il en est le complément, à votre service pour optimiser efficacement les multiples tâches d’un flux de production. Grâce à Fireworks, vous pouvez optimiser vos images pour Internet, préparer des formulaires et prototyper des applications web en direction de Flex ou de Director.

EUR 29,95

Acheter

Formations similaires

Bonus en ligne

Créer un diaporama pour le Web

Pour comprendre Fireworks, le formateur réalise pour vous, étape par étape, le prototype d'un site Web en partant de la maquette d'un fichier Photoshop.

Comprendre l'application
- Parfaitement intégré dans Creative Suite 4 avec les autres applications, Fireworks permet d'ouvrir des fichiers Photoshop tout en conservant les attributs de celui-ci.
  
  Ouvrir des fichiers Photoshop
  
  03:15
- Dans Fireworks, la notion de calque est différente de celle de Photoshop, et Fireworks possède en plus la possibilité de créer des pages et gabarit de pages.
  
  Calques et pages
  
  04:38
- En créant des tranches, vous définissez les zones sensibles qui apporteront de l'interactivité à votre prototype de site Internet. Vous pouvez spécifier l'URL et la cible de chacun des liens.
  
  Créer des tranches
  
  06:09
- Pour finaliser le prototype de votre projet, vous pouvez faire un aperçu dans le navigateur avant d'exporter en HTML vos pages Fireworks.
  
  Finaliser un prototype de site Web
  
  05:56
Fireworks propose une large gamme d'outils de dessin en mode vectoriel. En utilisant ces outils, vous garantissez la possibilité de modifications ultérieures de vos graphismes.

Dessin vectoriel
- L'outil Plume, bien connu de tous les graphistes est également présent dans Fireworks. Il permet de dessiner des formes que l'on peut remplir de multiples façons : dégradés, textures, motifs.
  
  Outil Plume
  
  06:33
- Grâce à ces outils, vous manipulez des formes vectorielles comme de la pâte à modeler ou du bitmap tout en gardant leurs possibilités d'édition. Ces outils, sensibles à la pression peuvent être utilisés avec une palette graphique.
  
  Manipulation de formes vectorielles
  
  03:16
- Parmi l'accroissement des performances de Fireworks CS4, la gestion du texte a fait une avancée significative. Désormais, les blocs de texte adoptent le même comportement que dans Photoshop et Illustrator.
  
  Outil Texte
  
  03:07
- Plus besoin de savoir dessiner !!
  
  Formes prédéfinies
  
  03:16
- La palette Tracé offre de multiples façons d'intervenir sur les tracés par combinaison, transformation, modification et sélection de points. Certains anciens utilisateurs de Freehand retrouveront des fonctions connues !
  
  Modifier des tracés
  
  06:22
Les masques et filtres dynamiques permettent d'enrichir astucieusement l'interface de vos prototypes.

Masques et filtres
- Pour masquer de façon temporaire ou permanente une portion de votre image, vous pouvez utiliser la technique des masques par tracés ou niveaux de gris.
  
  Masques vectoriels
  
  05:30
- Une couche bitmap peut servir de masque sur une image. Vous bénéficiez alors de toutes les options de remplissage que vous pouvez cumuler comme le type de remplissage, le texte ou jouer sur le niveau de l'échelle de gris du masque.
  
  Masques bitmap
  
  03:50
- En fonction de vos choix ou contraintes, vous pouvez appliquer des filtres destructifs ou dynamiques. En optant pour la deuxième solution, vous gardez la possibilité de modifications ultérieures des paramètres de filtres.
  
  Filtres destructifs VS dynamiques
  
  05:48
- Les effets de Photoshop peuvent être conservés et appliqués en tant que filtres de Fireworks CS4 tout en conservant leurs paramètres. De plus Fireworks vous permet d'archiver des combinaisons de filtres en tant que styles.
  
  Effets Photoshop dans Fireworks
  
  06:45
- Dans cette nouvelle version de Fireworks, la gestion de styles a été nettement améliorée. Vous pouvez maintenant accéder à une gestion efficace et productive des styles de votre document.
  
  Modification de style
  
  04:00
Il existe différentes manières de structurer des pages. Dans ce chapitre vous pourrez découvrir des structures basées sur des calques, des combinaisons de paramètres et des pages.

Structure d'interfaces
- Dans cette vidéo, le formateur s'appuie sur un exemple de prototype d'interface Web pour passer en revue les possibilités offertes par l'utilisation des calques.
  
  Structurer avec des calques
  
  04:19
- En combinant les paramètres de fusion et de transparence, vous pouvez faire varier à l'infini le comportement d'une image par rapport à l'autre.
  
  Les modes de fusion et transparences
  
  02:46
- Depuis la version CS3, Fireworks offre la possibilité de créer des pages et des gabarits de pages comme dans InDesign. Vous pouvez ainsi optimiser la création de vos prototypes en utilisant des pages pouvant avoir des propriétés indépendantes les unes des autres.
  
  Structure par pages
  
  05:32
- Les pages Fireworks sont les futures pages HTML de votre projet. Pour que votre projet soit fonctionnel, il faut donc les nommer en conformité avec les normes W3C avant de procéder à l'exportation.
  
  Exportation de pages
  
  06:28
Eléments essentiels permettant d'optimiser la productivité et la maintenance de votre projet, les symboles permettent de travailler efficacement dans la réalisation de vos prototypes d'application.

Utilisation des symboles
- Dans cette vidéo, le formateur fait la démonstration de l'intérêt de l'utilisation des symboles dans un projet tout en passant en revue les différentes possibilités offertes par ce type d'objet.
  
  Concept de symbole
  
  05:16
- Ce type d'objet permet d'être défini par plusieurs états en fonction des évènements provoqués par l'utilisateur et de déclencher l'ouverture d'URL dans un navigateur.
  
  Zones interactives : le symbole bouton
  
  06:01
- En activant les repères d'échelle à 9 découpes, vous pouvez maîtriser le comportement des angles d'un symbole en cas de redimensionnement. Cette fonctionnalité est particulièrement utile lors de la réalisation d'éléments d'interfaces devant être redimensionnés.
  
  Repères d'échelle à 9 découpes
  
  05:37
- Grâce aux éléments contenus dans ce panneau, vous pouvez facilement et rapidement prototyper une interface ou une application pour Macintosh ou Windows.
  
  Panneau de bibliothèque commune
  
  06:20
- Outre l'utilisation de composants paramétrables, vous pouvez créer vos propres composants affectés des propriétés que vous définissez en fonction de vos besoins. Il est alors très facile de les réutiliser dans vos différents projets.
  
  Composants intelligents
  
  07:37
Fireworks est pourvu de puissantes fonctionnalités Web permettant la mise en place et la définition des éléments dynamiques d'une page HTML. Dans ce chapitre, le formateur réalise des éléments d'interface tels que zones réactives, animations ou menu déroulant.

Fonctionnalités Web
- Même s'il existe des logiciels spécifiques pour l'animation tels que Flash CS4, il n'est pas toujours possible d'utiliser le format SWF. Fireworks permet de générer des animations au format GIF.
  
  Animations
  - Dans Fireworks, une animation est une suite d'états dans lesquels les propriétés des éléments peuvent changer. Dans cette vidéo, le formateur utilise plusieurs techniques pour animer des éléments.
    
    Animation simple
    
    08:34
  - L'interpolation de mouvement consiste à définir des images clés dans un espace temps, le logiciel s'occupant de calculer automatiquement les images intermédiaires. Dans Fireworks, un symbole peut être interpolé sur plusieurs images.
    
    Images interpolées
    
    05:58
  - Comme dans Flash, vous pouvez imbriquer des symboles afin de réaliser aisément des animations complexes. Même s'il n'est pas présent en tant que panneau un scénario existe par ses paramètres qui régissent le déroulement de vos animations.
    
    Animation par symboles imbriqués
    
    05:09
- Si Fireworks est connue pour être une application graphique, elle possède néanmoins de solides fonctionnalités Web qui en font un complément de choix pour Dreamweaver avec qui elle est parfaitement interfacée.
  
  Fireworks, HTML & CSS
  - Fireworks est l'outil idéal pour créer rapidement des tableaux complexes constituant des éléments d'interface interactifs pour vos futures pages HTML.
    
    Tranches de découpe pour le WEB
    
    09:39
  - Si l'option de tranche Premier plan est la plus couramment utilisée, vous avez néanmoins la possibilité d'affecter différentes propriétés à vos tranches en fonction de vos besoins.
    
    Options de tranche
    
    04:55
  - Vous pouvez utiliser Fireworks pour vous aider à dégrossir un travail de mise en forme en exportant vos éléments d'interface vers des fichiers HTML et CSS. Vous pouvez alors récupérer le code généré par Fireworks pour l'intégrer dans votre projet.
    
    Exportation CSS
    
    02:22
  - Pour conserver la transparence d'une couche alpha, vous pouvez choisir dans Fireworks des couleurs d'index spécifiant ainsi des couleurs de transparence pour vos fichiers GIF.
    
    Exportation de zones avec transparence
    
    05:38
  - Dans certains cas, il peut être nécessaire d'exporter des zones de découpes non rectangulaires.
    
    Zones de découpes non rectangulaires
    
    03:10
- Fireworks vous permet de définir des éléments d'interface contrôlés par le langage JavaScript. Ils restent bien sûr complètement exploitables et fonctionnels dans Dreamweaver.
  
  Elements d'interface et interactivité
  - Si vous désirez confectionner des boutons à l'aspect graphique irréprochable à intégrer dans vos pages HTML, vous pouvez utiliser Fireworks qui s'occupera de générer pour vous le code JavaScript permettant le fonctionnement de votre bouton.
    
    Création d'un bouton simple
    
    08:04
  - Vous pouvez utiliser Fireworks pour résoudre des problèmes d'interactivité complexe nécessitant la permutation d'images à l'aide de fonctions JavaScript. Ici encore le couple Fireworks/Dreamweaver fait merveille puisque le graphiste n'aura pas une ligne de code à écrire pour assurer le fonctionnement de son interface.
    
    Permutation complexe d'images
    
    07:33
  - Fireworks permet la réalisation de menus contextuels structurés complètement paramètrables que vous pouvez intégrer dans vos pages de site Web à condition de joindre les fichiers HTML, CSS et JavaScript générés lors de l'exportation.
    
    Création de menus contextuels
    
    11:43
La principale caractéristique de Fireworks est sa capacité à produire rapidement et facilement des prototypes d'applications pour le Web et Cédérom grâce à ses fonctions de dessin et mise en page, mais aussi par sa riche bibliothèque de symboles et composants.

Prototypage d'applications
- C'est principalement en direction du Web que Fireworks offre des possibilités de prototypage. Cette application ayant vue le jour en même temps que Dreamweaver, elle en garde un lien privilégié.
  
  Prototypage pour le Web
  - La bibliothèque commune de Fireworks offre tous les ingrédients pour prototyper rapidement des formulaires pour Macintosh et Windows. En paramétrant les symboles intelligents tels que TextField ou ComboBox on peut simuler de réels formulaires.
    
    Simulation de formulaires
    
    05:18
  - Le couple Fireworks/Dreamweaver permet de travailler en toute tranquillité sur des interfaces riches. Grâce aux liens dynamiques qui existent, il sera toujours possible de modifier les éléments graphiques sans altérer le travail fait dans Dreamweaver.
    
    Travailler avec Dreamweaver
    
    05:08
  - L'export CSS permet de transformer les zones de découpe dans Fireworks en balises DIV. De plus la référence aux éléments de formulaire est conservée.
    
    Export CSS
    
    06:14
- Flex Builder 3 est une application s'appuyant comme Flash sur le langage ActionScript 3 pour gérer les événements et actions, mais aussi sur une version customisée du langage XML, le MXML pour la mise en forme d'une application Web.
  
  Prototypage pour Flex
  - Une application Web, c'est une interface réussie sur un développement solide. Grâce au couple Fireworks/Flex Builder 3 et leurs composants communs, vous pouvez réaliser facilement une application. Dans cette vidéo, le formateur s'attache plus particulièrement à la mise en forme d'une application simple.
    
    Design dans Fireworks
    
    08:17
  - Une fois le design réalisé, la partie code est à mettre en place. Flex fournit tous les outils pour mener à bien cette étape.
    
    Développement dans Flex
    
    07:24
  - Un des composants les plus populaires dans la réalisation d'interface d'application Web est l'accordéon. Avec lui vous pouvez diffuser de l'information structurée dans une interface conviviale.
    
    Sur un air d'accordéon
    
    10:03
  - Dans un flux de production, vous pouvez utiliser Fireworks et Flex pour créer les éléments d'interface dont vous avez besoin dans vos pages HTML.
    
    Application Flex dans une page HTML
    
    02:03
  - Fireworks permet de redéfinir les enveloppes de composants Flex en créant des bibliothèques de fichiers PNG permettant de skinner une application Flex.
    
    Modifier les enveloppes de composant Flex
    
    06:52
- Fireworks permet de réaliser des applications AIR. Une application AIR s'appuie sur des développements HTML, JavaScript, ActionScript pour s'exécuter sur un poste de travail à travers un lecteur, comme un fichier PDF a besoin d'Acrobat Reader.
  
  Application AIR
  - Dans cette première partie, le formateur met en place les éléments graphiques et interactifs de la future application AIR.
    
    Mise en place dans Fireworks
    
    06:03
  - L'empaquetage d'une application AIR nécessite de nombreux paramètres ainsi qu'un certificat d'authentification. Lors de l'empaquetage, un fichier XML est créé regroupant tous les paramètres.
    
    Empaquetage des fichiers
    
    10:15
- Fireworks permet de prototyper une application développée ultérieurement par Director. Vous pouvez en particulier palier à LA lacune de Director : la gestion des acteurs 32 bits ayant une couche alpha.
  
  Application Director
  - Chacun des calques Fireworks pourra générer un acteur 32 bits dans Director. Avec une mise en place structurée des calques, la réalisation dans Director sera alors facilitée.
    
    Mise en place dans Fireworks
    
    07:04
  - Dans cette vidéo, le formateur finalise l'application dans Director grâce à l'import de fichiers Fireworks et quelques lignes de Lingo.
    
    Intégration et développement Lingo
    
    07:51
Fireworks étant le complément de beaucoup de logiciels, il offre de nombreux formats d'exportation et d'optimisation.

Export et optimisation
- La nouveauté majeure de cette version est la possibilité d'exporter en PDF un ensemble de pages tout en conservant l'interactivité attribuée aux zones de découpe.
  
  Export PDF
  
  04:26
- Activité primordiale du Webdesigner, la gestion de l'optimisation des médias issus des tranches de découpe. Dans Fireworks, la palette Optimisation et le panneau Assistant d'exportation permettent de nombreuses combinaisons.
  
  Le panneau Optimiser
  
  04:34
- Les tâches répétitives sur un grand nombre de fichiers peuvent atteindre le moral des graphistes. Les options de traitement par lots permettent de définir des procédures de traitement puis d'aller boire un café pendant que Fireworks travaille.
  
  Traitement par lots
  
  01:58