« Univers Animate CC » : différence entre les versions
(27 versions intermédiaires par 2 utilisateurs non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
{{Ebauche}} | {{Ebauche}} | ||
{{Tutoriels Flash| | {{Tutoriels Flash|CC 2014.1 à CC 2015.1|débutant}} | ||
== Introduction == | == 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]] | |||
<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 | 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 | 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 | * 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 | * 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 | ||
* Import de | |||
* 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 | 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 | 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): | |||
[[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] | |||
* [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] | |||
* [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 71 : | 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 -> | * [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/ | * [http://www.adobe.com/ch_fr/products/animate/features.html Adobe Flash Animate CC/Nouveautés] (5/2016). | ||
* [https://helpx.adobe.com/fr/ | * [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
- Flash CS3 - Créer et modifier les calques et les images
- Flash CS4 - Créer des dessins avec les outils de dessin
Voir aussi, autres versions
- Univers Flash CS3
- Univers Flash CS4
- Univers Flash CS5 (2010)
- Univers Flash CS6 (2012)
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):
En français (environnement de travail en configuration "designer") pour une vielle version Flash CC 2014.1
Documentation officielle
Les aides pour les produits Adobe ont souvent un peu de retard et souvent beaucoup de retard pour la version française:
- Animate CC help and support
- Animate CC reference manual (> pages PDF)
- Formation et support / Aide de Animate CC
- Se former (contient quelques tutos officiels en français)
Tutoriels vidéo de Flash cc
Il en existe pleins, par exemple:
- Créer une tête cartoon Tutoriel 3
- Créer des applications AIR Tutoriel 4
- Interpolation de movement Tutoriel 5
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.