CREATION DE PAGES WEB ANIMATION FLASH Alain ICHARD

Créer un sous-dossier de fcont \ "jour" ayant pour nom FLASH .

FLASH est un logiciel permettant de créer des animations pour agrémenter les pages web .

Où peut-on se le procurer ? http://www.macromedia.com/downloads/ existe en version démonstration 30 jours

Installer le logiciel.

Bulle rectangulaire à coins arrondis: Echelle des temps

Repérer les différentes zones sur l'écran .

Ma première animation .

8 Dessiner un cercle avec couleur de fond, couleur et largeur de trait personnalisés

8 Cliquer sur 35 de l'échelle des temps.

Avec le bouton droit : Insérer image-clé(keyframe).

Avec le lasso capturer l'image 1 et la déplacer pour obtenir ceci

8 Cliquer sur image1 dont infobulle affiche Static

puis bouton droit sélectionner "créer l'interpolation mouvement" (create motion tween) pour obtenir à

Recommencer l'opération pour image 35

Remarquer l'animation signalée entre les deux images sur l'échelle des temps ainsi que le changement de couleur de la zone.

J Pour visualiser l'animation, choisir dans le menu "Contrôle" puis "tester l'animation". (play)

< Sauvegarder et publier au format HTML

Fichier ,enregistrer-sous dans le dossier flash sous le nom boule..fla. l'extension correspond au mode édition donc modifiable

Fichier, aperçu avant publication, flash génère le fichier boule.swf. l'extension correspond à un fichier optimisé qui doit se trouver dans le dossier où se trouve le document qui l'utilise . Dans le cas contraire modifier le code source.

Fichier, aperçu avant publication, HTML génère le fichier boule.html. l'extension correspond à un fichier destiné au web et permet la récupération du code HTML à insérer dans un autre document .

On peut aussi générer une image gif :fichier paramètres publication GIF , onglet gif pour paramétrer l'image.

Afficher le code source de la page.

<HTML>

<HEAD>

<TITLE>boule</TITLE>

</HEAD>

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"

WIDTH=550 HEIGHT=400>

</OBJECT>

</BODY>

</HTML>

Entre les balises <object> et </object> nous avons la définition de l'animation qui peut être insérée dans n'importe quel document.

Exercice: ouvrir couleusr.htm afficher le code source et placer l'animation à la place d'une couleur .Enregistrer sous couleursanim1.htm . Tester . L On remarquera que l'espace occupé est plus grand que l'animation elle même, il convient de réduire cet espace

On peut changer les propriétés (taille, couleur de fond ..)de l'animation avec "modification", "animation" .

Changer la taille et visualiser .

<recommencer la procédure d'enregistrement aux trois formats sous le nom boule1. récupérer le code source et l'insérer dans le document couleursanim1.htm. enregistrer sous couleursanim2.htm . Comparer les résultats . On peut intervenir directement dans le code source pour ajuster. Essayer

Exercice: réaliser une animation à partir d'un texte de couleur se déplaçant sur un fond de couleur. Penser à ajuster la taille

Enregistrer sous le nom textemove.fla puis sous les différents formats y compris .GIF. Insérer cetteimage dans une page web et observer le résultat J

Le texte se déplace de gauche à droite. On peut l'obliger à faire les aller-retour. Il suffit d'inverser la séquence. Sauvegarder sous le nom textemoveretour.fla

Sélectionner le mouvement à reproduire. 8bouton droit copier les images

Cliquer en maintenant Shift enfoncé

Se positionner sur 35 et 8bouton droit coller les images. Sélectionner la nouvelle zone (double clic) et 8 bouton droit inverser. $ Visualiser

Pour obtenir deux animations en même temps, il faut insérer un calque.

Il faut ensuite créer la deuxième animation dans ce calque

Enregistrer sous le nom textemoveretour2.fla puis sous les autres formats .Tester

Pour obtenir plusieurs scènes :

"insertion , scène"

Un calque : une animation mettant en jeu un élément.

Une scène : un ensemble de calques dont les animations se déroulent suivant la même échelle de temps

