wipe effect between loaded jpg's in gallery

[flipside]

Hi,

Please take a look here:

http://users.pandora.be/stor1/flash/anyway/pictures_vol_v01.html

Click on the first and second thumbnail a few times so that everything is loaded (I didn't use preloaders etc for now).

Notice the wipe when you click the thumbnail? I spent already a long time to create this :-)

But now I want it to wipe out if you click another button, then wipe in again to show that new image etc... (like it is now, you have a white flash, really annoying).

Here's my code that is on frame 1 of the timeline (I only have 1 frame in the timeline)


_root.navi.vol01.onRelease = function() {
container.loadMovie("pic_01.swf");
wiper._width = 1188;
wiper.endwidth = 10;
};
_root.navi.vol02.onRelease = function() {
container.loadMovie("pic_02.swf");
wiper._width = 1188;
wiper.endwidth = 10;
};


'navi' is the MC with all the buttons in it. 'vol01' and 'vol02' are instance names of the first two buttons. 'container' is an empty movieclip. 'wiper' is a white MC of which I change the width with actionscript = wiping effect.

For now I load .swf files instead of jpg's, because when I put ("pic_01.jpg") instead of ("pic_01.swf"), it doesn't work. Any help on this matter is also greatly appreciated. (edit: I found it, my jpgs were progressive...)

So basically what I want when the first pic is shown and you click on thumbnail2:
-wipe out image currently displayed
-load new image (pic_02)
-AFTER new image is fully loaded, wipe in to show this image
and so on

What would be cool also is the following:
when you click button 2, load image 2 while image 1 is still displayed. When loading is finished, a white line goes from left to right, wiping out image 1 and at the same time wiping in image2.

Golden tips to achieve these kind of effects in actionscript newbie language are very welcome :-)

Note that there will be 4 of these galleries with +-80 thumbnails each...

I read the transitions between external swf's tutorial, but I want to load a bunch of jpg's, and not make 4*80 swf's with each only 1 jpg in it...

kind regards,

wouter

[tofuisonmyside]

hi wouter

the way you handle this is right: first, write what you want precisely and in the right order, then try to translate to AS.


So basically what I want when the first pic is shown and you click on thumbnail2:
-wipe out image currently displayed
-load new image (pic_02)
-AFTER new image is fully loaded, wipe in to show this image

in pseudo code :


on press
make the whit stripe appear to mask the current image (you already have done this)
load the new image (loadMOVIE) in the current image (below the white strip)
make the preload thing appear above all (attachMovie of a preloader for example)
if loaded make the preload disappear
when the loaded has vanished, make the white stripe disappear


oh **** i read your post too fast, this is not what you want.
What you want is in pseudo code more like this ?


on press
load the new image but do not show it, so certainly a new container, and _visible = 0
show a preloader (attachMovie)
when preload == 100% make the preload disappear
when preload had gone, make the white strip appear
when the white strip had covered the current image, make it disappear and the new image appear (still below the white strip)
then make the whitestrip wipe out


i know this is not an AS answer at all, but you seem comfortable enough with as
if not enough, i can help you more but i have the feeling you can manage it by your own, am i wrong ?

tofu.

[flipside]

Thanks a lot for your reply! I'm getting desperate here :-)

Your wrong about my AS knowledge... Some things I know because I keep on searching and trying for a very very long time, but then when I want some tiny new thing I need to start all over again, as I don't know enough commands.

I understand your explanation, you may even leave off the preload thing as it is for an offline presentation (I just thought it would be nice I ever want to make it somewhat online available too, maybe something like a simple function to turn off all preloaders when viewed offline?)

