Comment insérer une animation Adobe Edge sur mon site ?

[tforand]

Bonjour,

Je viens de découvrir Adobe Edge pour créer des animation en HTML5, mieux supporté que Flash sur certains supports et je souhaiterais savoir comment insérer une animation Edge dans un article ou un module sous Joomla 2.5.6 ?
Où trouver un tuto détaillé pour cette procédure.
J'ai entendu parler du composant "Jumi", mais comment cela fonctionne-t-il avec Edge ?

Un grand merci.

[porcini]

Re : Comment insérer une animation Adobe Edge sur mon site ?

Hello,
je dois dire que le sujet m'intéresse aussi, étrange que personne n'y ai encore répondu.
Je ne me suis pas encore penché dessus, mais je ne vais pas tarder, en attendant tu peux t'inspirer sur le tuto qui a été édité pour Hype (équivalent à Adobe Edge mais que pour Mac ), certes pour Joomla 1.5 mais le principe reste le même pour Joomla 2.5.
Reste à voir si on arrive à intégrer les différents fichiers que Edge génère aussi facilement qu'il est possible de le faire avec Hype... à suivre.
Si quelqu'un d'autre s'y est déjà frotté je suis preneur

[porcini]

Re : Comment insérer une animation Adobe Edge sur mon site ?

... personne ne s'intéresse à l'intégration d'animations en html5 dans Joomla?

[zepelin57]

Re : Comment insérer une animation Adobe Edge sur mon site ?

Bonsoir,

Avez-vous essayé cette solution ?

[porcini]

Re : Comment insérer une animation Adobe Edge sur mon site ?

Bonjour et merci pour l’intérêt à ce message…
pour être honnête je n’ai essayé encore aucune solution, j’espérais trouver des retours d’expérience avant de me lancer dans le cambouis, mais je m’aperçois que la technique n’a pas été encore adoptée par les Joomla users…
Au fait, au lieu de passer par un <iFrame> j’aurais voulu intégrer directement le fichier .js dans l’arborescence du site, je vais m’y pencher dès que j’ai deux minutes de temps. Ayant déjà touché à Edge il me semble que l’intégration de l’animation est plus laborieuse qu’avec Hype… mais bon ce n’est qu’une première impression.
Si quelqu’un a déjà fait la manipulation merci de partager son savoir-faire...

[porcini]

Re : Comment insérer une animation Adobe Edge sur mon site ?

Bonjour,

je reviens sur ce post après avoir tenté la solution proposée dans le lien de zepelin57 et je confirme que la méthode en passant par un <iframe> est un jeu d’enfant, cela semble fonctionner assez bien par contre j’ai quelques doutes sur cette balise qui est dépassée et qu’on n’arrête pas de diaboliser, il y a des avis opposés quant à l’utilisation de celle-ci, si quelqu’un à envie de dire la sienne; en tout cas il est un fait que cette méthode évite de passer par la deuxième solution qui est proposée dans le lien et qui consiste à intégrer la panoplie de fichiers que Edge génère au moment de la publication de l'animation.

J’ai essayé de m’y attaquer, mais ça été peine perdue, je n’ai pas réussi à intégrer l’animation, pourtant j’y ai passé quasi toute la journée et je pensais être à deux doigts d'y réussir… je pense que la nouvelle version d’Edge a quelque peu changé et je n’ai pas retrouvé tous les fichiers qui y sont listés, de plus cela reste assez flou sur où placer les fichiers, si c'est à la racine du site ou à la racine du template et comment utiliser les liens relatifs et absolus par rapport aux fichiers, dommage.

