This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
Flash vs Flash?

Flash vs Flash?

While Flash (the tool) can only target Flash (the platform), is it not missing out on opportunities? Don't we need vector animations in other platforms and apps? Taking the new John Lennon Google doodle as a case in point, Seb Lee-Delisle investigates further.

I’m sure you’ve all seen the Google doodle for John Lennon’s 70th birthday by now. It’s also the first ever video doodle and it’s beautifully animated. What’s more, it’s powered by Flash, as Adobe evangelist Ben Forta proudly declared via twitter.

But then I noticed that YouTube engineer Geoff Stearns (a friend who you may know as the original creator of swfobject) tweeted that they had actually wanted to use HTML5 video but the YouTube HTML5 video player wasn’t ready yet.

HTML5 or Flash video?

For online video, there are often personal and political reasons (some valid, some less so) to use HTML5 video rather than Flash. But I’m thinking that Google would probably rather show off the video capabilities of their Chrome browser, and fall back to Flash.

But I didn’t want this post to be all about video, which I covered in more detail in my What the Flux!? talk. I wanted to talk about something that Flash was made for. Something that it’s really, really good at. And something that it seems to be almost forgotten:

Flash is an amazing tool for producing light-weight animated vector graphics.

The John Lennon video is actually a line drawn animation. In other words, it’s the perfect use case for a Flash swf. For all I know, it may even have originally been made in Flash. And I’ve seen many examples of Flash animation rendered to video. The utterly charming Simon’s Cat films were all created by Simon Tofield in Flash. But I have never ever seen a single one of them delivered on the web in swf format. They’ve all been videos.

Is it really the situation now where an animation ideally suited to the swf vector format is better delivered as a heavy-weight rasterised video?

Vectors or video?

If that’s true then that’s a shame. I love animated vector graphics and it’s what Flash was built on. A few years ago we’d see groundbreaking vector animation from the likes of biteycastle, but now there’s a trend for pixel graphics, particularly in games. I love the indie Flash games community but I would like to see more vector art. And many “rich” internet experiences seem to be made with bitmaps and videos.

If you want to make content for mobile FlashPlayer (or iPhone packager/AIR for Android), even Adobe themselves recommend that you use bitmaps, or at least make good use of the cacheAsBitmap technique.

We still need a vector animation tool

Don’t get me wrong, bitmap graphics have their place, but isn’t there still the need for a tool that allows you to create beautiful hand crafted vector animation? And not just one that can only deploy to the Flash platform, but one that can produce animations in a format that can be played back in many ways. And I don’t just mean HTML5 and SVG.

SVG

Ah yes! SVG! There’s a blast from the past. Just when we thought it was dead and gone, SVG could again be a serious option for vector graphics. The only browser that didn’t support it was MSIE, which in typical fashion, has been ruining the fun for years. However, IE9 supports SVG with hardware acceleration so it’s becoming a realistic option, especially if you use a library like Raphael.js (which reverts back to VML for older versions of MSIE).

But anyway, I digress. Although SVG is cool, we have few if any decent tools to build animated stuff with it. Which brings me back to Flash.

Light-weight vector graphics format

So, an export to SVG could be good. But also, I’d like to see Flash exporting to a format that we could then play back as part of our native Android or iOS application. It could even be a lighter ActionScript-less swf. Considering all the different screen sizes and resolutions that these devices have, the ability to scale up or down without any loss of quality would be really useful.

iPhone developers now need to create two sets of graphics, one for retina displays and one for the older screens. And it’s going to get even worse for Android as the market fragments into a huge variety of different screen sizes and resolutions.

But not just in mobile, what about in Windows or OSX apps? Or with art tools like Processing and openFrameworks? I would love to see a variety of native libraries that can parse Flash graphics data and render it with hardware acceleration.

Flash tool competing with Flash platform

I wouldn’t be surprised if Adobe have a few features like this up their sleeve for MAX, but do they have the guts to go as far as they could? If you could export to a format usable by native mobile apps, it would compete with AIR for Android and the iPhone packager. If you could export to HTML5 or SVG it would compete with the FlashPlayer.

It’s a slightly bizarre situation where if Adobe gave Flash (the tool) these additional export options, they would be competing with Flash (the platform).

