{"id":5613,"date":"2023-12-26T12:55:04","date_gmt":"2023-12-26T12:55:04","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?p=5613"},"modified":"2024-01-11T21:54:40","modified_gmt":"2024-01-11T21:54:40","slug":"interactivity","status":"publish","type":"post","link":"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/","title":{"rendered":"Interactivity"},"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 decoding=\"async\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/spacewar.png\" alt=\"\" class=\"wp-image-3876\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong>interactivity<\/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-69f51ae68805b\" 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-69f51ae68805b\"  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\/interactivity\/#Interactivity_creating_a_UI_with_Buttons_and_JavaScript\" >Interactivity: creating a UI with Buttons and JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#Add_a_Background\" >Add a Background<\/a><\/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\/interactivity\/#Buttons\" >Buttons<\/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\/interactivity\/#The_Button_Timeline\" >The Button Timeline<\/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\/interactivity\/#Button_states\" >Button states<\/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\/interactivity\/#Define_the_Button_states\" >Define the Button states<\/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\/interactivity\/#Add_buttons_to_the_Timeline\" >Add buttons to the Timeline<\/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\/interactivity\/#Starting_and_stopping_the_Timeline\" >Starting and stopping 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-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#The_Actions_window\" >The Actions window<\/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\/interactivity\/#The_Code_Snippets_window\" >The Code Snippets window<\/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\/interactivity\/#Analyzing_the_Code\" >Analyzing the Code<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#The_code_as_written\" >The  code as written<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#Stripping_out_the_comments\" >Stripping out the comments<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#Part_1_Event_Listening\" >Part 1: Event Listening<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#Part_2_Calling_a_Function\" >Part 2: Calling a Function<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#Debugging\" >Debugging<\/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\/interactivity23.zip\">Download the .zip file &gt;<\/a><\/em><\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><em>If you need a fresh copy of Pacing,<br><a href=\"https:\/\/williamcromar.com\/newmediawiki\/pacing\/\">visit the exercise for a .zip file<\/a><\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Interactivity_creating_a_UI_with_Buttons_and_JavaScript\"><\/span>Interactivity: creating a UI with Buttons and JavaScript<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>Interactivity is a much-ballyhooed concept of the late 20th and early 21st century. We walk around listening to streaming playlists while texting on our cell phones, drive according to directions from a satellite spoken to us live in a calm computerized voice, and are constantly reviewing our blogs, social media feeds, and email.<\/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=\"800\" height=\"538\" data-attachment-id=\"5615\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/spacewar-2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar.jpg\" data-orig-size=\"800,538\" 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=\"spacewar\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar.jpg\" alt=\"\" class=\"wp-image-5615\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar.jpg 800w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar-300x202.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar-768x516.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>Spacewar<\/strong>, 1961, Martin Graetz, Stephen Russell, and Wayne Wiitanen, computer program for DEC PDP-1 computer<\/em>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Interactivity is not new. The archaeologist Alexander Marschak has argued that the caves at Lascaux was an interactive site; it was a place where people visited to leave reactive marks. From chess to basketball, mahjong to tennis, games are ancient interactive forms of entertainment, intellectual diversion, and fun.<\/p>\n\n\n\n<p>In 1961, at the height of the Cold War US\/Soviet space race, three MIT graduate students \u2014 Martin Graetz, Stephen Russell, and Wayne Wiitanen \u2014 programmed <em>Spacewar<\/em>, the first video game. In the game, two spaceships shoot at each other. The creators added moving stars and changing brightness, a technological feat at the time. If we break the game down into its core interactions, you and your opponent can turn your spaceship right or left, go forward, and shoot. Lastly, the program registers whether your ship has been hit by your opponent\u2019s missile. This is pretty simple, but it forms the basis for much game based interactivity. Put simply: Move your avatar around and shoot things.<\/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\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"887\" height=\"887\" data-attachment-id=\"5616\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/spacewar-3\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar.png\" data-orig-size=\"887,887\" 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=\"spacewar\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar.png\" alt=\"\" class=\"wp-image-5616\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar.png 887w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/spacewar-100x100.png 100w\" sizes=\"auto, (max-width: 887px) 100vw, 887px\" \/><\/figure>\n<\/div><\/div>\n\n\n\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\">\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.masswerk.at\/spacewar\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Visit the online emulation for<\/strong><\/em><br><em><strong>Spacewar!<\/strong><\/em><\/a><br><a href=\"https:\/\/www.masswerk.at\/spacewar\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>based on the original code \u00bb<\/strong><\/em><\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>The exercise below develops a much simpler interactivity that doesn&#8217;t involve shooting, but it does become the basis for a lot of <a href=\"https:\/\/www.codingcommanders.com\/godot\/propositional-logic.html\" target=\"_blank\" rel=\"noreferrer noopener\">game logic<\/a>. We&#8217;re basing this exercise on a copy of the file created for the previous exercise. If you do not have a version of that file, visit <strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/pacing\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Pacing<\/em><\/a><\/strong> and download that .zip file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_a_Background\"><\/span>Add a Background<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Just for fun, let&#8217;s place a bitmap image in the background, one that formally relates to the circular elements in the Pacing file.<\/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>The abstract bubble-themed wallpaper seen here is from <strong><a href=\"http:\/\/7-themes.com\/6807671-red-bubbles-wallpaper.html\" target=\"_blank\" rel=\"noreferrer noopener\">7 Themes<\/a><\/strong>. It was originally a large hi-res file, but we&#8217;ve cropped and resized it to 600 X 400 to fit our canvas.<\/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=\"600\" height=\"400\" data-attachment-id=\"5619\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/6807671-red-bubbles-wallpaper\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/6807671-red-bubbles-wallpaper.jpg\" data-orig-size=\"600,400\" 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=\"6807671-red-bubbles-wallpaper\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/6807671-red-bubbles-wallpaper.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/6807671-red-bubbles-wallpaper.jpg\" alt=\"\" class=\"wp-image-5619\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/6807671-red-bubbles-wallpaper.jpg 600w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/6807671-red-bubbles-wallpaper-300x200.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Duplicate the final FLA file that you created in <strong><em>Pacing<\/em><\/strong>, or download and open our file from the wiki. Rename it to reflect that it is now the <em><strong>Interactivity<\/strong><\/em> exercise and open it.<\/p>\n\n\n\n<p>Create a new layer and name it <strong>bubbles<\/strong>. Click-hold-and-drag it below the other two layers.<\/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>With this layer active, simply drag the image out of its folder and over the stage. You&#8217;ll see a <strong>+<\/strong> at the cursor, your indication that the file will import automatically. Release the cursor and watch the import dialog progress bar. The image is the same size as the canvas and should snap into place, but you could move it around with the <strong>Selection Tool<\/strong>. It behaves just like a placed image in Illustrator: a vector object containing a bitmap image.<\/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\/?attachment_id=5655\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5655\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2001\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2001.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=\"2001\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2001-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2001-1024x640.png\" alt=\"\" class=\"wp-image-5655\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2001-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2001-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2001-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2001-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2001.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>As with other programs, layers can be visible or invisible, locked or not. Here, until the final output, we will hide and lock the bubbles layer. Simply toggle the dot under the eyeball and padlock to the right of the layer name and you&#8217;re done.<\/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=5654\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5654\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2002\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2002.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=\"2002\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2002-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2002-1024x640.png\" alt=\"\" class=\"wp-image-5654\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2002-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2002-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2002-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2002-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2002.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Buttons\"><\/span>Buttons<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this exercise, we are going to write code that starts and stops the animation we created in the last exercise. Before we can start and stop the Timeline with code, we need to create a user interface, in this case <strong>buttons<\/strong>, that the viewer will use to control the Timeline.<\/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>Insert a new <strong>Symbol<\/strong> and choose <strong>Button<\/strong> from the <strong>Type<\/strong> pull-down panel menu. Name it <strong>startStopBtn<\/strong>.<\/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\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" data-attachment-id=\"5656\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2003\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2003.png\" data-orig-size=\"1096,554\" 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=\"2003\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2003-1024x518.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2003-1024x518.png\" alt=\"\" class=\"wp-image-5656\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2003-1024x518.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2003-300x152.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2003-768x388.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2003.png 1096w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p><em>Note: The best practice for naming objects, buttons, and movie clips in Animate is to start with a lowercase letter, and capitalize all new words, known as <strong>camelBacking<\/strong> or <strong>camelCase<\/strong>. Button names should end with <strong>Btn<\/strong>. Movie Clip names should end with <strong>Mc<\/strong>. Ending with these suffixes allows the Animate code editor to auto-complete your code and the common convention makes it easier for others to understand your intentions.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Button_Timeline\"><\/span>The Button 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>Notice that the Button Symbol Timeline looks different than the symbol editor we encountered in Pacing. The Animate Timeline is adjusted for buttons. It has four frames corresponding to the four button states: <strong>Up<\/strong>, <strong>Over<\/strong>, <strong>Down<\/strong>, and <strong>Hit<\/strong>.<\/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=5657\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5657\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2004\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2004.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=\"2004\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2004-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2004-1024x640.png\" alt=\"\" class=\"wp-image-5657\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2004-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2004-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2004-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2004-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2004.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=\"Button_states\"><\/span>Button states<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Up<\/strong> is the normal button state. In the up state frame of the timeline, you should design what the button looks like when the user is not interacting with the button.<\/li>\n\n\n\n<li><strong>Over<\/strong> is the mouse-over button state. In the over state frame of the timeline, you should design what the button looks like when the user mouses over the button. You can copy and paste the same button design from the up state to the over state if you do not want the button to change when the user mouses over the button. We should stress that <em>only a cursor-based interface will recognize the over state. A mobile or touch-based interface won&#8217;t interpret it.<\/em><\/li>\n\n\n\n<li><strong>Down<\/strong> is the mouse-down button state. In the down state frame of the timeline, you should design what the button looks like when a user clicks on it.<\/li>\n\n\n\n<li><strong>Hit<\/strong> is not a button state. \u201cHit\u201d is the area that you define to be the clickable part of the button. For example, if your button is the letter O, the Hit area should include the middle portion of the letter.<\/li>\n<\/ul>\n\n\n\n<p><em>Note: The <strong>hit<\/strong> area of the letter O is one example of how <strong>players<\/strong> are different from <strong>readers<\/strong>. For a reader, the letter O is defined by a thin, circular line surrounding an oval of negative space. A reader ignores the negative space when reading the letter O, concentrating on the contour of the letter. A <strong>player<\/strong> clicks on the negative space. Although the outline defines the letter, the negative space has more mass. The player sees the O as being a target \u2014 a filled-in circle, rather than an empty circle. When designing interactive media the artist should consider how the player, not the reader, behaves with media elements.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Define_the_Button_states\"><\/span>Define the Button states<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>With the Playhead in the <strong>Up<\/strong> state, draw a 50 px diameter red circle using the Oval tool in the middle of the <strong>Symbol Editor Stage<\/strong>.<\/p>\n\n\n\n<p>Open the <strong>Align<\/strong> panel from <strong>Window &gt; Align<\/strong>. Check the <strong>To Stage<\/strong> box, then center align your button vertically and horizontally.<\/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=5658\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5658\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2005\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2005.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=\"2005\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2005-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2005-1024x640.png\" alt=\"\" class=\"wp-image-5658\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2005-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2005-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2005-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2005-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2005.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>Change the color of the circle to red. Insert a keyframe in the <strong>Over<\/strong> frame of the button symbol editing timeline. Choose <strong>View &gt; Rulers<\/strong> and pull guides around all four sides of the 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=5660\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5660\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2006\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2006.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=\"2006\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2006-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2006-1024x640.png\" alt=\"\" class=\"wp-image-5660\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2006-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2006-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2006-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2006-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2006.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>Modify the <strong>Over<\/strong> state button so it looks different from the <strong>Up<\/strong> state. We drew a square on top of the circle in the same color. The new shape is an obvious modification that we will expect to see when we test the buttons.<\/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=5661\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5661\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2007\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2007.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=\"2007\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2007-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2007-1024x640.png\" alt=\"\" class=\"wp-image-5661\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2007-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2007-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2007-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2007-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2007.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Insert a keyframe in the <strong>Down<\/strong> frame. Do not modify the shape. Our button will visually respond when the user mouses over it. It will not respond visually to mouse clicking because we are not changing this 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\">\n<p>Insert another keyframe in the <strong>Hit<\/strong> frame. This defines the clickable area of the button. Set the Hit state to the same circle as you have in the Up button state by deleting the square (which was a result of adding a keyframe), then copying the red circle from the Up frame and using <strong>Edit &gt; Paste in Place<\/strong> on the Hit frame (Command+Shift+V).<\/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=5663\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5663\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2008\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2008.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=\"2008\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2008-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2008-1024x640.png\" alt=\"\" class=\"wp-image-5663\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2008-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2008-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2008-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2008-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2008.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_buttons_to_the_Timeline\"><\/span>Add buttons to the Timeline<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Return to the scene Timeline by clicking on the left arrow or the Scene 1 button near the top left of the Stage.&nbsp;<\/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>Create a new layer named <strong>stop_btn<\/strong> above the circles&#8217; layers in the Timeline. Insert your button on the stage at frame 1 of the <strong><strong>stop_btn<\/strong><\/strong> layer. Position the button on top of the circle on the left side of the Stage.\u00a0<\/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=5665\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5665\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2009\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2009.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=\"2009\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2009-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2009-1024x640.png\" alt=\"\" class=\"wp-image-5665\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2009-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2009-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2009-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2009-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2009.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Create a new layer named <strong>go_btn<\/strong> in the timeline. Since buttons are symbols, you can add multiple instances of the button to the stage. Add another instance of the button in frame 1 of the <strong>go_btn<\/strong> layer on the right side of the Stage.<\/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 on the button on the <strong>stop<\/strong> layer. Name the first instance of the button <strong>stop_btn<\/strong> using the <strong>Instance Name<\/strong> field of the <strong>Properties<\/strong> panel. <em>It is important to provide instance names!<\/em><\/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=5666\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5666\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2010\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2010.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=\"2010\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2010-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2010-1024x640.png\" alt=\"\" class=\"wp-image-5666\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2010-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2010-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2010-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2010-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2010.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\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p>Name the instance of the button on the <strong>go<\/strong> layer <strong>go_btn<\/strong>. Now we have buttons on the left and right sides of the Canvas. The button on the left is going to stop the animation and the button on the right will start it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Starting_and_stopping_the_Timeline\"><\/span>Starting and stopping the Timeline<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We will give the buttons some basic functionality by introducing two elements of the <strong>Animate<\/strong> interface: the <strong>Actions Panel<\/strong> and <strong>Code Snippets<\/strong>. Animate helps you build code from the ground up by providing several commonly used building blocks pre-written in JS syntax. Don&#8217;t be fooled: it can&#8217;t be comprehensive, and you&#8217;ll still need to write code! But this is a handy shortcut.<\/p>\n\n\n\n<p>Create a new layer called <strong>actions<\/strong> in the Timeline. This is where the code that controls the buttons will be stored. <em>It is conventional practice in Animate to make a separate layer for code so that you (and any collaborators) are easily able to find and modify the code.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Actions_window\"><\/span>The Actions window<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>Select frame 1 on the <strong>actions<\/strong> layer, and access the <strong>Actions<\/strong> window one of two ways: select from <strong>Menu: Window &gt; Actions<\/strong> or, in the <strong>Properties<\/strong> tab, look for and click on the tiny, unlabeled circled arrow icon at the top right of the panel. This icon is circled in red in the screenshot \u2014 it&#8217;s hard to find but it&#8217;s a very fast shortcut!&nbsp;<\/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=5668\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5668\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2011\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2011.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=\"2011\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2011-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2011-1024x640.png\" alt=\"\" class=\"wp-image-5668\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2011-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2011-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2011-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2011-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2011.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\" style=\"flex-basis:50%\">\n<p>This opens a new window called <strong>Actions<\/strong>. While it can be docked in the UI, it&#8217;s advisable to leave this open as a separate window. A script can sometimes get long and complex and it&#8217;s difficult to read in a tiny, docked tab.<\/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\/?attachment_id=5669\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5669\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2012\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2012.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=\"2012\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2012-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2012-1024x640.png\" alt=\"\" class=\"wp-image-5669\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2012-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2012-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2012-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2012-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2012.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=\"The_Code_Snippets_window\"><\/span>The Code Snippets window<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>Next, open the <strong>Code Snippets<\/strong> window, either selecting from <strong>Menu: Window &gt; Code Snippets<\/strong> or by clicking on the <strong>Code Snippets<\/strong> icon at the upper right of the <strong>Actions<\/strong> window. The icon is a pair of <strong>&lt;&gt;<\/strong> brackets (to my mind an illogical choice \u2014 the code is JS, not HTML, but whatever). Again, it&#8217;s a hard-to-find but useful shortcut, so it&#8217;s circled in red in the screenshot.<\/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=5671\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-attachment-id=\"5671\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2013\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2013.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=\"2013\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2013-1024x640.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2013-1024x640.png\" alt=\"\" class=\"wp-image-5671\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2013-1024x640.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2013-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2013-768x480.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2013-1536x960.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2013.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\" style=\"flex-basis:50%\">\n<p>In <strong>Code Snippets<\/strong>, you&#8217;ll see a folder-like structure. Click on the <strong>HTML5 Canvas<\/strong> folder to open. Observe a folder called <strong>Timeline Navigation<\/strong>, and click to open it. You&#8217;ll observe <strong>Click to Go to Frame and Stop<\/strong> as one choice here.\u00a0<\/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\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"950\" data-attachment-id=\"5672\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2014\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2014.png\" data-orig-size=\"1080,1002\" 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=\"2014\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2014-1024x950.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2014-1024x950.png\" alt=\"\" class=\"wp-image-5672\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2014-1024x950.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2014-300x278.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2014-768x713.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2014.png 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><em>But<\/em> <em>before<\/em><\/mark><\/strong> you select the code snippet, select your <strong>stop_btn<\/strong> (the left, red one). You may have to move and\/or resize all the extra windows to select it. Then double-click on <strong>Click to Go to Frame and Stop<\/strong>\u00a0and observe the code it writes in the <strong>Actions<\/strong> window.<\/p>\n\n\n\n<p>Next, select the <strong>go_btn<\/strong> (your green one), and back in the <strong>Code Snippets<\/strong> window, under the <strong>Time Navigation<\/strong> folder, find and double-click on <strong>Click to Go to Frame and Play<\/strong>. Again, observe the code it writes in the <strong>Actions<\/strong> window.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/?attachment_id=5674\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"555\" data-attachment-id=\"5674\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/attachment\/2015\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2015.png\" data-orig-size=\"1336,724\" 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=\"2015\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2015-1024x555.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2015-1024x555.png\" alt=\"\" class=\"wp-image-5674\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2015-1024x555.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2015-300x163.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2015-768x416.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/2015.png 1336w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>The program has written a lot of code for you! You may need to resize the <strong>Actions<\/strong> window to read it all. There are two instances of the integer <strong>(5)<\/strong> in brackets. <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Change both instances to (0)<\/mark><\/strong> so that the start and stop will happen on the first frame. <strong><em>Remember: numerical ordering starts with 0 in programming! <\/em><\/strong><\/p>\n\n\n\n<p><strong>Save<\/strong> and <strong>Test<\/strong> the animation in a browser by clicking the buttons.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Analyzing_the_Code\"><\/span>Analyzing the Code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Even if you&#8217;ve done your <a href=\"https:\/\/williamcromar.com\/newmediawiki\/javascript\/\"><strong>JavaScript<\/strong> tutorial<\/a>, what nonsense this may appear to be! What does it all mean? It <em>works<\/em>, but it&#8217;s probably still a bit of a black box for you. Let&#8217;s take a moment to understand what the snippets mean.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_code_as_written\"><\/span>The  code as written<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/* Click to Go to Frame and Stop\nClicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.\nCan be used on the main timeline or on movie clip timelines.\nInstructions:\n1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.\n2.Frame numbers in EaselJS start at 0 instead of 1\n*\/\n\nthis.stop_btn.addEventListener(&quot;click&quot;, fl_ClickToGoToAndStopAtFrame.bind(this));\n\nfunction fl_ClickToGoToAndStopAtFrame()\n{\nthis.gotoAndStop(0);\n}\n\n\/* Click to Go to Frame and Play\nClicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.\nCan be used on the main timeline or on movie clip timelines.\nInstructions:\n1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.\n2.Frame numbers in EaselJS start at 0 instead of 1\n*\/\n\nthis.go_btn.addEventListener(&quot;click&quot;, fl_ClickToGoToAndPlayFromFrame.bind(this));\n\nfunction fl_ClickToGoToAndPlayFromFrame()\n{\nthis.gotoAndPlay(0);\n}\n<\/pre><\/div>\n\n\n<p>First, notice the color-coding in the <strong>Actions<\/strong> window in Animate \u2014 not here in the wiki \u2014 which helps to make this gobbledygook somewhat more human-readable:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">Gray<\/mark><\/strong>&nbsp;means comments in Animate. A typical Code Snippet provides spades full of these for instructional purposes. In CSS, the comment tag is&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">\/*yourContent*\/<\/mark><\/strong>&nbsp;and functions parenthetically. In JS, the comment is&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">\/\/<\/mark><\/strong>&nbsp;and functions per line. You&#8217;ll see both kinds of comments in the code snippets. Comments are not executed when the browser interprets the instructions. We will delete all the commented areas once we understand the instructions they provide.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">Purple<\/mark><\/strong>&nbsp;in Animate denotes a keyword. Keywords in JS are terms like&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">this<\/mark><\/strong>&nbsp;or&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">function<\/mark><\/strong>&nbsp;that are reserved for the programming language and which you can&#8217;t use to name objects or functions.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">Green<\/mark><\/strong>&nbsp;indicates a string in Animate. <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\"><strong>&#8220;String&#8221;<\/strong><\/mark> is a programming term, meaning a type of data comprised of characters rather than numerical data.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Stripping_out_the_comments\"><\/span>Stripping out the comments<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>So, once we process and understand what the commented text is telling us, we can delete it and get the much more manageable:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nthis.stop_btn.addEventListener(&quot;click&quot;, fl_ClickToGoToAndStopAtFrame.bind(this));\n\nfunction fl_ClickToGoToAndStopAtFrame()\n{\nthis.gotoAndStop(0);\n}\n\nthis.go_btn.addEventListener(&quot;click&quot;, fl_ClickToGoToAndPlayFromFrame.bind(this));\n\nfunction fl_ClickToGoToAndPlayFromFrame()\n{\nthis.gotoAndPlay(0);\n}\n<\/pre><\/div>\n\n\n<p>There is a repeating pattern here, so let&#8217;s break it down further and look at only the first six lines. This is one actual, actionable code snippet.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nthis.stop_btn.addEventListener(&quot;click&quot;, fl_ClickToGoToAndStopAtFrame.bind(this));\n\nfunction fl_ClickToGoToAndStopAtFrame()\n{\nthis.gotoAndStop(0);\n} \n<\/pre><\/div>\n\n\n<p>Before we analyze how the code works, notice some of the formatting principles at work. Some of this is machine functionality, and some of it is for human legibility, but you should follow all of these formatting rules:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>CAPITALIZATION MATTERS!<\/em><strong> addEventListener<\/strong><em> is not the same as <\/em><strong>addeventlistener<\/strong><em>.\u00a0Capitalization is not just a style preference, it affects functionality. Only the properly capitalized code will work.<\/em><\/li>\n\n\n\n<li><em>Every line ends with a semicolon\u00a0<\/em><strong>;<\/strong>\u00a0<em>unless it precedes the curly braces <\/em><strong>{ }<\/strong> <em>which are often offset onto a new line for emphasis.<\/em><\/li>\n\n\n\n<li><em>Commands contained in curly braces are set on a new line and often indented for human legibility.<\/em><\/li>\n\n\n\n<li><em>Every time an opening parenthesis or curly brace is used, a closing parenthesis or curly brace must close the statement.<\/em><\/li>\n<\/ul>\n\n\n\n<p>There are two parts to the code, with the first on Line 1, and the second on Lines 3-6.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Part_1_Event_Listening\"><\/span>Part 1: Event Listening<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">this<\/mark>.stop_btn.addEventListener(<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">&#8220;click&#8221;<\/mark>, fl_ClickToGoToAndStopAtFrame.bind(<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">this<\/mark>));<\/strong><\/p>\n\n\n\n<p><em>This code creates an &#8220;event listener&#8221; to &#8220;listen&#8221; for clicks (or, on a touch device, taps). Huh? Applying an event listener tells the browser to wait for some kind of user input to happen before allowing the code to respond. An event listener is a <strong>method<\/strong>; in programming, a method is like a verb. In this example, the event listener tells the browser to wait (or &#8220;listen&#8221;<\/em>)<em> for a mouse click on the button with the id<\/em><strong> stop_btn<\/strong><em>. <\/em><\/p>\n\n\n\n<p><em>When the event listener &#8220;hears&#8221; an event (that is, when the browser detects a mouse click on the red button), it executes a <strong>function<\/strong>: the code snippet created called<\/em><strong> fl_ClickToGoToAndStopAtFrame<\/strong><em>. A function is code that defines what an action does<\/em> and can be reused. What about the terms this and bind? \u00a0&#8220;This&#8221; is a term that JS uses as<em> a pronoun: just as we write &#8220;Sally is hungry so she cooks&#8221; instead of &#8220;Sally is hungry so Sally cooks,&#8221; the reserved term &#8220;this&#8221; is such a shortcut. &#8220;Bind&#8221; is a method of calling a function (that is, making a function happen) and setting the &#8220;this&#8221; value explicitly for a specific kind of event.<\/em><\/p>\n\n\n\n<p><em>So,<\/em><strong> this.stop_btn.addEventListener<\/strong><em> in English would be something like: &#8220;Yo, Browser, make something happen when you detect someone doing something to the red button.&#8221;<\/em><\/p>\n\n\n\n<p><em>Then,<\/em><strong> (&#8220;click&#8221;,&nbsp;fl_ClickToGoToAndStopAtFrame.bind(this));<\/strong><em> means: &#8220;<em>This something you need to detect<\/em> is when someone CLICKS on the red button.&#8221;<\/em><\/p>\n\n\n\n<p>If it sounds a bit sarcastic and like we&#8217;re talking to a toddler, that&#8217;s because the browser <em>IS<\/em> a kind of toddler. Computers simply don&#8217;t understand implied connections, metaphors, or nuance. <em>We<\/em> can easily understand &#8220;do something when someone clicks on the red button.&#8221; But computers are hyper-logical and can&#8217;t understand that second statement without someone explicitly telling it the first part.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Part_2_Calling_a_Function\"><\/span>Part 2: Calling a Function<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">function<\/mark>&nbsp;fl_ClickToGoToAndStopAtFrame()<\/strong><br><strong>{<\/strong><br><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">this<\/mark>.gotoAndStop(0);<\/strong><br><strong>}<\/strong>&nbsp;<\/p>\n\n\n\n<p><em>So far, the browser knows to do SOMETHING when the button is clicked, but you haven&#8217;t yet told it WHAT to do. The<\/em><strong> fl_ClickToGoToAndStopAtFrame()<\/strong><em> &#8220;calls&#8221; the function, and, in the curly braces right afterward, that WHAT is finally revealed. In this case,<\/em><strong> this<em>.gotoAndStop(0);<\/em><\/strong><em> means to return <\/em>to the first frame and stop the animation. So, in English: &#8220;Hey, Browser, I bet you&#8217;d love to know exactly what I want you to do when someone clicks on the red button. OK: I want you to <em>stop playing the animation and bring it back to the very beginning again, and don&#8217;t start playing it again once you do!&#8221;<\/em><\/p>\n\n\n\n<p>By the way: as far as the browser is concerned, the code could read on one single line, so<strong>\u00a0<\/strong>what&#8217;s with all the spaces and line breaks? It gives the code some visual structure that helps humans read it.<\/p>\n\n\n\n<p>So, now, your turn: take some time to read and interpret the code from Lines 8 through 13. How does the browser know how to make the animation start again?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Debugging\"><\/span>Debugging<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The instructions above should yield a working file in a browser window. However, mistakes are made more often than not, and <strong>debugging<\/strong>, the dark art of finding out what&#8217;s wrong with your code, should be considered an important part of your process. Don&#8217;t assume you won&#8217;t have to do it!<\/p>\n\n\n\n<p><strong>Test<\/strong> the movie and click on the stop and start buttons in the browser. If the buttons work, bravo! Otherwise, it\u2019s time to debug.<\/p>\n\n\n\n<p>At first, most of your bugs are going to be typos such as missing semicolons, misused lower or upper case, or similar characters. For instance, if you type play(O); instead of play(0); the green button won&#8217;t function. Of course &#8220;O&#8221; (the letter O) is a typographic mistake for the integer &#8220;0&#8221; (zero) \u2014 look at the computer keyboard and you can see this would be among the most common typos at the same time it&#8217;s one of the hardest to spot. Fix the typo, and the code will validate and play as expected.<\/p>\n\n\n\n<p>A working file should look and behave something like this:<\/p>\n\n\n\n<div style=\"text-align: center;\">\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/interactivity\/interactivity.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\u2019re looking at the iframe content on a mobile device, <a href=\"https:\/\/williamcromar.com\/code_samples\/interactivity\/interactivity.html\" target=\"_blank\" rel=\"noreferrer noopener\">click here and rotate your screen horizontally<\/a>.<\/em><\/p>\n\n\n\n<p><em> Eventually, you\u2019ll 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 interactivity Download the .zip file &gt; If you need a fresh copy of Pacing,visit the exercise for a .zip file Interactivity: creating a UI with Buttons and JavaScript Interactivity is a much-ballyhooed concept of the late 20th and early 21st century. We walk around listening to streaming playlists while texting on our&#8230; <a href=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/\">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-5613","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>Interactivity - newMediaWiki<\/title>\n<meta name=\"description\" content=\"Interactivity: using Buttons combined with Javascript in Adobe Animate to create a simple interactive element.\" \/>\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\/interactivity\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interactivity - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"Interactivity: using Buttons combined with Javascript in Adobe Animate to create a simple interactive element.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-26T12:55:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-11T21:54:40+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=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/interactivity\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/interactivity\\\/\"},\"author\":{\"name\":\"williamCromar\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"headline\":\"Interactivity\",\"datePublished\":\"2023-12-26T12:55:04+00:00\",\"dateModified\":\"2024-01-11T21:54:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/interactivity\\\/\"},\"wordCount\":3107,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/interactivity\\\/#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\\\/interactivity\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/interactivity\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/interactivity\\\/\",\"name\":\"Interactivity - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/interactivity\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/interactivity\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"datePublished\":\"2023-12-26T12:55:04+00:00\",\"dateModified\":\"2024-01-11T21:54:40+00:00\",\"description\":\"Interactivity: using Buttons combined with Javascript in Adobe Animate to create a simple interactive element.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/interactivity\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/interactivity\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/interactivity\\\/#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\\\/interactivity\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Interactivity\"}]},{\"@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":"Interactivity - newMediaWiki","description":"Interactivity: using Buttons combined with Javascript in Adobe Animate to create a simple interactive element.","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\/interactivity\/","og_locale":"en_US","og_type":"article","og_title":"Interactivity - newMediaWiki","og_description":"Interactivity: using Buttons combined with Javascript in Adobe Animate to create a simple interactive element.","og_url":"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/","og_site_name":"newMediaWiki","article_published_time":"2023-12-26T12:55:04+00:00","article_modified_time":"2024-01-11T21:54:40+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":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#article","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/"},"author":{"name":"williamCromar","@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"headline":"Interactivity","datePublished":"2023-12-26T12:55:04+00:00","dateModified":"2024-01-11T21:54:40+00:00","mainEntityOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/"},"wordCount":3107,"commentCount":0,"publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#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\/interactivity\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/","url":"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/","name":"Interactivity - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","datePublished":"2023-12-26T12:55:04+00:00","dateModified":"2024-01-11T21:54:40+00:00","description":"Interactivity: using Buttons combined with Javascript in Adobe Animate to create a simple interactive element.","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/interactivity\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/#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\/interactivity\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":"Interactivity"}]},{"@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\/5613","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=5613"}],"version-history":[{"count":19,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5613\/revisions"}],"predecessor-version":[{"id":6042,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5613\/revisions\/6042"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=5613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/categories?post=5613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/tags?post=5613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}