Aide d’Adobe Animate CC · Création et publication de documents HTML5 Canvas dans Animate CC 325 Pinceaux personnalisés 342 Création de boutons avec Animate CC 346

Aide dAdobe Animate CC

Fvrier 2016

Table des matiresNouveauts 1

Liste des nouvelles fonctionnalits 2Plates-formes 16

Utilisez le convertisseur de type de document pour convertir des projets Animate CC en dautres formats de document. 17Publication de contenu Flash sur plusieurs plates-formes 19Prise en charge des plates-formes personnalises 21Cration et publication de documents HTML5 Canvas dans Animate CC 24Cration et publication dun document WebGL 41Assemblage dapplications AIR pour iOS 48Publication dapplications AIR pour Android 54Publication pour Adobe AIR for Desktop 60Paramtres de publication dActionScript 69Pratiques recommandes Organisation du code ActionScript dans une application 77Utilisation dActionScript avec Animate CC 79Pratiques recommandes Recommandations sur laccessibilit 87Accessibilit dans lespace de travail Animate 92Rdaction et gestion des scripts 96Activation de la prise en charge des plates-formes personnalises 110Activation de la prise en charge des plates-formes personnalises 116Rfrence des API de prise en charge des plates-formes personnalises

122Cration de contenu accessible 123Activation de la prise en charge des plates-formes personnalises 137Utilisation du module externe de prise en charge des plates-formes personnalises 142Dbogage du code ActionScript 3.0 145

Espace de travail et workflow 150Utilisation des bibliothques Creative Cloud et dAdobe Animate CC 151Utilisation du panneau Scne et Outils pour Animate 157Flux de travail et espace de travail Animate 165Utilisation de polices web Typekit dans les documents HTML5 Canvas 175Scnarios et ActionScript 180Utilisation de plusieurs scnarios 184Dfinition des prfrences 185

Utilisation des panneaux de cration Animate CC 191Cration de calques de scnario avec Animate CC 197Cration dune feuille Sprite 205Dplacement et copie dobjets 207Synchronisation des prfrences dAnimate avec Creative Cloud 210Utilisation du panneau Adobe Color 215Modles 217Recherche et remplacement de contenu dans Animate 219Commandes Annuler et Rtablir, et panneau Historique 224Raccourcis clavier 227Utilisation du scnario dans Animate 230Cration dextensions HTML 234

Animation et interactivit 237Utilisation de lanimation de loutil de segment dans Animate CC 238Guide danimation 250Utilisation dune animation interpole classique dans Animate CC 254Animation dinterpolations de mouvement 265Modification des interpolations de mouvement avec lditeur de mouvement

287Interpolation de forme 296Utilisation des images et des images-cls dans Animate CC 302Animation image par image dans Animate CC 306Utilisez le convertisseur de type de document pour convertir des projets Animate CC en dautres formats de document. 311Pratiques recommandes Publicit avec Animate CC 313Principes de base de lanimation dans Animate CC 316Ajout dinteractivit laide de fragments de code dans Animate CC 322Cration et publication de documents HTML5 Canvas dans Animate CC

325Pinceaux personnaliss 342Cration de boutons avec Animate CC 346Utilisation de plusieurs scnarios 350Utilisation de squences dans Animate 351Cration et publication dun document WebGL 353Utilisation de calques de masque dans Adobe Animate CC 360

Multimdia et vido 363Exportation de fichiers SVG 364Utilisation du son dans Adobe Animate 367

Cration de fichiers vido en vue de les utiliser dans Animate CC 376Ajout dune vido dans un document Animate 383Utilisation des points de repre vido 391Transformation et combinaison dobjets graphiques dans Animate CC 393Utilisation et cration doccurrences de symboles dans Animate CC 399Dessin et cration dobjets avec Animate CC 406Couleur 413Vrification orthographiqueTraits, remplissages et dgrads avec Animate CC 421Dessin de traits et de formes avec Adobe Animate 429Disposition dobjets 445Automatisation des tches laide du menu Commandes 448Application de motifs avec loutil Pinceau pulvrisateur 450Application de modes de fusion 452Graphiques 3D 455Exportation de sons 463Utilisation de bibliothques dans Animate CC 467Incorporation de polices pour assurer la cohrence de lapparence du texte

473Prfrences de dessin 476Mise lchelle et mise en cache des symboles 478Filtres graphiques 482Partage des ressources de bibliothque dans les fichiers 492Remodelage des lignes et des formes 497Utilisation du panneau Adobe Color 501Utilisation de fichiers Fireworks 503Utilisation dAnimate CC avec Adobe Scout 507Utilisation du texte TLF (Text Layout Framework) 509Utilisation de fichiers AI dIllustrator dans Animate CC 525Utilisation de fichiers InDesign dans Animate 540Utilisation de symboles dans Animate CC 541

Exportation et publication 547Exportation de fichiers dAnimate CC 548Exportation de fichiers SVG 551Exportation dimages et de vidos avec Animate CC 554Publication de documents AS3 560Cration dune feuille Sprite 566Exportation de sons 568

Exportation de fichiers vido QuickTime 572Contrle de la lecture vido externe laide dActionScript 573Pratiques recommandes Conseils pour la cration de contenu pour appareils mobiles 579Pratiques recommandes Conventions des vidos 587Pratiques recommandes Recommandations sur la cration dapplications SWF 589Pratiques recommandes Structuration des fichiers FLA 595Pratiques recommandes doptimisation des fichiers FLA pour Animate CC

598Pratiques recommandes Conventions des comportements 609Paramtres de publication dActionScript 612Dfinition des paramtres de publication pour Animate 620Utilisation dAdobe Premiere Pro et dAfter Effects 642Utilisation dAnimate et de FlashBuilder 645Exportation de fichiers de projection 649Exportation de vidos avec Animate CC 651Modles de publication HTML 654

Nouveauts

1

Liste des nouvelles fonctionnalitsAdobe AnimateCC2015.2 (juin 2016)

Adobe Flash Professional CC se nomme dsormais Adobe Animate CC.

Adobe Animate CC met votre disposition un environnement de cration bassur un scnario pour crer des animations vectorielles, des publicits, ducontenu multimdia, des expriences immersives, des applications, des jeux etbien plus encore. Lapplication offre une prise en charge native pour plusieurssorties, telles que HTML5 Canvas et WebGL. Elle peut, en outre, tre tendueen vue de prendre en charge des formats personnaliss tels que SnapSVG.

Animate offre une telle souplesse au niveau des formats de sortie que vousavez la garantie de pouvoir visualiser votre contenu sur nimporte quel support,sans avoir utiliser de modules externes.

Animate offre galement des outils de dessin et dillustration haut de gamme,ainsi quune troite intgration avec Adobe CreativeSync. Puisque Animate CCfait partie dAdobe Creative Cloud, vous avez accs aux dernires mises jouret aux prochaines versions ds quelles sont disponibles. Dcouvrez-en plus surCreative Cloud.

Lisez plus avant pour obtenir une prsentation rapide des nouvelles fonctions de la dernire mise jourdAnimate CC, ainsi que des liens vers dautres ressources qui fournissent plus dinformations.

Nouveauts et amliorationsAdobe Animate CC 2015.2 | Juin 2016Pinceaux MotifSlecteur dimageTransparence du calqueOptions de publication web optimises

Fusion du code JSON/JSCode JavaScript incorpor au code HTMLPrise en charge dun arrire-plan de travail transparentSortie HTML5 Canvas compatible avec HiDPIMise lchelle ractiveOAM transparents et ractifs Accrochage des bitmap au moment de la crationFichier de prchargement dans le document HTML5 CanvasAmliorations du modle de publication HTML5 CanvasPrise en charge JSAPI pour importer et exporter des modles HTML pour lesdocuments CanvasPublication dlments Canvas dans le dossier racineCentrer la scne

Autres amliorationsPelure doignon colore dfinie par lutilisateurVerrouillage du scriptOptions dimportation PSD avancesOptions dimportation AI avancesPerformances optimises sur la plate-forme Windows

2

http://www.adobe.com/fr/creativecloud.html

Haut de la page

Pinceaux MotifSlecteur dimageTransparence du calqueOptions de publication web optimises

Fusion du code JSON/JSCode JavaScript incorpor au code HTMLPrise en charge dun arrire-plan de travailtransparentSortie HTML5 Canvas compatible avecHiDPIMise lchelle ractiveOAM transparents et ractifs Accrochage des bitmap au moment de lacrationFichier de prchargementAmliorations du modle de publicationHTML5 CanvasPrise en charge JSAPI pour importer etexporter des modles HTML pour lesdocuments CanvasPublication dlments Canvas dans ledossier racineCentrer la scne

Autres amliorationsPelure doignon colore dfinie parlutilisateurVerrouillage du scriptOptions dimportation PSD avancesOptions dimportation AI avancesPerformances optimises sur la plate-formeWindowsAmlioration des interactions de loutilPinceauIntgration de la dernire version deFlash Player et dAIR SDK

Haut de la page

Amlioration des interactions de loutil PinceauIntgration de la dernire version de Flash Player et dAIR SDK

Adobe Animate CC 2015.2 | Juin 2016

La version 2015.2 comprenait de trs intressantes nouvelles fonctions, notamment :

Pinceaux Motif

Nouveauts dans Animate CC 2015.2 | Juin 2016

Dcouvrez comment utiliser les pinceaux Motif pour tracer un motif vectoriel le long du trac et ltirer surtoute sa longueur. Utilisez la bibliothque globale intgre dans Animate pour utiliser les pinceaux artistiqueset de motif. Outre les prslections de pinceau, vous pouvez importer de nouveaux pinceaux de motif dansvotre document Animate laide des bibliothques CC.

3

Haut de la page

Pinceaux Motif

Pour en savoir plus sur cette nouvelle fonctionnalit, voir Pinceaux Motif.

Slecteur dimage


Utilisez le slecteur dimage pour prvisualiser et choisir la premire image dun symbole graphique. Dans lesversions prcdentes, vous ne pouviez pas prvisualiser les images sans modifier le symbole. Cette fonctionamliore lenvironnement dutilisateur qui travaille sur des animations du type Synchronisation des lvres.

4

Slecteur dimage

Haut de la page

Haut de la page

Pour en savoir plus sur cette nouvelle fonctionnalit, voir Slecteur dimage.

Transparence du calque


Animate permet de dfinir la visibilit du calque sur transparent. Pour ce faire, cliquez en appuyant sur latouche Maj sur la colonne il dans le scnario afin de dfinir la visibilit sur transparent.

Transparence du calque

Pour en savoir plus, voir Transparence du calque.

Options de publication web optimises

Fusion du code JSON/JS

5


