7 Images bitmap Bien que vectoriel dès l origine dans son principe, l environnement d intégration multimédia Flash ne pouvait se priver de prendre en compte les images bitmap, traitées dans une application dédiée, puis importées. Si l édition interne reste sommaire, il est possible de texturer avec une image bitmap et diverses solutions sont envisageables pour intégrer une image non rectangulaire. Flash offre deux voies pour préserver la légèreté du fichier SWF : la vectorisation ou l optimisation des images bitmap. Le chapitre se termine par trois sujets qui ne concernent pas directement les images bitmap, mais relèvent néanmoins du rendu matriciel effectué par le lecteur Flash, lequel a considérablement évolué dans ses dernières versions : modes de fusion similaires à ceux d Adobe Photoshop, cache bitmap pour optimiser l affichage, application de filtres. Fiche 52 Importer une image bitmap Du matriciel dans le vectoriel? Si Flash tire parti d une approche vectorielle du graphisme et si l environnement permet la vectorisation des images matricielles (voir Fiche 56), il en est qui présentent trop de nuances et de détails pour se prêter à une telle conversion et qui devront donc rester dans votre animation sous forme d images bitmap. Gardez à l esprit que toutes les images bitmap que vous allez importer dans votre animation seront incorporées au fichier SWF publié, l alourdissant d autant. Voyez la Fiche 59 consacrée à leur optimisation. Le Tableau 52.1 liste tous les formats d images bitmap que Flash reconnaît pour l importation. Les quatre premiers sont reconnus sur toute plateforme. Parmi les suivants, l un est propre au système Mac OS et trois autres à Windows. Avec une version 4 au moins du lecteur Apple QuickTime installée sur votre ordinateur (elle existe aussi pour Windows et vous pouvez la télécharger gratuitement à l adresse suivante : http://www.apple.com/fr/quicktime/download/), Flash reconnaîtra en plus les formats du Tableau 52.2. Au niveau des couleurs, Flash ne travaillant que dans l espace RVB, si les données sont codées dans un autre espace, à l importation elles seront converties automatiquement en RVB. Photoshop ou Illustrator pouvant produire un meilleur résultat, il est préférable que vous y fassiez vous-même la conversion. Le nouveau format FXG permet l échange de graphisme entre les différents logiciels de la suite CS5, donc en particulier des images bitmap en provenance de Fireworks ou Photoshop (voir Fiche 3).
336 Flash CS5 Tableau 52.1 : Les formats d image bitmap importables en standard dans Flash Formats Extensions Mac OS Windows Graphic Interchange Format.gif oui oui Joint Photographic Experts Group.jpg,.jpeg,.jpe oui oui Portable Network Graphics.png oui oui PhotoShop Document.psd oui oui Windows BitMaP.bmp,.dib non oui Windows MetaFile.wmf non oui Enhanced MetaFile.emf non oui Tableau 52.2 : Les formats d image bitmap importables via QuickTime dans Flash Formats Extensions Mac OS Windows MacPaint.pntg oui oui PICT.pict,.pct,.pic oui oui QuickTime Image File.qtif oui oui Silicon Graphics Image.sgi oui oui Truevision TGA.tga oui oui Tagged Image File Format.tif,.tiff oui oui Importer des données Photoshop L importation d une image bitmap au format natif Photoshop ( PSD, PhotoShop Document) est dans l ensemble similaire à l importation d un dessin vectoriel au format natif Illustrator (AI, Adobe Illustrator). Cette dernière ayant été traitée à la Fiche 18, pour éviter d être redondant nous vous y renvoyons. Rappelons toutefois la différence entre Importer sur la scène et Importer dans la bibliothèque : dans les deux cas l image bitmap est importée dans la bibliothèque, mais dans le premier une instance en est aussi créée sur la scène. Bien que Photoshop soit à la base un logiciel de retouche d images bitmap, il s est enrichi au fil des versions d outils vectoriels. Ainsi, parmi les calques composant un document PSD, vous trouverez à l occasion du dessin vectoriel ou du texte. Le module d importation PSD de Flash est capable de repérer ce qui est vectoriel et vous laisse la possibilité de le garder comme tel dans Flash.
Images bitmap 337 Comme vous pouvez le constater en comparant avec la Figure 18.1, la boîte de dialogue d importation Photoshop reproduite aux Figures 52.1 à 52.3 est très proche de celle de l importation Illustrator. La principale différence par rapport à cette dernière est la possibilité de fusionner des calques (dans Photoshop et Fireworks, on parle plutôt d aplatir des calques ; le choix de ce terme pour la version française de Flash aurait non seulement eu le mérite de la cohérence, mais il aurait écarté tout risque de confusion avec les modes de fusion traités à la Fiche 57). La zone principale vous présente la structure de calques du document importé, qui en contient au moins un. Pour chaque calque, tout à fait à gauche une case cochée par défaut vous permet éventuellement de le désélectionner pour l importation. À droite, après son aperçu et son nom, le type de son contenu est dénoté via l icône consacrée dans Flash : image bitmap, texte, forme ou groupe. En haut à droite de la boîte de dialogue s affichent les options d importation du ou des calque(s) sélectionné(s) à gauche. Elles varient bien sûr selon le type de contenu. La Figure 52.1 montre les options d importation pour le dessin vectoriel. Si pour l option Importer ce calque de forme en tant que, vous cochez l option Tracés modifiables et styles de calque, vous préservez alors la nature vectorielle du graphisme. Par styles de calque, il faut en fait comprendre l opacité et les modes de fusion qui seront dans la mesure du possible préservés (voir Fiche 57). À l inverse, en cochant l option Image bitmap aplatie, vous perdez à la fois la nature vectorielle et les styles de calques. Figure 52.1 Importation Photoshop : calque sélectionné contenant du dessin vectoriel. La Figure 52.2 montre les options d importation pour le texte. Choisissez pour Importer ce calque de texte en tant que l option Texte modifiable pour préserver à la fois le caractère
338 Flash CS5 éditable du contenu textuel et la nature vectorielle des caractères. En cochant Contours vectoriels, vous perdrez le caractère éditable du contenu, mais vous préserverez la nature vectorielle des caractères. C est ainsi l option qui convient pour du texte attaché à une courbe, que Flash ne peut conserver tel quel. Dans les deux options précédentes, l option Créer un clip pour ce calque est automatiquement cochée. Si vous cochez la dernière option Image bitmap aplatie, plus rien ne sera éditable, ni le fond (le texte), ni la forme (les caractères). Figure 52.2 Importation Photoshop : calque sélectionné contenant du texte. La Figure 52.3 montre les options d importation pour l image bitmap. En choisissant pour Importer ce calque d image en tant que l option Image bitmap avec des styles de calque modifiables, les modes de fusion seront dans la mesure du possible préservés. Créer un clip pour ce calque est alors automatiquement cochée. À l inverse, si vous cochez l option Image bitmap aplatie, les modes de fusions ne seront plus éditables dans Flash. Lorsque une image bitmap présente de la transparence (binaire, dénotée par un fond en damier), celle-ci est préservée. La Figure 54.7 vous donne un exemple d importation d une image détourée dans Photoshop. Vous pouvez choisir de Créer un clip pour ce calque (nous avons vu précédemment que parfois ce n est pas un choix, mais une nécessité). Si cette option est cochée, vous avez accès au champ Nom de l occurrence, ainsi qu à la définition de son point d Alignement. La création d un clip permet de conserver certains effets Photoshop qui pourront être rendus dans Flash à l aide de modes de fusion ou de filtres. La section Paramètres de publication permet de spécifier les réglages de compression qui seront appliqués à l image bitmap lors de la publication (voir Fiche 56). Un bouton vous permet de Calculer la taille du bitmap en fonction de ces réglages.
Images bitmap 339 Figure 52.3 Importation Photoshop : calque sélectionné contenant de l image bitmap. En bas de la boîte de dialogue, le bouton Fusionner les calques devient accessible après que vous avez fait une sélection multiple, de façon classique par MAJ+CLIC et/ou CMD+CLIC (Mac) ou CTRL+CLIC (Windows). Si vous cliquez le bouton, un nouveau calque Bitmap fusionné est créé, les calques d origine sont grisés et l intitulé du bouton devient Séparer, comme le montre la Figure 52.4. L intérêt d aplatir ainsi les calques (sans impact sur le fichier PSD original) est de vous permettre d appliquer en une seule fois les mêmes options d importation à un ensemble de calques. Figure 52.4 Calques aplatis lors de l importation Photoshop.
340 Flash CS5 Le menu Convertir les calques vous offre deux possibilités : soit avec Calques Flash faire de chaque calque Photoshop un calque Flash distinct, soit avec Images-clés en faire une image-clé distincte du scénario. Le plus souvent, vous ferez le premier choix, le second étant surtout pertinent dans le cas particulier où vous aurez mis en place dans les calques d un même document Photoshop les différentes phases d une animation. L option Placer les claques à leur position d origine est cochée par défaut. Elle ne doit pas vous inciter à gifler qui que ce soit, pas même les gens responsables de la version française de Flash! Simplement, en la décochant les données importées seront globalement centrées sur la scène, mais les différents éléments conserveront leurs positions relatives. Cette option n existe que dans l importation sur la scène. L option Définir la taille de la scène sur celle de la zone de travail de Photoshop modifie automatiquement les dimensions de la scène afin de les adapter à celles du document Photoshop. Lorsque vous validez, l ensemble du fichier PSD est encapsulé dans un symbole Flash qui porte le nom du fichier. Un dossier portant lui aussi le nom du fichier importé est créé dans la bibliothèque au même niveau que le symbole. Il contient toutes les ressources utilisées dans la hiérarchie du symbole. Cette dernière est conservée telle qu elle a été établie dans Photoshop, mais elle est présentée par ordre alphabétique. Les données importées le sont dans le scénario du clip. L importation de fichiers PSD a quelques limites et certaines des nombreuses possibilités du format ne sont pas reconnues par Flash : les objets dynamiques, les calques et images de remplissage, les calques de réglage. Leur caractère éditable est perdu dans Flash, mais leur application a bel et bien lieu, comme s ils avaient été aplatis avec un calque classique. La Figure 52.5 reproduit la section Importateur de fichier PSD de la boîte de dialogue Préférences. On y retrouve les options décrites ci-dessus pour l image bitmap, le texte et les formes vectorielles. Choisir une option dans cette boîte de dialogue, c est en faire l option cochée par défaut lorsque vous sélectionnerez pour la première fois un calque dans la partie gauche de la boîte de dialogue d importation. Raccourci CMD+R (Mac) ou CTRL+R (Windows) importe un fichier dans la scène.
Images bitmap 341 Figure 52.5 La section Importateur de fichier PSD de la boîte de dialogue Préférences. Importer des données Fireworks Avant le rachat par Adobe, Fireworks et Flash étaient à l origine tous deux des produits Macromedia. Ils sont donc depuis longtemps communicants. Les concepteurs de Fireworks ont choisi comme format natif de l application le standard PNG (Portable Network Graphics). Le PNG Fireworks est l une des mises en œuvre les plus poussées des spécifications de ce format par le W3C. Lorsque vous invoquez une commande Enregistrer dans Fireworks, un fichier PNG Fireworks est donc produit qui contient tous les calques et masques qui composent votre graphisme. En cela, PNG Fireworks est à Fireworks ce que PSD est à Photoshop. Lorsque vous invoquez une commande Exporter dans Fireworks comme dans la plupart des autres éditeurs d images matricielles un choix de formats de fichier s offre à vous, parmi lesquels le PNG. Cette fois, le fichier produit contiendra le graphisme avec ses calques aplatis. L un des intérêts majeurs du format PNG est la gestion d une couche alpha, donc la possibilité de coder de la transparence en niveaux de gris. Ce format est précieux pour l importation de ce type de transparence dans Flash (voir Fiche 54). La Figure 52.6 reproduit la boîte de dialogue Importer un document Fireworks. Si vous cochez l option Importer sous forme de bitmap fusionnée, toutes les autres options seront désactivées puisqu elles sont relatives aux différentes pages et/ou calques qui composent l image avant d être aplatis.
342 Flash CS5 Figure 52.6 La boîte de dialogue Importer un document Fireworks. Lorsque le document Fireworks est composé de plusieurs pages, vous avez le choix entre en importer une ou les importer toutes. Dans ce dernier cas, un nouveau calque portant le nom du fichier importé est créé et chaque page y fait l objet d une image-clé. Le choix par défaut pour l option Dans est Image actuelle sous forme de clip. Les calques du fichier importé deviennent autant de calques du nouveau symbole clip d animation. Si vous choisissez Nouveau calque, l ensemble du contenu est importé et aplati en un calque unique. On retrouve avec les options pour Objets et Texte les mêmes enjeux que précédemment pour l importation Photoshop. Dans les deux cas, avec l option par défaut Importer au format bitmap pour préserver l apparence, contrairement à ce que laisse penser l intitulé, tout ce qui pourra être préservé sous forme vectorielle le sera et le reste par exemple un mode de fusion ou un effet sans équivalent dans Flash, ou bien du texte attaché à une courbe sera aplati ou rasterisé, c est-à-dire converti en image bitmap. Ne choisissez Préserver tous les trajets modifiables (il faut lire tracés modifiables), pour les Objets, et Conserver tous les caractères modifiables, pour le Texte, que si vous êtes sûr que votre graphisme ne contient rien qui ne soit pas reconnu par Flash, sinon l importation sera partielle. Voyez la Fiche 57 pour les modes de fusion restitués dans Flash et la Fiche 59 pour les effets transposables en filtres Flash. N hésitez pas à importer une image provenant de Fireworks sous forme aplatie. Lorsque votre image aura été instanciée et que vous en sélectionnerez une copie (on ne parle pas d occurrence) sur la scène, le panneau Propriétés s affichera tel que le montre la Figure 52.7. Vous remarquez que l on y trouve un bouton Modifier. Si ce bouton est grisé, cela signifie que le fichier a été renommé ou déplacé après que vous l ayez importé et qu il faut le ré-importer. En cliquant sur le bouton, le fichier original est ouvert dans Fireworks, où vous pouvez effectuer toutes les modifications souhaitables. En haut à gauche de la fenêtre Fireworks se trouve une mention Modification à partir de Flash. Quand vous avez terminé votre retouche, cliquez sur le bouton Terminé à gauche de la mention. Vous revenez alors dans Flash où l image bitmap est mise à jour dans la bibliothèque, et par la même toutes les copies que vous en avez faites dans le scénario. Ce mode de fonctionnement est très efficace, puisqu il vous évite de réitérer la procédure d importation à chaque modification.
Images bitmap 343 Figure 52.7 Le panneau Propriétés lorsqu une copie d image bitmap est sélectionnée sur la scène. L importation de données Fireworks sans aplatir crée dans votre bibliothèque un dossier Objets Fireworks où se trouvent les clips générés. Libre à vous de réorganiser à votre convenance. Il est sans doute judicieux de donner aux clips et aux images des noms plus descriptifs que Symbole 1, Symbole 2, etc., Bitmap 1, Bitmap 2, etc. PNG Fireworks. C est le format des fichiers sources des images bitmap composées dans cet éditeur graphique, de même que PSD est le format des fichiers source de celles composées dans Photoshop. Un fichier PNG Fireworks contient toutes sortes d informations sur la structure de l image (calques, masques, effets, modes de fusion, etc.). Il ne peut donc être ouvert que par Fireworks. PNG. C est un format d image bitmap, promu par le W3C. La plupart des éditeurs graphiques sont désormais capables d exporter une image à ce format. Dans ce cas, il s agit d une image aplatie, c est-à-dire dont tous les calques et les effets ont été aplatis. Le format PNG est avec GIF et JPEG l un des trois standards pour le multimédia. Un fichier PNG peut être ouvert par n importe quelle application graphique. Notions clés Importer en lot Vous avez la possibilité d importer en une seule opération tout un lot de fichiers. Faites une sélection multiple dans la boîte de dialogue d importation, comme d habitude avec les touches MAJ et/ou CMD (Mac) ou CTRL (Windows). Si le dossier que vous sélectionnez dans cette boîte de dialogue contient une séquence de fichiers qui ont un préfixe commun et ne différent que par un numéro final, les numéros étant consécutifs par exemple, papillon01.jpg, papillon02.jpg, papillon03.jpg, etc. Flash le détecte lorsque vous sélectionnez le premier fichier. Une boîte de dialogue spécifique s affiche alors, vous proposant d instancier les images de la séquence sur des images successives du scénario. Validez si vos images sont les phases successives d une animation.
344 Flash CS5 Importer par copier-coller Dans une certaine mesure, vous pouvez importer par simple copier-coller entre votre éditeur d images et Flash. Le passage d une pure image bitmap par le Presse-papiers du système d exploitation ne pose aucun problème. Par contre, pour tout ce qui est vectoriel, pour le texte, la structure de calques, la transparence et les modes de fusion, le résultat sera au meilleur hasardeux et au pire désastreux! Le copier-coller marche beaucoup mieux entre Fireworks et Flash. Sont notamment reconnues les images multiples (animation), ainsi que les pages multiples (publication web). Raccourci CMD+V (Mac) ou CTRL+V (Windows) colle au centre de la scène. MAJ+CMD+V (Mac) ou MAJ+CTRL+V (Windows) colle en place, c est-à-dire en conservant la position. Instancier une copie d image bitmap Une fois l image bitmap importée dans la bibliothèque, vous devrez l instancier dans le scénario et sur la scène. Procédez comme vous le feriez avec un symbole (voir section Créer des occurrences, Fiche 33). Il faut sélectionner une image du scénario avant de glisserdéposer l image bitmap. Petite précision de vocabulaire : une image bitmap n étant qu un pseudo-symbole, on parle plutôt de copie que d occurrence. Parfois, il arrive que la copie ne soit pas créée à sa taille réelle. Dans ce cas, il faut la supprimer et ré-instancier l image bitmap. Au sein d un calque, les images bitmaps se trouvent toujours au-dessus du contenu vectoriel en mode de fusion (les objets vectoriels sont par dessus). Cet ordre n est pas un ordre par défaut, il est inflexible : vous ne pouvez même pas utiliser les commandes du menu Modification > Réorganisation pour le modifier. De plus, si vous séparez la copie d image bitmap, celle-ci participe à la fusion avec les éléments vectoriels (voyez la section Séparer une image bitmap pour l éditer, Fiche 53 qui vous en donne un exemple illustré). Lorsque l image bitmap est sélectionnée dans la liste de la bibliothèque, en cliquant sur le bouton du bas portant un i, vous ouvrez la boîte de dialogue Propriétés du bitmap reproduite à la Figure 56.2 (il est aussi possible de double-cliquer dans la liste, ou sur l aperçu, ou encore sur l icône d arbre en haut du panneau Propriétés reproduit Figure 52.6). Dans cette boîte de dialogue, on constate que Flash conserve le chemin d accès au fichier importé : il est affiché sous le champ du nom. Si le fichier a été déplacé ou renommé depuis l importation, le lien a été rompu. Le bouton Importer vous permet de le rétablir. Ce bouton vous offre aussi la possibilité de faire une permutation de fichiers (et non de pseudo-symboles, voir Fiche 37). Enfin, si depuis l importation le fichier a été modifié en externe et non pas à partir de Flash comme décrit précédemment le bouton Mettre à jour vous permet de mettre à jour votre animation avec la dernière version de l image bitmap. Après permutation ou mise à jour de fichier, l image
Images bitmap 345 bitmap est modifiée dans la bibliothèque et cela se répercute bien sûr sur toutes les copies du scénario, sans qu il soit nécessaire de ré-instancier. Fiche 53 Éditer une image bitmap Nous avons consacré le long Chapitre 2 au dessin vectoriel, l un des piliers de Flash. Nous y avons dit qu en la matière l environnement Flash ne peut rivaliser avec un logiciel comme Adobe Illustrator ou même son rival le logiciel libre Inkscape. En matière de traitement d image matricielle, Flash est encore moins à même de rivaliser avec Adobe Photoshop, Adobe Fireworks ou le logiciel libre Gimp. En règle générale, c est en externe, dans l un de ces environnements, que vous éditerez les images bitmap intégrées dans vos animations Flash, d autant que désormais nouveauté CS5 les allers-retours d édition sont possibles dans Photoshop comme ils l étaient déjà dans Fireworks (voir la section «Importer des données Fireworks» de la fiche précédente). Ceci étant dit, si les possibilités d édition au sein de Flash sont très limitées, elles ne sont pas inexistantes. Faisons-en le tour. Une photographie que vous aurez importée sera traitée comme une entité unique de la bibliothèque Flash. On ne parle pas à ce propos de symbole, ni d occurrences, néanmoins le principe de factorisation d information reste pertinent pour tous les types de médias dont les données sont volumineuses. Vous pouvez donc intégrer dans votre scénario autant de copies que vous voulez d une image bitmap donnée, celle-ci ne sera téléchargée qu une seule fois par l internaute. Lorsque vous sélectionnez sur la scène une copie d image bitmap (outil Sélection, outil Lasso), celle-ci s encadre d un rectangle de sélection bleu (exemple à gauche de la Figure 53.1) indiquant que c est l entité qui est sélectionnée, de façon similaire à ce qui se passe lorsque vous sélectionnez un groupe ou un symbole. En règle générale, le rendu des images bitmap est meilleur si vous cochez Autoriser le lissage dans la boîte de dialogue Propriétés du bitmap (elle est reproduite Figure 56.2). Séparer une image bitmap pour l éditer Dès lors que vous voulez éditer une copie d image bitmap, il faut commencer par la séparer. Sélectionnez-la, puis faites appel à la commande Modification > Séparer. La copie de l image se recouvre de petits points blancs, comme le montre l exemple de droite de la Figure 53.1.