fr32c blog

Aller au contenu | Aller au menu | Aller à la recherche

dimanche 17 août 2014

Adobe Media Encoder (AME) Ogg WebM

L'encodage des vidéos pour le web ?

La lointaine époque des vidéos encodées en flv pour Flash, qui résolvaient tous les problèmes de compatibilité, quel que soit votre navigateur ou système d'exploitation semble révolue. On lui préfère désormais le magique "HTML5" qui résout tous les problèmes et soigne tous les maux.

Or, pour la vidéo, on serait plutôt revenu à 1995, une époque que les moins de 20 ans peuvent ne pas connaître, lorsque la page vidéo d'un site web vous demandait si vous aviez une bonne connexion (type LAN) ou une connexion RTC à 33,6ko, si vous étiez sur Mac ou sur PC, si votre player vidéo serait Quick Time ou Windows Media Video, voire même Real Video. Une époque de choix, où les novices se perdaient, et vous passiez plus de temps à encoder les 28 versions différentes de vidéos.

On y revient. Désormais, si votre navigateur est Safari, vous devez lui fournir du mp4/H264, pareil si c'est IE. Pour Chrome ou Firefox, il faut un Ogg Theora ou un WebM… un .avi est conseillé, et toutes ces informations sont susceptibles d'évoluer (à l'heure où j'écris cet article, ça bouge encore)

Encoder des vidéos depuis Adobe Media Encoder

Si, comme moi, vous avez une installation standard de votre Creative Suite, vous risquez de devoir chercher un peu comment gérer ça à grands coups de recherche sur internet, de conseils divers et variés.

Et si vous avez eu l'occasion de faire du rendu vidéo depuis Photoshop (si si, c'est possible), After Effects ou Premiere, voire même des conversions de fichiers, vous êtes sans doute déjà passé par Adobe Media Encoder (AME dans la suite de cet article).

Or AME n'exporte pas en standard vers ces formats de plus en plus répandus que sont le webM et le Ogg/Ogv.

Un des aspects très intéressants d'AME, c'est sa capacité à traiter plusieurs fichiers d'un coup, plusieurs types et formats d'export à la fois.

AME-MultiEncode.png

AME-Encodage-WebM.pngVous pouvez sans souci prendre votre fichier original, lui assigner plusieurs préconfigurations, pour, comme dans l'exemple ci-dessus, exporter à la fois 2 versions de vidéo compressées, mais aussi extraire l'audio d'un fichier.

Autre point intéressant, si vous avez une machine avec un processeur "multi-core", ces exports s'effectuent en parallèle et le codage est distribué parmi les ressources.

Utiliser Adobe Media Encoder pour le Ogg et le WebM

Du coup, vous vous demandez comment réaliser ces conversions. Il existe différents logiciels en ligne qui effectuent la conversion à votre place, mais cela nécessite de transférer vos vidéos pour les récupérer, donc si vous avez plus d'une vidéo à traiter, ça peut devenir contraignant.

Pour Adobe Media Encoder, en fait, on va utiliser un plug-in. Développé par Fnordware pour ses besoins avec Premiere Pro, son architecture fait qu'une fois installé, il fonctionne aussi sur AME (et After-Effects).

Donc, dans un premier temps, télécharger le module qui vous intéresse, WebM et/ou Ogg (pour Mac et/ou Win).

AME-WebM-Ogg-Folder.pngDans les dossiers dézippés, vous retrouverez les modules en question et surtout un fichier "Read Me", dont je vous recommande la lecture, notamment sur l'emplacement d'installation qui est loin d'être évident, notamment la création, si absents, des dossiers plug-ins > 7.0 > MediaCore (à actualiser avec les versions).

Une fois effectué, vous relancez AME et disposez des options pour le Theora (Ogg video) et le WebM et vous pourrez ensuite utiliser vos exports directement dans Edge Animate en les glissant simplement dans le panneau video (par exemple).

AME-add_video_library_1405430310993.png

samedi 16 août 2014

Date lisible en javascript

Pour les besoins d'un script After-Effects (je voulais identifier des compositions), indiquer la date est une bonne idée… à condition que cela reste lisible.

Du coup, j'ai fait ça, 2 lignes, qui me serviront plus tard, je pense.

// js javascript Date readable JJ/MM/AAAA HH:MM:SS
// uses if short notation (a=b)?doA:doB;
var d = new Date();
var readableDate = (d.getDay()<=9?"0":"")+d.getDay()+"/"+(d.getMonth()<=9?"0":"")+d.getMonth()+"/"+d.getFullYear()+" "+d.getHours()+":"+(d.getMinutes()<=9?"0":"")+d.getMinutes()+":"+(d.getSeconds()<=9?"0":"")+d.getSeconds();

Bien entendu, si vous êtes un peu maniaque/organisé, vous intervertirez AAAA/MM/JJ ce qui vous simplifiera le tri.

Et comme c'est du Javascript basique, cela fonctionne dans extendscript.

vendredi 1 août 2014

Raccourcis After Effects indispensables

J'ai donné un eSéminaire d'introduction à l'animation dans After Effects CC (très très basique). Ça date du 11 février, et comme régulièrement ensuite, quand je rouvre After, j'ai oublié tous les raccourcis indispensables et mal documentés.

On peut en retrouver quelques-uns chez Bruno Quintin, voire directement dans l'aide en ligne d'AE, mais ça peut être pratique de venir ici pour les retrouver.

