Semblant de template avec l’image background en fullscreen
23 février 2009 par Niums dans Action script
Voici une petite mise en pratique par rapport à un commentaire reçu sur l’article : La Classe BitmapData – Image background fullscreen qui se redimensionne proportionnellement avec le filtre Smooth.
Pas trop de commentaire sur les codes, car tout a déjà été vu, donc…
Le contenu :
Le css de la page html : pour que le flash prenne 100% de la page.
html, body {
margin : 0px;
padding : 0px;
width:100%;
height:100%;
}
La page html : pour que le flash prenne 100% de la page.
<head></head>
<body>
<object width="100%" height="100%" id="full-stage-redim-fullscreenBack">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="full-stage-redim-fullscreenBack.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#ffffff" />
<embed src="full-stage-redim-fullscreenBack.swf" quality="high" scale="noscale" bgcolor="#ffffff" width="100%" height="100%" name="full-stage-redim-fullscreenBack" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" />
</object>
</body>
</head>
Le flash
1er image le preloader :
stop();
this.onEnterFrame = function() {
bar_mc._width = Stage.width;
bar_mc._x = 0;
bar_mc._xscale = 1; // on réduit la barre à 1% de sa taille original
Mouse.hide(); // on cache la souris pour que ce soit plus beau
var poids:Number = this.getBytesTotal(); // poids total
var progress_load : Number = this.getBytesLoaded(); // poids chargé
var part_load : Number = Math.round((progress_load/poids)*100); // ratio, math round pour arrondir à l’entier le plus proche
bulle_mc.affichage = part_load+"%"; // affichage du pourcentage chargé dans le champs de texte dynamique
bar_mc._xscale = part_load*(Stage.width/100); // la barre s’aggrandit proportionellement au pourcentage
if(bulle_mc._x < 0)
{bulle_mc._x <= 0;} // si coordonnées de la bulle inférieur à 0 (sort de l’écran) : le faire placer à 0
else if (bulle_mc._x > Stage.width){bulle_mc._x >= Stage.width; }// si coordonnées de la bulle inférieur à largeur écran: le stopper
else {bulle_mc._x = (part_load*(Stage.width/100))-49 ; }// sinon déplacer la bulle par rapport au pourcentage chargé qu’on multiplie par la taille de l’anim/100. -49 c’est pour que la flèche de la bulle soit juste au dessus de la barre
if (part_load == 100) { // si le chargement est égal à 100
delete this.onEnterFrame; // on arrete le enterframe
gotoAndPlay(2);
Mouse.show(); // fini on peut remontrer notre souris
}
};
Image suivante : Le contenu
stop();
// pas de redimensionnement de la fenêtre
Stage.scaleMode = "noScale";
//on aligne le site : Haut Gauche
Stage.align = "TL";
#include "mc_tween2.as" //
// on place le menu sur la scène en l’"attachant". On lui donne comme nouveau nom menu_mc et il sera à 1 de profondeur
var menu_mc:MovieClip = this.attachMovie("menu","menu_mc",4);
// on place le bloc central sur la scene
var central_mc:MovieClip = this.attachMovie("central","central_mc",3);
// on place le footer sur la scene
var footer_mc:MovieClip = this.attachMovie("footer","footer_mc",2);
// le texte montrant le pourcentage du background chargé
this.createTextField("pct_txt", 93, 0, 50, 100, 20);
pct_txt.selectable = false;
pct_txt.multiline = true;
pct_txt.html = true;
pct_txt.background = 0xFFFFFF;
pct_txt.autoSize = "left";
function redimensionne (){ //
// placement du menu en haut
menu_mc.tween("_x", 0 , 1, "easeoutBack");
menu_mc.tween("_y", 0 , 1, "easeoutBack");
// placement du contenu central
central_mc.tween("_x", (Stage.width/2) – (central_mc._width / 2) , 1.5, "easeoutBack");
central_mc.tween("_y", (Stage.height/2) – (central_mc._height / 2) , 1.5, "easeoutBack");
// placement footer
footer_mc.footerBackground.tween("_width", Stage.width , 1, "easeInOutCubic");
footer_mc.tween("_x", 0, 1, "easeOutExpo");
footer_mc.tween("_y", (Stage.height – footer_mc._height), 1, "easeOutExpo");// placer tout en bas
// placement footer
background_mc.tween("_x", 0, 1, "easeOutExpo");
background_mc.tween("_y", 0, 1, "easeOutExpo");
var ratio:Number;
var largeur:Number = Stage.width/_global.BGW;
var hauteur:Number = Stage.height/_global.BGH;
//on teste pour savoir si la scene est plus haute ou plus large.
// CONDITION ? ACTION SI CONDITION VRAIE : ACTION SI CONDITION FAUSSE ;
(largeur>hauteur) ? ratio = largeur : ratio = hauteur;
// redimmensionnement full screen
// AS2: MonClip._xscale = MonClip._yscale = [proportion voulue, sachant que 100 est sa taille "normale"]
// AS3 : MonClip.scaleX = MonClip.scaleY = [proportion voulue, sachant que 1 est sa taille "normale"]
background_mc._xscale = background_mc._yscale=ratio*100;
}
var ecouteur:Object = new Object(); // on crée l’écouteur
ecouteur.onResize=function(){
redimensionne();
};
Stage.addListener(ecouteur);// ecouteur d’évènement sur la scene
function smoothImageLoad(imgURL, targetMovie) {
var i = 0;
do {
i++;
} while (eval("_root.smoothImageLoadTemp"+i) != undefined);
tmc = targetMovie.createEmptyMovieClip("smoothImageLoadTemp"+i, targetMovie.getNextHighestDepth());
tmc.createEmptyMovieClip("ti",tmc.getNextHighestDepth());
tmc.tm = targetMovie;
with (tmc) {
tmcl = new MovieClipLoader();
tmcl.onLoadProgress = function(targetMovie, loadedBytes, totalBytes)
{ // pourcentage chargé
_parent._parent._parent.pct_txt.htmlText = Math.ceil(100*loadedBytes/totalBytes) + "%";
}
tmcl.onLoadComplete = function() {
targetMovie._alpha = 0;
targetMovie.alphaTo(100,1,"linear");
ti.onEnterFrame = function() {
pixelData = new flash.display.BitmapData(ti._width, ti._height);
_global.BGW = ti._width;
_global.BGH = ti._height;
pixelData.draw(ti);
tm.attachBitmap(pixelData,1,true,true);
tm.smoothImageLoadComplete();
_parent._parent._parent.redimensionne();
removeMovieClip(ti._parent);
};
};
tmcl.loadClip(imgURL,tmc.ti);
}
}
smoothImageLoad("killbill.jpg",background_mc.target_mc);
redimensionne();
/* ########################################################
menu
##########################################################*/
menu_mc.menuAccueil.onRelease =function ()
{
smoothImageLoad("killbill.jpg",background_mc.target_mc);
central_mc.gotoAndStop(1);
}
menu_mc.menuBlog.onRelease =function ()
{
smoothImageLoad("cousy.jpg",background_mc.target_mc);
central_mc.gotoAndStop(2);
}
menu_mc.menuSite.onRelease =function ()
{
smoothImageLoad("cousy.jpg",background_mc.target_mc);
central_mc.gotoAndStop(3);
}
menu_mc.menuContact.onRelease =function ()
{
smoothImageLoad("killbill.jpg",background_mc.target_mc);
central_mc.gotoAndStop(4);
}
voila
+++
Continuez votre lecture avec
- Article suivant : Dwele en concert le 5 mai au Trabendo – MAJ – Annulé
- Article précédent : Roy Hargrove Quintet en concert au new Morning le 31 mars
Articles similaires
- La Classe BitmapData – Image background fullscreen qui se redimensionne proportionellement avec le filtre Smooth
- Faire un site « fullpage » avec gestion du placement des éléments avec MC Tween
- La Classe BitmapData – un background avec un motif répété et chargement d’images
- Charger une vidéo au hasard dans votre player flash
