Chap 2 animations___vf

Objectifs :•Réaliser des animations•Créer des sites Web statiques et dynamiques•Échanger des données à distance à travers une page Web

Plan du chapitre :Partie A : AnimationsPartie B : Pages Web StatiquesPartie C : Pages Web dynamiques

Chapitre IIProduction électronique avancée

Partie A : Animations

Thabet CHOKRI

AnimationsPartie A

Objectifs :- Créer des animations- Insérer des objets dans une animation- Exporter des animations

I.Introduction :On trouve souvent dans les pages web des éléments animés qui ont subi un mouvement et/ou une

déformation.Flash est un logiciel créateur d'animations.

Présentation du logiciel Macromedia Flash :

LEGENDE

La barre des menus La boite à outils

La barre d'outils principale La zone du travail

Les panneaux affichés Le calque actif

Le scénario La tête de lecture

Le document La barre d'édition

L'inspecteur des propriétés La ligne du temps

Thabet CHOKRI

AnimationsPartie A

II. Espaces de travail et outils :1.La règle et les grilles :Activité 1:2.Les propriétés du document :Activité 2 :3.Les Formes et les groupes :Activité 3 :4.Les textes :Activité 4 :5.Les calques :Activité 5 :6.L’importation des médias :Activité 6 :7.Les symboles graphiques :Activité 7 :8.Les séquencesActivité 8 :•Les images du scénario :Activité 9 :4. Ouvrir le fichier D:\4SI\ballon.fla.5. A partir du scénario, déduisez les différents types d'images utilisées.6. Déterminer comment insérer ou supprimer les différents types d'images.

Thabet CHOKRI

AnimationsPartie A

III. Les types des animations :1. L'animation image par image2. L'animation interpolée

a. L'interpolation de formeb. L'interpolation de mouvementc. L'interpolation de mouvement avec guide

IV. Les boutons :1. L’insertion d’un bouton :2. L'action à un bouton :

V. Le langage Actions Script :VI. La publication:

Thabet CHOKRI

Pages Web StatiquesPartie B

I. Rappel : 1. Une page web : est un document multimédia.

2. Un site Web : est un ensemble de pages Web liées entre elles grâce à des liens hypertexte. 3. lien hypertexte : texte souligné, il peut être :

I. lien externe : permet d’atteindre un fichier

II. lien Interne : permet d’atteindre un endroit spécifique dans une page Web.

Un lien hypermédia : peut être une image, clip vidéo, séquence permettant d’atteindre une page web

2. Signet : emplacement dans un fichier afin d’y faire référence.

Le Logiciel ……………………. permet de créer des pages web

2. Gestion des tableaux :2. L'insertion d'un tableau.

2. Menu tableau 3. Insérer4. Tableau

3. Propriétés : bordure, couleur de cellule, alignement, arrière plan2. Tableau3. Propriété de tableau, tableau ou cellule

3. L'insertion des liens hypertextes externes3. Sélectionner la source du lien. 4. Menu "Insertion", "lien hypertexte" . 5. [choisir "Fichier" ou page Web existante(e)".]6. Sélectionner la page cible.7. Valider.

7. Liens internes :• L'insertion d'un signet

menu "Insertion", "Signet" Saisir le nom du signet. Valider.

• La création d'un lien vers un signet Sélectionner la source du lien. Menu "Insertion", "lien hypertexte" Choisir "Signet" Sélectionner le nom du signet. Valider.

8. Formulaire :• un formulaire est un espace de saisie dans l'interface utilisateur, pouvant comporter plusieurs

zones : saisir du texte, cocher des cases, effectuer un choix dans une liste de termes prédéfinis,

appuyer sur des boutons, etc. Insérer un formulaire Insérer les autres options (cases à cocher, listes,…..)

Thabet CHOKRI


9. Page de cadres : Création d’une page de cadres :

• Menu Fichier, Nouveau. • Autres modèles de pages. • Onglet Cadres. • Choisir le modèle.• OK

Pour afficher une page déjà créée :• Cliquez sur Choisir la page initiale, puis sélectionnez la page à afficher.

Pour créer une page dans un cadre• Cliquez sur Nouvelle page.

Propriétés des cadres :

Thabet CHOKRI


II. Le langage HTML (Hyper Text Markup Language) :

1. Introduction :Activité : tp1

Le langage HTML est le langage utilisé pour la création de pages web.

Le langage HTML est composé d’un ensemble de balises (tags).

Le document HTML peut contenir un ensemble de balises tels que <HEAD>, <BODY>, <TITLE>, <HTML>...

Syntaxiquement, les balises rencontrées peuvent être reparties en quatre catégories:

♦ Des balises composées d'une partie ouvrante et d'une partie fermente, tel que <BODY>….</BODY>,

♦ Des balises composées d'une seule partie ouvrante tel que : <BR>

♦ Des balises composées d'une partie ouvrante et d'une partie fermante avec des propriétés, tel que :

<FONT SIZE="5"COLOR="blue">...</FONT>,

♦ Des balises composées d'une partie ouvrante avec des propriétés, tel que :

<IMG SRC="image1.jpg" WIDTH="80" HEIGHT="78" >

Thabet CHOKRI


2. Structure d’un document HTML :

Thabet CHOKRI


III. Les balises du langage HTML :

Thabet CHOKRI


1. Les textes et les paragraphes :

Le texte défini entre <BODY> et </BODY> sans balises, sera repris par le navigateur.• La balise <BR> permet un retour à la ligne• La balise <P> provoque un passage à la ligne (Nouveau paragraphe.)

