{"id":5461,"date":"2023-12-23T12:42:11","date_gmt":"2023-12-23T12:42:11","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?p=5461"},"modified":"2024-01-11T21:35:01","modified_gmt":"2024-01-11T21:35:01","slug":"rhythm","status":"publish","type":"post","link":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/","title":{"rendered":"Rhythm"},"content":{"rendered":"\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"420\" data-attachment-id=\"17\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/manraytrans\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" data-orig-size=\"420,420\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"manraytrans\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" alt=\"\" class=\"wp-image-17\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\">4D media<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/artmachine\/\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"420\" data-attachment-id=\"17\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/manraytrans\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" data-orig-size=\"420,420\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"manraytrans\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" alt=\"\" class=\"wp-image-17\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/artmachine\/\">artMachine<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"430\" data-attachment-id=\"3874\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/artmachine\/rhythm\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/rhythm.jpg\" data-orig-size=\"430,430\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"rhythm\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/rhythm.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/rhythm.jpg\" alt=\"\" class=\"wp-image-3874\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/rhythm.jpg 430w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/rhythm-300x300.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/rhythm-150x150.jpg 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/rhythm-100x100.jpg 100w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong>rhythm<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/div>\n<label for=\"ez-toc-cssicon-toggle-item-69f51ad782681\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f51ad782681\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#Rhythm_modulating_Symbols_on_the_Timeline\" >Rhythm: modulating Symbols on the Timeline<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#Early_experiments\" >Early experiments<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#Visualizing_time_keyframes_shape_tween\" >Visualizing time, keyframes, shape tween<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#Adding_a_layer\" >Adding a layer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#Inserting_a_keyframe\" >Inserting a keyframe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#Creating_a_Shape_Tween\" >Creating a Shape Tween<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#Modifying_the_frame_rate_adjusts_the_speed_of_the_beat\" >Modifying the frame rate adjusts the speed of the beat<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#Visualizing_tempo\" >Visualizing tempo<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#Increasing_the_length_of_the_timeline\" >Increasing the length of the timeline<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#Reshaping_circle_rt\" >Reshaping circle_rt<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#Basic_bouncing_ball\" >Basic bouncing ball<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#Publish\" >Publish<\/a><\/li><\/ul><\/nav><\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:100%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/rhythm23.zip\">Download the .zip file &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Rhythm_modulating_Symbols_on_the_Timeline\"><\/span>Rhythm: modulating Symbols on the Timeline<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Rhythm<\/strong> is an essential consideration in the production of motion graphics. One of the most common and simple time signatures is 4\/4, where four beats are evenly heard over one bar of music and each note is one beat. We&#8217;re all familiar with House music&#8217;s 4\/4 beat. This method of counting time can be applied to animation. In House music, the beat is counted in cycles of eight. The rhythm is established and peaks at the fourth beat. It reduces in the next four beats, in preparation for the next set of eight beats.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"430\" data-attachment-id=\"5463\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/rhythm-2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/rhythm.jpg\" data-orig-size=\"430,430\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"rhythm\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/rhythm.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/rhythm.jpg\" alt=\"\" class=\"wp-image-5463\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/rhythm.jpg 430w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/rhythm-300x300.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/rhythm-150x150.jpg 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/rhythm-100x100.jpg 100w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>Frame from&nbsp;Viking Eggeling&#8217;s <strong>Symphonie Diagonale<\/strong>, 1921-4<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>In this&nbsp;<strong>Bodyrox<\/strong>&nbsp;sample&nbsp;from Wikipedia at right, the syncopation of the synthesizer melody only starts to make sense when you can hear the four-on-the-floor kick once the rhythm track starts. Count off 8 beats &#8220;from the top&#8221; and you&#8217;ll be able to visualize the patterns discussed in the exercise.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-audio aligncenter\"><audio controls src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Bodyrox-YeahYeah-DRamirezDub-sample.ogg\"><\/audio><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>One of the key concepts in understanding animation is visualizing time. Whether you are keeping track of the musical score or graphic frames on a timeline, counting time is important and &#8220;seeing&#8221; the count is a necessity.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Early_experiments\"><\/span>Early experiments<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Early experimental animation kept time visually with abstract shapes. Rhythm is the topic of Viking Eggeling\u2019s film&nbsp;<em>Symphonie Diagonale<\/em> (1921-4). Lines, curves, and forms play in rhythm. Pay attention to the formal design relationships while watching this animation. Watch for balance and movement, form and negative space, and the expressiveness of a line. Notice how the formal balance changes over time and shapes change in size and value. Rhythm is used to create a sense of predictability within the abstraction, and departures from that predictability create drama and focus.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div style=\"aspect-ratio: 4 \/ 3;\"><iframe src=\"https:\/\/archive.org\/embed\/SymphonieDiagonale\"width=\"100%\" height=\"100%\" frameborder=\"0\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" allowfullscreen><\/iframe><\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>Viking Eggeling&#8217;s <strong>Symphonie Diagonale<\/strong>, 1921-4<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Consider formal design properties of balance and movement while watching Oskar Fischinger&#8217;s animation, <em>Spirals<\/em>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div style=\"aspect-ratio: 16 \/ 9;\"><iframe src=\"https:\/\/player.vimeo.com\/video\/73604876?h=5484ef4f4b&#038;title=0&#038;byline=0&#038;portrait=0\" style=\"width:100%;height:100%;\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>Oskar Fischinger, <strong>Spirals<\/strong>, 1926<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Harry Smith&#8217;s homage to Fischinger remains abstract though it is even more layered and complicated. Notice the color harmonies and formal balance. Balance changes over time, shapes change in size and transparency. Rhythm is used to create a sense of predictability within the abstraction.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"aspect-ratio: 4 \/ 3;\"><iframe src=\"https:\/\/player.vimeo.com\/video\/240347841?h=04120c41f7&#038;title=0&#038;byline=0&#038;portrait=0\" style=\"width:100%;height:100%;\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>Harry Smith, <strong>No. 5: Circular Tensions, Homage to Oskar Fischinger &#8211; No. 7:&nbsp;Color Study<\/strong>, 1950-1952<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Visualizing_time_keyframes_shape_tween\"><\/span>Visualizing time, keyframes, shape tween<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Download the .zip file at the top of this title, and open it. Look for the <strong>rhythm.fla<\/strong> file, and open in <strong>Adobe Animate<\/strong>. Notice that the interface is somewhat similar to Dreamweaver. We&#8217;ll use this sample file to guide the  work below.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Now open a new file. Click on the button for <strong>HTML5 Canvas<\/strong> and change the size to 600 width and 400 height. Select <strong>Create<\/strong>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/?attachment_id=5486\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"887\" height=\"880\" data-attachment-id=\"5486\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/1801a\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1801a.png\" data-orig-size=\"887,880\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1801a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1801a.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1801a.png\" alt=\"\" class=\"wp-image-5486\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1801a.png 887w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1801a-300x298.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1801a-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1801a-768x762.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1801a-100x100.png 100w\" sizes=\"auto, (max-width: 887px) 100vw, 887px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Inside Animate, notice a Tool Palette, Color Picker, Properties and various other palettes that we can open and close from the Window Menu. The key difference between Animate and Dreamweaver is the timeline and playhead. The timeline is located at the bottom of the screen. Animate expresses the code keyframes and durations <em>graphically<\/em>, like a video editor. For visual thinkers, this is a great help!<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/?attachment_id=5487\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5487\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/1802b\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1802b.png\" data-orig-size=\"1680,1050\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1802b\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1802b-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1802b-1024x640.png\" alt=\"\" class=\"wp-image-5487\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1802b-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1802b-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1802b-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1802b-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1802b.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>By default, there is one empty layer and one empty frame. Double-click on<strong> Layer 1<\/strong> and name it <strong>line<\/strong>. In Animate, we make or place all of the art on the Canvas, while we insert all of the instructions about how we animate the art into frames on the Timeline. Draw a gray line in the bottom one-third of the stage. This line will serve as a baseline. Notice in the image below that the line is gray because the color selected for <strong>Stroke color<\/strong> is the gray hex value, #666666.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adding_a_layer\"><\/span>Adding a layer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Add a new layer by clicking on the <strong>Insert Layer<\/strong> button (a small square with a +) towards the bottom left of the <strong>Timeline Palette<\/strong>. Name it <strong>circle_ctr<\/strong>. When we highlight the new layer, this activates it. Draw a circle using the <strong>Oval Tool<\/strong> in the Canvas. Position the circle above the center of the baseline. The stroke of a shape is the line around the outside. The fill is the color inside the outline of the shape. It happens that when you make the circle, it creates a stroke object AND a fill object which are independent.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Use the Selection Tool to click on the stroke around the circle (in our example, the stroke is gray and the fill is dark red). Press DELETE on the keypad so the shape we make is a fill with no stroke.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"675\" height=\"323\" data-attachment-id=\"5478\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/18-03\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/18-03.png\" data-orig-size=\"675,323\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"18-03\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/18-03.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/18-03.png\" alt=\"\" class=\"wp-image-5478\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/18-03.png 675w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/18-03-300x144.png 300w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Inserting_a_keyframe\"><\/span>Inserting a keyframe<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>In the <strong>Timeline<\/strong>, click on frame 7 then click <strong>Menu: Insert &gt; Timeline &gt; Keyframe <\/strong>OR right-click on frame 7 and in the contextual menu choose <strong>Insert Keyframe<\/strong>. Keyframes are points in time where something on the Canvas changes. We often use keyframes to add or modify content. &#8220;Tweening&#8221; is animation terminology for drawing the shapes between two keyframes so that it seems as if one morphs into another. We often use Tweening to create motion. Animate creates both shape and motion tweens. We will explore shape tweens in this chapter and motion tweens in the next.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/?attachment_id=5489\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5489\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/1804a\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1804a.png\" data-orig-size=\"1680,1050\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1804a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1804a-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1804a-1024x640.png\" alt=\"\" class=\"wp-image-5489\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1804a-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1804a-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1804a-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1804a-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1804a.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Notice the keyframe, indicated in the Timeline by a black dot. Frames between keyframes are gray. The last frame before a keyframe is a gray rectangle. The playback head is a red rectangle over the frame number indicator at the top of the Timeline, with an accompanying red line stretched through all layers. At the bottom of the Timeline Palette, the frame number that the Playback Head rests upon is reported (in this instance, the number 7).<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/?attachment_id=5490\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5490\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/1805a\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1805a.png\" data-orig-size=\"3360,2100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1805a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1805a-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1805a-1024x640.png\" alt=\"\" class=\"wp-image-5490\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1805a-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1805a-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1805a-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1805a-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1805a-2048x1280.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Create another keyframe for <strong>circle_ctr<\/strong> on frame 13.<\/p>\n\n\n\n<p><br>Add frames for the layer containing the baseline. We do not need to add another keyframe, as the baseline will not change throughout the animation. Click on frame 12 on the <strong>line<\/strong> layer and select <strong>Insert &gt; Timeline &gt; Frame<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_a_Shape_Tween\"><\/span>Creating a Shape Tween<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Click on frame 7 on the <strong>circle_ctr<\/strong> layer then use the <strong>Rectangle Tool<\/strong> to draw a square over the red circle. Notice that we set the stroke color to none. You can try a different hue for the square as you used for the circle. In our sample we chose yellow.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/?attachment_id=5492\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5492\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/attachment\/1806\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1806.png\" data-orig-size=\"1680,1050\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1806\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1806-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1806-1024x640.png\" alt=\"\" class=\"wp-image-5492\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1806-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1806-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1806-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1806-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1806.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>In the Timeline, click once on frame 1, hold SHIFT, and click once on frame 7. This selects frames 1-7; notice how they highlight. Now click <strong>Menu: Insert > Shape Tween<\/strong> or right-click in the highlighted frames and in the contextual menu select <strong>Create Shape Tween<\/strong>. Animate will construct all of the frames between the keyframes to animate the content automatically.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/?attachment_id=5494\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5494\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/attachment\/1807\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807.png\" data-orig-size=\"1680,1050\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1807\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807-1024x640.png\" alt=\"\" class=\"wp-image-5494\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Click <strong>File &gt; Save As<\/strong> and save the <strong>.FLA<\/strong> file if you haven&#8217;t done this already.<\/p>\n\n\n\n<p><br>View or <strong>Test<\/strong> the animation by pressing CMD+RETURN or use <strong>Control &gt; Test Movie &gt; in Browser<\/strong>. You can open and play the file in your default browser. Testing the movie creates a pair of files: an .html file with an externally referenced .js file, the two together compile into a playable interactive understood in web browsers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modifying_the_frame_rate_adjusts_the_speed_of_the_beat\"><\/span>Modifying the frame rate adjusts the speed of the beat<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The animation created above is exactly one half second long. The frame rate determines the length of time that each frame is played. Dividing the number of frames used in the animation (the number of the last frame &#8211; 1) by the frame rate results in the duration of the animation. In our file, the frame rate is 24 frames per second (FPS), so (13 &#8211; 1)\/24 = 0.5 second. Since the frame rate is the same for the entire timeline, it is a property of the document. In this exercise we will modify the frame rate by using the <strong>Properties Palette<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>\u00a0Click on the stage, and notice the properties displayed in the Properties Palette on the right side. On this palette, find four tabs: <strong>Tool<\/strong>, <strong>Object<\/strong>, <strong>Frame<\/strong>, and <strong>Doc<\/strong>. Since frame rate is a document property, select <strong>Doc<\/strong>. Under the group <strong>Document Settings<\/strong>, click the arrow if contents are not visible, then find <strong>FPS<\/strong>, and change it to <strong>12<\/strong>. Doubling the frame rate will make the animation move twice as slow.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/1807b\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5500\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/1807b\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807b.png\" data-orig-size=\"1680,1050\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1807b\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807b-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807b-1024x640.png\" alt=\"\" class=\"wp-image-5500\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807b-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807b-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807b-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807b-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1807b.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p><strong>Test<\/strong> the file at this new frame rate. Open the .html file and note the slower speed. If you observe carefully you may even be able to detect individual frames a this slow rate. Then, return to the Animate file and change the FPS value back to 24.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Visualizing_tempo\"><\/span>Visualizing tempo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Create a new layer and name it <strong>circle_rt<\/strong>. Create a new circle on this layer. We created ours by copying the original circle, selecting the new layer, and pasting.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Click, hold and drag the new circle to the right of the first circle. Note the Snap guide that helps you align the tops of the two circles. You can turn these on or off in <strong>Menu: View &gt; Snap Align<\/strong>. In the <strong>Properties Palette<\/strong>, under the <strong>Object<\/strong> tab, click in the <strong>Color Palette<\/strong> change the color of the new circle.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/?attachment_id=5503\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5503\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/attachment\/1809\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1809.png\" data-orig-size=\"1680,1050\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1809\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1809-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1809-1024x640.png\" alt=\"\" class=\"wp-image-5503\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1809-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1809-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1809-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1809-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1809.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Insert a new keyframe at frame 13 on the <strong>circle_rt<\/strong> layer.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/?attachment_id=5506\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5506\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/attachment\/1810\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1810.png\" data-orig-size=\"1680,1050\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1810\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1810-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1810-1024x640.png\" alt=\"\" class=\"wp-image-5506\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1810-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1810-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1810-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1810-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1810.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Increasing_the_length_of_the_timeline\"><\/span>Increasing the length of the timeline<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Now we&#8217;re going to increase the length of the timeline to 25 frames. We do this by duplicating the first 13 frames of our original <strong>circle_ctr<\/strong> object to allow us to see it <em>after<\/em> frame 13. <\/p>\n\n\n\n<p>Select the frames you want to copy by clicking on frame 1 of the &#8220;circle ctr&#8221; layer and holding SHIFT while clicking the 13th frame. Click <strong>Edit &gt; Timeline &gt; Copy Frames<\/strong> or right-click on the selection and select <strong>Copy Frames<\/strong> from the contextual menu.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/attachment\/1811\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5509\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/attachment\/1811\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1811.png\" data-orig-size=\"1680,1050\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1811\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1811-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1811-1024x640.png\" alt=\"\" class=\"wp-image-5509\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1811-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1811-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1811-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1811-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1811.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p> Select the first destination frame, which will be frame 13. <strong><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Yes, we ARE pasting on top of the second keyframe at frame 13!<\/mark> <\/em><\/strong>Click <strong>Edit &gt; Timeline &gt; Paste Frames<\/strong> or right-click on the selection and select <strong>Paste Frames<\/strong> from the contextual menu.<\/p>\n\n\n\n<p><em>We should note here: there is a huge difference between <strong>Copy<\/strong> and <strong>Copy Frames<\/strong>. <strong>Edit &gt; Copy<\/strong> will copy a shape or an object. <strong>Edit &gt; Timeline &gt; Copy Frames<\/strong> will copy the entire contents of one or multiple frames.<\/em><\/p>\n\n\n\n<p>Back on the <strong>line<\/strong> layer, click on frame 25 and use <strong>Menu: Insert > Timeline > Frame,<\/strong> or right-click on the selection and select <strong>Insert Frames<\/strong> from the contextual menu. Finally, duplicate the 13 frames in <strong>circle_rt<\/strong> in the same fashion we did for <strong>circle_ctr<\/strong>. <em>Timelines for all 3 layers should now end at frame 25.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Reshaping_circle_rt\"><\/span>Reshaping circle_rt<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Click on frame 13 on the <strong>circle_rt<\/strong> layer and mouse over the edge of the circle on the stage with the selection tool. The cursor changes into an arrow with a curved line. This symbol means that you can pull the edge of the circle to reshape it. Change the shape of the circle using this technique.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"675\" height=\"388\" data-attachment-id=\"5511\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/18-12\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/18-12.png\" data-orig-size=\"675,388\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"18-12\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/18-12.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/18-12.png\" alt=\"\" class=\"wp-image-5511\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/18-12.png 675w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/18-12-300x172.png 300w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Now select frames 1 through 13 on the <strong>circle_rt<\/strong> layer, right-click on the selection, and select <strong>Shape Tween<\/strong> from the contextual menu. Notice the change in the timeline, and scrub the timeline to see the result.<\/p>\n\n\n\n<p><br><strong>Test<\/strong> the new animation. In some browser contexts, this can confuse, as the browser may try and open a cached version of the file. If this happens, simply close the tab, find your .html file, and open that version in the browser. This should clear up the illusion that nothing is saved! Notice that the new tween takes twice as long as the tween in the first circle-to-square animation. The tempo of the new tween is slower than the tempo of the first circle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Basic_bouncing_ball\"><\/span>Basic bouncing ball<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Our final circle is going to have a longer cycle than both of the other shapes. This will result in the slowest tempo. <\/p>\n\n\n\n<p>Create a new layer named <strong>circle_lft<\/strong> and create a new circle on it in the same manner we did for <strong>circle_rt<\/strong>. Give this circle a new color using the Color Palette, as we did before.<\/p>\n\n\n\n<p>Add a new keyframe on <strong>circle_lft<\/strong> at frame 25 so the circle will end in the same position. When we want an animation to cycle seamlessly, we place a keyframe at the end of the layer holding the same content as the first frame.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Now, in <strong>circle_lft<\/strong>, select and move the circle up or down with the <strong>Selection Tool<\/strong>. We start on the second keyframe at frame 25 and use <strong>SHIFT +  Up Arrow<\/strong> six times (Shift + up + up + up+ up + up + up) to move the circle 60 pixels higher than its starting point. When you scrub the timeline it doesn\u2019t look too bouncy yet. Create a Shape Tween between keyframes 1 and 25.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/attachment\/1813\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5514\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/attachment\/1813\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1813.png\" data-orig-size=\"1680,1050\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1813\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1813-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1813-1024x640.png\" alt=\"\" class=\"wp-image-5514\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1813-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1813-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1813-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1813-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/1813.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p><strong>Test<\/strong> and open the .html file to watch the new animation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Publish\"><\/span>Publish<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Upon completion of this exercise, upload your .html\/.js pair to a unique folder in your server space. Link the .html file to your webpage, and use an iframe embed to display it on your blog. The final file will look like this:<\/p>\n\n\n\n<div style=\"text-align: center;\">\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/rhythm\/rhythm.html\" style=\"border:1px #cccccc solid;\" name=\"myiFrame\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"400px\" width=\"600px\" allowfullscreen><\/iframe><\/div>\n\n\n\n<p><em>Note: if you&#8217;re looking at the iframe content on a mobile device, rotate your screen horizontally. Eventually, you&#8217;ll be able to create responsive content, but these beginner-level exercises are fixed-size.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>4D media artMachine rhythm Download the .zip file &gt; Rhythm: modulating Symbols on the Timeline Rhythm is an essential consideration in the production of motion graphics. One of the most common and simple time signatures is 4\/4, where four beats are evenly heard over one bar of music and each note is one beat. We&#8217;re&#8230; <a href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/\">read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5,11],"tags":[],"class_list":["post-5461","post","type-post","status-publish","format-standard","hentry","category-4d-media","category-exercises"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Rhythm - newMediaWiki<\/title>\n<meta name=\"description\" content=\"Rhythm: creating modulating time in Adobe Animate in a first exercise with Symbols, Keyframes, and Shape Tweens.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rhythm - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"Rhythm: creating modulating time in Adobe Animate in a first exercise with Symbols, Keyframes, and Shape Tweens.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-23T12:42:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-11T21:35:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" \/>\n<meta name=\"author\" content=\"williamCromar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"williamCromar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/\"},\"author\":{\"name\":\"williamCromar\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"headline\":\"Rhythm\",\"datePublished\":\"2023-12-23T12:42:11+00:00\",\"dateModified\":\"2024-01-11T21:35:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/\"},\"wordCount\":2147,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"articleSection\":[\"4d media\",\"Exercises\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/\",\"name\":\"Rhythm - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"datePublished\":\"2023-12-23T12:42:11+00:00\",\"dateModified\":\"2024-01-11T21:35:01+00:00\",\"description\":\"Rhythm: creating modulating time in Adobe Animate in a first exercise with Symbols, Keyframes, and Shape Tweens.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/#primaryimage\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"contentUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"width\":420,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/rhythm\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rhythm\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\",\"name\":\"newMediaWiki\",\"description\":\"because all media are new\",\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\",\"name\":\"williamCromar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"width\":1754,\"height\":1754,\"caption\":\"williamCromar\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\"},\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/author\\\/williamcromar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Rhythm - newMediaWiki","description":"Rhythm: creating modulating time in Adobe Animate in a first exercise with Symbols, Keyframes, and Shape Tweens.","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:\/\/williamcromar.com\/newmediawiki\/rhythm\/","og_locale":"en_US","og_type":"article","og_title":"Rhythm - newMediaWiki","og_description":"Rhythm: creating modulating time in Adobe Animate in a first exercise with Symbols, Keyframes, and Shape Tweens.","og_url":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/","og_site_name":"newMediaWiki","article_published_time":"2023-12-23T12:42:11+00:00","article_modified_time":"2024-01-11T21:35:01+00:00","og_image":[{"url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","type":"","width":"","height":""}],"author":"williamCromar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"williamCromar","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#article","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/"},"author":{"name":"williamCromar","@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"headline":"Rhythm","datePublished":"2023-12-23T12:42:11+00:00","dateModified":"2024-01-11T21:35:01+00:00","mainEntityOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/"},"wordCount":2147,"commentCount":0,"publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","articleSection":["4d media","Exercises"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/","url":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/","name":"Rhythm - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","datePublished":"2023-12-23T12:42:11+00:00","dateModified":"2024-01-11T21:35:01+00:00","description":"Rhythm: creating modulating time in Adobe Animate in a first exercise with Symbols, Keyframes, and Shape Tweens.","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/rhythm\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#primaryimage","url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","contentUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","width":420,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/williamcromar.com\/newmediawiki\/rhythm\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":"Rhythm"}]},{"@type":"WebSite","@id":"https:\/\/williamcromar.com\/newmediawiki\/#website","url":"https:\/\/williamcromar.com\/newmediawiki\/","name":"newMediaWiki","description":"because all media are new","publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/williamcromar.com\/newmediawiki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3","name":"williamCromar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","url":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","contentUrl":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","width":1754,"height":1754,"caption":"williamCromar"},"logo":{"@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1"},"url":"https:\/\/williamcromar.com\/newmediawiki\/author\/williamcromar\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/comments?post=5461"}],"version-history":[{"count":20,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5461\/revisions"}],"predecessor-version":[{"id":6038,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5461\/revisions\/6038"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=5461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/categories?post=5461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/tags?post=5461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}