So this is my goal for now:
1. (first the wipe has gone from right to left to show the first image)
2. on press (another thumb than the one displaying now)
2.1 wipe from left to right to cover the current image
2.2 when the wipe is at it's maximum width
2.2.1 unload the current image (which is invisible because it's under the white wipe rectangle)
2.2.2 load the new image (I think no need for new container as this happens underneath the wipe rectangle)
2.2.3 optional[when online - preload function = on]
2.2.4 optional[show preloader (attachMovie) (is that the same as loadMovie?) this happens above the white wipe rectangle)]
2.2.5 optional[when preload == 100% make the preload disappear (would this be checked with the getbytesloaded etc, like in any preloader tutorial nowadays?)]
2.2.6 [when preload had gone] [or in case of no preloader it's "when wipe is at maximum width and current image is unloaded" see2.2 ---make the wipe from right to left so the loaded image underneath it becomes visible. (now we're back in the state of 1, but the new image is displayed)


My problems are with:
-2.2 when the wipe is at it's maximum width. I wrote all kind of if statements but I can't get the wipe to go to the left again (I do the wipe with actionscript by setting an endwith for the wiper and then the wiper resizes in X gradually until it reaches the endwidth)


this is the code on my wiper rectangle MC:


onClipEvent (load) {
speed = 5;
}
onClipEvent (enterFrame) {
_width += (endwidth-_width)/speed;
}


this is what I have in frame 1 on timeline:


_root.navi.vol01.onRelease = function() {
if (_root.currMovie != "pic_01") {
_root.currMovie = "pic_01";
container.loadMovie(_root.currMovie+".jpg");
wiper._width = 1188;
wiper.endwidth = 10;
}
};

this checkes if the clicked thumb isn't already displayed. If not, it makes the wiper go from 1188 to 10px. This code works.

But now I'm stuck on how to implement the next part (wipe from left to right when clicked on another thumbnail and wipe back to show this new image)

Any help would be greatly appreciated :)

thanks,

wouter

[flipside]

I feel I'm making some progress here.

http://users.pandora.be/stor1/flash/anyway/pictures_vol_v02.html

First click both thumbnails again to make sure the two corresponding jpg's get loaded completely.

You'll notice that when the wiper is at it's widest, and you click a button, the right jpg is loaded and the wipe is ok. When you click the other thumbnail then, the wipe goes back while the jpg still shows. This is also good! But then you have to click again to get the new jpg loaded and the wipe going back. This should all go in one step, but I absolutely don't know how.

Another thing is that I need to know which jpg is currently being displayed. If I can get that name or number, maybe my problem is solved.

Suggestions are very welcome!

Here's the code that sits on the wiper MC:

onClipEvent (load) {
speed = 5;
}
onClipEvent (enterFrame) {
_width += Math.ceil((endwidth-_width)/speed);
if (_root.wiper._width == 1173) {
_root.container._visible = false;
} else {
_root.container._visible = true;
}
}



Here's the code on frame one:

_root.container.createEmptyMovieClip("imgMC", 2);
_root.navi.vol01.onRelease = function() {
if (_root.wiper._width == 5) {
_root.wiper._visible = true;
_root.wiper.endwidth = 1173;
}
if (_root.wiper._width == 1173) {
_root.container.imgMC.loadMovie("pic_01.jpg");
_root.wiper._visible = true;
_root.wiper.endwidth = 1;
}
};
_root.navi.vol02.onRelease = function() {
if (_root.wiper._width == 5) {
_root.wiper._visible = true;
_root.wiper.endwidth = 1173;
}
if (_root.wiper._width == 1173) {
_root.container.imgMC.loadMovie("pic_02.jpg");
_root.wiper._visible = true;
_root.wiper.endwidth = 1;
}
};



