Flash 8

Réaliser son site personnel Mon site perso

Fichier flash source : mon_site_perso.rar (2300 ko)

Fichier images source : images.rar (2180 ko)

Fichier vidéo source : 2cv.wmv (2220 ko)

Fichier vidéo compilé : flv (2580 ko)

Fichier vidéo clip flv : swf (36 ko)

Fichier vidéo clip intégré : swf (2310 ko)

Fichier vidéo source clip intégré : fla (251 ko)

Fichiers audios sources : musique.wav (3830 ko), bouton.wav (37 ko)

Lecteur de son : lecteur_son.fla (38 ko)

Barre prelaod

lien

Organisation de travail

Sur votre disque décompressez les fichiers sources dans des répertoire respectifs : flash, son, video, images.

Dans Flash créons un nouveau document flash de 600 x 400 x 24 ips (images par secondes) puis modifions la couleur du fond de la scène que nous nommerons "accueil" dans le panneau des scènes.

1) L'accueil

Barre de menu, boutons, code navigation, code stop, code de lancement de son.

Nous allons concevoir cette scène d'introduction en premier, y placer notre menu de navigation (boutons) avant de la dupliquer 4 fois. Nous irons bien plus vitre à créer un gabarit valable pour toutes les scènes (que nous copierons) plutôt que de créer les scènes unes par unes.

Avant de démarrer la création de notre "site perso" configurons notre interface de travail afin de l'adapter à notre mode de travail. Les panneaux t l'interface personnalisée peuvent être enregistrés.

Nous savons d'emblée que nous aurons 4 rubriques principales : "images", "vidéos", "liens", "contact" ce qui suppose que nous aurons 4 boutons qui vont nous permettre de naviguer d'une rubrique à l'autre.

A) La navigation

Sur un calque nommé menu, nous allons créer une barre sur laquelle nous placerons nous 4 boutons. Nous commencerons par créer un premier bouton fonctionnel que nous dupliquer.

Créons le bouton "image", pour cela nous écrirons le mot image avec une typographie de notre choix (personnellement j'ai choisi la police "impact"). Une fois le mot écrit = Clic droit > Convertir en symbole ou "F8" > Bouton

Nous avons 4 étapes : "haut", "dessus", "abaissé" et "cliqué" qui correspondent aux effets de "rollover" ou changement d'apparence au passage de la souris.

L'ajout d'un effet de son se fait dans le panneau des propriétés en bas de notre interface et à une étape ou imagé clef choisie.

Une fois notre bouton terminé, retournons dans la scène "accueil" et plaçons le code de notre bouton dans le panneau "actions" qui se trouve en bas de notre interface et que l'on peut appeler d'un clic droit sur l'objet sélectionné.

on (release) {
gotoAndStop("images", 1);
}

Il suffit maintenant de dupliquer nos boutons dans la "bibliothèque", de les nommer correctement :"images", "vidéos", "liens", "contact" de clôner le bouton image sur notre scène principale et de permuter les symboles à l'aide du clic droit.

Voir les tutoriaux "bouton_simple.html" et "bouton_anime.html" pour créer des boutons

B) Les scènes

Nous avons maintenant notre scène "accueil" que nous pouvons habiller et personnaliser et que nous allons dupliquer en scènes nommées "images", "vidéos", "liens", "contact" de telle sorte que nous aurons notre structure et notre navigation fonctionnelles.

Afin d'éviter que nos scènes se lisent en boucle dès l'ouverture de notre animation, nous sommes obligés de placer un événement d'image clef de stop dans un nouveau calque nommé "code" placé tout en dessous des calques.

stop();

C) L'habillage musical

Dès le lancement de l'animation, nous allons jouer un morceau de musique en boule (ici, une boucle qui provient de "NIN - Year Zero - Zero Sum ®", la boucle se fait par un logiciel de traitement de son quelconque, et s'exporte au format "wav".

Importons la musique dans notre bibliothèque, on peut aussi importer la musique dans la scène à une image clef déterminée. nous choisissons de piloter la musique depuis la bibliothèque à l'aide d'un script que nous placerons sous le stop();

musique = new Sound();
musique.attachSound("musique");
musique.start(0,5);

