{"id":112,"date":"2017-11-02T11:49:44","date_gmt":"2017-11-02T19:49:44","guid":{"rendered":"https:\/\/jinigo.com\/1\/?p=112"},"modified":"2021-04-17T13:53:10","modified_gmt":"2021-04-17T21:53:10","slug":"middle-school-multi-function-overlay","status":"publish","type":"post","link":"https:\/\/jinigo.com\/1\/2017\/11\/middle-school-multi-function-overlay\/","title":{"rendered":"Middle School | Multi-Function Overlay"},"content":{"rendered":"<div class=\"epyt-video-wrapper\"><iframe loading=\"lazy\"  id=\"_ytid_88816\"  width=\"768\" height=\"432\"  data-origwidth=\"768\" data-origheight=\"432\" src=\"https:\/\/www.youtube.com\/embed\/CYy63lO-do0?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  epyt-is-override  no-lazyload\" title=\"YouTube player\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div>\n<p>In support of the theatrical release of <strong>MIDDLE SCHOOL<\/strong>, we created a cross-device multi-function overlay experience giving users a variety of opportunities to learn more about the film. Included character gallery, create-your-own-doodle book, and trailer.<\/p>\n<h1>Intro Animation<\/h1>\n<p>I collaborated with animator to turn the journal notebook into an animated intro for the overlay experience. The overlay contents would eventually &#8220;live&#8221; inside this book once the animation completed.<\/p>\n\n\t\t<div id='gallery-1' class='gallery galleryid-112 gallery-columns-1 gallery-size-large gallery1'><script type=\"text\/javascript\">\r\n\/\/ <![CDATA[\r\n\tjQuery(document).ready(function () {\r\n\t\tjQuery(\".gallery1 a\").attr(\"rel\",\"gallery1\");\t\r\n\t\tjQuery('a[rel=\"gallery1\"]').colorbox({maxWidth:\"95%\", maxHeight:\"95%\",title: function(){ return jQuery(this).children().attr(\"alt\"); }, });\r\n\t});\r\n\/\/ ]]>\r\n<\/script>\n<figure class=\"gallery-item\">\n<div class=\"gallery-icon\">\r\n<a href=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-1.jpg\" title=\"\" rel=\"gallery1\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-1.jpg\" width=\"768\" height=\"499\" alt=\"\" \/><\/a>\r\n<\/div><\/figure>\r\n\t\t<\/div>\n\n<h1>Meet the Characters<\/h1>\n<p>Keeping in line with the hand-written and hand-made feel of the creatives we have a character gallery which users could continually flip to meet the film&#8217;s lead stars.<\/p>\n\n\t\t<div id='gallery-2' class='gallery galleryid-112 gallery-columns-1 gallery-size-large gallery1'><script type=\"text\/javascript\">\r\n\/\/ <![CDATA[\r\n\tjQuery(document).ready(function () {\r\n\t\tjQuery(\".gallery1 a\").attr(\"rel\",\"gallery1\");\t\r\n\t\tjQuery('a[rel=\"gallery1\"]').colorbox({maxWidth:\"95%\", maxHeight:\"95%\",title: function(){ return jQuery(this).children().attr(\"alt\"); }, });\r\n\t});\r\n\/\/ ]]>\r\n<\/script>\n<figure class=\"gallery-item\">\n<div class=\"gallery-icon\">\r\n<a href=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-3.jpg\" title=\"\" rel=\"gallery1\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-3.jpg\" width=\"768\" height=\"499\" alt=\"\" \/><\/a>\r\n<\/div><\/figure>\r\n\t\t<\/div>\n\n\n\t\t<div id='gallery-3' class='gallery galleryid-112 gallery-columns-4 gallery-size-large gallery1'><script type=\"text\/javascript\">\r\n\/\/ <![CDATA[\r\n\tjQuery(document).ready(function () {\r\n\t\tjQuery(\".gallery1 a\").attr(\"rel\",\"gallery1\");\t\r\n\t\tjQuery('a[rel=\"gallery1\"]').colorbox({maxWidth:\"95%\", maxHeight:\"95%\",title: function(){ return jQuery(this).children().attr(\"alt\"); }, });\r\n\t});\r\n\/\/ ]]>\r\n<\/script>\n<figure class=\"gallery-item\">\n<div class=\"gallery-icon\">\r\n<a href=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-4.jpg\" title=\"\" rel=\"gallery1\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-4.jpg\" width=\"768\" height=\"499\" alt=\"\" \/><\/a>\r\n<\/div><\/figure><figure class=\"gallery-item\">\n<div class=\"gallery-icon\">\r\n<a href=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-5.jpg\" title=\"\" rel=\"gallery1\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-5.jpg\" width=\"768\" height=\"499\" alt=\"\" \/><\/a>\r\n<\/div><\/figure><figure class=\"gallery-item\">\n<div class=\"gallery-icon\">\r\n<a href=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-6.jpg\" title=\"\" rel=\"gallery1\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-6.jpg\" width=\"768\" height=\"499\" alt=\"\" \/><\/a>\r\n<\/div><\/figure><figure class=\"gallery-item\">\n<div class=\"gallery-icon\">\r\n<a href=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-2.jpg\" title=\"\" rel=\"gallery1\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-2.jpg\" width=\"768\" height=\"499\" alt=\"\" \/><\/a>\r\n<\/div><\/figure>\r\n\t\t<\/div>\n\n<h1>Make a Doodle<\/h1>\n<p>So that users could feel just like the main character Rafe, they were encouraged to make &#8212; and share &#8212; their own doodles. Final exported images featured watermark with film title and release message.<\/p>\n\n\t\t<div id='gallery-4' class='gallery galleryid-112 gallery-columns-1 gallery-size-large gallery1'><script type=\"text\/javascript\">\r\n\/\/ <![CDATA[\r\n\tjQuery(document).ready(function () {\r\n\t\tjQuery(\".gallery1 a\").attr(\"rel\",\"gallery1\");\t\r\n\t\tjQuery('a[rel=\"gallery1\"]').colorbox({maxWidth:\"95%\", maxHeight:\"95%\",title: function(){ return jQuery(this).children().attr(\"alt\"); }, });\r\n\t});\r\n\/\/ ]]>\r\n<\/script>\n<figure class=\"gallery-item\">\n<div class=\"gallery-icon\">\r\n<a href=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-7.jpg\" title=\"\" rel=\"gallery1\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-7.jpg\" width=\"768\" height=\"499\" alt=\"\" \/><\/a>\r\n<\/div><\/figure>\r\n\t\t<\/div>\n\n<h1>Trailer<\/h1>\n<p>Upon expansion, the overlay defaulted to the <strong>WATCH TRAILER<\/strong> section. From this main section users were able to access the <strong>MEET THE CHARACTERS<\/strong> and <strong>MAKE A DOODLE<\/strong> sections.<\/p>\n\n\t\t<div id='gallery-5' class='gallery galleryid-112 gallery-columns-1 gallery-size-large gallery1'><script type=\"text\/javascript\">\r\n\/\/ <![CDATA[\r\n\tjQuery(document).ready(function () {\r\n\t\tjQuery(\".gallery1 a\").attr(\"rel\",\"gallery1\");\t\r\n\t\tjQuery('a[rel=\"gallery1\"]').colorbox({maxWidth:\"95%\", maxHeight:\"95%\",title: function(){ return jQuery(this).children().attr(\"alt\"); }, });\r\n\t});\r\n\/\/ ]]>\r\n<\/script>\n<figure class=\"gallery-item\">\n<div class=\"gallery-icon\">\r\n<a href=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-8.jpg\" title=\"\" rel=\"gallery1\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/1-7_middleschool-8.jpg\" width=\"768\" height=\"499\" alt=\"\" \/><\/a>\r\n<\/div><\/figure>\r\n\t\t<\/div>\n\n<h1><span data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Acknowledgements\\nI do not make any ownership claim to the copyrighted works shown on this page.\\nDESIGN \/ DIRECTOR: &quot;}\" data-sheets-userformat=\"{&quot;2&quot;:9089,&quot;3&quot;:{&quot;1&quot;:0},&quot;10&quot;:0,&quot;11&quot;:4,&quot;12&quot;:0,&quot;16&quot;:11}\">Acknowledgement<\/span><\/h1>\n<p><span data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Acknowledgements\\nI do not make any ownership claim to the copyrighted works shown on this page.\\nDESIGN \/ DIRECTOR: &quot;}\" data-sheets-userformat=\"{&quot;2&quot;:9089,&quot;3&quot;:{&quot;1&quot;:0},&quot;10&quot;:0,&quot;11&quot;:4,&quot;12&quot;:0,&quot;16&quot;:11}\">I do not make any ownership claim to the copyrighted works shown on this page.<\/span><\/p>\n<ul>\n<li><strong>CREATIVE DIRECTOR:\u00a0<\/strong>Manuel Donayre<\/li>\n<li><strong>DESIGN LEAD:\u00a0<\/strong>Jose Inigo<\/li>\n<li><strong>DESIGN SUPPORT: <\/strong>Outsourced Serbian Team<\/li>\n<li><strong>ANIMATION: <\/strong>Outsourced Serbian Team<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In support of the theatrical release of MIDDLE SCHOOL, we created a cross-device multi-function overlay experience giving users a variety of opportunities to learn more about the film. Included character gallery, create-your-own-doodle book, and trailer. Intro Animation I collaborated with animator to turn the journal notebook into an animated intro for the overlay experience. The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":297,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[50,22,51,55,20,18,16,168,169,34,23,40,35,52,49,54,19,47,53,24],"class_list":["post-112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interactive-media","tag-50","tag-animation","tag-au","tag-cross-device","tag-design","tag-desktop","tag-film","tag-fyc-automattic","tag-fyc-system1","tag-gn","tag-high-impact","tag-html","tag-illustration","tag-lionsgate","tag-live-demo","tag-mobile","tag-online","tag-overlay","tag-roadshow","tag-ux"],"jetpack_featured_media_url":"https:\/\/jinigo.com\/1\/wp-content\/uploads\/2017\/11\/thumb-1-7.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/jinigo.com\/1\/wp-json\/wp\/v2\/posts\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jinigo.com\/1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jinigo.com\/1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jinigo.com\/1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jinigo.com\/1\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":6,"href":"https:\/\/jinigo.com\/1\/wp-json\/wp\/v2\/posts\/112\/revisions"}],"predecessor-version":[{"id":2091,"href":"https:\/\/jinigo.com\/1\/wp-json\/wp\/v2\/posts\/112\/revisions\/2091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jinigo.com\/1\/wp-json\/wp\/v2\/media\/297"}],"wp:attachment":[{"href":"https:\/\/jinigo.com\/1\/wp-json\/wp\/v2\/media?parent=112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jinigo.com\/1\/wp-json\/wp\/v2\/categories?post=112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jinigo.com\/1\/wp-json\/wp\/v2\/tags?post=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}