Mots d'art & Scénarios

Poésie, littérature, pensées,
scripts d'art,
oeuvres de Ginette Villeneuve
 
AccueilAccueil  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Cours Flash 5 par Pierre Lalande (1 à 9)

Aller en bas 
AuteurMessage
Gi
Rang: Administrateur


Nombre de messages : 13226
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Cours Flash 5 par Pierre Lalande (1 à 9)   Mer 6 Juil - 6:11

J'ai depuis 2001 les cours de Pierre dans mon ordinateur. Je suis fière, avec son autorisation de les montrer ici... Ils pourront être utiles pour les utilisateurs de Flash qui comme moi ont toujours le logiciel et ne s'en sont peu ou jamais servi et pour les autres aussi.

Je présenterai donc tous ses cours avec les images correspondantes.

Gi


Ce cours est réalisé par Pierre Lalande - FAC-multimedia
www.fac-multimedia.fr

Propos de Pierre Lalande

Flash5 n'est plus commercialisé mais il est encore utilisé par de nombreuses personnes.
Par ailleurs, si le langage de script a été presque intégralement modifié entre flash 5 et
flash MX, toute la logique d'animation et d'outils est la même.
C'est donc je pense toujours relativement d'actualité pour quelqu'un qui veut débuter avec Flash.


Dernière édition par le Dim 10 Juil - 1:26, édité 4 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13226
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Re: Cours Flash 5 par Pierre Lalande (1 à 9)   Mer 6 Juil - 7:12

A la découverte de l'interface


L'interface de flash 5 comprend par défaut 6 grandes parties :

1 : la zone de travail
2 : l'échelle de temps
3 : la barre de boutons standard
4 : la barre de boutons dessin
5 : les palettes, ou panneaux
6 : la barre d'options d'affichage




(1)La zone de travail
Elle contient les éléments qui seront affichés à un instant donné dans votre animation.

Cette zone peut prendre plusieurs aspects.

Par défaut, la zone de travail se présente avec un fond blanc (qui correspond à la zone et à la couleur de fond de ce que sera l'animation) et des contours gris sur lesquels on ne peut rien mettre.

Affichage de grille
Il est possible d'afficher une grille qui peut aider à positionner les objets, soit manuellement soit par magnétisme (nous y reviendrons plus tard).

Il suffit d'aller dans le menu de flash dans
Affichage / Grille /Afficher la grille et de cocher ou décocher cette option.

Affichage de règle
Il est également possible d'afficher une règle (de façon indépendante de la grille). Cette règle indique verticalement et horizontalement la position de la souris. Ceci est accessible par
Affichage / Règles.

Affichage de la zone de travail complète
Il est enfin possible de choisir d'afficher dans cette zone de travail non seulement ce que sera la scène en elle-même, mais également la zone de travail dans son ensemble. Pour avoir accès à toute cette zone de travail, il suffit d'aller dans le menu Affichage / Zone de travail et de cocher l'item.

La différence est que dans le premier cas rien ne peut être mis sur les cotés de la scène :



et que dans le second cas, des objets peuvent être mis latéralement :



Ceci permet par exemple de faire arriver des objets d'un "hors-champs" vers l'intérieur de l'animation.
En ce qui me concerne, ceci est systématiquement activé. Je vous conseille donc de faire de même.

D'autres modifications concernant la zone de travail et l'animation elle-même sont accessibles à différents endroits. Mais la seule chose qui va nous être utile pour le moment est la modification des paramètres de l'animation.

Modification des paramètres de l'animation
Pour accéder aux paramètres de l'animation, choisissez dans le menu
Modification / Animation

Vous obtenez alors cette boite de dialogue, à propos de laquelle nous allons détailler chaque item.



Puisque vous allez faire de l'animation avec Flash, il faut régler la cadence (le nombre d'images affichées par seconde).
Par défaut, la valeur 12 est indiquée. Plus la valeur est élevée, plus l'animation sera fluide ... à condition toutefois que la personne qui lira votre animation ait un ordinateur assez puissant. Dans les faits, la valeur par défaut est bien souvent amplement suffisante et convient à toutes les machines.

Avant de modifier quoi que ce soit d'autre, indiquez dans la zone la plus basse de cette fenêtre (unités de la règle) l'échelle que vous voulez utiliser : pouces, points, centimètres, millimètres ou pixels.

Les zones dimensions correspondent à la dimension "de base" de l'animation.
Pourquoi "de base" ? Car nous apprendrons beaucoup plus tard qu'il est possible avec flash d'adapter automatiquement la taille de l'animation à la taille de la fenêtre du browser (ou du viewer autonome).
Toutefois, si vous prévoyez d'importer dans votre animation des images bitmap (.bmp , .jpg , ...), vous avez intérêt à régler ceci au plus près de ce que vous estimez être la taille la plus courante de visualisation.

Vous avez la possibilité d'ajuster automatiquement la taille de l'animation à l'imprimante (attention ! si vous avez plusieurs imprimantes, il faut avant définir l'imprimante sur laquelle vous voulez vous adapter comme imprimante par défaut). Mais à votre place, je ne toucherais pas à ce paramètre sauf cas archi-exceptionnel !

Vous avez aussi la possibilité d'adapter la taille en fonction du contenu. Ceci doit bien sûr n'être utilisé qu'après avoir fini de composer l'animation, et pour réduire au plus juste les bords autours des objets.

