{"id":1638,"date":"2014-01-16T10:46:46","date_gmt":"2014-01-16T17:46:46","guid":{"rendered":"http:\/\/miriamposner.com\/blog\/?p=1638"},"modified":"2014-03-07T23:51:17","modified_gmt":"2014-03-08T06:51:17","slug":"basics-of-creating-a-scroll-kit-narrative","status":"publish","type":"post","link":"https:\/\/miriamposner.com\/blog\/basics-of-creating-a-scroll-kit-narrative\/","title":{"rendered":"Basics of Creating a Scroll Kit Narrative"},"content":{"rendered":"<p><em>My <a href=\"http:\/\/digitalmateriallabor.org\/\">Digital Labor, Urban Space, and Materiality<\/a>\u00a0class will be using the drag-and-drop framework <a href=\"https:\/\/www.scrollkit.com\/\">Scroll Kit<\/a> to create multimedia &#8220;<a href=\"http:\/\/digitalmateriallabor.org\/final-project\/\">device narratives<\/a>.&#8221; Here&#8217;s the tutorial I&#8217;ve created to teach them to use Scroll Kit. You&#8217;re welcome to download these instructions as a <a href=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/Basics-of-Creating-a-Scroll-Kit-Narrative.pdf\">PDF<\/a> or as a <a href=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/Basics-of-Creating-a-Scroll-Kit-Narrative.docx\">Word document<\/a>, in case you&#8217;d like to modify them.\u00a0<\/em><\/p>\n<p>This is my first Scroll Kit tutorial; the\u00a0<a href=\"https:\/\/miriamposner.com\/blog\/advanced-scroll-kit-techniques-the-parallax-effect\/\">second<\/a>\u00a0covers the parallax effect.<\/p>\n<p>With <a href=\"https:\/\/www.scrollkit.com\/\"><strong>Scroll Kit<\/strong><\/a>, you can create multimedia works in a scrolling format suitable for long-form narratives. It&#8217;s easy to drag and drop elements to create interesting effects. Your project will have a unique Scroll Kit URL, so you can share your project widely (or you can export the code).<\/p>\n<p>Some examples of projects created with Scroll Kit:<\/p>\n<ul>\n<li>\u201c<a href=\"http:\/\/epicmagazine.com\/2013\/08\/deep-sea-cowboys\/\">Deep Sea Cowboys<\/a>\u201d (<i>Epic Magazine<\/i>)<\/li>\n<li>\u201c<a href=\"http:\/\/www.smithsonianmag.com\/history-archaeology\/an-oral-history-of-the-march-on-washington\/\">An Oral History of the March on Washington<\/a>\u201d (<i>Smithsonian Magazine<\/i>)<\/li>\n<li>\u201c<a href=\"http:\/\/contently.com\/strategist\/2013\/07\/01\/the-true-story-of-the-brooklyn-nets\/\">Brooklyn Took It<\/a>\u201d (<i>Contently<\/i>)<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">Sign up<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389824046557.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389824046557.png\" width=\"540\" height=\"330\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>Go to www.scrollkit.com and click on <strong>Signup<i> <\/i><\/strong>in the upper right-hand corner. Enter your information and click <strong>Sign Up<\/strong><i>.<\/i><\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">Edit your sample scroll<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389824658103.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389824658103.png\" width=\"540\" height=\"419\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>Scroll Kit starts you out with a sample <strong>scroll<\/strong>. (<strong>Scroll <\/strong>is what Scroll Kit calls a project.) Start by double-clicking on the text. You&#8217;ll see you can edit it and change the font, color, and formatting. If you drag the blue frame, you&#8217;ll see that you can move the text around on the scroll.<\/p>\n<p>Other elements on your scroll work similarly. You can click and drag images, text, and other objects, and change their size and position.<\/p>\n<p>You may find it helpful to expand your browser&#8217;s window horizontally, because otherwise buttons on the Scroll Kit toolbar will stack on top of each other.<\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">Enter some information about your new scroll<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389828032333.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389828032333.png\" width=\"315\" height=\"534\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>You can&#8217;t change your scroll&#8217;s URL (yet), but you can give it a name and description to allow search engines to find it more easily. You can also make your scroll public or private.<\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">Save often<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389825709756.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389825709756.png\" width=\"197\" height=\"126\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>Scroll Kit doesn&#8217;t really allow you to undo or revert changes unless you save a version by pressing <strong>Done<\/strong>. So please get in the habit of clicking <strong>Done<\/strong> often to save your changes. (Once you&#8217;ve saved, you can click on the pencil icon to go back to editing your scroll.)<\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">Work with layers.<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389825140182.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389825140182.png\" width=\"540\" height=\"399\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>Just as in Photoshop, Scroll Kit organizes elements in <strong>layers<\/strong>; one object can sit on top of another object. To see the layers, click on the <strong>layers <\/strong>button (<strong>1<\/strong>). In the layers window that pops up, drag the layer you&#8217;d like to place on top to the top of your list (<strong>2<\/strong>).<\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">Change your background<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389825349066.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389825349066.png\" width=\"540\" height=\"344\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>With Scroll Kit, your background can be a solid color, an image, or even a video. You can also tile your background images and change their transparency.<\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">Add an image<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389825893849.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389825893849.png\" width=\"540\" height=\"452\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>Adding an image to Scroll Kit is not unlike adding photos to Facebook. Click on the picture icon and then choose a file from your computer, add one from the web, or choose from the options that Scroll Kit has pre-loaded. Once you&#8217;ve selected an image, you can drag it around and change the size until you&#8217;re happy with its placement.<\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">Change the transparency of an element<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389827849630.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389827849630.png\" width=\"540\" height=\"593\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>To make an element translucent, click on the paint bucket, and then use the <strong>transparency slider<\/strong>.<\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">Draw!<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389826353021.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389826353021.png\" width=\"540\" height=\"380\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>This one is pretty self-explanatory. Click on the pencil icon to draw freehand on your scroll. Click on the color swatch to the right of the pencil to change the color you draw in. (I don&#8217;t know of a way to change the color of your drawing once you&#8217;ve already drawn it.)`<\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">Add video<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389827580795.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389827580795.png\" width=\"540\" height=\"395\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>You can add video to your scroll by clicking on the LEGO block (the <strong>Add-Ons<\/strong> button) and selecting <strong>YouTube<\/strong>. (You can add other kinds of videos by grabbing the iFrame embed code; ask me how.) Once you&#8217;ve selected YouTube, place the rectangular frame where you&#8217;d like your video to appear and then click <strong>Submit<\/strong>.<\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">Add length to your scroll<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389826759266.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389826759266.png\" width=\"540\" height=\"323\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>Each section of your <strong>scroll<\/strong> is called a <strong>strip<\/strong>. Add length to your scroll by either adding a new strip or extending your current strip&#8217;s length. Extend the strip if you want to keep the background and make your additional material continuous with the earlier strip; otherwise, you can change moods and mark divisions by adding a different strip. If you have a lot of text to place (and you probably will), you may want to add a text strip. Text strips won&#8217;t be resized on mobile devices, and you can only drop a few objects on them.<\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">Get rid of a strip<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389827110909.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389827110909.png\" width=\"540\" height=\"375\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>You can delete an entire strip by hovering over the translucent bar on the left hand side. An <strong>x <\/strong>should appear. Click on the x to delete your strip.<\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">See how the scroll will look on your phone<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389828169790.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389828169790.png\" width=\"393\" height=\"701\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>One of the benefits of Scroll Kit is that your narratives will look good on smaller devices, like phones. To see how your scroll will look on a mobile device, click <strong>Done<\/strong> and then click on the iPhone icon.<\/p>\n<\/div>\n<\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\">You built a scroll!<\/h3>\n<div class=\"StepImage\"><img loading=\"lazy\" decoding=\"async\" alt=\"media_1389828245906.png\" src=\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2014\/01\/media_1389828245906.png\" width=\"540\" height=\"314\" \/><\/div>\n<div class=\"StepInstructions\">\n<p>Congrats! Share your scroll by sending the URL to your friends.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>My Digital Labor, Urban Space, and Materiality\u00a0class will be using the drag-and-drop framework Scroll Kit to create multimedia &#8220;device narratives.&#8221; Here&#8217;s the tutorial I&#8217;ve created to teach them to use Scroll Kit. You&#8217;re welcome to download these instructions as a PDF or as a Word document, in case you&#8217;d like to modify them.\u00a0 This is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11,5],"tags":[301,300,302,303,73,268],"class_list":["post-1638","post","type-post","status-publish","format-standard","hentry","category-digital-humanities","category-teaching","category-tools","tag-longform","tag-multimedia","tag-narrative","tag-scroll-kit","tag-tutorial","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts\/1638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/comments?post=1638"}],"version-history":[{"count":13,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts\/1638\/revisions"}],"predecessor-version":[{"id":1685,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts\/1638\/revisions\/1685"}],"wp:attachment":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/media?parent=1638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/categories?post=1638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/tags?post=1638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}