Modèles de publication HTML

  1. Guide de l’utilisateur d’Adobe Animate
  2. Présentation d’Animate
    1. Nouveautés d’Adobe Animate
    2. Glossaire visuel
    3. Configuration requise pour Animate
    4. Raccourcis clavier d’Animate
    5. Utilisation de plusieurs types de fichiers dans Animate
  3. Animation
    1. Principes de base de l’animation dans Animate
    2. Utilisation des images et des images-clés dans Animate
    3. Animation image par image dans Animate
    4. Utilisation d’une animation interpolée classique dans Animate
    5. Outil Pinceau
    6. Guide du mouvement
    7. Interpolation de mouvement et ActionScript 3.0
    8. À propos de l’animation d’une interpolation de mouvement
    9. Animation d’une interpolation de mouvement
    10. Création d’une animation d’interpolation de mouvement
    11. Utilisation des images-clés de propriété
    12. Animation d’une position à l’aide d’une interpolation
    13. Modification des interpolations de mouvement avec l’Éditeur de mouvement
    14. Modification de la trajectoire de mouvement d’une animation d’interpolation
    15. Manipulation d’interpolations de mouvement
    16. Ajout d’accélérations personnalisées
    17. Création et application de présélections de mouvement
    18. Configuration de plages d’interpolation d’une animation
    19. Utilisation d’interpolations de mouvement enregistrées au format XML
    20. Interpolations de mouvement et interpolations classiques : comparatif
    21. Interpolation de forme
    22. Utilisation de l’animation de l’outil de segment dans Animate
    23. Utilisation du squelettage de personnage dans Animate
    24. Utilisation de calques de masque dans Adobe Animate
    25. Utilisation de séquences dans Animate
  4. Interactivité
    1. Création de boutons avec Animate
    2. Conversion de projets Animate en d’autres formats de document
    3. Création et publication de documents HTML5 Canvas dans Animate
    4. Ajout d’interactivité à l’aide de fragments de code dans Animate
    5. Création de composants HTML5 personnalisés
    6. Utilisation de composants dans HTML5 Canvas
    7. Création de composants personnalisés : exemples
    8. Fragments de code des composants personnalisés
    9. Pratiques recommandées – Publicité avec Animate
    10. Création et publication de contenu de réalité virtuelle
  5. Espace de travail et workflow
    1. Création et gestion des pinceaux
    2. Utilisation de polices Google Fonts dans les documents HTML5 Canvas
    3. Utilisation des bibliothèques Creative Cloud et d’Adobe Animate
    4. Utilisation de la scène et du panneau Outils pour Animate
    5. Workflow et espace de travail Animate
    6. Utilisation de polices web dans les documents HTML5 Canvas
    7. Scénarios et ActionScript
    8. Utilisation de plusieurs scénarios
    9. Définition des préférences
    10. Utilisation des panneaux de création Animate
    11. Création de calques de scénario avec Animate
    12. Exportation d’animations pour les applications mobiles et les moteurs de jeu
    13. Déplacement et copie d’objets
    14. Modèles
    15. Recherche et remplacement de contenu dans Animate
    16. Commandes Annuler et Rétablir, et panneau Historique
    17. Raccourcis clavier
    18. Utilisation du scénario dans Animate
    19. Création d’extensions HTML
    20. Options d’optimisation des images et des GIF animés
    21. Paramètres d’exportation des images et des fichiers GIF
    22. Panneau Éléments dans Animate
  6. Multimédia et vidéo
    1. Transformation et combinaison d’objets graphiques dans Animate
    2. Création et utilisation d’instances de symboles dans Animate
    3. Vectorisation de l’image
    4. Utilisation du son dans Adobe Animate
    5. Exportation de fichiers SVG
    6. Création de fichiers vidéo en vue de les utiliser dans Animate
    7. Comment ajouter une vidéo dans Animate
    8. Utilisation des points de repère vidéo
    9. Dessin et création d’objets avec Animate
    10. Remodelage des lignes et des formes
    11. Traits, remplissages et dégradés avec Animate CC
    12. Utilisation d’Adobe Premiere Pro et d’After Effects
    13. Panneaux Couleur dans Animate CC
    14. Ouverture de fichiers Flash CS6 à l’aide d’Animate
    15. Utilisation de texte classique dans Animate
    16. Placement d’illustrations dans Animate
    17. Images bitmap importées dans Animate
    18. Graphiques 3D
    19. Utilisation de symboles dans Animate
    20. Dessin de traits et de formes avec Adobe Animate
    21. Utilisation de bibliothèques dans Animate
    22. Exportation de sons
    23. Sélection d’objets dans Animate CC
    24. Utilisation de fichiers AI d’Illustrator dans Animate
    25. Application de motifs avec l’outil Pinceau pulvérisateur
    26. Application de modes de fusion
    27. Disposition d’objets
    28. Automatisation des tâches à l’aide du menu Commandes
    29. Texte multilingue
    30. Utilisation de la caméra dans Animate
    31. Utilisation d’Animate avec Adobe Scout
    32. Utilisation de fichiers Fireworks
    33. Filtres graphiques
    34. Sons et ActionScript
    35. Préférences de dessin
    36. Dessin avec l’outil Plume
  7. Plateformes
    1. Conversion de projets Animate en d’autres formats de document
    2. Prise en charge des plateformes personnalisées
    3. Création et publication de documents HTML5 Canvas dans Animate
    4. Création et publication d’un document WebGL
    5. Assemblage d’applications AIR pour iOS
    6. Publication d’applications AIR pour Android
    7. Publication pour Adobe AIR for Desktop
    8. Paramètres de publication d’ActionScript
    9. Pratiques recommandées – Organisation du code ActionScript dans une application
    10. Utilisation d’ActionScript avec Animate
    11. Pratiques recommandées – Recommandations sur l’accessibilité
    12. Accessibilité dans l’espace de travail Animate
    13. Écriture et gestion des scripts
    14. Activation de la prise en charge des plateformes personnalisées
    15. Présentation de la prise en charge des plateformes personnalisées
    16. Création de contenu accessible
    17. Utilisation du plug-in de prise en charge des plateformes personnalisées
    18. Débogage du code ActionScript 3.0
    19. Activation de la prise en charge des plateformes personnalisées
  8. Exportation et publication
    1. Exportation de fichiers d’Animate CC
    2. Publication OAM
    3. Exportation de fichiers SVG
    4. Exportation d’images et de vidéos avec Animate
    5. Publication de documents AS3
    6. Exportation d’animations pour les applications mobiles et les moteurs de jeu
    7. Exportation de sons
    8. Exportation de fichiers vidéo QuickTime
    9. Contrôle de la lecture vidéo externe à l’aide d’ActionScript
    10. Pratiques recommandées – Conseils pour la création de contenu pour appareils mobiles
    11. Pratiques recommandées – Conventions des vidéos
    12. Pratiques recommandées – Recommandations sur la création d’applications SWF
    13. Pratiques recommandées – Structuration des fichiers FLA
    14. Pratiques recommandées d’optimisation des fichiers FLA pour Animate
    15. Paramètres de publication d’ActionScript
    16. Spécification des paramètres de publication pour Animate
    17. Exportation de fichiers de projection
    18. Exportation d’images et de GIF animés
    19. Modèles de publication HTML
    20. Utilisation d’Adobe Premiere Pro et d’After Effects
    21. Partage et publication rapides de vos animations

