{"id":153,"date":"2020-06-15T22:30:21","date_gmt":"2020-06-16T05:30:21","guid":{"rendered":"https:\/\/blogs.ubc.ca\/lauraulrich\/?p=153"},"modified":"2020-06-17T08:46:28","modified_gmt":"2020-06-17T15:46:28","slug":"modebending","status":"publish","type":"post","link":"https:\/\/blogs.ubc.ca\/lauraulrich\/2020\/06\/15\/modebending\/","title":{"rendered":"Mode Bending &#038; Multiliteracies"},"content":{"rendered":"<h2 style=\"text-align: center;\"><em>\u201cGet in over your head as often and as joyfully as possible.\u201d<\/em> \u2013Alexander Isley<\/h2>\n<p style=\"text-align: center;\"><iframe loading=\"lazy\" class=\"giphy-embed\" src=\"https:\/\/giphy.com\/embed\/iJDQ3Vla3o6Nq\" width=\"480\" height=\"270\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>When I saw that we were returning to our first task, I wanted to see if I could take what I had previously constructed <em>further<\/em>.\u00a0Ernesto had commented that <a href=\"https:\/\/blogs.ubc.ca\/lauraulrich\/2020\/05\/18\/my-bag\/\"><em>how<\/em> I approached the first bag task<\/a> said more about me than its actual contents. I wanted to push myself to make something I hadn&#8217;t before. It only seemed logical, still thrilling as I was from my <a href=\"https:\/\/blogs.ubc.ca\/lauraulrich\/2020\/06\/06\/twine\/\">remixed Twine-game<\/a>, to attempt to make my animation interactive through code.<\/p>\n<p>In a way, this task is a response from my inner-teen, who was submerged in the Internet when many of our readings were being published. It is a reply to the academic examination of the cyberculture I was part of. There was a charm to those early days of Web 2.0&#8230; something gritty and experimental, celebrating personal expression without standardized filters. Seeing a profile page with coloured text, animated backgrounds, and auto-playing music demonstrated not only the maker&#8217;s interests but also their digital prowess. I miss the bizarre Flash games, the personalized MySpaces, and the <a href=\"https:\/\/vimeo.com\/173781395\">wacky CD-ROM games<\/a> where you clicked things to see what would happen. In that spirit, and with the New London Group&#8217;s advocacy for multiliteracies fresh in my mind, I approached this project.<\/p>\n<h1>Please experience it before reading about my process.<\/h1>\n<p>If there is <span style=\"text-decoration: underline;\"><strong>no<\/strong><strong> audio<\/strong><\/span>, try switching to a <span style=\"color: #993366;\"><strong>different<\/strong> <strong>browser, such as Edge<\/strong><\/span>; Chrome can have auto-audio-playing issues. Or, make an <strong>itch.io account<\/strong> and, in your <strong>Account Settings<\/strong>, turn <span style=\"color: #000000;\">on &#8220;Require a click to run HTML5 game embeds&#8221;. I also tested it on my phone, and it works (sort of, it has some trouble with scaling).<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/itch.io\/embed\/672314?linkback=true&amp;border_width=3&amp;bg_color=ffffff&amp;fg_color=000000&amp;link_color=ef127c&amp;border_color=fb65a3\" width=\"556\" height=\"171\" frameborder=\"0\"><a href=\"https:\/\/sleepybirchtree.itch.io\/etec540mybag\">ETEC540MyBag by sleepybirchtree<\/a><\/iframe><\/p>\n<p><!--more--><\/p>\n<p>&#8230;<\/p>\n<p>Ok, you&#8217;ve played it? Great! Let&#8217;s continue.<\/p>\n<p><strong>My goal<\/strong> with this task was to make it as multimodal as I could, for both the viewer and the maker.\u00a0 <strong>Visuals<\/strong>, and perhaps <strong>spatial<\/strong>, were already covered by using the original photo of laid-out possessions. <span style=\"font-size: 16px;\">By making the animation respond to the position of the mouse cursor (or the finger-touch, if using a phone), it became <\/span><strong style=\"font-size: 16px;\">gestural<\/strong><span style=\"font-size: 16px;\">. <\/span><span style=\"font-size: 16px;\">The process of making also included <\/span><strong style=\"font-size: 16px;\">digital and coding literacies<\/strong><span style=\"font-size: 16px;\">. I wanted the redesigned task to be web-based, and since 2020 marks the end of\u00a0 Flash, I used <em>Adobe Animate<\/em> to create it. Animate offers a stage for visuals and facilitates writing in both HTML5 and JavaScript. I had no experience with Animate before this.<\/span><\/p>\n<p>The <strong>audio<\/strong>-aspect was both the easiest and the most difficult. Each clip was carefully selected, created, and\/or remixed. I used audio that I felt encapsulated my relationship with each item, whether it be a <strong>memory<\/strong> (the wallet was bought the summer I visited Haida Gwaii, and the ointment is the same my grandmother used), a <strong>mood<\/strong> (the highlighters&#8217; TA-DA tone, and COVID-19 sticker&#8217;s knocked out tune), or a <strong>thought<\/strong> (the quotes, and the rant about receipts). I used learned to <em>Audacity<\/em> to edit the MP3s, such as trimming, and removing the background noise. Audio added an interesting element to my design process, as I had to decide <span style=\"color: #993366;\"><strong>how I wanted to present my ideas<\/strong><\/span>. For example, I chose a snippet from a scene in the animated film <em>Anastasia\u00a0<\/em>for the ointment&#8217;s audio, because it always reminds me of my grandmother and the ointment we share (she passed away when I was a child, and this memory linked to the smell is one of the strongest I still have of her). Another example is how I chose to present my thoughts on makeup. I could have recorded myself saying the line, or found a similar statement in some viral video, but I felt that the text-to-speech robot best represented my outlook on makeup and the way wearing it triggers compliments.<\/p>\n<p>In my <strong>Blue Sky<\/strong> plan, I wanted a button to switch between English and German, in order to follow the New London Group&#8217;s advocacy for <strong>multilingualism<\/strong>. Perhaps one day, with more coding practice, I will be able to achieve that. Toggling between English and French in videogames is part of what helped me pass my highschool language classes, so perhaps it is my turn to create a similar learning opportunity. Additionally, I meant to investigate how to stop the audio of one object when the next is clicked. In the end, I decided to leave it as is, prone to chaos, as I liked how it let my playtesters create their own sort of &#8220;music&#8221; by clicking multiple objects in rapid succession.<\/p>\n<p><a href=\"https:\/\/blogs.ubc.ca\/lauraulrich\/files\/2020\/06\/modebendingnotebook-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-167 size-large\" src=\"https:\/\/blogs.ubc.ca\/lauraulrich\/files\/2020\/06\/modebendingnotebook-1024x768.jpg\" alt=\"my notebook describing part of my process\" width=\"500\" height=\"375\" srcset=\"https:\/\/blogs.ubc.ca\/lauraulrich\/files\/2020\/06\/modebendingnotebook-1024x768.jpg 1024w, https:\/\/blogs.ubc.ca\/lauraulrich\/files\/2020\/06\/modebendingnotebook-300x225.jpg 300w, https:\/\/blogs.ubc.ca\/lauraulrich\/files\/2020\/06\/modebendingnotebook-768x576.jpg 768w, https:\/\/blogs.ubc.ca\/lauraulrich\/files\/2020\/06\/modebendingnotebook-1536x1152.jpg 1536w, https:\/\/blogs.ubc.ca\/lauraulrich\/files\/2020\/06\/modebendingnotebook-2048x1536.jpg 2048w, https:\/\/blogs.ubc.ca\/lauraulrich\/files\/2020\/06\/modebendingnotebook-500x375.jpg 500w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>As for how I accomplished this, there was a lot of Googling steps <em>similar<\/em> to what I wanted to do, and deconstructing other Animate-games files. I am curious if I could create a similar project with something outside of <em>Adobe Animate<\/em>, ideally with free software. <strong>Adding semiotic modes to a project<\/strong> <strong>enrichens<\/strong> the experiences of both making and viewing.\u00a0I will be making a lesson guide on the process, as I think it could be a very interesting <em>Who Am I?<\/em> project for my future <strong>Digital Art and Computer Science students<\/strong>.<\/p>\n<p style=\"text-align: center;\"><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/oAIrsBltb4A\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>*NOTE:<\/strong> I remembered after filming this &#8220;behind the scenes&#8221; that the code in the file I showed is actually broken. I naively cut out some of the code related to the Play button at the start, dissecting it in an investigation as to why my project would not work after I exported it from <em>Adobe Animate<\/em>. Turns out, any &#8220;game&#8221; of this form that has both buttons and audio must be played online, as the security protocols will block it if playing it directly from the files on your computer.<\/p>\n<h5><strong>Audio Attributions:<\/strong><\/h5>\n<p>Adams, D. (1993). The Hitchhiker&#8217;s Guide to the Galaxy [Audiobook].<\/p>\n<p>Bluth, D, and Goldman, G. (Producers &amp; Directors). (1997). Anastasia [Motion picture]. United States: Fox Animation Studios.<\/p>\n<p>HDCYT. (2007, May 22). Charlie bit my finger &#8211; again ! [Video]. YouTube. https:\/\/youtu.be\/_OBlgSz8sSM<\/p>\n<p>Smithsonian Folkways Recordings. [Various Artists &#8211; Topic]. (2015, May 30). L 18: Haida Song \u00b7 Fred Louis and Ella Thompson [Video]. YouTube. https:\/\/www.youtube.com\/watch?v=cqUrw0m32Yw<\/p>\n<p>Robot Voice recordings from https:\/\/lingojam.com\/RobotVoiceGenerator<\/p>\n<p>&#8220;Drinking glass glugs&#8221; sound effect from Hanna-Barbera Sound Effects Library, by Sound Ideas.<\/p>\n<p>Additional sound effects from www.zapsplat.com<\/p>\n<p>&nbsp;<\/p>\n<h5>CitatioNs:<\/h5>\n<p>Cope, B. &amp; Kalantzis, M. (2009). Multiliteracies: New literacies, new learning. Pedagogies: An International Journal, 4:3, 164-195, DOI:10.1080\/15544800903076044<\/p>\n<p>The New London Group. (1996). A pedagogy of multiliteracies: Designing social futures. Harvard Educational Review 66(1), 60-92.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cGet in over your head as often and as joyfully as possible.\u201d \u2013Alexander Isley When I saw that we were returning to our first task, I wanted to see if I could take what I had previously constructed further.\u00a0Ernesto had commented that how I approached the first bag task said more about me than its [&hellip;]<\/p>\n","protected":false},"author":71851,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"status","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-153","post","type-post","status-publish","format-status","hentry","category-weekly-task","post_format-post-format-status"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/lauraulrich\/wp-json\/wp\/v2\/posts\/153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/lauraulrich\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/lauraulrich\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/lauraulrich\/wp-json\/wp\/v2\/users\/71851"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/lauraulrich\/wp-json\/wp\/v2\/comments?post=153"}],"version-history":[{"count":34,"href":"https:\/\/blogs.ubc.ca\/lauraulrich\/wp-json\/wp\/v2\/posts\/153\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/blogs.ubc.ca\/lauraulrich\/wp-json\/wp\/v2\/posts\/153\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/lauraulrich\/wp-json\/wp\/v2\/media?parent=153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/lauraulrich\/wp-json\/wp\/v2\/categories?post=153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/lauraulrich\/wp-json\/wp\/v2\/tags?post=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}