Maybe I’m in the minority of people that love to use vector animation in their projects, but I really hope that Adobe will introduce exciting Flash export targets. Because if there is a demand for this kind of graphics, and Flash can’t target any other platforms, you can be sure that someone else will bring out a tool that can.

 

Get new stories first

Click to follow us on Twitter!

 

Comments


Posted by MatthewFabb on 10/10 at 06:40 PM

I think speed is ultimately the reason vector animation is turned into video. Even outside of Flash, I’ve seen complex SVG animation run really slowly, as the computer has to do all the math calculations to render it. It’s too bad that vector artwork doesn’t render faster, as it would solve many of the problems of rendering for multiple screens.

Perhaps as you mention Processing, and certain perhaps Java might be able to render Flash vector art faster. Joa Ebert has been working on rendering Flash with the Java Virtual Machine, but I haven’t seen it myself and don’t know if it renders any vector Flash artwork. However, since the SWF file format is open, someone could create a render in another language that did nothing but display Flash vector art.


Posted by Seb Lee-Delisle on 10/11 at 10:54 AM

Hi Matthew.

> I think speed is ultimately the reason vector animation is turned into video

That may be a reason, but Flash is actually really fast at rendering vectors now.

> Iíve seen complex SVG animation run really slowly as the computer has to do all the math calculations to render it

With any vector graphics the computer has to do the maths to render it. Last time I checked, SVG is still much slower than Flash in most browsers.

> perhaps Java might be able to render Flash vector art faster

JITB is only faster at rendering vectors because it uses hardware acceleration. So if the FlashPlayer was also hardware accelerated, performance would increase.

But to summarise, if animators only use Flash to create rendered video then why not use more powerful animation tools like ToonBoom and AfterEffects? Animators like Adam Philips seem to be leaving Flash both as an animation tool and as a delivery mechanism.

> However, since the SWF file format is open, someone could create a render in another language that did nothing but display Flash vector art.

Yes please! In every language :) That’s what I’m saying :)

Seb


Posted by Lennart Rikk on 10/13 at 09:55 AM

> That may be a reason, but Flash is actually really fast at rendering vectors now.

Sorry, but I cannot agree. I work in a online newspaper(postimees.ee) and one of my jobs is to create banners for clients and our own daughter sites.

I’m being given a little more freedom with our own site banner’s such as CPU eating and size etc. also every now and then I test different limits of the site… So recently I was creating one for a gallery site we made(F10 AS3):
http://www.lrstudio.eu/banners/pilt.postimees.ee2/

It ain’t that complicated right? So I have a few scripted clouds in the background, few objects moving + simple frame by frame vector animation of the stick figure. And it runs nicely… as long as there is only one banner per site.

A bigger news site usually has at least 5 banners per page, here’s what happens when I use 3:
http://www.lrstudio.eu/banners/pilt.postimees.ee2/2010_08_16_pilt.postimees.ee2_468x468_EST_0.5.5_complete.html (wait till the walk loop ends).

So I had to render it into a video banner in the end.


Posted by fumanchu12 on 10/18 at 10:07 PM

@Lennart Rikk

I’ve decompiled your banner out of curiosity. Within minutes and a few tricks (some cacheAsBitmap, some scrollRects), I was able to improve the performance by a factor or 4.

With half a day, I think any good developer could optimize the CPU usage ten-fold on this particular project.

Hire a (good) developper when you need one. Don’t blame the tools.


Posted by stroncium on 10/19 at 12:37 AM

> Lennart Rikk
You did something awesomely, painfully wrong. I don’t even know how were you able to get such results.
One of your swf’s runs with fps like 10 on my computer, and 3 run slow like hell.
In the same time I bet I will be able to make swf with (almost) same content which will run without any problems with a good framerate. And I’m almost shure even 10 of them will run ok.
So the problem is not one of flash.


Posted by Seb Lee-Delisle on 10/19 at 10:12 AM

Hi guys,

you all have a point, of course. Flash has certainly got a lot faster over the last few years and there are many optimisation techniques available. But it is actually very fast at rendering vectors. (Our 3D Flash sites contain 1000s of triangles)

