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

vendredi 7 février 2014

Adobe Muse CC : Site multilingue et widgets sociaux — Mucow et Mulib pour gagner en productivité

fr_308.jpg

Muse s'étoffe et vous permet de concevoir et de publier des sites Internet de façon toujours plus efficace. Dans cette formation, Franck Payen vous présente les nouvelles fonctions disponibles dans la version CC ainsi que quelques astuces pour la réalisation d'un site multilingue. Découvrez alors les nouveaux effets de défilement, les bibliothèques Mulib, les widgets sociaux et les Mucow, qui n’auront plus de secret pour vous !

Cliquez pour voir l'atelier Muse CC chez video2brain

Et, toujours disponibles, les précédents sujets :

Pour mémoire l'ensemble des sujets video2brain proposés est disponible dans la colonne à votre droite (là où se trouvent les icônes en couleur), et les détails sont sur la page pro, de l'autre côté.

mardi 24 décembre 2013

Le design web avec Photoshop : Contenu graphique et prototypes pour sites web et apps mobiles

fr_594-1.jpg Si vous avez 7h devant vous, c'est le moment de jeter un œil à ça :

En tant que graphiste web, passez par Photoshop pour la création saisissante de vos visuels, de vos prototypes et de vos maquettes. Votre formateur Franck Payen vous invite dans un espace de travail complet. Optimisez ainsi votre efficacité et les couleurs de vos rendus pour le web. Vous pourrez réaliser des traçages, des formes vectorielles et du texte qui s’adapteront facilement à votre page. Travaillez également avec les transparences et construisez une barre de navigation et les boutons, et enfin accélérez toutes ces tâches de manière automatique. Succès immédiat !

Version réactualisée (et traduite) de la formation de Justin Seeley par Franck Payen

jeudi 11 avril 2013

Commentaires PDF dans Adobe Reader

Petit billet avec des vidéos pour détailler les manières d'insérer des commentaires directement dans un fichier PDF, via Adobe Reader (gratuit). La première vidéo concernant l'ajout de commentaire, la seconde, le travail plus collaboratif, avec la validation de ces commentaires, et leur échange via un fichier FDF plus léger.

Lire la suite...

jeudi 13 septembre 2012

Edge Animate — Centrer un objet dans la page

Edge-DrapeauJaponais.pngVous rêvez de créer des drapeaux ?
Plus sérieusement, vous aimeriez centrer des objets dans une page html, mais on vous a toujours dit que c'était complexe ? Que vous alliez vous amuser à grands renforts de css ?

Figurez-vous que ça ne prend qu'une minute, en restant simple.

Vous pourrez aussi voir le résultat directement en ligne en cliquant sur l'image de la cible. (N'hésitez pas à jouer avec les coins de votre navigateur.) Edge-Cible.png

Le fichier de démo et la vidéo dans la suite du billet.

Lire la suite...

lundi 25 juin 2012

Illustrator CS6 - Les points d'un tracé

Les points d'un tracé dans Illustrator CS6 de moi sur Vimeo.

Si chacun connait bien l'utilisation des tracés dans Illustrator, ces petits rappels devraient vous réconcilier avec les éléments qui constituent des tracés : les points. Abordé lors du e-séminaire sur les nouveautés de la Cs6, l'amélioration de l'interface et de l'ergonomie générale du logiciel passe aussi par la connaissance de ses composants.

Je vous représente donc quelques outils fort utiles :

  • Sélectionner tous les points d'un tracé, SAUF UN, permet de passer du mode tracé au mode point
  • L'outil Lasso (Q) pour sélectionner des points en alternance
  • Convertir les points en angles ou en arrondis
  • Aligner et répartir des points (bien plus pratique et efficace que cmd+alt+J)

Si vous voulez en savoir plus, Jérome Bareille — izidesign vous présente le reste dans Illustrator Cs6, les nouveautés.

Et vous, avez-vous d'autres astuces ?

lundi 21 mai 2012

Adobe Touch Apps — Les applications créatives pour tablettes — Adobe Live Creative Week


