Search

 

March 2011
S M T W T F S
« Feb   Apr »
 12345
6789101112
13141516171819
20212223242526
2728293031  

Tags

Archives


« | Main | »

Wallaby Flash to HTML example with Source Output

By Rich Tretola | March 8, 2011
48,136 views

Adobe released Wallaby today for public preview. Wallaby converts fla (Flash source) files to HTML5. The example below shows both a swf and an html5 animation. I have also included the code generated by Wallaby. Try it yourself here.

Note: You’ll need at HTML5 supported browser to see the animation:

Which one is Flash?

Here is the converted source that gets created by Wallaby:

Main HTML file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<!-- Created with Adobe(R) technology -->
<html>
  <head>
    <meta charset="utf-8"></meta>
    <link href="motionhtml5.css" type="text/css" rel="stylesheet"></link>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript" src="motionhtml5.js"></script>
  </head>
  <body>
    <div class="wlby_movie">
      <div class="wlby_1">
        <!-- Start of symbol: Symbol 1 -->
        <img src="motionhtml5_assets/svgblock_0.svg" class="wlby_2"></img>
        <!-- End of symbol: Symbol 1 -->
      </div>
    </div>
  </body>
</html>

Javascript file:

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
function wlby_calc_timeout(c) {
    var timeout = (new Date).getTime();
    while (c) {
        timeout += parseFloat(getComputedStyle(c)['-webkit-animation-duration']) * 1000;
        c.timeout = Math.round(timeout);
        c = c.nextElementSibling;
    }
}
var wlby_hide_children = function(self) {
    var c = self.firstElementChild;
    while (c) {
        c.style.display = 'none';
        c = c.nextElementSibling;
    }
}
var wlby_activate_sibling = function(evt, self) {
    if (evt.srcElement != self)
        return;
    if (self.style.display == 'none')
        return;
    if (!self.timeout)
        wlby_calc_timeout(self);
    self.style.display = 'none';
    var sibling = self.nextElementSibling;
    if (!sibling)
        return;
    while ((sibling.timeout < evt.timeStamp)&&sibling.nextElementSibling)
        sibling = sibling.nextElementSibling;
//    $('.wlby_fs', sibling).css('display', 'none');
//    var n = new Number((sibling.timeout - (new Date).getTime()) / 1000);
//    sibling.style.webkitAnimationDuration = n.toString() + 's';
    sibling.style.display = 'block';
};
var wlby_activate_children = function(evt, self) {
    if (evt.srcElement != self)
        return;
    wlby_hide_children(self);
    var c = self.firstElementChild;
    if(!c)
        return;
//    $('.wlby_fs', c).css('display', 'none');
    wlby_calc_timeout(c);
    c.style.display = 'block';
    c.style.webkitAnimationDelay = '';
}
var wlby_loop_children = function(evt, self) {
    if (evt.srcElement != self)
        return;
    wlby_activate_children(evt, self);
    var c = self.firstElementChild;
    if (!c)
        return;
    c.style.webkitAnimationDelay = '0s';
}
$(document).ready(function() {
    $('.wlby_sprite').each(function()
        { this.addEventListener('webkitAnimationIteration', function(evt) { wlby_loop_children(evt, this); return false; }, false, false) });
    $('.wlby_sprite, .wlby_graphic').each(function()
        { this.addEventListener('webkitAnimationStart', function(evt) { wlby_activate_children(evt, this); return false; }, false, false) });
    $('.wlby_fs').each(function()
        { this.addEventListener('webkitAnimationEnd', function(evt) { wlby_activate_sibling(evt, this); return false; }, false, false) });
});

