Production électronique avancée 
Objectifs : 
Chapitre II 
•Réaliser des animations 
•Créer des sites Web statiques et dyn...
Partie A Animations 
Partie A : Animations 
Objectifs : 
- Créer des animations 
- Insérer des objets dans une animation 
...
La barre des menus La boite à outils 
La barre d'outils principale La zone du travail 
Les panneaux affichés Le calque act...
Partie A Animations 
II. Espaces de travail et outils : 
1.La règle et les grilles : 
Activité 1: 
2.Les propriétés du doc...
Partie A Animations 
III. Les types des animations : 
1. L'animation image par image 
2. L'animation interpolée 
a. L'inte...
Partie B Pages Web Statiques 
I. Rappel : 
1. Une page web : est un document multimédia. 
2. Un site Web : est un ensemble...
Partie B Pages Web Statiques 
7. Liens internes : 
• L'insertion d'un signet 
 menu "Insertion", "Signet" 
 Saisir le no...
Partie B Pages Web Statiques 
9. Page de cadres : 
 Création d’une page de cadres : 
• Menu Fichier, Nouveau. 
• Autres m...
Partie B Pages Web Statiques 
II. Le langage HTML (Hyper Text Markup Language) : 
1. Introduction : 
Activité : tp1 
Le la...
Partie B Pages Web Statiques 
2. Structure d’un document HTML : 
Thabet CHOKRI
Partie B Pages Web Statiques 
III. Les balises du langage HTML : 
1. Les textes et les paragraphes : 
Tableau : balise pro...
Partie B Pages Web Statiques 
3. Les images : 
Activité : 
•<IMG> l'insertion d'une image la propriété 
• SRC="adresse" : ...
Partie B Pages Web Statiques 
6. Les tableaux : 
Activité : 
•La définition d'un tableau : <TABLE>…</TABLE> 
•❖ La définit...
Partie B Pages Web Statiques 
8.Les formulaires HTML : 
Les différents objets graphiques se trouvent entre <FORM> et </FOR...
Partie B Pages Web Statiques 
d - Les cases à cocher : 
La définition du contrôle cases à cocher (checkbox) se fait à l'ai...
Révision et récapitulation 
image par image de forme 
type 
1. Pour créer une animation on doit savoir son ……… : …………........
Prochain SlideShare
Chargement dans…5
×

Chap 2 animations___vf

110 vues

Publié le

1

Publié dans : Art & Photos
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
110
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Chap 2 animations___vf

  1. 1. Production électronique avancée Objectifs : Chapitre II •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 : Animations Partie B : Pages Web Statiques Partie C : Pages Web dynamiques
  2. 2. Partie A Animations Partie A : Animations 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 : Thabet CHOKRI
  3. 3. 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 LEGENDE
  4. 4. Partie A Animations 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équences Activité 8 : •Les images du scénario : Activité 9 : 4. Ouvrir le fichier D:4SIballon.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
  5. 5. Partie A Animations III. Les types des animations : 1. L'animation image par image 2. L'animation interpolée a. L'interpolation de forme b. L'interpolation de mouvement c. L'interpolation de mouvement avec guide IV. Les boutons : 1. L’insertion d’un bouton : 2. L'action à un bouton : IV. Le langage Actions Script : V. La publication: Thabet CHOKRI
  6. 6. Partie B Pages Web Statiques 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 : Thabet CHOKRI 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 : 1. L'insertion d'un tableau. 1. Menu tableau 2. Insérer 3. Tableau 2. Propriétés : bordure, couleur de cellule, alignement, arrière plan 1. Tableau 2. Propriété de tableau, tableau ou cellule 3. L'insertion des liens hypertextes externes 3. 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. 7. Partie B Pages Web Statiques 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
  8. 8. Partie B Pages Web Statiques 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
  9. 9. Partie B Pages Web Statiques 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
  10. 10. Partie B Pages Web Statiques 2. Structure d’un document HTML : Thabet CHOKRI
  11. 11. Partie B Pages Web Statiques III. Les balises du langage HTML : 1. Les textes et les paragraphes : Tableau : balise propriété rôle Activité : 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.) 2. Les titres : Thabet CHOKRI 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. •la balise <Hn>…</Hn> titre de niveau n
  12. 12. Partie B Pages Web Statiques 3. Les images : Activité : •<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"). 4. L’ arrière plan : Activité : • <BODY BACKGROUND="Adresse"> : mettre une image comme arrière plan 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 Thabet CHOKRI
  13. 13. Partie B Pages Web Statiques 6. Les tableaux : 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> 7. Les liens hypertextes: Activité : • <A href= " adresse cible ">texte </A> des liens hypertextes Thabet CHOKRI
  14. 14. Partie B Pages Web Statiques 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 lignes La 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, Thabet CHOKRI portent le même nom. • VALUE : L'information à retourner si la case est cochée.
  15. 15. Partie B Pages Web Statiques 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, Thabet CHOKRI 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 File C'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" >
  16. 16. Révision et récapitulation image par image de forme type 1. Pour créer une animation on doit savoir son ……… : …………..............……ou interpolation……...........…. Interpolation de mouvement ou …………………………..…….. arrière plan calque 2. Décider s’il y a un …………………….. pour créer un nouveau ……………. d’images a. Si l’animation est : image par image , déterminer le nombre ………………. et commencer par créer la image image clé image 1ère …………… puis insérer une ………..…………pour créer la 2ème………….. et ainsi de suite… Interpolation de forme forme finale 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 la forme finale une interpolation de forme créer la ……………. …. forme image clé • Appliquer …………………………. c. Si l’animation est ……………………………………..., Interpolation de mouvement créer un ………………………………… symbole graphique • Dans l’image 1 ……………………………………. insérer le symbole • dans une autre position insérer une ………………. image clé pour déplacer le ………… symbole à sa position ……….. finale • Créer éventuellement un calque………… guide et dessiner la ………………. trajectoire • Appliquer ………………………………………….. Interpolation de mouvement Enregistrer publication 3. ……………… l’animation sous le nom demandé et faire la ……………………….

×