Animate incorpore le fichier JSON au code JS. Lorsque vous crez une feuille Sprite durant la publication duplan de travail, aucun fichier JSON externe nest cr : il est par dfaut incorpor au code JS.

Ainsi, vous pouvez prvisualiser les fichiers publis localement sans les hberger sur un serveur (commeprcdemment).

Pour en savoir plus sur cette nouvelle fonctionnalit, voir Fusion du code JSON/JS.

Code JavaScript incorpor au code HTML


Animate permet dinclure le fichier JS dans le fichier HTML durant la publication du plan de travail.


Pour en savoir plus sur cette nouvelle fonction, voir Code JavaScript incorpor au code HTML.

Prise en charge dun arrire-plan de travail transparent


Vous souhaitez crer un plan de travail transparent lors de la publication afin dafficher le contenu HTMLsous-jacent ? Vous pouvez maintenant dfinir larrire-plan du plan de travail sur Transparent. Pour ce faire,utilisez loption Alpha % pour dfinir le niveau de transparence et loption de nuancier Aucune couleur pourque le plan de travail soit entirement transparent.

6

Transparence du plan de travail

Pour en savoir plus sur cette nouvelle fonctionnalit, voir Prise en charge dun arrire-plan de travailtransparent.

Sortie HTML5 Canvas compatible avec HiDPI


La sortie gnre par Animate est maintenant compatible avec le format HiDPI et offre un rsultat plus netsur les crans haute rsolution.

Pour en savoir plus sur cette nouvelle fonctionnalit, voir Sortie HTML5 Canvas compatible avec HiDPI.

Mise lchelle ractive


Vous souhaitez crer une animation ractive ? Dcouvrez comment Animate redimensionne la sortie publieen fonction de diffrents facteurs de forme pour fournir une sortie ractive, plus nette et plus prcisecompatible avec le format HiDPI.

7

Mise lchelle ractive

Pour en savoir plus sur cette nouvelle fonctionnalit, voir Mise lchelle ractive.

OAM transparents et ractifs

Vous pouvez maintenant gnrer des OAM transparents et ractifs dans Animate et les incorporerdirectement dans Muse, Captivate et Dreamweaver.

Pour en savoir plus, voir Publication OAM.

Accrochage des bitmap au moment de la cration


Dcouvrez comment accrocher des images bitmap aux pixels les plus proches au moment de leur crationafin quils apparaissent plus nets sur le plan de travail.Dans les versions prcdentes, les images bitmaptaient floues sur le plan de travail et noffraient pas lutilisateur des conditions dutilisation optimales. compter de cette version, lors de la publication dun document HTML Canvas, Animate garantit que lesimages bitmap sont accroches aux pixels les plus proches de sorte quils apparaissent plus nets sur le plande travail.

Pour en savoir plus sur cette nouvelle fonctionnalit, voir Accrochage des bitmap au moment de lacration.

Fichier de prchargement dans le document HTML5 Canvas

8


Le fichier de prchargement est un GIF anim qui saffiche pendant le chargement des scripts et deslments requis pour le rendu dune animation. Une fois les actifs chargs, le fichier de prchargement estmasqu et lanimation relle est affiche.

GIF anim

Pour en savoir plus sur cette nouvelle fonctionnalit, voir Fichier de prchargement dans HTML5 Canvas.

Amliorations du modle de publication HTML5 Canvas


Dcouvrez de quelle faon Animate a modularis le modle HTML5 canvas afin doptimiser lespersonnalisations et de mieux matriser les sorties publies.

Pour en savoir plus sur cette nouvelle fonctionnalit, voir Amliorations du modle de publication HTML5.

Prise en charge JSAPI pour importer et exporter des modles HTML pour lesdocuments Canvas


Utilisez les nouvelles commandes JSAPI qui prennent en charge limportation et lexportation des modlesHTML pour les documents Canvas.

Pour en savoir plus sur cette nouvelle fonctionnalit, voir Prise en charge de JSAPI.

Publication dlments Canvas dans le dossier racine


Utilisez cette fonctionnalit pour publier des lments du plan de travail dans le dossier racine plutt quedans les sous-dossiers.

9

lments publis du plan de travail

Pour en savoir plus sur cette nouvelle fonctionnalit, voir Publication dlments Canvas dans le dossierracine.

Centrer la scne


Amliorez votre environnement en utilisant les diffrentes options dalignement pour afficher le plan de travailau centre de la fentre du navigateur. Slectionnez les options pour centrer la scne sur le plan horizontal,vertical ou les deux.

10

Haut de la page

Centrer la scne

Pour en savoir plus sur cette nouvelle fonctionnalit, voir Centrage de la scne.

Autres amliorations

Pelure doignon colore dfinie par lutilisateur

Amliorations dans Adobe Animate CC 2015.2 | Juin 2016

Utilisez le codage couleur de la pelure doignon pour diffrencier les images passes, prsentes et futures. Latransparence des images en pelure doignon dcrot progressivement mesure que lon sloigne de limageactive.

Pour en savoir plus sur cette fonctionnalit amliore, voir Pelure doignon colore dfinie par lutilisateur.

11

Personnalisation des options de pelure doignon

Verrouillage du script


laide de la fonction Verrouiller le script, pinglez les onglets aux scripts individuels dans le voletActionScript et dplacez-les en consquence. Cette fonction savre utile si vous navez pas centralis lecode du fichier FLA ou si vous utilisez plusieurs scripts. Vous pouvez pingler un script pour conserverlemplacement du code ouvert dans le panneau Actions et permuter entre les scripts ouverts.

Verrouiller le script

Pour en savoir plus sur cette fonctionnalit amliore, voir Verrouillage du script.

Options dimportation PSD avances


Animate peut importer des images fixes dans de nombreux formats. Cependant, vous utilisez gnralementle format natif Photoshop PSD lorsque vous importez des images fixes de Photoshop dans Animate. Lors delimportation dun fichier PSD, Animate prserve nombre des attributs qui ont t appliqus dans Photoshopet fournit des options pour conserver une version fidle de limage.

12

Options dimportation PSD avances

Pour en savoir plus sur cette fonctionnalit amliore, voir Options dimportation PSD avances.

Options dimportation AI avances


Animate permet dimporter des fichiers AI Adobe Illustrator en prservant la plupart des capacits demodification et la fidlit visuelle de votre illustration. Limportateur AI amlior vous garantit galement undegr de contrle accru pour dterminer comment sont imports vos fichiers Illustrator dans Animate etnotamment comment importer des objets spcifiques dans un fichier AI.

13

Options dimportation AI avances

Pour en savoir plus sur cette fonctionnalit amliore, voir Options dimportation AI avances.

Performances optimises sur la plate-forme Windows


Profitez des amliorations des performances pour chacun de vos processus quotidiens : lecture du scnario,modulation du scnario, dessin, panoramique et zoom et transformations et observez vos animations prendrevie.

Amlioration des interactions de loutil Pinceau


Animate amliore les performances et lenvironnement lors de lutilisation de loutil Pinceau. Les amliorationsde performances du pinceau sappliquent aux oprations de transformation des traits de pinceau, tels quunemise lchelle/conversion/rotation, en plus du zoom/panoramique de la scne.

Intgration de la dernire version de Flash Player et dAIR SDK


14

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions lgales | Politique de confidentialit en ligne

Animate prend en charge la dernire version de Flash Player (version 21) et intgre la version 21.0 du SDKAIR.

15

http://creativecommons.org/licenses/by-nc-sa/3.0/http://help.adobe.com/fr_FR/legalnotices/index.htmlhttps://www.adobe.com/go/gffooter_online_privacy_policy_fr

Plates-formes

16

Utilisez le convertisseur de type de document pour convertir desprojets Animate CC en dautres formats de document.

Haut de la page

Conversion dun document Animate dans un autre format de documentConversion dun document Animate laide du convertisseur de type de document

Conversion dun document Animate dans un autre format dedocument

Grce au convertisseur universel de type de document, vous pouvez convertir des projets FLA existants (detout type) en nimporte quel autre type de document tel que HTML5 Canvas, ActionScript/AIR, WebGL ou untype de document personnalis. Lors de la conversion dans un format donn, vous pouvez profiter desfonctions de cration dAnimate pour ce type de document.

Conversion dun document Animate laide du convertisseur de type dedocument

Pour convertir un document Animate dans un autre type de document, procdez comme suit :

1. Ouvrez le document convertir et cliquez sur Commandes > Convertir en dautresformats de document. La bote de dialogue Convertisseur de type de document saffiche.

2. Dans la liste droulante Convertir le document en, slectionnez le type de documentdans lequel convertir le document.

3. Cliquez sur Parcourir pour slectionner le dossier o enregistrer le fichier converti etcliquez ensuite sur OK

Bote de dialogue Convertisseur de type de document

Remarque : Si vous convertissez un document de plusieurs squences en document de typeHTML5 Canvas, toutes les scnes sont enregistres comme des fichiers distincts car le type de documentHTML5 Canvas ne prend pas en charge plusieurs squences. Pour utiliser plusieurs squences dans unmme document, placez chacune delles dans des symboles distincts.

Vous pouvez convertir vos projets Animate existants en un autre format ou rutiliser des lments dunprojet simplement en effectuant un copier-coller des calques et des symboles de la bibliothque.

17



18


Adobe Animate CCPublication de contenu Flash sur plusieurs plates-formesFlash Professional CC permet de crer des animations pour la quasi-totalit des terminaux, navigateurs et plates-formes. Crez et publiez ducontenu en mode natif dans diffrents formats l'aide d'une interface et d'outils que vous connaissez bien. (Regarder, 14 min)

Publication de contenu Flash sur plusieurs plates-formes14 minShow all tutorials Masquer tous les didacticiels

Adobe Flash Professional a t rebaptis Animate CC. Toutes les fonctionnalits prsentes ici sont dsormais disponibles dans Animate.

Publication au format HTML5 Canvas

Flash Professional CC propose un environnement familier pour crer et publier des documents HTML5 Canvas de A Z. Utilisez des standards webouverts pour cibler tous les navigateurs actuels, mme ceux des terminaux mobiles. Pour en savoir plus, suivez le tutoriel Cration et publicationd'un document HTML5 Canvas.

Importation de ressources (1:08) ; Ajout de ressources par copier-coller de calques (1:36) ; Ajout d'actions (2:08) ; Paramtres de publication(3:06)

Publication au format WebGL

WebGL est un standard web ouvert qui profite de l'acclration GPU pour excuter parfaitement votre contenu sur les postes de travail et lesterminaux mobiles. Dcouvrez comment publier directement en WebGL depuis Flash Professional CC. Pour en savoir plus, suivez le tutorielExportation de contenu Flash Professional au format WebGL.

Conversion au format WebGL (1:07) ; Ajout de commandes (2:34) ; Paramtres de publication (3:10) ; Test de l'animation (3:42)

Publication sur des plates-formes personnalises

Flash Professional CC permet dsormais de cibler un nombre illimit de plates-formes grce au nouveau kit SDK de prise en charge des plates-formes personnalises. Dcouvrez l'extension GAF Publisher qui permet de publier des ressources vers Unity3D, Cocos2D et Starling. Pour ensavoir plus, visionnez la vido Publication vers de nouvelles plates-formes au moyen du kit SDK de prise en charge des plates-formespersonnalises.

Ressources de formation sur la prise en charge des plates-formes personnalises (0:56) ; Tlchargement d'extensions (1:19) ; Installation del'extension GAF (1:43) ; Cration d'un document GAF (2:34) ; Ajout de ressources par copier-coller de calques (3:15) ; Paramtres de publication(4:01) ; Prvisualisation de l'animation (4:51)

Complment d'information sur ce sujet

19

http://www.adobe.com/fr/products/animate.htmlhttps://blogs.adobe.com/flashpro/2014/12/17/extend-support-for-new-platforms-using-the-custom-platform-sdk.htmlhttps://blogs.adobe.com/flashpro/2014/12/17/extend-support-for-new-platforms-using-the-custom-platform-sdk.html

Cration et publication d'un document HTML5 CanvasExportation de contenu au format WebGLPublication vers de nouvelles plates-formes au moyen du kit SDK de prise en charge des plates-formes personnalises

Joseph Labrecque

Joseph est ingnieur en chef en logiciels interactifs la University of Denver. Il est spcialis dans la cration de solutions expressives pour lespostes de travail, le web et les terminaux mobiles. Il est aussi propritaire de Fractured Vision Media, LLC, socit de production multimdia, deconseil technique et de distribution de divers travaux de cration. Consultez son site web, The Memoryspiral.

Choisir une autre rgionFrance (Modifier)Choisissez votre rgion

La langue et/ou le contenu du site Adobe.com varient en fonction de la rgion slectionne.

Americas Brasil Canada - English Canada - Franais Latinoamrica Mxico United States Europe, Middle East and Africa Africa -English Belgi Belgique Belgium - English esk republika Cyprus - English Danmark Deutschland Eastern Europe -English Eesti Espaa France Greece - English Hrvatska Ireland Israel - English Italia Latvija Lietuva Luxembourg - Deutsch Luxembourg -English Luxembourg - Franais Magyarorszg Malta - English Middle East and North Africa - English Moyen-Orient et Afrique du Nord -Franais Nederland Norge sterreich Polska Portugal Romnia Schweiz Slovenija Slovensko Srbija Suisse Suomi Sverige Svizzera TrkiyeUnited Kingdom - Asia - Pacific Australia Hong Kong S.A.R. of China India - English NewZealand Southeast Asia (Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam) - English Commonwealth of Independent States Includes Armenia, Azerbaijan, Belarus, Georgia, Kazakhstan, Kyrgyzstan,Moldova, Tajikistan, Turkmenistan, Ukraine, Uzbekistan

Produits Tlchargements Support et formation SocitCopyright 2015 Adobe Systems Software Ireland Ltd. All rights reserved.Politique de confidentialit Conditions d'utilisation Cookies ChoixdePub

20

https://blogs.adobe.com/flashpro/2014/12/17/extend-support-for-new-platforms-using-the-custom-platform-support-sdk/http://idiom-q-win-1/br/http://idiom-q-win-1/ca/http://idiom-q-win-1/ca_fr/http://idiom-q-win-1/la/http://idiom-q-win-1/mx/http://idiom-q-win-1/us/http://idiom-q-win-1/africa/http://idiom-q-win-1/africa/http://idiom-q-win-1/be_nl/http://idiom-q-win-1/be_fr/http://idiom-q-win-1/be_en/http://idiom-q-win-1/cz/http://idiom-q-win-1/eeurope/http://idiom-q-win-1/dk/http://idiom-q-win-1/de/http://idiom-q-win-1/eeurope/http://idiom-q-win-1/eeurope/http://idiom-q-win-1/ee/http://idiom-q-win-1/es/http://idiom-q-win-1/fr/http://idiom-q-win-1/eeurope/http://idiom-q-win-1/hr/http://idiom-q-win-1/ie/http://idiom-q-win-1/il_en/http://idiom-q-win-1/it/http://idiom-q-win-1/lv/http://idiom-q-win-1/lt/http://idiom-q-win-1/lu_de/http://idiom-q-win-1/lu_en/http://idiom-q-win-1/lu_en/http://idiom-q-win-1/lu_fr/http://idiom-q-win-1/hu/http://idiom-q-win-1/eeurope/http://idiom-q-win-1/mena_en/http://idiom-q-win-1/mena_fr/http://idiom-q-win-1/mena_fr/http://idiom-q-win-1/nl/http://idiom-q-win-1/no/http://idiom-q-win-1/at/http://idiom-q-win-1/pl/http://idiom-q-win-1/pt/http://idiom-q-win-1/ro/http://idiom-q-win-1/ch_de/http://idiom-q-win-1/si/http://idiom-q-win-1/sk/http://idiom-q-win-1/rs/http://idiom-q-win-1/ch_fr/http://idiom-q-win-1/fi/http://idiom-q-win-1/se/http://idiom-q-win-1/ch_it/http://idiom-q-win-1/tr/http://idiom-q-win-1/uk/http://idiom-q-win-1/bg/http://idiom-q-win-1/ru/http://idiom-q-win-1/ua/http://idiom-q-win-1/il_he/http://idiom-q-win-1/mena_ar/http://idiom-q-win-1/au/http://idiom-q-win-1/hk_en/http://idiom-q-win-1/in/http://idiom-q-win-1/nz/http://idiom-q-win-1/nz/http://idiom-q-win-1/sea/http://idiom-q-win-1/cn/http://idiom-q-win-1/hk_zh/http://idiom-q-win-1/hk_zh/http://idiom-q-win-1/tw/http://idiom-q-win-1/tw/http://idiom-q-win-1/jp/http://idiom-q-win-1/kr/http://idiom-q-win-1/cis/http://idiom-q-win-1/cis/http://www.adobe.com/fr/products/catalog/software.htmlhttp://www.adobe.com/fr/downloads.htmlhttp://helpx.adobe.com/fr/support.htmlhttp://www.adobe.com/fr/company.htmlhttp://www.adobe.com/fr/privacy.htmlhttp://www.adobe.com/fr/legal/general-terms.htmlhttp://www.adobe.com/fr/privacy/cookies.html

Prise en charge des plates-formes personnalises

Haut de la page

Animate prend en charge la cration de graphiques et animations enrichis laide de types de documents telsquActionScript, HTML5 et WebGL. La fonction de prise en charge des plates-formes personnalises permetdtendre la puissance dAnimate CC afin de prendre en charge les plates-formes qui ne sont pas natives Animate.

La prise en charge des plates-formes personnalises peut tre ajoute Animate en installant un moduleexterne au moyen dun ensemble dAPI faisant partie du kit de dveloppement de prise en charge des plates-formes personnalises. Les dveloppeurs peuvent crer des modules externes de prise en charge desplates-formes personnalises pour Animate en utilisant ces interfaces et en faisant rfrence lexemple decode. En installant un module externe de prise en charge des plates-formes pour un nouveau type dedocument, les utilisateurs peuvent crer leurs illustrations au moyen du riche ensemble de fonctionsdAnimate et le publier dans le format de sortie de la plate-forme personnalise.

Flux de travail

La fonction de prise en charge des plates-formes personnalises comprend deux parties : une pour ledveloppeur qui cre des modules externes de prise en charge des plates-formes personnalises et l'autrepour l'utilisateur qui installe et utilise le module externe.

Dveloppeur

Si vous tes dveloppeur et que vous crez des modules complmentaires pour Animate, vous pouvezprocder comme suit pour dvelopper et distribuer vos modules externes :

21

Remarque : Pour en savoir plus sur le dveloppement de modules externes (plug-ins) de prise en chargedes plates-formes personnalises au moyen du kit de dveloppement, voir Activation de la prise en chargedes plates-formes personnalises.

Pour consulter une documentation dtaille sur les API du kit de dveloppement, voir Rfrence des API deprise en charge des plates-formes personnalises.

Utilisateur

Si vous tes un utilisateur dAnimate, vous pouvez acqurir un module externe de plates-formespersonnalises en utilisant lune des mthodes suivantes :

Tlchargez le module externe de prise en charge des plates-formes personnalises pourune plate-forme de votre choix partir de la page Modules complmentaires Adobe. Lapage Modules complmentaires Adobe vous permet d'acqurir un module externe et del'installer l'aide de l'application Adobe Creative Cloud. Obtenez un fichier .zxp auprs d'un dveloppeur de modules externes et installez-le aumoyen de l'application Adobe Extension Manager.

Le processus suivant illustre l'installation d'un module externe de prise en charge des plates-formespersonnalises et la cration de votre document de plate-forme personnalise.

Documentation connexeActivation de la prise en charge des plates-formes personnalisesRfrence des API de prise en charge des plates-formes personnalisesUtilisation de modules externes de prise en charge des plates-formes personnalises

22

https://creative.adobe.com/fr/addons

Mots-cls : prise en charge des plates-formes personnalises, Flash Professional, cc 2014, extension de laprise en charge aux plates-formes personnalises, utilisation de flash pour les formats de document nonnatifs, nouveaux formats dans flash



23


Cration et publication de documents HTML5 Canvas dansAnimate CC

Haut de la page

Haut de la page

Quest-ce que HTML5 Canvas ?Le nouveau type de document HTML5 Canvas

Animate et lAPI CanvasCration dun document HTML5 CanvasRendre le document HTML5 Canvas interactif

Utilisation des fragments de code JavaScriptRfrences la documentation CreateJS

Publication danimations au format HTML5Paramtres simplesParamtres avancs

Variables des modles HTMLPrise en charge JSAPI pour importer et exporter des modles HTML pour lesdocuments CanvasCode JavaScript incorpor au code HTMLFusion des donnes JSON dans JSOptimisation des sorties HTML5 Canvas

Dfinition dun arrire-plan de travail transparentExportation des bitmaps comme une feuille Sprite

Utilisation du texte dans le document HTML5 CanvasTexte statiqueTexte dynamique

Prsentation de la sortie HTML5 CanvasMigration de contenu existant vers HTML5 Canvas

Modifications appliques au contenu aprs la migrationConversion dautres types de documents en HTML5 Canvas

Quest-ce que HTML5 Canvas ?