CSS file:

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
div.wlby_movie
{
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 500px;
    height: 200px;
}
.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 > * { visibility: hidden; }
.wlby_button > .wlby_button_normal { visibility: visible; }
.wlby_button:hover > .wlby_button_normal { visibility: hidden; }
.wlby_button:hover > .wlby_button_hover { visibility: visible; }
.wlby_button:active > .wlby_button_normal { visibility: hidden; }
.wlby_button:active > .wlby_button_hover { visibility: hidden; }
.wlby_button:active > .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_2 {
from {
    -webkit-transform: matrix(1, 0, 0, 1, 10.3, 64.3);
}
to {
    -webkit-transform: matrix(1, 0, 0, 1, 428.25, 64.3);
}
}
.wlby_2
{
    position: absolute;
    -webkit-transform: matrix(1, 0, 0, 1, -0.5, -0.5);
}

.wlby_1
{
    -webkit-animation-duration: 0.833333s;
    -webkit-animation-name: wlby_KF_2;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform: matrix(1, 0, 0, 1, 428.25, 64.3);
    -webkit-transform-origin: 37.7px 37.7px;
    -webkit-animation-timing-function: linear;
}

SVG file:

1
2
3
4
5
6
7
8
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version='1.1' width='77px' height='77px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    <g transform="translate(0.5,0.5)">
        <path d="M 75.45 0 L 75.45 75.45 L 0 75.45 L 0 0 Z" fill="#000066"/>
        <path d="M 75.45 0 L 75.45 75.45 L 0 75.45 L 0 0 Z" fill="none" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" stroke="#CCCCCC"/>
    </g>
</svg>

Topics: flash | 10 Comments »

10 Responses to “Wallaby Flash to HTML example with Source Output”

  1. John Says:
    March 8th, 2011 at 11:23 am

    Wallaby HTML version plays smoother on Mac/Safari and Mac/Chrome than the Flash version. Maybe a difference in frame rate?

    Reply to this comment

  2. tbone Says:
    March 8th, 2011 at 11:31 am

    heh…the one that works

    Reply to this comment

  3. Matthew Fabb Says:
    March 8th, 2011 at 12:45 pm

    Note you don’t just need a HTML5 supported browser as this doesn’t work on Firefox. Adobe has said that right now only WebKit is supported, so on the desktop Safari & Chrome.

    Reply to this comment

  4. Robert Omb Says:
    March 8th, 2011 at 6:34 pm

    WOW the html5 is muuuuch smoother

    Reply to this comment

  5. 플래시를 HTML5로 변환해주는 Wallaby at GOODgle Blog Says:
    March 8th, 2011 at 10:21 pm

    [...] sewonist 블로그와 Rich Tretola 블로그에 변환된 샘플 비교기가 있다. 참고하시라. 애플이 총대를 맨 뒤, [...]

  6. Mario Vieira Says:
    March 9th, 2011 at 5:35 am

    the that works in my browser :) Can’t see the HTML 5 one

    Reply to this comment

  7. Mario Vieira Says:
    March 9th, 2011 at 5:35 am

    the one that works in my browser :) Can’t see the HTML 5 one

    Reply to this comment

  8. Tomas Sancio Says:
    March 9th, 2011 at 10:40 am

    Thanks Rich, although it’s easy to note the irony that the market has forced Adobe to convert Flash to SVG when SVG was Adobe’s original technology competing with Macromedia’s Flash. Wow…

    Reply to this comment

  9. Marvin Blase Says:
    March 14th, 2011 at 11:17 am

    how many fps does the swf have got? looks pretty sluggish to me – or better said, it could be looking way better.

    Reply to this comment

  10. Kevin Newman Says:
    March 14th, 2011 at 11:37 am

    The HTML5 looks smoother – but the block also looks like it doesn’t move as far per frame (which would make it looks smoother), and also doesn’t move as fast.

    I’d bet the CSS transitions are animating at a higher framerate (html5 is time based, not frames based). The Flash could be set to a higher FPS to make it smoother – and I’d bet it’s capable of running much smoother than html5 at 60fps. This example is probably running at a more conservative, battery conserving default of 24fps ;-P

    Reply to this comment

Comments