fr32c blog

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

Mot-clé - Animate

Fil des billets - Fil des commentaires

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

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 !

mardi 12 novembre 2013

Nouvelles formations chez Video2Brain Muse et Edge !

Comme promis, c'est arrivé pour la formation Muse et pour la formation Edge, c'est pour très bientôt, et c'est pour ça qu'il y a la petite icône rouge à retrouver sur ma page video2brain.

Les sujets traîtés concernent Adobe Muse (sites web moderne sans mettre les mains dans le code) et Adobe Edge Animate (Animation et interactivité html5), sur des cas pratiques de réalisation d'un site internet de A à Z et de petits éléments interactifs que vous pourrez intégrer sur vos pages. Plus de détails ci-dessous.

Atelier : Site internet pour mobiles et bureau avec Muse CC

fr_500.jpg Adobe Muse CC, idéal pour créer des sites web graphiques, créatifs et équilibrés sans rentrer dans le code. Cet atelier vous permettra de mettre en place textes et images, une longue page parallaxe, les versions téléphone et tablette en mode adaptatif, et publier le tout sur Business Catalyst via votre abonnement Creative Cloud.

Cliquez pour voir l'atelier Muse CC chez video2brain

Atelier pratique : petits projets interactifs via Adobe Edge Animate

fr_541-1.jpg Après avoir fait le tour des fonctions indispensables dans Edge Animate et introduit la pratique du code et de l'interactivité pour aller plus loin nous revenons ici sur plusieurs petits cas pratiques qui nous permettront de : réaliser des bannières animées, travailler sur une frise interactive, créer une infographie animée tout en (re-)découvrant les nouvelles fonctions d'Animate.

Cliquez pour voir l'atelier Animate chez video2brain

Bien entendu, si vous ne les avez pas déjà vues (ou si vous souhaitez réviser), il est toujours temps de voir 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é.

jeudi 25 juillet 2013

SVG interactif via Illustrator

Le SVG est un des sujets récurrents que je croise à chaque fois que je parle d'animation avec Edge Animate, que ce soit en mode basique, ou en mode interactif.

Et pour cause, jusqu'ici, Edge Animate ne donne accès au SVG que sous la forme d'une image, inaccessible, à moins d'y entrer par le biais des Edge Commons

Après avoir lu une question sur le forum, dont l'auteur rêvait de reproduire cette infographie du Guardian, je me suis dit qu'il était grand temps que je rédige un petit truc, avec un exemple à la clé.

GrapheInteractif.png

Voici donc l'infographie SVG avec les légendes interactives. Très basique, vous n'aurez besoin que d'illustrator et de quoi saisir du texte brut.

Le reste dans le corps du billet.

Lire la suite...

dimanche 14 juillet 2013

Edge Animate : accéder à toutes vos fonctions depuis vos symboles

J'avais prévu un autre titre au départ Edge Animate Closures/Fermetures, et je vous expliquerai plus bas pourquoi je vais recentrer mon approche sur la question fondamentale : Comment optimiser votre code ?

Et surtout comment accéder à toutes vos fonctions depuis vos symboles et déjouer quelques pièges.

Comme présenté lors de la formation "Aller plus loin avec Edge Animate" vous allez progressivement améliorer votre manière de développer, et pousser plus loin les fonctions que vous allez créer (et utiliser), puis vous tenterez d'échapper au côté "répétition" de celles-ci.

Ainsi quand vous avez plusieurs boutons différents sur la scène qui font tous la même chose, s'ils sont vraiment identiques, vous pouvez poser le même symbole à plusieurs endroits. S'ils sont différents, il vous faudra utiliser plusieurs symboles, au risque de répéter le même code, et retrouver les mêmes erreurs (à corriger à chaque fois)…

