Sliding / animated title menu items into and out of layout

  • 42 favourites

Index

Attached Files

The following files have been attached to this tutorial:

.capx

animated-menus-1.capx

Download now 98.43 KB
.capx

animated-menus-2.capx

Download now 195.03 KB

Stats

4,391 visits, 7,935 views

Translations

This tutorial hasn't been translated.

Tools

Slide out menu items before a layout change

What we want to add now is: after clicking on our menu items, the menu items shall slide out before switching to another layout. This means we need to change quite some things.

This is in the second .capx

Construct 2 will constantly check in every tick for a variable's value. Depending on its value,

a) menu items will fly into or out of the window center and

b) layout change is done according to variable's value

When a menu item is clicked with the mouse (so menu items are visible!), the variable's value is changed and the "every tick"-event will send out the menu items. As soon as one of the menu item is outside the layout (or, you could check a certain x-position of this menu item), the layout is changed accordingly.

Let's get to work

In the event sheet 1 (for Layout 1), let's add a new variable called inOrOut.

These are the possible values:

0 = nothing happens

1 = info to move menu items out of the screen and change to layout IntroLayout

2 = info to move menu items out of the screen and change to layout GameLayout

On the start of layout condition, insert a new action:

System -> Set value of inOrOut to 0

This is just to be sure that the variable is reset after returning from another layout.

Change the mouse events accordingly

a) remove the "Go to layout xyz" actions

b) insert the inOrOut value change

Moving in or out?

The Every tick-event will check constantly for the inOrOut value, so add two sub events:

System -> Compare variable -> inOrOut is equal to 0

System -> Compare variable -> inOrOut is greater than 0

The "flying in"-actions are still directly under Every tick, so select and move these to the sub-event inOrOut=0. While still selected, copy them (CTRL-C) and paste them into the sub-event inOrOut>0. All those 320 have to be changed to -160 and 800, depending on the menu items.

Your code should now look like this:

If you run the game now, the title menu items will fly in and when click will fly out.

The missing code

You guessed correctly that we need to add the layout change event. We'll check if a menu item has left the window and if yes, check the inOrOut value and change to the corresponding layout.

Add a new event for the item sIntro:

Condition: sIntro -> Is outside layout

Add two sub-events:

System -> Compare variable -> inOrOut=1

Action: Go to IntroLayout

System -> Compare variable -> inOrOut=2

Action: Go to GameLayout

That's it. Have fun experimenting!!!

Also check How to make a menu title by Andeming..

.CAPX

animated-menus-1.capx

Download now 98.43 KB
.CAPX

animated-menus-2.capx

Download now 195.03 KB
  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!