Si After devient votre quotidien, nul doute que vous les apprendre par cœur. En attendant, une petite relecture ne fait pas de mal.

Se déplacer (rapidement) dans le scénario

I / O Déplacer la tête de lecture aux points d’entrée et de sortie d’un calque
J / K Déplacer la tête de lecture vers la prochaine image clé visible
B / N Recadrer la zone de travail sur la position de la tête de lecture
ù / $ Déplacer le point d’entrée ou de sortie d’un calque

Afficher les propriétés d'un calque

T Opacité (Transparence)
R Rotation
A Point d’Ancrage
P Position
S Échelle
E Effets
L Volume
M Forme de masque
F Contour Progressif (Feather)
U Propriétés qui disposent d’images clés
UU Révèle tous les réglages particuliers (pas par défaut lors de la création)
EE Expressions
RR Remappage temporel
LL Audio
MM Masques et propriétés

Modifier sa composition

Cmd* + K Paramètres de la compo
Cmd + Maj + D Scinder le calque
Cmd + Maj + C Précomposer
Cmd + Y Créer un solide
Cmd + Alt + Y Créer un calque d’effet
Cmd + Maj + Alt + Y Créer un objet null
Cmd + E Modifier l’original (Photoshop, Illustrator…)

Modifier les calques et les clés

Alt + ù / $ Rogner les calques à la position de la tête de lecture
Cmd + Flèches Haut/Bas Changer le calque sélectionner selon l’ordre d’empilement
Cmd + Flèches Droite/Gauche Déplacer la tête de lecture d’une image
Cmd + Maj + Flèches Droite/Gauche Déplacer la tête de lecture ± 10 images
Alt + Flèches Droite/Gauche En sélectionnant une image clé ou un groupe d’images clés, pour les déplacer sur la timeline
Alt + Maj + Flèches Droite/Gauche Déplacer les images clés ± 10 images
Cmd + Alt + Maj + H Redimensionner et repositionner un calque pour le faire correspondre à la largeur de la composition, tout en conservant son ratio (G pour la hauteur)

  • Utilisateurs Windows, quand j’écris Cmd, vous pressez Ctrl. Utilisateurs MacOs, Cmd, ça se prononce « commande », et c’est la touche « Pomme ».

mardi 8 juillet 2014

inDesign User Group Paris - 03/07/2014

Suite à la session du inDesign User Group Paris qui s'est tenue le jeudi 3 juillet dans les locaux d'Adobe France, je vous joins le petit résumé, les éléments partagés et les liens qui ont été cités par les différents intervenants.

Franck Payen — CC2014

J'ai eu l'honneur d'ouvrir la session pour vous donner les news de notre Groupe d'Utilisateurs d'inDesign, et évoquer un peu les réponses au petit formulaire (toujours accessible) posté plus tôt.

J'ai aussi profité de la proximité avec la sortie de la version 2014 du Creative Cloud pour vous en présenter les grandes lignes, sur inDesign, principalement, et quelques points de Photoshop et Illustrator.

Vous pourrez retrouver les slides ici.

Laurent Tournier — Rechercher et remplacer

C'est ensuite Laurent Tournier qui nous a présenté ses rechercher/remplacer dans un texte long, type universitaire, en sciences humaines, à base de GREP, mais pas seulement.

L'audience n'étant pas forcément très à l'aise avec les bases du GREP, un petit rappel a permis de se remettre en tête les différents modes de fonctionnement du GREP.

Or, la version CC 2014 venait avec son lot de nouveautés. Vous pourrez consulter le PDF présenté et découvrir sa méthode de travail.

Victor Audouin — ePub 2.0 en 20 minutes

Enfin, Victor Audoin dont le sujet « Réaliser un epub 2.0 en moins de 20 minutes », aura permis à l'assistance de découvrir des trucs et astuces en production, cas concret pour des besoins précis.

Voici le résumé et surtout le PDF des slides de cette session.

Stéphane Nahmani

Je vous renvoie aussi faire un tour sur le Behance de Stéphane Nahmani, puisque pris par le temps, nous avons du décaler son intervention.

Pour ceux qui ont pu échanger avec lui par la suite, vous retrouverez Le bel ouvrage, nous en reparlerons bientôt.

Les liens

Ci après quelques liens mentionnés durant la session (à compléter) :

Laurent Tournier : @indigrep
www.indigrep.com

Multi-Find/Change (par Martinho Da Gloria) automatication.com
XStrings www.kerntiff.co.uk
DoQueryList adobeindesign.ru
grep_change_case, search_change_case, index-direct (par Peter Kahrel) kahrel.plus.com
IndexMatic (par Marc Autret) indiscript.com

Le formulaire de rapport de bugs adobe.com/go/wish

vendredi 4 juillet 2014

Creative Cloud CC2014 : Installer les versions précédentes (CS6, CC "2013")

Ce billet est la version réactualisée de celui-ci, qui a pris un coup de vieux à la sortie de la version 2014 du Creative Cloud.

J'y disais :

Question récurrente : comment fait-on si on ne veut pas mettre à jour les applications qu'on utilise via le Creative Cloud, et le corollaire : j'ai installé la version Creative Cloud, mais j'ai besoin de la version CS6 (par exemple pour ouvrir des fichiers Page Maker dans inDesign)

Aujourd'hui, je reçois ce mail :

J'ai rencontré des soucis, notamment le fait d'utiliser la nouvelle version, car Adobe a retiré la CC.

C'est donc le bon moment pour mettre à jour les infos.