(I have to set endwidth to 1 to get the wiper's width to 5, this has to do with the math.ceil in the wiperMC actionscript. If I don't use this math.ceil, the MC never get's to a perfectly round number, or so it seems. But I know I can fix this later, I had the same problem with the scrolling thumbnails left and right)

[tofuisonmyside]

hi wouter,

i could be easier to read your code if you could use the # symbol when writing the post.


you should create a txtfield above everything on yr scene to have a little debug on line (_root.debug for example)

for yr pb:
store the jpg to load in an array, and create a var to store which one is curretnly loaded


var pictArray = ["pict_01.jpg", "pict02.jpg"]
var currentPict = 0;






on (press){
t = createEmptyMovieClip("temp",1);
t.onEnterFrame = function(){
_root.container.imgMC.loadMovie(_root.pictArray[_root.currentPict]);
_root.debug += _root.pictArray[_root.currentPict]
//then your code for the loading...
}


does this help ?

[flipside]

I'll check it out. I don't understand it really well at first sight :)


I suppose the "temp" should be "imgMC"? Shouldn't the new empty movieclip be created inside the container MC?

I also don't understand the relationship between the defining of 't' and then the 't.onEnterFrame'

I'm going out now, sitting here way too long, I feel like my eyes will pop out soon!

thanks a lot for your help man!

wouter

[tofuisonmyside]

using t like this creates a reference to the freshly created movie temp


using
t = createEmptyMovieCLip("temp",1)
t.onEnterFrame...

is the same as

createEmptyMovieClip("temp",1)
temp.onEnterFrame...

[flipside]

Hi!

Here's an update. I found out some stuff why I couldn't let some things vary when the wiper was at full width etc... So I got the basic wiper stuff working!!!

http://users.pandora.be/stor1/flash/anyway/pictures_vol_v04.html
(didn't load a starting image wo it will just be a white plane at first)

After that I tried your array thing, but now I think there is a small delay when the wipe goes back from right to left. (first make sure you have the two images loaded, otherwise there will definately be a delay :)) I'm not sure if there is a delay or not though... could be just me...

Here is the code for frame1:



stop();
Stage.showMenu = false;
_root.container.createEmptyMovieClip("imgMC", 2);
_root.wiper._visible = false;
_root.bgvlak._visible = true;
//Ignore the above lines.
//below is what I took from your code :-) Not sure how this works though,
//never used this array thing
var pictArray = ["pic_01.jpg", "pic_02.jpg"];
var currentPict = 0;
//button1: set wiper visible and to 5px
//Set its target width to 1178 so it will start wiping
//from left to right
//I assume I have to change the currentPict var here
_root.navi.vol01.onRelease = function() {
currentPict = 0;
_root.wiper._visible = true;
_root.wiper._width = 5;
_root.wiper.endwidth = 1178;
};
_root.navi.vol02.onRelease = function() {
currentPict = 1;
_root.wiper._visible = true;
_root.wiper._width = 5;
_root.wiper.endwidth = 1178;
};
_root.menuknop.onRelease = function() {
_root.fader.endalpha = 100;
};




and the code on the wiper:


onClipEvent (load) {
speed = 2;
}
onClipEvent (enterFrame) {
//the following two 'if' check if the wipe is to left or right and uses a
//different round option for left or right (needed to let the wipe stop
//on the intended value) (ignore this, has nothing to do with my question :-)
if (_width<1178 && endwidth>_width) {
_width += (Math.ceil((endwidth-_width)/speed));
}
if (_width<1178 && endwidth<_width) {
_width += (Math.floor((endwidth-_width)/speed));
}
//If wiper is at maximum width=1178, load the image inside the container.imgMC
//The info for the array comes from the thumbnail buttons.
//It also sets the width back to 'smaller than 1178' and the new target width
//to 5, so the above will continue to work and make the wipe from right to left
if (_width == 1178) {
_root.container.imgMC.loadMovie(_root.pictArray[_root.currentPict]);
endwidth = 5;
_width = 1177;
}
//if wiper is 5px, hide it
if (_width == 5) {
_root.wiper._visible = false;
}
}



Did I implement the array code right?

Can I write it in such a way that I don't have to write code for each of the 80 buttons in frame 1? The only thing that changes is the currentpic value and the name of the button. I need to implement a way to check if the clicked button isn't already showing it's corresponding image, but this must be possible using the currentpic value.

Thanks,

wouter

[tofuisonmyside]

great to see you going your own way


i answered you in the other post...