{"id":4966,"date":"2014-11-25T09:45:26","date_gmt":"2014-11-25T09:45:26","guid":{"rendered":"http:\/\/coherent-labs.com\/?p=4966"},"modified":"2017-11-10T12:00:12","modified_gmt":"2017-11-10T12:00:12","slug":"3d-hologram-menu-tutorial-part-2-adobe-edge-animate","status":"publish","type":"post","link":"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/","title":{"rendered":"3D HOLOGRAM MENU TUTORIAl PART 2 – Adobe Edge Animate"},"content":{"rendered":"

Hey everybody,<\/strong><\/p>\n

In part two of the 3D hologram menu tutorial\u00a0we’ll create the HTML content for the menu using\u00a0Adobe Edge Animate<\/a><\/strong> and the Coherent Labs Animation Framework<\/a><\/strong>.<\/p>\n

Part 1 is available HERE<\/a><\/strong><\/p>\n

\"finishedAll\"<\/a><\/p>\n

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.<\/p>\n

\"compose<\/a><\/p>\n

1. The watch<\/h3>\n

First, we will create the HTML content for the Coherent UI view on the watch.<\/p>\n

1.1 Create the project and import image\u00a0<\/h5>\n

assets<\/b><\/p>\n

We create a new Edge project and setup the width and height of the stage to the same size to make it square.<\/p>\n

\"stageSize\"<\/a><\/p>\n

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

\"importImages\"<\/a><\/p>\n

1.2\u00a0Position the elements<\/h5>\n

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).<\/p>\n

\"guidelines\"<\/a><\/p>\n

1.3\u00a0Create symbols and animate them<\/h5>\n

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.<\/p>\n

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\/<\/a> in our blogpost.<\/p>\n

\"thisPlay\"<\/a><\/p>\n

In order to make the animation loop at the end of each one add a trigger with the following code:<\/p>\n

this.play(0);<\/pre>\n
when this trigger is reached it will cause the animation to restart from the beginning.<\/p>\n
Lastly, we use the ellipse tool to create a few additional circular shapes.<\/p>\n
\"finishedw\"<\/a><\/p>\n
and the HTML content for the watch is complete. Now we’ll move on to the menu.<\/p>\n
2. The menu<\/h3>\n
2.1 Create the project and import image\u00a0<\/h5>\n
assets<\/b><\/p>\n
Again we create a new Adobe Edge project and we import all the image files.<\/p>\n
\"images\"<\/a><\/p>\n
2.2\u00a0Position the elements\u00a0<\/h5>\n
Using the selection tool we select, clone, position and rotate them to achieve the desired design.<\/p>\n
\"images2\"<\/a><\/p>\n
Then using the Rectangle tool we add background<\/p>\n
\"background\"<\/a><\/p>\n
and we use the\u00a0Text tool to add\u00a0text.<\/p>\n
\"menuItem\"<\/a><\/p>\n
2.3\u00a0Create symbols and animate them<\/h5>\n
Now our menu item looks complete and we convert it to a symbol and start animating it.<\/p>\n
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.<\/p>\n
\"corners\"<\/a><\/p>\n
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.<\/p>\n
\"stop\"<\/a><\/p>\n
To achieve this we first add a trigger at the end of the initial animation with the following code which causes it to stop:<\/p>\n
this.stop();<\/pre>\n
Then we choose a later time on the timeline and we create there our hover animation.<\/p>\n
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.<\/p>\n
\"red\"<\/a><\/p>\n
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.<\/p>\n
\"mouseenter\"<\/a><\/p>\n
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. \u00a0Now our menu item symbol is complete and animated.<\/p>\n
We duplicate it in order to create the rest of the menu labels and the menu is now complete.<\/p>\n
\"wholeMenu\"<\/a><\/p>\n
2.4\u00a0Add\u00a0additional\u00a0interactivity with the\u00a0Coherent Labs Animation Framework<\/a>\u00a0and GSAP<\/h5>\n
To enhance the functionality of the menu we create animation which moves the menu items on mouse scroll.<\/p>\n
To achieve this we use the Coherent Labs Animation Framework<\/a><\/strong> which is based on GSAP<\/a>.<\/p>\n
First we add the JavaScript libraries:<\/p>\n
<script src=\"js\/gsap\/TweenMax.js\"><\/script>\r\n<script src=\"js\/gsap\/TimelineMax.js\"><\/script>\r\n<script src=\"js\/coherent_animations.js\"><\/script>\r\n<\/pre>\n
Then we add the following simple script that will listen for mouse wheel events:<\/p>\n
$(function() {\r\n\r\n  var $scene = $('.center-wrapper');\r\n  var $stage = $('#Stage');\r\n\r\n  $scene.on(\"mousewheel\", function MouseWheelHandler(e) {\r\n    var $elements = $(\".elements\");\r\n    var $lastChild = $elements.last();\r\n    var $firstChild = $elements.first();\r\n    if (e.deltaY != -1) {\r\n      if (!TweenMax.isTweening($stage)) {\r\n        $stage.prepend($lastChild);\r\n        $stage.css('top', '-330px');\r\n        TweenMax.to($stage, 0.3, {top: -110, ease:Sine.easeIn});\r\n      }\r\n    } else {\r\n      if (!TweenMax.isTweening($stage)) {\r\n        $stage.append($firstChild);\r\n        $stage.css('top', '110px');\r\n        TweenMax.to($stage, 0.3, {top: -110, ease:Sine.easeIn});\r\n      }\r\n    }\r\n  });\r\n});<\/pre>\n
The script first checks if the scroll was moved up or down,<\/p>\n
e.deltaY != -1<\/pre>\n
then it moves the first and the last menu item to bottom and top accordingly using jQuery’s prepend and append functions.<\/p>\n
Lastly, it animates the whole stage using GSAP’s TweenMax:<\/p>\n
TweenMax.to($stage, 0.3, {top: -110, ease:Sine.easeIn});<\/pre>\n
Now our HTML is complete.<\/p>\n
The only thing that remains is to set the URL’s of the Coherent UI components to the previously created HTML.<\/p>\n
\"setURl\"<\/a><\/p>\n
And here’s the finished menu:<\/p>\n
\"finishedAll\"<\/a><\/p>\n
and sample video:<\/p>\n
Hristo<\/p>\n","protected":false},"excerpt":{"rendered":"
Hey everybody, In part two of the 3D hologram menu tutorial\u00a0we’ll create the HTML content for the menu using\u00a0Adobe Edge Animate and the Coherent Labs Animation Framework. Part 1 is available HERE On the image above you can see the finished menu. In part 1 of the tutorial we mapped the Coherent UI views on […]<\/p>\n","protected":false},"author":18,"featured_media":9963,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[408],"tags":[],"yoast_head":"\n3D HOLOGRAM MENU TUTORIAl PART 2 - Adobe Edge Animate - Coherent Labs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3D HOLOGRAM MENU TUTORIAl PART 2 - Adobe Edge Animate - Coherent Labs\" \/>\n<meta property=\"og:description\" content=\"Hey everybody, In part two of the 3D hologram menu tutorial\u00a0we’ll create the HTML content for the menu using\u00a0Adobe Edge Animate and the Coherent Labs Animation Framework. Part 1 is available HERE On the image above you can see the finished menu. In part 1 of the tutorial we mapped the Coherent UI views on […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/\" \/>\n<meta property=\"og:site_name\" content=\"Coherent Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CoherentLabs\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-25T09:45:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-10T12:00:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/coherent-labs.com\/posts\/wp-content\/uploads\/2014\/11\/finishedAll.png\" \/>\n\t<meta property=\"og:image:width\" content=\"915\" \/>\n\t<meta property=\"og:image:height\" content=\"541\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alexandra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CoherentLabs\" \/>\n<meta name=\"twitter:site\" content=\"@CoherentLabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexandra\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/\",\"url\":\"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/\",\"name\":\"3D HOLOGRAM MENU TUTORIAl PART 2 - Adobe Edge Animate - Coherent Labs\",\"isPartOf\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/#website\"},\"datePublished\":\"2014-11-25T09:45:26+00:00\",\"dateModified\":\"2017-11-10T12:00:12+00:00\",\"author\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791\"},\"breadcrumb\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/coherent-labs.com\/posts\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3D HOLOGRAM MENU TUTORIAl PART 2 – Adobe Edge Animate\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/#website\",\"url\":\"https:\/\/coherent-labs.com\/posts\/\",\"name\":\"Coherent Labs\",\"description\":\"Cross-Platform Game UI Middleware\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/coherent-labs.com\/posts\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791\",\"name\":\"Alexandra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/687476ba742eac5c6da76b305bc4004b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/687476ba742eac5c6da76b305bc4004b?s=96&d=mm&r=g\",\"caption\":\"Alexandra\"},\"url\":\"https:\/\/coherent-labs.com\/posts\/author\/alexandra\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3D HOLOGRAM MENU TUTORIAl PART 2 - Adobe Edge Animate - Coherent Labs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/","og_locale":"en_US","og_type":"article","og_title":"3D HOLOGRAM MENU TUTORIAl PART 2 - Adobe Edge Animate - Coherent Labs","og_description":"Hey everybody, In part two of the 3D hologram menu tutorial\u00a0we’ll create the HTML content for the menu using\u00a0Adobe Edge Animate and the Coherent Labs Animation Framework. Part 1 is available HERE On the image above you can see the finished menu. In part 1 of the tutorial we mapped the Coherent UI views on […]","og_url":"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/","og_site_name":"Coherent Labs","article_publisher":"https:\/\/www.facebook.com\/CoherentLabs\/","article_published_time":"2014-11-25T09:45:26+00:00","article_modified_time":"2017-11-10T12:00:12+00:00","og_image":[{"width":915,"height":541,"url":"https:\/\/coherent-labs.com\/posts\/wp-content\/uploads\/2014\/11\/finishedAll.png","type":"image\/png"}],"author":"Alexandra","twitter_card":"summary_large_image","twitter_creator":"@CoherentLabs","twitter_site":"@CoherentLabs","twitter_misc":{"Written by":"Alexandra","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/","url":"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/","name":"3D HOLOGRAM MENU TUTORIAl PART 2 - Adobe Edge Animate - Coherent Labs","isPartOf":{"@id":"https:\/\/coherent-labs.com\/posts\/#website"},"datePublished":"2014-11-25T09:45:26+00:00","dateModified":"2017-11-10T12:00:12+00:00","author":{"@id":"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791"},"breadcrumb":{"@id":"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/coherent-labs.com\/posts\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/coherent-labs.com\/posts\/"},{"@type":"ListItem","position":2,"name":"3D HOLOGRAM MENU TUTORIAl PART 2 – Adobe Edge Animate"}]},{"@type":"WebSite","@id":"https:\/\/coherent-labs.com\/posts\/#website","url":"https:\/\/coherent-labs.com\/posts\/","name":"Coherent Labs","description":"Cross-Platform Game UI Middleware","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/coherent-labs.com\/posts\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791","name":"Alexandra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/687476ba742eac5c6da76b305bc4004b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/687476ba742eac5c6da76b305bc4004b?s=96&d=mm&r=g","caption":"Alexandra"},"url":"https:\/\/coherent-labs.com\/posts\/author\/alexandra\/"}]}},"_links":{"self":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts\/4966"}],"collection":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/comments?post=4966"}],"version-history":[{"count":4,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts\/4966\/revisions"}],"predecessor-version":[{"id":10032,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts\/4966\/revisions\/10032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/media\/9963"}],"wp:attachment":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/media?parent=4966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/categories?post=4966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/tags?post=4966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}