la propriété ALIGN définit …………….. "CENTER"• La balise <FONT> change la police, la couleur et la taille du texte.• Les styles d'écriture : la balise <B> (BOLD=Gras),

<I> (ITALIC) <U> (UNDERLINE).

• La balise <CENTER> alignement centré.• La balise <HR> insérer une ligne horizontale.• la balise <HR>, la propriété width permet de définir la largeur de la ligne horizontale.

Tableau : balise propriété rôle

Activité :

•la balise <Hn>…</Hn> titre de niveau n

2. Les titres :

Thabet CHOKRI


4. L’ arrière plan :

• <BODY BACKGROUND="Adresse"> : mettre une image comme arrière plan

Activité :

5. Les listes Activité :

•la balise <UL>…</UL> Les listes à puces, •la balise <OL>…</OL> Les listes numérotées•la balise <DL>…</DL> Les listes de définitions•Les balises <LI>…</LI> permet la numérotation

•<IMG> l'insertion d'une image la propriété • SRC="adresse" : définit l'adresse absolue ou relative de l'image à afficher.• WIDTH="largeur" et HEIGHT="hauteur" : définissent la largeur et la hauteur de l'image en pixels.• ALT="texte" : permet de définir le texte de l'info bulle de l'image• BORDER="taille" : définit la largeur de la bordure autour de l'image.• ALIGN="alignement" permet de définir l'alignement de l'image ("left", "center", "right").

3. Les images :Activité :

Thabet CHOKRI


• <A href= " adresse cible ">texte </A> des liens hypertextes

6. Les tableaux :Activité :

7. Les liens hypertextes:Activité :

•La définition d'un tableau : <TABLE>…</TABLE> • ❖ La définition d'une ligne : <TR>…</TR>• ❖ La définition d'une cellule <TD>…</TD>

Thabet CHOKRI


8.Les formulaires HTML :Les différents objets graphiques se trouvent entre <FORM> et </FORM>.

Cette balise possède les attributs suivants :

•ACTION : Spécifie l'adresse URL qui va recevoir les informations entrées dans le formulaire.

•NAME : Le nom attribué au formulaire.

•METHOD : Permet de spécifier la méthode d'envoi des données au serveur (POST ou GET).

a - La zone de saisie :Pour les zones de saisies cryptées (type mot de passe), on utilise INPUT TYPE="password’’

b - La zone de saisie à plusieurs lignesLa définition d'une zone de texte à plusieurs lignes se fait à l'aide de la syntaxe suivante :

<TEXTAREA NAME="nom" ROWS="NL" COLS="NC">texte par défaut </TEXTAREA>

Où NL représente le nombre de lignes et NC représente le nombre de caractères par ligne.

c- Les cases d'options :La définition du contrôle cases d'options (bouton radio) se fait à l'aide de la balise suivante :

<INPUT TYPE="RADIO" NAME="nom" VALUE="valeur1" >•Les Propriétés :

• NAME : Indique le nom du contrôle. Tous les boutons, composant un même groupe,

portent le même nom.

• VALUE : L'information à retourner si la case est cochée.

Thabet CHOKRI


d - Les cases à cocher :La définition du contrôle cases à cocher (checkbox) se fait à l'aide de la balise suivante :

<INPUT TYPE="CHECKBOX " NAME="nom" VALUE="valeur1" >

Les Propriétés : • NAME : Indique le nom du contrôle. Tous les boutons, composant un même groupe,

portent le même nom.

• VALUE : L'information à retourner si la case est cochée.

e- La liste de sélection :<OPTION [SELECTED] >valeur 1 </OPTION> SELECTED : Indique la valeur sélectionnée par défaut.f- Le contrôle button :Lors d'un clic, un bouton peut exécuter une action ou un programme (écrit à l'aide d'un langage autre

que le langage HTML, tel que le JavaScript, le PHP ….)…..

g - Le contrôle FileC'est un contrôle qui permet de transmettre un fichier, il s'applique avec la syntaxe suivante : <INPUT NAME="FICHIER" TYPE="FILE" SIZE="nombre de caractères" >

Révision et récapitulation1. Pour créer une animation on doit savoir son ……… : …………..............……ou interpolation……...........….

ou …………………………..……..

2. Décider s’il y a un …………………….. pour créer un nouveau …………….

a. Si l’animation est : image par image , déterminer le nombre ………………. et commencer par créer la

1ère …………… puis insérer une ………..…………pour créer la 2ème………….. et ainsi de suite…

b. Si l’animation est ………………………….. déterminer la 1ère …………… et la forme ………………

• Créer dans l’image1 la 1ère …………. et insérer dans une autre position une ……………….. pour

créer la ……………. ….

• Appliquer ………………………….

c. Si l’animation est ……………………………………..., créer un …………………………………

• Dans l’image 1 …………………………………….

• dans une autre position insérer une ………………. pour déplacer le ………… à sa position ………..

• Créer éventuellement un calque………… et dessiner la ……………….

• Appliquer …………………………………………..

3. ……………… l’animation sous le nom demandé et faire la ……………………….

image par image de formeInterpolation de mouvement

arrière plan calqued’images

image image clé imageInterpolation de forme forme finale

forme image clé

la forme finaleune interpolation de forme

Interpolation de mouvement symbole graphiqueinsérer le symbole

image clé symbole finale

guide trajectoireInterpolation de mouvement

Enregistrer publication

type

Chap 2 animations___vf

Art & Photos

Transcript of Chap 2 animations___vf