Canvas est un nouvel lment dans HTML5, qui fournit des API grce auxquelles vous pouvez gnrer etrestituer de faon dynamique des graphiques, des diagrammes, des images et des animations. LAPI Canvaspour HTML5 perfectionne la plateforme HTML5 en fournissant des fonctions de dessin bidimensionnelles.Ces fonctions sont prises en charge par la plupart des systmes dexploitation et navigateurs actuels.

Grosso modo, Canvas est un moteur de rendu de bitmaps ; les dessins sont dfinitifs et ne peuvent pas treredimensionns. En outre, les objets dessins sur Canvas ne font pas partie du DOM de la page web.

Dans une page web, vous pouvez ajouter des lments Canvas laide de la balise . Vous pouvezles rendre interactifs en utilisant du code JavaScript. Pour plus dinformations, suivez ce lien.

Le nouveau type de document HTML5 Canvas

24

http://www.w3schools.com/html/html5_canvas.asp

Haut de la page

Haut de la page

Animate CC vous permet de crer un document HTML5 Canvas qui contient des illustrations, desgraphiques, des animations, etc. enrichis. Un nouveau type de document (HTML5 Canvas) ajout Animateassure une prise en charge native pour crer un contenu HTML5 riche et interactif. En dautres termes, vouspouvez utiliser le scnario, lespace de travail et les outils traditionnels dAnimate pour crer du contenu, puisproduire ensuite une sortie HTML5. Quelques clics suffisent pour crer un document HTML5 Canvas etgnrer une sortie entirement fonctionnelle. cette fin, les options de document et de publication dansAnimate sont prdfinies afin de gnrer une sortie HTML5.

Animate CC est intgr CreateJS, ce qui permet de produire un contenu interactif enrichi sur lestechnologies web ouvertes par lintermdiaire de HTML5. Animate CC gnre du code HTML et JavaScriptpour le contenu (bitmaps, vecteurs, formes, sons, interpolations, etc.) cr sur la scne. La sortie peut treexcute sur tous les priphriques ou navigateurs compatibles avec HTML5 Canvas.

Animate et lAPI Canvas

Animate utilise lAPI Canvas pour publier du contenu au format HTML5. Il traduit en contreparties Canvas lesobjets crs dans la scne et ce, de manire transparente. Il permet de publier du contenu complexe enHTML5 grce au mappage 1:1 des fonctions Animate avec les API dans Canvas.

Cration dun document HTML5 Canvas

Pour crer un document HTML5 Canvas, procdez comme suit :

1. Dans lcran de bienvenue dAnimate CC, cliquez sur loption HTML5 Canvas. Dans lefichier FLA qui souvre, les paramtres de publication ont t modifis pour gnrer lasortie HTML5.

2. Vous pouvez aussi slectionner Fichier > Nouveau pour ouvrir la bote de dialogueNouveau document. Cliquez sur loption HTML5 Canvas.

Vous pouvez maintenant commencer crer du contenu HTML5 laide des outils disponibles dans Animate.Lorsque vous commencez travailler avec le document HTML5 Canvas, certains outils et fonctions ne sontpas pris en charge et sont dsactivs. En effet, Animate prend en charge les fonctions qui sont elles-mmesprises en charge par llment Canvas dans HTML5. Par exemple, les transformations 3D, les lignes enpointills et les effets de biseau ne sont pas pris en charge.

Rendre le document HTML5 Canvas interactif

Animate CC publie le contenu HTML5 en utilisant les bibliothques CreateJS.La suite de bibliothques etdoutils modulaires CreateJS permet de produire un contenu interactif riche sur les technologies web ouvertesau moyen de HTML5. Elle se compose des lments suivants : EaselJS, TweenJS, SoundJS et PreloadJS.CreateJS convertit en HTML5 le contenu cr sur scne laide de ces diffrentes bibliothques, pourgnrer des fichiers de sortie HTML et JavaScript. Vous pouvez galement amliorer le contenu enmanipulant ce fichier JavaScript.

Toutefois, Animate CC permet de rendre interactifs des objets sur scne crs dans lapplication pourHTML5 Canvas. Ainsi, vous pouvez ajouter du code JavaScript aux objets individuels sur scne directementdans Animate et les prvisualiser au moment de la cration. Animate assure alors une prise en charge nativedu code JavaScript laide des fonctions utiles de lditeur de code, afin de rendre plus efficaces lesprocessus des programmeurs.

Vous pouvez slectionner des images et des images cls individuelles dans le scnario pour rendre votrecontenu interactif. Vous pouvez rendre un document HTML5 Canvas interactif laide de JavaScript. Pour ensavoir plus sur la rdaction du code JavaScript, cliquez ici.

Il est possible dcrire le code JavaScript directement dans le panneau Actions, qui prend en charge lesfonctions suivantes lors de lcriture de code JavaScript :

25

http://www.w3schools.com/js/js_intro.asp

Indicateurs de code

Mise en vidence de la syntaxe

Coloration du code

Parenthse

Permet dinsrer et de modifier rapidement le code JavaScript, sans erreur. mesureque vous tapez des caractres dans le panneau Actions, une liste de suggestions saffiche et vous aide complter votre saisie.

En outre, Animate prend en charge certaines fonctions inhrentes au panneau Actions lorsque vous utilisezHTML5 Canvas. Ces fonctions permettent damliorer lefficacit du processus en rendant des objets sur lascne interactifs. Il sagit des fonctions suivantes :

Affiche le code dans diffrentes polices ou couleurs en fonction de lasyntaxe. Cette fonction permet de rdiger le code dune manire structure, vous aidant ainsi diffrenciervisuellement le code correct et les erreurs de syntaxe.

Affiche le code dans diffrentes couleurs en fonction de la syntaxe. Vous pouvez ainsidistinguer visuellement les diffrentes parties dune syntaxe.

Ajoute automatiquement les crochets/parenthses fermants et ouvrants lors de la rdaction decode JavaScript.

(A) Mise en vidence de la syntaxe (B) Coloration du code (C) Parenthses

Vous pouvez rendre des formes ou des objets sur la scne interactifs laide de JavaScript. Vous pouvezaussi ajouter du code JavaScript des images et images cls individuelles.

1. Slectionnez limage laquelle vous souhaitez ajouter du code JavaScript.2. Pour ouvrir le panneau Actions, slectionnez Fentre >Actions.

Utilisation des fragments de code JavaScript

Vous pouvez ajouter de linteractivit en utilisant les fragments de code JavaScript disponibles dans AnimateCC. Pour accder aux fragments de code et les utiliser, slectionnez Fentre > Fragments de code. Pourplus dinformations sur lajout de fragments de code JavaScript, reportez-vous cet article.

Rfrences la documentation CreateJS

BibliothqueCreateJS Documentation de lAPI Exemples de code su

EaselJS http://createjs.com/Docs/EaselJS/modules/EaselJS.html https://github.com/createj

26

http://createjs.com/Docs/EaselJS/modules/EaselJS.htmlhttps://github.com/createjs/easeljs/

Haut de la page

Sortie

Scnario en boucle

Inclure les calques masqus

Centrer la scne

Rendre ractif

TweenJS http://createjs.com/Docs/TweenJS/modules/TweenJS.html https://github.com/createj

SoundJS http://createjs.com/Docs/SoundJS/modules/SoundJS.html https://github.com/createj

PreloadJS http://createjs.com/Docs/PreloadJS/modules/PreloadJS.html https://github.com/createj

EaselJSTweenJSSoundJSPreloadJS

Publication danimations au format HTML5

Pour publier du contenu sur scne vers HTML5, procdez comme suit :

1. Slectionnez Fichier > Paramtres de publication.2. Dans la bote de dialogue Paramtres de publication, spcifiez les paramtres suivants :

Paramtres simples

Rpertoire de publication du fichier FLA. Il sagit, par dfaut, du mme rpertoire que celui du fichierFLA, mais vous pouvez le changer en cliquant sur le bouton de navigation ... .

Lorsque cette option est active, le scnario est excut en boucle ; dans le cascontraire, il sarrte une fois la lecture acheve.

Si cette option est dsactive, les calques masqus ne sont pas inclus dansla sortie.

Permet aux utilisateurs de spcifier si la scne doit tre centre horizontalement,verticalement ou les deux. La scne ou le plan de travail HTML saffiche au centre de la fentre dunavigateur par dfaut.

Permet aux utilisateurs de spcifier si lanimation doit ragir par rapport la largeur, la

27

http://createjs.com/Docs/TweenJS/modules/TweenJS.htmlhttps://github.com/createjs/tweenjs/http://createjs.com/Docs/SoundJS/modules/SoundJS.htmlhttps://github.com/createjs/soundjs/http://createjs.com/Docs/PreloadJS/modules/PreloadJS.htmlhttps://github.com/createjs/preloadjs/http://createjs.com/Docs/EaselJS/modules/EaselJS.htmlhttp://createjs.com/Docs/TweenJS/modules/TweenJS.htmlhttp://createjs.com/Docs/SoundJS/modules/SoundJS.htmlhttp://createjs.com/Docs/PreloadJS/modules/PreloadJS.html

Ajuster la zone visible

Inclure le pr-chargeur :

hauteur ou les deux et redimensionne la sortie publie en fonction de diffrents facteurs de forme. Il enrsulte une sortie HiDPI ractive, plus nette et plus prcise.La sortie stend galement pour couvrir la zone entire de lcran sans bordures, mais conserve lesproportions dorigine, bien quune partie du plan de travail puisse ne pas tre visible.

Avec les options Largeur, Hauteur ou Les deux, le contenu entier est mis lchelleselon la taille du plan de travail et est visible mme sur un petit cran (appareils mobilesou tablettes, par exemple). Si la taille de lcran est suprieure la taille de la scne decration, le plan de travail saffiche sa taille dorigine.

Permet aux utilisateurs de spcifier si lanimation doit tre adapte pour afficher lasortie en mode plein cran ou tre adapte la taille de lcran. Cette option est dsactive par dfaut.Ajuster la vue : affiche la sortie en mode plein cran en utilisant tout lespace lcran et en conservantles proportions.tirer pour ajuster : tire la sortie pour quelle saffiche sans bordures.

Permet aux utilisateurs de spcifier sils souhaitent utiliser le fichier deprchargement par dfaut ou un fichier de prchargement de leur choix de la bibliothque de documents.Le fichier de prchargement est un indicateur visuel sous forme dun fichier GIF anim qui saffiche pendantle chargement des scripts et des actifs requis pour le rendu dune animation. Une fois les actifs chargs, lefichier de prchargement est masqu et lanimation relle est affiche.Par dfaut, loption de prchargement nest pas slectionne.

Loption Par dfaut permet dutiliser la mthode de prchargement par dfaut ;loption Parcourir permet de choisir le fichier GIF de prchargement. Le fichier GIF deprchargement est copi dans le dossier dimages configur dans le volet Exporter deslments dimage.Utilisez loption Aperu pour prvisualiser le fichier GIF slectionn.

Paramtres de publication

Utilisez les options dactivation/dsactivation pour choisir de publier au niveau de la racine ou du sous-dossier. Ce bouton est Activ par dfaut. Si vous slectionnez Dsactiv, le champ du dossier est dsactivet les lments sont exports dans le mme dossier que le fichier de sortie.

28

Exporter des lments dimage

Exporter les lments sonores

Exporter les lments CreateJS

Remarque :

Options dexportation des actifs

Publication dlments Canvas dans le dossier racine

Dossier dans lequel sont placs les lments dimages et partir duquelils sont rfrencs.Regrouper dans des feuilles Sprite : slectionnez cette option pour regrouper tous les lments dimagedans une feuille Sprite. Pour plus doptions de feuilles Sprite, voir Exportation de bitmaps comme une feuilleSprite.

Dossier dans lequel sont placs les lments sonores du document et partir duquel ils sont rfrencs.

Dossier dans lequel sont places les bibliothques CreateJS et partirduquel elles sont rfrences.

Le paramtre par dfaut continue publier des fichiers rpartis dans des sous-dossierslogiques.

Paramtres avancs

URL relatives pour exporter des images et des sons et prendre en chargeles bibliothques JavaScript CreateJS. Si vous ne cochez pas la case de droite, ces actifs ne sont pasexports depuis le fichier FLA, mais le chemin spcifi est tout de mme utilis pour assembler leurs URL.Cette option facilite la publication depuis un fichier FLA comportant de nombreux actifs multimdias et vite leremplacement des bibliothques JavaScript modifies.Grce loption Exporter tous les bitmaps comme des feuilles Sprite, vous pouvez rassembler dans unefeuille Sprite tous les bitmaps du document du plan de travail, et rduire ainsi le nombre de requtes deserveur et amliorer les performances. Vous pouvez dfinir la taille maximale de la feuille Sprite en spcifiantles valeurs de hauteur et de largeur.

29

Modle pour la publication HTML :

Bibliothques hberges :

Inclure les calques masqus :

Utiliser la valeur par dfaut : publiez votre sortie HTML5 en utilisant le modle par dfaut.Importer nouveau : importez un nouveau modle pour votre document HTML5.Exporter : exportez votre document HTML5 comme un modle.

Si cette option est active, les copies des bibliothques hberges sur le CDNCreateJS ladresse code.createjs.com sont utilises. Cette option permet de mettre en cache lesbibliothques en vue de les partager sur divers sites.

Si cette option est dsactive, les calques masqus ne sont pas inclus dansla sortie.

30

Compacter les formes :

Limites des images multiples :

Remplacer le fichier HTML la publication et Inclure le code JavaScript dans le fichier HTML :

Remarque :

Haut de la page

Si cette option est active, les instructions vectorielles sont produites sous formecompacte. Dsactivez cette option pour exporter des instructions lisibles et dtailles (option utile des finsdidactiques).

Si vous activez cette option, les symboles du scnario incluent uneproprit frameBounds contenant un tableau de rectangles qui correspond aux limites de chaque image dansle scnario. Les limites des images multiples augmentent considrablement la dure de publication.

Siloption Inclure le code JavaScript dans le fichier HTML est slectionne, la case Remplacer le fichier HTML la publication est coche et active.Si vous dcochez la case Remplacer le fichier HTML la publication,loption Inclure le code JavaScript dans le fichier HTML est dcoche et dsactive.

3. Cliquez sur Publier pour publier le contenu lemplacement spcifi.

une animation conue laide de scnarios imbriqus, avec une seule image, ne peut pas trelue en boucle.

Variables des modles HTML

Quand vous importez un nouveau modle HTML personnalis, pendant la publication, les variables pardfaut sont remplaces par les fragments de code personnaliss en fonction des composants de votre fichierFLA.

Le tableau suivant rpertorie les variables de modle actuellement reconnues et remplaces par Animate :

Attribut/paramtre Variable du modle

Titre du document HTML $TITLE

Espace rserv permettant dinclure des scriptsCreateJS $CREATEJS_LIBRARY_SCRIPTS

Espace rserv permettant dinclure les scriptsgnrs (notamment des scripts de police web) $ANIMATE_CC_SCRIPTS

Balise HTML pour lancer un script ct client

$SCRIPT_START

Espace rserv au code pour crer le chargeur(CreateJS LoadQueue) $CREATE_LOADER

Espace rserv au code pour charger les lmentsprsents dans le manifeste $LOAD_MANIFEST

Espace rserv au code dfinissant la mthode dechargement des fichiers $HANDLE_FILE_LOAD_START

Espace rserv au code pour grer lvnement dechargement du fichier $HANDLE_FILE_LOAD_BODY

Espace rserv au code concluant la mthode dechargement des fichiers $HANDLE_FILE_LOAD_END

Espace rserv au code dfinissant la gestion de lamthode Terminer ; fonction appele une fois leslments chargs

$HANDLE_COMPLETE_START

Espace rserv au code pour crer la scne $CREATE_STAGE

Espace rserv au code pour lenregistrement delvnement Tick, aprs lequel commence lanimation $START_ANIMATION

31

Remarque :

Haut de la page

Espace rserv au code pour prendre en charge lamise lchelle ractive et les affichages hidpi $RESP_HIDPI

Espace rserv au code concluant la gestion de lamthode Terminer $HANDLE_COMPLETE_END

Espace rserv pour une fonction qui gre le contenuavecdu son

$PLAYSOUND

Espace rserv pour styler la section afin de prendreen charge le centrage sur le plan de travail $CENTER_STYLE

Espace rserv la proprit de style daffichage duplan de travail pour la prise en charge du fichier deprchargement

$CANVAS_DISP

Espace rserv au code pour afficher le fichier deprchargement $PRELOADER_DIV

Balise HTML pour la fin du script ct client

$SCRIPT_END

Identifiant dlment de plan de travail

$CANVAS_ID

Largeur de llment de la scne ou du plan de travail

$WT

Hauteur de llment de la scne ou du plan detravail

$HT

Couleur darrire-plan de llment de la scne ou duplan de travail

$BG

Version dAnimate CC utilise pour gnrerdu contenu

$VERSION

Les jetons suivants issus des versions prcdentes sont obsoltes dans la prsente version :

Attribut/paramtre Variable du modle

Espace rserv pour inclure les scripts (CreateJS et JavaScriptgnr) $CREATEJS_SCRIPTS

Espace rserv au code permettant dinitialiser les bibliothquesCreateJS, de charger le mdia, de crer et mettre jour lascne

$CJS_INIT*

Ces jetons sont modulariss et remplacs par dautres jetons.

Prise en charge JSAPI pour importer et exporter des modlesHTML pour les documents Canvas

Les commandes JSAPI suivantes prennent en charge limportation et lexportation de modles HTML pour lesdocuments Canvas :

Exporte le modle de publication HTML5 Canvas pour un document donn,

32

Haut de la page

Remarque :

lemplacement spcifi :

bool document::exportCanvasPublishTemplate(pathURI)

Exemple :

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

fl.trace(Template could not be exported);

Importe et dfinit le modle de publication HTML5 Canvas pour un document donn, partir de lemplacement pathURI spcifi :

bool document::importCanvasPublishTemplate(pathURI)

Exemple :

var pathURI= file:///C|/Users/username/desktop/CanvasTemplate.html;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

fl.trace(Template could not be imported);


Animate permet dinclure le fichier JS dans le fichier HTML durant la publication du plan de travail.

1. Dans le menu Paramtres de publication, passez longlet Avanc et slectionnezInclure le code JavaScript dans le fichier HTML.

2. Dans la bote de dialogue Inclure le code JavaScript dans le fichier HTML lapublication, cliquez sur OK pour republier le contenu crasant le code HTML.

3. Ceci dsactive la case cocher Remplacer le fichier HTML la publication ; pendantun vnement de publication, le code HTML est gnr mais pas cras.

4. Sous Arrter dinclure le code JavaScript dans le fichier HTML, cliquez sur OK pourexclure le code JavaScript et republier le fichier HTML.

5. Si loption Remplacer le fichier HTML la publication nest pas slectionne, loptionInclure le code JavaScript dans le fichier HTML est automatiquement dsactive.

Si vous ne souhaitez pas que le code HTML soit remplac, les options Remplacer le fichierHTML la publication et Inclure le code JavaScript dans le fichier HTML ne peuvent pas coexister.

33

Haut de la page

Haut de la page

Fusion de JS avec HTML

Fusion des donnes JSON dans JS

Daprs les commentaires des utilisateurs et du fait que les fichiers JSON ne sont en soi pas scuriss, nousavons fusionn les donnes appropries avec le fichier JS ; ainsi, aucun fichier JSON distinct nest cr.

Optimisation des sorties HTML5 Canvas

Animate optimise la taille et les performances des sorties HTML5 Canvas comme suit :

Exportation de bitmaps comme une feuille Sprite laide des options de longlet FeuilleSprite dans les Paramtres de publication.En excluant les calques masqus (en dslectionnant loption Inclure les calquesinvisibles) de la sortie publie.En excluant tous les lments inutiliss tels que les sons et les bitmaps, ainsi que tousles lments des images inutilises (par dfaut).En spcifiant de ne pas exporter les lments du fichier FLA en dslectionnant lesoptions dexportation des actifs pour les images et les sons, en prenant en charge lesbibliothques JavaScript CreateJS et en utilisant les URL relatives pour lexportation.Sortie HTML5 Canvas compatible avec HiDPI : Animate met lchelle la sortie enfonction de la rsolution de lappareil sur lequel est affich le contenu. Cette compatibilitpermet de gnrer une sortie plus nette lors de lutilisation du zoom et corrige galementles problmes de pixellisation des documents Canvas lorsque vous affichez la sortie

34

HTML5 Canvas sur un ordinateur haute rsolution.

Dfinition dun arrire-plan de travail transparent

Vous pouvez personnaliser le plan de travail en diffrentes couleurs et galement modifier sa transparencedaffichage. Lorsque vous crez un plan de travail transparent, vous pouvez afficher le contenu HTML sous-jacent durant la publication.

Remarque : Ce paramtre rend larrire-plan transparent pendant la publication OAM.

1. Choisissez le plan de travail modifier.2. Dans le volet Proprits, slectionnez Scne.3. Dans la scne, dfinissez les valeurs de pourcentage pour Alpha.