Avec le temps, les erreurs de jeunesses sont corrigées (une à la fois) et la méthode pour retrouver les anciennes versions de vos logiciels (CS6 et CC "2013") est encore plus simple.

Toujours sous votre petite icône Creative Cloud, dans Applications, vous allez tout en bas.

Vous retrouvez alors le filtre "Versions précédentes" et il n'y a plus qu'à cliquer pour choisir d'installer celle dont vous avez besoin.

CC-CCDA-DownloadOld-Cs6-CC.png

Alors, qu'en pensez-vous ?

lundi 30 juin 2014

Edge Animate, fontes incorporées, sans feuille de style

En complément à l’article sur les fontes incorporées (à relire pour les détails de fonctionnement de cette technique), passons nous de l’étape feuille de style en utilisant les styles « inline ».

Si pour un travail particulier vous souhaitez accéder aux fontes de votre client, qui sont déjà présentes sur son serveur et dont il a la licence, il peut être un peu fastidieux d’ajouter un élément sylesheet.css, surtout s’il ne comporte QUE les polices, et que les autres éléments sont gérés par Animate.

En localisant la feuille de style correspondant chez votre client (souvent dans main.css ou fonts.css), on va retrouver une série d’instructions @font-face sous cette forme :

@font-face{
font-family:’maFonteRegular’;
src:url('../fonts/maFonte_regular_0-webfont.eot');
src:url('../fonts/maFonte_regular_0-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/maFonte_regular_0-webfont.woff') format('woff'),
url('../fonts/maFonte_regular_0-webfont.ttf') format('truetype'),
url('../fonts/maFonte_regular_0-webfont.svg#maFonte_regular_0') format('svg');
font-weight:normal;
font-style:normal;
}

On y retrouve les différents formats de fonte et surtout l'url, qui est « relative » à l'emplacement du fichier css dont elle est extraite.

Ce sont les ../fonts/ de l’url, qu’il faudra alors remplacer par l’adresse absolue de ce répertoire : http://www.monSite.com/style/fonts/ (autant de fois que nécessaire, gagnez du temps sur les remplacements multiples grâce à Brackets)

Il ne vous reste plus qu’à encadrer le tout dans 2 balises <style></style> et à ajouter la police dans Animate, en lui donnant bien le bon nom, et une fonte par défaut (je recommande dans un premier temps la « cursive » : vous voyez tout de suite si votre code échoue avant le chargement de la fonte, à terme, remettez une fonte générique qui correspond mieux, bien sûr).

EgAn-FontesIncorporees-style.png

<style>
@font-face{
font-family:’maFonteRegular’;
src:url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.eot');
src:url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.woff') format('woff'),
url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.ttf') format('truetype'),
url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.svg#maFonte_regular_0') format('svg');
font-weight:normal;
font-style:normal;
}
</style>

Dernière astuce pour finir, si vous devez préparer de nombreuses pages comportant cette fonte, n'oubliez pas de conserver quelques caractères et d'en faire un symbole, Animate vous épargnera la recopie du code !

dimanche 15 juin 2014

Brackets - Multi-sélection et multi-édition.

Brackets-MultiSelection.gifJe vous ai déjà parlé de Brackets, excellent éditeur "html5" (+css+js…), qui s'enrichit de jour en jour.

Si je devais vous donner une bonne raison de l'utiliser, ce serait la multisélection, pour par exemple remplacer un mot à 15 endroits différents, sans faire de rechercher remplacer, juste, sélectionner, puis cmd (ou ctrl) sélectionner la suite, et saisir ce qui va en lieu et place.

Je rêve de ce genre de fonctions dans inDesign :)

vendredi 14 mars 2014

Ouvrir vos jpgs avec Camera Raw (avant le filtre Camera Raw de Photoshop CC)

Depuis quelques mois maintenant, on vous vante le filtre Camera Raw qui rend tous les développements d’image faciles dans Photoshop… CC.

Or si vous n’avez pas encore franchi le cap de l’abonnement (attention, minute pub : il y a une offre photographes « à durée limitée » pour avoir Photoshop + Lightroom + Behance + 20Go pour 9,99€HT (12,29€TTC < 150€/an pour être toujours à jour sur Photoshop)), il y a une solution pour ne pas (trop) vous compliquer la vie sur la partie « développement » de vos images.

Par défaut, Photoshop ouvre directement les jpg. Vous pouvez aussi dans le menu Fichier > Ouvrir > choisir un fichier jpg (à plat) et dans le format de fichier, assigner « Camera Raw ». Votre fichier s’ouvrira dans la fenêtre Camera Raw, et vous aurez accès à toutes les options de réglage bien efficaces, et bien plus simples à prendre en main que les courbes. Une fois terminé, vous validez l'ouverture et vous retravaillez sur votre image “ « comme autrefois ».

PS-ACR-JPG-Ouverture.png

Si vous trouvez la manœuvre répétitive, n'hésitez pas à demander à Photoshop d’ouvrir TOUS vos fichiers .jpg et .tiff directement avec Camera Raw, ça se trouve cette fois-ci tout en bas du menu Photoshop > Préférences > Camera Raw.

PS-ACR-Prefs.png PS-ACR-Prefs-Ouverture.png

Et voilà !

lundi 24 février 2014

inDesign à pleine vitesse

Haeme Ulrich a publié récemment un document qui recense les écueils rencontrés par inDesign quand il s'agit de travailler à pleine vitesse. Il en profite aussi pour proposer des techniques, trucs et astuces pour résoudre ces soucis et optimiser au mieux votre travail.

