Version imprimable du sujet

Cliquez ici pour voir ce sujet dans son format original

Forums MacBidouille _ Les Langages Du Web _ code pour une animation html5 "retina"

Écrit par : toluol 26 Aug 2018, 17:11

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

n'a aucun effet sur le code généré par Animate CC. (https://forums.adobe.com/thread/2132533)

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.

Écrit par : Philippe64 26 Aug 2018, 17:37

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

Écrit par : toluol 26 Aug 2018, 20:17

voici http://sebastienbertrand.ch/html5_test/index.html.

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.

Écrit par : yponomeute 27 Aug 2018, 07:37

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

Écrit par : toluol 27 Aug 2018, 08:39

J'avais bien essayé de modifier cela aussi (http://sebastienbertrand.ch/html5_test2/index.html) : Le souci, c'est que cela recadre l'animation sans la mettre à l'échelle !

Écrit par : zzibes 27 Aug 2018, 10:05

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

Écrit par : toluol 27 Aug 2018, 10:44

Hum... Ben, le "300" dans l'index.js, c'est justement ce que j'ai changé dans mon "http://sebastienbertrand.ch/html5_test2/index.html" (par rapport à mon http://sebastienbertrand.ch/html5_test/index.html qui était en largeur : 600). Donc, je ne comprends toujours pas où je pourrais encore changer quelque chose...

Écrit par : zzibes 27 Aug 2018, 10:46

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

à+

Écrit par : toluol 27 Aug 2018, 10:59

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

Écrit par : zzibes 27 Aug 2018, 14:56

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+

Écrit par : toluol 27 Aug 2018, 15:54

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 http://sebastienbertrand.ch/html5_test3/index.html, 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.

Écrit par : zzibes 27 Aug 2018, 18:42

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

Écrit par : toluol 30 Aug 2018, 00:23

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)

Écrit par : No6 7 Sep 2018, 16:31

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

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/picturefill-jquerypicture-responsive-images/

Écrit par : scoch 11 Sep 2018, 15:07

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

Écrit par : toluol 4 Oct 2018, 14:55

Effectivement, tout est plus clair maintenant ! merci !

Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)