fr32c blog

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

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.

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 :)

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.

dimanche 20 octobre 2013

Brackets : mettre en couleur un format xml spécifique.

Note courte, à retrouver plus tard : dans Brackets, les formats et langages lus et mis en valeur se trouvent dans le fichier contents/www/language/languages.json

Si vous avez besoin de visualiser un format de fichier particulier, et que vous le savez, par exemple, architecturé comme du xml, il suffit de l'ajouter dans le code.

"xml": {
"name": "XML",
"mode": "xml",
"fileExtensions": ["svg", "xml", "wxs", "wxl", "wsdl", "rss", "atom", "rdf", "xslt", "xul", "xbl", "mathml", "config", "monFormatXML"],
"blockComment": ["<!--", "-->"]
},

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.

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

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

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