DSPP

Dossier de synthèse professionnel

MARTIN Fabien

Création EA

Création d'une animation interactive


Edge Animate CC





Présentation
Adobe Edge Animate est un logiciel qui permet de créer des animations interactives basées sur les standards du web tels que HTML5, CSS3 et JavaScript, sans être obligé de coder.
Ces animations riches fonctionnent sur les navigateurs récents, et notamment sur les tablettes et les Smartphones.
Création, modification, réutilisation, typographie, animation et interactivité sont les mots d'ordres de ce logiciel fabuleux.

J'ai tenté de mettre en place un lecteur vidéos "adaptatif" et interactif que vous pourrez tester dans la partie animation After Effect (AE) ICI en utilisant donc :EDGE
Je dis adaptatif car je suis en plein apprentissage de ce logiciel, et pour le moment
j'utilises des valeurs et des positions en "absolute" et en pourcentage,
c'est-à-dire que chacuns des éléments sont redimentionnés en fonction de leur parent.
Ici ce sera le "STAGE" la Scène ou encore le Body en language html.
Le responsive est plus complexe que ça, puisque le contenu même peut être différent en fonction du support.
En codage, j'utiliserai volontier du css avec les @media screen min et max width par exemple .
Mais sur edge ... c'est une autre histoire.

Par où commencer ?




Et bien qui dit interactif dit objects, justement pour interagir.
Adobe Illustrator est parfait pour ce genre de travail puisque j'ai besoin de plusieurs boutons, un Play, un Pause, un Stop, mais également d'un bouton pour basculer en plein écran, et pour finir, un bouton pour couper ou activer le son de la vidéo qui sera intégrée.

Mais ceci ne concerne que la lecture, en effet il faut bien un autre bouton pour lancer l'animation et faire apparaitre le lecteur et un autre pour renverser l'animation .
Je m'expliques, je ne me suis pas contenté de créer le lecteur, j'avais pour objectif de créer une animation simple qui puisse faire apparaitre le cadre et les décors de ce lecteur.
Le résultat est a la fin, je laisse tout de même un lien pour y aller directement.




En allant plus loin, je pourrai rajouter des boutons de navigation pour basculer (switcher) entre plusieurs vidéos.
Ici je vous ai intégré la création de démonstration avec le speedart d'After effect.

Ci-dessous quelques illustration concernant illustrator:




Le bouton play



bouton play

+Cliquez sur l'image



Le bouton stop



osaka refonte

+Cliquez sur l'image



Le Hp pour le son



bouton hp son

+Cliquez sur l'image



Le bouton pause



pause

+Cliquez sur l'image




Pour créer ces éléments, j'ai utilisé l'outil création de formes.
C'est un assemblage de formes géométriques et de couleurs, de superposition d'éléments. Ensuite l'outil plume permet de diviser d'avantage les calques et donc si l'on veut, modifier sa forme a volonté.

J'ai lu dans un article sur le blog de l'agence lunaweb une explication claire net et précise, je site:

"puisque une image vectorielle est définie par ses contours et non par sa matière, elle est virtuellement d’une taille infinie"


Dans Edge animate





Les références


Je dois avouer que j'ai suivi bon nombre de tutoriels et lu pas mal d'articles car comme tous les produits Adobe, il faut du temps pour pouvoir les dompter.
Je vais encore faire référence à un site dont le modérateur est un passionné et très à l'écoute:

Mosaika.fr un site que je recommande vivement à tous ceux qui veulent apprendre.






Création d'un nouveau projet





Edge animate fonctionne de la même façon que Adobe After effect au niveau des animation. un système de clés de mouvements, on créer des formes ou on importe des objects, images etc..
Je passerai cette étape, je vais juste préciser qu'il ya plusieurs façon de procéder pour ajouter de l'interactivité.
En effet, losque nous avon créer une forme et que nous l'avons animé, il est possible de la transformer en symbole.
Les symboles Edge Animate permettent d'encapsuler les différents éléments de l'animation.
L'encapsulation des objets Edge Animate permet de réaliser des animations qui contiennent d'autres animations.
Voila une procédure simple pour démarrer une animation:

Créer Nouveau puis choix de la taille de la scène dans le panneau propriétés (photo ci-dessous).
On enregistre notre projet dans un dossier précis.

Edge à créé dans ce dossier différents fichiers.




