[?] Fade controls...

[thetracker]

Hi all, I new here.
I have a skinning project with hidden control buttons. It appears when cursor hover in some object. The control button width, height and locations is same with the hover object.

The question is how to make it appears with fade? The problem is the control button always behind the hover object. Can I send it to front when cursor move on hover object?
Thanks

[corwwin]

Hi

Your hover object must be behind your control button.
In the xml file, set the alpha parameter of the button to zero.
You have to make a maki script and use the onenterarea() function, something like this:

First define the needed variables
Then pick the button
Define timers
And last initiate the values
a = 0; //alpha variable
buttontimer1.setdelay(100); //fade-on timer = 100ms
buttontimer2.setdelay(100); //fade-off timer = 100ms

then define the actions :

button.onenterarea() // When the mouse flies over the control button
{
buttontimer1.start() // launch fade-on timer
}

buttontimer1.ontimer() //when timer is reached
{
a = a + 1; // increase the alpha parameter of the button
button.setxmlparam("alpha",a); // set the alpha parameter to the button
if (a==255) buttontimer1.stop(); // stop when alpha = 255 (button full visible)
}

button.onleavearea() // When the mouse quits the control button
{
buttontimer2.start() // launch fade-off timer
}

buttontimer2.ontimer () //when timer is reached
{
a = a - 1 // decrease the alpha parameter of the button
button.setxmlparam("alpha",a); // set the alpha parameter to the button
if (a==0) buttontimer2.stop(); // stop when alpha = 0 (button transparent)
}

[thetracker]

Hi Corwwin, thanks for answer and sorry for late reply. I just blow up my notebook. =(

I'd try it but no luck. Since I put the hover object behind the control, there's nothing appears when mouse over it.

.....
	<!-- hover object -->
	<layer id="display.cover" x="0" y="0" w="80" h="80"/>
	<!-- code from you -->
	<script id="control.menu" file="scripts/controlMenu.maki"/>

	<!-- controls appear -->
	<group id="player.normal.controls" x="0" y="0" w="80" h="80"/>
</groupdef>

<groupdef id="player.normal.controls" w="80" h="80">
	<button
		id="Pause" action="PAUSE"
		x="0" y="0"
		image="player.cover.frame.pause.down"
		hoverImage="player.cover.frame.pause.down"
		downImage="player.cover.frame.pause.down"
		sysregion="0"
	/>
	<button
		id="Play" action="PLAY"
		x="0" y="0"
		image="player.cover.frame"
		hoverImage="player.cover.frame.play.down"
		downImage="player.cover.frame.play.down"
		sysregion="1"
	/>
	<script id="play2pause" file="scripts/play2pause.maki"/>
</groupdef>

[thetracker]

One more thing... I also try this maki script...
Here, controls is inside group.
Its work for fading but still the controls behind the hover object.

#include "../../../lib/std.mi"

Global layer cover;
Global group groupx;

System.onScriptLoaded() {
   Group grp=getScriptGroup();

   cover=grp.getObject("display.cover");

   groupx=grp.getObject("player.normal.controls");
   groupx.setTargetA(0);
   groupx.setTargetSpeed(0);
   groupx.gotoTarget();
}

cover.onEnterArea() {
   groupx.setTargetA(255);
   groupx.setTargetSpeed(0.5);
   groupx.gotoTarget();
   cover.setTargetA(0);
   cover.setTargetSpeed(0.5);
   cover.gotoTarget();
}

cover.onLeaveArea() {
   cover.setTargetA(255);
   cover.setTargetSpeed(0.5);
   cover.gotoTarget();
   groupx.setTargetA(0);
   groupx.setTargetSpeed(0.5);
   groupx.gotoTarget();
}