Adobe Wallaby Prerelease 1 Example

Yesterday I posted a video of  how Adobe’s new Flash to HTML5 conversion tool “Wallaby” works. I was so excited by this new black magic stuff that I forgot to put up an example(big duhhh), so thanks to Antonio Holguin‘s comment in my previous post here’s the Wallaby generated HTML5 I showed in the video I made small modifications to the .html and .css files to add the Flash Animation so You can compare the Flash and the HTML5 versions.

Click on the image to see the example:

Here is the HTML file Wallaby generated:

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
<!-- Created with Adobe(R) technology -->
 
    <script src="jquery-1.4.2.js" type="text/javascript"><!--mce:0--></script>
    <script src="index.js" type="text/javascript"><!--mce:1--></script>
    <script src="swfobject.js" type="text/javascript"><!--mce:2--></script>
	<script type="text/javascript"><!--mce:3--></script>
 
 
 
<div class="mainDiv">
 
 
<div class="myFontHTML5">
 
<a>Wallaby HTML5 Generated Animation</a>
</div>
 
 
 
<div class="wlby_movie">
 
 
<div class="wlby_1">
        <!-- Start of symbol: daveflota -->
 
 
<div class="wlby_2">
          <!-- Start of symbol: Tween 1 -->
          <img class="wlby_3" src="index_assets/svgblock_0.svg" alt="" />
 
 
<div class="wlby_4">
            <!-- Start of symbol: sombrero -->
 
 
<div class="wlby_5">
              <!-- Start of symbol: Tween 7 -->
              <img class="wlby_6" src="index_assets/svgblock_1.svg" alt="" />
              <!-- End of symbol: Tween 7 --></div>
 
            <!-- End of symbol: sombrero -->
 
</div>
 
 
 
<div class="wlby_7">
            <!-- Start of symbol: ojitosdave2 -->
 
 
<div class="wlby_8 wlby_sprite">
              <img class="wlby_17 wlby_fs" src="index_assets/svgblock_2.svg" alt="" />
              <img class="wlby_18 wlby_fs" src="index_assets/svgblock_3.svg" alt="" />
              <img class="wlby_18 wlby_fs" src="index_assets/svgblock_3.svg" alt="" />
              <img class="wlby_19 wlby_fs" src="index_assets/svgblock_3.svg" alt="" />
              <img class="wlby_20 wlby_fs" src="index_assets/svgblock_4.svg" alt="" />
              <img class="wlby_21 wlby_fs" src="index_assets/svgblock_5.svg" alt="" />
              <img class="wlby_22 wlby_fs" src="index_assets/svgblock_4.svg" alt="" />
              <img class="wlby_23" src="index_assets/svgblock_2.svg" alt="" /></div>
 
            <!-- End of symbol: ojitosdave2 -->
 
</div>
 
          <!-- End of symbol: Tween 1 -->
 
</div>
 
        <!-- End of symbol: daveflota -->
 
</div>
 
 
</div>
 
 
 
<div class="myFontFlash">
 
<a>Flash CS5 Original Animation</a>
</div>
 
 
 
<div class="myFlashContent">
 
 
<div id="flashContent">
		<a href="http://www.adobe.com/go/getflashplayer" target="_blank">
	        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
	    </a></div>
 
 
</div>
 
 
 
<div class="animCredits">
 
 
<a>Character design and animation by:</a> <a href="http://www.cecymeade.com"> Cecy Meade</a>
 
 
</div>
 
 
</div>
 
 

And the CSS file Wallaby generated:

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
div.wlby_movie
{
	overflow: hidden;
	position: absolute;
	left: 0px;
	top: 40px;
	width: 550px;
	height: 400px;
	margin-left:560px;
}
.wlby_text p { padding: 0; margin: 0; }
 
a.wlby_classic-link { color: inherit; text-decoration: none; }
a.wlby_classic-link:link { color: inherit; text-decoration: none; }
a.wlby_classic-link:hover { color: inherit; text-decoration: none; }
a.wlby_classic-link:active { color: inherit; text-decoration: none; }
a.wlby_classic-link:visited { color: inherit; text-decoration: none; }
 
a.wlby_tlf-link { color: inherit; text-decoration: none; }
a.wlby_tlf-link:link { color: inherit; text-decoration: none; }
a.wlby_tlf-link:hover { color: inherit; text-decoration: none; }
a.wlby_tlf-link:active { color: inherit; text-decoration: none; }
a.wlby_tlf-link:visited { color: inherit; text-decoration: none; }
 
