FLASH – PRESENTATION NEUMBEUR OUANE SI 28 ZOUAGHI Sarra GIRARD Yann FLASH – PRESENTATION NEUMBEUR OUANE

Résumé Présentation de Flash Vectoriel VS Bitmap Présentation de l’interface Dessinons! Animons! 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 Grille de pixels 1 pixel = 1 position + 1 couleur L’ensemble des pixels forme le dessin. Lignes, courbes, calculées mathématiquement par des vecteurs. L’ensemble des vecteurs 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 ! Fichiers .bmp .jpeg .png .gif .tif .psd… .svg .ai .cdr, .fh … Logiciels Photoshop, Paint, GIMP, Paintbrush, PShopPro... Adobe Illustrator, Corel Draw, Macromedia FreeHand... Utilisation Retouche photo, effets (flou gaussien…etc) Illustration, dessin numérique 2D, web…

Preuve :

Présentation de l’interface

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

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

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

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

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

Dessinons

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

Le groupage Grouper : (raccourci clavier Ctrl+G) 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 Supprimer Insérer un nouveau calque Calque guide de mouvement 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? L’intérêt? Application 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 Calque sélectionné dans image courante Image courante Numéro de l’image courante Temps écoulé Cadence en image/sec

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 que 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 Nouveau calque : code Texte statique “comment s’appelle ton chat?” Texte de saisie. Val : Nom Teste dynamique. Val : Bonjour Nouveau calque : code Clique droit sur la 1er case, puis action Tapez : Bouton.onPress = function() { bonjour=”Bonne journée "+nom+".”; }