Une animation redimensionnable ?

Version imprimable

04/10/2007, 13h56
guillaumeabxl

Une animation redimensionnable ?

Bonjour,

Je travaille sur une interface en Flash mais j'aimerai que le flash occupe toute la page du navigateur.
Je veux pas utiliser la fonction "dimensions 100 %" de parametres de publication car je veux juste pouvoir redimenssioner le background de l'animation et non les éléments (logo, images ... qui auront une taille fixe en pixel) car ils ont tendance à pixelliser.

J'ai trouvé un exemple pour que vous puissiez mieux comprendre ce que je veux faire :

http://www.milk.dk/

Merci de m'éclairer,
Guillaume

c'est marrant je cherchais la meme chose ya pas longtemps.
et j'ai presque solutionné ce pb.

1) AS sur la 1ere image :

Code:

fscommand("allowscale","false");

ainsi ton flash ne sera plus étiré, ce seront les bords du clip qui s'adapteront à la zone visible

2) tu mets le width et le height dans le embed à 100%,
en css tu définis la marge du document à 0

Code:

body {margin:0; padding:0}

(ou alors <body style='{margin:0; padding:0}'>...)

3) il reste le plus délicat : adapter la position de ta scene à la taille de la fenetre.
alors en fait il faut que tu crées une fonction AS qui sera invoquée à chaque redimensionnement de la fenetre, et dans laquelle tu recalcules les positions de tes éléments à partir de Stage.width et Stage.height.
il vaut mieux que tu n'aies pas trop d'éléments à positionner, ou alors rassemble-les dans des symboles (menu, zone principale,bandeaux...)