Le document existait en allemand, suite à une demande populaire il l'a traduit en anglais, et je me suis chargé de la version française.

inD_vitesse_fr_v1_700.png

Cliquez sur l'image pour télécharger le pdf.

Et n'hésitez pas à partager vos propres astuces.

jeudi 6 février 2014

Tableaux dans Muse

Très régulièrement, on reparle du manque de tableaux dans Muse. Et souvent les utilisateurs ne voient pas exactement les difficultés soulevées :

  • l'affichage d'un tableau (Muse se débrouille pour que la plus grande partie des sites reste visible, de façon cohérente, sur la majorité des navigateurs) ;
  • l'interface pour générer ce tableau, manipuler les textes, colonnes, lignes, éventuellement faire des calculs ;
  • le besoin d'importer les données (ouverture de fichier, copier/coller, depuis quel format initial…)

Bref, tout un tas de raisons qui font que c'est plus compliqué que ça n'en a l'air, mais il ne faut jamais désespérer.

Et comme quelqu'un sur le forum demandait une solution de contournement, je me suis dit que ça pourrait servir.

  1. Créez un document Google Spreadsheet (les tableaux dans Google Drive)
  2. Stylez-le au plus proche (possible) de vos désirs
  3. Supprimez les colonnes/lignes excédentaires
  4. Dans Fichier > Télécharger au format > Page web (.html, feuille active)
  5. Affichez le code source (depuis Chrome : cmd-alt-U)
  6. Cette page est un peu longue, mais il faut au moins ça pour faire un tableau (et encore, l'exemple donné est simple… C'est sans doute pour ça qu'on les attend toujours en natif)
  7. Sélectionner tout entre les balises <body> </body> (ici, ça démarre avec une balise <style> sur la première ligne)
  8. Copier

Mu-Go-Spreadsheet.png

Deuxième étape, dans Muse :

  1. dans Objet > Insérer du code HTML…
  2. Coller le code (ça va des balises <style> à <table>)

Mu-Go-SpreadsheetPage.png

Troisième étape, si nécessaire, utiliser Brackets ou Edge Code, ou n'importe quel éditeur web simple pour améliorer la sortie.

Voilà, ce n'est pas forcément la solution la plus propre et la plus rapide, mais elle a le mérite d'être fonctionnelle.

mercredi 29 janvier 2014

DPS et empilement d'overlays (Sequence d'images et boutons)

Question déjà évoquée lors d'un précédent sujet, de retour sur le forum utilisateurs :

INDESIGN - Séquence d'images passe dessus tout le contenu je ne sais pas s'il s'agit d'un bug sur Indesign, mais une séquence d'images passe toujours par dessus tout le contenu. J'ai créé une séquence d'image sur un calque, puis créer un autre calque par dessus, avec d'autres éléments (bouton par exemple). Lorsque je teste mon folio sur mon ipad, la séquence d'image passe toujours par dessus, et cache ainsi mon bouton du calque supérieur. Est ce normal ?

La réponse est : oui, c'est normal, même si un cela nécessite de relire les quelques explications. Ce coup-ci, je vous mâche le travaille et vous donne la solution (et un fichier) :

inD-DPS-Bouton-Sequence-OEM.png

Puisque la séquence d'image est active, elle passe au dessus. Si je place un simple bouton, il sera donc "fixe", statique, et relégué au fond du document. Je place donc mon bouton dans un objet à états multiples (comme pour créer un diaporama), en mode autoplay.

ACV-DPS-Bouton-Sequence-OEM.png

Tout cela est détaillé dans la formation des fondamentaux de Digital Publishing Suite (vous avez le lien en violet dans la barre à droite).

Petit bonus, je vous ai préparé un fichier test pour inDesign CC qui m'a permis de me rappeler que désormais les assemblages dans inDesign rassemblent aussi les fichiers des overlays :

iD-CC-Assemblage-Overlays.png

samedi 2 novembre 2013

Cinema 4D + After Effects - 2/3 Video en arrière-plan dans C4D + animation basique

Je continue sur les 3 tous petits compléments d'information suite à la session eSéminaire du mardi 22 octobre. Toujours sur After Effects (un peu moins ici), pas mal sur Cineware, mais surtout sur C4D. Basique, mais dédié.

Voici donc le deuxième des trois.

Aperçu de la video en arrière plan dans Cinema4D + animation basique

Vous avez vu dans le billet précédent comment on récupèrait les caméras After Effects dans C4D. Ici je vous transmets une petite astuce pour placer plus facilement vos éléments 3d dans un compositing After Effects.

C'est aussi un prétexte pour présenter très rapidement quelques méthodes d'utilisation de Cinéma 4D si vous ne le connaissiez pas, notamment son tag propriété Aligner sur la spline

Aperçu de la video en arrière plan dans Cinema4D + animation basique par Franck Payen sur Vimeo.

Dans C4D

  • créer un materiau
  • importer la texture video
  • dans le menu Editeur cocher "Aperçu Animé"
  • menu Objet > Environnement > Arriere plan
  • ou Créer un objet Arrière plan
  • glisser la texture sur l'arrière plan, placer !

jeudi 10 octobre 2013

Prévisualiser du SVG via Brackets

Si comme moi vous avez à travailler sur le format SVG, une fois sorti d'Illustrator, un éditeur de texte/code est indispensable. J'ai choisi Brackets, le grand frère de Adobe Edge Code.

