fr32c blog

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

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

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

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

mardi 21 août 2012

Adobe Edge Animate Preview 7

Comme vous avez pu le lire de-ci de-là sur certains sites d'information, voilà la nouvelle version Preview de Edge.

Au menu, quelques améliorations fondamentales qui vont 1. vous faciliter la vie, 2. répondre à pas mal de demandes utilisateur.

Et la principale que vous ne pourrez manquer est le "changement" de nom de l'application qui devient Edge Animate.

Edge-Pr7-Titre.png

Bon, c'est un peu réducteur quand on voit la facilité avec laquelle on réalise des éléments interactifs, bien au delà d'un simple outil d'animation… un peu comme, au hasard… Flash, à ses débuts… Du coup, le titre est bien choisi, il va falloir se familiariser avec ce nouveau nom.

Bref, une fois installée cette nouvelle version Preview 7, vous serez accueillis sur l'écran d'accueil par la liste des nouveautés :

Edge-Pr7-Startup-News-700.png

Que ce soit le texte, le côté redimensionnable, des aides d'interface (règles, repères, grille de scénario) ou la présence d'ombres, cette version répondra à la plupart de vos attentes. Laissez-moi vous en détailler l'ensemble ci-dessous.

Lire la suite...

- page 1 de 2