Preload jpeg dans un diapo FlashRésolu

Question

Bonjour à tous,

J'ai sur mon site un diapo en flash au format swf. Il est excellent, il charge des jpeg extérieurs, autant qu'on le souhaite tant qu'ils possèdent un nom spécifique du type "img"+i+"jpg" et surtout il affiche une petite animation de preload entre chaque affichage des images...

... oui mais le problème, c'est que j'ai perdu le .fla !
et j'ai beau me creuser, je n'arrive pas à reproduire cette transition.
Ici ce que j'ai actuellement sur mon site: http://www.verypics.com/diapo_accueil.swf

J'ai pu récupérer ce code sur un forum, qui crée un movie clip, et affiche comme il faut mes images, mais au niveau de la transition j'aimerais donc que tant que l'image suivante n'est pas chargée, il y ai une petite animation de preload, meme pas besoin d'afficher une barre de progression ni de pourcentage, juste une animation de transition entre chaque image...
Voici le code:

// déclaration des variables
var aListePhotos:Array = new Array();
var nI:Number = 1;
 
// construction de la liste d'images
for (nJ=1; nJ<=4; nJ++) {
// création de clip vide pour charger les images
var mcImage:MovieClip = MovieClip=this.createEmptyMovieClip("mcImg"+nJ, nJ);
with (mcImage) {
_x = 0;
_y = 0;
_visible = false;
loadMovie("image"+nJ+".jpg");
}
// ajouts de la référence du clip au tableau
aListePhotos.push(mcImage);
}

// fonction de transition 
function slideShow() {
nI++;
var nMax:Number = aListePhotos.length;
var mcAffiche:MovieClip = aListePhotos[nI%nMax];
var mcMasque:MovieClip = aListePhotos[(nI-1)%nMax];
mcAffiche._visible = true;
mcMasque._visible = false;
}
 
// Transition toutes les 2 secondes
var nInterval:Number = setInterval(slideShow, 2000);

Dans mon fla, je n'ai donc qu'une seule image clé sur un seul calque avec ce code.
J'imagine donc qu'il est possible après la ligne 20 de lui dire de lire une autre image clé contenant une petite animation entre chaque image?

Merci d'avance...

BBFUNK01 · Accepted Answer

Hello,

il faut que tu sollicites ta fonction loadBitmapSmoothed dans ton setInterval, en spécifiant dans les paramètres l'image à charger et le conteneur :

function slideShow() {
nI++;
var nMax:Number = aListePhotos.length;
        loadBitmapSmoothed(tonImage, mcAffiche)
}

Et pour cela il faut par exemple que tu mettes ton clip mcAffiche sur ta scène, mais tu peux aussi le stocker dans la bibliothèque, et ainsi le supprimer de la scène et le recharger avec la nouvelle image en contenu à chaque intervalle :

function slideShow() {
nI++;
        removeMovieClip("mcAffiche");
        this.attachMovie("mcAffiche", "mcAffiche", {_x:200, _y:300, getNextHighestDepth});
var nMax:Number = aListePhotos.length;
        loadBitmapSmoothed(tonImage, mcAffiche)
}

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

BBFUNK01 · Answer

Hello,

utilises MovieClipLoader() pour le chargement de tes images, ainsi tu disposeras de plusieurs écouteurs qui te permettront de gérer la progression du chargement tel que tu le souhaites : onLoadProgress(), et également par exemple le paramétrage des coordonnées d'affichage de chaque image si tu les souhaites également : onLoadInit().
Tu peux aussi, et je te le recommande, lisser les images chargées en adaptant le MovieClipLoader en LoadBitmapSmoothed() -> tu trouveras en 2 coups de cuillère à pot sur internet le code pour LoadBitmapSmoothed().

Ensuite c'est simple : tu appelles ta fonction LoadBitmapSmoothed dans la fonction de ton intervalle en précisant en paramètre l'image à charger.

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

sfboy · Answer

Je suis perdu, plus rien ne fonctionne...
Mais merci pour la fonction smooth que je ne connaissais pas...
Mon problème maintenant... il ne m'affiche qu'une seule image...??