j'ai un bout de code qui marche mais il est chez moi. mais j'en ai retrouvé un autre du meme style (à mettre sous la 1ere image apres le fscommand, et un stop()):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 stop(); fscommand("allowscale","false"); var myListener:Object = new Object(); myListener.onResize = function() { //centré : _root.mc1._x = (Stage.width/2)-(_root.mc1._width/2); _root.mc1._y = (Stage.height/2)-(_root.mc1._height/2); // aligné en bas à droite : _root.mc2._x = Stage.width - _root.mc2._width; _root.mc2._y = Stage.height - _root.mc2._height; // ex inspiré de milk : on cache certains objets si fenetre trop petite _root.mc3._visible = (Stage.width > 500); // etc... }; Stage.addListener(myListener); /* on appelle manuellement la fonction la 1ere fois car si l'utilisateur ne bouge pas sa fenetre, on n'aura jamais de positionnement initial.*/ myListener.onResize();
Attention en AS3 ça ne marche pas !

si tu utilises les fonctions de tweening (genre FUSE), ce sera plus fluide.
_root.mc1.tween("_x",nouvelX, .5, "easeOutQuad");

voila,

a+

08/10/2007, 11h08
guillaumeabxl

problème dans la page html

Merci pour ton aide.

J'ai incorporer le script dans mon animation le resultat est visible à cette adresse :
http://www.acielouvert.net/act/fullscreen.html

Le fichier .fla est ici :
http://www.acielouvert.net/act/test.fla

La redimension fonctionne si on lit le fichier swf seul : http://www.acielouvert.net/act/test.swf
par contre quand on l'intègre dans une page html (avec embed à 100%) ça n'agit pas de la même façon.

Si tu as une idée ?
Je suis preneur.

Guillaume
08/10/2007, 12h49
Destiny

Dans ta page php ou html quand ton intègre ton animation, tu as mis 100%?
08/10/2007, 13h42
guillaumeabxl

Oui je place 100% dans le embed

Citation:

<embed src="test.swf" quality="high" bgcolor="#ffffff" width="100%" height="100%"

Mais ça ne donne rien. Par contre quand je lis le swf tout seul (sans la page html) je peux redimensionner la fenetre.

?
08/10/2007, 22h47
samuel_L

ne m'en veux pas je réponds à ton mp DANS le forum pour faire partager =)

Citation:

Samuel,
Tout d'abord merci pour ton script, je l'ai utilisé dans mon animation, le resultat est visible à cette adresse :
http://www.acielouvert.net/act/fullscreen.html

Le fichier .fla est ici : (*** masque ***)
La redimension fonctionne si on lit le fichier swf seul : http://www.acielouvert.net/act/test.swf
par contre quand on l'intègre dans une page html (avec embed à 100%) ça n'agit pas de la même façon.

Si tu as une idée ?
Je suis preneur.

Guillaume

en fait j'ai ouvert ton .fla... mais je ne vois pas l'AS dedans.
le embed width=100% etc dit à ton navigateur de placer l'anim sur toute la fenetre, mais ne prévient pas flash des changements de taille de fenetre

le fscommand("allowscale","false") maintient l'échelle, ensuite il faut écrire ton onResize et y mettre les repositionnements des éléments. c'est ce que j'explique dans mon post plus haut...
09/10/2007, 15h10
guillaumeabxl

oui

Le code AS est placé sur la première image clef du calque "big1".
09/10/2007, 22h12
samuel_L

arf j'étais crevé hier j'ai meme pas pensé a regarder dans la timeline si j'étais au début. lol
09/10/2007, 22h39
samuel_L

ok, tu as recopié tel-quel le code du post plus haut, mais les clips mc1,mc2 et mc3 n'existent pas dans ton Fla, donc ils ne seront pas repositionnés... ce n'est pas une formule magique, il faut adapter le contenu de la fonction onResize à TA scène, donc à TES occurences de clips en choisissant laquelle est placée où.

là je pense qu'il faut mettre un peu d'ordre avant d'ajouter l'AS, en :
- redisposant les éléments aussi bien dans la bibliotheque que sur la scène...
- essaie de structurer tes élements par famille ou par mise en page, et de les rassembler dans des sous-dossiers de la biblio. n'hésite pas à faire un dessin sur papier et à décomposer ta scène pour t'y aider (fond, bande haut, bande bas, menu, zone de texte, titre....). ainsi ensuite tu rassembles les éléments dans des mc, et tu créeras tes occurences sur la scène.
Ainsi, si tu veux faire bouger la 'bande du bas' par une transition, tu n'auras qu'une occurence à toucher et tu t'y retrouveras.

pour l'AS : petite astuce pour ne pas te perdre dans ton code : dans la mesure du possible rassemble tout l'actionscript dans le meme calque nommé "as", que tu mettras tout en haut ou tout en bas, et que tu rendras invisible et verrouillé pour ne pas contenir autre chose que de l'AS. pour ajouter une action à un moment précis (par exemple tes stop), tu crées une image clé vide sur ce calque et tu y ajoutes le code.
procèdes de la meme facon à l'intérieur de tes symboles, ainsi tu sais où chercher (et les gens à qui tu montres aussi :).

je vais arreter là, je fais un off-topic sinon. pour reprendre le pb d'origine (disposition de la scène en full-browser à la facon du site "milk", je posterai plus tard un autre msg avec un .FLA d'exemple pour clarifier)

a+
10/10/2007, 11h45
guillaumeabxl

Samuel,

Merci beaucoup pour ton aide, tu as du te rendre compte que je suis un peu une bille en AS, je suis plus à l'aise en flash "classic" et en html.

Je vais bosser dessus demain toute la journée pour faire avancer le projet, si tu pouvais publier un fla d'exemple ce serait genial. Je comprend mieux ton script, je vais renommer mes clips en mc1 ... je dois aussi nommer mc1 ... les occurences (encre) ou se trouve les clips ?

Merci,
Guillaume
10/10/2007, 14h42
guillaumeabxl

Si on regarde le swf sans la fenêtre html on arrive exactement à ce que je veux faire. Un site qui occupe les 100 % de la fenêtre et qui peut se redimensionner en replaçant les éléments (navigation, logo ...) dans la page au fur et à mesure que l'on redimensionne la fenêtre.

Une fois le flash dans le navigateur on perd le fait que les éléments se replacent dans la page, ils disparaissent à un moment.

Guillaume

