Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Dreamweaver CS6 : Les nouveautés

Utiliser un projet Adobe Edge Animate

Testez gratuitement nos 1344 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Avec les standards du web, il est possible de créer toutes sortes d'animations basées sur l'utilisation conjointe de HTML, CSS et JavaScript. Adobe vous propose à cet effet une application très complète, Adobe Edge Animate, qui fait partie de la Creative Suite. Il ne fallait qu'un pas pour que Dreamweaver intègre de manière totalement transparente le résultat du travail réalisé dans cette application.
06:51

Transcription

Au cours de cette étape, nous allons voir comment intégrer une animation Adobe Edge Animate, au sein d'une page html créée dans Dreamweaver. Alors, Adobe Edge Animate en fait, c'est une application qui est disponible sur votre compte Creative Cloud ici, dans la partie basse, dans tous les outils et services Edge, vous avez Edge Animate. Et si vous ne possédez pas de compte Creative Cloud, vous pouvez créer, directement depuis le site d'Adobe, un compte gratuit pour accéder à uniquement Edge Animate ici. Alors qu'est-ce que Adobe Edge Animate ? En fait, c'est une application qui va nous permettre de créer des animations web à base de html, Java Script et CSS 3, de manière très simple et un peu comme dans d'autres types d'applications qui utilisent une timeline. Le plus simple, c'est d'ouvrir un fichier ici, qui a été préparé, voilà, et donc on se retrouve avec une timeline, avec toute une série de calques imbriqués, qui peuvent animer une série de médias. Le plus simple pour voir cette animation, c'est de rembobiner directement et de passer en mode lecture. Donc vous voyez, il y a des animations de fondu enchaînées, des animations d'image en image avec des zooms, des effets spéciaux, etc. Tout est réalisé de manière très simple à partir des CSS et des transitions. Comment intégrer maintenant le résultat des ces animations, au sein d'une page html ? Alors le plus simple, c'est de passer par le menu Fichier ici, Paramètres de publication... Par défaut, Adobe Edge Animate prévoit une exportation pour le web, on va décocher, et on va partir sur un package de déploiement Animate. Ce package, en fait, une sorte de fichier unique qui contient l'intégralité des informations nécessaires, pour pouvoir être utilisé entre les applications de la Creative Cloud. Alors on va enregistrer ce changement de paramètres, on va publier maintenant, voilà. Et donc, on va pouvoir regarder du coté du dossier dans lequel se trouvait notre animation ici, Adobe Edge Animate, un dossier publication a été créé, à l'intérieur Animate package, et ici, slideshow.oam, le fameux fichier d'exportation, le paquetage global avec extension oam a été créé. Rapprochons nous maintenant de Dreamweaver pour utiliser ce fichier oam. Alors on va le placer dans l'intégralité de nos pages ici, juste en partie devant, pour être sûr que mon curseur se trouve bien à l'extérieur de la balise h1, le mieux est de se placer directement dans le balise h1, de la sélectionner ici et avec les flèches du clavier numérique, ici, la flèche gauche notamment, je vais pouvoir me déplacer à l'extérieur de la balise h1, juste ici. Pour l'intégrer, on se rapproche du menu Insertion, dans la partie Médias ici, on a une nouvelle partie qui a été rajoutée dans cette version 12.1 de Dreamweaver ici, qui est la Composition Edge Animate. On pourrait également utiliser la solution alternative qui serait soit de passer par le menu ici, Insertion Média Composition Edge Animate, ou encore, par le raccourci clavier qui apparaît ici, pour pouvoir obtenir le même résultat. Quel que soit le chemin que vous choisissez, la boite de dialogue de sélection pour le paquetage Edge Animate s'ouvre, il ne reste plus qu'à aller le pointer. Voilà, ici, vers ce fichier oam, on va dire OK, et Dreamweaver nous intègre directement un espace réservé avec une petite icône, un petit logo de l'animation Adobe Edge Animate. En sélectionnant cet élément, ici, on s'aperçoit... information importante, c'est que ici, ma largeur et ma hauteur sont une largeur et hauteur par défaut de l'exportation, ici, mon fichier fait en réalité 390 pixels par 260 pixels. En fait, ce que l'outil d'insertion prépare, c'est des sortes de marges de 20 pixels droite, gauche, haut, bas, que l'on va réduire, parce que nous, on n'en a pas l'utilité, on va les gérer avec des CSS, et il faut savoir que par défaut, lors de l'importation, cette marge est prévue pour pouvoir réaliser une meilleure intégration. De même ici, l'identifiant, je peux le renommer, vers slideshow par exemple, plutôt que de garder un Edge ID qui serait purement générique. Voilà, on peut également rajouter ici des feuilles de style, donc, dans les feuilles de style, je vais pouvoir rajouter plusieurs classes, et dans la partie plusieurs classes, je vais pouvoir venir récupérer par exemple, flotaisonDroite ici, voilà, qui va permettre à cette image de venir flotter sur la partie droite. Alors, que se passe-t-il si je passe en mode indirecte directement, un aperçu indirect ? On s'aperçoit qu'il y a une petite barre de chargement qui apparaît, et de suite après, l'ensemble de l'animation s'exécute. Voilà, on voit donc qu'il est très simple de pouvoir intégrer une animation Adobe Edge Animate, au sein d'une page html, rappelons-en les brèves étapes : Une fabrication directement d'animation, au sein d'Adobe Edge Animate. Des paramètres de publication qui prévoient une exportation vers un paquetage de déploiement. Une publication directe qui aurait pu être faite dans la même boite de dialogue. Et puis ensuite, dans Dreamweaver, directement une insertion depuis la palette Médias Composition Edge Animate, afin de pouvoir utiliser cette animation dans notre page. Regardons juste un peu le code qui a été généré à ce sujet, ici, je vais passer en mode Fractionner, voilà. On va s'apercevoir sur la partie de l'élément Edge, qu'on a un object data, avec un dossier edgeanimate_assets qui a été réalisé avec le nom de l'identifiant, slideshow, l'intégralité des assets, et si je regarde du coté de mon animation ici, on se retrouve donc dans la partie edge_animate, qui a été le fichier source dans lequel on est venu chercher le fichier oam, et on se retrouve avec un dossier edgeanimate_assets qui contient tous les assets, tous les éléments nécessaires pour le slideshow ici, avec le fichier de configuration qui va être utilisé. Dreamweaver utilise ce nom de dossier edgeanimate_assets par défaut, et si vous venez depuis le menu Site ici, dans la gestion de sites, voilà, dans les Paramètres avancés, on a un Active Edge Animate, qui est la définition du chemin d'accès directement pour ce site, de tous les actifs nécessaires pour Adobe Edge Animate qui peut être redéfinit à partir d'ici. Voilà, donc je vais les laisser tels quels pour l'instant. Donc on voit qu'il est très simple maintenant depuis la version 12.1 de Dreamweaver, de pouvoir utiliser des animations issues de Adobe Edge Animate.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 2017

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 !