Un fichier flash : ( .fla) un ensemble de scènes qui se déroulent les unes après les autres

Exercice : .créer une deuxième scène à partir de la première et visualiser "aperçu avant publication "

TELECHARGER DES ANIMATIONS FLASH ( comme pour les applets)

Des sites réalisés avec Flash:

http://fdelous.free.fr/new.html

http://www.lestudioweb.com/studioweb.html

ces sites sont très compliqués et ont nécessité des heures de travail. Une touche de flash dans vos pages peut suffire. On peut la réaliser soi-même comme précédemment ou utiliser des animations téléchargées sur le web.

Exemple : Le fichier téléchargé s'appelle : Optical_-Nagesh_S-3887.zip Son extension indique qu'il est compacté il faut donc le décompacter.on obtient les fichiers optical illusion2.fla et optical illusion2.swf

Ouvrir le fichier optical illusion2.fla avec le logiciel Flash.

Procéder comme pour ma première animation, sauver aux divers formats dont html. Afficher la source et récupérer le code compris entre les balises <OBJECT> et </OBJECT>

Ouvrir dans l'Internet Explorer la page couleursanim2.htm. Demander l'affichage du code source. Insérer le code de l'animation comme pour boule.htm et enregistrer sous le nom couleursanim3.htm

CREATION DE BOUTONS

Ce sont des composants Flash sensibles à des évènements : Mouse Over, Mouse Out. Ils peuvent servir à créer des roll-over et pour activer des liens.

Création bouton1

Choisir une taille adaptée 130 X 30 px par exemple avec une couleur de fond particulière.

7Ecrire à l'intérieur "Lien vers…" dans une autre couleur.

On obtient

Edition , Tout sélectionner

Insertion, convertir en symbole.

Choisir le nom, et le comportement (bouton)

Valider

Editer le symbole

on obtient ----à

Pour créer un effet Roll-Over, il faut créer une deuxième image.

Insérer une image clé (keyframe) dans la case "dessus" .

7 Modifier le texte et les couleurs de fond et de caractère . Nous venons de créer la deuxième version du Bouton1

Pour revenir à Scène1 cliquer dessus

Il faut maintenant définir l'action entreprise lorsque l'on clique sur le bouton .

Sélectionner tout

8 Bouton droit actions

Fermer la fenêtre puis < sauvegarder sous le nom bouton1.fla . Visualiser "aperçu avant publication"

Insertion de boutons dans une page.

Afficher le code source de bouton1.htm

<HTML>

<HEAD>

<TITLE>bouton1</TITLE>

</HEAD>

<A HREF=couleurs.htm></A> 

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"

WIDTH=130 HEIGHT=40>

</OBJECT>

</BODY>

</HTML>

Insérer la partie concernant le bouton dans le code source de indexsociété2.htm

<enregistrer sous le nom sociétébouton1.htm

JDans le cas où on utilise ce bouton dans un document situé dans un autre dossier, il faut copier dans le même dossier bouton1.swf qui est le fichier animation flash. A

Télécharger des boutons : Exemple : http://atulrg1.tripod.com/

Exercice :

Récupérer un bouton et l'intégrer dans sociétébouton1.htm pour obtenir sociétébouton2.htm .

Créer un sous-dossier de flash ayant pour nom boutontelecharg , y copier sociétébouton1.htm , bouton1.swf .et couleurs.htm

Dans le site visité, télécharger les 3 fichiers correspondant au bouton choisi , "roud2" par exemple. (8 bouton droit, enregistrer la cible sous) Soit :round2.txt, roud2.swf, textlink.txt

round2.txt : fournit le code source à insérer dans le document à modifier ( société2.htm pour nous)

roud2.swf : doit se trouver dans le dossier, ou le code source doit pointer vers lui ( <EMBED src="round2.swf" )

textlink.txt : ce fichier fixe certains paramètres :

éditer ce fichier et

? changer le lien proposé : link=http://atulrg.tripod.com&agtext=Next123&target=_self par couleurs.htm tester après enregistrement .

? changer le texte du bouton ?? voir les infos de l'auteur