« Atelier WebMaster 2012: Animation et interaction avec Flash » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
 
(37 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{Tutoriels Flash|CS5, CS4 et CS3|Débutants}}
{{Tutoriels Flash|CC|Débutants}}
[http://tecfa.unige.ch/formcont/ Cours de formation continue offert par TECFA], Université de Genève
[http://tecfa.unige.ch/formcont/ Cours de formation continue offert par TECFA], Université de Genève


'''Prochaines éditions de la formation Flash à Genève''':  
'''Prochaines éditions de la formation Animate CC à Genève''':  
* '''printemps ou octobre 2012'''. La formation aura lieu à partir de 3-4 inscriptions et elle sera annoncée une fois 2-3 personnes auront manifesté leur intérêt. Le nombre des participant(e)s est à priori limité à 6.
* '''juin 2017''' (si au moins 2-3 personnes manifestent leur intérêt ....)
* Brochure et formulaire d'inscription (édition mai 2011, à titre d'information): [http://www.unige.ch/formcont/animationflash.html Animation et interaction avec Flash]
* [http://www.unige.ch/formcont/animationflash.html Animation et interaction avec Flash] (Ancienne brochure et formulaire d'inscription/inscription en ligne)
* '''Manifestez votre intérêt''' à [[User:Daniel K. Schneider|D. Schneider]], ainsi il y aura plus de chances que la formation ait lieu ......


'''Matériel d'enseignement''' (voir aussi et surtout le programme détaillé ci-dessous)
'''Matériel d'enseignement''' (voir aussi et surtout le programme détaillé ci-dessous)
Ligne 11 : Ligne 10 :
* [[Tutoriels Flash]] (inventaire systématique des notes de cours)
* [[Tutoriels Flash]] (inventaire systématique des notes de cours)


''Programme provisoire''
'''Ancien programme'''
 
Le nouveau programme sera adapté aux possibilités de Animate CC, c-a-d le développement pour HTML5/JavaScript


== Description ==
== Description ==
Ligne 18 : Ligne 19 :


:Conception et réalisation d'animations et de programmes interactives avec Flash.
:Conception et réalisation d'animations et de programmes interactives avec Flash.
:Maîtriser l'environnement Adobe Flash CS5;
:Maîtriser l'environnement Adobe Animate CC;
:Produire des dessins et des animations;  
:Produire des dessins et des animations;  
:Travailler avec des images, du son et de la vidéo;
:Travailler avec des images, du son et de la vidéo;
:Créer des petites applications interactives avec ActionScript 3
:Créer des petites applications interactives avec ActionScript 3
:Utiliser des composants et des librairies Flash [http://www.freewaregadget.com flash video recorder]
:Utiliser des composants et des librairies Flash


; Public
; Public
Ligne 38 : Ligne 39 :
== Lundi ==
== Lundi ==


=== L'univers Flash ===
=== L'univers Animate CC ===
(lundi A - DKS)
(lundi A - DKS)


* La stratégie [[Flash]] de Adobe
* La stratégie HTML5/[[Flash]] de Adobe
** Les clients Flash et Air. Flash, ActionScript et Flex. Les outils Flash Professional et Flex Builder
** Les clients Flash et Air. Flash, ActionScript et Flex. Les outils Flash Professional et Flex Builder


* [[Univers Flash CS5]] (Flash Professional)
* [[Univers Flash CC]] (Flash Professional)
** Petite comparaison entre CS5, CS4 (Flash 10) et CS3 (Flash 9)
** Petite comparaison entre CC, CS6, CS5.5, CS5, CS4 (Flash 10) et CS3 (Flash 9)
** Panorama des outils Flash et les scénarios d'utilisation de Flash
** Panorama des outils Flash et les scénarios d'utilisation de Flash
** Configuration de l'espace de travail Flash
** Configuration de l'espace de travail Flash
** Outils et panneaux des logiciels Flash CS5
** Outils et panneaux de Flash CS5


=== Dessiner en Flash  ===
=== Dessiner en Flash  ===


(lundi B,C,D - DKS/Kalli)
(lundi B,C,D - Kalli)


* [[Flash CS4 - Créer des dessins avec les outils de dessin]](DKS)
* [[Flash CS4 - Créer des dessins avec les outils de dessin]]
** configuration de l'environnement pour le dessin - le properties panel
** configuration de l'environnement pour le dessin - le properties panel
** ''Strokes'' et ''fills'' (traits et remplissages)
** ''Strokes'' et ''fills'' (traits et remplissages)
Ligne 68 : Ligne 69 :
* [[Flash CS5 - Dessin avec l'outil plume]] (Kalli)
* [[Flash CS5 - Dessin avec l'outil plume]] (Kalli)


* Une petite animation pour terminer (c.f. programme de mardi) (DKS)
* Une petite animation pour terminer (c.f. programme de mardi)


(si le temps permet,si non, on trouvera un moment un autre jour)
(si le temps permet,si non, on trouvera un moment un autre jour)
Ligne 83 : Ligne 84 :
(mardi A,B - DKS)
(mardi A,B - DKS)


* [[Flash CS4 - Principes de l'animation]] (types d'animations et la notion de keyframe) (DKS)
* [[Flash CS4 - Principes de l'animation]] (types d'animations et la notion de keyframe)  
* [[Flash CS4 - Symboles et clips]] (clips imbriqués, animations dans des animations, première partie seulement !)
* [[Flash CS4 - Symboles et clips]] (clips imbriqués, animations dans des animations, première partie seulement !)
* [[Flash CS4 - Animation image par image]] (''frame-by-frame animation'')
* [[Flash CS4 - Animation image par image]] (''frame-by-frame animation'')
* [[Flash CS4 - Interpolation de mouvement]] (''motion tweening'')(DKS)
* [[Flash CS4 - Interpolation de mouvement]] (''motion tweening'')


(mardi C - Kalli)
(mardi C - Kalli)
Ligne 93 : Ligne 94 :
=== Les boutons et les événements  ===
=== Les boutons et les événements  ===


(mardi D - DKS)
(mardi D - Ioana)
* [[Flash CS4 - Boutons]]
* [[Flash CS4 - Boutons]]
** Utiliser des boutons Flash
** Utiliser des boutons Flash
Ligne 104 : Ligne 105 :
== Mercredi ==
== Mercredi ==


=== Les boutons composants et interpolations de movement ===
=== Les boutons composants ===


(mercredi A - DKS)
(mercredi A - Ioana)
* [[Flash CS4 - Interpolation de mouvement]]
 
** Exemple pinguin: [http://tecfa.unige.ch/guides/flash/ex4/embedded-movie-clips/penguin-clip.swf penguin-clip.swf] - [http://tecfa.unige.ch/guides/flash/ex4/embedded-movie-clips/penguin-clip.fla penguin-clip.fla]
* [[Flash CS5 - Composant bouton]] ([[Flash CS4 - Composant bouton|CS4]]) (une alternative simple aux boutons "traditionnels")
* [[Flash CS4 - Composant bouton]] (une alternative simple aux boutons "traditionnels")
** Répétition de la séance D du mardi avec d'autres boutons
** Répétition de la séance D du mardi avec d'autres boutons
** Exemple: [http://tecfa.unige.ch/guides/flash/ex4/components-intro/flash-cs4-simple-slide-show-menu-fewcode.html flash-cs4-simple-slide-show-menu-fewcode.html] - [http://tecfa.unige.ch/guides/flash/ex4/components-intro/flash-cs4-simple-slide-show-menu-fewcode.fla flash-cs4-simple-slide-show-menu-fewcode.fla]
** Exemple: [http://tecfa.unige.ch/guides/flash/ex4/components-intro/flash-cs4-simple-slide-show-menu-fewcode.html flash-cs4-simple-slide-show-menu-fewcode.html] - [http://tecfa.unige.ch/guides/flash/ex4/components-intro/flash-cs4-simple-slide-show-menu-fewcode.fla flash-cs4-simple-slide-show-menu-fewcode.fla]
Ligne 116 : Ligne 116 :


(mercredi B - DKS)
(mercredi B - DKS)
* [[Flash CS4 - Interpolation de mouvement]] (rappel)
** Exemple pinguin: [http://tecfa.unige.ch/guides/flash/ex4/embedded-movie-clips/penguin-clip.swf penguin-clip.swf] - [http://tecfa.unige.ch/guides/flash/ex4/embedded-movie-clips/penguin-clip.fla penguin-clip.fla]
* [[Flash CS4 - Symboles et clips]]  
* [[Flash CS4 - Symboles et clips]]  
** Repenser un fichier Flash comme un assemblage d'objets (encore)
** Repenser un fichier Flash comme un assemblage d'objets (encore)
Ligne 122 : Ligne 124 :
=== Interactivité ===
=== Interactivité ===


(mercredi C - DKS)
(mercredi C - Ioana)
* [[Flash AS3 - Objets interactifs]] (DKS)
* [[Flash AS3 - Objets interactifs]]  
** Simple interactivité et animation avec ActionScript (changer la position, la taille etc. d'un objet).
** Simple interactivité et animation avec ActionScript (changer la position, la taille etc. d'un objet).
* [[Flash tutoriel drag and drop|Drag and drop]] (glisser/poser, s'il reste du temps)
* [[Flash tutoriel drag and drop|Drag and drop]] (glisser/poser, s'il reste du temps)
Ligne 156 : Ligne 158 :
* [[Flash CS5 - Vidéos augmentées]]  
* [[Flash CS5 - Vidéos augmentées]]  
** [[Flash_CS5_-_Vidéos_augmentées#Exemple_simple_sous-titres_avec_timed_text|Exemple simple sous-titres avec timed text]] (exemple discuté en classe)
** [[Flash_CS5_-_Vidéos_augmentées#Exemple_simple_sous-titres_avec_timed_text|Exemple simple sous-titres avec timed text]] (exemple discuté en classe)
** http://tecfa.unige.ch/guides/flash/ex5/component-video-intro/office-dks3.flv
** Répertoire d'exemples: http://tecfa.unige.ch/guides/flash/ex5/component-video-intro/
** Répertoire d'exemples: http://tecfa.unige.ch/guides/flash/ex5/component-video-intro/


Ligne 192 : Ligne 195 :
* [[Flash CS4 - Cinématique inversée]] (Inverse kinematics)
* [[Flash CS4 - Cinématique inversée]] (Inverse kinematics)


=== Animation (suite) ===
=== Option: Animation (suite) ===


(vendredi B DKS/Kalli)
(vendredi B DKS)


* [[Flash CS4 - Graphiques 3D]]  
* [[Flash CS4 - Graphiques 3D]]  
Ligne 200 : Ligne 203 :
* Les filtres (petit rappel, c.f. [[Flash CS4 - Couleurs et gradients]])
* Les filtres (petit rappel, c.f. [[Flash CS4 - Couleurs et gradients]])
* [[Flash CS4 - Calques de masque]]
* [[Flash CS4 - Calques de masque]]
* [http://tecfa.unige.ch/guides/flash/ex5/as3-timeline/flash-as3-trees-generated.html la forêt] (Rappel utilisation clips de library, décrit dans [[AS3 - Survol du langage ActionScript]])
* [http://tecfa.unige.ch/guides/flash/ex5/as3-timeline/flash-as3-trees-generated.html la forêt] (Exemple d^' utilisation clips de library, décrit dans [[AS3 - Survol du langage ActionScript]])
** Source: [http://tecfa.unige.ch/guides/flash/ex5/as3-timeline/flash-as3-trees-generated.fla flash-as3-trees-generated.fla]
 
=== Option: Programmation avec des classes ===
 
(vendredi B Ioana)
 
* [[Flash AS3 - Programmer avec une classe]]


=== ActionScript - librairies ===
=== ActionScript - librairies ===
Ligne 215 : Ligne 225 :
* Ensuite vous devez extraire le fichier greensock.swc du *.zip
* Ensuite vous devez extraire le fichier greensock.swc du *.zip
* Utilisez les explorers dans: http://www.greensock.com/tweenmax/
* Utilisez les explorers dans: http://www.greensock.com/tweenmax/
* Ensuite vous pouvez modifier l'exemple [http://tecfa.unige.ch/guides/flash/ex5/greensock/canon2.fla canon2.fla]


Répertoires avec des exemples "Greensock":
Répertoires avec des exemples "Greensock":
Ligne 235 : Ligne 246 :
** http://tecfa.unige.ch/guides/flash/ex5/inverse-kinematics/
** http://tecfa.unige.ch/guides/flash/ex5/inverse-kinematics/


=== Publication du contenu Flash ===
=== Publication du contenu Flash & ressources ===
 
(vendredi D - DKS)
(vendredi D - DKS)


* [[Flash - Bonnes pratiques]]
* [[Flash AS3 - Chargement de fichiers SWF et d'images]] (à titre d'information)
* [[Flash AS3 - Chargement de fichiers SWF et d'images]] (à titre d'information)
* Options de publication, Intégration dans HTML, etc.  
* Options de publication, Intégration dans HTML, etc.  
* Sujets à reprendre ? / Questions
** En gros: Choisissez vos options dans File->Publish settings (le HTML nécessaire sera crée automatiquement)
** [http://kb2.adobe.com/fr/cps/415/tn_4150.html Syntaxe de la balise Objet]
** [http://help.adobe.com/fr_FR/flash/cs/using/WSd60f23110762d6b883b18f10cb1fe1af6-7bd1a.html#WSd60f23110762d6b883b18f10cb1fe1af6-7bcca Options de publication] (chez Adobe)
* [[Adobe AIR]]
 
; Pour aller plus loin
* [[Flash - Bonnes pratiques]] (rappel de quelques principes)
* ActionScript: [[AS3 - Survol du langage ActionScript]], [[Flash AS3 - display list]], [[Flash AS3 - Programmer avec une classe]] etc.
* [[Flash CS4 - Ressources]]


== Ressources ==
== Ressources ==
Ligne 270 : Ligne 287 :
On travaillera avec Adobe Flash CS5, version Anglaise
On travaillera avec Adobe Flash CS5, version Anglaise


Les matériaux de cours seront disponibles en ligne et on mettra à disposition des ordinateurs pour les travaux pratiques. Les participants peuvent amener leur propre ordinateur portable (à condition d'avoir Flash CS4 ou CS5 installé)
Les matériaux de cours seront disponibles en ligne et on mettra à disposition des ordinateurs pour les travaux pratiques. Les participants peuvent amener leur propre ordinateur portable (à condition d'avoir Flash CS4 ou CS5.5 ou CS5 installé). Si disponible en juin, on montrera également CS6.


=== Dates et horaires ===
=== Dates et horaires ===


; '''Dates'''
; '''Dates'''
: à déterminer ...
: 4-8 juin 2012
; '''Horaires'''
; '''Horaires'''
: 9h00 - 12h30 et 14h-17h00 (cours et travaux pratiques)
: 9h00 - 12h30 et 14h-17h00 (cours et travaux pratiques)
Ligne 288 : Ligne 305 :
; Inscription
; Inscription
: [http://www.unige.ch/formcont Service formation continue]
: [http://www.unige.ch/formcont Service formation continue]
: Sophie KNUPFER
: Université de Genève 1211 Genève 4
: Université de Genève 1211 Genève 4
: Tél.: 022 / 379 78 33 Fax: 022 / 379 78 30
: Tél.: 022 / 379 78 42 Fax: 022 / 379 78 30
: E-mail: sophie-knupfer@formcont.unige.ch
: E-mail: christelle.germann@unige.ch


;'''Téléchargement de la jolie brochure et du formulare d'inscription'''
;'''Téléchargement de la jolie brochure et du formulaire d'inscription'''
: A partir de fin février 2011
:[http://www.unige.ch/formcont/animationflash.html Animation et interaction avec Flash] (brochure et formulaire d'inscription/inscription en ligne)
: (ancienne brochure: [http://www.unige.ch/formcont/animationflash.html Animation et interaction avec Flash])
<!-- : ([http://tecfa.unige.ch/formcont/webmaster2010/A5-animation-flash.pdf Copie du programme/formulaire] sur le site de TECFA) -->
<!-- : ([http://tecfa.unige.ch/formcont/webmaster2010/A5-animation-flash.pdf Copie du programme/formulaire] sur le site de TECFA) -->


Ligne 303 : Ligne 318 :
; '''Lieu'''  
; '''Lieu'''  
: TECFA, FPSE, Université de Genève
: TECFA, FPSE, Université de Genève
: '''Uni Pignon'''
: '''Uni Pignon''', Salle S-01 (sous-sol)
: '''42 bd. du Pont d'Arve'''
: '''42 bd. du Pont d'Arve'''
: 1205 Genève
: 1205 Genève

Dernière version du 27 septembre 2016 à 09:07

Cours de formation continue offert par TECFA, Université de Genève

Prochaines éditions de la formation Animate CC à Genève:

Matériel d'enseignement (voir aussi et surtout le programme détaillé ci-dessous)

Ancien programme

Le nouveau programme sera adapté aux possibilités de Animate CC, c-a-d le développement pour HTML5/JavaScript

Description

Objectifs
Conception et réalisation d'animations et de programmes interactives avec Flash.
Maîtriser l'environnement Adobe Animate CC;
Produire des dessins et des animations;
Travailler avec des images, du son et de la vidéo;
Créer des petites applications interactives avec ActionScript 3
Utiliser des composants et des librairies Flash
Public

Ce cours est particulièrement destiné aux enseignants, aux documentalistes, aux spécialistes multimédia et aux concepteurs web. Il est également adapté à tout public désirant perfectionner ses connaissances techniques dans le domaine du multimédia.

Prérequis
  • Utilisation de Windows
  • Quelques connaissances de base en programmation ainsi que des notions d'Anglais seraient un atout supplémentaire, mais ne sont pas obligatoires.

Lundi

L'univers Animate CC

(lundi A - DKS)

  • La stratégie HTML5/Flash de Adobe
    • Les clients Flash et Air. Flash, ActionScript et Flex. Les outils Flash Professional et Flex Builder
  • Univers Flash CC (Flash Professional)
    • Petite comparaison entre CC, CS6, CS5.5, CS5, CS4 (Flash 10) et CS3 (Flash 9)
    • Panorama des outils Flash et les scénarios d'utilisation de Flash
    • Configuration de l'espace de travail Flash
    • Outils et panneaux de Flash CS5

Dessiner en Flash

(lundi B,C,D - Kalli)

  • Une petite animation pour terminer (c.f. programme de mardi)

(si le temps permet,si non, on trouvera un moment un autre jour)

Mardi

Créer des animations en Flash

(mardi A,B - DKS)

(mardi C - Kalli)

Les boutons et les événements

(mardi D - Ioana)

Mercredi

Les boutons composants

(mercredi A - Ioana)

Les clips

(mercredi B - DKS)

Interactivité

(mercredi C - Ioana)

Animation

(mercredi D - DKS ... s'il reste du temps)

Jeudi

Les vidéos

(jeudi A/B - DKS)

Simple utilisation d'une vidéo
Importation d'une vidéo dans la timeline ou dans un clip
  • Mettre une petite video dans la timeline et ajouter des animations
    • Vous pouvez reprendre la vidéo utilisée dans l'exemple précédant
Sous-titres (captions)
Vidéos augmentés

Manipulation de son et timer

(jeudi C - DKS)

Dessin, texte, bitmaps

(jeudi D DKS)

Les composantes

(jeudi D - DKS ))

Vendredi

Animations Flash (suite)

(Vendredi A - Kalli)

Option: Animation (suite)

(vendredi B DKS)

Option: Programmation avec des classes

(vendredi B Ioana)

ActionScript - librairies

(vendredi B/C)

La librarairie Greensock (tweening)

Répertoires avec des exemples "Greensock":

La librairie Flint (Particle physics)

Autres exemples Il existe des dizaines de librairies puissantes et intéressantes

Publication du contenu Flash & ressources

(vendredi D - DKS)

Pour aller plus loin

Ressources

Manuels les plus importants chez Adobe

Organisation

Cette formation est offerte par TECFA, l'unité des technologies éducatives de la Faculté de psychologie et des sciences de l'éducation.

Ce cours est dispensé sous forme de travaux pratiques.

Outils

On travaillera avec Adobe Flash CS5, version Anglaise

Les matériaux de cours seront disponibles en ligne et on mettra à disposition des ordinateurs pour les travaux pratiques. Les participants peuvent amener leur propre ordinateur portable (à condition d'avoir Flash CS4 ou CS5.5 ou CS5 installé). Si disponible en juin, on montrera également CS6.

Dates et horaires

Dates
4-8 juin 2012
Horaires
9h00 - 12h30 et 14h-17h00 (cours et travaux pratiques)
17h00 - 19h00 (pratique libre)

Renseignements pratiques

Evaluation et crédits

Les participants peuvent obtenir 2 crédits ECTS. L’évaluation portera sur des exercices exécutés durant la pratique libre et sur un petit projet d’environ 16h de travail à rendre 2 semaines après le cours. Une simple attestation est fournie en cas de participation « normale ».

Inscription
Service formation continue
Université de Genève 1211 Genève 4
Tél.: 022 / 379 78 42 Fax: 022 / 379 78 30
E-mail: christelle.germann@unige.ch
Téléchargement de la jolie brochure et du formulaire d'inscription
Animation et interaction avec Flash (brochure et formulaire d'inscription/inscription en ligne)
Nombre de participants
Le nombre max. de participants est fixé à 6 (on peut éventuellement doubler ce nombre à condition de le savoir 2 mois en avant, c-a-d. il va falloir engager des encadreurs supplémentaires et trouver une salle). Les demandes sont enregistrées par ordre d'arrivée. La formation aura lieu à partir de 3-4 participant(e)s inscrit(e)s.
Lieu
TECFA, FPSE, Université de Genève
Uni Pignon, Salle S-01 (sous-sol)
42 bd. du Pont d'Arve
1205 Genève
Finance de participation
CHF 1950.- (avec attestation)
CHF 2450.- (2 Crédits ECTS)
à verser dès réception de la confirmation de l'inscription.
Informations et renseignements sur le contenu
Daniel.Schneider@unige.ch (Daniel K. Schneider)
Tél.: 022 / 379 93 77