« Univers Animate CC » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
 
(24 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{Ebauche}}
{{Ebauche}}
{{Tutoriels Flash|CS6|débutant}}
{{Tutoriels Flash|CC 2014.1 à CC 2015.1|débutant}}


== Introduction  ==
== Introduction  ==


Flash CC (avec Flash 17) est sorti en 2014. Cet environnement auteur permet de développer des animations et applications interactives pour [[Flash]], [[HTML5]] et [[WebGL]]
L'environnement auteur Animate CC (qui s'appelait encore Flash CC en 2014) permet de développer des animations et applications interactives pour [[Flash]], [[HTML5]] et [[WebGL]]


<div class="tut_goals">
<div class="tut_goals">
Ligne 13 : Ligne 13 :
'''Version de Flash'''
'''Version de Flash'''


Les prises d'écran et les mots qui font référence aux outils et fonctions de l'environnement Flash CS5 sont en '''anglais'''. On utilise la version Anglaise de Flash dans nos cours à TECFA puisqu'il existe beaucoup plus de tutoriels, exemples et livres etc. et qu'il est difficile de traduire certains termes dans un sens ou dans l'autre.
Les prises d'écran et les mots qui font référence aux outils et fonctions de l'environnement Animate CC sont en '''anglais'''. On utilise des versions Anglaises de Animate et de Flash dans nos cours à TECFA puisqu'il existe beaucoup plus de tutoriels, exemples et livres etc. et qu'il est difficile de traduire certains termes dans un sens ou dans l'autre.


'''Prérequis'''  
'''Prérequis'''  
Ligne 32 : Ligne 32 :
</div>
</div>


== Versions de Flash ==
== Versions de Flash / Animate et majeurs changements ==


La version CS6 est sortie en 2014. Par rapport à [[Univers Flash CS6|Flash CS6]], Flash CC comprend plusieurs nouvelles fonctions.
La première version de Flash Professional CC est sortie en 2013. Par rapport à [[Univers Flash CS6|Flash CS6]], Flash CC comprend plusieurs nouvelles fonctions.


