Flyout menu help

[ShadowTech]

Hello,

I'm trying to build a flyout menu but having a few problems to finish it up.

Basically I want the flyout menu to launch from the right side of the screen. As of right now it launches form the left side so I need assistance with that. Also due to the timer the menu jerks when sliding out and back in. not sure how to fix that.

Suggestions?

Thanks in advance.

[R3dKap]

No, you cannot use a group for this purpose. And, generally speaking, stop using groups as they are just a virtual grouping of controls. Groups don't have any properties for themselves. Which makes them a pain to use... I never use them.

Use containers instead. Containers have their own X, Y, Width, Height, Fill, etc. properties, which makes them very handy to use.

So put your menu inside a container and follow my instructions above.

About the Start value: sorry, I meant property. When you look at the ControlAnimator component you see it has various properties (which I describe here: Control Animator). That's what I'm talking about in my previous instructions when it comes to: Start, End, Animate, Reverse, ...

[ShadowTech]

@R3dKap I'm testing the solution but the container is not moving when clicking the button. Any suggestions? I have the "OnSelect" of the button with the UpdateContext formula.

Thanks in advance.

[R3dKap]

Can you tell me:

• What's in the different properties of your ControlAnimator component?
• What's in the OnSelect property of your button?
• What's in the X property of your container?

[ShadowTech]

@R3dKap 

ControlAnimator

Animate - locAnimateFlyOutMenu

EndValue - Screen1.Width - ctrFlyOutMenu.Width

Reverse - locFlyOutMenuHidden

StarValue - Screen1.Width - 30

OnSelect (Button)

OnSelect - UpdateContext(
{
locFlyOutMenuHidden: Not(locFlyOutMenuHidden),
locAnimateFlyOutMenu: false
}
);
UpdateContext({locAnimateFlyOutMenu: true})

X property of container - 0

[R3dKap · Accepted solution]

Ok, sorry. In my post where I gave you all the instructions I just forgot to give you the most important one, the one that will make your menu animate... Set your container's X property to:

ControlAnimator.Value

Replace "ControlAnimator" with the name of your own ControlAnimator component of course.

Also, after some testing, here is a better solution you should implement (just a few changes)...

Change your button's OnSelect property to this:

UpdateContext({locAnimateFlyOutMenu: false});
UpdateContext({locAnimateFlyOutMenu: true})

Change your screen's OnVisible to this:

UpdateContext({locFlyOutMenuReverseAnimation: false}); 
Reset(ControlAnimator)

Change your ControlAnimator's Reverse property to this:

locFlyOutMenuReverseAnimation

Add a hidden toggle on your screen and set its Default property to this:

ControlAnimator.OnAnimationEnd

Set the toggle's OnCheck property to this:

UpdateContext({locFlyOutMenuReverseAnimation: Not(locFlyOutMenuReverseAnimation)});

Leave the rest as it is...

This should work much better...

[ShadowTech]

@R3dKap That works great! Thanks for your help. Awesome Component. BTW, Can the same ControlAnimator be used for multiple menus? An I assume if I wanted to use this on a menu moving from top to bottom I would just use the "Y" properties of the container?

Thank Again.

[R3dKap]

Aaaah... At last! Glad it works fine now!

No you can't use the same ControlAnimator component to animate another menu. The rule is: one ControlAnimator component for each animation you want to produce.

Yes you're right, if you'd wanted your menu to move from top to bottom you would just set your Y property to your ControlAnimator's Value property. You could even combine X & Y to produce funny animations... 😊

Just see the ControlAnimator component as a "function" which varies its Value output property from Start value to End value in Steps value steps applying an animation function specified in AnimationType... 😉

You could use it not only to move controls but also on transparency properties of your controls, or rotation angle for your icons, etc.

PS: just changed the "Accept as Solution" post to the last post I made... More relevant... 😉

[ShadowTech]

@R3dKap  Cool. I have another lager menu that I want to slide down from the top of the screen but I can only get it to start from the bottom and slide up. How do I get it to start from the top?

Thanks in advance.

[R3dKap]

Hi @ShadowTech, just remember that the goal of the ControlAnimator component is to generate a decimal value into the Value output property going from Start to End property values.

So if you want your menu to slide down from the top, the Start value should be something like:

-FlyOutMenuContainer.Height

Notice the minus "-" sign because the menu should be outside the screen at first.

And the End value should be zero (when you menu is shown and visible at the top of the screen).

Then just set your flyout menu container Y property to your ControlAnimator component's Value property.