Votre question

->Vous voulez un site en flash c'est ici<-

Tags :
  • Sites Internet
  • Programmation
Dernière réponse : dans Programmation
13 Décembre 2006 00:57:51

Je vais vous montrez comment réaliser un menu de site Internet qui sort de l'ordinaire afin d'ajouter une touche d'originalité à vos projets. Ce menu consiste en une bande horizontale située sur le haut de la scène qui se déplace en fonction de la position de votre souris à l'écran. Vous avez certainement déjà dû rencontrer ce type de naviguation sur des sites Internet, tout en vous demandant par quel moyen magique en incroyable une telle chose était possible. Eh bien, c'est ce qeu je vous allez allez voir tout de suite!

Aussi, je vais abordé un nouveau procédé de développement de site: il s'agit des niveaux(levels). Imaginez par exemple que vous travaillez à plusieurs personnes sur un même projet de site Internet, chacun ayant sa propre rubrique à dévelloper. Il n'est pas évident de travailler chacun sur le même fichier .fla, et cela peut entrainer de graves problèmes d'organisation. Grâce au niveaux dans Flash, chacun travaille sur son propre fichier .fla, et c'est ensuite que ces fichiers seront chargés indépendament depuis un fichier racine. La mise à jour d'une rubrique du site ne nécessitant alors qu'une mise à jour du fichier .fla concerné, et non une mise a jour totale du site en lui-même.

Préparer la scène

1° Créez un nouveau document Flash, et modifiez les paramètres de la scène afin de lui donner les dimensions de 500 pixels de large par 400 pixels de hauteur, avec une cadence de 30 images par seconde. Nous allons créer un site présentant différents blogs où chaque description de blog sera dans un fichier .fla à part, permettant une mise à jour aisée.

2°Créez ensuite un lage rectangle de 1000pixels de large qui sera la barre de navigation de votre site. Convertissez ce rectangle en symbole clip d'animation (F8) en prenant soin de placer le centre du clip à l'extrême gauche, et donner lui comme nom d'occurence "navigation".

La barre de naviguation dépasse largement de la taille de la scène.

3° Cliquez deux fois sur ce clip afin d'entrent dans son scénario, créez un nouveau calque et disposez des boutons qui seront autant de rubriques différentes de votre site.

Placez de nombreux boutons sur un nouveau calque du clip navigation.


Un peu d'ActionScript

1° Revenez à la scène principale, et créez un nouveau calque que vous nommez "actionscript". C'est sur ce calque que nous allon mettre tout le code nécessaire au fonctionnement de notre système. Nous allons créer un gestionnaire onEnterFrame puisque le mouvement de la barre de naviguation doit être continuel et fluide. Ouvrez le panneau Actions sur le calque actionscript et placez ceci:

Citation :
onEnterFrame = function(){
navigation._x += (250-_xmouse)/10;
}


2° Testez votre animation(ctrl+enter): la barre de navigation se déplace plus où moisn vite selon la position de votre souris dans la scène.

3° La scène mesure 500 pixels de large, son centre est donc à 250 pixels. Plus le curseur de la souris se déplace vers la droite, plus la valeur _xmouse est supérieur à 250. La valeur 250-_xmouse est donc d'autant plus négative. Le bandeau se déplace ainsi vers la gauche. Même chose lorsque le curseur de la souris se déplace vers la droite, la valeur 250-_xmouse est alors positive et le bandeau se déplace vers la gauche. Le tout est divisé par 10 afin de ne pas avoir un mouvement trop rapide. Augmentez cette valeur si vous voulez un défilement plus lent.

4° Un problème se pose: le bandeau disparaît de l'écran lorsqu'il est trop déplacé vers la droite ou vers la gauche. Nous allons le bloquer selon sa position. Modifiez votre code par ceci:

Citation :
onEnterFrame = function(){
navigation._x += (250-_xmouse)/10;
if(navigation._x > 0){
navigation._x = 0;
}
if(navigation._x < -500){
navigation._x = -500;
}
}


5° Le bandeau ne doit pas avoir une coordonnée X supérieur à 0, puisque dans ce cas il partirait trop sur la droite. De plus, comme il meusure 1000pixels de large, il ne doit pas avoir une coordonnée X inférieur à -500, ce qui signifirait que le bandeau serait trop déplacé sur la gauche.

