Fade in to another layout

After clicking start on the menu, I would like the next layout to fade in, instead of just suddenly appearing, how could I accomplish this?

Full black layer above all others. Starting from start of layout, gradually reduce layer's opacity until it becomes fully transparent, at which you can disable it altogether.

Bonus points: add a "loading" sprite or something.

Example capx

As you can see, the button object appears on top, whatever layer it is.

Use sprites as buttons, they'll get covered.

EDIT: See this post for a more recent example (2015 with r206), simpler, using the fade behavior

Thanks! Great example <img src="smileys/smiley4.gif" border="0" align="middle" />

Full black layer above all others. Starting from start of layout, gradually reduce layer's opacity until it becomes fully transparent, at which you can disable it altogether.

How do you "gradually reduce" the value of the opacity at runtime?

Fade Behavior

In order to fade away the layer, you'd do something like:

System > On layout start > Black Screen > Set Opacity to 100

                           System > Wait .5sec

                           Black Screen > Opacity 80

                           System > Wait .5sec

                           Black Screen > Opacity 60

etc.

So basically, every half second, you'd be lowering the opacity of the object until it reaches zero. At that rate, the screen will transition from black to invisible in about 3 seconds.

If the transition is too blocky or takes too much time, try something like lowering the opacity by 5 every .1 seconds. This would change you from black to clear in about two seconds, with a fairly smooth transition.

Or you could play around with fade. I haven't found a fade button yet, so...

ok , i have tried this idea long time ago when i tried to make my 3rd game but i found some problem that its hard to do it perfectly so i made a way i think that is the best >>>

the way is : you will have 2 object and lets call them : black1, black2

ok lets say these are the events :

when player collision with win ---> then play the winning animation then fade in ( black1 ) with waiting = 2sec , then the 2nd event will be :

at the start of layout play fade out of (black2) without any waiting... so in this case you will have object for fading in and another for fading out and i made this in my latest game ( gathering the sheep ) you can check it out if you like it

Example capx

Go check the "FadeIn" and "FadeOut" group in the "Common" event sheet.

That's how you gradually modify the opacity over time.

> dl.dropbox.com/u/36472942/construct/forumhelp/LayoutFade.capx

>

Go check the "FadeIn" and "FadeOut" group in the "Common" event sheet.

That's how you gradually modify the opacity over time.

In your example, I can't find the variables "fading" and "faded" Is there somewhere they are placed?

The gist:

Every tick

If object.opacity>0 | set opacity to object.opacity-100*dt

It will fade out in one second. Switch to > and + to fade in. Change the values to chande the speed, but multiply by dt to make it framerate independent and smooth.

Update. Now in 2015 with r206 it is possible to achieve the same effect thanks to the Fade behavior.

Here is a commented simple example.

Update. Now in 2015 with r206 it is possible to achieve the same effect thanks to the Fade behavior.

Here is a dl.dropboxusercontent.com/u/36472942/construct/forumhelp/FadeIn_FadeOut_layout_2015.capx commented simple example.

Hey there, i hope you'll see this message and can answer me . I've tried out your example, but it doesn't start on the first page. How can i modify your example so it starts black, fades out slowly to the first page and when a button is clicked it should fade back in, then fade back out again showing the second page?

Greetz, horoblast.

horoblast:

horoblast: youtube.com/watch How to make cut scenes and fade transitions using Finish State Machine

Oh nice, thank you.