Nous allons en plus créer un petit lecteur "stop" , "play" qui sera toujours en bas de nos scènes. La fabrication des boutons est la même que pour le menu de navigation.

on (release) {
_root.musique.stop();
}

on (release) {
_root.musique.start(0,5);
}

Ce code nous permet de jouer ou de couper le son à volonté. La condition obligatoire est de lier la musique dans la bibliothèque par un clic droit sur "musique.wav" > Liaison, cocher export action script, export première image.

Nous allons copier coller ce lecteur sur toutes nos scènes "Ctrl + C", "Ctrl + Shift/Maj + V" pour coller au même endroit dans un nouveau calque nommé "son".

Maintenant notre structure est fonctionnelle et prête à recevoir le contenu.

2) Images

Importation, disposition, permuter en clip, utiliser comme bouton, nommer clip, drag'n drop, bouton transparent, ouverture en popup.

Dans cette rubrique, nous placerons les images que nous voulons présenter (travaux persos, photos, dessins, vacances ...) nous avons choisis ici des photos d'animaux et de paysages. Nous allons ajouter à chaque image une fonction de drag and drop (glisser et déposer) et une fonction d'ouverture en grand dans une fenêtre internet (attention au bloqueur de popup !!!)

D'abord importer les petites images dans notre scène puis les disposer sur un nouveau calque nommé "image" en lignes et colonnes par thèmes, animaux, insectes, paysages.

Chaque image doit être transformée en clic = Clic droit > Convertir en symbole ou "F8" > Clip nommé selon le thème suivi de 01, 02, 03...

A) Image clip

Une fois cette longue opération terminée, de retour sur notre scène "images, dans le panneau des propriétés, sélectionner "utiliser comme bouton" et nommer l'image de la même manière que le clip, par exemple pour l'image importée "petite_insectes05.JPG" le clip se nommera "insectes05" et sons étiquette image sera "insectes05"

B) Drag and drop

Le drag'n drop est une fonction attribuée à un clip ou à une image qui permet de déplacer le clip avec la souris.

on (press) {
startDrag("insectes05");
}
on (release) {
stopDrag();
}

Voir le tutorial "deplacer_menu.html" pour créer un drag and drop

C) Popup ou open window

Cette fonction permet d'ouvrir une nouvelle fenêtre de navigateur à la condition que l'animation soit dans une page html qui comporte un "javascript" placé dans le tag <head>

<script language="JavaScript" type="text/JavaScript">
function popup(URL,winName,features){
window.open(URL,winName,features);}
</script>

Revenons à nos images clip et double cliquons sur la première image ici "animaux01", nous nous retrouvons un niveau au dessous de notre clip, et nous retrouvons notre image importée au dessus de laquelle nous allons dessiner une petite loupe qui nous servira à ouvrir une fenêtre popup.

En premier le dessin de la loupe dans un petit cadre situé au dessus de l'image, puis au dessus de cette loupe nous placerons un bouton transparent. Un bouton transparent est un bouton normal ou seule l'image clef "cliqué" contient un tracé. Cette technique est fréquemment utilisée pour concevoir des bannières publicitaires.

Sur ce bouton transparent, dans le panneau "action"

on (release) {
getURL("javascript:popup('animaux01.html','animaux01','toolbar=no,scrollbars=no,resizable=no,width=500,height=350,left=200,top=200')" );
}

Cette fonction "javascript" ne marche qu'avec le code placé dans la page html (ci-dessus)

3) Vidéos

A) Importer vidéo, convertir clip, commande stop play, importer video service flash FVSS, Load Movie, cible, niveau.

Flash permet depuis les dernières version pro, mx et cs d'importer de la vidéo et de la diffuser selon plusieurs technologies. Le streaming, la diffusion progressive, la vidéo intégrée, la vidéo diffusée via serveur Macromedia®

Nous allons diffuser la vidéo selon deux méthodes.

La première sera de créer un fichier d'animation swf contenant la vidéo intégrée avec ses boutons de lecture, play, pause et stop et d'appeler cette vidéo dans notre site perso.