Par un clic sur bouton + des Images du panneau Bibliothèque (ou par un cliquer/Glisser).
Vous pouvez supprimer de la scène Animate tous les objets (ils sont conservé dans la bibliothèque).








Une fois l'animation en place dans edge animate (cf ci-dessous), il va falloir lancer l'animation pouyr pouvoir faire apparaitre les fonctions du lecteur. Le logiciel est bien fait, car des pré-script existent dans les option d'action. On sélectionne son premier bouton et on le transfome en symbole (objet) qui permet de pouvoir l'appeler plusieur fois sans pour autant le recharger. on clic ensuite sur le panneau action pour lui assigner une fonction Javascript puisque edge premet d'utiliser des script, du HTML et du CSS3.



En sélectionnant action de l'élément, nous avont accès à des fonctions..
On choisi tout d'abord le type d'interaction:
clic
double clic
mouseover etc...

Une fois la fonction choisie, il va falloir lui donner un certain nombre de paramètres: lecture
liens
texte
afficher/masquer
et bien d'autres
Dans mon cas avec ce bouton j'ai besoin de lire l'animation complète:
donc je clic sur lecture/lire/stage -->

ATTENTION EN CLIQUANT SUR STAGE J'AI UN AUTRE SYMBOLE QUI APPARAIT,
c'est ma vidéo et je ne veux pas lancer celle-ci avec ce boutton,
je souhaite juste activer la lecture de l'animation, c'est pourquoi je double clic sur STAGE

les fonction JS s'inscrivent alors dans l'éditeur de edge:

function(sym, e)
sym.play();

la première fonction est la générale, en fait c'est comme l'ouverture des paramètres: en Jquerry par exemple j'aurai ecris:

$(function(){

ici fontions que je souhaites déclarer.

)};







Testons
CTRL+Touche Retour









La procédure pour chaque élément est la même, ceci dit, pour la vidéo c'est-à-dire :
play/stop/pause
les fonction changent..
je remets quelques screenshots pour imager la procédure et ensuite je passerai a la publication.














Pour la vidéo il a fallu que je la transforme en symbol:


Clic droit transformer en symbol et le nommer, ici je l'ai nommé "film1".

La lecture ne passe pas par la fonction lecture mais dans l'option
/vidéo/lire la vidéo/stage/film1/"nom de ma vidéo/.
Pour le reste également avec des paramètre différent.
Passons donc à la publication.





La publication



Il est temps de passer a la publication, j'enregistre au préalable mon projet dans le dossier prévu au début de la session de travail, il est important de donner des noms cohérents à chaque éléments. Ensuite je clic sur fichier et publier. plusieurs fichier sont crées dans le dossier de publication,
edge_include, images, médias, un fichier html et un fichier javascript.
Regardons ce qui il y a dans le fichier HTML:
dans le edge_include:
edge.6.0.0.min.js
Il rassemble toutes les fonctions de edge animate
"nom du projet.js
Il rassemble les fonctions de l'animation-projet.




htmledge





Pour réaliser l'intégration de cette animation, il suffit une fois publiée, de placer tous les fichiers javascipt à la racine du site et de copier / coller la DIV générée a l'endroit on on le souhaite, puis de faire de même avec le script de run time, dans le header du site .

Le tour est joué..
A chaque intégration de la même animation il va falloir changer l'id du projet et de re-publier dans EDGE et un nouveau dossier..

Il est possible aussi de definir des fonctions ou de modifier le JS et HTML crée par Edge animate.




En conclusion



Pour ce projet, j'ai travaillé seul avec l'aide de tuto et suite à des discussions sur des forums comme GrafikArt, CodePen et bien d'autres.
Je fais beaucoup d'essais, pratiquement tous les jours.
je fais également de la vidéo ce qui me permet aussi de faire des intégrations dans les vidéos en passant par after effect et Sony vegas pro 13.





Wordpress

Wordpress

Service

WHAT WE DO BEST

Applications
Applications

Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.

Productions
Productions

Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.

Web Designing
Web Designing

Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.

CHOSSE YOUR PLAN

Basic

$19/Month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
learn more

Business

$29/Month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
learn more

Premium

$39/Month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
learn more

Ultimate

$49/Month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
learn more

OUR VALUABLE CLIENTS

contact

COME IN TOUCH

House -3, Road-2, Block - F,
Akhalia Ghat R/A, Sylhet.
hello@boots4.com
+880 12345 - 67890