Vous pouvez enfin dans cette boite de dialogue choisir également la couleur d'arrière plan, donc de fond de l'animation (pour le cas où vous ne mettriez pas d'objet comme une image de fond qui prendrait toute la surface).

Pour terminer, il existe dans cette boite de dialogue un bouton "Enregistrer valeurs par défaut" qui vous permet d'appliquer vos choix à toutes les futures nouvelles animations flash que vous créerez.

(2) L'échelle de temps
Cette zone est sans doute la plus spécifique à flash. On parle d'échelle de temps car puisque vous allez créer des animations, vous allez créer des images qui changeront au fil du temps

Elle contient :

des éléments horizontaux qui correspondent aux images en fonction du temps (que l'on appelle "frame" dans flash),

et des éléments verticaux qui correspondent à des couches (appelées "couches" ou "calques") comme on en trouve dans beaucoup de logiciels de dessin un peu évolués.
Dans ce premier exemple, l'animation est composée d'une couche et 17 frames :




Dans cet autre exemple, l'animation contient 4 couches et 23 frames :



Comme vous pouvez le constater ci-dessus, chaque couche porte au départ le nom de calque1 , calque2 ... mais peut être renommée.

Pourquoi utiliser des couches ?

Comme nous allons le voir, le système de couche permet de travailler avec une notion de profondeur. Ceci est important quand on pense que les animations seront en fait des objets positionnés et se déplaçant les uns par rapport aux autres. Il faut bien dire lequel passe devant quel(s) autre(s). Les couches le permettent.

Par ailleurs, lorsqu'un objet se déplace d'un endroit à un autre dans une animation, il est à un endroit dans l'image de départ et à un autre dans l'image d'arrivée. Flash peut assurer lui-même les images intermédiaires à deux conditions dont la principale est : l'objet déplacé doit être seul sur une couche.

Vous comprenez donc bien pourquoi les couches sont essentielles dans Flash. De très nombreuses fonctionnalités y sont liées. Nous allons voir maintenant quelques options essentielles.

Une bonne habitude tout de suite : 1 objet à animer = 1 couche !
En effet, comme je viens de l'évoquer et ainsi que nous le verrons plus en détail par la suite, une couche spécifique est conseillée (voire nécessaire) pour chaque objet animé. Le nombre de couches n'influe pas sur le poids total de l'animation et vous pouvez donc en mettre autant que voulez sans aucun problème.

Renommer une couche

Pour renommer une couche, il suffit de double-cliquer sur le nom de la couche et de changer alors son nom.
Notez que tous les caractères peuvent être utilisés et qu'il est possible de changer le nom à tout moment (y compris sur des couches non vides même si vous y faites référence en cours d'animation).

Donnez des noms explicites aux couches ! Ceci est très important pour arriver ensuite à créer des animations un peu évoluées.

Ajouter une couche
Pour ajouter une couche, sélectionnez la couche qui sera juste en dessous de celle que vous voulez créer.
Cliquez alors sur le bouton situé en bas et à gauche de l'échelle de temps :


La nouvelle couche apparaît juste au-dessus.
Conseil : nommez-la tout de suite.




Par exemple, pour ajouter une couche "Rond" dans l'image ci-dessus entre "Triangle" et "Texte", il faut cliquer une fois sur "Triangle", puis cliquer sur , puis double-cliquer sur le nom qui apparaîtra (ici ce serait "Calque5") et taper "Rond" à la place.

Ordre des couches

Les couches dans flash sont "empilées" du bas vers le haut, comme si vous utilisiez une feuille de papier sur laquelle vous rajouteriez des calques. Ainsi, plus les objets sont dans une couche vers le bas, plus ils sont à l'arrière-plan et plus les objets sont sur une couche vers le haut, plus ils sont sur le devant.

Il est bien sûr possible de modifier l'ordre des couches. Il suffit de cliquer sur le nom d'une des couches et de la glisser au niveau auquel on souhaite l'amener, puis relâcher.


Supprimer une couche

Pour supprimer une couche, il suffit de la sélectionner puis de cliquer sur l'icône de la poubelle en bas et à droite


Options de l'échelle de temps
Observez la capture d'écran ci-dessous. En haut se trouvent 3 symboles : un oeil, un cadenas et un carré.




L'oeil correspond à la visibilité de la couche dans la zone de travail. En cliquant au niveau du point correspondant dans une couche, on peut ainsi masquer celle-ci dans la zone de travail. Par exemple, dans l'image ci-dessus, les éléments contenus dans la couche "Texte" n'apparaîtront pas dans la zone de travail. Notez que lors de l'exportation en animation, la couche sera tout de même présente et visible.

Le cadenas permet de verrouiller une couche afin qu'elle ne puisse pas être malencontreusement modifiée par des clics dans la zone de travail. Là encore, le fait de cliquer sur le point correspondant au niveau de la couche permet d'alterner les états "verrouillé" - "non verrouillé".

Le carré permet d'alterner des couleurs d'encadrement pour les objets dans la zone de travail. Ceci permet dans un mode Contours dont nous parlerons plus tard de différencier facilement des objets et des couches. Cette fonctionnalité, si elle est utile, est loin d'être essentielle.

Une couche un peu particulière ...
Enfin, vous vous demandez sans doute à quoi correspond le bouton


Il permet d'ajouter des couches un peu particulières : les calques de guide.

Ces couches peuvent servir à 2 choses :

de façon habituelle, tracer des courbes qui serviront de guide lors de déplacement d'objets d'autres couches,

de façon particulière, lorsque le calque de guide est le plus bas de toutes les couches, d'avoir dessus des objets ou des repères qui s'afficheront en fond de la zone de travail mais qui ne seront pas exportés dans l'animation finale.
Nous reviendrons bien plus tard sur l'utilisation concrète des ces couches un peu particulières.

Continuons notre exploration du temps ...
Mais continuons à explorer les grandes fonctionnalités de l'échelle de temps !!

Complètement à droite de l'échelle de temps se trouve ce bouton :




Si vous cliquez dessus, le menu ci-dessous apparaît :



Les premiers items (Minuscule ... Grande) permettent de régler la largeur qu'occupe chaque frame dans l'échelle de temps. Essayez ... vous comprendrez tout de suite.

Lorsque l'item "Court" est coché, la hauteur des couches dans l'échelle de temps est réduite.

Images teintées sert au mode Contours que nous avons rapidement évoqué plus haut et sur lequel nous reviendrons bien plus tard.

Enfin, "Afficher un aperçu" et "Afficher un aperçu dans le contexte" permet d'afficher dans les frames non plus des marques repères mais des vues en réduction des objets. Si ceci est ponctuellement utile, ce n'est en aucun cas à paramétrer par défaut.

Dernier point à propos de l'échelle de temps : elle peut être soit attachée en haut (emplacement par défaut), soit à gauche ou encore en boite isolée. Il suffit de cliquer dessus dans une zone vide et de la déplacer.

Bon ! Ainsi s'achève la première partie de la présentation détaillée de l'interface.


Dernière édition par le Jeu 7 Juil - 0:39, édité 2 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13226
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: A la découverte de l'interface - suite   Ven 8 Juil - 0:10

A la découverte de l'interface - suite

Ce cours est réalisé par Pierre Lalande - FAC-multimedia
www.fac-multimedia.fr

Comme nous l'avons vu dans la première partie, l'interface de flash 5 comprend par défaut 6 grandes parties :

1 : la zone de travail
2 : l'échelle de temps
3 : la barre de boutons standard
4 : la barre de boutons dessin
5 : les palettes, ou panneaux
6 : la barre d'options d'affichage




Nous allons cette fois aborder les barres de boutons en détail au travers de plusieurs messages.

(3) La barre de boutons standard
Nous allons en fait passer peu de temps à la traiter, tant elle est simple ... et pour partie peu utile.

Les classiques
Les 8 premiers boutons sont très classiques :




Like a Star @ heaven nouveau fichier,
Like a Star @ heaven ouvrir,
Like a Star @ heaven enregistrer,
Like a Star @ heaven imprimer,
Like a Star @ heaven aperçu avant impression,
Like a Star @ heaven couper,
Like a Star @ heaven copier,
Like a Star @ heaven coller.

Un mot particulier en ce qui concerne le collage toutefois : comme de nombreux logiciels, le bouton présent ici est le collage d'un objet "à l'identique' de celui copié.

Ce collage s'effectue toujours de façon décalée en hauteur et largeur par rapport à l'objet initial. Ceci est parfois gênant, et il est bon de savoir qu'il est possible de faire un collage au même emplacement en passant par le menu
Edition / Coller en place . Ceci est tout spécialement utile quand on veut déplacer ou dupliquer des objets d'une couche vers une autre (nous y reviendrons par la suite).

Il est également possible d'avoir accès à d'autres collages spécifiques, en passant par[b]
Edition / Collage spécial ...

Annulation
Après ces 8 boutons, 2 boutons assez classiques également, mais fort utiles : annuler et répéter.




Je n'expliquerai pas ici leur fonction, tant elle est évidente, mais préciserai qu'il est possible de régler le nombre d'annulation que l'on souhaite pouvoir utiliser. Pour faire ce réglage, allez dans le menu Edition / Préférences / Onglet général / Nombre d'annulations .

Les inutiles selon moi (pour cause de doublon)



Ces 5 boutons sont selon moi peu utiles ici car ils se retrouvent dans la "barre de boutons dessins" de façon plus appropriée.

C'est donc lors de l'étude de la barre de bouton dessin (plus bas) que je les aborderai.

L'alignement




Pour une raison qui m'échappe, le bouton alignement se trouve dans cette barre de boutons, alors qu'il devrait selon moi être accessible ailleurs.

Pourquoi ? Car il fait apparaître un panneau et que nous verrons plus tard que les accès aux panneaux sont en fait regroupés ailleurs (dans la partie 6 de l'interface).

Mais bon ... c'est ainsi ... j'y reviendrai toutefois plus tard lors de l'étude des panneaux.

En résumé
Je vous avais prévenu ... cette barre de boutons standard est assez peu passionnante et nous n'avons pas appris grand chose pour le moment. Mais soyez sans crainte, nous allons nous rattraper maintenant !!


(4) La barre de boutons dessin




La barre de boutons dessin est, vous vous en doutez, un des éléments essentiels de Flash 5.

Comme vous pouvez le constater, elle est composée en fait de 4 parties :

Like a Star @ heaven outils,
Like a Star @ heaven afficher,
Like a Star @ heaven couleurs,
Like a Star @ heaven options.

Dans un souci de compréhension, nous allons aborder de façon simultanée les zones "outils" et "options", et ne verrons "afficher" et "couleur" qu'après.

La raison de cet ordre dans l'apprentissage est simple : alors que les zones "afficher" et "couleurs" restent toujours parfaitement identiques, la zone "option" varie en fonction de l'outil sélectionné.

La structure des explications va donc être toujours la même :

nom de l'outil, capture d'écran de l'outil et des options qui lui correspondent (lorsqu'il y en a, ce qui n'est pas toujours le cas), explication générale rapide de ce que fait l'outil,
explication de chaque option (avec capture d'écran de l'option en question pour faciliter sa localisation)
Je vous encourage à faire autant d'essais que possible des outils et de leurs options. Cette première prise en mains facilitera considérablement les exercices que nous ferons ensemble une fois l'interface et les outils présentés dans leur intégralité.

Pour une meilleure lisibilité, donc pour un meilleur apprentissage, les différents objets vont être traités dans des messages spécifiques (qui suivent ...)

A+

Pierre


Dernière édition par Gi le Dim 30 Aoû - 22:04, édité 1 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13226
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Outil pointeur ou flèche   Ven 8 Juil - 0:36

Outil Pointeur (ou flèche)

Ce cours est réalisé par Pierre Lalande - FAC-multimedia
www.fac-multimedia.fr



L'outil pointeur permet de sélectionner un ou plusieurs objets présents dans la zone de travail.

Pour sélectionner un objet, il suffit de cliquer dessus. Pour sélectionner un objet avec son contours (par exemple un rectangle bleu avec son bord noir), il faut double-cliquer sur la forme.

Pour sélectionner plusieurs objets, il suffit de cliquer sur le premier, puis de maintenir la touche [Maj] enfoncée pendant qu'on sélectionne les suivants.

Il est également possible de sélectionner plusieurs objets contenus dans une zone en faisant un cadre (cliquer-glisser-relâcher) autour des objets que l'on souhaite sélectionner.

Quelle que soit la méthode de sélection choisie, celle-ci est possible même si les objets sont sur plusieurs couches. Si certaines couches sont verrouillées ou masquées (revoyez le topo précédent si vous avez un doute sur ce point), les objets se trouvant sur ces couches ne sont pas sélectionnés.




ajuster aux objets

J'ai mis personnellement bien longtemps avant de comprendre à quoi servait cette option et comment m'en servir.

Mais une fois compris, je dois dire que c'est fort utile lors de déplacements d'objets dans deux cas :

si l'on souhaite déplacer un objet bien horizontalement ou bien verticalement,
ou si l'on souhaite aligner facilement "bord à bord" ou "bord à centre" deux objets.
Je vais essayer de vous l'expliquer, mais pratiquez en même temps les exercices sans quoi vous risquez de ne pas comprendre.

Tout d'abord le déplacement d'un seul objet :

Like a Star @ heaven sélectionnez l'objet (simple clic) et éventuellement son contours (double-clic)
Like a Star @ heaven une fois l'objet sélectionné (donc "tramé"), cliquez au milieu de l'objet
Like a Star @ heaven déplacez-le maintenant horizontalement
Like a Star @ heaven au milieu de l'objet, à coté donc du curseur, apparaît un petit rond noir
Like a Star @ heaven si vous restez verticalement au même niveau, ce petit rond noir devient plus
grand et une sorte de magnétisme existe, facilitant le déplacement uniquement dans l'axe horizontal.
La même chose est possible pour déplacer l'objet non plus horizontalement mais verticalement.

Notez qu'il est également possible de faciliter les déplacements non plus en prenant le centre de l'objet (une fois sélectionné) mais un des bords ou un des angles ; le rond à observer se trouve alors sur le bord où l'angle correspondant .

Maintenant, l'alignement de deux objets bords à bords ou bord à centre :

suivez exactement la même procédure que ci-dessus (au choix selon ce que vous souhaitez aligner à partir du centre, d'un bord ou d'un angle)
déplacez-vous non plus uniquement horizontalement ou verticalement mais en vous rapprochant du bord de l'objet auquel vous souhaitez vous aligner
là encore, la taille du rond augmente et un magnétisme vous aide au positionnement.




lisser

Cette option permet de lisser (arrondir) des traits sélectionnés.

Pour visualiser cet effet, faites un trait un peu courbe avec le crayon puis cliquez sur la flèche et sélectionnez-le.

Cliquez alors plusieurs fois de suite sur le bouton lisser et observez ... vous verrez le résultat facilement.




redresser

Cette option permet de rendre plus anguleux des traits sélectionnés.

Pour visualiser cet effet, faites un trait en zig-zag avec le crayon puis cliquez sur la flèche et sélectionnez-le.

Cliquez alors plusieurs fois de suite sur le bouton redresser et observez ... vous verrez là encore le résultat facilement.




pivoter

Cette option vous permet de faire tourner un objet ou de le faire pivoter.

Pour visualiser cet effet, faites un rectangle avec l'outil correspondant puis cliquez sur la flèche et sélectionnez-le.

Cliquez alors sur le bouton pivoter. Huit ronds blancs apparaissent : 4 dans les angles et 4 au milieu des cotés.

Si vous allez cliquez sur les ronds des angles puis déplacez la souris, vous faites tourner l'objet.

Si vous allez cliquer sur les ronds des cotés puis déplacez la souris, vous faites pivoter le coté sélectionné.

Il va de soi que je vous ai demandé ici de prendre un rectangle pour que ce soit bien visible mais que ces effets existent avec tous les types d'objets.




redimensionner

Cette option vous permet d'agrandir ou de réduire la taille de l'objet sélectionné.

Notez que si vous utilisez les poignées d'angles, le rapport hauteur-largeur est conservé.


Dernière édition par Gi le Dim 30 Aoû - 22:17, édité 1 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13226
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Re: Cours Flash 5 par Pierre Lalande (1 à 9)   Ven 8 Juil - 0:56

Outil sous-sélection (flèche blanche)

Ce cours est réalisé par Pierre Lalande - FAC-multimedia
www.fac-multimedia.fr




(pas d'option pour cet outil)

L'outil sous-sélection permet de modifier des lignes ou des contours de formes.


Modification d'une ligne droite

Tracez une ligne droite quelconque avec l'outil ligne.

Pour modifier la ligne, prenez l'outil sous-sélection et cliquez à l'extrémité que vous souhaitez modifier.

Tandis que vous déplacez l'extrémité sélectionnée, l'autre extrémité reste immobile.


Modification d'une ligne brisée (en zig-zag)

Tracez une ligne brisée à l'aide de l'outil ligne (succession de lignes droites en repartant à chaque fois de l'extrémité de la ligne précédente).

Pour modifier un des points de la ligne brisée, prenez l'outil sous-sélection et cliquez sur le point que vous souhaitez déplacer.

Tandis que vous le déplacez, tous les autres points restent immobiles.


Modification du contours d'une forme (exemple le plus flagrant : un cercle)




Tracez un cercle avec l'outil correspondant.



Cliquez sur le contour du cercle avec l'outil sous-sélectionner.

Des points apparaissent tout autours du cercle.




Attrapez un des points et tirez-le, puis relâchez.

Des points complémentaires apparaissent.




Attrapez un de ces points complémentaires et tirez-le à nouveau.

La forme se modifie en jouant sur la rondeur et l'amplitude, selon la manière dont vous déplacez le point.




Vous pouvez faire la même chose de l'autre coté si vous le souhaitez.



Vous pourriez en fait le faire autant de fois que vous le désirez sur autant de points que vous voulez.



Cliquez en dehors de l'objet ... voici le résultat ...

Facile pour créer toutes les formes que vous souhaitez, n'est-ce pas ?
[/b]
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13226
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Re: Cours Flash 5 par Pierre Lalande (1 à 9)   Dim 10 Juil - 0:23

Outil Ligne

Ce cours est réalisé par Pierre Lalande - FAC-multimedia
www.fac-multimedia.fr

(pas d'option pour cet outil)

L'outil ligne permet de créer des lignes droites ou brisées.

Son maniement est on ne peut plus simple.

Si vous souhaitez faire des lignes horizontales ou verticales, je vous rappelle que ce sera plus facile si le bouton
est enfoncé.

Maintenant, vous allez sans doute rester un peu sur votre faim si je ne vous explique pas tout de suite l'utilisation du panneau spécifique aux traits.

Pour le faire apparaître, cochez, dans le menu,
Fenêtre / Panneaux / Trait :



Un panneau de ce type devrait alors être visible, probablement sur la droite de votre écran :



Plusieurs actions sont alors possibles :

Modifier le type de trait

Pour ceci, cliquez simplement sur la petite flèche vers le bas à droite du type de trait actuel.

Un choix apparaît alors, dans lequel vous cliquez sur le type désiré :




Modifier l'épaisseur du trait

Deux possibilités pour ceci vous sont proposées :




Soit vous tapez le nombre de pixels voulus dans la case prévue à cet effet,




Soit vous cliquez sur la petite flèche droite juste à coté.

Un curseur vertical apparaît alors.

Déplacez-le à votre guise, sachant que vous verrez en même temps la valeur changer et le résultat dans la zone du bas.


Modifier la couleur du trait

Pour ceci, cliquez dans le panneau dans la case
et choisissez.

Champs d'action du panneau

Notez que vous pouvez faire ces choix pour les traits avant de créer un trait, ou après l'avoir créé.

Il suffit alors que le trait soit sélectionné (outil pointeur) avant de faire les modifications souhaitées.

Notez aussi que ce panneau vous permet de modifier les contours des objets, comme les cercles ou les rectangles.

On commence à avancer, non ? ...
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13226
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Re: Cours Flash 5 par Pierre Lalande (1 à 9)   Dim 10 Juil - 1:24

Outil lasso

Ce cours est réalisé par Pierre Lalande - FAC-multimedia
www.fac-multimedia.fr



L'outil lasso permet de sélectionner une partie d'un objet vectoriel (une forme créée dans flash par exemple) ou bitmap (un fichier bmp, jpg, gif ...).

C'est toutefois surtout pour la modification d'une image bitmap qu'il est très pratique !
Je m'appuierai donc sur ce cas pour expliquer son utilisation.

Pour vous rendre compte de la puissance et de l'intérêt de l'outil lasso, je vous propose de faire les exercices qui suivent à partir de l'image ex-edelweiss-base , en pièce jointe à ce message. Détachez-là donc et mettez-la à un endroit de votre choix sur votre disque dur.

C'est fait ? Alors continuons ...

Mais au fait, pour aller plus loin, encore faut-il savoir charger et modifier une image bitmap dans flash ... c'est le bonus de ce topo.


Importer et rendre modifiable une image bitmap

Pour importer une image bitmap, c'est très très simple : il suffit dans le menu, de sélectionner Fichier / Importer... et d'aller chercher l'image dans la boite de dialogue qui apparaît.

L'image est alors dans l'espace de travail mais vous ne pouvez rien y modifier, en dehors de sa taille, de la faire tourner ou de l'incliner. C'est déjà bien ... mais limité !

Pour pouvoir la modifier davantage, et donc la traiter comme n'importe quel objet, vous devez faire la manipulation suivante :

Sélectionnez l'image importée à l'aide de l'outil pointeur,
allez dans le menu et sélectionnez Modification / Séparer .
Une trame apparaît sur l'image, preuve qu'elle est maintenant gérée comme un objet quelconque.

Ce que nous allons faire ensemble pour nous familiariser avec l'outil lasso, c'est tout simplement enlever le fond de l'image afin de ne garder que les fleurs et les rochers. Ainsi, nous pourrons superposer les edelweiss sur un fond autre (de couleur unie par exemple), puisque les montagnes floues et le ciel auront non seulement auront disparus mais seront remplacés par une zone totalement transparente.

Voyons donc les divers maniements possibles du lasso.


Outil lasso sans aucune option sélectionnée




Cliquez sur l'outil lasso et vérifiez qu'aucune option complémentaire n'est activée.

Si c'est bien le cas, la zone options doit se présenter ainsi (aucun bouton n'est enfoncé).


Vous pouvez sélectionner "à main levée" une zone puis la supprimer avec la touche [Suppr].

Voici le résultat :




Outil lasso avec le "mode polygone activé"

Activez le mode polygone en cliquant sur le bouton


vous pouvez maintenant faire en gros la même chose mais en faisant un simple clic à chaque angle de la zone à sélectionner et un double-clic au niveau du dernier angle. Puis, de la même manière, touche [Suppr].

Voici le résultat :




Mais le mieux, c'est la baguette magique !

Cette baguette magique s'obtient en cliquant sur le bouton


Elle va vous permettre de sélectionner des zones de l'image à partir de leur similitude de couleur.

Le seuil de similitude de couleurs se règle à partir du bouton


juste à coté.

Quand vous cliquez dessus, la boite de dialogue suivante apparaît :




Dans la zone seuil, tapez un nombre entre 1 et 200 (de 1 pour une correspondance exacte de la couleur ... jusqu'à 200 pour presque aucune correspondance).

Dans la zone lissage, choisissez la finesse avec laquelle les contours devront être lissés.

Validez en cliquant sur OK ... et essayez en cliquant sur la zone (rappel : le bouton
doit être enfoncé)

La zone sélectionnée correspondante apparaît en tramé.

Si ça vous convient, [Suppr], sinon, clic à l'extérieur ... et recommencez.

Avec un peu d'habitude, en vous aidant si besoin de la loupe pour grossir la visibilité de ce que vous faites, en procédant en plusieurs étapes, et en utilisant les différents modes du lasso, vous devriez arriver à ceci (là je n'ai pas trop peaufiné, je dois toutefois l'avouer ...):




Vous voulez la preuve que c'est bien transparent maintenant ?

Simple : allez dans le menu Modification / Animation ... et changez la couleur d'arrière-plan.

Là on s'en rend bien compte, n'est-ce pas ?




alors maintenant, imaginez le même genre d'opération sur un visage, un avion, un bateau, un animal, un objet quotidien quelconque ... et vous commencez à entrevoir les possibilités très évoluées offertes par le lasso ...
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13226
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Re: Cours Flash 5 par Pierre Lalande (1 à 9)   Dim 10 Juil - 3:40

Outil plume

Ce cours est réalisé par Pierre Lalande - FAC-multimedia
www.fac-multimedia.fr

pas d'option pour cet outil)

L'outil plume permet de créer des contours et des objets pleins de toutes formes.


Important
!

Selon la manière dont il est utilisé, le comportement de l'outil est sensiblement différent.

Pour en découvrir toutes les facettes, je vous conseille de suivre dans l'ordre les différentes approches, mais surtout de ne pas les mélanger dans un premier temps. L'apprentissage de cet outil est probablement le plus complexe de tous, mais en suivant exactement ce qui est indiqué dans ce topo, vous devriez y arriver sans trop de souci ...

Ah ! juste avant : s'il ne possède pas d'options directement affichées, l'outil plume peut être personnalisé.
Afin d'être tous dans la même configuration pour débuter, je vous suggère de personnaliser l'outil comme suit.

Allez dans le menu

Editions / Préférences / onglet Modification , cochez comme ci-dessous et validez.



--------------------------------------------------------------------------------

Cliquez sans glisser (points de contrôles anguleux)

Ce premier mode d'utilisation est clairement le plus simple ... mais le plus limité.

Sélectionnez l'outil plume et déplacez-vous, pour le moment sans cliquer, vers la zone de travail.

Votre curseur se présente ainsi :




Cliquez (simple-clic) et ne bougez plus.
Le curseur devient :




Déplacez maintenant le curseur sans cliquer. Une ligne indique le contour qui sera effectué après un nouveau clic.

Créez ainsi la forme que vous désirez, en prenant garde à ne pas bouger la souris lors des clics.

Lorsque vous avez fini la forme, faites un double-clic.

Si ce double-clic est fait ailleurs que sur le point d'origine, vous obtenez une forme du type :




Si ce double-clic est fait en revenant sur le point d'origine, vous obtenez ceci :



Vous pouvez alors à l'aide de l'outil sous-sélection (flèche blanche) déplacer n'importe lequel des points et transformer votre figure.



Cliquez en glissant (points de contrôles arrondis)

Nous allons maintenant faire de même, sauf qu'à partir du second point,lors du clic, nous allons en même temps déplacer la souris.

Vous retrouvez alors les poignées que nous avions vues lors de l'étude de l'outil sous-sélection avec le cercle. Selon comment vous bougez avant le clic, la forme se modifie :




vous pouvez alors, en suivant la même procédure à chaque fois (bouger la souris lors du clic) faire la forme que vous voulez ... enfin presque, puisque vous l'affinerez après avec l'outil sous-sélection.



Pour affiner votre dessin, choisissez l'outil sous-sélection et cliquez sur un des points. Vous pouvez alors modifier la position et la courbure de votre contours à ce niveau.



Maintenant, quelques astuces importantes dans ce mode (le cliquer en glissant) :

1°) Halte à la symétrie

Lors des réglages de votre forme avec l'outil sous-sélection, vous avez sans doute remarqué qu'en déplaçant une des poignées latérales ... l'autre se déplace de façon symétrique :




C'est souvent pratique ... mais parfois gênant !

Pour éviter cet effet de symétrie, il suffit lorsque vous cliquez sur une des poignées latérales d'appuyer en même temps et de maintenir la touche [Alt] enfoncée, puis de déplacer la souris :




Cette possibilité vous permet cette fois de choisir véritablement la forme de votre objet .... ou presque.

2°) Ajouter des points de contrôle à la forme

Il est parfois nécessaire, pour faire la forme que l'on souhaite, d'ajouter des points de contrôle à la forme.

Pour le faire, facile : re-sélectionnez l'outil plume et allez sur l'objet déjà réalisé dans le mode "cliquer-en glissant".

vous voyez alors l'outil plume avec un petit + à coté :




En cliquant, vous ajoutez un point de contrôle que vous pourrez ensuite manipuler à loisir avec l'outil sous-sélection.

3°) Transformer un point de contrôle arrondi en point de contrôle anguleux

Le principe, là encore est simple : avec l'outil plume sélectionné, déplacez vous au niveau d'un des points existants.

C'est cette fois un symbole < qui apparaîtà coté de l'outil plume :




en cliquant, les arrondis de part et d'autre du point sont transformés en angles :



4°) Retirer un point de contrôle

Après avoir transformé un point de contrôle arrondi en point de contrôle anguleux, si vous remettez la plume au niveau du point de contrôle en question, c'est maintenant un petit - qui apparaîtà coté de l'outil :




en cliquant, le point de contrôle est supprimé :



Précision : il va de soi que si vous savez directement que vous voulez supprimer un point de contrôle, mettez-vous dessus et faites directement un double-clic. Vous ferez ainsi "en une passe" la modification du type de point puis sa suppression.


--------------------------------------------------------------------------------

Cas particulier : modifier un objet créé initialement par des clics sans glisser (=points de contrôles anguleux)

Mauvaise nouvelle : il n'est pas possible de rajouter directement des points de contrôles ou de les modifier dans ce cas.

Bonne nouvelle : on peut transformer un point de contrôle anguleux en point de contrôle arrondi.

Pour le faire :

sélectionnez l'objet créé initialement en points anguleux avec l'outil sous-sélection
cliquez une fois sur le point de contrôle que vous souhaitez transformer
ce point de contrôle devient alors blanc (et non plus noir)
en appuyant sur la touche [Alt] , déplacez le point blanc ...
les poignées latérales apparaissent ... la transformation est faite
Note importante : vous ne pouvez pas ajouter de point de contrôle lorsque l'emplacement où vous voulez l'ajouter est entouré par des points anguleux. Il faut donc avant transformer au moins un des points anguleux en point arrondi ...


--------------------------------------------------------------------------------

Bon, je sais que ce topo peut sembler complexe ... il l'est, pour être très honnête !
;-))

