{"id":76,"date":"2019-01-24T16:38:05","date_gmt":"2019-01-24T16:38:05","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-s2019\/?page_id=76"},"modified":"2019-07-02T19:58:30","modified_gmt":"2019-07-02T19:58:30","slug":"adobe-animate-adding-and-editing-nested-symbol-instances","status":"publish","type":"page","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/adobe-animate-adding-and-editing-nested-symbol-instances\/","title":{"rendered":"Adobe Animate: Adding and editing nested Symbol instances"},"content":{"rendered":"<p>Once you have a nested symbol (see <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/adobe-animate-walk-and-blink-cycles\/\">Adobe Animate: Walks and blink cycles<\/a>), you can add several instances of it on the Stage and edit each instance to create an interesting composition.<\/p>\n<p>You can watch the finished example below and download the .fla file\u00a0<a href=\"https:\/\/drive.google.com\/file\/d\/15ql_hXcTHQn4WF-rW1bDntv53YXH2U8b\/view?usp=sharing\">here<\/a>:<\/p>\n<p><a href=\"https:\/\/vimeo.com\/282708626\">https:\/\/vimeo.com\/282708626<\/a><\/p>\n<p><strong>Creating a nested symbol<\/strong><\/p>\n<p>The principles covered in this tutorial can be applied to any nested symbols. Create a nested symbol or download <a href=\"https:\/\/drive.google.com\/file\/d\/1F7Dld4uYynhKZE16nBmzXtERpv6SpU_V\/view?usp=sharing\">this example file<\/a>of a character (saved as a Graphic Symbol) blinking and waving its hand.<\/p>\n<figure id=\"attachment_321\" aria-describedby=\"caption-attachment-321\" style=\"width: 1210px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-321\" src=\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-01-at-12-15-52-pm.png\" alt=\"Screen Shot 2018-08-01 at 12.15.52 PM\" width=\"1210\" height=\"730\" \/><figcaption id=\"caption-attachment-321\" class=\"wp-caption-text\">Starting file with a character\/nested Symbol<\/figcaption><\/figure>\n<p><strong>Adding an instance to the Stage<\/strong><\/p>\n<p>Once a Symbol had been created, it is stored in the Library and can be used to add new instances to the Stage.<\/p>\n<p>But first, we&#8217;ll create a new floor layer for the new instance:<\/p>\n<ul>\n<li>Make sure you are on the main Timeline<\/li>\n<li>Add a new layer and name it (i.e:&#8221;floor_2&#8243;) and create a new floor line on it<\/li>\n<\/ul>\n<p>Now, let&#8217;s add our second instance:<\/p>\n<ul>\n<li>Add a new layer and name it (i.e: square_2). Drag and drop the Symbol called &#8220;Square&#8221; from the Library to the Stage and position it on the new floor line.<\/li>\n<\/ul>\n<figure id=\"attachment_324\" aria-describedby=\"caption-attachment-324\" style=\"width: 604px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-324\" src=\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-01-at-12-19-32-pm.png\" alt=\"Screen Shot 2018-08-01 at 12.19.32 PM\" width=\"604\" height=\"592\" \/><figcaption id=\"caption-attachment-324\" class=\"wp-caption-text\">Square symbol in the Library panel<\/figcaption><\/figure>\n<figure id=\"attachment_322\" aria-describedby=\"caption-attachment-322\" style=\"width: 1210px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-322\" src=\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-01-at-12-19-15-pm.png\" alt=\"Screen Shot 2018-08-01 at 12.19.15 PM\" width=\"1210\" height=\"730\" \/><figcaption id=\"caption-attachment-322\" class=\"wp-caption-text\">New floor and Square Symbol instance<\/figcaption><\/figure>\n<p><strong>Staggering the loops<\/strong><\/p>\n<p>If we preview this animation, we&#8217;ll notice that both instances are perfectly synchronized. We&#8217;ll stagger the loops to add interest:<\/p>\n<ul>\n<li>Click once on the instance you just created<\/li>\n<li>In the Properties Window, toggle the <em>Looping<\/em>Window. Set the <em>Options<\/em>dropdown to <em>Loop<\/em>and the <em>First<\/em>[frame] number to the point of the loop you want this instance to start from (i.e: 13)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-323\" src=\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-01-at-12-23-52-pm.png\" alt=\"Screen Shot 2018-08-01 at 12.23.52 PM\" width=\"602\" height=\"248\" \/><\/p>\n<ul>\n<li>Preview your animation.<\/li>\n<\/ul>\n<p><strong>Editing an instance&#8217;s color<\/strong><\/p>\n<p>We can also differentiate the two instances by changing the new one&#8217;s color:<\/p>\n<ul>\n<li>Click once on the instance<\/li>\n<li>In the properties panel, toggle the <em>Color Effect<\/em>Window and select <em>Advanced<\/em>in the dropdown menu<\/li>\n<li>Play with the value of Green, Red and Blue until you are satisfied with the new color<\/li>\n<\/ul>\n<figure id=\"attachment_325\" aria-describedby=\"caption-attachment-325\" style=\"width: 574px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-325\" src=\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-01-at-12-26-42-pm.png\" alt=\"Screen Shot 2018-08-01 at 12.26.42 PM\" width=\"574\" height=\"318\" \/><figcaption id=\"caption-attachment-325\" class=\"wp-caption-text\">Color Effect Window<\/figcaption><\/figure>\n<figure id=\"attachment_326\" aria-describedby=\"caption-attachment-326\" style=\"width: 1210px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-326\" src=\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-01-at-12-43-57-pm.png\" alt=\"Screen Shot 2018-08-01 at 12.43.57 PM\" width=\"1210\" height=\"730\" \/><figcaption id=\"caption-attachment-326\" class=\"wp-caption-text\">The instance&#8217;s new color<\/figcaption><\/figure>\n<p><strong>Editing an\u00a0instance&#8217;s\u00a0size<\/strong><\/p>\n<p>Another way of differentiating instances is to shift their scale, This can also create a sense of depth:<\/p>\n<ul>\n<li>Click once on the instance<\/li>\n<li>Select the Free Transform Tool (Q)<\/li>\n<li>Hold <i>Shift <\/i>to preserve the character\u2019s aspect ratio, and click and drag to scale it up or down.<\/li>\n<li>Reposition the character on the floor line if necessary<\/li>\n<li>Preview your animation<\/li>\n<\/ul>\n<figure id=\"attachment_327\" aria-describedby=\"caption-attachment-327\" style=\"width: 1212px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-327\" src=\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-01-at-12-43-46-pm.png\" alt=\"Screen Shot 2018-08-01 at 12.43.46 PM\" width=\"1212\" height=\"730\" \/><figcaption id=\"caption-attachment-327\" class=\"wp-caption-text\">Instance after using the Free Transform Tool to change its scale<\/figcaption><\/figure>\n<p>You may repeat this process as many times as you want to create even more instances.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Once you have a nested symbol (see Adobe Animate: Walks and blink cycles), you can add several instances of it on the Stage and edit each instance to create an interesting composition. You can watch the finished example below and download the .fla file\u00a0here: https:\/\/vimeo.com\/282708626 Creating a nested symbol The principles covered in this tutorial &hellip; <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/adobe-animate-adding-and-editing-nested-symbol-instances\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Adobe Animate: Adding and editing nested Symbol instances&#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-76","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/pages\/76","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=76"}],"version-history":[{"count":5,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/pages\/76\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/pages\/76\/revisions\/217"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/media?parent=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}