Bonjour.
Je m'appelle Hemanth Sharma.
Je vais vous parler d'une nouveauté d'Adobe Flash Pro CC : l'exportation et la création de contenu basé sur HTML5 Canvas.
Vous pouvez maintenant créer et publier du contenu HTML5 Canvas natif depuis Flash Pro CC.
Cela signifie qu'en utilisant les outils, les fonctionnalités et le montage qui vous sont familiers, vous pouvez désormais facilement produire du contenu HTML5.
Vous pouvez écrire du code JavaScript natif dans Flash Pro et utiliser toutes ses fonctions de conseil de code et de mise en surbrillance de la syntaxe pour écrire du code JavaScript correct.
Vous pouvez non seulement écrire du nouveau contenu web HTML5 basé sur JavaScript, mais également convertir facilement votre contenu ActionScript existant en document HTML5 Canvas.
Pour vous le démontrer, je vais utiliser un prototype de jeu simple créé en pur ActionScript : Hungry Hero.
Il s'agit d'un contenu de base avec deux écrans et l'interaction initiale nécessaire à un jeu.
Ce fichier FLA a été initialement créé pour publier un fichier SWF.
Il existe deux façons de le convertir en document HTML5 Canvas.
La première consiste à copier tous les calques du fichier FLA original dans un nouveau document HTML5 Canvas ; la seconde à utiliser le script JSFL disponible dans le menu Commandes, qui effectue la copie pour vous.
Je vais utiliser le script JSFL disponible dans le menu Commandes.
Je clique sur l'option Convertir en HTML5 Canvas à partir de formats de document AS3.
Cela crée un nouveau document FLA qui reprend le contenu existant de l'ancien document Flash.
Je peux maintenant l'enregistrer comme un nouveau document.
Une fois le document enregistré, le panneau Propriétés indique « Document HTML5 Canvas ».
De même, la boîte de dialogue Paramètres de publication indique maintenant « JavaScript/HTML ».
Comme vous le voyez sur cet écran, Flash Pro CC utilise une bibliothèque CreateJS Open Source pour prendre en charge le contenu HTML5 Canvas.
Vous pouvez également personnaliser les emplacements des différents dossiers du contenu HTML5 exporté.
Maintenant que mon jeu est converti, lorsque j'ouvre le panneau Actions, vous remarquez que le code ActionScript 3 est commenté.
Je dois maintenant prendre le temps d'écrire un code JavaScript similaire.
Grâce à la bibliothèque CreateJS, il est aussi facile d'écrire en JavaScript qu'en ActionScript 3.
Je commence à écrire le code JavaScript.
Dans la 60e image, je vais utiliser la syntaxe CreateJS et commencer à traduire chaque image : « this.stop » au lieu de « stop ».
J'ajoute un écouteur d'événement pour l'événement « click » des boutons Play et About en écrivant : « this.playBtn.addEventListener ("click", playClick.bind(this)); ».
Je copie cette ligne et je la colle.
Je remplace le nom d'instance par « aboutBtn », puis j'écris : « fl_clickToGoToWebPage ».
Après avoir consacré deux minutes à la traduction du code dans toutes les images, je suis prêt à publier ce jeu.
Sous le menu Contrôle, je choisis l'option Tester.
Et voilà.
Mon jeu s'exécute parfaitement sur le navigateur dans HTML5 Canvas.
Les interactions de la souris que j'ai codées fonctionnent à merveille.
Vous ne consacrerez plus des semaines ni des jours à la migration de votre projet existant, mais seulement quelques heures, voire quelques minutes.
Voyons ce qui se passe en arrière-plan lorsque vous convertissez un document AS3 en document HTML5 Canvas.
Flash Pro CC crée un nouveau document HTML5 Canvas.
Il copie l'ensemble des calques, symboles et éléments de bibliothèque dans le nouveau document HTML5 Canvas.
Il applique ensuite les paramètres par défaut aux fonctions, sous-fonctions ou propriétés de fonction qui ne sont pas prises en charge.
Il crée des fichiers FLA distincts pour chaque scène.
Lorsque vous publiez un document HTML5 Canvas, Flash Pro utilise l'API Canvas et traduit les objets sur la scène en équivalents Canvas.
Lorsque vous convertissez un document AS3 en document HTML5 Canvas, n'oubliez pas de lire les avertissements affichés sur le panneau Sortie.
Ces avertissements vous aident à comprendre les modifications réalisées durant la conversion du contenu.
Si vous revenez à votre système de fichiers, vous verrez le fichier .html qui contient le document HTML5 Canvas.
Vous verrez un fichier .js qui renferme l'ensemble du code CreateJS écrit par Flash Pro CC, ainsi que le code JavaScript que vous avez écrit.
Vous verrez également un dossier d'images contenant toutes les ressources visuelles de votre jeu.
Et enfin, un dossier audio contenant tous vos sons, comme l'indique la boîte de dialogue Paramètres de publication.
Vous pouvez également commencer à créer du contenu HTML5 Canvas à partir de zéro pour tous vos projets en choisissant l'option Nouveau sous le menu Fichier, puis en sélectionnant HTML5 Canvas dans la section Type.
Notez que certaines fonctions Flash ne sont pas prises en charge dans les documents HTML5 Canvas.
En effet, certaines fonctions Flash n'ont pas d'équivalent dans l'API Canvas.
Cela pourra vous affecter lors de la conversion de contenu existant.
Par exemple, si vous copiez des calques ou des symboles de documents Flash AS3 traditionnels dans des documents HTML5 Canvas, le contenu non pris en charge est supprimé ou converti en éléments par défaut pris en charge.
L'espace de travail se transforme pour vous fournir des outils uniquement pris en charge pour le projet sur lequel vous travaillez.
Supposons que vous travailliez sur plusieurs documents et que vous passiez d'un document Flash AS3 à un document HTML5 Canvas.
Un des outils ou options sélectionné n'est pas pris en charge .
Flash Pro CC vous indique que cet outil ou cette option n'est pas pris en charge pour ce type de document.
Les composants ActionScript sont supprimés et le code AS3 est commenté.
Les transformations 3D dans le document AS3 sont supprimées durant la migration vers le document HTML5 Canvas.
Par défaut, le mode de fusion d'incrustations passe à Normal, car il n'est pas pris en charge.
Les lignes en pointillés sont converties par défaut en lignes continues, les vidéos sont supprimées et les documents HTML5 Canvas ne prennent pas en charge les scènes multiples.
Voilà, c'est tout.
J'espère que vous êtes aussi impatient que moi de commencer à créer du contenu HTML5.
Merci de votre attention.
