M40 - David Tardiveau - Flash
Flash -> swf
à l'origine flash était essentiellement consacré à la création graphique
maintenant il est utilisé pour l'Internet et pour les dvd-rom -> on line et offline
sumo application entièrement développée en Flash
Historique de flash :
1996 - Flash 1
2000 - Flash 5
2003 Flash MX 2004 - AS2 (action script)
2005-Flash 8 cette version est plus adaptée pour les graphistes
2007 - AS3 (action script) pour les développeurs programmation Orienté objet
Du fichier Fla natif de Flash va être compilé en .swf
Le navigateur internet a un plug-in pour lire les .swf de Flash
transformer un "swf "en "Projecteur" c'est une application mac et pc le projecteur est uniquement offline
AIR technologie très intéressante :
la technologie Air va pouvoir faire des applications online offline
L'action script - extension du langage
Generator 2001
passerelle vers coldfusion
shockwave exportation de
Flash media serveur (serveur de streaming pour conférence) "redfive" gratuit
Flash Lite solution diffusion swf sur appareils mobiles
Flex développe en AS3 logiciel de développement combiné avec XML génère du swf
Flash paper concurrent d'acrobat
Pour le son c'est le MP3 qui est supporté par Flash
Pour la vidéo on peut utiliser maintenant le codec H264 compression très intéressant rapport qualité/poids
1-Introduction Flash :
Scène :
Scénario :
Bibliothèque : les acteurs sont des symboles - l'ensemble des acteurs c'est la distribution - l'ensemble des symboles c'est une bibliothèque
une bibliothèque va contenir des symboles
Attention pour l'enregistrement des fichiers ne pas les nommer avec caractères accentués et bannir les caractères spéciaux
1-Configuration de l'animation :
Définir une largeur et une hauteur
Définir la couleur de la scène
Définir cadence 50ips
menu/modification/document
Quelle est la bonne surface web (largeur hauteur en pixel) pour un document web?
(La Bonne Surface page web 900x600 pixels suggestion du prof)
Que signifie régler la cadence dans Flash? cela consiste à définir la rapidité d'exécution du code 50 images/secondes par défaut
sauf si l'animation je veux l'exporter en .mov on doit mettre 25 images/secondes pour être caler si on veut intégrer le .mov dans une vidéo
Comprendre la couleur en hexadécimal :
#3399CC mode de calcul d'une couleur en hexadécimal
comment cela fonctionne ?
F1 1F FF
les nuances
0-------------------> 10
0-------------------->20
0-------------------->100
CMJN imprimerie cyan magenta jaune
noir= cyan+magenta+jaune
RVB vidéo = rouge+vert+bleu
Le blanc = c'est une lumière de rouge +vert+bleu
1- combiner les couleurs
RVB
CMJ
prendre la lettre qui n'est pas en face et cela donne la couleur
2 - dosage de couleur
de 0 --------------> 100% CMJN
de 0--------------- > 255 256 valeurs
de 0--------------->F en Hexa
Base 10 : 0 1 2 3 4 5 6 7 8 9
Base 2 : 1 2
0 1 2 3 4 5 6 7 8 9 A B C D E F
pas beaucoup-----------------------------> beaucoup vers le blanc
F c'est le dosage maximum
F9 FF 1F
R V B
F F 1 il faut prendre le premier chiffre ou lettre des couleurs hexadécimales
dans cet exemple FF1
RVB 0+0+0= noir pas de lumière FF+FF+FF = Blanc éclaircir
pour éclaircir il faut que je me rapproche du F
et pour foncé se rapprocher de 0
Gris clair CC CC CC
Gris clair 77 77 77
Gris foncé 22 22 22
En code Flash le dièse "#" des couleurs héxa est remplacé par un "0X"
3- les symboles
créer un symbole => à partir d'une image d'un texte d'un dessin de ma forme
Raccourci clavier à retenir pour créer le symbole F8
Quand l'on crée une forme double cliquer sur la forme pour sélectionner la totalité de la forme fond et bordure
Quand on crée un symbole toujours faire un clip (ne pas utiliser bouton)
alignement un point de référence quand l'objet doit subir une rotation ou une mise à l'échelle (par rapport à la base qui ne bouge pas)
Sur la scène quand je glisse mon symbole j'ai ce qu'on appelle "une occurrence" de son symbole
Comment éditer un symbole ?
- soit un double clic sur une occurrence sur la scène ou sur un symbole dans la bibliothèque
- Modifier le symbole puis revenir sur la scène ctrl E
Les outils de dessins comment les utiliser :
Encrier remplit le contour ou crée le contour
le pot de peinture va créer le fond
le crayon est réservé au contour
le pinceau c'est pour le fond
Attention : il faut faire la différence entre l'encrier, crayon pour les contours et pot de peinture, pinceau pour le fond
5- Interpolation
F8 créer un symbole
F6 crée une image clé
pour faire une interpolation obligatoirement c'est à partir d'occurrences il faut donc d'abord créer un symbole
puis mettre une occurrence sur la scène.
Attention : règle d'or des interpolations il faut une occurrence par calque pour que cela fonctionne
F5 rajouter des images une à une ou on sélectionne plusieurs images et on fait F5
shift F5
6 - exporter une animation
menu/onglet format/ projection (exe)
fichier/paramètres de publication
éviter de compresser
mettre version d'action Script Version 3.0
onglet Html / surtout ne pas oublier de cocher détecteur de version Flash
demander le format flash plein écran pour diaporama
Attention : ne jamais importer des images ou tout autre média dans l'animation dans la bibliothèque.
Cours du lundi 16 février 2009
Action Script
Approches de programmation :
- programmation séquentielle : avantage plus abordable comme approche prise en main plus rapide de ce mode de programmation
pas adapté au très gros projets (très gros en nombre de ligne et les projets en équipe)
- programmation objet : avantage code plus optimisé, code que l'on peut réutiliser
inconvénient approche plus longue et plus complexe à aborder.
Mémento AS3 c'est un PDF avec toutes les propriétés => télécharger la palette de scripts disponibles
a- donner un nom à une occurrence
1- clic sur l'occurrence
2- palette propriétés nom de l'occurrence
le nom de l'occurrence doit être représentatif de la fonction pas d'abréviation doit être compréhensif avec des noms composés
comme "boutonSommaireGalerie" par convention en Action script le Bouton devient bt ou btm
pas de caractères accentués et pas d'espace et le nom de l'occurrence par convention ne démarre pas par une majuscule
seules les "classes" démarrent par une majuscule.
b- où placer un script
1 - clic sur l'image Clé ou clic sur la scène
2 - clic dans la fenêtre actions
A quoi ressemble un script ?
telle occurrence aura => tel évènement
par exemple le fait de cliquer mouse-down, Mouse over
Exemple : Bertrand écoute quand je clique avec la souris fait tel événement est traduit par un script:
Bertrand devient l'occurrence Carre
carre.addEventListener(MouseEvent.Mouse_down, tourner )
à l'intérieur des parenthèses la famille et les évènements
je fait référence à une fonction que je vais nommer "tourner"
IL faut créer la fonction "Tourner"
raccourci clavier pour écrire les fonctions
touche echap+ puis touche f+ puis touche n
C- Les propriétés
evt= event
Créer le fichier : gestionDuclic.fla
1- Code :
carre.addEventListener(MouseEvent.MOUSE_DOWN,tourner)
function tourner (evt:MouseEvent) {
carre.rotate = 45
carre.scaleX = 0.5
carre.scaleY = 0.5
}
d- l'incrémentation
a=5 peut s'écrire a=a+5
caree.x = caree.x +1 équivaut à écrire caree.x ++
2- Code :
carre.addEventListener(MouseEvent.MOUSE_DOWN,tourner)
function tourner (evt:MouseEvent) {
carre.rotation = carre.rotation+15
}
3 - Code :
le carr bouge en avant puis en arrière
carre.rotation = 30
carre.addEventListener(MouseEvent.MOUSE_DOWN,tourner)
function tourner (evt:MouseEvent) {
carre.rotation *=-1
//carre.rotation = carre.rotation+15
}
La syntaxe de l'AS3 est plus facile que l'AS2
Met la tête de lecture à l'entrée de la tête de lecture
puce.addEventListener(Event.ENTER_FRAME,)
Créer le fichier: codeExecuteEnContinu.fla
1-Code :
puce.addEventListener(Event.ENTER_FRAME,mouvement)
function mouvement (evt:Event) {
puce.x++
rame.rotation++
}
2 - Code :
la puce s'arrête quand on clique dessus
puce.addEventListener(Event.ENTER_FRAME,mouvement)
puce.addEventListener(MouseEvent.MOUSE_DOWN,arreter)
function mouvement (evt:Event) {
puce.x++
rame.rotation++
}
function arreter (evt:MouseEvent) {
puce.removeEventListener(Event.ENTER_FRAME,mouvement)
}
3 - Code :
la puce s'arrête quand on clique dessus puis elle repart a gauche
var etatMouvement:Boolean = true
puce.addEventListener(Event.ENTER_FRAME,mouvement)
puce.addEventListener(MouseEvent.MOUSE_DOWN,arreter)
function mouvement (evt:Event) {
puce.x++
rame.rotation++
if (puce.x>560)puce.x = -20
}
function arreter (evt:MouseEvent) {
etatMouvement = !etatMouvement
if(etatMouvement){
puce.removeEventListener(Event.ENTER_FRAME,mouvement)
}
else{
puce.addEventListener(Event.ENTER_FRAME,mouvement)
}
}
Manipuler les occurences :
mettre cadence à 50 ips (images par seconde)
Télécharger TweenMax pour faire des interpolation
placer le dossierr GS avec les fichier fla
Code :
import gs.TweenMax
/*contient toutes les classes d'effet*/
import gs.easing.*
balle.addEventListener(MouseEvent.MOUSE_DOWN,agir)
function agir (evt:MouseEvent) {
TweenMax.to(balle,2{y:360,x:60,ease:Bounce.easeIn})
}
Code :
import gs.TweenMax
/*contient toutes les classes d'effet*/
import gs.easing.*
stage.addEventListener(MouseEvent.MOUSE_DOWN,agir)
function agir (evt:MouseEvent) {
TweenMax.to(balle,2{y:360,x:60,ease:Bounce.easeIn})
}
/* Bounce
Elastic
Strong
Back
easeIn
easeOut
easeInOut*/
Code :
import gs.TweenMax
/*contient toutes les classes d'effet*/
import gs.easing.*
stage.addEventListener(MouseEvent.MOUSE_DOWN,agir)
function agir (evt:MouseEvent) {
TweenMax.to(balle,2{y:360,x:60,ease:Bounce.easeIn})
}
Code :
import gs.TweenMax
/*contient toutes les classes d'effet*/
import gs.easing.*
stage.addEventListener(MouseEvent.MOUSE_DOWN,agir)
function agir (evt:MouseEvent) {
TweenMax.to(balle,2,{y:mouseY,x:mouseX,ease:Elastic.easeOut})
}
/* Bounce
Elastic
Strong
Back
easeIn
easeOut
easeInOut*/
Articles
