{"id":63203,"date":"2024-04-01T03:01:31","date_gmt":"2024-03-31T17:01:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63203"},"modified":"2024-04-02T12:26:33","modified_gmt":"2024-04-02T02:26:33","slug":"making-of-canvas-drag-and-drop-ephemeral-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/making-of-canvas-drag-and-drop-ephemeral-tutorial\/","title":{"rendered":"Making of Canvas Drag and Drop Ephemeral Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/grab_becomes_screenshot.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Making of Canvas Drag and Drop Ephemeral Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/screenshot_again.gif\" title=\"Making of Canvas Drag and Drop Ephemeral Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Making of Canvas Drag and Drop Ephemeral Tutorial<\/p><\/div>\n<p>Some recent tutorials called <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-drag-and-drop-primer-tutorial' title='Canvas Drag and Drop Primer Tutorial'>Canvas Drag and Drop Primer Tutorial<\/a> and <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-drag-and-drop-less-ephemeral-tutorial'  title='Canvas Drag and Drop Less Ephemeral Tutorial'>Canvas Drag and Drop Less Ephemeral Tutorial<\/a> involved animated GIF presentations with slides created via the macOS Screenshot desktop application utility <font size=1>(ie. in \/Applications\/Utilities folder)<\/font> we talked about with <a title='Screenshot macOS Utility Primer Tutorial' href='#sosupt'>Screenshot macOS Utility Primer Tutorial<\/a> previously.  Three aspects of screenshotting, in order of difficulty, are of interest for matters beyond the ken of our usual command-control-shift-3 (99.99999% solution) &#8230; <\/p>\n<ul>\n<li>drag and drop display<\/li>\n<li>any display of cursor position<\/li>\n<li>tailored cursor styling display<\/li>\n<\/ul>\n<p>In the first <i>drag and drop display<\/i> case we&#8217;re interested in with those <i>Ephemeral Tutorial<\/i> presentations (as animated GIF slides) it&#8217;s the case that two people could achieve it, because one person runs out of fingers.  We can simulate that second person being there via the use of the macOS Screenshot desktop application&#8217;s timed <i>Capture<\/i> modes of use, setting this off as a ten second delay, and being ready with the drag and drop at that correct time, as the software takes the appropriate screenshot.<\/p>\n<p>Also useful to us was to check the <i>Options<\/i> menu&#8217;s <i>Show Mouse Pointer<\/i> option to satisfy that second option <i>ideal<\/i> screenshotting mode of operation above.  We&#8217;ll leave you with two presentation animated GIF presentations enhanced by this macOS Screenshots magic!<\/p>\n<p><img src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_drag_and_drop.gif'><\/img><\/p>\n<p><img src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_drag_and_drop_less_ephemeral.gif'><\/img><\/p>\n<p> &#8230; but it cannot help, itself, with a tailored cursor styling display, though <font size=1>(we&#8217;re not sure we weren&#8217;t dreaming, but)<\/font> can assist in combination with command-control-shift-3 (as seen with <a target=_blank title='Keyboard Based Cursor Image CSS Filter Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-image-css-filter-tutorial'>Keyboard Based Cursor Image CSS Filter Tutorial<\/a>) &#8230;<\/p>\n<p><img src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/screenshot_cannotdo.jpg'><\/img><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/making-of-canvas-drag-and-drop-ephemeral-tutorial\/'>Making of Canvas Drag and Drop Ephemeral Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sosupt'>Previous relevant <a target=_blank title='Screenshot macOS Utility Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/screenshot-macos-utility-primer-tutorial\/'>Screenshot macOS Utility Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/grab_becomes_screenshot.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Screenshot macOS Utility Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/grab_becomes_screenshot.jpg\" title=\"Screenshot macOS Utility Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Screenshot macOS Utility Primer Tutorial<\/p><\/div>\n<p>We find using this macOS based MacBook Air (and ahead of that a Mac OS X based MacBook Pro), that the taking of screenshots is incredibly useful in helping explain goings on in I.T..  The Mac woooooorrrrrllllldddd has always been really good at this (and Windows PrtScrn key is hard to beat too), in a chronological sense for us, consisting of &#8230;<\/p>\n<ol>\n<li>years of Mac OS X based MacBook Pro use of Applications -&gt; Utilities &#8220;Grab&#8221; desktop application to screenshot &#8230; great &#8230; but even better we cottoned onto &#8230;<\/li>\n<li>years of Mac OS X based MacBook Pro and macOS based MacBook Air use of &#8220;control-command-shift-3&#8221; to screenshot &#8230; and occasionally &#8230;<\/li>\n<li>Mac OS X or macOS Terminal application &#8220;screencapture&#8221; &#8230; and, today, back out to the GUI we want to show you &#8230;<\/li>\n<li>macOS based MacBook Air use of Applications -&gt; Utilities &#8220;Screenshot&#8221; desktop application to screenshot<\/li>\n<\/ol>\n<p> &#8230; and our verdict comparing old &#8220;Grab&#8221; to new &#8220;Screenshot&#8221;.  &#8220;Screenshot&#8221; is quite definitive, as you&#8217;d expect, and can have you tailoring screen selection areas, and cute functionalities like &#8220;delayed takes&#8221; that make it worth a good look, and we&#8217;d say &#8230;<\/p>\n<blockquote><p>\n<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/grab_becomes_screenshot.jpg\" title=\"Click picture\">Every <strike>picture<\/strike>screenshot is worth a thousand words!<\/a>\n<\/p><\/blockquote>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d54454' onclick='var dv=document.getElementById(\"d54454\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/screenshot\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54454' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d63203' onclick='var dv=document.getElementById(\"d63203\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/timer\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63203' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Some recent tutorials called Canvas Drag and Drop Primer Tutorial and Canvas Drag and Drop Less Ephemeral Tutorial involved animated GIF presentations with slides created via the macOS Screenshot desktop application utility (ie. in \/Applications\/Utilities folder) we talked about with &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/making-of-canvas-drag-and-drop-ephemeral-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,29,37],"tags":[83,2127,320,590,2178,980,1776,4714,1149,1282,1319],"class_list":["post-63203","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-operating-system","category-tutorials","tag-animated-gif","tag-cursor","tag-desktop-application","tag-image","tag-macos","tag-presentation","tag-screenshot","tag-screenshots","tag-slide","tag-timer","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63203"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=63203"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63203\/revisions"}],"predecessor-version":[{"id":63228,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63203\/revisions\/63228"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=63203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=63203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=63203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}