J'ai pu m'apercevoir qu'Adobe Edge à une option d’exportation en format .oam qui permet d'encapsuler tous les fichiers (html, css et js) de l'animation, fort pratique pour l'intégration dans d'autres projets, si j'ai bien compris pour le moment cela reste une extension réservée aux applications Adobe.
J'ai pu trouver une vidéo où Drupal est sur le point de l'intégrer dans son flux de travail? Je ne sais pas si j'ai tout bien compris, mais en tout cas cela ouvre pas mal de portes a l'intégration d'animations et d'interactivités complexes au sein d'un CMS.
Au fait, où en est Joomla à ce sujet?
Personnellement je n'ai rien trouvé, le peu de sujets que j'ai pu trouver sur les forums traitant cet argument sont restés lettre morte…
Si quelqu'un à envie de se prendre un peu la tête sur comment intégrer une animation Edge sans passer par la balise <iframe> je pense que cela rendrait une faveur à pas mal de monde, voici un lien où l'on peut télécharger un projet Edge, la prise en main d'Edge est vraiment très conviviale et presque amusante, il y a une version démo à cette adresse… voilà voilà… merci

[porcini]

Re : Comment insérer une animation Adobe Edge sur mon site ?

...bon ben j’ai une bonne nouvelle, ça marche j’avais un peu cafouillé avec l’arborescence des dossiers.

Je vais essayer d’être bref et clair, voici la procédure à suivre.

Tout d’abord installer le plug-in Sourcerer de NoNumber qui va permettre d’insérer le script dans la balise <head> de notre article. Pour rappel Joomla ne permet pas de le faire nativement.

Ensuite une fois que notre animation est publiée avec Edge, il suffit de prendre l’entièreté du dossier et le placer à la racine du site (et non à la racine de notre template).
Voici à quoi ressemble un dossier Edge publié:




Le fichier html généré peut être mis à la poubelle, car on ira le coller en partie dans un article Joomla.



Voici à quoi ressemble le fichier html généré par Edge, rien de bien compliqué:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	<title>Untitled</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="nom-du-projet_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-124939132 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->

</head>
<body style="margin:0;padding:0;">
	<div id="Stage" class="EDGE-124939132">
	</div>
</body>
</html>

Il nous suffit de copier les balises <script> et <style> et d’aller les coller dans l’entête de notre article entre les balises {source}{/source} grâce au plug-in Sourcerer installé préalablement.

Petite remarque: l'adresse du script doit avoir un lien absolu, ce qui nous donnera une adresse du style:

<script type="text/javascript" charset="utf-8" src="http://www.votre-site.com/projet-edge/nom-du-projet_edgePreload.js"></script>

Autre chose importante: afin que JCE ne rende pas les liens absolus en liens relatifs il faut décocher la validation HTML dans JCE Administration/Panneau de contrôle/Configuration globale



Ensuite il ne faut pas oublier d'aller copier la balise

<div><div id="Stage" class="EDGE-124939132"></div>

dans le corps de notre article. Pour cela il est nécessaire de passer en mode code dans l'interface de JCE.

Les deux autres fichiers qui doivent être édités sont les suivants:
nom-du-projet_edge.js
nom-du-projet_edgePreload.js

Bon là ça va être un peu compliqué pour les afficher puisqu'ils sont minifiés (pour ceux qui ne le savent pas, minifier = supprimer tous les espaces et sauts de lignes superflus qui sont autant de données inutiles que l’on télécharge), pour cela il existe un service sur le web pour les déminifier http://jsbeautifier.org, il suffit de coller le code et d'appuyer sur le bouton prévu à cet effet pour déminifier.
Dans le sens inverse c'est ici:http://www.jsmini.com


Concernant le fichier nom-du-projet_edge.js on cherche la variable

var im = image/

et on la remplace avec l'adresse absolue du dossier image qui se trouve dans le dossier du projet Edge, on a donc ceci:

var im = 'http://www.votre-site.com/projet-edge/images/';

On enregistre est c'est fait.
Vous pouvez ne pas passer par une déminification, mais alors il faudra vous procurer des lunettes...

Concernant le fichier nom-du-projet_edge.js les lignes à changer se trouvent à la fin du charabia, vous pouvez ici aussi passer ou non par une deminification.

On cherche les lignes suivantes:

aLoader = [{
        load: "edge_includes/jquery-1.7.1.min.js"
    }, {
        load: "edge_includes/edge.2.0.0.min.js"
    }, {
        load: "nom-du-projet_edge.js"
    }, {
        load: "nom-du-projet_edgeActions.js"
    }];

et on les remplace comme auparavant avec les liens absolus de notre dossier du projet Edge qui se trouve à la racine de notre site, ce qui donne ceci:

