IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> code pour une animation html5 "retina", ou comment contraindre un canvas par CSS
Options
toluol
posté 26 Aug 2018, 17:11
Message #1


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 767
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.
Go to the top of the page
 
+Quote Post
Philippe64
posté 26 Aug 2018, 17:37
Message #2


Adepte de Macbidouille
*

Groupe : Membres
Messages : 231
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é : Imac 27 Pouces Core I7 à 3.4Ghz - Macbook pro 15" Core duo de 2006 qui marche toujours hyper bien - iPhone SE - iPad Mini
A la retraite : Imac C2D 24 Pouces (blanc) à 2.33 Ghz - iBook14" 800 Mhz - Quicksilver 733 (overclocké à 867 Mhz) - G3 bleu et blanc - Macintosh Classic - iPhone 3G - iPhone 4s

Crea64 : creation de site internet à Saint-Jean-de-Luz (64)
Go to the top of the page
 
+Quote Post
toluol
posté 26 Aug 2018, 20:17
Message #3


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 767
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.
Go to the top of the page
 
+Quote Post
yponomeute
posté 27 Aug 2018, 07:37
Message #4


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 755
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
Go to the top of the page
 
+Quote Post
toluol
posté 27 Aug 2018, 08:39
Message #5


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 767
Inscrit : 14 Nov 2003
Lieu : Genève
Membre no 11 656



J'avais bien essayé de modifier cela aussi (2e test) : Le souci, c'est que cela recadre l'animation sans la mettre à l'échelle !

Fichier joint  test.jpg ( 23.43 Ko ) Nombre de téléchargements : 1


Ce message a été modifié par toluol - 27 Aug 2018, 08:44.
Go to the top of the page
 
+Quote Post
zzibes
posté 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
Go to the top of the page
 
+Quote Post
toluol
posté 27 Aug 2018, 10:44
Message #7


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 767
Inscrit : 14 Nov 2003
Lieu : Genève
Membre no 11 656



Hum... unsure.gif Ben, le "300" dans l'index.js, c'est justement ce que j'ai changé dans mon "2e test" (par rapport à mon 1er test qui était en largeur : 600). Donc, je ne comprends toujours pas où je pourrais encore changer quelque chose... sad.gif

Ce message a été modifié par toluol - 27 Aug 2018, 10:45.
Go to the top of the page
 
+Quote Post
zzibes
posté 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

à+
Go to the top of the page
 
+Quote Post
toluol
posté 27 Aug 2018, 10:59
Message #9


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 767
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.
Go to the top of the page
 
+Quote Post
zzibes
posté 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+
Go to the top of the page
 
+Quote Post
toluol
posté 27 Aug 2018, 15:54
Message #11


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 767
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.
Go to the top of the page
 
+Quote Post
zzibes
posté 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
Go to the top of the page
 
+Quote Post
toluol
posté 30 Aug 2018, 00:23
Message #13


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 767
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(monimage@2x.jpg);
        background-size: 300px 250px;
      }
    }
    </style>
</head>
<body>
      <div id="monimage"></div>
</body>
</html>

... et l'image monimage@2x.jpg 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) wink.gif

Ce message a été modifié par toluol - 30 Aug 2018, 00:29.
Go to the top of the page
 
+Quote Post
No6
posté 7 Sep 2018, 16:31
Message #14


Oui ?
*****

Groupe : Membres
Messages : 3 859
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



Citation (toluol @ 30 Aug 2018, 01:23) *
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)
Go to the top of the page
 
+Quote Post
scoch
posté 11 Sep 2018, 15:07
Message #15


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 373
Inscrit : 1 Jul 2010
Membre no 156 073



Citation (toluol @ 30 Aug 2018, 01:23) *
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
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 25th September 2018 - 18:30