À propos des modèles de publication HTML

Un modèle HTML Animate est un fichier qui contient à la fois un code HTML statique et un code de modèle flexible composé d’un type spécial de variables (lesquelles sont différentes des variables ActionScript). Lorsque vous publiez un fichier SWF, Animate remplace ces variables par celles que vous sélectionnez dans l’onglet HTML de la boîte de dialogue Paramètres de publication, et produit une page HTML dans laquelle votre fichier SWF est intégré.

Animate comprend plusieurs modèles, adaptés aux besoins de la plupart des utilisateurs, qui vous dispensent de la création manuelle d’une page HTML qui affiche le fichier SWF. Par exemple, le modèle Animate uniquement permet de tester rapidement vos fichiers dans un navigateur. Il insère simplement un fichier SWF dans la page HTML générée, de sorte que les utilisateurs puissent l’afficher dans un navigateur Web, Flash Player étant installé.

Vous pouvez utiliser le même modèle et changer les paramètres pour publier une nouvelle page HTML. Vous pouvez créer des modèles personnalisés à l’aide de n’importe quel éditeur HTML. La création d’un modèle est identique à la création d’une page HTML standard, excepté que vous remplacez des valeurs spécifiques appartenant à un fichier SWF par des variables qui commencent par le signe dollar ($).

Les modèles HTML Animate présentent les caractéristiques suivantes :

  • Un titre sur une seule ligne, apparaissant dans le menu contextuel Modèle de l’onglet HTML de la boîte de dialogue Paramètres de publication.

  • Une description plus longue, qui apparaît lorsque vous cliquez sur le bouton Infos de l’onglet HTML de la boîte de dialogue Paramètres de publication.

  • Des variables de modèle commençant par le signe dollar ($) et indiquant où la substitution des valeurs de paramètres doit avoir lieu lorsque Animate génère le fichier de sortie.

    Remarque : Utilisez une barre oblique inverse et un signe dollar (\$) si vous devez utiliser le signe $ à d’autres fins dans le document.

  • Les balises HTML object et embed qui respectent les standards de Microsoft Internet Explorer et Netscape® Communicator® ou Navigator®, respectivement. Pour afficher correctement un fichier SWF dans une page HTML, vous devez respecter ces standards de balise. Internet Explorer utilise la balise HTML object pour ouvrir un fichier SWF ; Netscape utilise la balise embed.

Personnalisation des modèles de publication HTML

Modifiez les variables de modèle HTML pour créer une image référence, un rapport de texte ou d’URL ou pour insérer des valeurs personnalisées pour les paramètres de balises HTML Animate object et embed les plus courants (pour les navigateurs qui utilisent les contrôles ActiveX et les plug-ins, respectivement).

Les modèles Animate peuvent inclure tout contenu HTML pour votre application ou même du code pour des interpréteurs spéciaux comme ColdFusion et ASP.

  1. Dans un éditeur HTML, ouvrez le modèle HTML Animate que vous souhaitez modifier. Ces modèles se trouvent aux emplacements suivants :

    • Sous Windows XP ou Vista, naviguez jusqu’à lecteur de démarrage\Documents and Settings\utilisateur\Local Settings\Application Data\Adobe\Flash CS5\langue\Configuration\HTML\. Le dossier Application Data est généralement masqué. Il peut être nécessaire de modifier les paramètres de l’Explorateur Windows pour afficher ce dossier.

    • Macintosh OS X 10.3 (ou version ultérieure) : Macintosh HD//Applications/Adobe Flash CS5/langueFirst Run/HTML.

      Le lecteur de démarrage est le lecteur à partir duquel le système d’exploitation Windows démarre (généralement, C:). L’utilisateur est le nom d’utilisateur de la personne connectée au système d’exploitation Windows. La langue est définie sur un nom de langue abrégé. Par exemple, aux États-Unis, langue est définie sur « en » pour English.

  2. Modifiez le modèle.
  3. Enregistrez le modèle dans le dossier à partir duquel vous l’avez recouvré.
  4. Pour appliquer les paramètres du modèle à votre fichier SWF, choisissez Fichier > Paramètres de publication, cliquez sur l’onglet HTML et sélectionnez le modèle que vous avez modifié. Animate ne change que les variables du modèle dans le modèle sélectionné.

  5. Sélectionnez les autres paramètres de publication, puis cliquez sur OK.

Variables des modèles HTML

Le tableau suivant répertorie les variables de modèle reconnues par Animate :

Attribut/paramètre

Variable du modèle

Titre de modèle

$TT

Début de la description du modèle

$DS

Fin de la description du modèle

$DF

Titre (fichier SWF) Animate

$T1

Titre (fichier SWF) Animate pour les métadonnées de moteur de recherche

$TL

Description pour les métadonnées des moteurs de recherche

$DC

Chaîne XML de métadonnées pour les moteurs de recherche

$MD

Épaisseur

$WT

Hauteur

$HT

Animation

$MO

Alignement HTML

$HA

Boucle

$LO

Paramètres pour object

$PO

Paramètres pour embed

$PE

Lire

$PL

Qualité

$QU

Échelle

$SC

Salign

$SA

Wmode

$WM

Devicefont

$DE

Bgcolor

$BG

Texte de l’animation (réservé à l’écriture du texte de l’animation)

$MT

URL de l’animation (URL de l’emplacement du fichier SWF)

$MU

Largeur d’image (type d’image non spécifié)

$IW

Hauteur d’image (type d’image non spécifié)

$IH

Nom du fichier image (type d’image non spécifié)

$IS

Nom de la carte image

$IU

Emplacement de la balise de carte image

$IM

Largeur QuickTime

$QW

Hauteur

$QH

Nom de fichier QuickTime

$QN

Largeur GIF

$GW

Hauteur GIF

$GH

Nom de fichier GIF

$GN

Largeur JPEG

$JW

Hauteur JPEG

$JH

Nom de fichier JPEG

$JN

Largeur PNG

$PW

Hauteur PNG

$PH

Nom de fichier PNG

$PN

Utilisation des variables de modèle abrégées

Les variables de modèle $PO (pour les balises object) et $PE (pour les balises embed) sont des éléments abrégés utiles. Chaque variable oblige Animate à insérer dans un modèle toutes les valeurs (sauf celles par défaut) de certains des paramètres object et embed les plus courants, dont PLAY ($PL), QUALITY ($QU), SCALE ($SC), SALIGN ($SA), WMODE ($WM), DEVICEFONT ($DE) et BGCOLOR ($BG).

Exemple de modèle HTML

Voici un fichier de modèle Default.HTML d’Animate qui comporte un certain nombre de variables parmi les plus souvent utilisées :

$TTFlash Only 
$DS 
Display Adobe SWF file in HTML. 
$DF 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
$CS 
<title>$TI</title> 
</head> 
<body bgcolor="$BG"> 
<!--url's used in the movie--> 
$MU 
<!--text used in the movie--> 
$MT 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="$WI" height="$HE" id="$TI" align="$HA"> 
<param name="allowScriptAccess" value="sameDomain" /> 
$PO 
<embed $PEwidth="$WI" height="$HE" name="$TI" align="$HA" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /> 
</object> 
</body> 
</html>

Création d’une carte image à substituer à un fichier SWF

Animate peut créer une image référence pour afficher toutes les images et conserver la fonction des boutons pointant vers des URL. Lorsqu’un modèle HTML comprend la variable de modèle $IM, Animate insère le code de l’image référence. La variable $IU identifie le nom du fichier GIF, JPEG ou PNG.

  1. Dans votre document, sélectionnez l’image-clé à utiliser pour la carte image et attribuez-lui l’étiquette #Map dans l’Inspecteur des propriétés des cadres (Fenêtre > Propriétés). Vous pouvez utiliser toute image-clé possédant des boutons auxquels sont associés des actions getURL ActionScript 1.0 ou 2.0.

    Si vous ne créez pas d’étiquette d’image, Animate crée une image référence à l’aide des boutons de la dernière image du fichier SWF. Cette option crée une carte image intégrée et non pas un fichier SWF intégré.

  2. Pour sélectionner plusieurs pages dans la carte du site, procédez de l’une des manières suivantes :
    • Pour les fichiers PNG ou GIF, étiquetez l’image pour qu’elle apparaisse comme #Static.

    • Pour les fichiers JPEG, lors de la publication, placez la tête de lecture sur l’image à utiliser.

  3. Dans un éditeur HTML, ouvrez le modèle HTML que vous souhaitez modifier.
  4. Enregistrez votre modèle.
  5. Choisissez Fichier > Paramètres de publication, cliquez sur Format et sélectionnez un format pour la carte image, puis cliquez sur OK.

    Par exemple, insérez le code suivant dans un modèle :

    $IM 
    <img src=$IS usemap=$IU width=$IW height=$IH BORDER=0>

    Ceci peut produire le code source suivant dans le document HTML créé à l’aide de la commande Publier :

    <map name="mymovie"> 
    <area coords="130,116,214,182" href="http://www.adobe.com"> 
    </map> 
    <img src="mymovie.gif" usemap="#mymovie" width=550 height=400 border=0>

Création de rapports texte et URL

Avec la variable de modèle $MT, Animate insère tout le texte du fichier SWF en cours en tant que commentaire dans le code HTML. Vous pouvez ainsi indexer le contenu d’un fichier SWF et le rendre accessible aux moteurs de recherche.

La variable de modèle $MU entraîne la génération par Animate de la liste des URL auxquelles les actions du fichier SWF en cours font référence et l’insertion de la liste à l’emplacement courant en tant que commentaire. Les outils de vérification de liens peuvent ainsi visualiser et contrôler les liens du fichier SWF.

Intégration des métadonnées de recherche

Les variables type, $TL (titre de fichier SWF) et $DC (métadonnées de description), permettent d’inclure des métadonnées de recherche dans votre code HTML. Ceci est particulièrement utile pour rendre le fichier SWF plus accessible aux moteurs de recherche et obtenir des résultats significatifs. Vous pouvez utiliser la variable de modèle $MD pour inclure les métadonnées de recherche sous forme de chaîne XML.

Autres ressources similaires

Logo Adobe

Accéder à votre compte