Atelier WebMaster 2012: Animation et interaction avec Flash

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

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

• juin 2017 (si au moins 2-3 personnes manifestent leur intérêt ....)
• Animation et interaction avec Flash (Ancienne brochure et formulaire d'inscription/inscription en ligne)

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

• Notes de cours en format PDF ou imprimé/broché via Pediapress
• Tutoriels Flash (inventaire systématique des notes de cours)

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)

• Flash CS4 - Créer des dessins avec les outils de dessin
  • configuration de l'environnement pour le dessin - le properties panel
  • Strokes et fills (traits et remplissages)
  • Le tools panel
  • Les modes de dessin (fusion/forme vs. objet)
  • Exploration de quelques outils de dessin

• Créer et modifier les calques et les images (layers et frames)(DKS)
• Utilisation de clipart (Quelques ressources sont identifiés dans en:Clipart)
• Flash CS4 - Transformer des dessins (Kalli)
• Flash CS4 - Arranger des dessins (Kalli)
• Flash CS4 - Couleurs et gradients (Kalli)
• Flash CS5 - Dessin avec l'outil plume (Kalli)

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

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

• Storyboards avec une grille simple
• Flow Chart (Angl.) et UML activity diagram
• Décrire des activités avec Compendium LD
  • Tutoriel CompendiumLD sur Edutechwiki (fr)
  • Tutoriel Compendium LD de Compendium (en)

Mardi

Créer des animations en Flash

(mardi A,B - 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 - Animation image par image (frame-by-frame animation)
• Flash CS4 - Interpolation de mouvement (motion tweening)

(mardi C - Kalli)

• Flash CS4 - Morphing (Interpolation de forme, shape tweening) (Kalli)

Les boutons et les événements

(mardi D - Ioana)

• Flash CS4 - Boutons
  • Utiliser des boutons Flash
  • Créer vos propres boutons Flash
• Premier contact avec ActionScript (navigation dans la timeline)
  • Flash CS5 - Editeur ActionScript et fragments de code
  • Introduction à ActionScript (gestion d'événements, navigation dans le scénario, play/stop)
  • Création de "sites web" avec Flash (menus de navigation)

Mercredi

Les boutons composants

(mercredi A - Ioana)

• Flash CS5 - Composant bouton (CS4) (une alternative simple aux boutons "traditionnels")
  • Répétition de la séance D du mardi avec d'autres boutons
  • Exemple: flash-cs4-simple-slide-show-menu-fewcode.html - flash-cs4-simple-slide-show-menu-fewcode.fla

Les clips

(mercredi B - DKS)

• Flash CS4 - Interpolation de mouvement (rappel)
  • Exemple pinguin: penguin-clip.swf - penguin-clip.fla
• Flash CS4 - Symboles et clips
  • Repenser un fichier Flash comme un assemblage d'objets (encore)
  • Start/stop de clips (on va insérer une de vos animations dans une scène en tant que clip)

Interactivité

(mercredi C - Ioana)

• Flash AS3 - Objets interactifs
  • Simple interactivité et animation avec ActionScript (changer la position, la taille etc. d'un objet).
• Drag and drop (glisser/poser, s'il reste du temps)

Animation

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

• Flash CS4 - Interpolation de mouvement classique (motion tweening de CS3) (DKS)
• en:Flash classic motion tweening tutorial (en Anglais, pour les motion guides ....)

Jeudi

Les vidéos

(jeudi A/B - DKS)

Simple utilisation d'une vidéo

• Flash CS4 - Composants videos (première partie)
  • Utiliser une vidéo avec ce composant
  • Conversion et édition légère de vidéos avec l'outil Adobe Media Encoder
  • A télécharger: Ratatouille.mp4
• Télécharger des vidéos
  • Video DownloadHelper (extension Firefox)
  • Download YouTube Videos + Flash Video Downloader / Download-Helper (extension alternative)

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)

• Flash CS5 - Vidéos augmentées
  • 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/

Vidéos augmentés

• Flash CS5 - Vidéos augmentées
  • Sauts vers des points de repère
  • Gestion d'événements de la vidéo

Manipulation de son et timer

(jeudi C - DKS)

• Flash CS4 - Son (Utilisation et édition du son)
• flash-cs3-cloud-animation-sound.fla
• Utilisation d'un timer pour lancer une musique au bout de 5 secondes: Flash CS5 - Timer

Dessin, texte, bitmaps

(jeudi D DKS)

• Flash CS4 - Texte (très brièvement !)
• Flash CS4 - Utilisation et modification de bitmaps

Les composantes

(jeudi D - DKS ))

• Flash CS4 - Composants (petit survol pour info, sans plus !)

Vendredi

Animations Flash (suite)

(Vendredi A - Kalli)

• Flash CS4 - Cinématique inversée (Inverse kinematics)

Option: Animation (suite)

(vendredi B DKS)

• Flash CS4 - Graphiques 3D
• Motion presets (c.f. Flash CS4 - Interpolation de mouvement)
• Les filtres (petit rappel, c.f. Flash CS4 - Couleurs et gradients)
• Flash CS4 - Calques de masque
• la forêt (Exemple d^' utilisation clips de library, décrit dans AS3 - Survol du langage ActionScript)
  • Source: flash-as3-trees-generated.fla

Option: Programmation avec des classes

(vendredi B Ioana)

• Flash AS3 - Programmer avec une classe

ActionScript - librairies

(vendredi B/C)

• Principes de la programmation ActionScript (fichiers *.as) et utilisation de grandes librairies ActionScript (interpolation, 3D, particules, etc.)
• Définition d'un classpath pour une librairie
• Flash CS4 - Utilisation de librairies
• Flash using ActionScript libraries tutorial
• en:AS3 tweening platform

La librarairie Greensock (tweening)

• http://www.greensock.com/v11/ (téléchargement)
• Ensuite vous devez extraire le fichier greensock.swc du *.zip
• Utilisez les explorers dans: http://www.greensock.com/tweenmax/
• Ensuite vous pouvez modifier l'exemple canon2.fla

Répertoires avec des exemples "Greensock":

• http://tecfa.unige.ch/guides/flash/ex5/greensock
• http://tecfa.unige.ch/guides/flash/ex4/tween-lite/ (CS4)
• http://tecfa.unige.ch/guides/flash/ex/greensock/ (CS3)
• Exemple ludiciels:
  • http://tecfa.unige.ch/guides/flash/ex5/counting-games/
  • version originale (C. Pelletier)

La librairie Flint (Particle physics)

• Visite de http://flintparticles.org/examples
• Téléchargez la librairie et copiez/collez un exemple ....

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

• Voir par exemple notre petite liste (Edutechwiki Anglais)

• Génération d'objets / Cinématique inverse:
  • http://tecfa.unige.ch/guides/flash/ex5/inverse-kinematics/

Publication du contenu Flash & ressources

(vendredi D - DKS)

• Flash AS3 - Chargement de fichiers SWF et d'images (à titre d'information)
• Options de publication, Intégration dans HTML, etc.
  • En gros: Choisissez vos options dans File->Publish settings (le HTML nécessaire sera crée automatiquement)
  • Syntaxe de la balise Objet
  • 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

• Flash CS4 - Ressources (Liens vers d'autres sites)

• Tutoriels Flash (index des ressources Flash dans ce wiki)

• "Livre" PDF/Pediapress

• Flash - dictionnaire anglais français

Manuels les plus importants chez Adobe

• Using Adobe Flash CS4 Professional (Adobe)
• Utilisation d'Adobe Flash CS4 Professional (pour la version française...)

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