{"id":262,"date":"2021-07-27T09:19:41","date_gmt":"2021-07-27T14:19:41","guid":{"rendered":"https:\/\/sites.owu.edu\/geog-112\/?page_id=262"},"modified":"2022-11-15T08:47:49","modified_gmt":"2022-11-15T13:47:49","slug":"lab-8-animation","status":"publish","type":"page","link":"https:\/\/sites.owu.edu\/geog-112\/schedule-content\/lab-8-animation\/","title":{"rendered":"Lab 8: Animation"},"content":{"rendered":"<blockquote style=\"border: 0px solid #666;padding: 10px;background-color: #f2f2f2\"><p>Update 7\/25\/2022<\/p><\/blockquote>\n<p><strong>100 points<br \/>\n<\/strong>Assign: Monday, November 7<span style=\"font-size: 1rem\"><br \/>\n<\/span><span style=\"font-size: 1rem\">Due: Monday, December 5<\/span><\/p>\n<blockquote style=\"border: 0px solid #666;padding: 10px;background-color: #f2f2f2\"><p><strong>Time and Animating Maps<\/strong><\/p><\/blockquote>\n<p>Maps have been static throughout most of their history. Most maps showed static data, or at least data that suggested it represented one specific time.<\/p>\n<p>It is possible to show temporal data with static maps. Some examples from Ch. 3 in Making Maps follow.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-832 aligncenter\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/Screen-Shot-2022-07-19-at-5.56.03-PM.png\" alt=\"\" width=\"335\" height=\"506\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-833\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/Screen-Shot-2022-07-19-at-5.57.12-PM.png\" alt=\"\" width=\"2212\" height=\"1504\" srcset=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/Screen-Shot-2022-07-19-at-5.57.12-PM.png 2212w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/Screen-Shot-2022-07-19-at-5.57.12-PM-300x204.png 300w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/Screen-Shot-2022-07-19-at-5.57.12-PM-1024x696.png 1024w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/Screen-Shot-2022-07-19-at-5.57.12-PM-768x522.png 768w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/Screen-Shot-2022-07-19-at-5.57.12-PM-1536x1044.png 1536w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/Screen-Shot-2022-07-19-at-5.57.12-PM-2048x1392.png 2048w\" sizes=\"auto, (max-width: 2212px) 100vw, 2212px\" \/><\/p>\n<p>Early animated maps were created using cel animation techniques &#8211; just like cartoons. This was a tedious and expensive process.<\/p>\n<p><a href=\"https:\/\/makingmaps.net\/2019\/02\/12\/mid-century-modern-map-movie-expanding-world-relationships-1947\/\" target=\"_blank\" rel=\"noopener\"><strong>Expanding Word Relationships (1947)<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-834 aligncenter\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/screen-shot-2019-01-30-at-10.15.27-am-1.png\" alt=\"\" width=\"412\" height=\"270\" srcset=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/screen-shot-2019-01-30-at-10.15.27-am-1.png 999w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/screen-shot-2019-01-30-at-10.15.27-am-1-300x196.png 300w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/screen-shot-2019-01-30-at-10.15.27-am-1-768x503.png 768w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/p>\n<p>By the 1990s map animation could be done on a Mac or PC and exported to video. Various examples are shown in this skeevy old video I made in the early 1990s. <a href=\"http:\/\/krygier.owu.edu\/sound\/Mapping_With_Sound_Krygier_AAG1993.mov\" target=\"_blank\" rel=\"noopener\"><strong>Making Animated Maps with Sound<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-835 aligncenter\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/mapping_with_sound_screen.png\" alt=\"\" width=\"356\" height=\"297\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Animated maps are relatively common today, especially with natural phenomena like the weather.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-837 aligncenter\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/southplains_loop.gif\" alt=\"\" width=\"318\" height=\"325\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Or past and predicted October temperatures in the US.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-839 aligncenter\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/tempchange.gif\" alt=\"\" width=\"398\" height=\"298\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Statistical, human data can also be animated. Below is a map of <strong>C02 Poisoning in the US.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-838 aligncenter\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/Animated_Map_CO_poisoning.gif\" alt=\"\" width=\"335\" height=\"303\" \/><\/p>\n<p style=\"text-align: right\">(source of some of the above maps is <a href=\"https:\/\/www.e-education.psu.edu\/geog486\/node\/720\" target=\"_blank\" rel=\"noopener\">here<\/a>)<\/p>\n<p>In general, the idea is that <strong>showing data that has a temporal component on a map that actually changes is somehow more effective for understanding the data.<\/strong>\u00a0Maybe!<\/p>\n<p><strong>The growth of Walmart, animated:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-841\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/wm2.gif\" alt=\"\" width=\"593\" height=\"261\" \/><\/p>\n<p><strong>The growth of Walmart, small-multiples:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-842\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/walmart-growth-micromaps1.png\" alt=\"\" width=\"916\" height=\"997\" srcset=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/walmart-growth-micromaps1.png 916w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/walmart-growth-micromaps1-276x300.png 276w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/walmart-growth-micromaps1-768x836.png 768w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><\/p>\n<p style=\"text-align: right\">(<a href=\"https:\/\/excelcharts.com\/animation-small-multiples-growth-walmart-excel-edition\/\" target=\"_blank\" rel=\"noopener\">Source<\/a> of Walmart maps)<\/p>\n<p>Review <em><strong><a href=\"https:\/\/pro.arcgis.com\/en\/pro-app\/latest\/help\/mapping\/animation\/overview-of-animation.htm\" target=\"_blank\" rel=\"noopener\">ArcGIS Pro Animation Basics<\/a><\/strong><\/em>\u00a0before you start this lab. <span style=\"color: #ff0000\">Jot down two options or ideas that are discussed in the review in your Lab Log.<\/span><\/p>\n<blockquote style=\"border: 0px solid #666;padding: 10px;background-color: #f2f2f2\"><p><strong>Animating our three map types<\/strong><\/p><\/blockquote>\n<p>Much of the work towards animating your maps has already been done in all the data organization done in labs 3 and 5. You have already watched your animated maps in ArcGIS Pro. The goal of this lab is to get the animations out of ArcGIS Pro and in a form you can embed on your course web pages. Thus, you need to revisit your HTML and update those pages with your exported, animated maps.<\/p>\n<p>I&#8217;m using my file and project names \u00a0below. Substitute yours.<\/p>\n<p>Animations (in ArcGIS Pro) are composed of <strong>keyframes<\/strong>, which in our case consist of a map from each decade between 1900 and 2020. Keyframes can be set with certain characteristics (like type or graphics on the animation) and the transitions between keyframes can be adjusted.<\/p>\n<p><em>We&#8217;ll run through the process with your choropleth map (graduated color) and you can manage the other two map types on your own.\u00a0<\/em><\/p>\n<p><em>As with other parts of ArcGIS Pro, the animation capabilities can be tricky and a bit confusing at times. Move methodically through the process and don&#8217;t get frustrated.<\/em><\/p>\n<p><em>Open your ArcGIS Pro project and make sure everything is complete up through Lab 7 &#8211; and that all your classification and symbolization work is done and reviewed by your instructor. Any changes to the classification and symbolization will require you to repeat the process below to create a revised video.<\/em><\/p>\n<p>Click the <strong>View<\/strong> tab, and above <strong>Animation<\/strong> click the <strong>Camera Add<\/strong> symbol (<strong>Add Animation<\/strong>)<\/p>\n<p>Right-click on Wisconsin_Choropleth and <strong>Zoom to Layer<\/strong> to properly scale your map<\/p>\n<p>Under the <strong>purple map tab<\/strong> (way at the top) click the <strong>Animation tab<\/strong><\/p>\n<p>On the left, above <strong>Create<\/strong>, click <strong>Import<\/strong> then <strong>Time Slider Steps<\/strong><\/p>\n<p><em>Your animation timeline shows <strong>14 keyframes,<\/strong> one for each decade of your data<\/em><\/p>\n<p>Under the <strong>purple map tab,<\/strong> and <strong>animation<\/strong>, the duration of the animation is <strong>39 seconds.<\/strong><\/p>\n<p>Change the duration to <strong>:14 (one second per frame)<\/strong> and <strong>Enter<\/strong><\/p>\n<p>Hit the <strong>Play<\/strong> button (<strong>Playback<\/strong>) to watch the animation at the current speed<\/p>\n<p><em>Obviously, you can putter with the animation speed if you want, along with other animation characteristics. Feel free to explore options: <strong><a href=\"https:\/\/pro.arcgis.com\/en\/pro-app\/latest\/help\/mapping\/animation\/overview-of-animation.htm\" target=\"_blank\" rel=\"noopener\">ArcGIS Pro Animation Basics<\/a><\/strong><\/em><\/p>\n<blockquote style=\"border: 0px solid #666;padding: 10px;background-color: #f2f2f2\"><p>Add the Year, Title, and Legend to your Animation<\/p><\/blockquote>\n<p>In your <strong>Keyframe Gallery<\/strong> (at the bottom) <strong>click once on your first map<\/strong> and <strong>shift-click once on your last map<\/strong> to <strong>select all.<\/strong><\/p>\n<p>In the <strong>Overlay<\/strong> section of the menu (circled, below) <strong>click to expand all overlay options:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-845 aligncenter\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/01-lab8_overlay.png\" alt=\"\" width=\"352\" height=\"194\" srcset=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/01-lab8_overlay.png 475w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/01-lab8_overlay-300x165.png 300w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/p>\n<p>Under <strong>Dynamic Text<\/strong> click <strong>Map Time<\/strong><\/p>\n<p><strong>Replace<\/strong> the two lines of jibberish with this jibberish:<\/p>\n<p>&lt;dyn type=&#8221;animation&#8221; property=&#8221;startTime&#8221; format=&#8221;yyyy&#8221;\/&gt;<\/p>\n<p>[if this does not work: leave one line of the jibberish, add &#8220;yyyy&#8221; as the format then orange x it closed]<\/p>\n<p>&#8230;and click the <strong>close<\/strong> box (<strong>orange x<\/strong> in box)<\/p>\n<p><strong>Play<\/strong> the animation. You can adjust the type size of the year.<\/p>\n<p>Add a static <strong>Title<\/strong> for your state to the map. Mine is <strong>Wisconsin Population<\/strong><\/p>\n<p><em>Add a legend to your animation<\/em><\/p>\n<p>Open up the legend under the Wisconsin_Choropleth layer<\/p>\n<p>Use the Windows <strong>Snipping Tool<\/strong> to grab just the legend:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-846\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/legend_choro.png\" alt=\"\" width=\"176\" height=\"155\" \/><\/p>\n<p>Save the legend to the <strong>Desktop<\/strong><\/p>\n<p><strong>Open<\/strong> the <strong>Overlay options<\/strong> and click on <strong>Image<\/strong><\/p>\n<p>Add to the animation, adjusting the size and location.<\/p>\n<p><strong>Save<\/strong>.<\/p>\n<p><em>Each state is shaped differently, you will have to putter to fit the title, year, and legend on the map in a way that looks ok. Have your instructor review your work before you export to video.<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-847 aligncenter\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/02-lab8_map.png\" alt=\"\" width=\"366\" height=\"310\" srcset=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/02-lab8_map.png 753w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/02-lab8_map-300x254.png 300w\" sizes=\"auto, (max-width: 366px) 100vw, 366px\" \/><\/p>\n<blockquote style=\"border: 0px solid #666;padding: 10px;background-color: #f2f2f2\"><p>Export your Animation to Video<\/p><\/blockquote>\n<p>Your map and the layout of the various &#8220;map pieces&#8221; &#8211; title, year, legend &#8211; visually arranged on the screen reflect the output when you save to video in ArcGIS Pro.<\/p>\n<p>You will have to move windows around in ArcGIS Pro, possibly closing some, so that you can see your entire map as well as the map pieces. My map is below, right before I exported it:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-849\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/03-lab8_layout.png\" alt=\"\" width=\"1417\" height=\"766\" srcset=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/03-lab8_layout.png 1417w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/03-lab8_layout-300x162.png 300w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/03-lab8_layout-1024x554.png 1024w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/03-lab8_layout-768x415.png 768w\" sizes=\"auto, (max-width: 1417px) 100vw, 1417px\" \/><\/p>\n<p>In the <strong>Export<\/strong> area of the menu, click on <strong>Movie<\/strong><\/p>\n<p>There are various options here which in essence vary in resolution. YouTube, for example, is lower resolution than Vimeo. You need to know what you are doing with your map animation video to make the correct selection here.<\/p>\n<p><strong>We want to embed our videos in our HTML pages.<\/strong> In order to do that, we need a site to <strong>host<\/strong> our animated maps. <strong>YouTube<\/strong> is an obvious choice, as it&#8217;s part of your Google account. If you want better resolution, you can chose <strong>Vimeo<\/strong> (but you need a Vimeo account). Vimeo is free but has a limitation on how many videos you can upload.<\/p>\n<p>There are various other <strong>options<\/strong> you can adjust during export.<\/p>\n<p>Please <strong>save<\/strong> the video to a location you can find, possibly your HTML folder.<\/p>\n<p>Before exporting the graduated symbol and dot map animations, I suggest uploading your video to YouTube (or wherever you chose), getting the embed code (from YouTube) for the video, then placing that code in your HTML. Upload the updated HTML to your OWU server space and take a look. If there are problems (size, layout, resolution) go back to ArcGIS Pro and adjust and reexport. Once your choropleth animated video is done, move on to the next two map types.<\/p>\n<p>Uncheck Wisconsin_Choropleth and check Wisconsin_GraduatedSymbol.<\/p>\n<p>Since you are creating a new animation (different map) you should delete the keyframes from the first map and begin the process over (Import Time Slider Steps).<\/p>\n<p>It&#8217;s possible you may be able to keep the year and title from the original map, but I haven&#8217;t quite figured that out. Be patient!<\/p>\n<blockquote style=\"border: 0px solid #666;padding: 10px;background-color: #f2f2f2\"><p><strong>Completing the Lab<\/strong><\/p><\/blockquote>\n<p>By end of class on the due date:<\/p>\n<ul>\n<li>two ideas or options from your review of\u00a0<em><strong><a href=\"https:\/\/pro.arcgis.com\/en\/pro-app\/latest\/help\/mapping\/animation\/overview-of-animation.htm\" target=\"_blank\" rel=\"noopener\">ArcGIS Pro Animation Basics.<\/a><\/strong><\/em><\/li>\n<li>three videos, exported and embedded in your HTML pages (on the web).<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Update 7\/25\/2022 100 points Assign: Monday, November 7 Due: Monday, December 5 Time and Animating Maps Maps have been static throughout most of their history. Most maps showed static data, or at least data that suggested it represented one specific <span class=\"readmore\"><a href=\"https:\/\/sites.owu.edu\/geog-112\/schedule-content\/lab-8-animation\/\">Continue Reading<\/a><\/span><\/p>\n","protected":false},"author":138,"featured_media":0,"parent":52,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-262","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/pages\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/users\/138"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":24,"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/pages\/262\/revisions"}],"predecessor-version":[{"id":908,"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/pages\/262\/revisions\/908"}],"up":[{"embeddable":true,"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/pages\/52"}],"wp:attachment":[{"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/media?parent=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}