aLoader = [{
        load: "http://www.votre-site.com/projet-edge/edge_includes/jquery-1.7.1.min.js"
    }, {
        load: "http://www.votre-site.com/projet-edge/edge_includes/edge.2.0.0.min.js"
    }, {
        load: "http://www.votre-site.com/projet-edge/nom-du-projet_edge.js"
    }, {
        load: "http://www.votre-site.com/projet-edge/nom-du-projet_edgeActions.js"
    }];

Concernant la méthode avec l'iframe, il n'y a rien de bien compliqué, on place le dossier du projet Edge à la racine du site comme on l'a fait auparavant et on place la balise <iframe> dans notre article Joomla, ici pas besoin de lien absolu:

<iframe src="projet-test-animate-oiseaux-web/this_is_responsive.html" width="100%" height="400px" frameborder="0" scrolling="no"></iframe>

... voilà, voilou, j'espère que cela sera utile à la communauté Joomla

[ghazal]

Re : Comment insérer une animation Adobe Edge sur mon site ?

Salut,
j'ai un peu planché sur la question dans le WE parce que je trouvais le challenge intéressant, et j'ai concocté un module qui à l'air de fonctionner.
J'ai atteint absolument les mêmes conclusions que dans le post précédent sur la nécessité du chemin/path absolu.

J'ai juste une question :
dans l'exemple de la version démo, il y a deux dossiers, "Animate project" et "HTML".
Quand on travaille sur un projet via Edge Animate, est-ce que ces deux dossiers dont bien générés ? Ou au moins "HTML" ?
La raison de ma question est que "Animate project" et "HTML" comportent des fichiers JS différents.
Les fichiers JS de"Animate project" sont difficilement adaptables.
Les fichiers JS de"HTML" sont OK.

Je publie le module dans la journée.

[porcini]

Re : Comment insérer une animation Adobe Edge sur mon site ?

Salut,
… quelle réactivité, cela fait plaisir de voir que ça bouge, je ne peux que t’encourager et te remercier de cette initiative.
Au fait les deux dossiers sont les mêmes à une différence près, c’est que le dossier "Animate project" contient en plus le fichier nom-du-projet.an qui est celui qui est utilisé par l’application Adobe Edge, maintenant je n’ai pas été jusqu’à comparer le code des fichiers .js, mais si tu enregistres à nouveau le projet dans un autre dossier et par la suite tu le publies à nouveau dans un autre dossier tu verras qu’il recrée exactement les mêmes deux dossiers, c’est juste que pour l’exemple on a donné des noms spécifiques à ces deux dossiers afin de rendre la chose plus compréhensible.
Donc le dossier à utiliser en production est bien le dossier HTML

[ghazal]

Re : Comment insérer une animation Adobe Edge sur mon site ?

Salut,
j'ai développé un module Edge Animate.
A télécharger ici (Cliquer sur le bouton Download ZIP, à droite).

La mise en place peut apparaitre compliquée au départ, mais une fois le principe pigé, ca roule.

[porcini]

Re : Comment insérer une animation Adobe Edge sur mon site ?

Merci Ghazal, tous mes compliments

[duaner]

Re : Comment insérer une animation Adobe Edge sur mon site ?

Euhhh merci Ghazal, mais je n'arrive toujours pas à intégrer mon animation.
J'ai essayé les 2 méthodes proposées avant. Sans succès.
Je suis en local, est-ce un problème?

[ghazal]

Re : Comment insérer une animation Adobe Edge sur mon site ?

Salut,

Je suis en local, est-ce un problème?

Non.
As-tu essayé via mon module ?

Envoie tes fichiers sur Dropbox ou un service de partage de fichiers. Je regarderai.

[duaner]

Re : Comment insérer une animation Adobe Edge sur mon site ?

Bonjour ghazal,

Oui j'ai bien essayé avec ton module. Et aussi la méthode citée plus haut, "manuellement".

Quels fichiers tu voudrais voir? L'ensemble de joomla local?
Merci

[ghazal]

Re : Comment insérer une animation Adobe Edge sur mon site ?

Non, juste les fichiers et images de l'animation.