Il existe plusieurs sous-versions de Adobe Flash CC. Chacune introduit des nouvelles fonctionnalités, dont les suivant (il y en a d'autres ...):
Il existe plusieurs sous-versions de Adobe Flash CC. Chacune introduit des nouvelles fonctionnalités, dont les suivant (il y en a d'autres ...):
* La version 2013 soutient Flash 13 et 64-bit et possibilité d'utiliser des services cloud (dépôt de fichiers, profiles, etc.)
* La version Flash CC 2013 soutient Flash 13 et 64-bit et possibilité d'utiliser des services cloud (dépôt de fichiers, profiles, etc.)
* La version 2013.1 prend en charge HTML5 Caneva.
* La version Flash CC 2013.1 prend en charge HTML5 Canevas.
* La version 2014 permet d'exporter des dessins en SVG, publier en WebGL, et offre un nouveau éditeur d'animations
* La version Flash CC 2014 permet d'exporter des dessins en SVG, publier en WebGL, et offre un nouveau éditeur d'animations
* La version 2014.1 soutient Flash 17, permet d'importer du SVG, pinceaux personnalisés, guides d'animation, ...
* La version Flash CC 2014.1 soutient Flash 17 et HTML5. Elle offre pinceaux personnalisés, guides d'animation.
* La version Flash CC 2015 améliore les animation cinématiques,....
* La version Animate CC 2015.1 change de nom et offre plusieurs petites améliorations. Abandon de ActionScript 2.


Changements majeurs des fonctionnalités CC version 2014.1 par rapport à CS6:
=== Les nouveautés clées d'Adobe Flash Professional CC 2014 ===
* Conception pour HTML5/Canevas la bibliothèque [CreateJS].
 
* Conception pour WebGL (qui peut profiter de cartes graphiques 3D accélérées)
Voici les principales nouveautés proposées par la version d'Adobe Flash Professional CC 2014
* Import de fichiers SVG ('''''enfin !''''')
 
* Meilleur support pour HTML5
*'''Exportation au format SVG :''' Exportez n'importe quelle image de votre projet Flash dans un fichier SVG que vous pouvez agrandir pour créer des affiches et autres supports promotionnels.  
*'''Interpolation des contours de largeur variable :''' Ajoutez une interpolation de forme à un contour de largeur variable afin de créer une animation à mesure que le contour change.
*'''WebGL pour l’animation :''' Publiez des animations au format WebGL afin qu'elles puissent être exécutées sans Flash Player dans les navigateurs modernes — et qu'elles puissent tirer parti de l'accélération matérielle GPU.
*'''Prise en charge des fichiers de projection :''' Publiez des vidéos sous forme de fichiers de projection Flash (.exe) afin de pouvoir les visionner sur les systèmes non équipés de Flash Player.
*'''Contours de largeur variable :''' Tracez des contours dont la largeur peut être modifiée en tout point. Créez et enregistrez des profils pour un contour, ou utilisez des présélections de largeur variable.
*'''Nouvel Éditeur de mouvement :''' Particulièrement attendu, l'Éditeur de mouvement mis à niveau permet de régler très précisément les propriétés d'interpolation de mouvement, comme les effets de couleur et les transformations.
*'''Annulation au niveau de l’objet :''' Cette fonction est de retour. L'annulation au niveau de l’objet permet d'annuler une action sur un objet sans toucher à celles effectuées plus récemment sur d'autres objets.
*'''Prise en charge de l'extension HTML5 :''' Flash Professional prend désormais en charge les panneaux HTML5, ce qui permet aux développeurs d'enrichir les applications de fonctionnalités et de contenus.
 
source : http://www.adobe.com/fr/products/flash/features.html
 
'''Eléments abandonnés:'''
* Les "common libraries" ont été enlevés dans Flash CC. Les boutons, sons et n'existent plus (enfin on peut les créer soi-même). Autre alternative: On peut les trouver dans Flash CS6:
** Dans Flash CC: File -> Import -> Open External library
** Ensuite dire ou est le fichier *.fla qui contient les objets de la bibliothèque, par exemple:
: C:\Program Files (x86)\Adobe\Adobe Flash CS6\Common\Configuration\Libraries\Buttons.fla
: etc.
* Pour la variante HTML5 il n'y a pas de composants. Les composants sont programmés en ActionScript et c'est donc logique. Par contre, Adobe pourrait fournir l'équivalent en JavaScript un jour ...
 
'''Principales nouveautés proposées par la version d'Adobe Animate CC 2015'''
* Import de fichiers SVG (voili cela fait 15 ans que l'on attend cela ...)


== Installation ==
== Installation ==


On vous conseille d'installer la version Anglaise, car la documentation pour la version françaises a souvent des retards importants.
On vous conseille d'installer la version Anglaise, car la documentation pour la version française a souvent des retards importants.


'''Avant''' de télécharger Flash, il règler les "Apps" dans l'outil '''Adobe Creative Cloud'''  (menu "roue" en haut à droite -> Préférences; TAB "Creative Cloud", Apps). Instructions plus détaillées selon [https://helpx.adobe.com/fr/creative-cloud/kb/change-installed-language.html Aide Creative Cloud / Réglage de la langue d’installation | CCM] (5/2015):
'''Avant''' de télécharger Flash, il règler les "Apps" dans l'outil '''Adobe Creative Cloud'''  (menu "roue" en haut à droite -> Préférences; TAB "Creative Cloud", Apps). Instructions plus détaillées selon [https://helpx.adobe.com/fr/creative-cloud/kb/change-installed-language.html Aide Creative Cloud / Réglage de la langue d’installation | CCM] (5/2015):
Ligne 57 : Ligne 81 :
Remarque : ce paramètre s’applique aux applications récemment installées avec Creative Cloud. Pour modifier la langue de l’interface utilisateur des applications actuellement installées, '''''désinstallez celles-ci, puis réinstallez-les à l’aide d’Adobe Application Manager''''.
Remarque : ce paramètre s’applique aux applications récemment installées avec Creative Cloud. Pour modifier la langue de l’interface utilisateur des applications actuellement installées, '''''désinstallez celles-ci, puis réinstallez-les à l’aide d’Adobe Application Manager''''.


Remarque: On trouve étonnant qu'il faut désinstaller. Pourquoi Adobe ne sait pas créer des applications multilangues ? Effectivement, d'après notre expérience, il ne suffit pas de changer de lange et de réinstaller, il faut désinstaller !
Remarque: On trouve étonnant qu'il faut désinstaller. Pourquoi Adobe ne sait pas créer des applications multilingues ? Effectivement, d'après notre expérience, il ne suffit pas de changer de langue et de réinstaller, il faut désinstaller !


== Démarrer Flash CC, Modèles et Aides ==
== Démarrer Flash CC ==


Lors du démarrage il est impératif (comme dans CS4 à CS6) de choisir le format cible:
Lors du démarrage d'un projet il est impératif (comme dans CS4 à CS6) de choisir le format cible:
* HTML5
* HTML5 Canvas (avec JavaScript)
* WebGL
* WebGL
* ActionScript3
* ActionScript3 (Flash)
* ActionScript2
* Air (variantes Desktop, Android, iOS)
* Air (variantes)
* ActionScript pur (Classes, Interfaces, ...)
* ActionScript pur
* JSFL pur
 
En Anglais (lors du premier démarrage):
En Anglais (lors du premier démarrage):
[[Fichier:Adobe Flash CC 2014-2015-05-05.png|none|thumb|1000x1000px]]


En français[[Fichier:Adobe Flash CC 2014-2015-05-05.png|vignette|Adobe_Flash_CC_2014 2015-05-05 version française|none|1000x1000px]]
[[Fichier:animate-cc-2015-1.png|vignette|Animate CC 2015.1 English version|none|800px]]
 
En français (environnement de travail en configuration "designer") pour une vielle version Flash CC 2014.1
 
[[Fichier:Adobe Flash CC 2014-2015-05-05.png|none|thumb|800px]]
 
== Documentation officielle ==
 
Les aides pour les produits Adobe ont souvent un peu de retard et souvent beaucoup de retard pour la version française:
 
* [https://helpx.adobe.com/animate/topics.html Animate CC help and support]
* [https://helpx.adobe.com/pdf/animate_reference.pdf Animate CC reference manual] (> pages PDF)
 
* [https://helpx.adobe.com/fr/animate/topics.html Formation et support / Aide de Animate CC]
* [https://helpx.adobe.com/ch_fr/animate.html Se former] (contient quelques tutos officiels en français)
 
''' Tutoriels vidéo de Flash cc'''
 
Il en existe pleins, par exemple:
 
* [http://tv.adobe.com/fr/watch/formations-vid%C3%A9o-pour-d%C3%A9veloppeurs/adobe-flash-professional-cc-concevoir-une-photo/ Concevoir une Photo]


== Configuration de l'espace de travail Flash ==
* [http://tv.adobe.com/fr/watch/formations-vid%C3%A9o-pour-d%C3%A9veloppeurs/adobe-flash-professional-cc-gestion-des-fichiers-dans-flash-cc/ Gestion de fichiers]


Voir [[Univers Flash CS5]]. L'interface est pareille ....
* [http://tv.adobe.com/fr/watch/formations-vid%C3%A9o-pour-d%C3%A9veloppeurs/adobe-flash-professional-cc-creer-une-tete-cartoon/ Créer une tête cartoon] Tutoriel 3
 
* [http://tv.adobe.com/fr/watch/apprendre-flash-professional-cc/creation-dapplications-autonomes-et-de-jeux-avec-air/ Créer des applications AIR] Tutoriel 4
 
* [http://tv.adobe.com/fr/watch/formations-vid%C3%A9o-pour-d%C3%A9veloppeurs/adobe-flash-cc-les-interpolations-de-mouvement/ Interpolation de movement] Tutoriel 5
 
* [http://tv.adobe.com/fr/watch/apprendre-flash-professional-cc/lexport-de-video-avec-adobe-media-encoder/ Utilisation du Media Encodre]
 
== Configuration de l'espace de travail Animate CC ==
 
Comme pour tous les produits Adobe on peut adapter la disposition des outils (menu déroulant en haut à droite). On conseille d'utiliser:
* la configuration "designer"
* la configuration "small screen" si vous avez un petit écran.
 
Pour savoir comment bouger les panneaux, voir [[Univers Flash CS5]] L'interface est très similaire ....


== Exportation de Flash CC à HTML5 ==
== Exportation de Flash CC à HTML5 ==
Ligne 81 : Ligne 139 :
Flash Creative Clouds est la première version de Flash qui permet de concevoir des animations HTML5/Canevas de façon intégrée. L'utilisateur peut choisir de produire en HTML5 et JavaScript en même titre qu'il peut choisir de produire en AS3, AS2 ou AIR. Les fonctionnalités sont toutefois plus limitées. Il existe aussi un outil qui facilite la migration.
Flash Creative Clouds est la première version de Flash qui permet de concevoir des animations HTML5/Canevas de façon intégrée. L'utilisateur peut choisir de produire en HTML5 et JavaScript en même titre qu'il peut choisir de produire en AS3, AS2 ou AIR. Les fonctionnalités sont toutefois plus limitées. Il existe aussi un outil qui facilite la migration.


* [fr] Menu Commandes -> Convertier en HTML5 Canevas à partir de formats de documents AS3
* [fr] Menu Commandes -> Convertir en HTML5 Canevas à partir de formats de documents AS3
* [en] Menu  
* [en] Menu Commands -> Convert to HTML5 Canevas ....
 
'''Cette exportation ne prend en charge que les graphismes et animations'''. Il va falloir traduire manuellement le code ActionScript.


== Liens ==
== Liens ==


* [http://www.adobe.com/ch_fr/products/flash/features.html Adobe Flash Professional CC/Nouveautés] (5/2015).
* [http://www.adobe.com/ch_fr/products/animate/features.html Adobe Flash Animate CC/Nouveautés] (5/2016).
* [https://helpx.adobe.com/fr/flash/topics.html Formation et support / Aide de Flash Professional]
* [https://helpx.adobe.com/fr/animate/topics.html Formation et support / Aide de Animate CC]

Dernière version du 21 mai 2016 à 19:43

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Introduction

L'environnement auteur Animate CC (qui s'appelait encore Flash CC en 2014) permet de développer des animations et applications interactives pour Flash, HTML5 et WebGL

Objectifs d'apprentissage

  • Se familiariser avec les différents outils et utilisations de l'outil auteur Flash CC

Version de Flash

Les prises d'écran et les mots qui font référence aux outils et fonctions de l'environnement Animate CC sont en anglais. On utilise des versions Anglaises de Animate et de Flash dans nos cours à TECFA puisqu'il existe beaucoup plus de tutoriels, exemples et livres etc. et qu'il est difficile de traduire certains termes dans un sens ou dans l'autre.

Prérequis

  • aucun

Prochaines étapes

Voir aussi, autres versions

Versions de Flash / Animate et majeurs changements

La première version de Flash Professional CC est sortie en 2013. Par rapport à Flash CS6, Flash CC comprend plusieurs nouvelles fonctions.

Il existe plusieurs sous-versions de Adobe Flash CC. Chacune introduit des nouvelles fonctionnalités, dont les suivant (il y en a d'autres ...):

  • La version Flash CC 2013 soutient Flash 13 et 64-bit et possibilité d'utiliser des services cloud (dépôt de fichiers, profiles, etc.)
  • La version Flash CC 2013.1 prend en charge HTML5 Canevas.
  • La version Flash CC 2014 permet d'exporter des dessins en SVG, publier en WebGL, et offre un nouveau éditeur d'animations
  • La version Flash CC 2014.1 soutient Flash 17 et HTML5. Elle offre pinceaux personnalisés, guides d'animation.
  • La version Flash CC 2015 améliore les animation cinématiques,....
  • La version Animate CC 2015.1 change de nom et offre plusieurs petites améliorations. Abandon de ActionScript 2.

Les nouveautés clées d'Adobe Flash Professional CC 2014

Voici les principales nouveautés proposées par la version d'Adobe Flash Professional CC 2014

  • Meilleur support pour HTML5
  • Exportation au format SVG : Exportez n'importe quelle image de votre projet Flash dans un fichier SVG que vous pouvez agrandir pour créer des affiches et autres supports promotionnels.
  • Interpolation des contours de largeur variable : Ajoutez une interpolation de forme à un contour de largeur variable afin de créer une animation à mesure que le contour change.
  • WebGL pour l’animation : Publiez des animations au format WebGL afin qu'elles puissent être exécutées sans Flash Player dans les navigateurs modernes — et qu'elles puissent tirer parti de l'accélération matérielle GPU.
  • Prise en charge des fichiers de projection : Publiez des vidéos sous forme de fichiers de projection Flash (.exe) afin de pouvoir les visionner sur les systèmes non équipés de Flash Player.
  • Contours de largeur variable : Tracez des contours dont la largeur peut être modifiée en tout point. Créez et enregistrez des profils pour un contour, ou utilisez des présélections de largeur variable.
  • Nouvel Éditeur de mouvement : Particulièrement attendu, l'Éditeur de mouvement mis à niveau permet de régler très précisément les propriétés d'interpolation de mouvement, comme les effets de couleur et les transformations.
  • Annulation au niveau de l’objet : Cette fonction est de retour. L'annulation au niveau de l’objet permet d'annuler une action sur un objet sans toucher à celles effectuées plus récemment sur d'autres objets.
  • Prise en charge de l'extension HTML5 : Flash Professional prend désormais en charge les panneaux HTML5, ce qui permet aux développeurs d'enrichir les applications de fonctionnalités et de contenus.

source : http://www.adobe.com/fr/products/flash/features.html

Eléments abandonnés:

  • Les "common libraries" ont été enlevés dans Flash CC. Les boutons, sons et n'existent plus (enfin on peut les créer soi-même). Autre alternative: On peut les trouver dans Flash CS6:
    • Dans Flash CC: File -> Import -> Open External library
    • Ensuite dire ou est le fichier *.fla qui contient les objets de la bibliothèque, par exemple:
C:\Program Files (x86)\Adobe\Adobe Flash CS6\Common\Configuration\Libraries\Buttons.fla
etc.
  • Pour la variante HTML5 il n'y a pas de composants. Les composants sont programmés en ActionScript et c'est donc logique. Par contre, Adobe pourrait fournir l'équivalent en JavaScript un jour ...

Principales nouveautés proposées par la version d'Adobe Animate CC 2015

  • Import de fichiers SVG (voili cela fait 15 ans que l'on attend cela ...)

Installation

On vous conseille d'installer la version Anglaise, car la documentation pour la version française a souvent des retards importants.

Avant de télécharger Flash, il règler les "Apps" dans l'outil Adobe Creative Cloud (menu "roue" en haut à droite -> Préférences; TAB "Creative Cloud", Apps). Instructions plus détaillées selon Aide Creative Cloud / Réglage de la langue d’installation | CCM (5/2015):

  • Dans l’application Creative Cloud pour le bureau, cliquez sur l’icône en forme de roue dentée, puis sélectionnez Préférences.
  • Dans la boîte de dialogue Préférences, cliquez sur Apps.
  • Dans la liste Langue de l’app, sélectionnez la langue d’installation.

Remarque : ce paramètre s’applique aux applications récemment installées avec Creative Cloud. Pour modifier la langue de l’interface utilisateur des applications actuellement installées, désinstallez celles-ci, puis réinstallez-les à l’aide d’Adobe Application Manager'.

Remarque: On trouve étonnant qu'il faut désinstaller. Pourquoi Adobe ne sait pas créer des applications multilingues ? Effectivement, d'après notre expérience, il ne suffit pas de changer de langue et de réinstaller, il faut désinstaller !

Démarrer Flash CC

Lors du démarrage d'un projet il est impératif (comme dans CS4 à CS6) de choisir le format cible:

  • HTML5 Canvas (avec JavaScript)
  • WebGL
  • ActionScript3 (Flash)
  • Air (variantes Desktop, Android, iOS)
  • ActionScript pur (Classes, Interfaces, ...)
  • JSFL pur

En Anglais (lors du premier démarrage):

Animate CC 2015.1 English version

En français (environnement de travail en configuration "designer") pour une vielle version Flash CC 2014.1

Adobe Flash CC 2014-2015-05-05.png

Documentation officielle

Les aides pour les produits Adobe ont souvent un peu de retard et souvent beaucoup de retard pour la version française:

Tutoriels vidéo de Flash cc

Il en existe pleins, par exemple:

Configuration de l'espace de travail Animate CC

Comme pour tous les produits Adobe on peut adapter la disposition des outils (menu déroulant en haut à droite). On conseille d'utiliser:

  • la configuration "designer"
  • la configuration "small screen" si vous avez un petit écran.

Pour savoir comment bouger les panneaux, voir Univers Flash CS5 L'interface est très similaire ....

Exportation de Flash CC à HTML5

Flash Creative Clouds est la première version de Flash qui permet de concevoir des animations HTML5/Canevas de façon intégrée. L'utilisateur peut choisir de produire en HTML5 et JavaScript en même titre qu'il peut choisir de produire en AS3, AS2 ou AIR. Les fonctionnalités sont toutefois plus limitées. Il existe aussi un outil qui facilite la migration.

  • [fr] Menu Commandes -> Convertir en HTML5 Canevas à partir de formats de documents AS3
  • [en] Menu Commands -> Convert to HTML5 Canevas ....

Cette exportation ne prend en charge que les graphismes et animations. Il va falloir traduire manuellement le code ActionScript.

Liens