Pour le SVG, @peterflynn a réalisé une petite extension qui vous créera une zone en haut de page pour voir vos fichiers. Parfait pour des icones et du statique, un peu limité pour l'interactif, qui s'exprime mieux dans le navigateur, avec des fichiers js liés.

Sauf que Brackets n'est pas capable d'envoyer votre page .svg sur Chrome comme il sait le faire avec du html.

Les plus puristes des développeurs vous diront que c'est compliqué de faire ça, pour avoir un rendu parfait et éditable en direct.

Mais comme j'avais juste besoin de pouvoir passer mon fichier de l'un à l'autre, j'ai trouvé une piste : Il suffit dans Brackets (dans vos applications, afficher le contenu du paquet, chercher ce fichier : FileUtils.js)

Et de remplacer :

var _staticHtmlFileExts = ["htm", "html"],

par

var _staticHtmlFileExts = ["htm", "html", "svg"],

Et voilà, à vous la preview en différé des svg interactifs.

dimanche 29 septembre 2013

Le poids d'un Folio DPS - Quel format choisir : PDF, PNG, JPG ?

Cela faisait un certain temps que je ne m'étais pas penché sur la question du poids des folios, or une question sur le forum m'a poussé à prendre le temps de faire quelques tests :

Je travaille actuellement sur un projet de folio comportant plusieurs sections. Après quelques tests je parviens à quelque chose qui me plait mais le folio d'UNE section pèse 14 Mo ! Le folio d'UNE section compte 8 planches. Il y a quelques images mais toutes ont été optimisées le plus possible (les sources pèsent 2,5 Mo) et il y a 2 diapos.

J'avais initialement en tête de constituer un folio comprenant une dizaine de ces sections, mais quand je vois le poids d'une section je suis refroidi. Y a-til des astuces pour optimiser le poids de ce folio (autre que d'agir sur les images, ou de jouer sur les paramètres d'exportation à la création du folio) ? Une fois déployé (avec DPS) le folio pèsera-t-il le même poids qu'aujourd'hui dans le viewer Adobe ou y a-t-il des traitements permettant de compresser dans el processus de déploiement ?

8 planches avec quelques images = 14 Mo : pour un outils permettant de déployer sur terminaux mobiles, je me dis que j'ai raté quelques chose...

Pour les importations de folio quel est votre format de prédilection ? jpg ? png ? ou pdf ?