6° Aussi, nous voulons peut-être pas forcément que le bandeau se déplace tout le temps, mais par exemple uniquement lorsque la souris est dessus. Imaginez que vous soyez sur un site et que le bandeau de navigation se déplace à chaque fois que vous déplacez la souris, sans pour autant vouloir changer de rubrique, ce serait assez pénible. Du coup, nous allons activer le déplacement du bandeau uniquement lorsque le souris est dessus, c'est à dire lorsque le propiété _ymouse est inférieur ou égale à la hauteur de bandeau. Modifiez votre code.

Citation :

onEnterFrame = function(){
if(_ymouse <= navigation.height){
navigation._x += (250-_xmouse)/10;
if(navigation._x > 0){
navigation._x = 0;
}
if(navigation._x < -500){
navigation._x = -500;
}
}
}


7° Le bandeau ne se déplace désormais plus que lorsque la souris est dessus ou plutôt lorsque la propriété _ymouse de la souris est inférieur à la propriété _height du bandeau de navigation. Nous avons terminé avec la création du bandeau de navigation. Vous pouvez aisément modifier des paramètres de ce bandeau comme la vitesse de défilement, sa taille, sa position, le tout à votre guise. Nous allons maintenant développer le contenu de ce site, à savoir le chargement des rubriques.

Charger les rubriques par niveaux

1° Nous allons maintenant travailler avec des niveaux (levels), qui sont en réalité des fichiers .swf empilés les uns sur les autres à la manière de calques. Le niveau de vase, celui qui se chargera de charger les autres fichier .swf par-dessus, possède le niveau 0. Les autres fichier s'empileront avec un niveau, 1, 2, 3 ...

2° Pour charger un fichier .swf par-dessus un autre fichier, nous utiliserons la fonction loadMovieNum(). Cette fonction s'utilise de la façon suivante: loadMovieNum("fichier.swf", niveau), où niveau est un chiffre supérieur à 0. En effet, si niveau est égal à 0, alors, le fichier .swf chargé remplacera le fichier racine, celui qui justement le charge. En mettant un chiffre égal à 1 ou supérieur, le fichier .swf chargé viendra se positionner par-dessus le fichier racine.

3° Créez un nouveau document Flash de la même dimension que le fichier contenant la barre de navigation. Dans notre exemple, ce fichier a pour dimensions 500pixels de large sur 400pixels de hauteur, à une cadence de 30 images par seconde. Placez du contenu dans ce fichier, qui era une des rubriques de votre site.

4° Assurez-vous de laisser une bande vide sur le haut de ce fichier, correspondant à la taille de votre bande de navigation. En effet, puisque ce fichier sera chargé par-dessus le fichier racine, contenant la bande de navigation, celle-ci sra cachée si un élément se trouve par-dessus. Sauvergardez ce fichier sous le nom de votre choix, et créez le fichier .swf correspondant en appuyant sur les touches ctrl+enter. Attention de sauver ce fichier au même emplacement que votre fichier de départ, contenant la bande de navigation.

5° Revenez sur votre fichier principal, celui contenant la bande de naviguation, et cliquez deux fois sur le clip afin d'entrer dans son scénario. Sur le bouton devant charger le fichier .swf que vous venez de créer, palacez le code:

Citation :

on(release){
loadMovieNum("fichier.swf",1);
}


6° Où fichier.swf est le nom du fichier que vous venez de créer.
Testez votre animation(ctrl+enter): cliquez sur le bouton afin de charger le fichier, et testez ainsi que tou fonctionne.

7° Créez ainsi autant de fichiers.swf que vous avez de rubriques, tout en prenant soin de pas masquer l'eplacement de la barre de navigation. Il n'est pas utile dans cet exemple de charger les fichiers.swf sur des niveaux différents, puisque rien ne sert de les empiler. Nous pouvons donc tous les charger au niveau 1, à chaque clic sur un bouton, le fichier chargé prenant la place du précédent.

8° Vous pouvez bien sûr, selon les besoins de votre site, charger chaque fichier.swf à un niveau différent, afin de les empiler les uns sur les autres comme des calques.

Fonction unloadMovieNum()

1° Lorsque vous chargez des fichiers .swf un même niveau d'emplacement, l'un remplace l'autre, mais celui-ci n'est pas effacé pour autant. En effet, il reste chargé en mémoire et peut être rappelé à tout moment sans avoir à le recharger entièrement. Vous pourriez peut-être avoir besoin d'effacer entièrement ce fichier de la mémoire de l'ordinateur, soit pour des raisons de poids, soit pour d'autres raisons propres à votres site Internet. Dans ce cas, utilisez la fonction unloadMovieNum() de Flash, qui supprime un fichier .swf qui a été chargé par la fonction loadMovieNum().

