Découvrir Animate CC 2015

Rendre réactive une publication HTML5 canvas

Testez gratuitement nos 1257 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez comment rendre responsive, ou réactive, une animation dans Animate CC. Voyez aussi comment centrer l'animation.
04:56

Transcription

Dans cette nouvelle mouture d'Animate CC il est enfin possible de rendre notre publication responsive. Ça veut dire que nous allons, grâce à quelques cases à cocher, expliquer au navigateur que nous souhaitons que l'animation que nous mettons en ligne puisse s'agrandir ou se diminuer en fonction du fait que l'utilisateur agrandit ou diminue la fenêtre de son navigateur. Pour réaliser cela, je vais vous demander de vous rapprocher des sources de cette formation et d'aller dans le chapitre 3 où vous trouverez un document qui s'appelle "reponsive.fla". C'est un document qui contient deux images clefs avec du code permettant d'un simple clic de passer d'une image à l'autre. Je souhaite donc rendre responsive cette animation. Pour ce faire je viens sur Fichier, je viens sur Paramètres de publication. Je peux aussi utiliser le raccourci clavier Ctrl+Maj+F12. Je suis maintenant dans la fenêtre de paramétrage de la publication, je viens dans l'onglet Simples et là je vais donner un nom à mon travail je peux l'appeler du même du nom que ce travail a quand je l'ai enregistré dans Animate, je peux aussi lui donner un autre nom. Voire même, je peux indiquer un autre dossier de sortie en cliquant sur cette icone. Ce qui m'intéresse, c'est cette petite case à cocher ici : Rendre Réactif. Le Rendre Réactif va me permettre de rendre responsive mon animation. Il suffit que je coche cette case. Le fait de cocher cette case, me permet de venir cocher celle du dessous, Ajuster à la Zone Visible. Si je coche Ajuster à la Zone Visible, mon animation qui pour l'instant a une taille de scène de 480x320 pixels, ne tiendra pas compte de cette taille que j'ai indiqué mais s'adaptera à la taille de la fenêtre du navigateur du visiteur. Si je coche, bien sûr, cette case. Je veux rendre réactif, c'est-à-dire responsive mon animation, oui, mais dans quel sens: uniquement en largeur uniquement en hauteur ou dans les deux sens? Ici, nous allons prendre les deux et nous allons essayer en ajustant à la zone visible. Je peux ajuster à la vue ou étirer pour ajuster, on dire qu'on veut ajuster à la vue pour garder l'homothétie. Voilà donc j'ai coché ces deux cases, je fais maintenant Publier, ok. Je vais maintenant aller voir dans le navigateur ce que donne ce travail. Voilà mon travail, et là, si je joue sur la taille de ma fenêtre, vous voyez que mon image est effectivement responsive, elle s'agrandit ou elle se diminue sans tenir compte ni de la taille de la scène alors là ça créé une image légèrement floutée parce que mes images au départ sont un peu petites, donc si j'agrandis de manière inconsidérée, mon image perd un peu de sa netteté. Mais j'ai la possibilité de rendre complètement responsive mon image. Alors maintenant, autre cas de figure, c'est le cas où je souhaite que l'utilisateur lorsqu'il il agrandit sa fenêtre je souhaite que l'image s'agrandisse mais jusqu'à la limite de la taille que j'ai fixé ici pour ma scène. Pour faire cela je reviens sur Fichier, sur Paramètres de Publication, et là je vais décocher la case Ajuster à la Zone Visible. Je fais Publier, et donc on va voir dans le navigateur si le travail a été mis à jour. Je publie, ça c’était l'ancien, voilà le nouveau regardez maintenant ce qui se passe j'agrandis mais arrivé à une certaine taille, l'image ne s'agrandit pas au-delà. Là, c'est la taille de ma scène, je ne vais pas au delà. Les esprits chagrins me diront: « Oui, c'est bien joli votre histoire mais c'est toujours tassé en haut à gauche de la page. » Qu'à cela ne tienne, je vais pousser cette fenêtre provisoirement je viens ici dans Fichier puis Paramètres de publication et je vais cocher cette case pour dire que je veux centrer la scène. Je peux la centrer horizontalement uniquement, verticalement ou dans les deux sens. Nous allons prendre dans les deux sens, je fais Publier, je reviens dans mon navigateur et je vais rafraîchir l'affichage. Voilà, là mon image est non seulement responsive mais en plus, elle est parfaitement centrée au milieu de la fenêtre du navigateur et ce quelque soit la taille que prend cette fenêtre. Voilà donc en quelques mots comment rendre responsive et éventuellement centrer une animation à l’intérieur du navigateur.

Découvrir Animate CC 2015

Prenez en main Adobe Animate CC. Apprenez à réaliser des animations, des illustrations vectorielles, des interfaces, des vidéos, voire même des exécutables pour Mac et PC.

4h47 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Adobe Animate Animate CC
Spécial abonnés
Date de parution :9 févr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !