Prise en main

Prise en main

Rechercher
Flash Professional Guide d'utilisation
S’applique à : Flash Professional

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Création d’une animation interactive à l’aide de l’API d’exécution WebGL   

Ce didacticiel vous explique, de manière détaillée, comment utiliser l’API d’exécution Flash WebGL pour ajouter des fonctions d’interactivité à votre animation. Vous commencerez avec un fichier FLA simple et vous utiliserez l’API pour ajouter des occurrences de MovieClip sur la scène.

  1. Téléchargez le fichier night_webgl.fla et ouvrez-le dans Adobe Flash Professional CC 2014. Comme vous pouvez le constater, le fichier contient une image bitmap d’un ciel nocturne sur la scène.

  2. Testez l’animation en appuyant sur CTRL + Entrée (sous Windows) ou Cmd + Entrée (Mac). Une fenêtre de navigateur affiche l’image bitmap.

  3. Accédez au dossier qui contient le fichier .fla. Vous trouverez les fichiers et dossiers suivants après publication :

    • Le fichier night_webgl.html
    • Le dossier « libs » contenant la bibliothèque JavaScript du moteur d’exécution WebGL
    • Le dossier « assets » contenant les actifs requis pour effectuer le rendu de l’animation

  4. Revenez dans Flash Professional. Le panneau Bibliothèque comprend un clip « Star » contenant une animation d’une étoile avec transparence modulée.  

  5. Dans le panneau Bibliothèque, double-cliquez sur la colonne « liaison » en regard du clip Star et entrez « star ». Cette étape indique le nom de liaison à l’aide duquel des occurrences de ce clip peuvent être créées au moment de l’exécution avec l’API. Elle garantit également la publication de ce clip, même s’il n’est pas utilisé sur la scène.

  6. Ouvrez le fichier HTML et ajoutez ces trois lignes après la ligne contenant la balise . Cette méthode ajoute un bouton au fichier HTML et crée un espace réservé afin d’afficher le nombre d’étoiles créées.





  7. Ajoutez le code suivant après la fonction handleComplete() :

    var count = 0; function onAdd() { var sgf = player.getScenegraphFactory(); var star = sgf.createMovieClipInstance("star"); player.getStage().addChildAt(star, 0); var x = Math.random() * 540; var y = Math.random() * 180; var s = Math.random(); var mat = new flwebgl.geom.Matrix([s, 0, 0, s, x, y]); star.setLocalTransform(mat); count++; document.getElementById("count").innerHTML = count + (count > 1 ? " stars" : "star"); }

    Plusieurs événements se produisent ici :
     

    • Le variable « player » fait référence à une instance du lecteur WebGL et constitue la façade de l’API.
    • Une référence à SceneGraphFactory est obtenue. Elle est utilisée pour créer des occurrences de MovieClip.
    • Des occurrences MovieClip ont été créées à l’aide de la fonction createMovieClipInstance() et en transmettant le nom de la liaison spécifiée dans Flash. 
    • Une référence à la scène (scénario racine) est obtenue à partir du lecteur.
    • La nouvelle occurrence de MovieClip est ajoutée en tant qu’enfant de la scène à l’aide de la fonction addChildAt(). Le fait de transmettre 0 à cette fonction ajoute l’enfant au-dessus de tous les autres enfants de la scène (au-dessus de l’image bitmap).
    • La position et la taille de l’étoile sont définies à l’aide de la classe Matrix. 

  8. Enregistrez les modifications que vous avez apportées au fichier HTML.

  9. Pour empêcher Flash d’écraser les modifications apportées au fichier HTML lors de la publication, désactivez la case à cocher « Remplacer HTML » de la boîte de dialogue Paramètres de publication.

  10. Testez à nouveau l’animation. Cette fois, votre navigateur affiche le bouton Ajouter en-dessous de l’image d’arrière-plan. Cliquez à plusieurs reprises sur Ajouter pour ajouter des étoiles sur la scène.

Remarque :

Vous pouvez télécharger l’échantillon final ici.

Telechargement

Obtenir un fichier
night_webgl.zip
night_webgl

Remarque :

  • Etant donné que vous effectuez le rendu de l’animation WebGL sur une zone de travail dans le fichier HTML, vous êtes libre de modifier le code HTML qui l’entoure. Dans cet exemple, nous comptabilisons le nombre d’étoiles créées.
  • L’exemple ci-dessus a pour but de vous aider à créer des animations et des jeux interactifs. Rendez-vous sur la page Documentation de l’API d’exécution de WebGL pour en savoir plus sur les autres méthodes de contrôle des éléments de la séquence.
  • Lorsque vous publiez du contenu, Flash convertit l’illustration dans un format compatible avec les GPU. Particulièrement gourmande en ressources de calcul, la tâche prend quelques minutes pour s’exécuter. En règle générale, il est conseillé de réduire le nombre de lignes et de courbes de votre illustration. Simplifiez votre illustration en utilisant les options d’optimisation, de lissage et de redressement du menu Modifier > Forme. Vous pouvez ainsi améliorer les performances de rendu et réduire le temps nécessaire à la publication.