-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·191 lines (140 loc) · 21.4 KB
/
index.html
File metadata and controls
executable file
·191 lines (140 loc) · 21.4 KB
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript In Motion : Editor </title>
<script charset="utf-8" type="text/javascript" src="lib/jquery/jquery-1.4.2.js"> </script>
<script type="text/javascript" src="lib/misc/shortcut.js"> </script> <!-- shall change to: http://www.openjs.com/scripts/events/keyboard_shortcuts/ -->
<script type="text/javascript" src="lib/misc/flockonus_utils.js" ></script>
<script type="text/javascript" src="lib/inmotion/img_manager.js" ></script>
<script type="text/javascript" src="lib/inmotion/core.js" ></script>
<script type="text/javascript" src="lib/inmotion/tween.js" ></script>
<script type="text/javascript" src="lib/inmotion/editor.js" ></script>
<script type="text/javascript" src="lib/inmotion/drawing_table.js" ></script>
<script type="text/javascript" src="lib/inmotion/key_frame.js" ></script>
<script type="text/javascript" src="lib/inmotion/super_bone.js" ></script>
<link type="text/css" rel="stylesheet" href="style/editor.css" />
<link type="text/css" rel="stylesheet" href="style/buttons.css" />
<link type="text/css" rel="stylesheet" href="style/my_modal.css" />
<script type="text/javascript">
//jQuery.noConflict();
j = jQuery;
f = FlockonUS;
</script>
<script type="text/javascript">
// point-zero baby ;)
var $console = j('#console')
function log( info ){
j('#console').prepend( info+" " )
return(true)
}
$e = null;
$im = null;
j(document).ready( function(){
$im = new InMotion('drawingtable')
// TODO setar funcao de resize ao invez.
$e = new Editor()
setTimeout( '$e.resize()', 500 );
$e.add_key_frame()
j('#keyframes dd').live('click', function(e){
$e.focus_key_frame( e.target )
})
$e.set_mode('draw0')
// FUGLY test for Image rendering
var exp_string = "({ '286787sb' : [ { visible: true, p1x:-71, p1y:74, p2x:-71, p2y:74, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-71, p1y:74, p2x:-71, p2y:74, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-71, p1y:74, p2x:-71, p2y:74, shape:'linear', animation: 'default', duration:0.5} ], '212895sb' : [ { visible: true, p1x:-71, p1y:74, p2x:-71, p2y:74, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-71, p1y:74, p2x:-71, p2y:74, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-71, p1y:74, p2x:-71, p2y:74, shape:'linear', animation: 'default', duration:0.5} ], '515298sb' : [ { visible: true, p1x:-89, p1y:55, p2x:-89, p2y:55, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-89, p1y:55, p2x:-89, p2y:55, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-89, p1y:55, p2x:-89, p2y:55, shape:'linear', animation: 'default', duration:0.5} ], '850471sb' : [ { visible: true, p1x:-119, p1y:26, p2x:-119, p2y:26, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-119, p1y:26, p2x:-119, p2y:26, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-119, p1y:26, p2x:-119, p2y:26, shape:'linear', animation: 'default', duration:0.5} ], '89383sb' : [ { visible: true, p1x:-119, p1y:26, p2x:-119, p2y:26, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-119, p1y:26, p2x:-119, p2y:26, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-119, p1y:26, p2x:-119, p2y:26, shape:'linear', animation: 'default', duration:0.5} ], '426184sb' : [ { visible: true, p1x:-90, p1y:79, p2x:-90, p2y:79, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-90, p1y:79, p2x:-90, p2y:79, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-90, p1y:79, p2x:-90, p2y:79, shape:'linear', animation: 'default', duration:0.5} ], '424111sb' : [ { visible: true, p1x:-90, p1y:79, p2x:-90, p2y:79, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-90, p1y:79, p2x:-90, p2y:79, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-90, p1y:79, p2x:-90, p2y:79, shape:'linear', animation: 'default', duration:0.5} ], '896194sb' : [ { visible: true, p1x:-90, p1y:79, p2x:-14, p2y:8, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-90, p1y:79, p2x:-14, p2y:8, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-90, p1y:79, p2x:-14, p2y:8, shape:'linear', animation: 'default', duration:0.5} ], '652157sb' : [ { visible: true, p1x:-14, p1y:8, p2x:-76, p2y:23, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-14, p1y:8, p2x:-75, p2y:23, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-14, p1y:8, p2x:-76, p2y:23, shape:'linear', animation: 'default', duration:0.5} ], '668307sb' : [ { visible: true, p1x:-76, p1y:23, p2x:-117, p2y:-2, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-76, p1y:23, p2x:-117, p2y:-2, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-76, p1y:23, p2x:-117, p2y:-2, shape:'linear', animation: 'default', duration:0.5} ], '914849sb' : [ { visible: true, p1x:-117, p1y:-2, p2x:-143, p2y:-27, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-117, p1y:-2, p2x:-143, p2y:-27, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-117, p1y:-2, p2x:-143, p2y:-27, shape:'linear', animation: 'default', duration:0.5} ], '122770sb' : [ { visible: true, p1x:-143, p1y:-27, p2x:-51, p2y:-63, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-143, p1y:-27, p2x:-55, p2y:-66, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-143, p1y:-27, p2x:-51, p2y:-63, shape:'linear', animation: 'default', duration:0.5} ], '718059sb' : [ { visible: true, p1x:-48, p1y:-65, p2x:-154, p2y:-81, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-48, p1y:-65, p2x:-154, p2y:-81, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-48, p1y:-65, p2x:-154, p2y:-81, shape:'linear', animation: 'default', duration:0.5} ], '589295sb' : [ { visible: true, p1x:-154, p1y:-81, p2x:-175, p2y:-46, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-154, p1y:-81, p2x:-175, p2y:-46, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-154, p1y:-81, p2x:-175, p2y:-46, shape:'linear', animation: 'default', duration:0.5} ], '30972sb' : [ { visible: true, p1x:-175, p1y:-46, p2x:-160, p2y:28, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-175, p1y:-46, p2x:-160, p2y:28, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-175, p1y:-46, p2x:-160, p2y:28, shape:'linear', animation: 'default', duration:0.5} ], '895739sb' : [ { visible: true, p1x:-191, p1y:70, p2x:-191, p2y:70, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-191, p1y:70, p2x:-191, p2y:70, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-191, p1y:70, p2x:-191, p2y:70, shape:'linear', animation: 'default', duration:0.5} ], '507315sb' : [ { visible: true, p1x:-191, p1y:70, p2x:-161, p2y:29, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-191, p1y:70, p2x:-161, p2y:29, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-191, p1y:70, p2x:-161, p2y:29, shape:'linear', animation: 'default', duration:0.5} ], '210232sb' : [ { visible: true, p1x:-161, p1y:29, p2x:-193, p2y:124, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-161, p1y:29, p2x:-193, p2y:124, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-161, p1y:29, p2x:-193, p2y:124, shape:'linear', animation: 'default', duration:0.5} ], '921826sb' : [ { visible: true, p1x:-193, p1y:124, p2x:-124, p2y:109, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-193, p1y:124, p2x:-124, p2y:109, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-193, p1y:124, p2x:-124, p2y:109, shape:'linear', animation: 'default', duration:0.5} ], '659053sb' : [ { visible: true, p1x:-124, p1y:109, p2x:-115, p2y:74, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-124, p1y:109, p2x:-115, p2y:74, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-124, p1y:109, p2x:-115, p2y:74, shape:'linear', animation: 'default', duration:0.5} ], '656949sb' : [ { visible: true, p1x:-115, p1y:74, p2x:-95, p2y:88, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-115, p1y:74, p2x:-95, p2y:88, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-115, p1y:74, p2x:-95, p2y:88, shape:'linear', animation: 'default', duration:0.5} ], '662616sb' : [ { visible: true, p1x:-110, p1y:49, p2x:-96, p2y:74, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-110, p1y:49, p2x:-96, p2y:74, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-110, p1y:49, p2x:-96, p2y:74, shape:'linear', animation: 'default', duration:0.5} ], '507435sb' : [ { visible: true, p1x:-96, p1y:74, p2x:-91, p2y:79, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-96, p1y:74, p2x:-91, p2y:79, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-96, p1y:74, p2x:-91, p2y:79, shape:'linear', animation: 'default', duration:0.5} ], '591549sb' : [ { visible: true, p1x:-91, p1y:79, p2x:-95, p2y:89, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-91, p1y:79, p2x:-95, p2y:89, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:-91, p1y:79, p2x:-95, p2y:89, shape:'linear', animation: 'default', duration:0.5} ], '835177sb' : [ { visible: false, p1x:28, p1y:0, p2x:28, p2y:0, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:28, p1y:0, p2x:28, p2y:0, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:28, p1y:0, p2x:28, p2y:0, shape:'linear', animation: 'default', duration:0.5} ], '902013sb' : [ { visible: false, p1x:6, p1y:10, p2x:6, p2y:10, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:6, p1y:10, p2x:6, p2y:10, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:6, p1y:10, p2x:6, p2y:10, shape:'linear', animation: 'default', duration:0.5} ], '806965sb' : [ { visible: false, p1x:6, p1y:10, p2x:6, p2y:10, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:6, p1y:10, p2x:6, p2y:10, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:6, p1y:10, p2x:6, p2y:10, shape:'linear', animation: 'default', duration:0.5} ], '52242sb' : [ { visible: false, p1x:6, p1y:10, p2x:6, p2y:10, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:6, p1y:10, p2x:6, p2y:10, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:6, p1y:10, p2x:6, p2y:10, shape:'linear', animation: 'default', duration:0.5} ], '376965sb' : [ { visible: false, p1x:6, p1y:10, p2x:97, p2y:-26, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:6, p1y:10, p2x:97, p2y:-26, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:6, p1y:10, p2x:97, p2y:-26, shape:'linear', animation: 'default', duration:0.5} ], '609545sb' : [ { visible: false, p1x:97, p1y:-26, p2x:97, p2y:-26, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:97, p1y:-26, p2x:97, p2y:-26, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:97, p1y:-26, p2x:97, p2y:-26, shape:'linear', animation: 'default', duration:0.5} ], '402136sb' : [ { visible: false, p1x:55, p1y:-54, p2x:55, p2y:-54, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:55, p1y:-54, p2x:55, p2y:-54, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:55, p1y:-54, p2x:55, p2y:-54, shape:'linear', animation: 'default', duration:0.5} ], '692511sb' : [ { visible: false, p1x:3, p1y:-83, p2x:3, p2y:-83, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:0, p1y:-89, p2x:3, p2y:-83, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:3, p1y:-83, p2x:3, p2y:-83, shape:'linear', animation: 'default', duration:0.5} ], '439860sb' : [ { visible: false, p1x:97, p1y:-52, p2x:97, p2y:-52, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:97, p1y:-52, p2x:97, p2y:-52, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:97, p1y:-52, p2x:97, p2y:-52, shape:'linear', animation: 'default', duration:0.5} ], '199879sb' : [ { visible: false, p1x:17, p1y:-81, p2x:17, p2y:-81, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:17, p1y:-81, p2x:17, p2y:-81, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:17, p1y:-81, p2x:17, p2y:-81, shape:'linear', animation: 'default', duration:0.5} ], '422489sb' : [ { visible: false, p1x:95, p1y:-29, p2x:51, p2y:-88, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:95, p1y:-29, p2x:52, p2y:-86, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:95, p1y:-29, p2x:52, p2y:-86, shape:'linear', animation: 'default', duration:0.5} ], '973720sb' : [ { visible: false, p1x:51, p1y:-88, p2x:51, p2y:-88, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:51, p1y:-88, p2x:51, p2y:-88, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:51, p1y:-88, p2x:51, p2y:-88, shape:'linear', animation: 'default', duration:0.5} ], '464907sb' : [ { visible: false, p1x:54, p1y:-86, p2x:54, p2y:-86, shape:'linear', animation: 'default', duration:0.5}, { visible: false, p1x:54, p1y:-86, p2x:54, p2y:-86, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:54, p1y:-86, p2x:54, p2y:-86, shape:'linear', animation: 'default', duration:0.5} ], '228756sb' : [ { visible: false, p1x:148, p1y:-49, p2x:148, p2y:-49, shape:'linear', animation: 'default', duration:0.5}, { visible: false, p1x:148, p1y:-49, p2x:148, p2y:-49, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:148, p1y:-49, p2x:148, p2y:-49, shape:'linear', animation: 'default', duration:0.5} ], '717941sb' : [ { visible: false, p1x:148, p1y:-49, p2x:148, p2y:-49, shape:'linear', animation: 'default', duration:0.5}, { visible: false, p1x:148, p1y:-49, p2x:148, p2y:-49, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:148, p1y:-49, p2x:148, p2y:-49, shape:'linear', animation: 'default', duration:0.5} ], '136263sb' : [ { visible: false, p1x:148, p1y:-49, p2x:148, p2y:-49, shape:'linear', animation: 'default', duration:0.5}, { visible: false, p1x:148, p1y:-49, p2x:148, p2y:-49, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:148, p1y:-49, p2x:148, p2y:-49, shape:'linear', animation: 'default', duration:0.5} ], '837390sb' : [ { visible: false, p1x:149, p1y:-48, p2x:149, p2y:-48, shape:'linear', animation: 'default', duration:0.5}, { visible: false, p1x:149, p1y:-48, p2x:149, p2y:-48, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:149, p1y:-48, p2x:149, p2y:-48, shape:'linear', animation: 'default', duration:0.5} ], '440006sb' : [ { visible: false, p1x:71, p1y:-102, p2x:71, p2y:-102, shape:'linear', animation: 'default', duration:0.5}, { visible: false, p1x:71, p1y:-102, p2x:71, p2y:-102, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:71, p1y:-102, p2x:71, p2y:-102, shape:'linear', animation: 'default', duration:0.5} ], '922623sb' : [ { visible: false, p1x:96, p1y:-129, p2x:96, p2y:-129, shape:'linear', animation: 'default', duration:0.5}, { visible: false, p1x:96, p1y:-129, p2x:96, p2y:-129, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:96, p1y:-129, p2x:96, p2y:-129, shape:'linear', animation: 'default', duration:0.5} ], '686081sb' : [ { visible: false, p1x:61, p1y:-92, p2x:61, p2y:-92, shape:'linear', animation: 'default', duration:0.5}, { visible: false, p1x:61, p1y:-92, p2x:61, p2y:-92, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:61, p1y:-92, p2x:61, p2y:-92, shape:'linear', animation: 'default', duration:0.5} ], '246450sb' : [ { visible: false, p1x:60, p1y:-99, p2x:55, p2y:-88, shape:'linear', animation: 'default', duration:0.5}, { visible: false, p1x:60, p1y:-99, p2x:55, p2y:-88, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:60, p1y:-99, p2x:55, p2y:-88, shape:'linear', animation: 'default', duration:0.5} ], '201227sb' : [ { visible: false, p1x:55, p1y:-88, p2x:55, p2y:-88, shape:'linear', animation: 'default', duration:0.5}, { visible: false, p1x:55, p1y:-88, p2x:55, p2y:-88, shape:'linear', animation: 'default', duration:0.5}, { visible: true, p1x:55, p1y:-88, p2x:55, p2y:-88, shape:'linear', animation: 'default', duration:0.5} ] })"
function preload_img_cb(){
$im.create_animation('preview', 'base');
$im.play('preview');
clearInterval( $e.preview_routine );
$e.preview_routine = setInterval('$e.loop_preview()', 30 );
}
//$im.register( 'base', exp_string, preload_img_cb );
})
</script>
</head>
<body>
<div id="left">
<div id="header">
<h3>JavaScript In Motion v0.2.2</h3>
<em style="font-size: 70%, vertical-align: top;">
by <a href="http://twitter.com/flockonus" target="_blank">@FlockonUS</a>
<a href="https://github.com/flockonus/javascriptinmotion" target="_blank" >GitHub</a>
<a href="#mostrae" style="color: #FF5;" onclick=" j('.blackout:first').fadeIn() ;return false;"> HELP! </a>
</em>
<span class="button blue bigrounded" title="Shortcut: P" onclick="$e.set_mode('preview0')" id="play_bt"> PLAY > </span>
</div>
<div id="bonepane">
<h4>Bone Panel</h4>
<div class="content">
<i>new bone info will appear here</i>
<form action="javascript: $e.apply_bonepane( this );" onsubmit="" > <!-- gotta apply some buble cancel here -->
<input type="hidden" name="original_name" />
Name:<input type="text" name="name" size="14" maxlength="14" /> <br/>
Image Url:<input type="text" name="img_url" size="14" maxlength="255" /> <span class="button blue small" title="Shortcut: RETURN" onclick="j(this).parents('form').submit();">ok</span>
<br>
<!--button type="submit" onc > OK</button-->
</form>
</div>
</div>
<div id="timeline">
<h4>Timeline</h4>
<span class="button blue bigrounded" title="Shortcut: A" onclick="$e.add_key_frame();" > ADD+ FRAME </span>
<!-- NOT USEFUL? =/
span class="button blue bigrounded" title="Shortcut: PageUp" onclick="$e.focus_key_frame('prev');" > /\ </span>
<span class="button blue bigrounded" title="Shortcut: PageDown" onclick="$e.focus_key_frame('next');" > \/ </span-->
<dl id="keyframes"> <!-- reflects the state of the var $kfs[] -->
</dl>
</div>
</div>
<div id="right">
<span id="mode"> STAGE </span><br/>
<canvas id="drawingtable" width="400px" height="300px"> </canvas>
<div id="buttonpane">
<span class="button blue bigrounded" title="Shortcut: D" onclick="$e.set_mode('draw0')" id="draw_bt"> DRAW </span>
<span class="button blue bigrounded" title="Shortcut: M" onclick="$e.set_mode('move0')" id="move_bt"> MOVE </span>
</div>
<div id="console">
CONSOLE
</div>
</div>
<div class="blackout"> .
<div class="modal" id="help1">
<div class="header">
InMotion: Quick Help <a onclick="j('.blackout:first').fadeOut()" class="close"> [X] </a>
</div>
<div class="body">
<h2> What is this? </h2>
<p>
To know more about the idea of this project, please refer to the <a href="https://github.com/flockonus/javascriptinmotion" target="_blank" >GitHub</a> page
</p>
<br>
<br>
<!--h2> How to use </h2>
<p>
The buttons are your friends! And they have shortcuts (just hover a button to see each) <br>
</p-->
<h2> Quick Start </h2>
<div style="text-align: left;">
This small tut, is assuming you just oppened the page, didn't touch any button (press <strong>F5</strong> to clear all)<br>
<br>
1. Click <strong>2 points</strong> at the white canvas<br>
1.1 => You just made a <strong>BONE</strong><br>
<br>
2. Click the Button <strong>ADD+ FRAME</strong> (below Timeline)<br>
2.1 => You just added one more <strong>KeyFrame</strong> to the composition<br>
2.2 => On this new <strong>KeyFrame</strong> the bone you drawn can assume a new position<br>
<br>
3. Click any <strong>edge of the Bone</strong>, and <strong>click again</strong> anywhere on the Canvas<br>
3.1 => You have just setted a animation for the bone, very well!<br>
<br>
4. Click <strong>PLAY ></strong>, to animate what you just created!<br>
4.1 => That is a small preview, the possibilities here are huge!<br>
<br>
5. To add a image as skin to the bone paste this: <strong>exp/marara.png</strong> at the field <strong>Image Url</strong> (under the Bone Panel) and click the <strong>ok</strong> button<br>
5.1 => You applied a image to the bone, bounded by it's limits. You can add any valid Image Url there.<br>
</div>
</div>
</div>
</div>
</body>
</html>