Animating GUI

From WiCWiki

Jump to: navigation, search

This will teach you how to make widgets move or fade out on a screen.

First step will be to select a screen. This time we select the Request screen in your gui_ingame_slim.xml file.

You will see that your properties for your screen shows:

Image:animation-properites.jpg

Now right-click in the white empty area. This will give you a popup-menu with different things to add to your screen. This is where you for example can add another screen as background for pixel correction. But this time we are going to select “add animation script”. As you can see you now got a new property you can change, select it and press the three dots for the text edit. As you can see there is already a script.

Script

[start]

set length 0.2

*: alpha 0

Set length: Decides how long you want the animation to be.

Alpha: Sets the opacity for objects.

Let’s see what this script does by default. Go to your window menu and choose animation. This will make a small toolbar popup on your screen.

Image:animation-toolbar.jpg

First thing to do is to write “start” in the text area/dropdown menu and press enter. This will set the screen to activate your script when your screen is activated. When this is done, press Image:add.jpg and drag the slider to see the current scripts animation. And as you can see everything fades out on your screen. We have now gotten a fade on our screen by default settings. Now we can edit it for our own desire.

If you select a widget on your current screen and again right-click the white area in properties a popup-menu will show and this time you have a animation flap where there is 2 different choices. Select save position and chose “start” in the window that pops up after.

If we go back to our animation scrip we can see that a new line has been added to your script.

[start]

set length 0.2

*: alpha 0

myButton_GroundSupport: position 141 226

Now go to your animation toolbar, press Image:add.jpg again and drag the slider again and u will see that everything fades but that widget that’s written down in your script.

For movement of widgets:

To make widgets move on your gui-screen we have to save its position. The saved position will be the position where the widget will placed after movement.


Now all we have to do it to move the widget to where ever you want it to move from.

Just move it abit further up on your screen and press Image:add.jpg on your animation toolbar again and drag the slider. As you can see, your widget is now moving.

These two different types of animations can be combined. Try to tweak scripts that will fit your own taste.

Personal tools
User Created Content