SI 28 ZOUAGHI Sarra GIRARD Yann FLASH PRESENTATION

SI 28 ZOUAGHI Sarra GIRARD Yann FLASH – PRESENTATION NEUMBEUR OUANE

Résumé 1. Présentation de Flash 2. Vectoriel VS Bitmap 3. Présentation de l’interface 4. Dessinons! 5. Animons! 6. Ecrivons!

FLASH… c’est quoi? � Flash est un logiciel crée par la société Macromedia, rachetée depuis par Adobe. � Ce logiciel est habituellement utilisé pour Ø Ø Ø � Création de sites Internet et de jeux vidéos distribués sur le Web. Création d'applications multimédia. Création de diaporamas interactifs. Création de bannières publicitaires. Diffusion de vidéos via le Web… Le Flash est un format de fichier d'extension swf (=schockwave Flash) pouvant contenir de la vidéo, des images vectorielles ou bitmaps, du son, et encore du code pour l'interaction avec l'utilisateur.

Vectoriel VS Bitmap … FIGHT ! Principe BITMAP VECTORIEL Grille de pixels 1 pixel = 1 position + 1 couleur Lignes, courbes, calculées mathématiquement par des vecteurs. L’ensemble des vecteurs forme le dessin. L’ensemble des pixels forme le dessin. Dessins La précision dépend du nombre de pixels, donc de la taille du dessin. Difficile à modifier. Aucune limite concernant la taille. Modifications des vecteurs relativement facile. Problèmes Pixellisation des images selon le zoom = modification d’échelle difficile, texte difficilement lisible à petite taille Les photos vectorisées perdent en réalisme. Esthétique très propre (à la base)

Vectoriel VS Bitmap … FIGHT ! BITMAP VECTORIEL Fichiers . bmp. jpeg. png. gif. tif . psd… . svg. ai. cdr, . fh … Logiciels Photoshop, Paint, GIMP, Paintbrush, PShop. Pro. . . Adobe Illustrator, Corel Draw, Macromedia Free. Hand. . . Utilisation Retouche photo, effets (flou gaussien…etc) Illustration, dessin numérique 2 D, web…

Preuve :

Présentation de l’interface

L’écran principal Les outils La bibliothèque Scénario Les propriétés

La scène Les propriétés La bibliothèque Les outils Le scénario : « Time Line »

La bibliothèque La scène Les propriétés La bibliothèque Les outils Scénario

Propriétés La scène La bibliothèque Les outils Scénario

Les outils La scène Les propriétés La bibliothèque Les outils Scénario

Dessinons

Formes et Couleurs Sélection Transformation libre Sous sélection Transformer le remplissage Ligne Lasso Plume Texte Ovale Rectangle Crayon Pinceau Encrier Pot de peinture Pipette Gomme Outil Main Zoom Créez des formes avec ces outils et superposez-les : que se passe-t-il? Couleur de trait Couleur de remplissage

Intersections de formes Deux objets de même couleur superposés ne forment plus qu’un (affinité de couleur). Un objet placé par dessus un autre objet de couleur différentes efface une partie de cet objet. Les groupes permettent de créer un objet à part entière qui n’a plus d’intersection avec les autres objets (on peut séparer pour modifier).

Formes et couleurs Options gomme Options pinceau Options pot de peinture Options crayon

Le groupage L’action de Grouper unifie un objet ou rassemble plusieurs objets dans un même cadre � Grouper : (raccourci clavier Ctrl+G) ▪ Sélectionnez les objets à grouper ▪ Modification -> Grouper � Dissocier : (raccourci clavier Ctrl+Maj. +G) ▪ Sélectionnez les objets à dissocier ▪ Modification -> Dissocier

Exercice 1 : dessin � BUT : Dessiner Flashy le chat rigolo en utilisant les outils de dessin et les groupes.

Les calques �Qu’est ce donc? Cacher/visualiser Verrouiller/déverrouiller Cacher le remplissage Calque actif Insérer un nouveau calque Calque guide de mouvement Supprimer Créer un groupe de claques

Exercice 2 : les calques � Créez un nouveau calque, appelé « pattes » . � Sélectionnez les pattes de votre chat, coupez-les (ctrl-x) puis copiez les dans le nouveau calque, au même endroit (ctrl – shift –V). � Faites de même pour chaque partie séparée. � Changez l’ordre des calques jusqu’à obtenir quelque chose qui vous convienne. Intérêt : Possibilité de travailler sur plusieurs couches avec un ordre de superposition Facilité pour traiter chaque élément séparément lors des animations

