Site en Flash à 100% AS2 || AS3

Un site fait avec un Swf 100% c’est la classe, encore faut-il que ce soit bien fait.

Exemples:
http://www.dunun.com
http://www.soleilnoir.com
http://dgezeo.alvheol.net

Dans ce tutoriel, nous allons voir comment réaliser un site Flash à 100%…

1. l’Objet Stage

Bon, alors pour bien commencer son site avec un flash à 100% dans le html, il faut définir dans la première frame quelques propriétés de l’objet Stage:

?View Code ACTIONSCRIPT
1
2
3
4
5
6

// pour empêcher l'utilisateur de zoomer sur la scène, le dézoomage ne fonctionnant pas correctement.
Stage.showMenu = false;
// pour empêcher que le swf se redimensionne en fonction de la page html qui le contient
Stage.scaleMode = "noscale";
// permet de placer le x 0 et le y 0 en haut à gauche (Top Left) du html, c'est aussi plus pratique pour positionner ses éléments dynamiquement
Stage.align = "TL";

Voilà, ça c’est pour la base, en mettant ce code dans le flash, et en intégrant le flash à 100% dans le html, aucun élément du flash ne sera redimmensionné.
Ha oui j’oubliais, pour que la scroll barre n’apparaisse pas sous firefox, il faut aligner le flash à gauche, ça ne change rien ça fait juste disparaitre la scrollbar.

2. l’évènement onResize

Ensuite, il faut pouvoir replacer les éléments si l’utilisateur redimensionne la fenêtre de sont navigateur, pour ça, 2 solutions:

- un onEnterFrame qui est gourmand en ressources (déprécié).
- un listener plus économique en ressources (et recommandé).

a. Voici le code avec le onEnterFrame en AS1/AS2 :
?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13

//"lancement" du onEnterFrame:
 
this.onEnterFrame = function ()
 
{
 
// ensuite on replace les éléments comme on veut
// en fonction le la taille de la scène (Stage)
// la si le clip nommé "monClip" se retrouvera au milieu de la scène
 
monClip._x = Stage.width/2;
monClip._y = Stage.height/2;
}
b. voici le code avec le listener (recommandé) en AS1/AS2 :

Bien plus pratique, il permet de gérer l’évènement de façon plus précise:

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// hop on commence par déclarer le listener, dans le cas présent je l'ai nommé redim, mais ça
// aurait très bien pû être Sylvain, mais j'ai choisi redim, et ça, ça ne se discute pas
 
redim = new Object ();
 
// on dit au listener ce qu'il doit écouter, là c'est onResize
// (quand la scène est redimensionnée), et on précise également ce qu'il doit faire, en l'occurence
// il mettra le clip "monClip" au centre de la scène
 
redim.onResize = function (){
monClip._x = Stage.width/2;
monClip._y = Stage.height/2;
}
 
// enfin, on ajoute le listener à la scène
Stage.addListener (redim);
c. Pour finir voici le code en as3 :
?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13

stage.scaleMode = "noScale";
stage.align = "TL";
 
//exactement le même principe qu'en as2 sauf pour récupérer la hauteur et largeur de la scène
 
function alignement(e:Event):void
{
var posX:Number = (stage.stageWidth - largeur)/2;
var posY:Number = (stage.stageHeight - hauteur)/2;
monClip.x = posX;
monClip.y = posY;
}
stage.addEventListener(Event.RESIZE, alignement);

Voici enfin une source as2 avec différents exemples de redimensionnement / repositionnement d’éléments « classiques » (logo, footer, clip centré, etc…) : resize_exemple.zip

Bookmark and Share

Écrit le 25 août 2008 par BSK
Posté dans Ressources Flash
Tags : , ,

 

Sur le même sujet
En direct du forum