La seconde méthode sera d'utiliser la lecture en diffusion progressive et d'appeler la vidéo sur notre site perso. Ces deux méthodes permettent d'éviter de créer un site perso trop lourd en poids, et de ce site appeler les animations qui seront placées dans des dossiers. Un site qui contient une vidéo intégrée de 1500 ko pèsera au minimum 1500 ko.

B) Dans un nouveau document flash de la taille de la vidéo source.

- Dans le menu du haut > Fichier > Importer > Importer de la vidéo > Intégrée au swf, ajouter les boutons de pilotages

on (release) {
play();
}

on (release) {
stop();
}

on (release) {
gotoAndStop(1);
}

Enregister le fichier avant d'exporter l'animation 2cv01.swf par exemple

- Dans le menu du haut > Fichier > Importer > Importer de la vidéo >Diffusion via service FVSS

Compresser, choisir le débit vidéo et audio et enfin ajouter la barre de lecture proposée par le service FVSS

C) Dans notre scène "video" nous ajouterons 3 étapes dans notre time line.

Étape 1, les deux boutons textes placés au dessous des boutons transparent.

on (release) {
gotoAndStop(2);
}
on (release) {
loadMovie("2cv01.swf", "video");
}

clip progressif

on (release) {
gotoAndStop(3);
}
on (release) {
loadMovie("2cv02.swf", "video");
}

Étape 2, l'emplacement d'une vidéo intégrée au clip se placera selon deux manières au choix :

Soit sur un niveau (Z Buffer)

• 0 = remplace notre site perso
• 1 = se place au dessus de notre site perso en haut à gauche en x = 0 et y = 0
• 2 = se place sur le niveau au dessus du 1 etc...

Soit sur une cible, c'est un clip visible ou invisible, nommé afin d'informer la cible et sur lequel notre clip video se placera. Dans notre exemple, le "loadmovie" place le clip sur une cible nommée "video" ce qui permet d'être plus précis.

Étape 3, l'emplacement du clip diffusion progressive, même principe que pour le clip intégré à la différence que nous aurons un fichier swf appelé qui lui même chargera un fichier flv contenant les codecs et les moteurs de diffusion progressive.

Enregister le fichier avant d'exporter l'animation 2cv02.swf par exemple

Nous aurons sur les étapes 2 et 3 la présence d'un clip vide nommé "video" pour faire simple, mais peu importe le nom, qui servira de calle aux clips appelés.

Voir les tutoriaux "load_movie.html" et "load_image.html" pour utiliser le loadmovie.

4) Liens

Sur cette page nous mettrons nos liens favoris, couverts eux aussi de boutons transparent.

L'avantage du bouton transparent permet de créer un seul élément de bibliothèque à utiliser autant de fois qu'on le souhaite.

Par exemple nous avons un lien vers www.google.fr, nous écrivons en texte www.google.fr, nous plaçons au dessus notre bouton transparent sur lequel nous écrirons ce code

on (release) {
getURL("http://www.google.fr", "_blank");
}

_blank signifie ouvrir dans une nouvelle fenêtre, ce qui permet de conserver notre site perso en arrière plan !

Pour tous nos autres liens, il suffira simplement de modifier l'adresse écrite entre les apostrophes "#"

5) Contact

Pour cette dernière rubrique, qui est notre carte de visite, nous écrirons nos coordonnées, nous pourrons faire un lien vers notre cv en pdf ou en html et mettre notre adresse mail cliquable afin d'ouvrir une messagerie automatiquemant.

Cette ouverture automatique de messagerie se fait par un lien URL de même type que pour pointer vers un site comme ci-dessus à la différence que l'adresse inernet est remplacée par un mailto:mon.adresse@hebergeur.com exemple

on (release) {
getURL("mailto:michbidu@free.fr", "_blank");
}

Cet exemple terminé vous permet de créer un site personnel que vous pourrez montrer lors de vos envois de lettres de motivations, montrer vos travaux, vos photos de vacances ou plus simplement une carte de visite interactive.

La mise en ligne se fait via FTP (File Transfert Protocole) à la condition que cette animation soit dans une page htm, html impérativement nommée "index", et ce sur votre espace personnel qui vous est offert avec votre forfait internet Adsl.