But it can be hugely confusing. If you’re new to Flash, why wouldn’t you assume that you can use as many filters and masks as you want?

And there’s a huge amount of misinformation and confusion about cacheAsBitmap, even amongst the programming community. (not to mention other optimisation techniques - blog post coming soon :) ).

So it’s easy to say “don’t blame the tool” but when the tool encourages such misuse and offers little guidance, we have to at least assign partial blame.

Seb


Posted by Lennart Rikk on 10/19 at 11:46 AM

fumanchu12: While indeed cacheAsBitmap improves the performance a little, it’s still far from being able to use it commercially. “could optimize the CPU usage ten-fold” seriously? Tenfold? You are saying right now that when I look those 3 banners and it shows CPU of 86 at times(cacheAsBitmap = true), you could get it down to 10-20?

stroncium: Your talk is pure speculation, and that’s not worth very much.

Well I’m all in for being proven wrong, here’s the source .fla:
http://www.lrstudio.eu/banners/pilt.postimees.ee2/2010_08_16_pilt.postimees.ee2_468x468_EST_0.5.5_complete.fla

Let’s have one fair rule though, the result has to look/animate the same.


Posted by stroncium on 10/19 at 02:13 PM

> Lennart Rikk
I said _almost_ same content. Some things are really sacrificable when we talk about about performance. For example the rotation(not moving) of picture at the start, which is not so fast and gives only few pixels of visual difference.
I’m sorry, I don’t use any of Adobe’s mastering tools actually, so I can’t even open your fla. Though I will try to make a proof. (I have some things to finish first.)


Posted by fumanchu12 on 10/21 at 12:57 PM

So I’ve taken some time today to optimize the first part of your animation to prove my point.

I think it’s visually near identical.

Here’s your original file, looping 5 times on the first animation: http://iq12.com/files/fu/orig_25_b5.swf

On my computer, it takes 178 seconds of cpu time to complete.

Here’s my optimized file: http://iq12.com/files/fu/optim_25_b5.swf

It only takes 22 seconds of cpu time.

That’s a x8 increase (not yet the x10 I promised but I really think it can be done).

@seb_ly:
I don’t think you’re right. As professionals we have to understand our tools. You can’t put so much stuff on the timeline then blame Flash for not being quick enough to render it without trying to look for stuff that you could have done wrong.


Posted by fumanchu12 on 10/21 at 12:59 PM

(download the .swf and look in a standalone player for fair comparison)


Posted by stroncium on 10/24 at 12:23 PM

> fumanchu12
Thx, you released me from doing the job. =D (And the thoughts about it were repeating in my head every hour.)


Posted by Lennart Rikk on 10/25 at 12:56 PM

While it’s not tenfold, it’s still quite impressive and I admit defeat. A blogpost about this would be cool.

I sent the .swf to our banner management for CPU testing and the tests were good enough to run this live on the site if needed(of course not anymore).

To get back to the original point - Why flash isn’t used much for vector graphic animation. I decompiled fumanchu12’s optimized .swf to look at the magic, which wasn’t too advanced, but still, one would need high level knowledge of AS3 to achieve it, which maybe 5%(subjective speculation) of flash developers have. For most(low-mid level devs, like myself), it’s easier to just render it to video.

Also, I can’t see why the tool “Flash” doesn’t optimize something with this big impact automatically.


Posted by stroncium on 10/25 at 01:46 PM

> Lennart Rikk
This is a very deep question. To optimize something you should know how should it work. Actually, what everyone wants is just AI that works as a human worker for them. But it’s not currently possible.

For example, the well known ‘cacheAsBitmap’. It can seriously speed up things sometimes, but I’ve seen a lot of examples when it was ruining the speed due to bad usage. So, even some programmers(not sure good or bad) cannot always do the thing(decide whether to use ‘cacheAsBitmap’ or not), then how can we await computers to do that.

Though there is some approaches, but they have high error probability, and the problem is that when programmer/designers fails - it is his fault,  but when flash tool fails - it is fault of flash and adobe, and people pay money to adobe etc.


Posted by fumanchu12 on 10/25 at 05:01 PM

Submit a comment

Only registered members can comment. Click here to login or here to register