Par contre, vous avez en quelques lignes ce que je n'ai jamais trouvé de façon aussi synthétique et pas-à-pas dans quelque bouquin que ce soit .... je ne veux pas dire que c'est exceptionnel ... mais c'est la synthèse de nombreuses lectures et d'un peu de pratique ...
;-))

Bon ... maintenant ne vous affolez pas !!!!

Entraînez-vous aux différentes manips et vous verrez que comme pour les autres outils, une fois qu'on a compris ... c'est tout simple et hyper-puissant !!!!

Les prochains outils étudiés seront plus simples (c'était la bonne nouvelle pour finir ...)


Dernière édition par Gi le Dim 30 Aoû - 22:40, édité 2 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13226
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Re: Cours Flash 5 par Pierre Lalande (1 à 9)   Mer 13 Juil - 20:32

Outil texte

Ce cours est réalisé par Pierre Lalande - FAC-multimedia
www.fac-multimedia.fr

(pas d'option pour cet outil)

L'outil texte permet d'écrire ... du texte Bad)

Dans les fonctions très évoluées de flash, il est également possible avec cet outil de créer par exemple des zones de formulaires ...
... mais nous n'en sommes pas là et n'aborderons donc pas ce point ici.

Création du texte

Comme vous l'imaginez, vous sélectionnez l'outil texte et cliquez dans la zone de travail.

Deux possibilités s'offrent à vous : taper "en linéaire" et remettre à la taille en suite, ou définir d'emblée la largeur de la zone de texte.

Mode "linéaire"

Par défaut, si vous faites un simple clic dans la zone de travail avec l'outil Texte, vous êtes dans ce que j'appelle le mode "en linéaire" :








Mode"largeur définie"

Si vous cliquez et glissez la souris dans la zone de travail, Flash se met en mode "largeur définie" :




Lâchez quand vous avez atteint la bonne largeur ... puis tapez le texte :





Basculer d'un mode à un autre

Si vous êtes en mode "largeur définie" et que vous voulez revenir au mode "linéaire", il suffit de double-cliquer sur le carré en haut et à droite de la zone de texte. La zone s'agrandit automatiquement.




Notez au passage que le carré devient un rond.

Le carré signifie donc "zone à largeur définie" et le rond "zone linéaire".

Si vous êtes en mode linéaire et que vous souhaitez basculer en mode largeur définie, attrapez avec votre souris le rond et donnez à la zone la largeur désirée. Le rond redeviendra bien un carré, signe du changement de type de zone texte.





Mise en forme du texte

Pour effectuer la mise en forme du texte, et c'est le bonus de ce topo, nous allons utiliser les panneaux "Caractère" et "Paragraphe".

Pour les afficher, allez dans le menu Fenêtre / Panneaux ... et cochez celui que vous désirez : Caractère ou Paragraphe.

Vous constaterez qu'il en existe un troisième se nommant "Options de texte". Nous ne le traiterons pas aujourd'hui car il n'est utile que dans des fonctions avancées de flash (formulaires ou texte dynamique par exemple).

Commençons par le panneau Caractère :

Il est très intuitif : de haut en bas, vous pouvez choisir :




Like a Star @ heaven la police,
Like a Star @ heaven la taille de la police, le gras, l'italique et sa couleur,
Like a Star @ heaven son espacement et le crénage ou non de la police,
(rappel : le crénage est la propriété d'avoir des espaces entre les lettres adaptés mais différents selon les lettres)
Like a Star @ heaven son type (normal, indice ou exposant),
Like a Star @ heaven le lien associé à une partie du texte sélectionné auparavant.

Un petit commentaire : hélas !, 100 fois hélas !, pas de fonction "souligné" ... il faut faire un trait en dessous, mais attendez un peu car il faudra alors grouper texte et dessin ... et ça nous ne l'avons pas encore vu.

Passons maintenant au panneau Paragraphe :

Lui aussi est très simple d'emploi avec de haut en bas :




Like a Star @ heaven le type d'alignement,
(gauche, centré, droite, justifié)
Like a Star @ heaven le décalage latéral, utile pour mettre des parties de texte en évidence, gauche et droite,
Like a Star @ heaven le décalage latéral de première ligne,
puis, à droite, la hauteur d'interligne des lignes sélectionnées.


Dernière édition par le Jeu 14 Juil - 4:51, édité 1 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13226
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Re: Cours Flash 5 par Pierre Lalande (1 à 9)   Jeu 14 Juil - 4:46

Outil ovale

Ce cours est réalisé par Pierre Lalande - FAC-multimedia
www.fac-multimedia.fr

(pas d'option pour cet outil)

L'outil ovale permet de faire des ovales et des cercles pleins ou vides.


Choix des couleurs

Même s'il est possible de modifier la couleur du contour et de l'intérieur dans un second temps, il est souvent plus simple de choisir les couleurs avant.

Pour le faire, il existe deux possibilités :

la plus rapide : la barre d'outils couleurs,
la plus complète : les panneaux Trait, Remplir, Mixeur, Nuanciers.
Commençons par le plus simple et le plus rapide : la barre d'outils Couleurs (nous verrons les 4 panneaux une autre fois pour ne pas vous mélanger).


Barre d'outils Couleurs




Même si elle n'est pas grande, cette barre d'outils contient un véritable condensé des fonctions de couleurs que vous trouverez plus tard dans les différents panneaux.

Elle est très pratique ; nous allons l'étudier point par point.

En cliquant sur le premier bouton, vous obtenez la fenêtre ci-dessous.




Elle permet, vous l'avez compris, de définir la couleur du contour.

Le mode le plus simple consiste à choisir la couleur avec la pipette qui apparaît :




Le mode le plus précis (et le plus familier pour les développeurs html) consiste à définir la couleur voulue à partir de son code hexadécimal.

Cliquez simplement dans la fenêtre


et indiquez le code de la couleur désirée.

Pour les non-habitués avec les valeurs hexadécimales, un petit rappel :

Le # est un caractère de contrôle. Si vous oubliez de le taper, il sera automatiquement ajouté.

Ensuite, les chiffres représentent par paires en hexadécimal les 2 couleurs primaires en vidéo : Rouge, Vert, Bleu.

En décimal, on compte 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, ..., 99


En hexadécimal, on compte : 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, ..., FF

Quelques exemples :

un rouge pur s'écrit #FF0000 (maxi pour le rouge, rien pour le vert, rien pour le bleu)
un gris moyen s'écrit #88888888 (milieu de toutes les couleurs)
le jaune s'obtient en vidéo en mélangeant le rouge et le vert ; un jaune pur est donc #FFFF00
mais si vous voulez un bel orange, il faut moins de vert ... et vous pouvez avoir par exemple #FF9900
... et ainsi de suite ... et le bonheur avec flash, c'est que contrairement au HTML, à peu près toutes les couleurs seront retrouvées ... et de façon identique quelque soit le browser !

Le mode le plus "mélangé" consiste à cliquer sur le bouton


et à utiliser la fenêtre classique windows, que je ne commenterai donc pas puisqu'elle n'est pas spécifique à Flash et que vous la connaissez certainement (et qu'en plus, très honnêtement, je m'en sers assez peu, préférant les deux autres modes) :



Vous avez choisi la couleur du trait ? Parfait !

Faites exactement pareil pour la couleur de remplissage.

Enfin, dans le bas de la barre de boutons Couleurs se trouvent 3 symboles :


...permet de rétablir les couleurs par défaut (habituellement noir pour les contours et blanc pour les surfaces, sauf si vous changez la palette ... mais ça c'est pour plus tard ... et encore ... c'est tellement peu nécessaire)

...permet d'échanger les couleurs ; si par exemple vous avez du rouge sur le contours et du bleu sur l'intérieur et que vous voulez le contraire ... hop, un clic ici et c'est fait.

...permet de choisir pas de couleur ... utile pour ne pas avoir ou avoir seulement contours ou remplissages.

Et bien maintenant que vous savez manipuler les couleurs à l'aide de la barre d'outils couleurs, nous allons passer à l'utilisation de l'outil Ovale.

Créez un ovale ou un cercle

Vous avez donc compris comment choisir la couleur du bord (ou l'absence de bord en mettant


Vous avez également compris comment choisir le couleur de remplissage (ou absence de remplissage).

Bon et bien vous savez tout ... cliquez avec l'outil Ovale sur la zone de travail et tirez ... quand c'est bon, lâchez ... c'est fini.

Trois précisions tout de même :

si vous voulez un cercle et non un ovale, appuyez sur la touche [Maj] pendant que vous définissez la taille de l'objet,

si vous voulez changer ensuite les couleurs, sélectionnez le bord avec la flèche noire, puis allez changer la couleur du bord et faites de même avec l'intérieur,

faites des essais en superposant des formes les unes aux autres puis en les supprimant ou en les déplaçant ... ceci vous donnera peut-être des idées pour créer de nouvelles formes facilement.


Dernière édition par Gi le Dim 30 Aoû - 22:36, édité 1 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Contenu sponsorisé




MessageSujet: Re: Cours Flash 5 par Pierre Lalande (1 à 9)   

Revenir en haut Aller en bas
 
Cours Flash 5 par Pierre Lalande (1 à 9)
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» cours d'utilisation du flash en manuel
» Portrait à la pierre noire
» ICCROM Cours conservation pierre
» Animations flash pour comprendre les bases de la photo
» 21 LE VOYAGE DE LA PIERRE DE LUNE

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Mots d'art & Scénarios :: Scripts & Flash d'art :: Animations et de tout pour Flash-
Sauter vers: