{"id":88,"date":"2019-01-24T16:40:15","date_gmt":"2019-01-24T16:40:15","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-s2019\/?page_id=88"},"modified":"2019-07-02T19:58:30","modified_gmt":"2019-07-02T19:58:30","slug":"adobe-animate-tweening","status":"publish","type":"page","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/adobe-animate-tweening\/","title":{"rendered":"Adobe Animate: Tweening"},"content":{"rendered":"<p><strong>Tweening<\/strong><\/p>\n<p>The term Tweening comes from &#8220;in-betweening&#8221;, it refers to the process of creating\u00a0smooth transitions from one drawing to another to create the illusion of motion. There are 3 types of Tween in Animate: Motion, Classic and Shape Tweening.\u00a0You can find out more about the difference between them<a href=\"https:\/\/helpx.adobe.com\/animate\/using\/differences-between-motion-and-classic-tweens.html#Motiontweensversusclassictweens\">here<\/a>. We will mainly be using Classic and Shape Tweens in this class.<\/p>\n<p>You can watch the finished example below and download the .fla file <a href=\"https:\/\/drive.google.com\/file\/d\/1p6SsAKbWx23SZSkiygMZNms2pGxlr1w1\/view?usp=sharing\">here<\/a>:<\/p>\n<p><a href=\"https:\/\/vimeo.com\/282334538\">https:\/\/vimeo.com\/282334538<\/a><\/p>\n<p><strong>Classic Tweens<\/strong><\/p>\n<p>Classic Tweens can only be applied to symbols. It can be used to tween properties such as position, scale, rotation, color\u00a0effects such as tint and alpha, among others. To create a classic tween:<\/p>\n<ul>\n<li>Drag an instance of a symbol to an empty Keyframe in a layer.<\/li>\n<li>Position the playback head where you want to end the tween sequence<\/li>\n<li>Right click on the layer and select <em>Insert Keyframe<\/em>.<\/li>\n<li>Click and drag on the instance to\u00a0change its position.<\/li>\n<li>Right-click on the Timeline, between the two Keyframes and select <em>Create Classic Tween.\u00a0<\/em>When you test the movie, you will see the element smoothly transition from one Keyframe to the other.<\/li>\n<\/ul>\n<figure id=\"attachment_100\" aria-describedby=\"caption-attachment-100\" style=\"width: 1330px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-100\" src=\"https:\/\/mmp260.files.wordpress.com\/2018\/06\/screen-shot-2018-06-04-at-3-23-00-pm.png\" alt=\"Screen Shot 2018-06-04 at 3.23.00 PM\" width=\"1330\" height=\"62\" \/><figcaption id=\"caption-attachment-100\" class=\"wp-caption-text\">A Classic Tween will appear as blue with an arrow on the Timeline<\/figcaption><\/figure>\n<p><strong>Easing<\/strong><\/p>\n<p>The resulting motion is perfectly regular, thus feeling a bit mechanical. One common way of creating more interesting\/realistic motion is applying &#8220;ease-in and ease out&#8221; on an existing motion path:<\/p>\n<ul>\n<li>Click on the Tweened area of the Timeline<\/li>\n<li>Toggle the\u00a0Tweening tab within the\u00a0Properties<em>\u00a0<\/em>panel and click on the little <em>Edit Easing<\/em>icon.<\/li>\n<li>Add 2 points (1 towards the beginning and one towards the end) to create an S shape (the flatter the line is, the slower the motion will be &#8211; we want the motion to be slow at the beginning and end of the motion path).<\/li>\n<\/ul>\n<figure id=\"attachment_103\" aria-describedby=\"caption-attachment-103\" style=\"width: 576px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-103\" src=\"https:\/\/mmp260.files.wordpress.com\/2018\/06\/screen-shot-2018-06-04-at-3-13-43-pm1.png\" alt=\"Screen Shot 2018-06-04 at 3.13.43 PM\" width=\"576\" height=\"176\" \/><figcaption id=\"caption-attachment-103\" class=\"wp-caption-text\">The pencil &#8220;Edit Easing&#8221; icon<\/figcaption><\/figure>\n<figure id=\"attachment_133\" aria-describedby=\"caption-attachment-133\" style=\"width: 1124px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-133\" src=\"https:\/\/mmp260.files.wordpress.com\/2018\/06\/screen-shot-2018-06-13-at-2-21-52-pm.png\" alt=\"Screen Shot 2018-06-13 at 2.21.52 PM\" width=\"1124\" height=\"884\" \/><figcaption id=\"caption-attachment-133\" class=\"wp-caption-text\">The edited motion path<\/figcaption><\/figure>\n<p><strong>Guide Layer<\/strong><\/p>\n<p>In cases where the motion isn&#8217;t a straight path but a curve or more complex shape, you must use a Guide Layer to define that path and pair it with the element which is supposed to follow it.<\/p>\n<ul>\n<li>Create the element that will follow the path on a new layer and name it.<\/li>\n<li>Create a new layer for the guide and name it (i.e: nameOfElement_guide) and draw the path (you may use the pen tool, line tool, or pencil tool etc.). Make sure the line is very thin (0.1pt or Style <em>Hairline<\/em>)<\/li>\n<li>Make sure there are corresponding Keyframes on both layers at the beginning and end of the motion<\/li>\n<li>Right-click in the area between the two Keyframes in the Timeline of the element and select <em>Create Classic Tween<\/em><\/li>\n<li>Right-click on the name of the guide layer and select <em>Guide<\/em><\/li>\n<li>Select the Free Transform Tool <em>(Q)<\/em>, activate the Snap to Objects icon (the little magnet at the bottom of the Tools panel (or go to\u00a0<em>View &gt; Snapping &gt; Snap to Objects)<\/em><\/li>\n<li>Go to the first Keyframe for the path and click and drag the element so that its anchor point snaps to the beginning of the path.<\/li>\n<li>Go to the last Keyframe for the path and click and drag the element so that its anchor point snaps to the end of the path.<\/li>\n<li>Click and drag the element layer to nest it under the Guide layer<\/li>\n<li>Preview to see the element follow the path<\/li>\n<li>Turn the eye-icon of the Guide layer off to hide it.<\/li>\n<\/ul>\n<figure id=\"attachment_121\" aria-describedby=\"caption-attachment-121\" style=\"width: 1398px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-121\" src=\"https:\/\/mmp260.files.wordpress.com\/2018\/06\/screen-shot-2018-06-07-at-3-20-38-pm.png\" alt=\"Screen Shot 2018-06-07 at 3.20.38 PM\" width=\"1398\" height=\"94\" \/><figcaption id=\"caption-attachment-121\" class=\"wp-caption-text\">The &#8220;sun&#8221; layer is nested under a Guide layer called &#8220;sun-guide&#8221;. The latter is hidden from view and only serves as a reference for the &#8220;sun&#8221; layer&#8217;s motion.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tweening The term Tweening comes from &#8220;in-betweening&#8221;, it refers to the process of creating\u00a0smooth transitions from one drawing to another to create the illusion of motion. There are 3 types of Tween in Animate: Motion, Classic and Shape Tweening.\u00a0You can find out more about the difference between themhere. We will mainly be using Classic and &hellip; <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/adobe-animate-tweening\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Adobe Animate: Tweening&#8221;<\/span><\/a><\/p>\n","protected":false},"author":21,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"class_list":["post-88","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/pages\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/comments?post=88"}],"version-history":[{"count":5,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/pages\/88\/revisions"}],"predecessor-version":[{"id":188,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/pages\/88\/revisions\/188"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/media?parent=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}