old.misoproject.github.com/storyboard/tutorials/quickstart.html at d0dbc3f1e5d173ed078cdec0c975d7d4dc12f1ed · misoproject/old.misoproject.github.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
  <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
  <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
  <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  <head>
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src='http://use.typekit.com/aow5drr.js' type='text/javascript'></script>
    <script type='text/javascript'>
      try{ Typekit.load(); } catch(e) {}
    </script>
    <meta charset='utf-8' />
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
    <meta content='The Miso Project' name='description' />
    <meta content='The Miso Project' name='name' />
    <meta content='width=device-width' name='viewport' />
    <title>The Miso Project :: Storyboard :: Tutorials</title>
    <link href='/stylesheets/screen.css' rel='stylesheet' />
    <link href='/stylesheets/codemirror.css' rel='stylesheet' />

  </head>
  <body>
    <nav>
      <span class='miso'>
        <a href='/'>
          &larr; Miso Home
        </a>
      </span>
      <span>
        <a href='/storyboard'>
          Home
        </a>
      </span>
      <span>
        <a href='/storyboard/tutorials.html'>
          Tutorials
        </a>
      </span>
      <span>
        <a href='/storyboard/api.html'>
          API Doc
        </a>
      </span>
      <span>
        <a href='http://www.github.com/misoproject/storyboard'>
          Code (Github)
        </a>
      </span>
    </nav>
    <article class='storyboard'>
  <section class='tutorial'>
    <h2>Quick Start!</h2>
    <p>
      There are two ways to use Storyboard:
    </p>
    <h3>In the Browser</h3>
    <p>
      To get storyboard into your web development environment, follow the following steps:
    </p>
    <div class='indent-1'>
      <h4>Download the right build for your environment:</h4>
      <div style='width:100%; display:inline-block;'>
        <div class='download' style='width:100%;'>
          <a class='button' href='https://github.com/downloads/misoproject/storyboard/miso.storyboard.0.0.1.js' onclick="_gaq.push(['_trackEvent', 'Miso.Storyboard', 'Downloads', 'Unminified, No Dependencies']);">
            &darr; development
          </a>
          <a class='button' href='https://github.com/downloads/misoproject/storyboard/miso.storyboard.min.0.0.1.js' onclick="_gaq.push(['_trackEvent', 'Miso.Storyboard', 'Downloads', 'Minified, No Dependencies']);">
            &darr; production (minified)
          </a>
          <a class='button' href='https://github.com/downloads/misoproject/storyboard/miso.storyboard.deps.0.0.1.js' onclick="_gaq.push(['_trackEvent', 'Miso.Storyboard', 'Downloads', 'Unminified, With Dependencies']);">
            &darr; development with dependencies
          </a>
          <a class='button' href='https://github.com/downloads/misoproject/storyboard/miso.storyboard.deps.min.0.0.1.js' onclick="_gaq.push(['_trackEvent', 'Miso.Storyboard', 'Downloads', 'Minified, With Dependencies']);">
            &darr; production with dependencies (minified)
          </a>
        </div>
      </div>
      <h4>Include the appropriate script tags:</h4>
      <p>
        <div class="codeblock"><textarea name="codehelper"  class="code" mode="ace/mode/html"   showConsole="false" buttons="none" autorun="" callbacks-clear="" callbacks-reset="" callbacks-run="">
<!DOCTYPE HTML>
<html>
<head>
<title>Your Application Title</title>
</head>
<body>
  <div id="content">
    <!-- Your content here -->
  </div>

  <!-- Dataset source files -->
  <script src="/js/libs/miso.storyboard.deps.0.0.1.js"></script>

  <!-- Your application code -->
  <script src="js/main.js"></script>

</body>
</html></textarea></div>
      </p>
      <h4>Start using Miso.Storyboard in your code!</h4>
      <p>
        You should now have access to the <code>Miso.Storyboard</code> object in your code.
      </p>
    </div>
    <h3>In Node.js</h3>
    <div class='indent-1'>
      <h4>Install appropriate package:</h4>
      <pre>npm install miso.storyboard</pre>
      <h4>Use the library in code:</h4>
      <pre>&#x000A;var Miso = require("miso.storyboard");&#x000A;var story = new Miso.Storyboard({&#x000A;  //...&#x000A;});</pre>
    </div>
    <h3>Dependencies</h3>
    <div class='indent-1'>
      <p>
        If you chose to include the production version without built in dependencies, you may need to include them yourself. Storyboard requires the following libraries:
        <ul>
          <li><a href="http://lodash.com/">LoDash 0.9.1</a></li>
          <li><a href="https://github.com/wookiehangover/underscore.Deferred">Underscore.deferred.js 0.2.0</a></li>
        </ul>
      </p>
    </div>
    <h2>Creating Your First Storyboard</h2>
    <div class='indent-1'>
      <p>
        First, we define a new Miso.Storyboard and set the following parameters on it:
      </p>
      <h3>Required:</h3>
      <p>
        <ol>
          <li>
            <code>initial</code>
            &ndash; What's the name of the initial scene we will kick off from?
          </li>
          <li>
            <code>scenes</code>
            &ndash; The actual scenes we want to be a part of this storyboard. See below for how one defines a scene.
          </li>
        </ol>
      </p>
      <h4>Optional:</h4>
      <p>
        <ol>
          <li>
            <code>context</code>
            &ndash; What should 'this' be inside each scene? By default the storyboard or scene itself.
          </li>
          <li>
            Any other method or property!! You can define your own functions and properties here.
            They will be available to each other under the <code>this</code> object, but to each scene
            they will be available under <code>this.parent.myCustomFunction()</code>.
          </li>
        </ol>
      </p>
      <h4>Defining a Scene</h4>
      <p>
        A scene has the following key methods:
        <ol>
          <li>
            <code>enter</code>
            &ndash; The function that is called when a scene is entered. You don't have to define it if you don't
            want to. By default, it will just be a passthrough.
            If you want to prevent the transition from happening, you can return <code>false</code> from
            this function, and it will cancel the transition and fail the deferred.
          </li>
          <li>
            <code>exit</code>
            &ndash; The function that is called when a scene is exiting. You don't have to define it if you don't
            want to. By default, it will just be a passthrough.
            If you want to prevent the transition from happening, you can return <code>false</code> from
            this function, and it will cancel the transition and fail the deferred.
          </li>
        </ol>
      </p>
      <h4>Example:</h4>
      <p>
        <div id='walkthrough'>
          Walkthrough text here:
          <br />
        </div>
        <div class="codeblock"><textarea name="codehelper"  class="code" mode=""  runnable="true" showConsole="true" buttons="run,reset,clear" autorun="" callbacks-clear="" callbacks-reset="" callbacks-run="">
var story = new Miso.Storyboard({

  // start on the first pane
  initial : 'pane1',

  // set the context to an element we will be updating
  context : $('.ace-result'),

  scenes : {

    pane1 : {
      enter : function() {
        this.append("First pane! <br />");
      },
      exit : function() {
        this.append("Done with first pane. <br />");
      }
    },

    pane2 : {
      enter : function() {
        this.append("Second pane! <br />");
      },
      exit : function() {
        this.append("Done with second pane. <br />");
      }
    },

    done : {}
  }
});

// this will kick things off on pane 1
story.start();

// then we will instruct the story to go to pane 2
story.to('pane2').then(function() {

  // when we've fully transitioned to pane 2, we will
  // tell the story to be done.
  story.to('done');
});
</textarea><div class="helptext">You can edit the code in this block and rerun it.</div></div>
      </p>
    </div>
    <a href='/storyboard/tutorials/async' style='text-align:right;'>
      <h2>
        Asynchronous Scenes &raquo;
      </h2>
    </a>
  </section>
</article>
    <footer>
      <div class='container'>
        <section>
          <h2>
            A joint project between
          </h2>
          <div class='content'>
            <a href='http://www.guardian.co.uk/profile/guardian-interactive-department'>
              <img alt="Guardian" src="/images/guardian.png"/>
            </a>
            <a href='http://www.bocoup.com'>
              <img alt="Bocoup horizontal 614" src="/images/bocoup-horizontal-614.gif"/>
            </a>
          </div>
        </section>
        <section>
          <h2>
            Supported by
          </h2>
          <div class='content'>
            <a href='http://www.guardian.co.uk/development'>
              <img alt="Global dev" src="/images/global-dev.png"/>
            </a>
            <a href='http://www.gatesfoundation.org/'>
              <img alt="Gates" src="/images/gates.png"/>
            </a>
          </div>
        </section>
      </div>
    </footer>
    <script src='/js/jquery.min.js'></script>
    <script src='/js/nav.js'></script>
    <script src='/js/miso.storyboard.deps.js'></script>
    <script src='/js/bootstrap/transition.js'></script>
    <script src='/js/bootstrap/collapse.js'></script>
    <script charset='utf-8' src='/js/ace-min/ace.js' type='text/javascript'></script>
    <script src='/js/acify.js'></script>

    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-30531498-1']);
      _gaq.push(['_setDomainName', 'misoproject.com']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </body>
</html>