{"id":710,"date":"2021-04-22T14:49:18","date_gmt":"2021-04-22T18:49:18","guid":{"rendered":"https:\/\/www.unliterate.net\/?p=710"},"modified":"2021-04-22T15:11:36","modified_gmt":"2021-04-22T19:11:36","slug":"flash-flashcard-to-html5","status":"publish","type":"post","link":"https:\/\/www.unliterate.net\/index.php\/2021\/04\/22\/flash-flashcard-to-html5\/","title":{"rendered":"Flash Flashcard to HTML5"},"content":{"rendered":"\n<p>One of the awesome things about hoarding old images and video from the &#8220;good old&#8221; days is having the ability to bring new life to them. In 2018 I had re-released a friends work that he did for me in April 2013 by re-posting the flash videos that were made. Little did I know that flash would go the way of the dodo bird and browsers would shun files. <\/p>\n\n\n\n<p>As an 8th-year &#8220;octoversary&#8221; I decided to dig down into my old files and grab the original images and audio and bring new life to them. I spent a small, but worthwhile, amount of time generating some reusable code to convert flashcard-style flash presentations to HTML5. This is now done over on <a href=\"\/index.php\/t-c-in-2013\/\" data-type=\"URL\" data-id=\"\/index.php\/t-c-in-2013\/\">T.C. in 2013<\/a>, and the result is somewhat magnificent.<\/p>\n\n\n\n<p>Earlier in the course of the project we happened across a person who did voicework. She went by the name of &#8220;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.utherverse.com\/net\/profile\/view_profile.aspx?MemberID=94485948\" target=\"_blank\">Shawty Luv<\/a>&#8221; and was able to provide us some starter voicework with our fairs. It was initially proposed to her to do our &#8220;tutorials&#8221;, and she happily did it for 2500 rays ($175 USD at the time). She subsequently delivered goods in zip fashion on 26 Feb 2013.<\/p>\n\n\n\n<p>I decided to compile them together and bring them new life here:<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>A Wardrobe Tutorial:<\/strong><\/p>\n\n\n\n<div id=\"wt_clicker\" style=\"background: rgb(127,127,127); color: rgb(0,0,0); text-align: center; font-weight: bold; width: 489px; height: 304px;\" onclick=\"wt_LoadItUp();\">Hit Here to Start<\/div>\n<div style=\"width: 489px;\" id=\"wt_buttons\"><\/div>\n<div style=\"width: 489px;\" id=\"wt_display\"><\/div>\n<div style=\"width: 489px;\" id=\"wt_audio\"><\/div>\n<script>\nlet wt = [\n  {img:'01.jpg', voice:'01.mp3'},\n  {img:'02.jpg', voice:'02.mp3'},\n  {img:'03.jpg', voice:'03.mp3'},\n  {img:'04.jpg', voice:'04.mp3'},\n  {img:'05.jpg', voice:'05.mp3'},\n  {img:'06.jpg', voice:'06.mp3'},\n  {img:'07.jpg', voice:'07.mp3'},\n  {img:'08.jpg', voice:'08.mp3'},\n  {img:'09.jpg', voice:'09.mp3'},\n  {img:'10.jpg', voice:'10.mp3'},\n  {img:'11.jpg', voice:'11.mp3'},\n  {img:'12.jpg', voice:'12.mp3'},\n  {img:'13.jpg', voice:'13.mp3'},\n  {img:'14.jpg', voice:'14.mp3'},\n  {img:'15.jpg', voice:'15.mp3'},\n  {img:'16.jpg', voice:'16.mp3'},\n];\nfunction wt_LoadItUp()\n{\n  document.getElementById('wt_clicker').style.display=\"none\";\n  let b = document.getElementById('wt_buttons');\n  b.innerHTML = \"Navigation: \";\n  for (let x = 1; x < 17; x++)\n  {\n    let i = b.innerHTML;\n    b.innerHTML = i + '<button onclick=\"wt_showPage(' + x + ');\">' + x + '<\/button>';\n  }\n  wt_showPage(1);\n}\nfunction wt_showPage(page)\n{\n  let p = page - 1;\n  document.getElementById('wt_display').innerHTML = '<img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/04\/wt_' + wt[p].img + '\" \/>';\n  document.getElementById('wt_audio').innerHTML = '<audio id=\"wt-player-' + p + '\" controls src=\"\/wp-content\/uploads\/2021\/04\/wt_' + wt[p].voice + '\">Your browser does not support the audio html element<\/audio>';\n  let plr = document.getElementById('wt-player-' + p);\n  plr.play();\n}\n<\/script>\n\n\n\n<p><strong>How To Shop:<\/strong><\/p>\n\n\n\n<div id=\"hts_clicker\" style=\"background: rgb(127,127,127); color: rgb(0,0,0); text-align: center; font-weight: bold; width: 489px; height: 304px;\" onclick=\"hts_LoadItUp();\">Hit Here to Start<\/div>\n<div style=\"width: 489px;\" id=\"hts_buttons\"><\/div>\n<div style=\"width: 489px;\" id=\"hts_display\"><\/div>\n<div style=\"width: 489px;\" id=\"hts_audio\"><\/div>\n<script>\nlet hts = [\n  {img:'01.jpg', voice:'01.mp3'},\n  {img:'02.jpg', voice:'02.mp3'},\n  {img:'03.jpg', voice:'03.mp3'},\n  {img:'04.jpg', voice:'04.mp3'},\n  {img:'05.jpg', voice:'05.mp3'},\n  {img:'06.jpg', voice:'06.mp3'},\n  {img:'07.jpg', voice:'07.mp3'},\n  {img:'08.jpg', voice:'08.mp3'},\n  {img:'09.jpg', voice:'09.mp3'}\n];\nfunction hts_LoadItUp()\n{\n  document.getElementById('hts_clicker').style.display=\"none\";\n  let b = document.getElementById('hts_buttons');\n  b.innerHTML = \"Navigation: \";\n  for (let x = 1; x < 10; x++)\n  {\n    let i = b.innerHTML;\n    b.innerHTML = i + '<button onclick=\"hts_showPage(' + x + ');\">' + x + '<\/button>';\n  }\n  hts_showPage(1);\n}\nfunction hts_showPage(page)\n{\n  let p = page - 1;\n  document.getElementById('hts_display').innerHTML = '<img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/04\/hts_' + hts[p].img + '\" \/>';\n  document.getElementById('hts_audio').innerHTML = '<audio id=\"hts-player-' + p + '\" controls src=\"\/wp-content\/uploads\/2021\/04\/hts_' + hts[p].voice + '\">Your browser does not support the audio html element<\/audio>';\n  let plr = document.getElementById('hts-player-' + p);\n  plr.play();\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>One of the awesome things about hoarding old images and video from the &#8220;good old&#8221; days is having the ability to bring new life to them. In 2018 I had re-released a friends work that he did for me in April 2013 by re-posting the flash videos that were made. Little did I know that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,7],"tags":[],"class_list":["post-710","post","type-post","status-publish","format-standard","hentry","category-geek-instructions","category-music"],"_links":{"self":[{"href":"https:\/\/www.unliterate.net\/index.php\/wp-json\/wp\/v2\/posts\/710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unliterate.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unliterate.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unliterate.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unliterate.net\/index.php\/wp-json\/wp\/v2\/comments?post=710"}],"version-history":[{"count":5,"href":"https:\/\/www.unliterate.net\/index.php\/wp-json\/wp\/v2\/posts\/710\/revisions"}],"predecessor-version":[{"id":767,"href":"https:\/\/www.unliterate.net\/index.php\/wp-json\/wp\/v2\/posts\/710\/revisions\/767"}],"wp:attachment":[{"href":"https:\/\/www.unliterate.net\/index.php\/wp-json\/wp\/v2\/media?parent=710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unliterate.net\/index.php\/wp-json\/wp\/v2\/categories?post=710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unliterate.net\/index.php\/wp-json\/wp\/v2\/tags?post=710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}