EgAn-Closures-00.png (cliquez sur l'image pour tester en live)

Je vous ai donc préparé plusieurs captures, depuis Animate, et depuis le navigateur (ici Chrome) qui vous aideront à comprendre le déroulé et le contenu du fichier .zip joint (au format Edge Animate 2.0).

Lire la suite...

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...

jeudi 18 avril 2013

Animate, mouvements, imbrications, pourcentages

Sortons un peu des One Banner A Day pour développer un petit exemple qui permettra (je l'espère) de comprendre la différence entre les valeurs en pourcentage et en pixel lors de la création d'animations redimensionnables dans Edge Animate.

AnimateMotionGlobalApplied.png

Lire la suite...

mercredi 13 mars 2013

One Banner A Day — day 6

Sixième jour sur Edge Animate, cette fois ci, peu de détails, sinon l'utilisation du format SVG pour les éléments, décomposés grâce à un script proposé par David Deraedt

lundi 4 mars 2013

One Banner A Day — day 5

Cinquième jour (oui, j'ai un peu traîné…) sur Edge Animate (cliquez pour voir le message au complet)

Lire la suite...

dimanche 17 février 2013

Edge Animate et les fontes incorporées

Si les animations que vous réalisez à l'aide d'Animate sont destinées à être vues hors connexion internet (par exemple, pour un contenu Digital Publishing Suite, dans un magazine sur tablette), il est souhaitable que les polices de caractère utilisées soient incorporées (contrairement aux simples webfonts, histoire d'éviter le désastre visuel…). EgAn-FontesIncorporees-Intro.png

Lire la suite...

vendredi 15 février 2013

Adobe Edge Animate 1.5

C'est officiel, la Saint Valentin 2013 est placée sous le signe des Adobe Edge Tools and Services.

Hier soir, pas moins de 3 mises à jour et grosses nouveautés, entre la sortie officielle de la version preview de Adobe Edge Reflow (commentaires et retours attendus sur le forum ou via twitter) pour créer des sites en Responsive Web Design, nouvelle version de Edge Code, et surtout la nouvelle version de Adobe Edge Animate

EgAn-MaJ1.5.png

Au programme de cette version 1.5 :

Un peu plus de détails ci-dessous.

Lire la suite...

samedi 15 décembre 2012

Animate 1.0.1

Animate est passé en version 1.0.1. Vous n'avez pas pu manquer le petit bandeau en ouvrant votre application ce matin.

An-MaJ-Dispo-101.png

Alors, quoi de neuf ?

Lire la suite...

dimanche 28 octobre 2012

Edge Code Preview — Visualiser la syntaxe colorée des SVG

Edge Code (pour l'instant Preview) est un éditeur de code à la fois très basique et très puissant distribué par Adobe et basé sur Brackets.

FR-EdgeCodePreview-Syntax-SVG.pngDestiné à écrire du code, le syntaxer, l'amender pour pouvoir fabriquer des sites web en html5, css et js, il est bien pratique, léger et très efficace, et surtout en évolution permanente. Or, dans les sites web aujourd'hui, avec le Responsive Web Design comme objectif, on utilise de plus en plus d'illustrations SVG.

Et le SVG, c'est bêtement un format de description de dessin vectoriel avec les instructions entre balises (Markup Language).

Sauf que par défaut, Edge Code Preview|Brackets Sprint 15 affichent le SVG comme du texte brut

Voyons ci-dessous comment faire évoluer son appli.

Lire la suite...

mardi 23 octobre 2012

One Banner A Day — day 4

Quatrième jour sur Edge Animate, cette fois ci, on commence à faire des choses amusantes. Alors, vous avez trouvé de quoi il retourne ?

lundi 22 octobre 2012

One Banner A Day — day 3

Troisième jour (ouvré) sur Edge (cliquez pour voir le message au complet)

Lire la suite...

vendredi 19 octobre 2012

One Banner A Day — day 2

Deuxième jour sur Edge (si vous ne voyez pas l'iframe sur le rss,cliquez pour voir le message au complet)

Lire la suite...

jeudi 18 octobre 2012

One Banner A Day — day 1

J'ai décidé de faire quelques tests sur Edge, et de me donner une petite contrainte de productivité. Cliquez pour en savoir plus.

Lire la suite...

mardi 25 septembre 2012

Spritesheet depuis Flash

DivingFishAnimation.gifPour réaliser de petites animations numériques, une multitude d'outils d'offre à vous, certains plus adaptés et efficaces que d'autres.

Avec le temps, Flash a fait ses preuves en la matière et permet un travail efficace, principalement vectoriel.

Mais si votre animation est destinée a être visualisée, par exemple, sur une tablette ou un smartphone dont le navigateur n'utilise pas de plug-in (comprendre : iPad/iPhone) vous pourriez être tentés d'oublier l'outil, et de passer directement à Edge Animate.

Or, ce dernier, très efficace pour les animations de blocs, de textes ou d'images est malheureusement incapable de créer le moindre élément visuel, et sert principalement à intégrer et animer les éléments.

Découvrons ci-dessous la manière dont nous allons pouvoir exporter notre animation (en vue, plus tard, d'une utilisation dans Edge).

Lire la suite...

lundi 24 septembre 2012

Edge : Animate — Version 1.0, et les autres :)

Voilà, c'est fait, c'est dit, c'est la fête : Edge Animate est sorti en version 1.0.

Et si vous vous demandiez pourquoi il s'appelle Animate, Adobe a donné la réponse hier soir lors de leur évènement Create The Web

Désormais, ce n'est pas 1 soft Edge, mais 7 que vous pourrez découvrir sous cette même bannière :

icon-107-animate.jpeg icon-107-code.jpeg icon-107-inspect.jpeg icon-107-reflow.jpeg icon-107-phonegap-build.jpeg icon-107-webfonts.jpeg

et enfin Typekit, que je mets à part parce qu'ils ne l'ont pas habillé pareil et que ça ne fait pas le même effet.

icon-107-typekit.jpeg

De quoi animer (Animate, voir plus bas), développer (Code, la version maison de Brackets, mais aussi Reflow qui va bientôt arriver), packager (pour mobile avec PhoneGap Build), vérifier (Shadow est devenu Inspect), et surtout styler avec des fontes web gratuites (Web Fonts) ou commerciales (Typekit).

Et pour les abonnés Creative Cloud, c'est déjà disponible :

CC-Edge-Family6_700.gif

Bref, pour en revenir à Edge Animate, j'en ai déjà parlé plus tôt, mais pour le déroulé complet, je vous renvoie vers Heathrowe.

Pour le reste, toutes les icônes ci-dessus sont cliquables. Bonne découverte !

PS : Et si vous vous demandez ce qu'on fait de Dreamweaver, un message ici vous présente toutes les nouveautés Creative Cloud : Insertion de vidéo HTML5 — Insertion d'éléments sémantiques HTML5 depuis le panneau Insertion — Importation de compositions Adobe Edge Animate — Prise en charge de la zone de travail HTML5 — Améliorations de la prise en charge des éléments de formulaire dans HTML5 — Recherche en direct (Mac OS) — Améliorations de FTP

samedi 15 septembre 2012

Edge Animate — Polices et point-virgule

Jouons au jeu des 7 différences, en mode plus simple, avec juste 2 différences à noter et une petite subtilité pour que vos fontes fonctionnent correctement dans Adobe Edge Animate

Première image ici, la suivante dans le billet :

SemicolonAfterTypeFallbackFail.gif

Lire la suite...

- page 1 de 2