Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/41/d573887948/htdocs/agencedigitale/blog/wp-content/themes/avada/includes/class-avada-nav-walker.php on line 339

Intégrer dans Webdev une animation Html5

//Intégrer dans Webdev une animation Html5

Intégrer dans Webdev une animation Html5

Comment intégrer une animation HTML5 générée par Adobe Animate CC dans un composant Web d’une page WEBDEV ?

Ces animations HTML5 créées avec Adobe Animate CC permettent de remplacer les animations Flash de vos sites. En effet, plusieurs navigateurs ne permettent plus l’exécution d’animations Flash.

Pour remplacer les animations Flash de vos sites WEBDEV, vous pouvez donc générer des animations HTML5.
Voyons comment les intégrer dans vos pages WEBDEV : il faut pour cela utiliser le nouveau champ Composant Web. Une fois le champ ajouté à la page, voici les manipulations à réaliser :

1 – Ajoutez les ressources JS externes utilisées par l’animation.

Ces ressources sont référencées par les balises dans la page HTML générée par Animate CC

Dans l’exemple utilisé, il y a deux ressources externes à ajouter dans le champ. C’est dans l’onglet général du champ.

2 – Intégrer les codes HTML et JS contenus dans la page HTML5 générée par Animate CC :
Le code JS à intégrer est compris lui aussi entre les balises mais il ne s’agit plus d’un fichier ou d’un lien http mais directement de code source JS.
Le code HTML à intégrer est le code le page sans balise.

 

3 – Ajouter les appels Javascript réalisés dans l’entête de la page HTML ou directement dans la baliseque nous n’avons pas copiée.
Dans notre exemple, la baliseintègre l’appel à une procédure d’initialisation JS. Il faut donc l’ajouter dans le code d’initialisation du composant Web de la page.
Code

Votre animation est maintenant intégrée à votre page WEBDEV !
Pensez à copier les images utilisées par cette animation dans le répertoire _WEB.

By | 2018-01-04T07:51:43+00:00 janvier 3rd, 2018|Categories: Webdev|Tags: |0 Comments

About the Author:

Leave A Comment

This Is A Custom Widget

This Sliding Bar can be switched on or off in theme options, and can take any widget you throw at it or even fill it with your custom HTML Code. Its perfect for grabbing the attention of your viewers. Choose between 1, 2, 3 or 4 columns, set the background color, widget divider color, activate transparency, a top border or fully disable it on desktop and mobile.

This Is A Custom Widget

This Sliding Bar can be switched on or off in theme options, and can take any widget you throw at it or even fill it with your custom HTML Code. Its perfect for grabbing the attention of your viewers. Choose between 1, 2, 3 or 4 columns, set the background color, widget divider color, activate transparency, a top border or fully disable it on desktop and mobile.