2° Le code sur vos boutans deviendrait donc:

Citation :

on(release){
unloadMovieNum(1);
loadMovieNum("fichier.swf",1);
}


3° Notez que, si vous fichiers .swf sont relativement lourds, Flash les rechargera entièrement si vous utilisez cette méthode puisqu'ils ne seront plus gardés en mémoire.

La propiété _level

Comme nous venons de le voir, il est possible de charger différents fichiers .swf chacun sur un niveau d'empilement, depuis un fichier racine, de niveau 0. Aussi, il est possible de contrôler les fichiers .swf chargés sur des niveaux supérieurs, deupis n'importe quel autre niveau. Par exemple, depuis le niveau 0 vous pourvez aller à une image particulière du scénario du fichier .swf situé au niveau 5. Ou, depuis le niveau 8, vous pourriez contrôler une variable présente dans un fichier .swf chargé au niveau 3. Chaque niveau peut interagir avec tout autre niveau chargé.

Pour cela, nous utilisons la propriété _level d'ActionScript, qui, de la même manière que la propiété _root, permet de cibler tel ou tel niveau de votre animation.

1° Modifiez le fichier Flash contenant votre bande de navigation en augmentant sa taille, et mettez-lui une hauteur de 450 pixels au lieu de 400.

2° Placez un bouton sur le bas de la scène, de facon qu'il ne soit pas masqué par les niveaux qui se chargeront au-dessus. Utilisez un bouton de la bibliothèque commune afin de vous faciliter la tâche.

3° Sur ce bouton, placez ce code:

Citation :

on(release){
_level1._alpha = 20,
}


4° Testez votre animation (ctrl+enter), et appuyer sur le bouton. L'opacité du fichier .swf charger est réduite. Comme vous pouvez le constater, vous modifiez les paramètres des fichiers .swf chargés par la commande loadMovieNum(). Chaque fichier chargé sur un niveau N est ciblé par le propriété _levelN. Vous pouvez ainsi modifier sa taille, sa position et même déplacer la tête de lecture à l'intérieur de ce fichier .swf par la commande _levelN.gotoAndPlay("etiquette").

L'utilisation des niveaux dans Flash présente de nombreux intérets dans la mesuire où vous n'êtes plus obligé de modifier tout le site en lui-même poru changer simplement une rubrique. Aussi, Flash ne charge plus entièrement le fichier .swf sur Internet, mais ne charge que les niveaux appelés. Si par exemple votre site contient de nombreuses rubrique, mais que l'internaute n'aille pas forcément envie de toutes les voir, l'utilisation des niveaux dans votre projet Flash améliora grandement les temps de chargement du site. Enfin, unte telle méthode de travail est aussi largement appréciée dans le travail en équipe, où chacun s'occupe de sa rubrique, sans avoir à travailler tous ensemble sur le même ficheir.

Voilà se tuto est terminé, merci de l'avoir suivi, si vous avez d'autre demande je me ferais un plaisir d'en créer un autre adapté!

Autres pages sur : voulez site flash

7 Février 2008 20:55:28

Bonsoir, je viens de lire ce tuto très intéressant : je cherche à insérer un fichier son dans un site : j'ai trouvé comment faire démarrer le fichier son et l'arrêter avec loadmovie et unloadmovie, mais je souhaiterais y ajouter
1 bouton pause qui permette aussi le redémarrage à l'endroit de la pause et insérer une barre d'avancement de lecture du fichier avec curseur qui défile sur cette barre
Pourriez-vosu m'éclairer ?
Merci

7 Février 2008 21:16:46

allstar, c'est toi qui à rédiger ce tuto ? excuse moi si j'ai un gros doute...
Contenus similaires
7 Février 2008 21:22:51

mais on s'en fout!! c interessant, c'est le plus important!!!!!!
on peut le mettre en topic unique???
a c 232 L Programmation
7 Février 2008 23:17:35

En effet, il y a pas de fautes dans le tutorial en comparaison des fautes qu'il fait :) 

Tant que je ne sais pas si c'est lui qui l'a vraiment fait, je ne le met pas dans les tutoriaux.
8 Février 2008 08:22:46

Il suffit juste de prendre une phrase et la mettre sur google .. tu seras vite fixé , sinon ALstar si c'est bien le cas , mets au moins le lien de la source.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS