{"id":14312,"date":"2018-01-17T16:17:22","date_gmt":"2018-01-17T16:17:22","guid":{"rendered":"https:\/\/coherent-labs.com\/?p=14312"},"modified":"2018-01-18T10:58:28","modified_gmt":"2018-01-18T10:58:28","slug":"create-motion-path-animation-animate","status":"publish","type":"post","link":"https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-animate\/","title":{"rendered":"How to create motion path animation in Animate"},"content":{"rendered":"

The following tutorial will show you how to create animated UI elements along a predefined path in Adobe Animate<\/a>.<\/p>\n

The most important points of this tutorial are to learn:<\/p>\n

    \n
  1. How to create and use Motion path<\/li>\n
  2. How to change the easing of the animation to make the movement more natural.<\/li>\n<\/ol>\n

    Here is how the final variant will look.<\/p>\n

    \"\"<\/p>\n

    For this tutorial, we used Adobe Illustrator<\/a> to create the vector assets for the scene. We decided to do so because it\u2019s a vector based program like Animate and it’s easy to exchange assets between them.<\/p>\n

    We start off by creating a scene that consists of a road with two turns and a car for the purpose of the tutorial.<\/p>\n

    \"animate<\/b><\/h3>\n

    <\/h3>\n

    Step 1 – Import the assets in Animate<\/b><\/h3>\n

    Import vector based background asset to Animate on the first layer.<\/p>\n

    \"animated<\/p>\n

    \"adobe<\/p>\n

    Create a second layer and import the car. In our case, the car will be the only element that will be animated.<\/p>\n

    \"animated<\/p>\n

    Drag the car to the position that you want to start the animation from.<\/p>\n

    \"adobe<\/p>\n

    <\/h3>\n

    Step 2 – Preparing for animation <\/b><\/h3>\n

    Select the frame on the timeline that you want to be the last frame of the animation.<\/p>\n

    Then right click <\/strong>-> select Insert Keyframe<\/strong>. Let’s do it 5s.<\/p>\n

    \"\"<\/p>\n

    Then move the car to that point in the scene where you want the animation to end.<\/p>\n

    \"\"<\/p>\n

    <\/h3>\n

    Step 3<\/b> – Create motion path.<\/b><\/h3>\n

    Now we have the first frame and the last frame as well as the position of the car. It’s time to create a motion path to guide the car.<\/p>\n

    Right click on the layer<\/strong> (car) -> Add Classic Motion Guide<\/strong><\/p>\n

    \"\"<\/p>\n

    Select the Pen Tool<\/strong> from the Tools panel<\/strong>.<\/p>\n

    \"\"<\/b><\/p>\n

    Create a guide<\/strong>.<\/p>\n

    The guide should follow the road to make the car move properly.<\/p>\n

    \"\"<\/p>\n

     <\/p>\n

    Note:<\/strong> Make sure the center point of the car is at the start and end of the line.<\/p>\n

    \"creating<\/b><\/h3>\n

    <\/h3>\n

    Step 4 – Animating<\/b><\/h3>\n

    Then right-click on the layer<\/strong> (car) and click Create Classic tween<\/strong> to make the car follow the path.<\/p>\n

    \"adobe<\/b><\/h3>\n

    <\/h3>\n

    Step 5 – Add animation easing<\/b><\/h3>\n

    Let’s make the animation smooth and more natural.<\/p>\n

    When we already have moved to the path. It’s time to play with the properties of tweening.<\/p>\n

    Go to the Properties panel<\/strong> and make sure the\u00a0Snap<\/strong> and Orient<\/strong>\u00a0path options are checked.<\/p>\n

    \"\"<\/p>\n

    By adding a custom easing to the animation, we will make the movement of the car look more natural.<\/p>\n

    Properties<\/strong> -> Tweening<\/strong> -> Easing<\/strong> -> Edit easing<\/strong><\/p>\n

    \"animated<\/p>\n

    Then click on Custom <\/strong>-> <\/b>New<\/strong><\/p>\n

    \"UI<\/p>\n

    \"creating<\/p>\n

    The Custom ease graph represents the degree of motion over time. The horizontal axis represents the frames and the vertical axis represents the tween’s percentage of change. These curves can be made more complex by adding additional anchor points along the length of the path. Alternatively, we can adjust the already existing anchor point at each end of the line.<\/p>\n

    In our case, we want the movement of the car to slow down before it turns and to speed upon exiting. From the first frame, the movement speeds up a bit and moves the curve to a higher percentage. Then, it slows down around the 25th frame when the car is getting to the first turn. Afterwards, we keep the curve in an almost straight position so the car moves at a constant speed until the end of the right turn. This time it is a 100 frames. It starts to speed up by changing the position of the curve on the opposite side.<\/p>\n

    \"creating<\/p>\n

    And here’s the finished animation!<\/p>\n

    \"\"<\/p>\n

    That completes the tutorial.<\/p>\n

    We would love to know if you found this tutorial helpful! Let us know by leaving a comment below or sharing the post on Twitter<\/a>!<\/p>\n

    There are more tutorials coming your way! Stay tuned and follow our blog<\/a>.<\/p>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    The following tutorial will show you how to create animated UI elements along a predefined path in Adobe Animate. The most important points of this tutorial are to learn: How to create and use Motion path How to change the easing of the animation to make the movement more natural. Here is how the final […]<\/p>\n","protected":false},"author":18,"featured_media":14355,"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":[406,1],"tags":[245,247,357,182,418,229,231,417],"yoast_head":"\nHow to create motion paths in Adobe Animate - tutorial<\/title>\n<meta name=\"description\" content=\"Learn how to create animated UI elements with predefined path. Our tutorial shows an example of using motion paths in Adobe Animate.\" \/>\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\/create-motion-path-animation-animate\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create motion paths in Adobe Animate - tutorial\" \/>\n<meta property=\"og:description\" content=\"Learn how to create animated UI elements with predefined path. Our tutorial shows an example of using motion paths in Adobe Animate.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-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=\"2018-01-17T16:17:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-18T10:58:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/coherent-labs.com\/posts\/wp-content\/uploads\/2018\/01\/Animation_748-x-216_2.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"216\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-animate\/\",\"url\":\"https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-animate\/\",\"name\":\"How to create motion paths in Adobe Animate - tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/#website\"},\"datePublished\":\"2018-01-17T16:17:22+00:00\",\"dateModified\":\"2018-01-18T10:58:28+00:00\",\"author\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791\"},\"description\":\"Learn how to create animated UI elements with predefined path. Our tutorial shows an example of using motion paths in Adobe Animate.\",\"breadcrumb\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-animate\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-animate\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-animate\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/coherent-labs.com\/posts\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create motion path animation in 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":"How to create motion paths in Adobe Animate - tutorial","description":"Learn how to create animated UI elements with predefined path. Our tutorial shows an example of using motion paths in Adobe Animate.","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\/create-motion-path-animation-animate\/","og_locale":"en_US","og_type":"article","og_title":"How to create motion paths in Adobe Animate - tutorial","og_description":"Learn how to create animated UI elements with predefined path. Our tutorial shows an example of using motion paths in Adobe Animate.","og_url":"https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-animate\/","og_site_name":"Coherent Labs","article_publisher":"https:\/\/www.facebook.com\/CoherentLabs\/","article_published_time":"2018-01-17T16:17:22+00:00","article_modified_time":"2018-01-18T10:58:28+00:00","og_image":[{"url":"https:\/\/coherent-labs.com\/posts\/wp-content\/uploads\/2018\/01\/Animation_748-x-216_2.gif","width":768,"height":216,"type":"image\/gif"}],"author":"Alexandra","twitter_card":"summary_large_image","twitter_creator":"@CoherentLabs","twitter_site":"@CoherentLabs","twitter_misc":{"Written by":"Alexandra","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-animate\/","url":"https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-animate\/","name":"How to create motion paths in Adobe Animate - tutorial","isPartOf":{"@id":"https:\/\/coherent-labs.com\/posts\/#website"},"datePublished":"2018-01-17T16:17:22+00:00","dateModified":"2018-01-18T10:58:28+00:00","author":{"@id":"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791"},"description":"Learn how to create animated UI elements with predefined path. Our tutorial shows an example of using motion paths in Adobe Animate.","breadcrumb":{"@id":"https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-animate\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-animate\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/coherent-labs.com\/posts\/create-motion-path-animation-animate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/coherent-labs.com\/posts\/"},{"@type":"ListItem","position":2,"name":"How to create motion path animation in 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\/14312"}],"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=14312"}],"version-history":[{"count":19,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts\/14312\/revisions"}],"predecessor-version":[{"id":14357,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts\/14312\/revisions\/14357"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/media\/14355"}],"wp:attachment":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/media?parent=14312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/categories?post=14312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/tags?post=14312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}