Calque de masque �A quoi ça sert? révéler des parties d'image ou de graphique dans le calque en dessous �L’intérêt? Non destructif… �Application Le fond.

Exercice : un peu de déco… �Créer un nouveau calque nommé : joli chaton Y importer une image (google : lovely cat) �Créer un nouveau calque nommé : poster Y dessiner un rectangle PLEIN Clique droit Masque. �Attention verrouillé automatiquement ! C’est pas ce que je voulais faire!!!!

Symboles �Propriété : Utilisation multiple sans alourdir le poids de l’animation – bouton interactif – élément graphique animée. � 3 types de symboles : Graphique ▪ Image statique Bouton ▪ Permet l’interaction avec l’utilisateur Clip ▪ Animation indépendante.

Exercice: Symbolisons! �œil Symbole graphique. Déjà crée : sélectionner, clique droit, transformer en symbole. Non crée : Insérer, nouveau symbole, le dessiner, retour. �Nez Bouton. Haut : aspect quand on n'y touche pas Dessus: forme quand on passe la souris dessus Abaissé: forme cliqué Cliqué: jamais visible par l'utilisateur, permet de spécifier la zone cliquable.

Animons

Animation Scénario : la Time Line Image courante Numéro de l’image courante Temps écoulé Cadence en image/sec Calque sélectionné dans image courante

Animation : motion tween Notion d’image clé : Dans le scénario, vous travaillez avec des images et des images clés. Une image : Element de l’animation Une image clé : C’est une étape clé dans une animation Généralement chaque image clé est différente de l'image clé qui la précède Elles sont très utilisées dans les interpolations

Animation : motion tween � Animation interpolée de mouvement : C’est un outil qui permet de créer des animations de mouvements entre plusieurs positions = images clés d’un même symbole Deux types d’interpolation de mouvement: ▪ Sans guide : On donne une position initiale et finale et flash propose une trajectoire rectiligne et crée les positions intermédiaires. ▪ Avec guide: On dessine un guide dans un calque spécifique et le symbole le prendra pour trajectoire de déplacement.

Exercice : motion tween � 1 – Insérer une image clé à l’image 30. � 2 - Sur l’image 30, déplacer ou rotationner les pattes, la queue, ou élément de votre choix (voir tout le chat, mais dans ce cas il faudra créer autant d’interpolations que de calques). � 3 – Clic droit dans le scénario n’importe où entre les 2 images et choisir « créer une interpolation de mouvement » . � 4 – Modifier les propriété de l’animation selon votre choix (ajouter une rotation…) � Tester l’animation avec ctrl+entrée

Animation : calque guide �Exercice avec calque guide: 1 – Insérer un nouveau calque et dessiner une balle 2 – Clic droit sur calque et « insérer un guide de mouvement » appelé « trajectoire balle » . 3 – Clic sur le calque de guide et dessiner une courbe 4 - Créer une interpolation de mouvement comme précédemment, à l’image 30, en déplaçant les balles de chaque image sur une extrémité de la courbe guide. Tester l’animation avec ctrl+entrée

Animation : shape tween � Animation interpolée de forme : C’est un outil qui permet de créer des animations qui transforme l’élément d’une forme à une autre. Début identique pour l’interpolation de mouvement.

Exercice : shape tween �Flashy remue la queue: Sur un nouveau claque, dessiner la queue de Flashy Clic droit sur la 30ème case et cliquez sur "insérer une image clé”. Modifier la forme de la queue, à votre guise. Clic sur la première image et dans les propriétés, interpolation, de forme. Ctrl + Entrée pour tester.

Ecrivons!

Un peu de literrature? �Outil texte: Modification classique possible ( taille, couleur…) � 3 types : Statique Dynamique ▪ Change selon l’action de l’utilisateur. De saisie ▪ Permet de faire un fomulaire par exemple. .

Essai : Ecrivons ! �Nouveau calque : texte Texte statique “comment s’appelle ton chat? ” Texte de saisie. Val : Nom Teste dynamique. Val : Bonjour �Nouveau calque : code Clique droit sur la 1 er case, puis action Tapez : Bouton. Press = function() { bonjour=”Bonne journée "+nom+". ”; }