9 réponses Souscrire aux commentaires


  1. Nelson

    Bonjour, je me présente, je suis graphiste depuis maintenant 1 an et demi après une formation intensive dans le multimédia.
    Pendant cette formation on a survolé flash avec réellement les bases, sans plus d’approfondissement, je me vois confronté à faire des recherches seul afin d’apprendre et m’amélioré.
    Je trouve les didactitielles très intéressant et je vous en remerci d’ailleurs.
    Sur ce, je suis aujourd’hui confronté à un problème, en espérant que vous pourrez m’aidez.
    J’ai commencé depuis quelques temps à faire mon porfolio, afin de faire des recherches d’emploi et de rentré dans le monde du multimédia.
    J’avou avoir beaucoup galéré, et heureusement que je suis tombé sur la source
    resize_exemple, elle m’as permis de comprendre pas mal de choses, et d’avancé dans sa conception.
    Je me retrouve aujourd’hui confronté à un problème que je n’arrive pas à résoudre mes bases de flash étant vraiment très faible.
    j’ai placé plusieur éléments dans le MC clip_mc, sur un calque, sur differente image clé, avec un label pour appel chaque section différente, mais voilà, j’avai des images sur une image clé, celà ne posai auccun problème, tout restai centré verticalement et horizontalement, depuis j’ai rajouté sur d’autres sections, 1 diaporama, et et scroller horizontal, maintenant à l’ouverture du swf ça se place vers le bas, il faut que je mette la fenetre du swf à 100% pour que ça se centre , mais des que je bouge la fenetre du navigateur tout se décentre et impossible de le faire remettre en place ensuite, sans relancé le swf. celà viendrait-il du fait d’avoir un diapo et un scroller?
    Si oui comment pourrai y remédier, car j’ai m’y déjà bcp de temps avec le scroller et le diapo a comprendre comment ça fonctionnai, et maintenant je suis perdu.
    Je précise encore une fois que mon niveau en AS est très très bas, j’y comprend pratiquement rien.

    En espérant m’être bien expliqué et que je pourrai avoir de l’aide par rapport à mon problème

    Merci d’avance

    21 nov 2008 @ 16:39


  2. Nelson

    N’hésitez pas à me répondre sur mon mail si besoin est
    Merci

    21 nov 2008 @ 16:40


  3. Nelson

    Ah oui je précise, j’ai tout fait en AS2, avec Listener comme dans l’exemple

    21 nov 2008 @ 16:44


  4. maru

    Salut Nelson, pour les problèmes techniques, je te conseille de passer plutôt par les forums.

    21 nov 2008 @ 18:00


  5. chloro

    merci pour ce code, mais malheureusement lorsque j’essaie de l’appliquer à mon site j’obtiens :
    - acces à la propriété showmenu non définie, via la référence de type static flash.display:Stage
    - acces à la propriété scalemode non définie, via la référence de type static flash
    - acces à la propriété salignu non définie, via la référence de type static
    …. ca ne marche pas!
    quelqu’un pourrait-il m’aider?
    merci…

    24 fév 2009 @ 3:52


  6. maru

    Salut Chloro,

    ces erreurs viennent du fait que tu essayes d’appliquer du code AS2 à un projet AS3.
    Passe ton .fla en AS2 et ça fonctionnera.
    Pour cela Menu fichier > paramètres de publication > onglet Flash > Script

    Bon courage !

    24 fév 2009 @ 9:14


  7. Clonks - l’économiseur d’écran, premiers essais | David Torondel - Graphiste indépendant - blog graphisme, illustration et animation

    [...] visible ici : Economiseur V1 Pour la gestion du plein écran, je me suis basé sur ce tutorial : http://www.flashxpress.net/ressources-flash/site-en-flash-a-100/ que je trouve très didactique, et un fichier d’exemple est disponible. Pour l’instant [...]

    20 avr 2009 @ 10:01


  8. audran VS azflow

    un gros merci pour votre explication très claire !

    14 mai 2009 @ 17:00


  9. Trikart

    Bonjour,
    Merci pour cet exemple, mais j’ai un petit soucis …

    Je ne sais pas si je dois m’adresser ici ?

    Ma question :

    Comment faire apparaitre les scrolls verticaux dans l’explorateur si la résolution est inférieure à 600 px…car dans ce cas là on ne voit pas tout le contenu …

    En gros j’ai figé « mon_clip » sur :

    _y = 0;
    _x = Math.round(Stage.width/2-clip_mc._width/2);

    Mais comme il fait + de 600px certaines personnes ne le voit pas…

    Si vous pouviez m’aider où me donner quelques pistes ce serait super cool :o )

    Merci

    14 déc 2009 @ 12:19

Répondre