Prise en charge du nuancier Aucune couleur

Vous pouvez galement utiliser loption Aucune couleur du nuancier pour rendre larrire-plan de travailtransparent :

1. Slectionnez Modification > Document > Couleur de la scne ou dans lInspecteurdes proprits, slectionnez Paramtres avancs.

2. Dans le nuancier Couleur de la scne, slectionnez Aucune couleur.

Transparence du plan de travail

35

Transparence du plan de travail : paramtres avancs

Exportation des bitmaps comme une feuille Sprite

Lexportation sous forme de feuille Sprite dun certain nombre de bitmaps que vous avez utiliss dans votredocument HTML5 Canvas rduit le nombre de requtes de serveur et la taille de la sortie, et amliore lesperformances. Vous pouvez exporter la feuille Sprite au format PNG (par dfaut), JPEG ou les deux.

1. Dans longlet Feuille Sprite, activez la case cocher Regrouper les lments dimagedans des feuilles Sprite.

2. Slectionnez le Format PNG, JPEG ou Les deux.3. Si vous avez slectionn PNG ou Les deux, spcifiez les options suivantes sous

Paramtres PNG :Qualit : dfinissez la qualit de la feuille Sprite : 8 bits (par dfaut), 24 bits ou32 bits.Taille max. : spcifiez la hauteur et la largeur maximales de la feuille Sprite, enpixels.Arrire-plan : cliquez et dfinissez la couleur darrire-plan de la feuille Sprite.

4. Si vous avez slectionn JPEG ou Les deux, spcifiez les options suivantes sousParamtres JPEG :

Qualit : dfinissez la qualit de la feuille Sprite.Taille max. : spcifiez la hauteur et la largeur maximales de la feuille Sprite, enpixels.Arrire-plan : cliquez et dfinissez la couleur darrire-plan de la feuille Sprite.

36

Haut de la page

Utilisation du texte dans le document HTML5 Canvas

Le plan de travail HTML prend en charge le texte statique et dynamique.

Texte statique

Le texte statique offre plus de latitude : tous les lments sont convertis en contours au moment de lapublication, ce qui fournit lutilisateur un excellent environnement tel crit, tel cran. Le texte est publi sousforme de contours vectoriels, vous pouvez donc les modifier au moment de lexcution.

Remarque : Un recours trop intensif au texte statique peut gonfler la taille du fichier.

37

Haut de la page

Fichier HTML

Fichier JavaScript

Haut de la page

Texte dynamique

Le texte dynamique permet de modifier le texte au moment de lexcution et naugmente pas de maniresignificative la taille du fichier. Il prend en charge moins doptions que le texte statique. En revanche, il prenden charge les polices web par lintermdiaire de Typekit.

Si vous employez du texte dynamique avec des polices indisponibles sur les ordinateurs de lutilisateur final,la sortie utilise la police par dfaut pour laffichage et biaise ainsi lexprience utilisateur. Ces problmes sontrsolus avec les polices web.

Ajout de polices web Typekit au document HTML5 Canvas

Animate CC offre des polices web Typekit pour le texte dynamique des documents HTML5 Canvas. Typekitfournit un accs direct des milliers de polices de qualit suprieure mises au point par nos meilleuresfonderies partenaires. Accdez aux polices Typekit et utilisez-les simplement dans votre sortie HTML5 pourles navigateurs et les terminaux mobiles modernes, en utilisant votre abonnement Creative Cloud.

Pour en savoir plus sur lutilisation des polices Typekit dans Animate CC, voir Utilisation de polices webTypekit dans les documents HTML5 Canvas.

Animate 2015.2 amliore lenvironnement visuel du texte dynamique dans un document Canvas, de sorte quela scne et les aspects publis sont synchroniss.

Remarque : Les polices web de Typekit ne sont pas disponibles pour le texte statique.

Vido : Amliorations du texte dans Animate CC

De Train Simple (www.trainsimple.com)

Prsentation de la sortie HTML5 Canvas

La sortie HTML5 publie contient les fichiers suivants :

Contient des dfinitions pour tous les objets, formes et illustrations de llment Canvas. Ilinvoque galement lespace de noms CreateJS pour convertir Animate en HTML5 et le fichier JavaScriptcorrespondant qui contient des lments interactifs.

Contient des dfinitions ddies ainsi que le code pour tous les lments interactifs delanimation. Le code pour tous les types dinterpolation est galement dfini dans le fichier JavaScript.

Ces fichiers sont copis au mme emplacement que celui du fichier FLA par dfaut. Vous pouvez modifiercet emplacement en spcifiant le chemin daccs de la sortie dans la bote de dialogue Paramtres depublication (Fichier > Paramtres de publication).

Migration de contenu existant vers HTML5 Canvas

Vous pouvez faire migrer le contenu existant dans Animate pour gnrer une sortie HTML5. cette fin,Animate vous permet de faire migrer le contenu en copiant ou en important manuellement des calques, dessymboles et dautres lments de bibliothque individuels. Vous pouvez aussi excuter la commandeConvertir AS3 en document HTML5 Canvas pour exporter automatiquement le contenu ActionScript existantvers un nouveau document HTML5 Canvas. Pour plus dinformations, suivez ce lien.

Lorsque vous utilisez le type de document HTML5 dans Animate CC, certaines fonctions ne sont pas prises

38

Copier

Importer

Utiliser

Scripts

Le contenu est supprim

Le contenu est modifi en une valeur par dfaut prise en charge

Haut de la page

en charge. Cela est d au fait que ces fonctions dans Animate nont pas de fonctions correspondantes danslAPI Canvas. Elles ne peuvent donc pas tre utilises dans le document de type HTML5 Canvas. Cela peutse produire au cours de la migration de contenu, lorsque vous essayez deffectuer les oprations suivantes :

du contenu (calques ou symboles de la bibliothque) dun document Animate de type classique (parexemple ActionScript 3.0, AIR for Android, AIR for Desktop, etc.) dans un document HTML5. Dans ce cas, letype de contenu non pris en charge est supprim ou converti en valeurs par dfaut prises en charge.Par exemple, le fait de copier une animation 3D supprime toutes les transformations 3D appliques auxobjets sur la scne.

un fichier PSD ou AI qui contient le contenu non pris en charge. Dans ce cas, le contenu estsupprim ou converti en valeurs par dfaut prises en charge.Par exemple, si vous importez un fichier PSD sur lequel est appliqu leffet Biseau dgrad, Animatesupprime leffet.

plusieurs types de documents (par exemple, ActionScript 3.0 et HTML5 Canvas) simultanment etpermuter entre les documents avec un outil ou une option slectionn non pris en charge. Dans ce cas,Animate CC indique visuellement que la fonction nest pas prise en charge.Par exemple, vous avez cr une ligne pointille dans un document ActionScript 3.0 et tes pass en modeHTML5 Canvas alors que loutil Ligne tait toujours slectionn. Observez le pointeur et linspecteur desproprits : des icnes sy affichent pour indiquer que la ligne pointille nest pas prise en charge dansHTML5 Canvas.

Les composants ActionScript sont supprims et les marques de commentaire du code sontsupprimes. Par ailleurs, si le bloc de commentaires contient du code JavaScript (pour Toolkit for CreateJSavec Animate CC 13.0), vrifiez que vous avez supprim manuellement les marques de commentaire ducode.Si, par exemple, vous avez copi des calques qui contiennent des boutons, ils sont supprims.

Modifications appliques au contenu aprs la migration

Voici une liste des types de modifications appliques lorsque vous migrez le contenu existant vers undocument HTML5 Canvas.

Les types de contenu non pris en charge dans HTML5 Canvas sont supprims.Par exemple :

les transformations 3D sont supprimes ;les marques de commentaire du code ActionScript sont supprimes ;les vidos sont supprimes.

Le type de contenu ou la fonction estpris en charge, mais une proprit de la fonction ne lest pas. Par exemple :

Lincrustation BlendMode nest pas prise en charge ; elle est modifie en Normal.La ligne pointille nest pas prise en charge ; elle est modifie en Continu.

Pour obtenir la liste complte des fonctions qui ne sont pas prises en charge et de leurs valeurs desubstitution pendant la migration, consultez cet article.

Conversion dautres types de documents en HTML5 Canvas

Grce au convertisseur universel de type de document, vous pouvez convertir des projets FLA existants (de

39



tout type) en nimporte quel autre type de document tel que HTML5 Canvas, ActionScript/AIR, WebGL ou untype de document personnalis. Lors de la conversion dans un format donn, vous pouvez profiter desfonctions de cration dAnimate pour ce type de document.

Pour en savoir plus, voir Conversion en dautres formats de document.

Conversion dun document ActionScript 3 en document HTML5 Canvas laide dunscript JSFL

Animate CC fournit un script JSFL qui permet de convertir un document AS3 en document HTML5 Canvas.Une fois excut, le script JSFL effectue les oprations suivantes :

Il cre un document HTML5 Canvas.Il copie tous les calques, symboles et lments de bibliothque dans le nouveaudocument HTML5 Canvas.Il applique les valeurs par dfaut aux fonctions, sous-fonctions ou proprits de fonctionnon prises en charge.Il cre des fichiers FLA distincts pour chaque scne, car le document HTML5 Canvas neprend pas en charge les scnes multiples.

Pour convertir un document AS3 en document HTML5 Canvas, procdez comme suit :1. Ouvrez le document ActionScript 3 dans Animate CC.2. Slectionnez Commandes > Convertir AS3 en document HTML5 Canvas.

40


Cration et publication dun document WebGL

Remarque :

Haut de la page

Remarque :

Haut de la page

WebGL est pris en charge uniquement en tant quaperu. Cette mise jour dAnimate prend encharge des animations de base avec du son et des scripts, ainsi quun jeu de fonctions dinteractivit.Dautres fonctions seront disponibles dans les futures versions dAnimate pour les documents de typeWebGL. Pour obtenir la liste complte des fonctions Animate prises en charge pour WebGL, consultez cetarticle de la base de connaissances.

Quest-ce que WebGL ?Type de document WebGLCration dun document WebGLAperu du contenu WebGL sur les navigateursPublication de contenu au format WebGLPrsentation de la sortie WebGLAjout daudio votre document WebGLMigration de contenu existant vers un document WebGLAmlioration des performances de rendu grce la mise en cache sous forme debitmap

Quest-ce que WebGL ?

WebGL est une norme Web ouverte qui permet deffectuer le rendu des graphiques sur nimporte quelnavigateur compatible, sans avoir recours dautres modules complmentaires. Il est entirement intgr toutes les normes Web du navigateur, ce qui permet dutiliser le traitement des images et les effets acclrspar GPU dans la zone de travail de la page Web. Les lments WebGL peuvent tre incorpors dautreslments HTML et combins dautres parties de la page.

La plupart des navigateurs actuels prennent en charge le format WebGL. Toutefois, cliquez ici pour en savoirplus sur les versions exactes prises en charge.

Dans certains navigateurs, WebGL nest pas pris en charge par dfaut. Pour activer WebGL dans votrenavigateur, consultez cet article.

veillez activer WebGL dans votre navigateur, car il est dsactiv par dfaut dans certainsnavigateurs.

Type de document WebGL

Animate CC permet de crer et de publier un contenu interactif enrichi au format WebGL (Web GraphicsLibrary). WebGL est compltement intgr aux navigateurs. Animate peut donc utiliser le traitement desimages et le rendu acclrs par GPU dans la zone de travail de la page Web.

Dans Animate CC, un nouveau type de document a t ajout pour WebGL. Vous pouvez ainsi crer ducontenu et le publier rapidement pour une sortie WebGL. Crez un contenu enrichi laide des puissantsoutils dAnimate, puis restituez la sortie WebGL dans nimporte quel navigateur compatible. En dautrestermes, vous pouvez utiliser le scnario, lespace de travail et les outils de dessin traditionnels dAnimatepour crer du contenu, puis produire ensuite du contenu WebGL. WebGL est pris en charge par la plupartdes navigateurs courants. Par consquent, Animate peut restituer le contenu sur la plupart des plates-formesWeb.

41

http://helpx.stage.adobe.com/flash/kb/unsupported-features-html5-canvas-webgl.htmlhttp://helpx.stage.adobe.com/flash/kb/unsupported-features-html5-canvas-webgl.htmlhttp://caniuse.com/#search=WebGLhttp://www.khronos.org/webgl/wiki_1_15/index.php/Getting_a_WebGL_Implementation

Haut de la page

Haut de la page

Haut de la page

Fichier de sortie

Remplacer HTML

Inclure les calques masqus

Scnario en boucle

Cration dun document WebGL

Dans Animate CC, le document WebGL permet de crer et de publier rapidement le contenu pour le formatWebGL. Pour crer un document WebGL :

1. Lancez Animate CC.2. Dans lcran de bienvenue, cliquez sur loption WebGL (Aperu). Vous pouvez aussi

slectionner Fichier > Nouveau pour ouvrir la bote de dialogue Nouveau document.Cliquez sur loption WebGL (Aperu).

Aperu du contenu WebGL sur les navigateurs

Vous pouvez utiliser la fonction Tester lanimation dAnimate pour prvisualiser ou tester votre contenu. Pourafficher un aperu, procdez comme suit :

1. Dans Animate CC, appuyez sur Ctrl + Entre sous Windows ou Commande + Entre surMac. Le navigateur par dfaut souvre avec le contenu WebGL.

Un serveur Web est requis pour quAnimate CC excute le contenu WebGL. Animate CC comporte unserveur Web intgr configur pour excuter le contenu WebGL sur le port 8090. Si un serveur utilise dj ceport, Animate le dtecte automatiquement et rsout le conflit.

Publication de contenu au format WebGL

Animate vous permet de crer et de publier le contenu WebGL en mode natif directement dans lapplication.

Pour publier le document WebGL, procdez comme suit :

1. Slectionnez Fichier > Paramtres de publication pour ouvrir la bote de dialoguecorrespondante. Vous pouvez aussi slectionner Fichier > Publier si vous avez djspcifi les paramtres de publication pour WebGL.

2. Dans la bote de dialogue Paramtres de publication, spcifiez les valeurs pour :

Donnez un nom significatif la sortie. En outre, recherchez ou entrez lemplacement ovous souhaitez publier la sortie WebGL.

Permet dindiquer si lenveloppe HTML doit ou non tre remplace lors de la publicationde votre projet WebGL. Vous pouvez dslectionner cette option si vous avez apport des modificationsexternes au fichier HTML publi et souhaitez les conserver lors de la mise jour de toute modificationapporte lanimation ou des lments de Flash Pro.

Inclut tous les calques masqus dans la sortie WebGL. Si vous dsactivezcette option, les calques (y compris ceux imbriqus dans les clips) signals comme masqus ne sont pasexports dans le document WebGL rsultant. Vous pouvez ainsi facilement tester diffrentes versions dedocuments WebGL en rendant des calques invisibles.

Rpte le contenu lorsquil atteint la dernire image. Dsactivez cette option pourarrter la lecture du contenu aprs la dernire image.

42

Remarque :

Haut de la page

Fichier denveloppe HTML

Fichier JavaScript (WebGL lexcution)

Atlas de textures

Haut de la page

Haut de la page

3. Cliquez sur Publier pour publier le contenu WebGL lemplacement spcifi.

la frquence maximale pouvant tre dfinie pour le contenu WebGL excut sur desnavigateurs est de 60 i/s.

Prsentation de la sortie WebGL

La sortie WebGL publie contient les fichiers suivants :

Comprend le moment de lexcution, appelle les actifs et initialise le renduWebGL. Par dfaut, le fichier est nomm .html. Vous pouvez entrer un autre nom pour le fichierHTML dans la bote de dialogue Paramtres de publication (Fichier > Paramtres de publication).Le fichier HTML est plac dans le mme rpertoire que celui du fichier FLA par dfaut. Vous pouvez prciserun autre emplacement dans la bote de dialogue Paramtres de publication.

Restitue le contenu publi sur WebGL. Est publi dans ledossier libs/ du document WebGL. Le fichier est nomm comme suit : flwebgl-.min.jsLenveloppe HTML utilise ce fichier JS pour restituer le contenu WebGL.

Stocke toutes les valeurs de couleur (des formes), y compris les instances bitmap sur lascne.

Ajout daudio votre document WebGL

Vous pouvez importer et intgrer des donnes audio dans votre document WebGL, contrler la lecture enutilisant les paramtres de synchronisation (vnement, dmarrer et arrter), et lire les donnes audio de lachronologie lexcution. Actuellement, WebGL ne prend en charge que les formats .wav et .mp3.

Pour plus dinformations sur lutilisation du contenu audio, voir Utilisation des sons dans Animate.

Migration de contenu existant vers un document WebGL

Vous pouvez faire migrer le contenu existant dans Animate vers un document WebGL, en le copiant ou enlimportant manuellement. En outre, lorsque vous utilisez plusieurs documents dans Animate, vous pouvezcopier le contenu dans les documents sous la forme de calques ou dactifs dans la bibliothque. Mme si laplupart des fonctions dAnimate sont prises en charge, certains types de contenu sont modifis en fonctiondu format WebGL.

Animate saccompagne de puissantes fonctions permettant de produire un contenu visuellement enrichi.Cependant, certaines de ces fonctions tant natives dans Animate, elles ne seront pas prises en charge dansun document WebGL. Animate a t conu pour modifier un tel contenu dans un format pris en charge etindique visuellement quand un outil ou une fonction nest pas pris en charge.

43

Copier

Importer

Utiliser

Scripts

Le contenu est supprim

Filtres

du contenu (calques ou symboles de la bibliothque) dun document Animate de type classique (parexemple ActionScript 3.0, AIR for Android, AIR for Desktop, etc.) dans un document WebGL. Dans ce cas, letype de contenu non pris en charge est supprim ou converti en valeurs par dfaut prises en charge.Par exemple, le fait de copier une animation 3D supprime toutes les transformations 3D appliques auxobjets sur la scne.

un fichier PSD ou AI qui contient le contenu non pris en charge. Dans ce cas, le contenu estsupprim ou converti en valeurs par dfaut prises en charge.Par exemple, si vous importez un fichier PSD sur lequel sont appliqus des effets de flou, Animate supprimeleffet.

plusieurs types de documents (par exemple, ActionScript 3.0 et WebGL) simultanment et permuterentre les documents avec un outil ou une option slectionn non pris en charge. Dans ce cas, Animate CCindique visuellement que la fonction nest pas prise en charge.Par exemple, vous avez cr une ligne pointille dans un document ActionScript 3.0 et tes pass en modeWebGL alors que loutil Ligne tait toujours slectionn. Observez le pointeur et linspecteur des proprits :ils indiquent visuellement que la ligne pointille nest pas prise en charge dans WebGL.

Vous pouvez crire du code JavaScript dans le panneau Actions, qui sera excut une fois que lelecteur affiche limage. La variable this dans le contexte des scripts dimage fait rfrence loccurrencede MovieClip auquel elle appartient. Par ailleurs, les scripts dimage peuvent accder aux fonctions etvariables JavaScript dclares dans le fichier HTML conteneur. Lorsque vous copiez une image ou un calque partir dun document ActionScript et que vous le collez dans un document WebGL, les scripts serontcomments, le cas chant.

Modifications appliques au contenu aprs la migration

Voici une liste des types de modifications appliques lorsque vous migrez le contenu existant vers undocument WebGL.

Les types de contenu non pris en charge dans HTML5 Canvas sont supprims.Par exemple :

ne sont pas pris en charge. Leffet sera supprim et la forme adoptera un fond uni.

44

Le contenu est modifi en une valeur par dfaut prise en charge

Dgrad radial

Leffet de filtre Flou est supprim et remplac par un fond uni.

Le type de contenu ou la fonction estpris en charge, mais une proprit de la fonction ne lest pas. Par exemple :

est modifi pour adopter un fond uni avec la couleur principale.

Le dgrad radial est modifi pour adopter un fond uni avec la couleur principale.

45

Haut de la page

Pour obtenir la liste complte des fonctions qui ne sont pas prises en charge et de leurs valeurs desubstitution pendant la migration, consultez cet article.

Amlioration des performances de rendu grce la mise en cachesous forme de bitmap

La mise en cache des images bitmap lexcution permet doptimiser les performances du rendu enspcifiant quun clip statique (une image darrire-plan, par exemple) ou un symbole de bouton doit tre misen cache sous forme de bitmap lors de lexcution. Par dfaut, les lments vectoriels sont redessins danschaque image. La mise en cache dun clip ou dun symbole de bouton en tant que bitmap empche lenavigateur davoir redessiner continuellement llment, car limage est un bitmap et sa position ne changepas. Ceci amliore considrablement les performances de rendu du contenu WebGL.

Lorsque vous crez une animation dont larrire-plan est complexe, par exemple, regroupez tous leslments de larrire-plan dans un clip. Slectionnez ensuite Mettre en cache en tant que bitmap pour le clipdans linspecteur des proprits. A la lecture, larrire-plan est rendu sous forme dun bitmap stock laprofondeur dcran actuelle. Le navigateur dessine rapidement, une seule fois, le bitmap sur la scne, doune lecture plus rapide et fluide.

