Transition image comme un rafraichissement d'image

Question

Bonjour à tous !

Je vous explique mon problème : 

Je voudrais passer d'une image à une autre en faisant comme un rafraichissement d'image sur internet ou autre. C'est à dire en affichant bandes par bandes de haut en bas la prochaine image.

Au début de mon animation flash, je voudrais qu'il y ait 5 bandes qui apparaissent donc que ça se fasse en 5 temps, ce n'est pas très compliqué de faire ça en coupant les photos etc...

Le problème c'est que je veux qu'au fur et à mesure de mon animation, les transitions se fassent en 10,15,20 ... temps, c'est à dire qu'il y ait 20 bandes qui apparaissent... Ce qui prendra trop de temps en découpant les photos car je vais peut-être les farre apparaitre en 50 temps... 

Je voulais donc savoir si c'est possible de faire ça avec un script ou autre et si oui comment je pourrais faire...

Si je n'ai pas été clair, dites-le moi je réexpliquerais mon problème...

Merci d'avance

webcrea92 · Answer

Si je comprends bien c'est un effet que tu souhaites sur la photo, ça n'a rien à voir avec le temps de chargement?
J'utiliserais un masque rectangles pour faire ça, au début tu génères 5 masques d'1/5ème de hauteur, après 10 d'1/10ème etc...

Christophe
Webcréa sarl
http://www.webcrea.fr

totodu45 · Answer

Merci pour ta réponse,

en fait ce que j'veux c'est voir une image normalement au début (la 1ère image).
Ensuite la 2ème image est derrière la 1ère, la 1ère image reste devant mais des bandes de cette image disparaissent pour qu'on voit celle de derrière. les bandes disparaissent de haut en bas. sur la première animation, 5 bandes disparaissent pour voir l'image de derrière en entier donc c'est bien la hauteur divisée par 5 que l'on fait...

Lorsque tu parles de masque, celà veut dire qu'on applique un masque sur l'image de deçu de taille 1/5 de la hauteur et de ce fait on voit l'image de derrière sur les 1/5 de l'image qui ont été enlevé ?

C'est celà que je cherche à faire, mais étant novice en flash, je ne vois pas comment faire pour coder ça, (si code il y a besoin)... 
Pour info, j'ai essayé de lire quelques codes en flash et je les comprends bien car je suis en 2ème année de dut informatique donc j'ai déjà abordé pas mal de choses en programmation.

Si vous pouviez m'aider à démarrer mon code ou me donner un site qui explique bien ttes les fonctions qui existent sous flash pour faire ce que je veux, j'en serais très reconnaissant...

Merci d'avance

webcrea92 · Answer

Je peux donner des pistes sur comment je traiterais le problème mais je n'ai jamais eu à résoudre ce problème.

L'idée serait d'avoir 3 clips l'un sur l'autre
clip1 : l'image 1
clip2 : l'image 2 masqué pas le clip3
clip3 : le masque de l'image 2

Phase 1 tu charges l'image 1 dans le clip 1 avec un loadMovie
Phase 2 tu charges l'image 2 dans le clip 2 avec un loadMovie 
Phase 3 tu génères des rectangle dans le clip3 qui feront apparaître progressivement le clip2. Voir setMask
Phase 4 quand le clip2 recouvre complètement le clip1, tu fais un loadMovie de l'image 2 dans le clip1
Phase 5 tu décharges le clip2 avec un unloadMovie
Ainsi de suite en faisant varier la hauteur et le nombre de rectangles
Christophe
Webcréa sarl
http://www.webcrea.fr

totodu45 · Answer

Merci pour ta réponse, j'ai essayé ce que tu m'as dit mais je n'y arrive pas ...

J'ai crée un calque "image1" dans lequel j'ai inséré un clip nommé "clip_image1".
J'ai crée un calque "image2" dans lequel j'ai inséré un clip nommé "clip_image2".
J'ai crée un calque "masque" dans lequel j'ai inséré un clip nommé "masque".

Les clips "clip_image1" et "clip_image2" sont vides.
Le clip masque contient un simple rectangle.

Sur la scène principale, j'ai crée un nouveau calque qui s'appelle "Actions".

Dans ce calque j'ai écrit ceci :

loadMovie("image1.jpg", "clip_image1");
loadMovie("image2.jpg", "clip_image2");

J'ai déjà testé ça, rien ne s'affiche à l'écran ... J'ai vu un exemple sur internet qui faisait la même chose, j'ai recopié de la même manière mais ça ne marche pas je ne comprends pas pourquoi ...

Je n'ai pas encore essayé le masque vu que je n'arrive pas encore à charger les images ...

Si vous pouviez donc m'aider ...

Merci d'avance!! Bon week-end...

webcrea92 · Answer

Essaye ça

clip_image1.loadMovie("image1.jpg");
clip_image2.loadMovie("image2.jpg");

Christophe
Webcréa sarl
http://www.webcrea.fr

