sfg/ComposerHelp.html at master · writerdean/sfg · 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
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
<!DOCTYPE html>
    <html>
    <head>
        <title>Composer Help</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <!--       <link rel="stylesheet" type="text/css" href="sfghelp.css">. -->


<style>
    body {
  background-color: white;
  color: black;
  margin: 0;
  font-family: Arial, Verdana, sans-serif;
}

a:link {color: #0000ff;}
a:visited {color: black;}
a:hover {color: blue;}
a:active {color: #f1f1f1;}
ul li {display: inline-block;float: right;}

.topnav {
  overflow: hidden;
  background-color: white;
  color: black;
  margin: auto;
  width: 50%;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: black;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 1200px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1200px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
    </head>
    <body id="composer">

  <!--   MENU  -->

<div class="topnav" id="myTopnav" style="text-align: center;">
  <a href="index.html">Home</a>
  <a href="EditorHelp.html">Editor</a>
  <a href="TextEditorHelp.html">Text Editor</a>
  <!--<a href="index.html/#thewebs">Contact</a>-->
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>


<!--  END MENU  -->


<!--  PAGE CONTENT  -->


<div class="container">

    <h2>Tutorials</h2>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Tutorials</a>
          </h4>
        </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Splode Lab has lots of features; to help you get going we've created some <a href="https://www.youtube.com/channel/UCHk6P_hwPrBYFRPMgERKoww" id="link" target="_blank">tutorials</a> that cover the basics.</p>
    <p>P.S. Make sure your sound is on to hear audio!</div>
      </div>
    </div>

	 <h2>How to Create Compositions</h2>
    <div class="panel-group" id="accordion1">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion1" href="#collapse2">How to Create Compositions</a>
          </h4>
        </div>
      <div id="collapse2" class="panel-collapse collapse in">
        <div class="panel-body">
			<p>The Compose view allows you use the <strong>brushes</strong> to record, edit and share your scenes.</p>
			<p>On the bottom of the display you will find a collection of brushes. Tapping on a brush will allow you to draw with its splode effects.</p>
			<p>On the top of the display you have access to standard playback and record controls: stop, play, record.  Splode Lab works a bit like a beat loops sequencer. You start a recording and add a layer with your brushes.  The sequence will keep looping over and over allowing you to add more layers.
        </div>
      </div>
    </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion1" href="#collapse3">Blur and Bloom</a>
          </h4>
        </div>
      <div id="collapse3" class="panel-collapse collapse in">
        <div class="panel-body">Use the blur control to create a motion blur effect.  The higher the value the longer each pixel will stay on the screen after being drawn.  0 clears right away and 1 never clears.</p>
            <p>The bloom control finds the brightest areas of the screen and adds a glow around them.  Setting a threshold of 0 will bloom everything while 1 will render the scene without the effect.
            </div>
        </div>
    </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion1" href="#collapse4">Scene Name</a>
          </h4>
        </div>
      <div id="collapse4" class="panel-collapse collapse in">
        <div class="panel-body">
            <p>Tap on the name of the current Splode Scene in the center of the header to change its title.</div>
      </div>
    </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion1" href="#collapse5">Emitter Edit Shortcut</a>
          </h4>
        </div>
      <div id="collapse5" class="panel-collapse collapse in">
        <div class="panel-body"><p>Tapping this icon takes you directly to the Emitter Edit view with your last selected emitter ready to edit.</p>
            <p>Make sure you name and snapshot emitters to make it easier to know which one you are editing.</div>
      </div>
    </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion1" href="#collapse6">View</a>
          </h4>
        </div>
      <div id="collapse6" class="panel-collapse collapse in">
        <div class="panel-body">Tapping this icon will hide all controls so you can see all of your creation during playback.</div>
      </div>
    </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion1" href="#collapse7">Screenshot</a>
          </h4>
        </div>
      <div id="collapse7" class="panel-collapse collapse in">
        <div class="panel-body">Tapping this icon captures an image of your Splode Scene which will be used as a thumbnail in the collection view.</div>
      </div>
    </div>


  <h2>How to Edit Splodes</h2>
    <div class="panel-group" id="accordion2">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapse8">More Options</a>
          </h4>
        </div>
      <div id="collapse8" class="panel-collapse collapse in">
        <div class="panel-body">Additional options are available from the more (...) menu.</div>
      </div>
    </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapse9">Scenes</a>
          </h4>
        </div>
      <div id="collapse9" class="panel-collapse collapse in">
        <div class="panel-body">Options to switch scenes or create a new one.</div>
      </div>
    </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapse10">Reset</a>
          </h4>
        </div>
      <div id="collapse10" class="panel-collapse collapse in">
        <div class="panel-body">Tapping this icon will give you the option to reset all your Splode Brush movements.  All of your visual settings will remain just the recorded movements will be erased.</div>
      </div>
    </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapse11">Export</a>
          </h4>
        </div>
      <div id="collapse11" class="panel-collapse collapse in">
        <div class="panel-body">Tapping this icon will create a recording of the current scene and allow you to share it with friends or save it locally.  When prompted you will need to approve the screen capture for this feature to work.</div>
      </div>
    </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapse12">Touch Options</a>
          </h4>
        </div>
      <div id="collapse12" class="panel-collapse collapse in">
        <div class="panel-body">Choose between Touch or Menu controls for brushes.</div>
      </div>
    </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapse13">Help</a>
          </h4>
        </div>
      <div id="collapse13" class="panel-collapse collapse in">
        <div class="panel-body">View this document or replay the tutorial.</div>
      </div>
    </div>


    <h2>Splode Brushes</h2>
    <div class="panel-group" id="accordion3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion3" href="#collapse14">Splode Brushes</a>
          </h4>
        </div>
      <div id="collapse14" class="panel-collapse collapse in">
        <div class="panel-body">Splode Brushes are located along the bottom of the screen.  Holding down on a brush will cause it to expand, letting you set its components.  Hold down again to collapse the brush.</p>
            <p>Expanding a Splode Brush will reveal all three cells.  Tapping on a cell will bring up a menu where you can pick a new Splode for that cell, edit the Splode currently in the cell, or clear the cell.</p>

            <p>Picking a Splode will bring up the Splode Selection view.  Picking a Splode from the Splode Slection view will add it to the brush.  <strong>Note</strong>: when you pick a Splode that is not in the Current Scene, iit will be copied and you will be asked to confirm that you want it in your Current Scene.  You can then choose that Splode to be used in the Brush.</div>
      </div>
    </div>


      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion3" href="#collapse15">Top Brush Cell</a>
          </h4>
        </div>
      <div id="collapse15" class="panel-collapse collapse in">
        <div class="panel-body">
            <p>Splodes added to the top cell will <strong>only</strong> draw when you first tap down on the display, not when dragging.</div>
      </div>
    </div>


      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion3" href="#collapse16">Middle Brush Cells</a>
          </h4>
        </div>
      <div id="collapse16" class="panel-collapse collapse in">
        <div class="panel-body">
            <p>Splodes added to the middle cells will continue adding emitters as you drag across the display.</div>
      </div>
    </div>


      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion3" href="#collapse17">Bottom Brush Cell</a>
          </h4>
        </div>
      <div id="collapse17" class="panel-collapse collapse in">
        <div class="panel-body">
            <p>Splodes added to the bottom cell will <strong>only</strong> draw when you finish tapping or dragging on the display.</div>
      </div>
    </div>


            <h2>Text Brush</h2>
    <div class="panel-group" id="accordion4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion4" href="#collapse18">Text Brushes</a>
          </h4>
        </div>
      <div id="collapse18" class="panel-collapse collapse in">
        <div class="panel-body">
            <p>Use this brush to add text sprites to your scene.  Each time you tap the next word in your list will be displayed.  Hold to keep text visible longer.  See the text editor help for more details.</div>
      </div>
    </div>


            <h2>About</h2>
            <p>Special thanks: bookwormner, coolbreeze, thou, mantastic, tincan.  Some icons sourced from <a href="https://icons8.com/" target="_blank">icons8.com</a></p>


<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>


</body>
</html>