La mise en cache dun clip sous forme de bitmap permet de figer ce clip en place automatiquement. En casde modification dune zone, les donnes vectorielles mettent jour le cache de bitmaps. Le nombre deretraages que le navigateur doit effectuer en est donc rduit, ce qui permet des performances de rendu plusfluides et plus rapides.

Pour activer la proprit Cache en tant que bitmap pour un symbole de clip, slectionnez linstance de clipet slectionnez Cache en tant que bitmap dans le menu droulant Inspecteur de proprits (Fentre >Proprits).

Considrations lies lutilisation de Cache en tant que bitmap

46



Lors de lutilisation de la proprit Cache en tant que bitmap sur du contenu WebGL, tenez compte despoints suivants :

La taille maximale du symbole de clip est limite 2 048 x 2 048. Notez que les limitesactuelles de linstance de clip qui peuvent tre masques sont infrieures 2 048 x 2 048, WebGL rservant certains pixels.Sil existe plusieurs instances du mme clip, Animate gnre le cache avec la taille de lapremire instance rencontre. Toutefois, le cache nest pas gnr nouveau et laproprit Cache en tant que bitmap nest pas ignore, mme si la transformation du clipchange dans une large mesure. Par consquent, si le symbole de clip augmenteconsidrablement au cours de lanimation, il se peut que cette dernire semble pixellise.

47


Assemblage dapplications AIR pouriOS

Remarque :

Haut de la page

Haut de la page

Prise en charge dAIR 17.0 et de Flash Player 17.0Dploiement dapplications AIR directement sur des priphriques iOSTest et dbogage dapplications AIR avec le simulateur natif iOSPublication dapplications AIR pour les priphriques prenant en charge laffichageRetina haute rsolutionTest et dbogage via le mode dinterprteurTest et dbogage sur iOS via USBConnectivit de plusieurs priphriques via USBAjout des icnes xxhdpi (144x144)Rsolution des problmes

Animate CC prend en charge la publication dapplications AIR pour iOS. Les applications AIR for iOS peuvents'excuter sur l'iPhone et l'iPad d'Apple. Lorsque vous publiez du contenu pour iOS, Animate convertit vosfichiers FLA en applications iPhone natives.

Pour plus dinformations sur la configuration matrielle et logicielle des applications de bureau et desapplications mobiles AIR, voir Adobe AIR / Caractristiques techniques.

Pour obtenir des instructions dtailles sur la mise en package dapplications pour iPhone, voir Crationdapplications Adobe AIR laide de Packager for iPhone.

Animate vous permet dajouter le chemin daccs au kit SDK iOS uniquement lorsquelapplication AIR inclut un fichier ANE. Cliquez sur Fichier > Paramtres dActionScript > Chemin debibliothque pour inclure un fichier ANE.

Prise en charge dAIR 17.0 et de Flash Player 17.0

AIR 17.0 pour iOS permet de gnrer des fichiers binaires 64 bits ainsi que des fichiers binaires 32 bits pardfaut de vos applications conformment la norme dApple pour les applications iOS. Dans la mise jourdAIR 17.0 pour iOS, loption Activer la cration de package plus rapide sous longlet Dploiement de la botede dialogue Paramtres AIR pour iOS est active par dfaut.

Dploiement dapplications AIR directement sur des priphriquesiOS

Une importante modification apporte au processus de dploiement de lapplication AIR permet de dployerdes applications AIR directement sur des priphriques iOS. Auparavant, pour dployer des applications surdes priphriques iOS, il tait ncessaire dinvoquer des applications AIR depuis iTunes.

En revanche, avec Animate, vous pouvez dployer des applications AIR directement sur iOS sans passer pariTunes. Cette fonction rduit la dure de publication dune application AIR for iOS et amliore de faonsignificative la productivit et les performances.

Remarque : Il est ncessaire dinstaller iTunes sur lordinateur qui est quip dAnimate

Pour activer le dploiement direct sur un priphrique iOS, procdez comme suit :

1. Vrifiez quiTunes est install sur lordinateur disposant dAnimate.

48

http://www.adobe.com/fr/products/air/systemreqs/http://www.adobe.com/go/learn_cs5_iPhone_frhttp://www.adobe.com/go/learn_cs5_iPhone_fr

Haut de la page

Remarque :

2. Dans le panneau Proprits dAnimate, cliquez sur le bouton en regard de la listedroulante Cible pour afficher la bote de dialogue Paramtres AIR for iOS.

3. Cliquez sur longlet Dploiement, puis slectionnez loption Installer lapplication sur lepriphrique iOS raccord.

4. Cliquez sur Publier.

Test et dbogage dapplications AIR avec le simulateur natif iOS

Il est possible dintgrer Animate Apple Xcode afin que le simulateur iOS natif puisse tester et dboguer lesapplications AIR cres pour iOS. Le simulateur iOS est trs utile lorsque vous navez pas accs auxpriphriques (iPhone ou iPad). Grce au simulateur iOS natif, vous pouvez galement tester et dboguerdes applications AIR sur plusieurs priphriques (iPhone et iPad). Il nest toutefois possible dintgrer lesimulateur iOS Flash CS6 que si ce dernier est excut sur des systmes Macintosh.

Pour utiliser le simulateur iOS, Animate vous demande de tlcharger et dinstaller Xcode. Pour plusdinformations, voir Installation de Xcode pour la prise en charge du simulateur iOS.

Tlchargez et installez la dernire version dAIR utiliser avec lesimulateur iOS. compter de la version 16 du SDK (mise jour CC 2014.2), Animate CC installe etdmarre lapplication iOS sur le simulateur iOS.

Installation de Xcode pour la prise en charge du simulateur iOS

1. Tlchargez et installez Xcode depuis http://developer.apple.com ou depuis lApp Store.2. Lancez Animate.3. Crez ou ouvrez un document AIR for iOS existant.4. Dans le panneau Proprits, dfinissez le lecteur sur la dernire version dAIR.

5. Cliquez sur le bouton en regard de la liste droulante Cible pour afficher la bote dedialogue Paramtres AIR for iOS.

49

http://developer.apple.com/

6. Dans longlet Gnral, indiquez manuellement le chemin daccs complet au kit SDK dusimulateur iOS ou recherchez son emplacement. Par exemple :

Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimula

7. Dans longlet Dploiement, indiquez le certificat et le mot de passe. Vous pouvez, sivous le souhaitez, indiquer le profil de configuration de lapplication AIR.

8. Cliquez sur OK lorsque vous avez termin.

Vous pouvez dsormais utiliser le simulateur iOS pour tester et dboguer votre application. Pour plusdinformations, voir Test dapplications AIR laide du simulateur iOS natif et Dbogage dapplications AIR laide du simulateur iOS natif.

Test dapplications AIR laide du simulateur iOS natif

Assurez-vous davoir install Xcode et davoir dfini le chemin vers le kit SDK de liPhone avant de testervotre application AIR.

1. Dans Animate, cliquez sur Contrle > Tester lanimation > Dans le simulateur iOS pourouvrir le simulateur iOS. Si vous navez pas indiqu le chemin vers le kit SDK dusimulateur iOS dans la bote de dialogue Paramtres AIR for iOS, une erreur estrenvoye.

2. Recherchez votre application dans le simulateur iOS et cliquez dessus pour la dmarrer.

Dbogage dapplications AIR laide du simulateur iOS natif

Assurez-vous davoir install Xcode et davoir dfini le chemin vers le kit SDK de liPhone avant de dboguervotre application AIR.

1. Dans Animate, cliquez sur Dboguer > Dboguer lanimation > Dans le simulateur iOS

50

Haut de la page

Haut de la page

pour ouvrir le simulateur iOS. Si vous navez pas indiqu le chemin vers le kit SDK dusimulateur iOS dans la bote de dialogue Paramtres AIR for iOS, une erreur estrenvoye.

2. Dans Animate, cliquez sur Dboguer > Commencer la session de dbogage distance >ActionScript 3.0.

3. Recherchez votre application dans le simulateur iOS et cliquez dessus pour la dmarrer.

Publication dapplications AIR pour les priphriques prenant encharge laffichage Retina haute rsolution

Animate vous permet de crer de riches applications AIR pour iOS prenant en charge laffichage Retinahaute rsolution. Vous pouvez slectionner laffichage Retina haute rsolution lorsque vous publiez desapplications AIR.

1. Dans Animate, crez ou ouvrez un document AIR for iOS existant.

2. Dans le panneau Proprits, cliquez sur le bouton en regard de la liste droulanteCible pour afficher la bote de dialogue Paramtres AIR for iOS.

3. Dans longlet Gnral, rglez la rsolution sur Haute.

4. Cliquez sur Publier.

Test et dbogage via le mode dinterprteur

Le mode dinterprteur permet de dboguer ou de tester rapidement vos applications AIR dveloppes pouriOS. Lorsque vous slectionnez le mode dinterprteur, les applications AIR sont installes sans treconverties en code ARM.

Pour activer le mode dinterprteur, procdez comme suit :

1. Dans le panneau Proprits, cliquez sur le bouton en regard de la liste droulanteCible pour afficher la bote de dialogue Paramtres AIR for iOS.

2. Cliquez sur longlet Dploiement, puis slectionnez Test du priphrique en mode

51

Remarque :

Remarque :

Haut de la page

Haut de la page

Haut de la page

Haut de la page

dinterprteur ou Dbogage du priphrique en mode dinterprteur pour loption Type dedploiement iOS.

3. Cliquez sur OK lorsque vous avez termin.

vous pouvez mettre en package et charger plusieurs fichiers SWF contenant du code doctetActionScript laide du mode dinterprteur et du mode AOT (Ahead of Time - lavance). Pour plusdinformations, consultez ce blog.

le mode dinterprteur doit tre utilis uniquement des fins de test ou de dbogage. Il estimpossible de tlcharger les fichiers dinstallation AIR gnrs laide du mode dinterprteur sur lAppStore.

Test et dbogage sur iOS via USB

Vous pouvez tester et dboguer des applications sur des priphriques iOS connects via USB. Cettefonction vient sajouter la fonctionnalit de test et de dbogage distance via Wi-Fi disponible dansAnimate CC. Lorsque vous raccordez des priphriques via USB, le test et le dbogage sont nanmoinssimplifis et acclrs, car le nombre dtapes manuelles est rduit.

Pour activer le test ou le dbogage via USB, procdez comme suit :

(Pour le dbogage) Choisissez Dboguer > Dboguer lanimation > Sur le priphriquevia USB.(Pour le test) Ch

Documents

Aide d’Adobe Animate CC · Création et publication de documents HTML5 Canvas dans Animate CC 325 Pinceaux personnalisés 342 Création de boutons avec Animate CC 346