View source for Menu 101 (h2) - opacity based menu buttons

{| class="ts" style="width:100%"
|-
! style="text-align:left" | Name !! style="text-align:left" | Topic !! style="text-align:left" | By
|-
| Menu_101_(b) || Opacity based menu buttons || AFRLme
|}{{AFRLme_Patreon}}

This tutorial is to show you how to create opacity based menu buttons by controlling the opacity (transparency) values of each button. ''This is a much neater & nicer looking solution compared to the condition based button method.''

== Tutorial ==
1. Begin by creating a new menu scene.

2. Next you want to start creating some new scene objects (1 per button). ''Don't forget to rename the scene objects to something appropriate''

[[File:menu_101_b_(1).png|800px]]

{| class="ts"
|-
| ''Quick tip: Create a temp background image of what the menu / scene should look like when all the elements have been added to it. Set this as your scene background to help you reposition all of the scenes images / animations easier. Replace this background with the actual final version of the background when you have finished.''
|}

3. Select one of the scene objects you just created, browse to the '''image''' tab & link the relevant image to the scene object. Next click on the '''reposition image''' tool (shown in the image below) & reposition the image associated with the selected scene object to where you want it to be displayed in the menu scene. ''Rinse & repeat this with the rest of the scene objects.''

[[File:menu_101_b_(2).png|800px]]

{| class="ts"
|-
| ''Quick tip: After left clicking on an image or animation you can use the arrow keys on your keyboard for precision nudging, which is a lot easier to correctly position images / animations, than with the mouse alone.''
|}

4. Next you will be wanting to create the interaction polygons (object area) for each scene object. Click on the '''create and edit object areas''' button on the toolbar & create a polygon shape for each scene object. Try to keep them as simple as possible.

[[File:menu_101_b_(3).png|800px]]

{| class="ts"
|-
| ''Quick tip: If you hold down the '''shift''' key while creating your object area polygon shapes, then the editor will allow you to snap the lines to various degrees, which makes it a lot easier to draw straight or angled lines.''
|}

5. After you have defined the object area polygons for each button you will be wanting to create some '''cursor enters object area''' & '''cursor leaves object area''' actions for each object. Inside of the '''cursor enters object area''' action you should include a '''set visibility of object''' action part & set the '''visibility [%]'''' value to 100%. Adjust the '''delay [ms]''' value to suit - I set 250ms in my example. Now inside of the '''cursor leaves object area''' action, do the same thing, except set the linked objects '''visibility [%]''' value to 0. Rinse & repeat these actions for each button that you created. - ''see (6) for more information regarding the visibility [%] value as the value should be the same as whatever you set in step 6.''

[[File:menu_101_b_(4).png|400px]]  [[File:menu_101_b_(5).png|400px]]

6. Finally, you need to define the opacity values of the buttons inside of an '''at beginning of scene''' event, so... browse to the scenes action tab & inside of this create an '''at beginning of scene''' action & inside of this create (for each button that you created) a '''set visibility of object...''' action part & link each one to the relevant scene object. Leave the visibility [%] & delay [ms] values as they are - unless you aren't including the semi-transparent versions of the buttons in the background image that you have set in the properties tab of the menu scene, as you will probably be wanting to set a custom value for the visibility.

[[File:menu_101_b_(6).png|800px]]

== Reference Video ==
<html><iframe width="800" height="450" src="https://www.youtube.com/embed/qNVY93JtoLM" frameborder="0" allowfullscreen></iframe></html>

== Resources ==
{| class="ts"
|-
! style="text-align:left" | Name !! style="text-align:left" | Description
|-
| [[:Media:menu_101_(b).zip|menu_101_(b).zip]] || A working example of the tutorial in action. ''Visionaire Studio 4.2.5+'' required to run the included .ved file.
|}{{toc}}