.wlby_button &gt; * { visibility: hidden; }
.wlby_button &gt; .wlby_button_normal { visibility: visible; }
.wlby_button:hover &gt; .wlby_button_normal { visibility: hidden; }
.wlby_button:hover &gt; .wlby_button_hover { visibility: visible; }
.wlby_button:active &gt; .wlby_button_normal { visibility: hidden; }
.wlby_button:active &gt; .wlby_button_hover { visibility: hidden; }
.wlby_button:active &gt; .wlby_button_active { visibility: visible; }
 
@-webkit-keyframes wlby_frameset-animation {
	from { }
	to { }
}
 
.wlby_fs, .wlby_graphic 
{
	-webkit-animation-name: wlby_frameset-animation;
}
 
.wlby_graphic 
{
	-webkit-animation-duration: 1s;
}
 
.wlby_masked 
{
	height: inherit;
	position: inherit;
	width: inherit;
}
 
.wlby_sprite 
{
	-webkit-animation-name: wlby_frameset-animation;
	-webkit-animation-iteration-count: infinite;
}
 
@-webkit-keyframes wlby_KF_5 {
from {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	opacity: 1;
}
46.66% {
	-webkit-transform: matrix(1, 0, 0, 1, 0, -10);
	opacity: 1;
}
96.66% {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	opacity: 1;
}
96.67%, to {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
}
}
@-webkit-keyframes wlby_KF_9 {
from {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	opacity: 1;
}
46.66% {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 5);
	opacity: 1;
}
96.66% {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	opacity: 1;
}
96.67%, to {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.wlby_3
{
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -102.635, -127.95);
}
 
.wlby_23
{
	-webkit-animation-duration: 0.0322581s;
	display: none;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -76.161, -31.85);
}
 
.wlby_20
{
	-webkit-animation-duration: 0.129032s;
	display: none;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -76.161, -31.85);
}
 
.wlby_17
{
	-webkit-animation-duration: 0.612903s;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -76.161, -31.85);
}
 
.wlby_22
{
	-webkit-animation-duration: 1.64516s;
	display: none;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -76.161, -31.85);
}
 
.wlby_19
{
	-webkit-animation-duration: 0.0322581s;
	display: none;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -75.875, -7.3);
}
 
.wlby_18
{
	-webkit-animation-duration: 0.16129s;
	display: none;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -75.875, -7.3);
}
 
.wlby_21
{
	-webkit-animation-duration: 0.290323s;
	display: none;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -75.875, -7.3);
}
 
.wlby_6
{
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -29.813, -20.309);
}
 
.wlby_8
{
	-webkit-animation-duration: 3.06452s;
}
 
.wlby_2
{
	-webkit-animation-duration: 0.967742s;
	-webkit-animation-name: wlby_KF_5;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 0px 0px;
	-webkit-animation-timing-function: linear;
}
 
.wlby_5
{
	-webkit-animation-duration: 0.967742s;
	-webkit-animation-name: wlby_KF_9;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 0px 0px;
	-webkit-animation-timing-function: linear;
}
 
.wlby_1
{
	-webkit-animation-duration: 0.0322581s;
	-webkit-transform: matrix(1, 0, 0, 1, 275.45, 200.45);
	-webkit-transform-origin: 0px 0px;
}
 
.wlby_7
{
	position: absolute;
	-webkit-transform:matrix(1,0,0,1,-0.4,14.9);
}
 
.wlby_4
{
	position: absolute;
	-webkit-transform:matrix(1,0,0,1,48.65,-137.45);
}
 
div.mainDiv{
	position: relative;
	width: 1150px;
	height: 456px;
}
 
.myFontFlash {
	position: absolute;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	font-size: 16px;
	color:#066;
	margin-top:0px;
}
 
.myFontHTML5 {
	position: absolute;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	font-size: 16px;
	color:#066;
	margin-left:560px;
	margin-top:0px;
}
.myFlashContent {
	position: absolute;
	width:550px; 
	height:400px; 		 
	margin-top: 40px;	
}
.animCredits {
	position: absolute;
	font-family: Verdana, Geneva, sans-serif;
	margin-top:440px;
	font-size: 12px;
	color:#066;
}

Flash Animation to HTML5 with Adobe’s Wallaby Prerelease 1

