La Classe BitmapData – Image background fullscreen qui se redimensionne proportionellement avec le filtre Smooth
1 janvier 2009 par Niums dans Action script
Après ce titre très SEO friendly, voici une manière d’avoir en background, comme sur certains sites, une image qui prend toujours tout l’espace et qui n’est pas pixelisée ni trop « abimée » par le redimensionnement.
Les images sont de grande taille mais vous pouvez tester avec des images plus petites pour voir ce que cela donne.
Le code permettant de redimensionner en appliquant le smoothing provient de ce site.
Modifiez la taille de votre navigateur pour voir le script en action.
Cliquez pour changer d’image.
et zou le code ci dessous :
Ps : pour les actions de tween il vous faut « installer » la classe twenner. J’en parle ici :
On commence par aligner en haut à gauche et interdire le redimensionnement.
Puis import de la class tweener
Stage.align="TL";
Stage.scaleMode="noScale";
import caurina.transitions.Tweener;
Voilà la fonction qui va permettre de redimensionner l’image proportionnellement :
function redimensionne() {
/* centre le conteneur du background puis le contenu (background lui meme)*/
background_mc._x = Stage.width/2;
background_mc._y = Stage.height/2;
background_mc.target_mc._x = -_global.BGW/2; // ti._width;
background_mc.target_mc._y = -_global.BGH/2; // ti._height;
// trace(-_global.BGW/2);
// trace(-_global.BGH/2);
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
// MonClip._xscale = MonClip._yscale = [proportion voulue, sachant que 100 est sa taille "normale"]
background_mc._xscale = background_mc._yscale=ratio*100;
}
Function qui permet de redimensionner un bitmap en appliquant le filtre smooth
this.createTextField("pct_txt", 93, 0, (Stage.height – 30), 100, 20);
pct_txt.selectable = false;
pct_txt.multiline = true;
pct_txt.html = true;
pct_txt.background = 0xFFFFFF;
pct_txt.autoSize = "left";
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) {
/*loaded = targetMovie.getBytesLoaded();
filesize = targetMovie.getBytesTotal();*/
loaded = loadedBytes;
filesize = totalBytes;
percentage = Math.ceil(100*loaded/filesize);
_parent._parent._parent.pct_txt.htmlText = percentage + "%";
trace(percentage + "%");
}
tmcl.onLoadComplete = function() {
targetMovie._alpha = 0;
var fadeBG = Tweener.addTween(targetMovie, {_alpha:100, time:2, delay:0.5, transition:"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);
Au clik, changement de background
var clik:Boolean = false;
background_mc.onRelease = function () {
if (clik==false)
{
clik=true;
smoothImageLoad("logo.jpg",background_mc.target_mc);
trace(clik);
}
else
{
clik=false;
smoothImageLoad("killbill.jpg",background_mc.target_mc);
trace(clik);
}
}
On ajoute un écouteur pour suivre les évènements de la souris :
var ecouteur:Object=new Object();
ecouteur.onResize=function(){
redimensionne();
};
Stage.addListener(ecouteur);
Afficher les infos sur l’image :
this.createTextField("status_txt", 90, 0, 0, 100, 20);
status_txt.selectable = false;
status_txt.multiline = true;
status_txt.html = true;
status_txt.background = 0xFFFFFF;
status_txt.autoSize = "left";
function onMouseMove() {
if( _xmouse > (Stage.width – 20) || _ymouse > (Stage.height – 20 ) || _ymouse < 20 || _xmouse < 20 )
{
Tweener.addTween(status_txt, {_x:10, time:1, transition:"easeOutBack"});
Tweener.addTween(status_txt, {_y:10, time:1, transition:"easeOutBack"});
}
else
{
Tweener.addTween(status_txt, {_x: (_xmouse – (status_txt._width/2)), time:1, transition:"easeOutBack"});
Tweener.addTween(status_txt, {_y: (_ymouse – 30), time:1, transition:"easeOutBack"});
}
updateAfterEvent();
}
setInterval(updateDimension, 30);
function updateDimension():Void {
var largeurScene:Number = Stage.width;
var hauteurScene:Number = Stage.height;
status_txt.htmlText = "<strong>Largeur:</strong>" + largeurScene + "
<strong>Hauteur:</strong>" + hauteurScene
+ "
<strong>Ratio largeur</strong> : " + Stage.width/_global.BGW + "
<strong>Ratio Hauteur</strong> : " + Stage.height/_global.BGH
+ "
<strong>Position X souris :</strong> " + _xmouse + "
<strong>Position Y souris :</strong> " + _ymouse ;
;
}
Voila c’est fini.
+++
Continuez votre lecture avec
- Article suivant : Migration vers wordpress 2.7 et modification du design
- Article précédent : Funny…Just when you thought all the good ideas were taken!
Articles similaires
Pas d'articles similaires
Commentaires (49)
Laisser un commentaire
Salut Niums,
Merci pour ce tuto il a l’air vraiment excellent !!!!
Mais j’ai problème avec tes sources…
Le SWF que tu fournis fonctionne a merveille avec mes images mais si j’ouvre le FLA, et que que je génère un nouveau SWF (sans rien modifier) cela ne fonctionne plus…
Si tu peux m’aider c’est super sinon bonne continuation et merci pour le tuto !!
Kenshiro
PS: j’ai pas trouver les commentaires pour voir si quelqu’un a déjà eu le même problème….
As tu intégré la classe tweener ?
Tu la trouves ici : http://code.google.com/p/tweener/
Car sinon tu as un swf tout blanc quand tu compiles.
+++
merci d’avoir pris du temps pour me repondre !!!
tout marche nikel chrome !!!
Bonne continuation et encore merci !
Salut, merci pour ce tuto. J’aimerais savoir si il est possible de faire une transition entre les images. Faire un fondu entre les images.
Merci de m’aider :)
@ Ju:
Tu veux une transition ou on voit les 2 images en même temps ?
Une manière de la faire est de créer le clip appelé « target_mc » dynamiquement (avec createEmptyMovieClip();). Comme cela tu pourrais :
- loader ton image 1 dans target1_mc
- au clic
- tu loades ton image 2 dans target2_mc en spécifiant une profondeur supérieur ( en utilisant getNextHighestDepth(); par exemple)
- une fois ton image 2 affichée complètement, tu détruits target1_mc
et ainsi de suite…
Pour gérer le chargement je te conseillerai d’utiliser « MovieClipLoader ».
+++
merci pour ta réponse rapide! Mais j’ai un peu de mal à comprendre.
En fait j’aimerais faire comme sur ce site http://www.elixirdesign.com entre l’image de la page d’accueil et l’image de About, ça fait un fondu.
Est-ce que tu as un email? merci :)
Comme sur le site que tu m’as montré ?! J’essaye de faire ça et de le mettre en ligne pour ceux que ça pourrais intéresser aussi…
Salut Niums,
Je me remets tranquillement sur le site dont je te parlais plus haut… J’ai dû arrêté pour des raisons de santé…
Enfin bref j’ai quasiment fini une première version et je me retrouve bloquer au niveau du loader, j’ai remarqué d’ailleurs que tu as exactement le même bug sur ton exemple ici: [ http://www.blog.niums.com/2009/net/action-script/semblant-de-template-avec-limage-background-en-fullscreen/ ]
Lorsque que le site est léger comme ton exemple on voit la même chose, une barre qui ne prend pas toute la largeur, enfin bon trop bref pour détaillé, mais lorsque le site devient plus lourd (galerie photo etc) le loader n’apparaît qu’une fraction de seconde lorsque l’animation est déjà chargé et en attendant page vide, ce qui tu comprendra est assez embêtant…
En attendant j’essaie de trouver une solution, je fait un autre loader pour voir si cela ne vient pas des éléments (MC)…
Mais je voulais t’informer comme tu as le même bug sur ton exemple, enfin je crois…
Hello,
Comme tu utilises Caurina, j’aimerais savoir si tu as rencontré le même problème que moi, à savoir :
J’ai un clip qui apparait ou disparait grace à la transition alpha dans un lecteur standalone. Tout marche sans souci en mode fenêtré mais dès que je suis en plein écran, la transition ne se fait pas ! L’image s’affiche au bout du temps choisi mais de façon brutale !
Chui une buse ?
Merci de ton aide !
Non ce n’est pas toi, en fin je pense. Avant j’utilisais (et j’utilise encore) MC Tween, du même auteur. Et ce bug arrivait ,rarement mais quand même, sans que je ne sache trop pourquoi. Certaine fois en réécrivant le code pour que certaines actions ne soit pas lancées au même moment (utilisation des function callback) cela réglait le problème.
Sinon pas vraiment d’explication sur ce phénomène.
Avec Twenner je n’ai pas encore eu ce problème.
bonjour,
Je souhaiterais reproduire l’exemple montré (avec l’image killbill), j’ai utilisé pour cela le .fla fournis, mais celui-ci correspond à un autre exemple.
Mon problème: je ne vois pas trop comment intégrer le code que tu indiques, pour arriver au résultat final de l’exemple killbill.
j’ai flash cs4 et pas beaucoup de notions action script.
En revanche je suis persévérant. Puis-je avoir un conseil de départ plus facile, ou bien le .fla correspondant à l’exemple killbill.
merci de votre compréhension.
Hello Rémy. Je viens de télécharger et ouvrir le fla et celui ci est bien le bon. Pour le voir en action il te faut 2 images dans le meme dossier nommés killbill.jpg et cousy.jpg.
Ensuite tu exportes (cltr + Entré ou cmd +entré).
Les fichiers images sont chargés sur les lignes : 76, 85,91.
Bon, ensuite je ne sais pas ce que tu comptes faire avec ce code, mais soit tu veux juste l’utiliser tel quel et là pas de problèmes. Soit tu veux comprendre ce que tu fais et je ne sais pas quel est ton niveau en as (même si la c’est pas la mort non plus) mais tu devrais faire un tour sur des sites tels que mediabox pour commencer par les bases ou la doc officiel de flash pour l’utilisation du language action script.
+++
salut, et merci de ton attention.
Mon niveau est faible as, mais je cherche à comprendre et j’utilise un peu flash.
Je souhaite réaliser un background pour mon site, et qui soit étirable. j’ai une image de 1900×1200. Pour cela le debut du script que tu publies m’interresse beaucoup ! car c’est exactement ce que je cherche à faire.
Helas le .fla n’est pas exactement comme l’exemple, et la je suis un peu perdu car j’y pose mon image, sa ne fonctionne pas bien (j’ai viré l’inclinaison, mais l’image n’est pas bien positionnée et puis je n’ai pas le % de chargement en bas à gauche. bref je m’y pert dès le debut). sinon on peut se contacter par mail. merci
As tu posé l’image dans le fla ou dans le dossier ou est exporter le .swf ? Il faut mettre l’image dans le dossier.
De plus ton image est énorme. Elle doit etre super lourde !
Pour infos mon image ne fait « que » 1024*768 px et pèse 244ko. Ce qui est déjà pas mal je trouve.
De quel inclinaison parles tu ?
Sinon je te reconfirme c’est bien le même fla tout y est.
+++
salut, je suis vraiment désolé mais j’ai l’impression d’être trop nul, car le code as dans mon .fla ne contient que 26 lignes et c’est cette dernière qui appelle mon image .jpg qui est bien située dans le dossier.(déjà sa correspond pas a ce que tu me décris…)- Je teste avec une image de 1900×1200 qui pèse 300ko. Peut-être faut-il créer un nouveau .fla ?
- j’ouvre le .fla
- je définis la taille de l’animation à 1900×1200
- je change le nom de l’image ligne 26 par mon image (située dans le même dossier)
- dans l’as du symbole 1 je modifie des valeurs pour l’inclinaison et le zoom :
_xscale = 100
_yscale = 100
_rotation = 0
- puis j’exporte l’animation.
le resultat affiche mon background mais il n’y a pas d’effet agrandissement/retrecissement lorsque je regarde en 1440×900.
De plus je ne me suis pas encore servit du code publié. Merci de prendre le temps. a+
26 lignes ? Bizarreeeeeeee !
Bon, On va faire simple hein ?
Tu effaces les 26 lignes, tu copies colles tout le code donné plus haut.
ps : pas besoin de définir ton anim à 1900*1200. La mienne fait 400*400.
Et je crois comprendre d’où vient ton problème: Tu n’as pas du « installer » la classe twenner.
-> http://hosted.zeh.com.br/tweener/docs/en-us/ et tu lis Introduction puis Download and installation et How to use a Class.
Après ça, si ça ne marche pas alors tu dois etre maudit lol.
+++
salut niums,
je te remercie d’avoir pris le temps de me répondre, mais je n’ais pas encore reussi. je ne desespere pas, mais je suis maintenant conscient de ne pas avoir le niveau…
j’ai bien compris l’interet et l’installation des classe (les exemples sont magnifiques).
De mon coté je suis repartis d’un fichier vierge (as2), puis j’ai placé dans le dossier la classe twenner, ainsi que les background.
Helas, après avoir longuement reecris le code grace à l’assistant, j’ai encore une erreur sur un « with » car il me dit que l’objet n’existe pas.
c’est clair que je ne suis pas maudit mais mauvais. pourtant ce code me serait vraiment super utile pour le fond de mon site (car pour l’instant je fais avec 12 css chargés dynamiquement, et 12 background…
C’est trop lourd comme chargement et en maintenance aussi.
A chaque fois je regarde l’exemple avec killbill j’en bave. sa passe aussi bien en 1900×1200 qu’en 1024×768, etc…
je ne desespere pas d’arriver a utiliser ce code, mais les poules auront surement des dents et on en sera au web10… ^^ merci quand même de ton aide (jsuis loin de devenir freelancer).
ps : j’ai aussi bien apprécié votre myspace et votre musique.
Ah ah ah tu m’a bien fait rire Rémy.
Envoie moi ton fla pour voir la ou est le pb envoie le sur blog (@) niums.com.
+++
est ce que celà fonsctionne également avec un flv ??
Denis, oui !
Un peu de pub voila une utilisation faite pour un site : http:www.azilis.fr
Sauf qu’il y a plusieurs choses à prendre un compte :
- utiliser une vidéo légère (car on travaille en progressif) à moins que tu puisse utiliser du vrai streaming.
- Le lecteur, player mc ne doit pas bouffer trop de ressource systeme
- penser à faire une vidéo en 16/9. C’est plus jolie
voila si je vois autre chose je l’écrirai.
+++
OUA là tu as choisis une très bonne pub !!
Super effet, bravo pour la conception du site !!
Par contre quand tu dis une vidéo légère, une vidéo sans FMS doit être de combien ?? Ou plutôt ne doit pas dépasser combien ??
Et j’ai une dernière petite question si je puis me permettre.
Comment on fait pour mettre des calques au dessus de la flv qui soit toujours visible en fullscreen comme sur azilis ?
Une vidéo « légere », ce serait 1 mo voir 2 max (environ 30 sec voir 45). On est en progressif donc ca charge en même temps que ca lit. Sauf que si la connexion est mauvaise tu l’as dans l’os.
Pour palier à ce problème tu peux mettre une image représentant le début de la vidéo en attendant que celle ci soit charger (mettre un buffer plus ou moins élevé).
Ta dernièe question j’y ai répondu la : http://www.blog.niums.com/test/bitmapData/full-stage-redim-fullscreenBack2.html
Le principe est le même.
Voila
+++
Oua 2 mo c’est du ultra léger pour du flv
Par contre le lien donne le résultat final par la procédure, c’est normale ?
En tout cas super boulot !!
oui c’est light. Tu ne pourras pas mettre ton long métrage.
Oups pour le lien voila le tout
http://www.blog.niums.com/2009/net/action-script/semblant-de-template-avec-limage-background-en-fullscreen/
+++
Merci niums pour le lien,
je ne vois pas de lien contact donc je te fais ma suggestion ici.
Il me semble qu’un tuto qui croise « La vidéo avec NetStream et FlashVars » avec celui ci serait super interressant sauf qu’i faut rajouter le bouton fullscreen sur le premier.
En fait il y a peu de ressource sur la toile qui explique comment creer un player flv parametrable par le html en ajoutant son logo, un texte défilant, une banniere de pub ect..qui puisse être en fullpage et cliquable.
Voilà c’était une idée comme ça
Salut,
Et un grand merci pour ce tuto!
Je me débrouille pas trop mal en prog et je me suis mis il y a peu à l’AS et Flash, j’adore ça…
J’avais déjà fais tout la partie changement de background, utilisation du tween pour déplacer les élements etc mais il me manquait ce graal le smooth! :)
Par contre juste une question, il a un équivalent en AS3?
Sur le site que je créais je suis en train d’intégré du pv3d (sound spectrum) et un slideshow mais tout deux utilisent de l’AS3, ça m’embête de les utiliser sous forme de pop-up car je ne peux pas les intégrer à l’interface en AS2…
Merci d’avance…
Il y a surement un équivalent en AS3. Il doit être possible de leporter en as3 mais malheureusement je ne peux pas t’aider sur ce coup.
+++
Salut,
Pas de souci pour l’AS3, je me débrouille sans :)
Par contre je me retrouve face à un problème épineux…:
Au début pour faciliter la construction je mettait tout mes clip dans le même frame (le 2, le 1 étant pour le préload), ainsi pas besoin de me cassé la tête avec le loader de background à savoir s’il suivrait ou pas le changement de frame ou s’il se mettrait à changer de fond à chaque changement de frame…
Pour info j’utilise 8 images de fond différentes et au lieu de changer au click j’ai mis un timer…
Jusque là pas de souci, sauf qu’au bout d’un moment énorme bug visuel en rajoutant un clip, en cherchant d’où venait le bug j’ai en effet réaliser que cela venait d’avoir trop d’élément dans le même frame…
Alors c’est là que mes connaissance s’arrête en flash, comme je disais plus haut pour developper pas de souci je suis rentrer facilement dans l’AS2 mais flash est un soft nouveau pour moi et la notion de frame et ligne de temps m’échappe un peu…
Du coup je me posais une question basique (et complexe à la fois lol) comment gérer tout ça?
Je détails un peu plus:
-Frame 1 un simple preload
-Frame 2 TOUT LE SITE: mes boutons et à chaque release de l’un des boutons je fait apparaitre/disparaitre (alpha) des movieclip.
Vous me direz basique et suffisant pour un site très light mais la sa bug j’ai trop d’éléments…
Dans le site j’ai une gallerie de photo, étant le movie clip le plus lourd j’ai éssayé de le mettre sur le frame 5 et d’utiliser un goto mais la bordel avec le changement de fond et bordel avec la musique que j’ai en fond…
Au final ma question est basique, comment gérer le changement de « page » avec Flash sans que cela ne foute le bordel dans les éléments changeant et à la fois permanents du site (par exemple une musique de fond, un changement de fond sous un timer…)
Je me doute que cette question peut paraitre « trop » basique mais bon j’ai juste besoin de conseils… Je me permet de demander ici comme je me suis baser sur ce tuto pour construire le site…
Merci d’avance…
Elle n’est pas si basique que ça ta question. Disons que le chargement et la gestion du contenu flash dépendent des personnes. En ce qui me concerne :
frame 1 : preload général du site
frame 2 : chargement du reste du site
– preload de l’élément à afficher (edito par exemple si on est sur la page d’accueil)
Pour ce qui est de la gestion du contenu
Imaginons que nous ayons 3 éléments :
– un movie clip accueil contenant des news mises à jour dynamiquement : accueil.swf
– un movie clip gallerie contenant la galerie photo : galerie.swf
– un movie clip contenant des infos statiques (contact par exemple) : contact.swf
3 manières de faire apparaitre les contenus
– movieClipLoader(); ou loadMovie();
Sur ma scène principale (nous sommes en frame 2 une fois que les préload nécessaires ont été faits), pour faire simple nous avons un mc nommé loader.
je charge avec movieClipLoader ou loadMovie (selon mes besoins) les .swf : accueil.swf, galerie.swf et contact.swf puis les décharge avec unloadClip(); ou unLoadMovie();
- attachMovie();
Même principe sauf que les movie clip sont dans la bibliothèque et pour le retirer removeMovieClip();
– monMc._visible; et monMc.enabled;
Si je veux tout avoir sur la scène (pas conseillé), je peux les rendre invisibles avec la propriété monMc._visible = false; puis je les désactive avec monMc.enabled = false;
Pour info tu peux utiliser tweener ou mcTween pour gérer tes tweens :
// Makes a MovieClip fade out on 0.8 seconds and then turns it off for better Flash Player performance
monMc.alphaTo(0, 0.8, « linear », 0, function() { this._visible = false; });
avec tweener ça te donnerait
Tweener.addTween(monMc,{_alpha:0, time:0.5, onComplete:function(){monMc._visible = false; });
Je te conseillerais d’ailleurs d’utiliser twwener plutôt que mcTeewn
Voila j’espère t’avoir un peu aidé. C’est une façon de faire. Et un exemple ici
+++
Un grand merci je vais étudier tout cela bien en détail :)
Et un autre grand merci pour la rapidité de ta réponse…
Je suis rentré tellement facilement dans l’AS que je suis rentré direct dans le gros, comment faire tel ou tel partie, sans passer par la base, comment bien structuré un site en Flash… :)
Je vous mettrai en le lien vers mon boulo final dès que possible…
++
Carrément, envoie le lien pour voir ce que ca donnera.
+++
*désolé petite bourde j’ai déjà posté plus haut au mauvais endroit…
Salut Niums,
Je me remets tranquillement sur le site dont je te parlais plus haut… J’ai dû arrêté pour des raisons de santé…
Enfin bref j’ai quasiment fini une première version et je me retrouve bloquer au niveau du loader, j’ai remarqué d’ailleurs que tu as exactement le même bug sur ton exemple ici: [ http://www.blog.niums.com/2009/net/action-script/semblant-de-template-avec-limage-background-en-fullscreen/ ]
Lorsque que le site est léger comme ton exemple on voit la même chose, une barre qui ne prend pas toute la largeur, enfin bon trop bref pour détaillé, mais lorsque le site devient plus lourd (galerie photo etc) le loader n’apparaît qu’une fraction de seconde lorsque l’animation est déjà chargé et en attendant page vide, ce qui tu comprendra est assez embêtant…
En attendant j’essaie de trouver une solution, je fait un autre loader pour voir si cela ne vient pas des éléments (MC)…
Mais je voulais t’informer comme tu as le même bug sur ton exemple, enfin je crois…
Hello Filipe,
Pour le preloader, j’ai mis le Stage.align sur la mauvaise frame. Il faut donc remettre
Stage.align = « TL »; //on aligne le site : Haut Gauche
su la première frame. Ca devrait faire l’affaire.
Et pour le preload une solution est de créer un swf qui ne contient que le loader du site et tu charges tout ton site sinon ton pourcentage tu le vois trop tard.
Voila une solution
+++
Merci beaucoup, j’essaie ça dès que possible…
Salut,
Le stage.align corrige effectivement le placement.
Par contre le pourcentage et la barre ne s’affiche toujours qu’au dernier moment quand l’animation est déjà chargé…
Pour le loader qui charge le site j’ai commencé à essayer c’est une bonne idée mais ça fou le bordel dans le redimensionnement…
Ce que je ne comprend pas c’est que j’ai le problème qu’avec ce fla/swf, avec d’autres de la même taille aucun souci…
Je commence à m’arracher les cheveux…
Enfin si vous avez une idée…
+++
Un détail qui doit avoir son importance et dont je viens juste de me rendre compte:
J’ai ajouter un trace(part_load) dans le loop this.onenterframe, de mon site bugué et sur les les autres, sur les autres aucun souci le trace affiche le pourcentage dans flash au fur et à mesure (simulant le téléchargement) alors que sur mon site bugué il ne le fait qu’à 100%.
En faite pour être plus précis c’est comme si le site ne lançait le premier frame qu’une fois le site complètement chargé… byzare…
C’est une option cochée qui ne le devrait pas?
Alors la j’avoue que je seche sur cette question. As tu essayé avec ma source pour voir si cela fonctionnait comme tu veux ?
Bon voila je me suis debrouiller en me relançant dans ta premiere idée: un premier swf/fla qui load mon site en swf…
Voila le code du loader pour ceux que ça peut aider, mon loader charge le site (site.swf) dans un MC vide nommé holder_mc, fait apparaitre un objet (objet_mc) et change le texte au fur et à mesure du chargement):
var loader:MovieClipLoader = new MovieClipLoader(); var loadHandler:Object = new Object(); loader.addListener(loadHandler); objet_mc._alpha = 0; holder_mc._visible = false; // Ce qui se passe quand le chargement est complet // "_mc" fait référence à ce que l'on charge loadHandler.onLoadInit = function(_mc:MovieClip) { objet_mc._visible = false; txt_load_mc._visible = false; _mc._visible = true; _mc.init(); }; // Ce que l'on fait pendant le chargement loadHandler.onLoadProgress = function(_mc:MovieClip, loaded:Number, total:Number) { objet_mc._alpha = Math.round(((loaded/total)*100)); txt_load_mc.htmlText = "Chargement en cours... "+Math.round(((loaded/total)*100))+"%"; _mc._visible = true; _mc._x = 0; _mc._y = 0; }; // Lancement du chargement... loader.loadClip("site.swf",holder_mc);Espérant que cela servira ;)
Bonjour et un grand bravo pour ce travail qui m’inspire beaucoup !
Cependant, j’ai beau installer le dossier caurina et en indiquer le chemin à flash, je me retrouve sans cesse avec un swf blanc, comme si il ne trouvait pas les images… j’en déduis qu’en fait c’est la classe qu’il ne trouve pas.
Est-ce que le fait de travailler avec CS3 pose un problème avec cette classe ou bien m’y prends-je comme un pied ?
Je n’ai pourtant eu aucun problème à installer d’autres classes auparavant…
Merci pour vos avis sur ce point, et surtout merci pour partager vos trouvailles avec nous!
Celbok, je travaille moi aussi avec CS3 donc le souci doit venir d’ailleurs.
Ton AS est bien de la forme :
import caurina.transitions.Tweener;
et ton fichier AS es bien dans le dossier :
caurina/transitions/Tweener.as
?
Si c’est le cas regarde s’il y n’y a pas une faute d’orthographe peut etre.
+++
Salut Niums…
Salut à tous
Pour ceux qui le souhaite ci-dessous le smooth en AS3…
Source sur ce site: http://mattmaxwellas3.blogspot.com/2008/12/as3-smooth-loaded-bitmaps.html
++
//create a new loader object and put it on the stage
var slideLoader:Loader=new Loader();
this.addChild(slideLoader);
//load picture into loader object
slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, scaleContentForPicture);
slideLoader.load(new URLRequest( »images/tree.jpg »));
//smooth it once loaded
function scaleContentForPicture() {
var smoother_bm=Bitmap(slideLoader.content);
smoother_bm.smoothing=true;
}
Merci Filipe C’est comment dire : COURT et EFFICACE. Bien plus simple que en AS2
Bonjour,
J’aurais aimé savoir s’il y avait la possibilité de charger un fichier swf plutôt qu’une image, en AS2 toujours.
Merci pour votre réponse et pour ce tuto impeccable.
Je ne suis pas sur de saisir ce que tu veux faire. Tu peux charger un .swf externe sans le filtre smooth grace à :
loadMovieNum(); ou loadMovie(); avec la méthode loadMovie(); ton swf sera chargé au niveau spécifié au préalable et écrasera le contenu si celui ci n’est pas vide. (idem pour loadMovieNum sauf que c’est sur des niveau 0,1,2,3,4,5… etc)
Ex :
_root.loadMovie( »tonSwf.swf »);
this.conteneur.loadMovie( »tonswf.swf »);
Attention de ne pas utiliser _root dans tes fla si tu comptes chargé tes swf de cette manière car lorsqu’on ton swf sera chargé son _root ne sera plus le bon. Et tu auras un problème de ciblage.
+++
oui ok, je crois que je vois mais je ne suis pas moi non plus super à l’aise en actionscript donc… je vais t’expliquer ce que je veux faire : a la place des images jpg que tu charge selon tes menus, je souhaiterais charger des swf (utilisés comme fond pour le site), et que ceux-ci s’affichent donc en dessous du movieclip « central »…
Bref, je pense qu’il faudrait remplacer la ligne
smoothImageLoad( »cousy.jpg »,background_mc.target_mc);
par un loadMovie de mon fichier swf, non?
il y a surement d’autres modifs à faire dans la fonction smoothImageLoad qu’il faudrait pour le coup changer en une sorte de smoothLoadMovie…
Non tu te compliquerais la vie pour rien. Le plus simple si tu ne comptes pas utiliser de fond en image est de céér 2 niveaux : un niveau ou tu auras comme tu le pensais tes swf qui se chargent selon tes actions et un niveau supérieur ou tu charges le reste du site
Ce qui te donnerai:
- niveau 2 : crée un movieClip nommé conteneur ou tu charges le contenu du site
- niveau 1 : crée un movieClip nommé monBackground ou tu as le background qui change
- niveau 0 : _root (c’est ici qu’on charge tout notre site)
Pour tes chargements tu as juste à faire par exemple :
tonBouton.onRelease = function()
{
monBackground.loadMovie( »tonFichierSwf »);
}
Je vais peut etre un peu vite donc dis moi si tu vois ce que je veux dire.
Je l’ai presque fait la : dans ton cas tu n’utiliseras pas le filtre smoth tu feras un simpleloadMovie
http://www.blog.niums.com/2009/net/action-script/semblant-de-template-avec-limage-background-en-fullscreen/
+++
ok, merci pour ces réponses très claires, je vais tester tout ça et je reviendrai vers toi avec les résultats obtenus, en espérant que ce soit positif :)
en fait ça marche nickel comme ça, sauf juste un truc: le swf chargé en background ne s’agrandit pas à 100%. Tu aurais une idée?
C’est normal ton swf chargé est indépendant du swf d’origine.
Donc si ton swf principal fait 800 sur 600 créé des swf à 800 sur 600 ensuite si tu compte tout centré utilise une petite fonction de « recentrage » comme j’ai fait dans l’exemple que je t’ai donné.
plus d’infos ici pour le recentrage automatique :
http://www.blog.niums.com/2007/net/action-script/faire-un-site-fullpage-avec-gestion-du-placement-des-elements/
+++