3D HOLOGRAM MENU TUTORIAl PART 2 – Adobe Edge Animate

by Alexandra November. 25, 14 3 Comments

Hey everybody,

In part two of the 3D hologram menu tutorial we’ll create the HTML content for the menu using Adobe Edge Animate and the Coherent Labs Animation Framework.

Part 1 is available HERE

finishedAll

On the image above you can see the finished menu. In part 1 of the tutorial we mapped the Coherent UI views on 3D meshes and now we just need to create the HTML content for the UI.

compose copy

1. The watch

First, we will create the HTML content for the Coherent UI view on the watch.

1.1 Create the project and import image 

assets

We create a new Edge project and setup the width and height of the stage to the same size to make it square.

stageSize

Then we import the image assets by dragging and dropping them in the scene (the image assets are available here along with the rest of the tutorial’s files). Then using the select tool we resize each of the elements.

importImages

1.2 Position the elements

We use the built-in guidelines(purple lines) of Edge Animate to center them vertically and horizontally. Make sure to check the snap to guides option (view/snap to guides).

guidelines

1.3 Create symbols and animate them

Then we convert each of the images to a symbol (by right-clicking on the image and selecting convert to symbol). By doing this we have a separate timeline for each of the images. In this way can have them rotating at different speeds independent of each other.

So, one by one we select the newly created symbols and we animate their rotation by placing the appropriate keyframes and transitions on the timeline. For more information about the Adobe Edge timeline and keyframes check this tutorial – http://coherent-labs.com/blog/create-animated-game-hud-with-adobe-edge-animate-and-coherent-ui/ in our blogpost.

thisPlay

In order to make the animation loop at the end of each one add a trigger with the following code:

when this trigger is reached it will cause the animation to restart from the beginning.

Lastly, we use the ellipse tool to create a few additional circular shapes.

finishedw

and the HTML content for the watch is complete. Now we’ll move on to the menu.

2. The menu

2.1 Create the project and import image 

assets

Again we create a new Adobe Edge project and we import all the image files.

images

2.2 Position the elements 

Using the selection tool we select, clone, position and rotate them to achieve the desired design.

images2

Then using the Rectangle tool we add background

background

and we use the Text tool to add text.

menuItem

2.3 Create symbols and animate them

Now our menu item looks complete and we convert it to a symbol and start animating it.

First, we create an initial animation to be played when the UI is first loaded. We animate the position, opacity, and size of the elements again by placing the appropriate keyframes and transitions on the timeline. The goal is to make the corner images move towards the text and back.

corners

Then, we create an animation to be played when the user hovers the mouse pointer over the menu element. This means, however, that we need to have multiple animations for the same symbol on the same timeline.

stop

To achieve this we first add a trigger at the end of the initial animation with the following code which causes it to stop:

Then we choose a later time on the timeline and we create there our hover animation.

Again we animate the position, color, opacity and size of the elements by placing the appropriate keyframes and transitions on the timeline. The goal is to make all the blue elements red when the user moves the mouse over the menu item.

red

To make it work we just use the mouse enter action of the symbol and make it play from the starting moment of the hover animation.

mouseenter

The same way we create an action for mouse leave to play from the beginning of the timeline so that the item will be restored when the mouse leaves it.  Now our menu item symbol is complete and animated.

We duplicate it in order to create the rest of the menu labels and the menu is now complete.

wholeMenu

2.4 Add additional interactivity with the Coherent Labs Animation Framework and GSAP

To enhance the functionality of the menu we create animation which moves the menu items on mouse scroll.

To achieve this we use the Coherent Labs Animation Framework which is based on GSAP.

First we add the JavaScript libraries:

Then we add the following simple script that will listen for mouse wheel events:

The script first checks if the scroll was moved up or down,

then it moves the first and the last menu item to bottom and top accordingly using jQuery’s prepend and append functions.

Lastly, it animates the whole stage using GSAP’s TweenMax:

Now our HTML is complete.

The only thing that remains is to set the URL’s of the Coherent UI components to the previously created HTML.

setURl

And here’s the finished menu:

finishedAll

and sample video:

Hristo

Social Shares

3 Comments

Leave Reply

Leave a Comment

  • Hi Hristo,

    I have done everything here, but I can\’t seem to get the menu to properly wrap around the gengon in Unity3D. If I use a custom plane (2D quad), the menu works perfectly. Do you have any suggestions as to how I can get this to work? I tried changing the width and height, and I can almost nail it, but I cannot get the mouse to hook into for input. It never seems to grab focus. Also are the source files for the menu available? The one for the watch is (for Edge) but the UI one isn\’t. I\’m trying to see what differences are between my version and yours (some actions aren\’t triggering properly) I am brand new to Edge BTW. (have been doing all animations etc with pure CSS and code.

    Thanks again for this awesome tutorial.

  • Hristo K

    Hi Alfred,

    I\’m glad that you like the tutorial.

    Regarding the wrapping of the UI texture on the 3D mesh – you can use the UV mapping tools of your 3D editor to set the exact position of the texture on your 3D model. In 3ds Max you can use the UVW unwrap modificator for this. Alternatively you can use your approach and resize the Coherent UI view that\’s mapped on the 3D model. Just make sure that the view is small enough for the whole UI to fit on the 3D mesh.

    Regarding the input – for Unity 3D you need to use the object picker script from our samples or write your own script to setup the input for 3D objects in your scene. Then you just need to add a mesh colider to the 3D model so that it can be detected using raycasting.

    Regarding the Adobe Edge Animate project – you can download it from here

    If you have any additional questions you can reach me at hristo [at] coherent-labs.com

  • Hi Hristo,

    I was going to email you, but figured better this be in the public eye if anyone else runs into the issue.

    I solved the issues I was having by having my modeler model me a gengon as well as realizing there was no mesh collider on the object (doh!). It is usually set by the Unity \’Generate Colliders\’ option on the model upon import but I somehow overlooked all this completely.

    We had some severe problems getting things to line up and show correctly as when using \’Flip Y\’ option in the Coherent View, it was causing the mouse hover to not correctly calculate the proper screen space. So as you can imagine I was highlighting the wrong options or not highlighting anything at all. I don\’t know exactly how she solved it, but she said she did some things with the UV offsetting or something of this nature (sorry I know nothing of modeling and texturing like she does) Originally it had worked but only with using the \’Flip Y\’ option. After her fix, it now works without the option and the mouse pointer properly highlights the right menu item. This is looking and working great for us, was just a test to see how to do it / how it would work and look like, but we are ecstatic at the results.

    Also, thanks for the project files, this will help wonders!