Depuis la version v26, les Viewer Android et bureau (pour l'aperçu depuis inDesign) sont capables d'afficher les folios pdf. Si vous cherchez le meilleur compromis poids/qualité, c'est par là que vous pouvez vous diriger.

Quelques chiffres (et des images)

J'ai créé un fichier de test avec 1 image jpg de 815ko sur la moitié de la surface.

DPS-TestPoids.jpg

J'ai importé ce fichier 4 fois dans un seul folio via le folio builder, mais avec des qualités différentes (importer un seul article à la fois, régler les options).

  • Folio PDF : 147 ko
  • Folio PNG : 638 ko
  • Folio JPG minimum : 45 ko (avec une qualité atroce sur les textes)
  • Folio JPG maximum : 289 ko (compression invisible à l'œil nu)

Puis, par acquis de conscience, j'ai testé avec 2 autres fichiers :

DPS-TestPoidsFull.jpg

Même type d'image, jpg ±800ko

  • Folio PDF : 246 ko
  • Folio PNG : 2,2 Mo
  • Folio JPG minimum : 84 ko (avec une qualité atroce sur les textes)
  • Folio JPG maximum : 735 ko (compression invisible à l'œil nu)

et enfin avec les 2 images :

DPS-TestPoidsFull2Images.jpg

  • Folio PDF : 362 ko
  • Folio PNG : 2,1 Mo
  • Folio JPG minimum : 91 ko (avec une qualité atroce sur les textes)
  • Folio JPG maximum : 751 ko (compression invisible à l'œil nu)

Sans surprise, le format PDF est le plus efficace : bonne compression des images, texte vectoriel. Le format PNG, dit "sans perte" est le plus lourd dans tous les cas. Et pour la qualité jpg, on monte très vite au delà du poids du pdf pour obtenir une qualité visuelle acceptable.

Évidemment, plus vous mettez d'éléments sur la page pdf, plus elle va prendre en poids. Du coup, j'ai fait un dernier test pour la route :

DPS-TestPoidsFull2ImagesTexte.jpg

  • Folio PDF : 377 ko
  • Folio PNG : 2,2 Mo
  • Folio JPG minimum : 147 ko (avec une qualité atroce sur les textes)
  • Folio JPG maximum : 999 ko (compression invisible à l'œil nu)

Et le tout sans une seule interactivité.

Grand vainqueur : le PDF, mais…

Du coup, on se dit que le pdf est le plus qualifié, mais il reste quand même un point "contre" : les tablettes affichent "en natif" les formats d'image aplatis (jpg, png) et donc de manière très rapide. Le format pdf, lui, doit être recalculé, et donc va prendre quelques millisecondes de plus à s'afficher, ce qui pourrait diminuer un peu le confort de lecture.

Et pour arbitrer ce choix, pas d'autre solution que tester soi-même sur les périphériques, voir ce que vous considérez comme acceptable ralentissement par rapport au gain de poids et à la capacité à zoomer (±350ko vs ±2000ko par page).

Un petit dernier pour la route…

Si vous êtes plus versés dans les pages web html que la mise en forme papier, n'oubliez pas que la Digital Publishing Suite est une plateforme qui s'appuie sur inDesign, mais pas seulement.

Vous pouvez tout aussi bien composer vos pages en html, optimiser vos images aux petits oignons dans Photoshop (vous avez vu Generator ?) et importer dans votre Folio Builder (ou directement dans le Folio Producer en ligne).

Et là, vous maîtrisez intégralement le poids de vos contenus.

Mais on quitte le domaine d'inDesign, où je ne m'aventurerai pas sans être solidement préparé.

Et vous, quels sont vos conclusions sur les poids de fichier ?

jeudi 12 septembre 2013

Muse + Inline SVG

Le SVG, c'est bien, à condition d'être sur un navigateur récent (exit les IE 6-7-8 et Android 2.3…). Mais il existe des solutions pour retomber sur du PNG.

Ça marche, et je le présente ici. Je complèterai prochainement avec plus de détails.

— Edit du 15 septembre —

Le SVG, dans Muse, c'est possible, et dès maintenant, avec un petit bonus.

Petit rappel, pour ceusses qu'auraient pas suivi. Le SVG c'est ce format vectoriel extrêmement pratique sur le web depuis qu'on s'est rendu compte que les écrans n'étaient pas seulement à 72 dpi, ni même à 96 dpi, mais parfois à 400 dpi (retina, tout ça tout ça).

Pour le fabriquer, rien de plus simple, vous passez dans illustrator, et vous enregistrez en .svg (voir à ce sujet l'excellent article détaillé de Michaël Chaize). Et puis vous le placez sur votre page et tous les navigateurs modernes afficheront exactement vos jolis vecteurs. Par navigateurs modernes, j'entends Chrome, Firefox, Safari, Opera, Android et même Internet Explorer… à partir de la version 9. D'ailleurs, Android, c'est à partir de la version 3. Exit les vieux téléphones coincés en 2.x soit près de 30% à l'heure où j'écris ces lignes. IE6-7-8, pareil, bien sûr, la joie si votre audience est en entreprise coincée sur winXP.

Je cherchais donc une solution miracle, et je suis tombé sur le fallback en PNG, qui permet de retomber sur un visuel PNG, donc non interactif, mais au moins présent, pour les navigateurs qui ne lisent pas le svg. Les explications étaient détaillées chez David Ensinger, je compile donc tout ça pour la postérité.

SVG inline avec Fallback PNG

Premier point important, pour que cette méthode fonctionne, il faut que le svg soit inline, c'est à dire qu'il fasse partie du code html de la page, et non pas <object> <embed> ou <img>, j'ai testé pour vous, ça marche beaucoup moins bien.

Niveau syntaxe, ce n'est pas bien compliqué et ça repose sur 2 balises svg :

<foreignObject> qui sera capable d'injecter au sein du svg des éléments qui n'en font pas partie, notamment du code html. C'est dans cette balise qu'on placera notre png, sous une simple <img src="" />

<switch> va permettre au svg de décider s'il affiche un groupe (<g>, en svg) ou l'autre (<foreignObject>, en html). Or, la magie qui s'opère avec un svg inline, c'est que si le navigateur sait le lire, il se débrouille avec, mais si le navigateur ne connait pas la balise svg (IE 6-7-8, Android 2.x), il ignore tout le reste… sauf le html à l'intérieur !

Et pour le contenu à adapter

data:image/png;base64 nous sommes en mode inline, il faut que notre contenu soit présent dans le svg pour limiter les appels à une ressource extérieure (et les risques liés aux répertoires, déplacements de fichiers…) pour cela, le visuel n'est pas lié, mais incorporé et traduit en base64.

Précisions pour l'usage via Illustrator : lorsque pour gagner du temps vous placez votre png directement depuis Ai (par exemple en réalisant un export pour le web, puis importation, ou en utilisant la pixellisation puis décomposition de l'aspect), il vous faudra à l'export demander d'incorporer les images. Ai vous convertira les visuels.

<img src="" /> Petit point à noter : Illustrator vous enregistre un fichier .svg, c'est bien, mais quand il met une image dedans, il le fait pour du svg, il ne sait pas encore traiter les balises qu'on a vu avant. Et pour intégrer une image à un svg, on n'utilise pas <img src="…" /> mais <img xlink:href="…" /> Du coup, vous devrez remplacer l'une par l'autre pour que ça fonctionne en entier.

Ça marche dans Muse !

Ça c'est le point le plus important pour vous, si vous êtes arrivés jusque là dans l'article (remarque, vous pourriez très bien vous servir de ça hors Muse, vous auriez déjà gagné la compatibilité IE 6-7-8 et Android 2.x). Mais surtout, une fois que vous avez lu tout ça, le plus dur est fait.

Il ne vous reste plus qu'à coller toute la partie SVG de votre fichier directement dans un objet HTML de Muse et c'est tout ! La preuve, c'en est presque magique. Et vu que les pages de Muse ne sont pas générées à la volée, mais bien par vous, vous restez sur du inline. Certes, un peu plus contraignant que de la vraie image jointe, mais combien plus pratique pour poser les éléments sur la page !

Et comme je suis quelqu'un de fondamentalement honnête, je vous livre quand même une limitation : les dimensions de votre objet SVG devront être modifiées à la main.

En tous cas pour de la jolie interactivité fine, ça redonne espoir.

Bonne lecture, et n'hésitez pas à commenter avec vos réalisations !

PS : Quelques liens pour s'entraîner avec le fichier Muse, le fichier svg (généré dans Ai, modifié dans Brackets). Et comme je suis de bonne composition ce jour, le tout zippé.

mercredi 11 septembre 2013

Simuler la sortie v1 - Script de prévisualisation dans Illustrator par Gustavo Del Vecchio

— Edit du 13/09 —
Le plug-in existe désormais en français, à télécharger ici (là où c'est écrit French). Vous êtes gâtés :)

Vous ne parlez ni anglais, ni portugais (portugais-brésilien, de plus), cet article est là pour vous.

Que les habitués d'inDesign se réjouissent, ils vont désormais retrouver leur W favori dans Illustrator et prévisualiser les pages, sans les guides et sans les éléments qui débordent des plans de travail.

Pour ce faire, jusqu'ici, il "suffisait" de créer un rectangle à la taille adaptée, et de creuser un autre rectangle beaucoup plus grand, puis d'afficher ou masquer la page.

Grâce au travail de Gustavo Del Vecchio vous bénéficiez d'un petit script tout simple qui va faire le travail à votre place, d'un clic.

OutputSimulationV1.png

En plus, il vous propose une fenêtre de dialogue pour ajuster la couleur du fond (blanc/gris/noir).

Pour l'instant, les plans de travail qui se recouvrent ne sont pas pris en compte, mais ça pourrait venir.

Là où ça devient intéressant, c'est quand on couple ce script et la technique pour ajouter un script et créer une action. Il ne vous reste plus qu'à choisir le raccourci à utiliser, sachant qu'on reste contraint aux F1 (et suivantes) + cmd + maj.

Le lien vers le script dans l'article en anglais.

jeudi 5 septembre 2013

Aider les utilisateurs, forums et êtres humains.

L'homme est un animal social (et parfois même sociable). Il ne fonctionne pas tout seul, ou alors de manière limitée.

On a tous un jour eu besoin d'un coup de main. Dans la vraie vie, en ce moment, ce serait plutôt la partie peinture (en bâtiment, pas aquarelle) que je dois améliorer. Pour d'autres, c'est l'usage d'un logiciel. Aujourd'hui, avec internet, on trouve des réponses à tout, tout de suite, à grands renforts de moteurs de recherche.

On peine sur une question ? On trouvera bien une dizaine de réponses sur le web.

On cherche à découvrir tout un domaine (se professionnaliser, se former en continu ?), des centres de formation existent (je le sais je travaille avec certains), des formateurs indépendants aussi, prêts à se déplacer, des livres ou même des vidéos de formation en ligne.

Parfois, le temps manque, les réponses trouvées sont très (trop) génériques, vos questions sont plus spécifiques que les sujets et programmes proposés. On cherche de la réponse en direct.

Et là, soit on a la chance d'avoir l'ami (ou le collègue) qui sait et qui a du temps pour dépanner, soit on a dans son carnet d'adresse, sur twitter, par mail, par skype, sur google plus ou autre quelqu'un qu'on a déjà croisé et qui s'est proposé un jour de vous dépanner, ou qu'on sait prompt à répondre.

Et puis parfois, rien de tout ça. Alors il faut se faire violence, et poser sa question, telle une bouteille à la mer, sur un forum.

Les forums

Je renvoie régulièrement vers les forums utilisateur, que ce soit en français ou en anglais, par logiciel pour les questions pointues (audience plus importante, présence parfois des membres des équipes Adobe, possibilité de proposer et voter pour des idées), voir d'aller carrément faire vos retours sur Photoshop.

Sur les forums, poster une question suit un protocole simple :

  1. Vérifier que la question n'a pas été posée récemment (les réponses de 1995 sont rarement encore valables)
  2. Dire bonjour (oui, ça vous paraît évident, mais ça ne l'est pas pour tout le monde)
  3. Exposer son problème de façon brève (histoire d'aiguiller le lecteur dès le début sur sa capacité à répondre)
  4. Donner des informations précises (quel logiciel (oui oui…), quelle version du logiciel, quel système d'exploitation…)
  5. Compléter par des captures d'écran, des liens de vos précédentes recherches (si vous postez sur le forum (bouteille à la mer) c'est que vous avez déjà cherché en amont), bref, tout ce qui pourrait guider la personne qui vous aidera.
  6. Donner un titre utilisable et clair (histoire de retrouver la question plus tard)
  7. Si par chance la réponse correspond à votre question, n'hésitez pas à dire merci (voir le point n°2).

Quand je forme des stagiaires sur les sessions de formation, ils ont mes coordonnées, pour le service après-vente, mais surtout, j'ai bien pris le temps de leur expliquer mon fonctionnement rapport à leurs questions :

  • C'est une question facile, la réponse tient dans un oui/non, un petit mail, un tweet, le problème est réglé.
  • C'est une question plus complexe, qui va nécessiter des exemples, un peu de recherches (proposer le bon lien, vérifier que l'information est à jour, etc), cela demande du temps, direction le forum. Et quand je fais ça, je ne me débarrasse pas de la question, tout simplement parce que, sur ce forum, je réponds aussi ! (Et je ne suis pas le seul).
  • Ceux que j'ai vu en formation, avec qui on a pris le temps de sympathiser, les vieux copains aussi, ont droit à un bonus : ils peuvent me relancer par mail pour me dire que leur question n'a pas trouvé de réponse. Et comme on se connaît, je peux trouver le temps de me pencher à nouveau sur un sujet. Et eux comprennent que le temps n'est pas disponible à l'infini (mais ça c'est parce qu'on se connaît)…

Pour en arriver là…

Récemment, à plusieurs occasions, on m'a dit (ou fait comprendre) que mes réponses pouvaient être trop succinctes, que les liens en anglais n'étaient pas suffisants, que je pourrais quand même répondre à cette question, autrement que par "posez la question sur le forum". Parfois je laisse mourir un sujet, j'ai cherché, un peu, sans succès. Souvent, c'est le temps qui manque.

Et surtout, sur les forums, il y a beaucoup (énormément) d'utilisateurs, avec une ou deux questions, ces questions sont très précises ou très vagues, mais surtout, en face, les utilisateurs avec des réponses sont beaucoup moins nombreux, et pour la plupart bénévoles. Même les membres du staff Adobe le font sur leur temps libre. Imaginez : 1500 "discussions" en français, 46 contributeurs récurrents.

Avec ce post, que je renverrai aux uns et aux autres de temps à autres, je voulais partager mon approche du forum et la raison pour laquelle il n'est pas toujours évident d'avoir une réponse personnalisée. Essayez de demander du feu ou une cigarette sur les trottoirs de Paris, notez statistiquement vos résultats et les raisons du don…

Comme tous mes articles, la zone de commentaire en bas nous permettra d'échanger, ça fait toujours plaisir de savoir qu'on est lu (autrement que par les Analytics…).

lundi 2 septembre 2013

Creative Cloud : Installer les versions CS6

Edit CC2014

Attention, si vous arrivez sur ce message par un vieux lien, la procédure s'est simplifiée.

Voilà donc un nouveau billet pour la version 2014 du Creative Cloud.

Version CC"2013"

(et je ne vois même pas comment vous auriez accès à ça, mais je garde, pour archive…)

Question récurrente : comment fait-on si on ne veut pas mettre à jour les applications qu'on utilise via le Creative Cloud, et le corollaire : j'ai installé la version Creative Cloud, mais j'ai besoin de la version CS6 (par exemple pour ouvrir des fichiers Page Maker dans inDesign)

CC-CCDA-AuditionCC.png

Dans l'application Creative Cloud, sous le petit logo CC de votre barre de menus, vous avez accès aux applications installées (ou pas encore d'ailleurs), ainsi qu'un petit lien Plus d'information.

Ce lien vous redirige vers une page par application qui vous présente les dernières nouveautés. Si l'application n'est pas installée, vous n'aurez plus qu'à la télécharger. Le petit plus, c'est que Dans cette version vous propose en menu déroulant de retrouver l'application en version CS6. Vous verrez donc les nouveautés spécifiques à la version CS6, mais aurez aussi la possibilité de télécharger cette version précédente via le gros bouton bleu.

CC-CCDA-AuditionCS6.png

dimanche 25 août 2013

Aide Installation Adobe Creative Cloud

Je fais fréquemment l'éloge des forums utilisateur, que ce soit en français ou en anglais, par logiciel pour les questions pointues (audience plus importante, présence parfois des membres des équipes Adobe, possibilité de proposer et voter pour des idées), voir d'aller carrément faire vos retours sur Photoshop.

Mais il y a 1 sujet sur lequel la communauté d'utilisateurs qui s'entraide sur les forums va forcément pêcher, c'est l'installation et la mise à jour du Creative Cloud.

En fait, le CC regroupe énormément de composants épars et variés, mis à jour très régulièrement, sur une quantité innombrable de machines, et peut rester un casse-tête pour de la résolution perso au coup par coup.

Et même si c'est très frustrant "quand on sait", ce que je recommande le plus maintenant pour les questions d'installation, pour l'avoir pratiqué, c'est le contact du support.

En semaine, par chat, même si l'assistance technique suit un script (et, cela n'engage que moi, qu'on pourrait condenser quelques étapes), quand j'en ai eu besoin cela a toujours été plus efficace que les recherches forum.

Si vous avez la chance de parler anglais, vous doublez aussi les heures ouvrables (enlever le /fr de l'url).

Il est tentant d'essayer ses propres solutions, ou d'essayer de se rappeler de ce qu'on avait fait l'an passé qui avait bien fonctionné, mais entre temps, pour suivre les évolutions des applications (et maintenant de l'application de bureau Creative Cloud en plus), le support technique reste le plus "à jour"…

lundi 20 mai 2013

Symboles Edge Animate — Traverser la hiérarchie

J'aime bien les questions piège sur Animate. C'est comme ça que j'ai construit la formation pour "aller plus loin". Et les stagiaires que je vois en direct en centre de formation reviennent parfois avec des questions bien intéressantes, en voici une qui concerne le ciblage à travers la hiérarchie

Quand tu es dans un clip est que tu veux mettre un trigger qui va cibler un élément sur la scène, il faut remonter d'un cran. Je suppose donc que tu ne peux pas saisir directement sym.getSymbol("nomElementsurlascene") Il faut un truc du genre stage.sym.getSymbol("nomElementsurlascene") ?

La bonne nouvelle c'est que c'est possible et que ça ressemblerait à ça :

Et les outils utilisés sont assez simples : getComposition().getStage() pour la partie hiérarchie, et isPlaying() pour la partie allumer/éteindre.

Je vous laisse cliquer ci-dessous pour plus de détails.

Lire la suite...

- page 1 de 2