import flash.display.*; 
function loadBitmapSmoothed(url:String, target:MovieClip) { 
// Creation du movieclip contenant l'image originale 
var bmc:MovieClip = target.createEmptyMovieClip("bmc", target.getNextHighestDepth()); 

// écouteur du chargement de l'image 
var listener:Object = new Object(); 

listener.tmc = target; 
// Si l'image est chargée, nouveau movieclip avec la fonction smooth
listener.onLoadInit = function(mc:MovieClip) { 
mc._visible = false; 

var bitmap:BitmapData = new BitmapData(mc._width, mc._height, true); 

this.tmc.attachBitmap(bitmap, this.tmc.getNextHighestDepth(),"auto",true); 
bitmap.draw(mc); 
}; 

// Chargement de l'image 

var loader:MovieClipLoader = new MovieClipLoader(); 
loader.addListener(listener); 
loader.loadClip(url, bmc); 
}
var aListePhotos:Array = new Array();
for (i=1; i<=4; i++)	{  
createEmptyMovieClip("myMC",getNextHighestDepth()); 
loadBitmapSmoothed("image" + i + ".jpg",myMC);
}

// fonction de transition
var nI:Number = 1;
function slideShow() {
nI++;
var nMax:Number = aListePhotos.length;
var mcAffiche:MovieClip = aListePhotos[nI%nMax];
var mcMasque:MovieClip = aListePhotos[(nI-1)%nMax];
mcAffiche._visible = true;
mcMasque._visible = false;
}
 
// Transition toutes les 2 secondes
var nInterval:Number = setInterval(slideShow, 2000);

sfboy · Answer

Entretemps, je me suis finalement tourné vers une autre solution.
J'utilise un fichier actionscript Flash as3.0 situé dans le meme dossier que mon swf principal et mes images jpg. .. utilisation des bibliothèque tweener et caurina pour les effets de transitions (tweener pour as3.0 à télécharger ici et à placer dans le meme dossier que les autres fichiers)

J'ai trouvé le gros de cette solution sur un autre forum, l'ai remis à ma sauce et vous la fait partager pour ceux que cela intéresserait.

Un inconvénient toutefois, il faut lister le nom de toutes les images dans le code as du swf principal, mais il est facile d'automatiser cela, je ne l'ai pas fait car je n'ai que trois photos dans le diaporama.

Voici mon résultat : http://www.verypics.com
Mon fichier swf principal nommé : diaporama.swf (en as3.0)
Memes dimensions que mes jpg, soit 968 x 400 px
1 calque et une image clé avec ce code :
import Diaporama;
stage.align="TL"; /*on aligne le tableau en haut à gauche*/
var tab=new Array("image1.jpg","image2.jpg","image3.jpg"); /*la liste de mes images situées dans le meme dossier ... à automatiser! */
var diapomc:Diaporama=new Diaporama(tab);
addChild(diapomc);

... et le fichier as nommé : Diaporama.as (en as3.0)
package{

import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.utils.Timer;
import flash.events.Event;
import flash.events.TimerEvent;
import caurina.transitions.*;

public class Diaporama extends MovieClip{

var images;
var compt:uint=0;		
var delai:Timer = new Timer(6000); /*ici on définit le temps de transition*/

public function Diaporama(list:Array):void{
images=list;
/*on crée 2 MovieClip vides qui servent à inverser le plan d'affichage des images*/
/*Movieclip contenant l'image1 est au dessus du Movie clip contenant l'image2*/
/*Ensuite dans la fonction charger on inverse la position des Movie Clip et on charge l'image suivante */                       
this.addChild(new MovieClip());this.addChild(new MovieClip());
delai.addEventListener(TimerEvent.TIMER,charger);
charger();
}
private function charger(e=0){ /* l'élément e=0 ne sert à rien, mais sans cela la fonction n'est pas interpretée*/
delai.stop();
this.swapChildrenAt(0,1);
this.removeChildAt(1);
var loaderimg:Loader=new Loader();
loaderimg.contentLoaderInfo.addEventListener(Event.COMPLETE,appar);
loaderimg.load(new URLRequest(images[compt]));
this.addChildAt(loaderimg,1);
compt++;
if(compt>=images.length){
compt=0;
}
}
private function appar(e:Event){
images.smoothing = true;
this.getChildAt(1).alpha=0;
Tweener.addTween(this.getChildAt(1),{alpha:1, time:1, transition:"linear"}); /*les différentes fonction et syntaxe de transitions sont dispo dans la doc de flash */
/*pour des images plus grandes que la scène, on peut les bouger aléatoirement de gauche à droite et de bas en haut*/
/*this.getChildAt(1).x=this.getChildAt(1).y=-200;
Tweener.addTween(this.getChildAt(1),{x:-200+(Math.round(Math.random()*2)-1)*100, time:4, transition:"linear"});*/
delai.start();

}
}

}


Merci beaucoup pour l'aide...
a+

Preload jpeg dans un diapo Flash

4 réponses

Votre réponse

Discussions similaires