Friday, December 10, 2010

Create a simple slideshow using AS3: Part 2

Today we'll create a simple slideshow with a smooth fade effect.

Take a loook:


To get this effect (I assume you've read the previous tutorial) you need to add one more gallery movieclip, on top of the existing one, with exact same size, coordinates, but with a name of "gallery2".

Here's how it will work: gallery mc is simply changing frames without any effects. Gallery2 is the one that makes the illusion of the fade. Once the timer makes a loop, gallery2's frame is set to gallery's current frame and gallery2's alpha is set to 1. After that, gallery goes to the next frame, but gallery 2 starts fading out. Simple, but effective!

import flash.utils.Timer;

gallery.stop();
gallery2.stop();
gallery.alpha = 1;
gallery2.alpha = 0;

var changeTimer:Timer = new Timer(2000);
changeTimer.addEventListener(TimerEvent.TIMER, updateSlideshow);
changeTimer.start();

var nextframe:int;

function updateSlideshow(TimerEvent):void
{
if (gallery.currentFrame < gallery.totalFrames)
{
nextframe = gallery.currentFrame + 1;
}
else if (gallery.currentFrame == gallery.totalFrames)
{
nextframe = 1;
}

gallery2.alpha = 1;
gallery2.gotoAndStop(gallery.currentFrame);
gallery.gotoAndStop(nextframe);
}

stage.addEventListener(Event.ENTER_FRAME, fadeManager);

function fadeManager(Event):void
{
if (gallery2.alpha > 0)
{
gallery2.alpha -=  0.05;
}
}

Note: all the images should be the same size.

Thanks for reading!

Related:

Create a simple slideshow using AS3: Part 1
Create a simple slideshow using AS3: Part 3
Create a simple slideshow using AS3: Part 4
Create a simple slideshow using AS3: Part 5
Create a simple slideshow using AS3: Part 6
Create a simple slideshow using AS3: Part 7
Create a simple slideshow using AS3: Part 8
Create a simple slideshow using AS3: Part 9
Create a simple slideshow using AS3: Part 10

11 comments:

tinian said...

I tried to do what you suggested, but I'm confused by two statements: the "add one more gallery movie clip (i.e., gallery2)" "on top of the existing one."

1. Does "add one more..." mean create another movieclip with the exact same images embedded into the movieclip timeline? I tried doing this and then naming the instance "gallery2," but when doing this in conjuction with a) or b) below seems to change gallery's instance name also to gallery2 (thus, there are two gallery2s).

2. What does "on top of the existing one" mean? Does it mean:
a) create a new layer above gallery2's layer in the main timeline and in the first frame place gallery2's movieclip?
b) embed gallery's movieclip "under" (i.e., inside) gallery2's movieclip timeline?
c) simply create a new frame on the main timeline and in the same layer as gallery's movieclip and put in the new frame gallery2's movieclip?
d) something else?

Thanks so much for your help.

Kirill Poletaev said...

By "add one more" I mean that you should simply copy and paste the same existing movieclip and put it on top of the other one, but change its instance name to gallery2.

You just need to have 2 copies of the same movieclip object on the stage, one named gallery and the second gallery2.

You can create a new layer above gallery's layer and put gallery2 on top of it in the same position, but you can also do that on one layer - it doesn't matter.

tinian said...

That's awesome, thanks! As a beginner at AS3, I clearly I was over thinking/reading the instructions!

I see from your code, you can adjust the speed of the fade with "new Timer(2000)", but can you adjust the delay between fades (i.e., so that a viewer can view the image for a longer period before moving to the next image?

Also, I tried adding the following code (along with the frames and buttons needed), which I used before, inside the movieclip timeline to create a navigation for the movieclip... but obviously it didn't work, because the movieclip doesn't have "frames" assigned to each image. Is there a way to assign the images so that navigation can work with your code?

button1.addEventListener(MouseEvent.CLICK, onbutton1Clicked);
button2.addEventListener(MouseEvent.CLICK, onbutton2Clicked);
button3.addEventListener(MouseEvent.CLICK, onbutton3Clicked);

function onbutton1Clicked(e:MouseEvent):void {
gotoAndStop(1);
}
function onbutton2Clicked(e:MouseEvent):void {
gotoAndStop(2);
}
function onbutton3Clicked(e:MouseEvent):void {
gotoAndStop(3);
}

Kirill Poletaev said...

The timer is used to change the time between the fades, not the fading time itself.

The movieclips should have a frame for every picture (a different frame for each picture), so to manually tell the movieclip to change to a frame you can do gallery.gotoAndStop(2), for example.

tinian said...

Ok, I was able to get my code to work on the main timeline with the "gallery." for the button# and gotoAndStop() statements, as you suggested. (Actually I used "gallery2." to make it work, since your suggestion was to put gallery2 "on top" of gallery.)

But it doesn't work alongside your code on the main timeline. I tried two methods:

1. When I put my code into the AS on the main timeline under your code, your code seems to supercede mine and the buttons do not operate at all (though they do cycle through the proper rollovers). No compiler errors are generated.

2. When I put my code into the movieclip AS, an error is generated, stating "Access of undefined property gallery2."

I'd hoped that the slideshow would do its natural loop. But whenever a button is clicked, the movieclip would jump to that frame in the slideshow and then return to its natural loop.

Thanks!

Kirill Poletaev said...

gotoAndStop() simply sends the movieclip to the desired frame. To manually set the next slide you can use something like this

function manualSlide(framenum:int):void{
changetimer.reset();
changetimer.start();
nextframe = framenum;
gallery2.alpha = 1;
gallery2.gotoAndStop(gallery.currentFrame);
gallery.gotoAndStop(nextframe);
}

then use manualSlide(1) for example to change to the slide number 1

Anonymous said...

This just cured 2 weeks of frustration! THANK YOU!!!!

Anonymous said...

hi kirill,
when i add more than 3 images it shows image 2, through the crossfade of picture 3, 4 and when it fades back to 1.
so only the first 2 crossfades are good, then the slideshow starts to show part of the second image each time.
i tried with different images with different names in new fla documents.
it's always the second image that appears over and over.
the size of the images is 1440 x 900. shouldnt matter but still...
please advise.
ciao,
roma
see slideshow part 1

Anonymous said...

the first 3 fades are okay actually

Kirill Poletaev said...

I'm not sure what your problem is, to be honest. I tried copying the code from this tutorial just now and it worked without any problems (I used more than 3 images too).

Try rereading the tutorial and check if you're doing anything wrong. If the problem persists, don't hesitate to ask again.

Dora K. Czuczor said...

Hello,

I have used your code, and I have a problem... This is the error message, and it happens when I click on a back button, and I reload the menu animation.

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at index_fla::MainTimeline/fadeManager()[index_fla.MainTimeline::frame47:39]
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at index_fla::MainTimeline/updateSlideshow1()[index_fla.MainTimeline::frame47:21]
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()

I am new to as3, but I am sure that there is nothing in the line 21 (on frame 47) and the code ends at line 38, so the line 39 doesn´t exist.

Could you please help me?

Regards,
Dora

Post a Comment