Share
Les tablettes sont la grande chose d'aujourd'hui. Bien sûr, l'iPad ne peut pas utiliser Flash, mais ce n'est que le début d'une vague. Adobe InDesign CS5 peut créer une tonne de choses interactives parfaitement adaptées au grand écran d'une tablette, puis passer à Flash pour le peaufiner et le perfectionner. Dans ce didacticiel, nous verrons comment utiliser le côté InDesign..
Quand Adobe a lancé son compilateur iPhone pour Flash chez Max l'année dernière, je dois admettre que j'ai été brièvement époustouflé. Ensuite, je me suis tourné vers le gars à côté de moi dans l'auditoire et j'ai dit: "Cela va être génial jusqu'à ce que Apple trouve un moyen de le faire taire." Ce qui explique en partie pourquoi "April Shock" d'Apple ne m'a pas vraiment surpris. C'était une surprise, mais leur fermeture n'était pas inattendue..
Quelques semaines plus tard, Richard Galvan, le chef de produit Flash, était sur la scène de FlashintheCan pour exposer des choses plutôt "géniales" que Flash CS5 peut réaliser. Au cours de son exposé, il a expliqué comment InDesign CS5 peut désormais créer une tonne de choses interactives qui peuvent ensuite être facilement basculées vers Flash CS5 en tant que .fla ou tout simplement tirées d’InDesign en tant que fichier swf entièrement interactif. Je vais admettre que j'ai eu la même réaction que beaucoup d'entre vous: "Donnez-moi une pause. Il est impossible qu'un développeur / designer Flash digne de ce titre crée un grand swf d'InDesign".
Après la présentation de Richard, je l'ai coincé et lui ai demandé pourquoi il faisait une démonstration qui équivaut à donner une arme à feu à un homme fou. Sa réponse en un mot m'a secoué.
Comprimés.
il a dit.
S'il y a une règle fondamentale que j'essaie de faire taire dans la tête de mes étudiants, c'est que lorsqu'il s'agit de résoudre des problèmes, "commencez par l'évidence et revenez à l'obscurité". La réponse de Richard était si évidente que je me sentais un peu penaud.
Même si l'iPad est un appareil vraiment cool, nous avons tendance à oublier que les tablettes sont une technologie émergente. Google, HP et d'autres vont sortir avec une corne d'abondance régulière de ces choses et elles seront toutes activées Flash. Découvrez la version de Flash Player 10.1 qui va commencer à apparaître sur tous les appareils mobiles, à l'exception des offres d'Apple, et il n'est pas exagéré d'assumer que ce n'est qu'une question de temps avant que nos clients ne prennent le train en marche..
Le fait que Apple ait été le premier à sortir du bloc avec son "jouet pour enfants cool" ne signifie pas pour autant qu’il est la référence. Si ces choses décollent, c’est peut-être Apple qui a créé un produit "niche".
Ce qui m'amène à ce tutoriel. Les tablettes ont beaucoup d’espace sur l’écran, ce qui est à peu près équivalent à la taille d’une feuille de papier ordinaire éjectée de votre imprimante laser. Il est logique (et Wired le montre déjà) de ne considérer les publications imprimées que comme des pages de "contenu" et d'utiliser le lecteur Flash pour transformer un support plutôt passif en une expérience multimédia riche..
Au cours des prochains mois, un certain nombre de nouveaux mobiles et tablettes Android arriveront sur le marché cet été. La gamme comprend ADAM de Notion Ink, mais il en existe d’autres, comme le Marvell Moby, le WePad et le Dell Mini 5, pour ne citer que quelques exemples..
Au cours de cette série en deux parties, vous allez découvrir pourquoi Flash CS5 a retourné ses molécules et les a réorganisées avec le nouveau format XFL; comment InDesign CS5 a soudainement changé d'application de présentation statique pour devenir une application dotée d'une multitude de fonctions interactives et comment le nouveau Framework TextLayout dans Flash est bien plus qu'un ajout plutôt curieux à la gamme. Naturellement, nous allons commencer à assembler les actifs dans InDesign. J'espère que vous serez nombreux à découvrir à la fin de cet article à quel point les fonctionnalités interactives d'InDesign sont "cool" et, plus important encore, pourquoi elles sont présentes. Commençons:
D'ACCORD. Je suis fainéant. Je laisse mon iPhone gérer celui-là. Brendan Dawes, originaire de MagneticNorth au Royaume-Uni, m'a fait découvrir une application pour iPhone plutôt intéressante, addLib, qui prend une image que vous alimentez et donne des variantes assez intéressantes de son utilisation. Voyant comment je voulais présenter certaines des fonctionnalités d’InDesign CS5, je pensais que le voyage que je ferais dans un petit village en Chine, Huo Guo, ferait l'affaire et que la photo du vieil homme me regardant par-dessus le mur est l'une des mes favoris de ce voyage. J'ai introduit l'image dans addLib et j'ai vraiment aimé le dernier traitement.
Sur la base de cette conception, je savais que l'outil pour ce travail était Illustrator CS5 et que l'imagerie était mieux réalisée en… soyez prêt pour cela… Fireworks CS5.
Lorsque l'image s'est ouverte, la première chose à faire était de l'obtenir à une taille plus gérable. L’image originale de mon Nikon D200 faisait 2896 pixels sur 1944 pixels, ce qui ne fonctionnait pas dans Illustrator CS5 ni dans Fireworks CS5. J'ai sélectionné l'image sur le canevas de Fireworks, sélectionné Modify> Canvas> Taille de l'image et modifié les dimensions en pixels de celles indiquées sur la figure. Avec l'image redimensionnée, j'ai cliqué sur le bouton Ajuster la toile dans le panneau Propriétés pour m'assurer qu'il n'y avait pas de toile supplémentaire dans l'image finale..
L'image est plutôt sombre et pourrait utiliser un peu de correction des couleurs. J'ai sélectionné l'image sur le canevas et, dans le panneau Propriétés, j'ai sélectionné Filtres> Ajuster les couleurs> Niveaux. L'histogramme m'a dit que je devais couper du blanc à droite du graphique. Le déplacement du point blanc, comme indiqué sur la figure, a éclairci l’image. L'image a été enregistrée en tant que CoverColor.jpg.
Créer une version en niveaux de gris était également un jeu d'enfant. Avec l'image sélectionnée sur le canevas, j'ai sélectionné Filtres> Ajuster les couleurs> Teinte / Saturation et définissez la valeur de saturation sur -100, ce qui a supprimé la couleur de l'image. Cette image a ensuite été enregistrée en tant que CoverGrey.jpg.
Je pensais que créer une galerie de photos dans InDesign était une évidence et que cela ferait une démonstration de cette fonctionnalité de l'application. Bien sûr, 12 images, de la même taille que l'image de couverture, ne volaient pas et les redimensionner, à la main, n'est pas amusant.
L'une de mes fonctionnalités préférées de Fireworks CS5 est le traitement par lots: Fichier> Traitement par lots… Il s'agit d'un flux de travail très simple. Identifiez les photos, déterminez le montant de la mise à l'échelle et laissez Fireworks coller les versions réduites dans un dossier séparé. Cela a pris moins de 30 secondes pour accomplir.
La conception addLib était remarquablement facile à reproduire dans Illustrator CS5. En utilisant une combinaison de formes simples, de masques et de types, j'ai été en mesure de les combiner en moins de 30 minutes. La décision majeure impliquait le format de sortie. J'ai opté pour le format ai car Flash et InDesign me permettent de revenir à Illustrator pour y apporter des modifications. Si cela était destiné à une application Web avec arrêt dans Catalyst ou Flex, j'aurais opté pour FXG dans tous les domaines sous Fireworks, Flash et Illustrator..
Avec les actifs assemblés, il était temps de se mettre au travail dans InDesign..
Je pensais que je prendrais une minute ou deux pour approfondir un peu ce sujet avant d’entrer dans le projet car, très franchement, comme beaucoup d’entre vous, je le voyais comme un outil de mise en page imprimé reposant sur la dans ma boîte à outils interactive. Néanmoins, étant un peu junkie, rien ne me frustrait plus que de pouvoir utiliser des techniques de typographie fines du côté impression de la clôture, alors que nous devions en quelque sorte "simuler" du côté interactif. Sans parler du fait qu'essayer de faire fonctionner une mise en page multicolonne ou un système de grille dans Flash était quelque chose que mes collègues graphistes du côté impression de la rue n'ont jamais manqué de me mentionner..
InDesign CS5 arrête en quelque sorte cet aiguilletage convivial. Parmi les fonctionnalités d'InDesign CS5 que je viens de creuser figurent:
Ne vous y trompez pas les gars. Ces fonctionnalités ne sont pas des merveilles, des fonctionnalités gratuites pour les yeux sont ajoutées à l'application pour recueillir les refrains de "Cool" des Fan Boyz lors de démonstrations et de conférences. Comme vous êtes sur le point de le découvrir, ce sont des fonctionnalités de niveau industriel qui passent de manière transparente à un SWF ou à Flash. En fait, pour vous, vous n’avez même pas besoin de toucher Flash ou Catalyst. Les documents InDesign peuvent être générés en bon vieux XML.
Cela dit, il s’agit d’un flux de travail émergent qui, en particulier pour l’équipe Flash, nécessitera un travail supplémentaire de votre part. Je considère cela comme une "bonne chose" car, comme vous allez le constater, le fait de lancer un document Flash à partir d'InDesign ne fait pas de celui-ci un artiste Flash. Vous obtenez les os nus et si vos compétences en Flash sont minimales, vous êtes essentiellement mort dans l'eau.
Enfin, il ne s'agit pas d'un didacticiel InDesign. Son but est de vous montrer comment les fonctionnalités interactives d'InDesign sont ajoutées à une page et comment un document est généré aux formats SWF et Fla..
Allons-y…
Ouvrez InDesign CS5 et sélectionnez Fenêtre> Espace de travail> Interactif pour ouvrir le panneau Interactivité..
Voici en gros ce que chaque élément du panneau fait:
Nous allons maintenant appliquer un effet d'animation à la légende. Sélectionnez l'objet qui animera, ouvrez le panneau Animation et sélectionnez l'animation dans la liste déroulante des paramètres prédéfinis. Lorsque vous faites cela, quelques choses se passent:
La trajectoire de mouvement, en vert, est affichée sur la page et un aperçu de l'animation est appliqué au papillon dans la fenêtre Aperçu du panneau. Ces trajectoires de mouvement peuvent être éditées avec l'outil Plume et l'un des aspects vraiment intéressants de tout chemin personnalisé que vous pouvez créer dans Flash peut être utilisé ici et inversement. Utilisez la zone de nom pour donner un nom à l'animation et sélectionnez le moment où l'événement - Chargement de page, Sur clic de page, Sur clic (Self), Sur le survol (Self) - se produira dans le menu déroulant Event (s)..
Vous avez également la possibilité de choisir la durée, la fréquence et même si l’animation est en boucle. Le menu déroulant Vitesse est l'endroit où vous appliquez l'application..
Les propriétés, si vous êtes un concepteur Flash, semblent assez familiers. La liste déroulante Animer vous permet de déterminer le fonctionnement de l'animation: de ou vers l'apparence actuelle ou vers l'emplacement actuel. Et la zone Animer à vous permet d'appliquer une rotation et une mise à l'échelle à l'état final de l'objet en mouvement..
Le test des animations ou de l'interactivité dans les versions précédentes d'InDesign était pénible. Créez l’animation, compilez le fichier SWF et laissez InDesign l’aperçu de votre travail dans Flash Player. Le panneau Aperçu met toutes ces étapes en un seul endroit.
Lorsque vous avez terminé votre animation, cliquez simplement sur le bouton du panneau Aperçu et le panneau apparaîtra. Au début, il sera vide. En effet, InDesign crée un fichier swf qui sera lu dans le panneau. Lorsque la page apparaît, cliquez sur le bouton Lecture dans le coin inférieur gauche et la légende se glisse dans.
Si le panneau semble trop petit, faites simplement glisser un coin pour l'agrandir..
Les 12 images que nous avons préparées précédemment à l'aide du traitement par lots dans Fireworks CS5 peuvent désormais être importées dans le document et utilisées dans un diaporama. Il s’agit d’un processus en deux étapes: importez les images et alignez-les sur la page, puis convertissez-les en objet Multi-État. Voici comment:
Sélectionnez Edition> Importer, localisez le dossier contenant les images redimensionnées et, tout en maintenant la touche Maj enfoncée, sélectionnez-les toutes et cliquez sur OK. Vous verrez un petit "pistolet" contenant une vignette d'une image. Cliquez dessus et l'image dans la vignette est déposée sur la page et le "pistolet" vous montre l'image suivante dans la pile. Déplacez approximativement toutes les images là où les diapositives apparaîtront et, avec toutes les images sélectionnées, ouvrez le panneau Aligner en appuyant sur la touche F7. Aligner les images par leurs bords supérieur et gauche.
Une fois la "pile" créée, ouvrez le panneau Etats des objets et cliquez sur le bouton "Convertir la sélection en objets multi-états" - la page avec le coin en haut au bas du panneau - et toutes les images apparaîtront dans le panneau. . Donnez un nom à l'objet et, si vous le souhaitez, réorganisez les images en les faisant glisser, dans le panneau, vers différents "calques" de la pile..
Une pile est inutile si vous ne la mettez pas au travail. Dans ce cas, les boutons Suivant et Précédent créés dans Fireworks CS5 sont importés pour la tâche en cours. InDesign, comme de nombreuses applications CS5, contient une bibliothèque de boutons "prédéfinis" - Fenêtre> Boutons d'échantillon - mais aucun ne correspond au design. Ils ont été importés via Fichier> Placer et ont été déplacés vers la position finale sur la page..
Pour créer un bouton, ouvrez le panneau Boutons et, lorsque l'objet est sélectionné, cliquez sur le bouton "Convertir un objet en bouton". Il se trouve juste à côté de la Corbeille du panneau Boutons. Lorsque cela se produit, le panneau s'allume et vous pouvez attribuer au bouton certaines propriétés..
La première chose à faire est de donner un nom au bouton. Ensuite, attachez un événement au bouton. Vous avez le choix entre six événements, dont deux strictement réservés aux projets PDF. "Libération" est une valeur sûre. L'étape suivante consiste à affecter une action à un événement. Cliquez sur le signe + dans la zone des actions et une liste déroulante apparaîtra. Il s’agit d’un diaporama; il est donc logique d’attribuer une action "Atteindre l’état suivant". La chose importante à noter ici est que les actions sont regroupées en fonction de l’utilisation finale. Dans ce cas, nous allons utiliser SWF et Flash, le choix fonctionnera.
Lorsque l'action est sélectionnée, le panneau Boutons change pour vous demander quel objet doit être contrôlé par le bouton. Dans ce cas, ce sera la pile Village. Vous pouvez également cliquer sur le bouton radio "Arrêter au dernier état" pour vous assurer que l'utilisateur s'arrête réellement à la dernière image de la pile..
Répétez cette procédure pour le bouton Précédent et testez le diaporama dans le panneau Aperçu..
Ajouter une piste audio à une page est extrêmement simple. Vous pouvez soit utiliser le menu Fichier> Placer, soit cliquer une fois sur le panneau Média et utiliser le bouton Placer un fichier audio ou vidéo (celui situé dans le coin inférieur droit du panneau) pour ouvrir la boîte de dialogue Placer un média. N'oubliez pas que le seul format audio que vous pouvez utiliser est le mp3..
Une fois le fichier importé, un petit conteneur audio apparaît sur la scène. À de nombreux égards, ce conteneur est similaire à la façon dont Flash gère l’audio sur la scène. Le conteneur peut être placé n'importe où, car il s'agit davantage d'un espace réservé.
Le panneau Audio vous permet de tester le son en cliquant sur le bouton Lecture. Les options sont assez explicites. Si vous optez pour la voie interactive, votre meilleur choix est de sélectionner les deux premières options. Si vous ne le faites pas, votre fichier audio continuera à être lu même lorsque vous quitterez la page..
Les principes de conception UX simples stipulent que si vous lisez un fichier audio, vous devez donner à l'utilisateur la possibilité de le supprimer. Dans ce cas, un bouton Pause et un bouton Lecture ont été créés dans Fireworks CS5 et convertis en boutons dans InDesign CS5. Dès que vous reliez le bouton à une source, un fichier audio est reconnu et les options de contrôle audio présentées dans la figure vous sont présentées. Une caractéristique très intéressante du panneau Boutons est l’icône dans le coin inférieur gauche. Cliquez dessus et le panneau Aperçu s'ouvre pour vous permettre de déterminer si le bouton fait ce que vous voulez..
Les fichiers vidéo - FLV, F4V, MP4 - peuvent être ajoutés à InDesign aussi facilement qu’un fichier audio et les propriétés de la vidéo sont définies dans le panneau Multimédia. Il y a encore quelques aspects de ce que vous devez savoir.
Bien que vous ayez deux options de lecture, si vous voulez attribuer un contrôleur à l’utilisateur, laissez-les désélectionnées. L'option Affiche vous permet de choisir une image de la vidéo ou même une autre image à afficher dans le document. Dans cet exemple, j'ai utilisé le bouton de navigation du panneau pour identifier le cadre qui apparaîtra dans la mise en page. Vous pouvez également choisir un contrôleur (les skins SkinOver de Flash sont vos seuls choix) et indiquer si le contrôleur apparaîtra ou non lorsque le curseur survolera la vidéo sur la page. Vous pouvez également ajouter des points de repère (InDesign les appelle points de navigation) à la vidéo ou les ajouter à l'aide d'Adobe Media Encoder CS5..
L'autre chose que vous devez savoir sur cette fonctionnalité vidéo, en particulier si vous utilisez une vidéo dans Flash, est que vous devez cliquer sur la vidéo sur la scène pour qu'elle puisse commencer à jouer ou révéler la peau. Ce n'est peut-être pas une mauvaise idée, si vous voulez sortir uniquement un fichier swf, d'ajouter une petite légende ou une icône indiquant à l'utilisateur de cliquer sur l'image pour lancer la lecture de la vidéo..
Enfin, utilisez le panneau Aperçu pour tester la vidéo.
Dans cet article, je vous ai montré comment utiliser toutes les fonctionnalités du panneau Interactif d'InDesign CS5. Je vous ai montré comment créer des boutons, ajouter de l'audio et de la vidéo et comment transformer une pile d'images importées en diaporama. Vous avez également appris à utiliser des boutons pour contrôler l'audio et à ajouter un skin à une vidéo..
J'ai également indiqué le nombre d'actifs créés dans Fireworks CS5 et Illustrator CS5 et préparés en vue de leur placement dans le projet InDesign CS5..
Dans le prochain épisode de cette série, je vous expliquerai les étapes nécessaires à la création d'un document interactif InDesign, à lire dans un navigateur ou à effectuer des "modifications" en Flash. Merci d'avoir lu!
Accentsconagua