{"id":1138,"date":"2018-03-05T23:52:23","date_gmt":"2018-03-05T23:52:23","guid":{"rendered":"https:\/\/course.oeru.org\/lida100\/?page_id=1138"},"modified":"2018-03-05T23:52:23","modified_gmt":"2018-03-05T23:52:23","slug":"animated-gif","status":"publish","type":"page","link":"https:\/\/course.oeru.org\/lida100\/unit-4\/create-media\/animated-gif\/","title":{"rendered":"Animated GIF"},"content":{"rendered":"<div id=\"content\" class=\"mw-body container\" role=\"main\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<div class=\"panel\">\n<div class=\"panel-body\">\n<div id=\"bodyContent\">\n<div id=\"mw-content-text\" lang=\"en\" dir=\"ltr\" class=\"mw-content-ltr\">\n<div class=\"thumb tright\">\n<div class=\"thumbinner thumbnail\" style=\"width:322px;\"><a href=\"http:\/\/WikiEducator.org\/File:Waving_reeds_cinemagraph.gif\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"\/\/WikiEducator.org\/images\/thumb\/1\/10\/Waving_reeds_cinemagraph.gif\/320px-Waving_reeds_cinemagraph.gif\" width=\"320\" height=\"180\" class=\"thumbimage img-responsive\"><\/a>  <\/p>\n<div class=\"thumbcaption\">A <a href=\"http:\/\/en.wikipedia.org\/wiki\/Cinemagraph\" class=\"extiw\" title=\"w:Cinemagraph\">cinemagraph<\/a> showing reeds waving in the wind.<\/div>\n<\/div>\n<\/div>\n<p>The <a href=\"http:\/\/en.wikipedia.org\/wiki\/GIF\" class=\"extiw\" title=\"w:GIF\">Graphics Interchange Format<\/a> (GIF) is a bitmap image format. The format can support the compilation of a sequence of still images and when played back, it generates a moving picture. GIF animations are gaining popularity again as a form of creative expression and as a method to use moving pictures to illustrate or explain concepts. In this section, you will create your own animated GIF from a sequence of still frames.<br style=\"clear:both;\"><\/p>\n<p>\n<\/p>\n<div class=\"panel iDevice\">\n\t<div class=\"panel-heading idevice-heading\">\n\t\t<div>\n\t\t\t<img decoding=\"async\" class=\"pedagogicalicon\" alt=\"summary\" src=\"https:\/\/course.oeru.org\/lida100\/wp-content\/themes\/oeru_course\/idevices\/Icon_summary.png\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h2>Mini challenge<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"panel-body\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"100px\"><b>Summary<\/b>:<\/td>\n<td>Generate an animated GIF from still image frames<\/td>\n<\/tr>\n<tr>\n<td>\n<div class=\"floatleft\"><a href=\"http:\/\/WikiEducator.org\/File:Time7.svg\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"Time7.svg\" src=\"\/\/WikiEducator.org\/images\/thumb\/8\/88\/Time7.svg\/30px-Time7.svg.png\" width=\"30\" height=\"30\" class=\"img-responsive\"><\/a><\/div>\n<\/td>\n<td>1.5 hours<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Moving images (without sound) is the next modality in this learning pathway on creating media.\n<\/p>\n<p>\n<\/p>\n<p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p>\n<\/p>\n<h2><span class=\"mw-headline\" id=\"Start_here\">Start here<\/span><\/h2>\n<div class=\"panel iDevice\">\n\t<div class=\"panel-heading idevice-heading\">\n\t\t<div>\n\t\t\t<img decoding=\"async\" class=\"pedagogicalicon\" alt=\"web resources\" src=\"https:\/\/course.oeru.org\/lida100\/wp-content\/themes\/oeru_course\/idevices\/Icon_inter.png\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h2>Stimulus resources<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"panel-body\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<\/p>\n<p>The following animated GIF examples illustrate the utility of moving pictures to illustrate concepts. In this challenge you are not required to produce complex animations. However, simple animations can add value to the online media you produce. (Click on the image to view the GIF source file on the Wikimedia Commons and use the back button of your browser to return to this page).\n<\/p>\n<ul class=\"gallery mw-gallery-traditional\">\n<li class=\"gallerybox\" style=\"width: 155px\">\n<div style=\"width: 155px\">\n<div class=\"thumb\" style=\"width: 150px;\">\n<div style=\"margin:15px auto;\"><a href=\"http:\/\/WikiEducator.org\/File:4-Stroke-Engine-with-airflows.gif\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"4-Stroke-Engine-with-airflows.gif\" src=\"\/\/WikiEducator.org\/images\/thumb\/d\/d7\/4-Stroke-Engine-with-airflows.gif\/79px-4-Stroke-Engine-with-airflows.gif\" width=\"79\" height=\"120\" class=\"img-responsive\"><\/a><\/div>\n<\/div>\n<div class=\"gallerytext\">\n\t\t\t<\/div>\n<\/p><\/div>\n<\/li>\n<li class=\"gallerybox\" style=\"width: 155px\">\n<div style=\"width: 155px\">\n<div class=\"thumb\" style=\"width: 150px;\">\n<div style=\"margin:15px auto;\"><a href=\"http:\/\/WikiEducator.org\/File:Rotary_engine_-_animation_slower.gif\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"Rotary engine - animation slower.gif\" src=\"\/\/WikiEducator.org\/images\/thumb\/f\/f1\/Rotary_engine_-_animation_slower.gif\/116px-Rotary_engine_-_animation_slower.gif\" width=\"116\" height=\"120\" class=\"img-responsive\"><\/a><\/div>\n<\/div>\n<div class=\"gallerytext\">\n\t\t\t<\/div>\n<\/p><\/div>\n<\/li>\n<li class=\"gallerybox\" style=\"width: 155px\">\n<div style=\"width: 155px\">\n<div class=\"thumb\" style=\"width: 150px;\">\n<div style=\"margin:30px auto;\"><a href=\"http:\/\/WikiEducator.org\/File:Newtons_cradle_animation_smooth.gif\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"Newtons cradle animation smooth.gif\" src=\"\/\/WikiEducator.org\/images\/thumb\/0\/02\/Newtons_cradle_animation_smooth.gif\/120px-Newtons_cradle_animation_smooth.gif\" width=\"120\" height=\"90\" class=\"img-responsive\"><\/a><\/div>\n<\/div>\n<div class=\"gallerytext\">\n\t\t\t<\/div>\n<\/p><\/div>\n<\/li>\n<li class=\"gallerybox\" style=\"width: 155px\">\n<div style=\"width: 155px\">\n<div class=\"thumb\" style=\"width: 150px;\">\n<div style=\"margin:15px auto;\"><a href=\"http:\/\/WikiEducator.org\/File:AC_wave_Positive_direction.gif\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"AC wave Positive direction.gif\" src=\"\/\/WikiEducator.org\/images\/thumb\/4\/41\/AC_wave_Positive_direction.gif\/118px-AC_wave_Positive_direction.gif\" width=\"118\" height=\"120\" class=\"img-responsive\"><\/a><\/div>\n<\/div>\n<div class=\"gallerytext\">\n\t\t\t<\/div>\n<\/p><\/div>\n<\/li>\n<li class=\"gallerybox\" style=\"width: 155px\">\n<div style=\"width: 155px\">\n<div class=\"thumb\" style=\"width: 150px;\">\n<div style=\"margin:15px auto;\"><a href=\"http:\/\/WikiEducator.org\/File:Seven_segment_display-animated.gif\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"Seven segment display-animated.gif\" src=\"\/\/WikiEducator.org\/images\/thumb\/2\/2b\/Seven_segment_display-animated.gif\/96px-Seven_segment_display-animated.gif\" width=\"96\" height=\"120\" class=\"img-responsive\"><\/a><\/div>\n<\/div>\n<div class=\"gallerytext\">\n\t\t\t<\/div>\n<\/p><\/div>\n<\/li>\n<li class=\"gallerybox\" style=\"width: 155px\">\n<div style=\"width: 155px\">\n<div class=\"thumb\" style=\"width: 150px;\">\n<div style=\"margin:15px auto;\"><a href=\"http:\/\/WikiEducator.org\/File:Geyser_animation.gif\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"Geyser animation.gif\" src=\"\/\/WikiEducator.org\/images\/thumb\/3\/3f\/Geyser_animation.gif\/110px-Geyser_animation.gif\" width=\"110\" height=\"120\" class=\"img-responsive\"><\/a><\/div>\n<\/div>\n<div class=\"gallerytext\">\n\t\t\t<\/div>\n<\/p><\/div>\n<\/li>\n<li class=\"gallerybox\" style=\"width: 155px\">\n<div style=\"width: 155px\">\n<div class=\"thumb\" style=\"width: 150px;\">\n<div style=\"margin:20px auto;\"><a href=\"http:\/\/WikiEducator.org\/File:Rise_and_Fall_of_the_Ottoman_Empire_1300-1923int.gif\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"Rise and Fall of the Ottoman Empire 1300-1923int.gif\" src=\"\/\/WikiEducator.org\/images\/thumb\/9\/9e\/Rise_and_Fall_of_the_Ottoman_Empire_1300-1923int.gif\/120px-Rise_and_Fall_of_the_Ottoman_Empire_1300-1923int.gif\" width=\"120\" height=\"110\" class=\"img-responsive\"><\/a><\/div>\n<\/div>\n<div class=\"gallerytext\">\n\t\t\t<\/div>\n<\/p><\/div>\n<\/li>\n<li class=\"gallerybox\" style=\"width: 155px\">\n<div style=\"width: 155px\">\n<div class=\"thumb\" style=\"width: 150px;\">\n<div style=\"margin:41px auto;\"><a href=\"http:\/\/WikiEducator.org\/File:Cinemagraph_de_fleur_de_pommier_-_640px.gif\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"Cinemagraph de fleur de pommier - 640px.gif\" src=\"\/\/WikiEducator.org\/images\/thumb\/d\/d3\/Cinemagraph_de_fleur_de_pommier_-_640px.gif\/120px-Cinemagraph_de_fleur_de_pommier_-_640px.gif\" width=\"120\" height=\"68\" class=\"img-responsive\"><\/a><\/div>\n<\/div>\n<div class=\"gallerytext\">\n\t\t\t<\/div>\n<\/p><\/div>\n<\/li>\n<\/ul>\n<ul>\n<li> <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/www.digitalcitizen.life\/how-create-animated-gif-using-your-own-pictures-gimp\">How to create an animated GIF using GIMP<\/a>\n<\/li>\n<\/ul>\n<div class=\"plainlinks floatleft\"><iframe loading=\"lazy\" width=\"425px\" height=\"355px\" src=\"\/\/www.youtube.com\/embed\/K0CnxJBhvdg?rel=0\" frameborder=\"0\" allowfullscreen=\"\"><\/iframe><\/div>\n<p><br style=\"clear:both;\"><\/p>\n<p>Note, the following video does not have a sound track.\n<\/p>\n<div class=\"plainlinks floatleft\"><iframe loading=\"lazy\" width=\"425px\" height=\"355px\" src=\"\/\/www.youtube.com\/embed\/F9aixfigSNc?rel=0\" frameborder=\"0\" allowfullscreen=\"\"><\/iframe><\/div>\n<p><br style=\"clear:both;\"><\/p>\n<p>\n<\/p>\n<p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p>\n<\/p>\n<div class=\"panel iDevice\">\n\t<div class=\"panel-heading idevice-heading\">\n\t\t<div>\n\t\t\t<img decoding=\"async\" class=\"pedagogicalicon\" alt=\"objectives\" src=\"https:\/\/course.oeru.org\/lida100\/wp-content\/themes\/oeru_course\/idevices\/Icon_objectives.png\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h2>Purpose<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"panel-body\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<\/p>\n<p>The purpose of this mini challenge is to develop and improve your digital skills in creating media using the animated GIF format.\n<\/p>\n<p>(Note: You are not required to produce sophisticated or complex animated GIFS. The intention is to think creatively within the constraints of your current level of expertise.)\n<\/p>\n<p>\n<\/p>\n<p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p>\n<\/p>\n<h2><span class=\"mw-headline\" id=\"Tasks\">Tasks<\/span><\/h2>\n<div class=\"thumb tright\">\n<div class=\"thumbinner thumbnail\" style=\"width:322px;\"><a href=\"http:\/\/WikiEducator.org\/File:OERu-logo-animation_s.gif\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"\/\/WikiEducator.org\/images\/a\/a1\/OERu-logo-animation_s.gif\" width=\"320\" height=\"160\" class=\"thumbimage img-responsive\"><\/a>  <\/p>\n<div class=\"thumbcaption\">A simple animation created by adding the letters and text to separate frames to generate an animated sequence.<\/div>\n<\/div>\n<\/div>\n<ol>\n<li> Think about an authentic application for your animated GIF, which could be used in your multimodal presentation assignment for this microcourse. For example:\n<ul>\n<li> A <a href=\"http:\/\/en.wikipedia.org\/wiki\/Cinemagraph\" class=\"extiw\" title=\"w:Cinemagraph\">cinemagraph<\/a> for subtle visual interest in a professional presentation.\n<\/li>\n<li> A diagram or graph where changes in colour can be used for emphasis or attention during a written or verbal explanation.\n<\/li>\n<li> A short screen cast showing how to navigate a website with text inserts or highlights to provide support.\n<\/li>\n<li> An animation for marketing promotion in social media, for example a Twitter post.\n<\/li>\n<\/ul>\n<\/li>\n<li> Note: There are online web services that will automatically convert video files into animated GIFs. You shouldn&#8217;t use this approach because the learning output actions require a blog post showing examples of the still image frames you used to generate the animation.\n<\/li>\n<li>  You are free to use any graphic software package with the capability of generating animated GIFs from still frames. GIMP is a good open source software option. <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/www.gimp.org\/downloads\/\">Download<\/a> the correct option for your operating system and install the software.\n<ul>\n<li> You can use graphic software that you are familiar with to generate the images, and then open them in GIMP to generate the animination. In GIMP, select all the image files you created (these should be number sequentially, e.g Imagename01, Imagename02, Imagename03 etc) and use: File -&gt; Open as layers.\n<\/li>\n<li> Search online for help resources and tutorials if you&#8217;re not sure what to do.\n<\/li>\n<\/ul>\n<\/li>\n<li> Export your image sequence as a GIF following the instructions provided in the stimulus resources above.\n<\/li>\n<\/ol>\n<h2><span class=\"mw-headline\" id=\"Outputs\">Outputs<\/span><\/h2>\n<div class=\"panel iDevice\">\n\t<div class=\"panel-heading idevice-heading\">\n\t\t<div>\n\t\t\t<img decoding=\"async\" class=\"pedagogicalicon\" alt=\"activity\" src=\"https:\/\/course.oeru.org\/lida100\/wp-content\/themes\/oeru_course\/idevices\/Icon_activity.png\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h2>Learning output actions<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"panel-body\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<\/p>\n<p><b>Example blog posts<\/b>\n<\/p>\n<div class=\"thumb tright\">\n<div class=\"thumbinner thumbnail\" style=\"width:322px;\"><a href=\"http:\/\/WikiEducator.org\/File:Building-ripples-anim.gif\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"\/\/WikiEducator.org\/images\/thumb\/6\/61\/Building-ripples-anim.gif\/320px-Building-ripples-anim.gif\" width=\"320\" height=\"205\" class=\"thumbimage img-responsive\"><\/a>  <\/p>\n<div class=\"thumbcaption\">Animated GIF generated from photographs by <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/cogdogblog.com\/2011\/10\/animated-gifs-your-photos\/\">Alan Levine<\/a><\/div>\n<\/div>\n<\/div>\n<p>Publish a short blog post (about 300 words) sharing the process you followed for generating the animated GIF, including a short comment on why you chose the subject matter.<\/p>\n<ul>\n<li> <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/cogdogblog.com\/2011\/10\/animated-gifs-your-photos\/\">Animated GIFs from Your Own Photos<\/a>\n<\/li>\n<li> <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/cogdogblog.com\/2011\/11\/metal-monsters\/\">Metal monsters<\/a>\n<\/li>\n<\/ul>\n<ol>\n<li> Your blog post should:\n<ul>\n<li> Contain at least two of the still frames you used to generate the animation.\n<\/li>\n<li> Embed the resultant animated GIF.\n<\/li>\n<li> Summarise the process and tools that you used.\n<\/li>\n<li> Provide a personal reflection on your experience with this creative process.\n<\/li>\n<\/ul>\n<\/li>\n<li>  Remember to tag or label your post using the course code: <b>lida104<\/b>\n<\/li>\n<li> Upload a copy of your animated GIF on <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/mastodon.oeru.org\">mastodon.oeru.org<\/a> or Twitter with a creative caption using the hashtag <b>#lida104image<\/b>\n<\/li>\n<\/ol>\n<p>\n<\/p>\n<p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p><!-- \nNewPP limit report\nCPU time usage: 0.188 seconds\nReal time usage: 2.634 seconds\nPreprocessor visited node count: 572\/1000000\nPreprocessor generated node count: 1721\/1000000\nPost\u2010expand include size: 12601\/2097152 bytes\nTemplate argument size: 5629\/2097152 bytes\nHighest expansion depth: 8\/40\nExpensive parser function count: 0\/100\n--><\/p>\n<p><!-- Saved in parser cache with key wikiedu-mw_:pcache:idhash:182147-0!*!*!!*!2!* and timestamp 20180305235213 and revision id 1035546\n -->\n<\/div>\n<div class=\"visualClear\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-12\">\n<ul class=\"pager\">\n<li class=\"previous\">\n            <a href=\"\/lida100\/unit-4\/create-media\/diagram-remix\">\u2190 Previous<\/a>\n          <\/li>\n<li class=\"next\">\n            <a href=\"\/lida100\/unit-4\/create-media\/html-slideshow\">Next \u2192<\/a>\n          <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/div>\n<footer>\n<br \/>\n<\/footer>\n","protected":false},"excerpt":{"rendered":"<p>A cinemagraph showing reeds waving in the wind. The Graphics Interchange Format (GIF) is a bitmap image format. The format can support the compilation of a sequence of still images and when played back, it generates a moving picture. GIF animations are gaining popularity again as a form of creative expression and as a method [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1130,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1138","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/pages\/1138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/comments?post=1138"}],"version-history":[{"count":1,"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/pages\/1138\/revisions"}],"predecessor-version":[{"id":1139,"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/pages\/1138\/revisions\/1139"}],"up":[{"embeddable":true,"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/pages\/1130"}],"wp:attachment":[{"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/media?parent=1138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}