Lire la suite...

samedi 5 mai 2012

Inverser le sens d'un tracé Illustrator - Installer un script et créer une action de script

Parfois, en utilisant illustrator, on cherche une fonction qui semble évidente, sans succès. Diverses méthodes plus ou moins efficaces, plus ou moins adaptées. Du coup on se plonge dans les forums, sur les sites de référence (j'en liste quelques uns dans mon delicious), et c'est le moment d'assembler les recherches, pour moi, pour plus tard, mais aussi pour vous :)
Ma dernière quête en date est l'inversion du sens du tracé (reverse path direction, en anglais, pour les intimes et ceux qui voudraient faire la recherche eux même), et ça a donné ces quelques minutes, plus la vidéo suivante où je développe un peu sur les scripts.

Inverser le sens d'un tracé dans Illustrator de moi sur Vimeo.

Donc, quelles sont les différentes manières (et raisons) d'inverser le sens d'un tracé dans illustrator :

  • Panneau options d'objet pour les formes fermées composées (tracés transparents).
  • Options de forme de brosse, symétrie horizontale pour les pinceaux
  • Clic sur le premier point qui devient le dernier point
  • Profil de contour / bouton Symétrie horizontale pour les épaisseurs de contour
  • Utilisation du script Reverse Path Direction
J'y parle de ce script chez Kelso Cartography tout en bas, par Wolfgang Reszel : Reverse Path Direction. Or, je me suis rendu compte qu'il n'était pas toujours évident de savoir où placer les scripts téléchargés, ni même comment les appeler.

Installer un script et créer une action

Il existe beaucoup de sites de scripting pour étendre les fonctionnalités d'illustrator (voir le delicious cité plus haut), pour les utiliser via le menu Fichier/Scripts, il suffira de les placer dans le répertoire Illustrator/Paramètres prédéfinis/fr_FR/scripts.
Or, il est impossible d'attribuer des raccourcis clavier à ces éléments de sous menu. On peut donc réaliser un script d'action (panneau scripts d'action) qui appellera directement ces scripts (javascripts), afin de leur assigner des touches de fonction ou un bouton coloré. En outre, les scripts d'action d'illustrator n'enregistrent pas les commandes de menu, donc il faut lui préciser.
Voilà pour aujourd'hui, j'espère que ça vous sera utile.

PS : sur la première vidéo, le son est sature brièvement par endroits, c'est assez agaçant, mais cela ne gâche pas d'information essentielle.

vendredi 30 mars 2012

Illustrator CS5 – Astuces de la Palette de Couleurs

Trucs et astuces de la palette couleurs dans Illustrator CS5 de moi sur Vimeo.

Lorsqu'on parle de couleurs dans illustrator, on a tendance à se focaliser sur les outils très complets et efficaces comme le guide de couleurs ou la modification/redéfinition des couleurs de l'illustration (comme j'en parlais lors du e-séminaire sur le sujet.

Or les modifications les plus fréquentes des couleurs dans Illustrator sont réalisées fort basiquement depuis la palette de couleurs, sans se préoccuper de réglages fins ou d'harmonies. Mais qui a déjà pris le temps d'explorer un peu plus les différents raccourcis et combinaisons, sur le spectre, sur les curseurs, sur les icones d'alerte ?

Après fait le tour du sujet à l'aide de Jérome Bareille — izidesign qui nous avait déjà bien défriché le terrain dans son excellent Fondamentaux d'Illustrator, j'ai compilé ce que j'avais sur cette palette, et uniquement celle-ci.

Qu'en pensez-vous ?

mercredi 22 février 2012

Audition pour découper une séquence son

Audition pour découper une séquence son de moi sur Vimeo.

Depuis la CS5.5, on dispose sur Mac d'un outil extrêmement performant pour retoucher et séquencer un son : Adobe Audition.

Je vais l'utiliser sur un enregistrement en continu de différentes syllabes pour exporter chacune vers un fichier mp3, nommé selon des marqueurs définis.

Rapide et efficace.