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.

Targeting Flash Player 11(Incubator Build) in FDT 4.2.

I know this might be old news by now but this post will help as a reminder on how to get the new Flash Player 11 (Incubator Build) working in Your FDT 4.2 installation. Ok let’s get started.

1.- Download the files.

2.- Update the playerglobal.swc


First thing You need to do is replace the playerglobal.swc included in the Flex SDK because it isn’t Flash Player 11 ready.

  • Back up the playerglobal.swc  included in  your Flex SDK location “/frameworks/libs/player/10.2 in the Flex SDK”.
  • Copy the flashplayer_inc_playerglobal_022711.swc to the location mentioned above and rename it to playerglobal.swc.

3.- Setting up FDT.

Setting up the FDT IDE (I’m using FDT 4.20.1272  installed on top Eclipse Indigo Version: 3.7.0) for working with the Flex SDK is easy just follow the steps below.

 

  • Add the Flex 4.5 SDK You just downloaded to the list of installed SDKs via: Preferences > FDT > Installed SDKs and press Add.
  • Rename  Your SDK to something significant ( Believe Me you can get lost when using several SDKs) I named mine Flex 4.5 Flash Player (Incubator).
  • The next step is creating a new project go to File > New > New Flash Project in the popup window select new AS3 Project and give your project a name.
  • Click next and select the Flex SDK You just added.
  • You will notice that You get a warning on top of that window saying:  “Some classpath libraries are missing …” that’s because the latest Flex SDK nightly builds does not include the flex.swc, on to next step to get rid of that warning.
  • Click next and You’ll be on the SK Library tab select the flex.swc (marked with an X) and click the Remove SWCs button that will remove any warnings about the missing .swc and since we are building an AS3 project we wont be using the flex.swc anyway.
  • The last step is clicking the finish button then go to the project You just created right click and select Properties ( Alt + Enter for shortcuts lovers like myself)  this will open your project’s Properties window  select FDT Compiler from the list and add the flag -swf-version=13 to your compiler arguments..
  • Hit the OK button and You’re set to go now You’re ready to push the Flash Player 11 to it’s limits abusing of it’s new “Molehill” 3D APIs.Happy Coding.