salut, hier j'ai commencé à préparer le .fla mais je n'ai pas terminé (levé à 6h du mat, le soir je traine pas trop).
j'ai déjà trouvé un bug dans mon code, qui devait être de l'AS1, car j'ai dû modifier comme ceci:
remplacer la ligne fscommand(...) par :
Code:

1 2 Stage.align="LT"; Stage.allowScale=false;
Pour ta scène ne renomme pas tes occurences par mc1, mc2 c'est pas compréhensible, mets des noms genre "menu" "bandeau" etc.
il faut que tu comprennes ton code si tu le reprends dans 6 mois :)

tu fais bien la différence entre OCCURENCE et SYMBOLE ?
un symbole est un "moule" que tu mets dans ta bibliothèque, qui sert à créer un ou plusieurs exemplaires = des occurences. pour "démouler" une occurence, tu glisses un symbole de la biblio sur ta scène, ça en crée une occurence.

le nom d'un symbole de la biblio importe peu. Pour ce qui nous intéresse, c'est surtout le nom d'occurence (choisir l'occurence, et taper un nom dans la zone de saisie prévue à cet effet, a gauche dans le panneau de propriétés de l'objet.

Sinon, en fouillant sur le net j'ai trouvé une amélioration plus subtile, pour simplifier le positionnement des éléments.
Le principe est le même : on implémente une méthode onResize qui sera appelée lors du redimensionnement de la fenêtre.
mais la ruse du gars est de modifier le comportement de TOUS les MovieClip en leur ajoutant une méthode "stagePosition" qui fait tout le boulot.

l'idée est qu'ensuite tu écris plus facilement ton code pour aligner à droite, au milieu, en heut, etc...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 // pas de redimentionnement des élements Stage.align = "LT"; Stage.scaleMode = "noScale"; Stage.addListener(_root); // ICI LA SEULE CHOSE A ADAPTER A TES OCCURENCES. // c'est plus clair que des formules d'enstein pour calculer le x et le y... _root.onResize = function() { // l'occurence "navigation" sera placée au milieu de la scène. navigation.stagePosition("M","C"); // l'occurence "logo" sera placée en haut a gauche logo.stagePosition("T","L"); } //positionnement sur la scene MovieClip.prototype.stagePosition = function (alignV,alignH) { /* ALIGNV alignement vertical "T" top /"B" bottom /"M" middle "L" left /"R" right /"C" center */ switch (alignV) { case "T" : this._y = 0; break; case "B" : this._y = Stage.height; break; case "M": this._y = Stage.height/2-this._height/2; break; default : this._y = 0; } switch (alignH) { case "L" : this._x = 0; break; case "R" : this._x = Stage.width; break; case "C": this._x = Stage.width/2-this._width/2; break; default : this._x = 0; }}
voilà.
a bientot dans un nouvel épisode :-)

10/10/2007, 21h22
samuel_L

1 pièce(s) jointe(s)

voivi un fichier didactique
un .fla (version 9, CS3)
un .html "modifié" (tiré de la publication de flash)
- ajout d'une fonction stagePosition au protype MovieClip.
- 3 symboles : menu, titre et corps
- chacun est positionné à un endroit précis de la scène par le onresize
un .js
un .swf pour voir

au passage mon fla illustre aussi une façon ordonnée de ranger les éléments dans la biblio, et de placer l'AS au bon endroit.

Améliorations possibles :
- enrichir la fonction stagePosition pour qu'elle soit capable de faire plus que les 9 combinaisons possibles (haut-gauche, haut-centre, ..., bas-droite)
- utiliser un timer pour ne pas repositionner en temps réel car ça consomme un petit peu de cpu quand on étire la fenêtre du navigateur
- utiliser les fonctions de tween pour fluidifier les positionnements.

Voila, je pense que tout est dit sur la question...
bonne soirée :)
11/10/2007, 21h04
guillaumeabxl

Samuel, je sais pas comment te remercier pour ta disponibilité et ta patience. Ce script est terrible, j'en comprend mieux le fonctionnement avec tes commentaires. Je devrais me mettre au AS le plus vite possible.

Merci encore.
Dès que le site est en ligne je te fais signe, j'ai une deadline pour le 22 octobre.

Guillaume