totodu45 · Answer

Ca ne marche toujours pas, par contre si je me mets sur le calque image1 et que je fais this.loadMovie("image1.jpg"), l'image s'affiche bien lorsque je teste l'animation, idem lorsque je mets ça dans le calque action...

Mais si je fais ça comme ça je ne pourrais pas faire ce que je veux ensuite ... :s

webcrea92 · Answer

Il faut mettre le script dans la frame pas dans le clip
_level0.clip_image1.loadMovie("image1.jpg");
_level0.clip_image2.loadMovie("image2.jpg");

Christophe
Webcréa sarl
http://www.webcrea.fr

totodu45 · Answer

http://martin.theault.free.fr/solstice_hiver.rar

Voilà mon projet flash ... j'ai peut-être fait quelque chose de mauvais ..

webcrea92 · Answer

Il faut nommé tes clips dans propriété

Christophe
Webcréa sarl
http://www.webcrea.fr

totodu45 · Answer

C'est déjà fait non ?

webcrea92 · Answer

non, tu sélectionnes chaque clip et tu les nommes dans la partie propriété "nom de l'occurence" 
c'est ce nom qu'il faut reprendre pour atteindre le clip...

Christophe
Webcréa sarl
http://www.webcrea.fr

totodu45 · Answer

http://martin.theault.free.fr/image.jpg



C'est dans ce menu là ?

Je n'ai pas "Nom de l'occurence"...

webcrea92 · Answer

sélectione ton clip et regarde en bas dans propriété, en grisé tu as nom de l'occurence, tu écris dedans "clip_image1"  ou ce que tu veux, c'est ce nom que tu utilises pour manipuler le clip

Christophe
Webcréa sarl
http://www.webcrea.fr

totodu45 · Answer

Je suis désolé mais je ne vois pas du tout là....

J'ai mis partout ou je pouvais mettre "clip_image1" et rien ne marche ...

webcrea92 · Answer

quel est ton email?

Christophe
Webcréa sarl
http://www.webcrea.fr

totodu45 · Answer

theault10@hotmail.com ou martin.theault@voila.fr

totodu45 · Answer

Merci beaucoup, je cliquais sur le clip à droite dans la fenêtre dans "Bibliothèque", alors qu'il fallait que je clique sur le petit rond qui représente mon clip sur l'animation....

J'ai réussi à créer un masque, j'ai crée un rectangle à la main et au fil de l'animation je le déplace de haut en bas, celà fait bien l'effet que je veux...

Maintenant je désire créer un rectangle à l'aide de l'actionScript pour que le rectangle descende à une vitesse régulière et mette beaucoup de temps avant de descendre en bas...

Je ne vais pas créer 70 images clés ... par exemple..

J'ai regardé sur internet comment créer des rectangles, mais ils me parlent d'actionScript 3 à chaque fois, or je n'ai que l'actionScript1&2.

Dois-je passer à l'actionScript 3, càd avoir une version supérieur de Flash (car je suis à la version8) ou il est quand même possible de dessiner des rectangles à l'aide de l'actionScript 2 ?

Merci d'avance

webcrea92 · Answer

Tu n'as pas nécessairement besoin de créer les rectangles à la volée, tu peux utiliser un clip "rectangle" de la largeur de ton image et tu le dupliques autant que besoin...

rectangle1._y   pour la position y du premier rectangle
rectangle1._heigth   pour sa hauteur

pour te simpliifier, tu peux créer une interpolation de mouvement qui grandit un rectangle de 0 à 100 px de hauteur.
Ainsi tu n'as plus qu'à ajuster la hauteur du clip dupliqué d'autant de fois sur l'image masquée..

Pour infos, as2 dessine des rectangles, regarde la doc ...

Christophe
Webcréa sarl
http://www.webcrea.fr

totodu45 · Answer

Moi j'ai voulu faire ça : 

J'ai crée un rectangle faisant la taille de mon animation dans le movie clip "masque".
Dans ce clip je décidé de descendre le rectangle ttes les 10 secondes par exemple en faisant this._y +=50;

Mais j'aimerais encore une fois automatiser ça, ne peut avoir à créer beaucoup d'image clé car ça serait interminable...

J'ai regardé sur internet comment faire "dormir" l'animation, j'ai trouvé setInterval...

J'ai donc essayé ce code : 

function deplacement () {
    this._y +=  30;
}

setInterval(deplacement, 10000);

Il m'a l'air correct vu les exemples que j'ai vu mais il ne marche pas ....
Si j'appelle seulement la méthode "deplacement",  ça déplace bien le rectangle, mais la fonction setInterval n'execute pas la fonction toutes les 10secondes ... je ne comprends pas pq...

Merci d'avance

totodu45 · Answer

Bonjour...

Personne a d'idée ?

Transition image comme un rafraichissement d'image

20 réponses

Votre réponse

Discussions similaires