fond extensible en flash

[vector]

Bonjour, je suis en train de créer un site qui est composé d'un fond assez étendu (paysage en vectoriel) j'aimerais que le fond soit visible sur toute la surface d'un grand ecran et inversement que le petit ne soit pas lésé par un swf immense..
j'utilise flash 9
Voici ce que je veux faire en image (essayez de redimentionner la fenetre c'est assez génial) :
http://www.cocopops.fr/
merci,
vector

 

[Anonyme]

Il y a moyen de faire ce genre d'effet en html+css, voir par exemple le site de silverback.

Explications

 

[vector]

c'est tout à fait ça mais en anglais ça va être compliqué, merci quand-même..
virg

 

[obi wan]

Dans un Sprite ou ce que tu veux qui est dans le package display est qui est dans une displayList (ou sur la timeline, première image, si tu es un timelineux ^^) :

//deja les imports utiles
import flash.display.StageScaleMode;
//et en option :
import flash.display.StageAlign;

on dit à flash de ne pas redimensionner le contenu, ça permet déjà d'afficher le site à 100% de largeur et 100% de hauteur dans le html sans que la taille des contenus bouge quand on change la taille de la fenetre :

stage.scaleMode = StageScaleMode.NO_SCALE;

de base le contenu sera centré en hauteur et largeur, mais tu peux avoir un contenu calé où tu veux grâce aux propriétés de StageAlign.
Tu peux faire par exemple :

stage.align = StageAlign.TOP_LEFT;

ce qui est intéressant par la suite c'est de pouvoir écouter quand il y a des redimensionnements de fenêtre pour pouvoir agir (c'est comme ça qu'on fait du ''vrai'' étirable, là chocapic c'est juste un rectangle de taille fixe qui est planté au milieu de la fenêtre, mais le must c'est de redimensionner tous les contenus par rapport à la taille de l'écran. On fait ça grâce aux événements de base d'as3 :

//toujours dans une classe du package display dans une instance
//qui est déjà ajoutée à une displayList
//ou sur la timeline.
import flash.events.Event;
stage.addEventListener( Event.RESIZE , ecouteRedimFenetre );

private function ecouteRedimFenetre( e : Event ) : void
{
    //là il est bien utile de connaitre la taille de la scène pour pouvoir bidouiller ;-)
    var lar:int = stage.stageWidth;
    var hau:int = stage.stageHeight;

    //des trucs et des machins, mais pas trop quand meme parce que
    //l'evenement est dispatché avec une fréquence assez soutenue
    //du coup cette méthode sera appelée vraiment souvent en cas de
    //redimensionnement ''hésitant'' de l'utilisateur.
    //prefere des placements directs, evite les tweens dans cette méthode.
}

Tiens voilà un exemple parlant de ce que tu peux faire dans ton gestionnaire de redimensionnement :

private var leFond : Shape ;

private function initialistation() : void
{
    leFond = new Shape();
    addChild(leFond);
    stage.addEventListener( Event.RESIZE , ecouteRedimFenetre );
}

private function ecouteRedimFenetre( e : Event ) : void
{
    //là il est bien utile de connaitre la taille de la scène pour pouvoir bidouiller ;-)
    var lar:int = stage.stageWidth;
    var hau:int = stage.stageHeight;
    
    //on va faire un fond à petits pois bleus de 3pixels de rayon, bien moches,
    //qui prendra toute la surface de l'écran quoi qu'il arrive
    //je pars sur le principe d'un alignement de scène réglé
    //en TOP_LEFT, c'est le plus pratique même si ça a l'air plus compliqué

    var nbLignes:int = Math.ceil(hau/10)+2;//le +2 et le ceil() c'est parce que ça fait pas de mal si ça déborde et puis je compense le test strict des boucles, bref, petite manie ^^
    var nbColonnes:int = Math.ceil(lar/10)+2;//idem

    leFond.graphics.clear();
    leFond.graphics.beginFill(0xFF0000,1);
    for (var iY:int = 0 ; iY<nbLignes ; iY++) {
        for (var iX:int = 0 ; iX<nbColonnes ; iX++) {
            leFond.graphics.drawCircle( (5+10*iX) , (5+10*iY) , 3);
        }
    }
    leFond.graphics.endFill();
}

 

[vector]

c'est quoi une classe du package display ? Merci Obi wan pour ta réponse.

 

[obi wan]

Arf ça c'est le problème de flash, tu peux faire du code ou du scénario, je précisais l'histoire du package display plutôt pour ceux qui utilisent que du code.

Si tu fais du scénario avec des ptits bouts de code dedans, le package display, tu t'en fous, de toute façon dans la timeline tu es dans une instance de MovieClip (qui est affichée, forcément...), et MovieClip est une classe du package display, donc tout va bien


Si tu fais du code pur, alors ça peut t'intéresser (sinon ça va plutôt t'embrouiller pour rien en fait ^^) :
Tu n'auras accés à la propriété stage que dans une instance d'une classe qui étend DisplayObject, et de plus tu n'y auras accés que quand l'instance aura été ajoutée à une displayList.

 

[vector]

Alors d'accord, sinon mon site est crée avec as2, est-ce que ça peut se résoudre ? ou faut que je modifie toutes mes animes qui ne fonctionne qu'avec as2 ?
merci

 

[obi wan]

Alors d'accord, sinon mon site est crée avec as2

Ha le vilain
Bon donc tout mon gros pâté au dessus c'est de l'AS3, je vais te retrouver comment on fait en AS2, j'avais fait un tuto sur un forum il y a fort longtemps, peut etre que c'est encore en ligne.

Sinon je vais te faire un fichier AS2 ça sera + simple (mais je suis flemmard quand même alors je vais d'abord voir si je retrouve pas ce tuto ^^)

 

[vector]

T'es vraiment trop gentil merci.
Dis-moi tu bosses en tant que freelance ou tu es amateur confirmé ?
Moi je suis freelance et je cherche des pros en flash pour des petits boulots..
Si ça t'interesse..

 

[obi wan]

Je t'ai mis en pièce jointe à ce message un .zip avec un fichier flash 7 en AS2 que tu devrais arriver à ouvrir avec ton flash. Il n'y a que deux calques, et les quelques lignes de codes sont commentées, mais n'hésite pas si tu as une question.

Dis-moi tu bosses en tant que freelance ou tu es amateur confirmé ?
Moi je suis freelance et je cherche des pros en flash pour des petits boulots..
Si ça t'interesse..

Oui effectivement c'est mon métier Je t'envoie mes coordonnées par mp.

 

[vector]

ça marche du premier coup, c'est facile, bien expliqué...c'est formidable !
Merci
vector

 

[vector]

j'attend tes coordonnées.. c'est quoi mp..je suis vraiment à la rue..

 

[p4bl0]

j'attend tes coordonnées.. c'est quoi mp..je suis vraiment à la rue..

Message Privé, va voir dans ton tableau de bord