Adobe Labs just released Wallaby (Prerelease 1) a tool that will let You convert Flash Animations to HTML5 (http://labs.adobe.com/technologies/wallaby/). Here’s a screen capture of  Wallaby converting from a Flash CS5 character(it’s supposed to be Me …. boy I’m handsome :P) animation to HTML5 the illustration and animation was done by @cecymeade for a game we are putting up together.

Adobe Labs excerpt:
“Wallaby” is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. This allows you to reuse and extend the reach of your content to devices that do not support the Flash runtimes. Once these files are converted to HTML, you can edit them with an HTML editing tool, such asAdobe Dreamweaver®, or by hand if desired. You can view the output in one of the supported browsers or on an iOS device.

Processing.js Experiment

Over the last few weeks when I wasn’t working or fighting hackers on my blog (If You follow me on Twitter you know what I mean), I had the chance to give Processing.js a try.

Over the last few weeks when I wasn’t working or fighting hackers on my blog (If You follow me on Twitter you know what I mean), I had the chance to give Processing.js a try, Processingjs is a port of the Processing programming language,and it lets You program images, interactions and animations for the web without using Flash or Java applets, it uses JavaScript to draw shapes and manipulate images on the HTML5 canvas element (You’ll need a browser that supports it …cough..IE…cough…ISSUE 15), so if you like building data visualizations, creating user-interfaces and developing web-based games Processing.js might be your thing.
So I decided to do a simple test and boy it was really simple to implement existing Processing sketches.
Here’s a little 3 steps explanation on how I did that experiment;

Step Number 1.-

First things first in order to play with Processing.js you’ll need to download and include it inside the tag of your html file.

?View Code HTML4STRICT
1
 <script src="script/js/processing-js/processing-0.9.6.min.js" type="text/javascript"><!--mce:0--></script>

Step Number 2.-

Now on the body tag You’ll need to open up a new canvas tag, and that’s where the processing.js will be running.

?View Code HTML4STRICT
1
You need a <a href="http://www.google.com/chrome" target="_blank">modern browser</a> to view this.

So what’s going on here ? You need to tell the canvas the location of the sketch that you’ll be running (in this case the worms.pjs file), in the datasrc attribute and a explaining text in case the user’s browser dont support HTML5 yet other way all they’ll see is a blank screen.

Step Number 3.-

The actual Processing.js that will display those playfull worms on Your HTML, if you’ve used Processing before you’ll notice that there’s actually nothing diffrent form what You do in a regular Processing sketch and if you copy and paste this in the Processing enviroment it will run as any other sketch.

?View Code JAVASCRIPT
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
Mover[] movers = new Mover[30];
 
void setup() {
  size(viewportwidth,viewportheight);
  smooth();
  background(0);
  // Initializing all the elements of the array
  for (int i = 0; i < movers.length; i++) {
    movers[i] = new Mover(); 
  }
}
 
void draw() {
  noStroke();
  fill(10,0);
  rect(0,0,width,height);
 
  // Calling functions of all of the objects in the array.
  for (int i = 0; i < movers.length; i++) {
    movers[i].update();
    movers[i].checkEdges();
    movers[i].display(); 
  }
}
 
class Mover {
 
  PVector location;
  PVector velocity;
  PVector acceleration;
  float topspeed;
 
  Mover() {
    location = new PVector(random(width),random(height));
    velocity = new PVector(0,0);
    topspeed = 4;
  }
 
  void update() {
 
    // Our algorithm for calculating acceleration:
    PVector mouse = new PVector(mouseX,mouseY);
    PVector dir = PVector.sub(mouse,location);  // Find vector pointing towards mouse
    dir.normalize();     // Normalize
    dir.mult(0.5);       // Scale 
    acceleration = dir;  // Set to acceleration
 
    // Motion 101!  Velocity changes by acceleration.  Location changes by velocity.
    velocity.add(acceleration);
    velocity.limit(topspeed);
    location.add(velocity);
  }
 
  void display() {
    stroke(0);
    fill(175);
    ellipse(location.x,location.y,16,16);
  }
 
  void checkEdges() {
 
    if (location.x > width) {
      location.x = 0;
    } else if (location.x < 0) {
      location.x = width;
    }
 
    if (location.y > height) {
      location.y = 0;
    }  else if (location.y < 0) {
      location.y = height;
    }
 
  }
 
}

So that’s it You may open your html file in the browser and will see a nice animated wormy things chasing your mouse across the screen.

Hope this little explaings helps You get started with Processing.js, I’ll be doing a little more of experimentation with it myself and tell You how it goes.

Until next time See You.