code pour une animation html5 "retina", ou comment contraindre un canvas par CSS |
Bienvenue invité ( Connexion | Inscription )
code pour une animation html5 "retina", ou comment contraindre un canvas par CSS |
26 Aug 2018, 17:11
Message
#1
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
Bonjour,
Je dois réaliser une animation HTML5 "retina" et je fais mes essais avec animate CC d'Adobe. Pour une animation de 300x250 pixels "affichée", je réalise donc l'animation à 600x500 pixels sous animale CC. Après publication, j'essaie de contraindre en CSS mon caneva au petit format, mais rien ne fonctionne. Quelque chose comme : Code <canvas id="canvas" width="600" height="500" style="width:300px;height:250px;"></canevas> n'a aucun effet sur le code généré par Animate CC. (référence : forum Adobe) Comment puis-je m'y prendre ? Je ne trouve aucune doc à ce sujet (ou alors, c'est l'exemple que j'ai cité ci dessus) merci pour toute aide de votre part. |
|
|
26 Aug 2018, 17:37
Message
#2
|
|
Macbidouilleur de bronze ! Groupe : Membres Messages : 263 Inscrit : 31 Aug 2002 Lieu : Saint-Jean-de-Luz Membre no 3 355 |
Bonjour,
Si tu mets la page en ligne ce sera plus simple pour pouvoir t'aider. Déjà essai de corriger ton code qui se termine actuellement par </canevas> au lieu de </canvas> et suprime complètement les dimensions indiquées et ne met que les dimensions en CSS. Code <canvas id="canvas" style="width:300px;height:250px;"></canvas>
Ce message a été modifié par Philippe64 - 26 Aug 2018, 18:15. -------------------- En activité : Macbook pro 15" Core I7 à 2.8Ghz de 2015 - Macbook pro 13" Core I5 à 2.5Ghz - Macbook pro 15" Core duo de 2006 qui marche toujours hyper bien - iPhone 6s - iPad - iPad Mini
En Panne : Imac 27 Pouces Core I7 à 3.4Ghz - mid 2011 (je cherche un écran) A la retraite : Imac C2D 24 Pouces (blanc) à 2.33 Ghz - iBook14" 800 Mhz - Quicksilver 733 - G3 bleu et blanc - Macintosh Classic - iPhone 3G - iPhone 4s Crea64 : creation de site internet à Saint-Jean-de-Luz (64) |
|
|
26 Aug 2018, 20:17
Message
#3
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
voici mon exemple test.
J'ai beau enlever les tailles 600x500 du code généré par Animate CC et ajouter un CSS height:250px;width:300px;, je ne comprends pas pourquoi la taille du canvas n'est pas réduite. |
|
|
27 Aug 2018, 07:37
Message
#4
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 4 969 Inscrit : 26 Jan 2011 Lieu : Pollachius virens Membre no 164 083 |
Salut,
Un simple coup d'oeil à ton fichier index.js et on y trouve Code lib.properties = { id: '6BA03892E49C46CAB4CFA5C5FA38A26C', width: 600, height: 500, fps: 24, Donc tu indiques toujours la taille 600x500 -------------------- MBP 2017 15" avec clavier pourri et touchbar inutile
|
|
|
27 Aug 2018, 08:39
Message
#5
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
|
|
|
27 Aug 2018, 10:05
Message
#6
|
|
Nouveau Membre Groupe : Membres Messages : 4 Inscrit : 27 Aug 2018 Membre no 205 628 |
Salut,
si tu inspectes la balise de ton div "retina", tu verras qu'il est formaté à la volée avec les dimensions de base de ton animation, même si tu modifié les dimensions dans le html. http://www.mouseupdesign.com/Animate/doc/test.png Tout simplement parce que ces dimensions sont mémorisées dans le runtime js. (fait une recherche sur "300" dans le fichier index.js). Il faut que tu fasses la modif ici également... à+ Seb |
|
|
27 Aug 2018, 10:44
Message
#7
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
|
|
|
27 Aug 2018, 10:46
Message
#8
|
|
Nouveau Membre Groupe : Membres Messages : 4 Inscrit : 27 Aug 2018 Membre no 205 628 |
Visiblement tu as cru changer mais ça n'est pas le cas dans le .js qui est en ligne.
http://sebastienbertrand.ch/html5_test2/index.js à+ |
|
|
27 Aug 2018, 10:59
Message
#9
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
Ah bon ? ... Ben pourtant, je lis bien "300" dans le fichier que tu pointes... Peut-être que ton cache conserve le "600" du premier fichier vu que c'est sur le même serveur...
Code lib.properties = { id: '6BA03892E49C46CAB4CFA5C5FA38A26C', width: 300, height: 250, fps: 24, color: "#002E9A", opacity: 1.00, manifest: [ {src:"images/index_atlas_.png", id:"index_atlas_"} ], preloads: [] }; edit, 12h02 : Je viens d'ajouter un "no-cache" à l'entête, si le problème venait de là. Ce message a été modifié par toluol - 27 Aug 2018, 11:02. |
|
|
27 Aug 2018, 14:56
Message
#10
|
|
Nouveau Membre Groupe : Membres Messages : 4 Inscrit : 27 Aug 2018 Membre no 205 628 |
Ok. On s'est mal compris. Étant donné que l'animation s'affiche bien a 300x250, je croyais que tu voulais faire l'inverse.
Du coup je comprends pas trop ton pb. L'animation est formatée a 300x250 et s'affiche bien comme telle pour moi... A+ |
|
|
27 Aug 2018, 15:54
Message
#11
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
non, l'animation du test 2 est rogné (le mot retina est coupé car si la taille du cadre est correcte, l'échelle n'a pas été divisé par 2.)
En bidouillant, j'ai fait le test3, ce qui donne le résultat escompté (chez moi), mais le code est moche... et j'ai peur que tout le monde ne voit pas l'animation réduite de moitié. En fait, j'ai pigé qu'Animate CC crée la fonction javascript "makeResponsive" qui redimensionne le canva... (Du coup, impossible de redimensionner autrement) Dans cette fonction, j'ai trouvé que mettre un sRatio de 0.5 me donnait le résultat escompté. Mais je ne pige pas comment m'affranchir de toutes ces fonctions et juste charger mon animation en la redimensionnant de 0.5... Est-on obligé d'utiliser du javascript pour redimensionner une animation "retina" ? Ne peut-on pas le faire en CSS ? Animate CC crée un div conteneur (animation_container), mais nous ne semblons pas en avoir le contrôle en CSS... Dans quel but ?? Tout ceci est un mystère... Si quelqu'un a une lanterne "Adobe", je veux bien ! J'ai cherché dans la doc, rien. |
|
|
27 Aug 2018, 18:42
Message
#12
|
|
Nouveau Membre Groupe : Membres Messages : 4 Inscrit : 27 Aug 2018 Membre no 205 628 |
ok je comprends mieux ton pb, n'ayant pas crée ton animation, je n'ai pas compris qu'elle ne s'affichait pas correctement dans les limites du 300x250.
<Est-on obligé d'utiliser du javascript pour redimensionner une animation "retina" > A priori oui. D'ailleurs Adobe gère le responsive exclusivement en JS. Concernant le Retina, si ça peut t'aider j'ai déjà eu un pb de netteté d'animation sur du responsive. J'avais creusé sur sur les forums et trouvé ces fonctions qui à l'époque avait résolu mon pb. Mais ça date, je pensais que le code d'Adobe (de nombreuse fois remanié depuis la V1 d'ACC prenait en compte les écrans Retina à présent). ******************************************************************************** ****************************** if (window.devicePixelRatio) { var height = canvas.getAttribute('height'); var width = canvas.getAttribute('width'); canvas.setAttribute('width', Math.round(width * window.devicePixelRatio)); canvas.setAttribute('height', Math.round(height * window.devicePixelRatio)); canvas.style.width = width + "px"; canvas.style.height = height + "px"; stage.scaleX = stage.scaleY = window.devicePixelRatio; } ******************************************************************************** ****************************** avec la méthode getDevicePixelRatio : ******************************************************************************** ****************************** /*! GetDevicePixelRatio | Author: Tyson Matanich, 2012 | License: MIT */ (function (window) { window.getDevicePixelRatio = function () { var ratio = 1; // To account for zoom, change to use deviceXDPI instead of systemXDPI if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) { // Only allow for values > 1 ratio = window.screen.systemXDPI / window.screen.logicalXDPI; } else if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } return ratio; }; })(this); ******************************************************************************** ****************************** à+ Seb |
|
|
30 Aug 2018, 00:23
Message
#13
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
Merci pour ta réponse zzibes !
Je ne comprends pas bien pourquoi nous serions obligé d'utiliser du javascript pour afficher un canvas à 50%. Impossible de le contraindre par du CSS ? Et j'imagine qu'il devrait y avoir un moyen, avec les media queries peut-être, d'afficher une petite animation pour les écran normaux et une animation 2x plus grande pour les écrans rétina, un peu sur cette base pour les images : Code <!doctype html> <html lang="fr"> <head> <style> div#monimage{width: 300px; height: 250px; } @media only screen and (-webkit-max-device-pixel-ratio: 1.5), only screen and (-o-max-device-pixel-ratio: 3/2), only screen and (max--moz-device-pixel-ratio: 1.5), only screen and (max-device-pixel-ratio: 1.5) { div#monimage{ background: url(monimage.jpg) no-repeat; } } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { div#monimage{ background-image: url([email protected]); background-size: 300px 250px; } } </style> </head> <body> <div id="monimage"></div> </body> </html> ... et l'image [email protected] est 2 fois plus grande que monimage.jpg. Ou faudra-t-il attendre html6 ? ps. si jamais, pour la clarté du forum, essaie d'utiliser les balises <code>blablabla</code> (en fait entre crochet [] pour que ça marche), pour afficher du code. (ou il y a un bouton en dessous des polices) Ce message a été modifié par toluol - 30 Aug 2018, 00:29. |
|
|
7 Sep 2018, 16:31
Message
#14
|
|
Oui ? Groupe : Membres Messages : 3 889 Inscrit : 24 Jun 2003 Lieu : BZH Membre no 8 224 |
Ou faudra-t-il attendre html6 ? nan ça existe déjà, il faut utiliser la balise picture Code <picture> <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)"> <source srcset="examples/images/art-large.jpg" media="(min-width: 800px)"> </picture> comme tous les navigateurs ne l'implémentent pas toujours, tu peux ajouter un polyfill pour le cas ou => https://github.com/paulirish/matchMedia.js/ explications : https://wooster.checkmy.ws/2014/04/picturef...ponsive-images/ Ce message a été modifié par No6 - 7 Sep 2018, 16:32. -------------------- "Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan) |
|
|
11 Sep 2018, 15:07
Message
#15
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 4 824 Inscrit : 1 Jul 2010 Membre no 156 073 |
Je ne comprends pas bien pourquoi nous serions obligé d'utiliser du javascript pour afficher un canvas à 50%. Impossible de le contraindre par du CSS ? Bonjour, l'élément canvas permet d'y « peindre » des pixels. Pour afficher un élément de 100px de large (valeur CSS), un écran basse définition utilise 100px, un écran haute définition 200px (ou 300px, etc selon la densité de pixels de l'écran). Si tu dessines sur un canvas de 200px pour finalement le redimensionner à 100px en CSS, tu demandes deux fois plus de calcul que nécessaire à l'appareil doté d'un écran basse définition. C'est pour cela qu'il est préférable de détecter la densité de pixels de l'appareil avant de dessiner. Un exemple de plus : Code // sélection et définition du contexte du canvas
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // dimensions CSS var largeur = 200; var hauteur = 100; canvas.style.width = largeur + 'px'; canvas.style.height = hauteur + 'px'; // densité de pixels, redimensionnement du canvas var ratio = window.devicePixelRatio; canvas.width = largeur * ratio; canvas.height = hauteur * ratio; // mise à l'échelle pour correspondre aux dimensions CSS ctx.scale(ratio, ratio); -------------------- L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
|
|
|
4 Oct 2018, 14:55
Message
#16
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
Effectivement, tout est plus clair maintenant ! merci !
|
|
|
Nous sommes le : 23rd April 2024 - 07:59 |