Sencha Inc. | HTML5 Apps

Blog

Rocking the Boat of Flash with CSS3 Animations

June 20, 2011 | Arne Bech

In this article, we’ll give you a brief tutorial on how to make an animated scene using CSS3 animations in Sencha Animator. For this demo, we found an Adobe Flash animation from a popular stock photography site*, and replicated it perfectly with HTML5/CSS3 Animations using Sencha Animator.

Sencha Animator project duplicating a Flash animation with HTML5 and CSS3 Animations.

Feel free to follow along by downloading Sencha Animator Beta 1.1 (Note: You need to be a registered Sencha Forum user to use the application). Download the project files to start experimenting with CSS3 Animations, view the Demo in a WebKit browser, or watch a video of the animation running in an iPad if you’re on an older browser.

To get started, open up Sencha Animator and create a new project. Set the project dimensions to be 960×540 pixels. Make sure to save the project before we start.

New Project Window in Sencha Animator for CSS3 Animations

We then add our three wave images to Animator by clicking on the Image object in the left toolbar and selecting the image we want to add by clicking on the “Select Image” button under General Properties. Once added you can rename the objects to keep them better organized. The images should be arranged to show the darkest wave in the back and the lightest wave in the front. This can be achieved by changing the order of the objects in the object tree. For each wave, we adjust the position set the iteration property to zero, which means that once we add an animation to it, it will run infinitely.

    Light Wave:
    Name: Water Light
    Position: X:-11 y:471
    Iteration: 0 (infinite)

Medium Wave:
    Name: Water Medium
    Position: X:-11 y:409
    Iteration: 0 (infinite)

Dark Wave:
    Name: Water Dark
    Position: X:-11 y:366
    Iteration: 0 (infinite)

Waves images in Sencha Animator

To create a parallax effect, we animate the three waves at different speeds. To achieve this effect, we create animations for each wave by double-clicking on their respective timelines, which will add an empty animation (e.g. two keyframes). We can adjust the easing function for all keyframes, while adding an X offset of -960 pixels to the last keyframes, since the images repeat at 960 pixels. The parallax effect is completed by making the front most (lighter) wave go faster and the back wave (darker) go slower by adjusting the length of the animations.

    Light Wave:
    Keyframe 1 @ 0 seconds:
        Position: X:0 Y:0
        Easing: Linear

    Keyframe 2 @ 4 seconds:
        Position: X:-960 Y:0
        Easing: Linear

Medium Wave:
    Keyframe 1 @ 0 seconds:
        Position: X:0 Y:0
        Easing: Linear

    Keyframe 2 @ 6 seconds:
        Position: X:-960 Y:0
        Easing: Linear

Dark Wave:
    Keyframe 1 @ 0 seconds:
        Position: X:0 Y:0
        Easing: Linear

    Keyframe 2 @ 8 seconds:
        Position: X:-960 Y:0
        Easing: Linear

To preview this animation, simply click the play button.

Timeline Panel in Sencha Animator

To add a background, we can use the box element, and configure it. Make sure it is reordered in the object tree so it is below the other objects (i.e. at the bottom of the object tree).

    Background Properties:
    Name: Background
    Width: 960
    Height: 540
    Position: X: 0 Y: 0
    Gradient:
        Color Start: #66ccff
        Color Stop: #ffffff
    Disable Border
    Disable Border Radius

To add the clouds, we can do the same thing we did for the waves except this time we’ll choose a different initial position and make the last keyframe appear later. Place the clouds so that they are just above the background object in the object tree.

    Cloud Properties
    Name: Clouds
    Position: x: 0 y:13
    Iterations: 0 (infinite)

Cloud Keyframes
    Keyframe @ 0 seconds
        Position: X: 0 Y: 0
        Easing: Linear

    Keyframe @ 15 seconds
        Position: X: -960 Y: 0
        Easing: Linear

The stage showing place wave images in Sencha Animator.

To finish the project we add the boat image and position it between the medium and the dark waves. We want the boat to do a rocking motion, but we want the center of the rotation to be slightly lower than the center of the image. To accomplish this effect, we can adjust the transform origin of the image. We also set the alternate direction to true, meaning that the animation will go “back and forth” when repeating, creating the rocking motion.

    Boat Properties
    Name: Boat
    Position: X: 161 Y: 153
    Origin: X: 50 Y: 65
    Iterations: 0 (infinite)
    Alternate Direction: True

To add the rocking motion, we create two keyframes for the boat.

    Boat Keyframes
    Keyframe @ 0s
        Rotation Z: -5
        Easing: Ease-In-Out

    Keyframe @ 1s
        Rotation Z: 5
        Easing: Ease-In-Out

The completed scene made up of images placed onto the stage of Sencha Animator.

When we’re satisfied with the animation, we can export it. Choose File->Export and then save the export folder to your drive. Open index.html file in your favorite WebKit browser (Google Chrome, Apple Safari, etc.) to see the CSS3 animation run. View the completed example.

To embed this animation on a page, you can simply setup an iframe pointing to the index.html file in the export folder. The Iframe HTML ensures the CSS3 Animation code doesn’t interfere with other elements on your page:

<iframe src="http://dev.sencha.com/animator/demos/rocking-boat/iframe.html"></iframe>

Download the project files to start experiment with CSS3 Animations. The Sencha Animator project contains some extra elements, such as jumping fish and blinking eyes. Please note that this Sencha Animator demo is intended for personal use and should not be distributed.

* © iStockphoto.com/Carla Novillo Lapeyra

There are 36 responses. Add yours.

Javier Rincon

4 years ago

Nice one i hope sometime te css3 animations look well in all browsers right now it looks awful on my android tablet with honeycomb 3.01… keep up the good work guys…

Mike Bishop

4 years ago

Something like this really needs to be a native app. Duhno that I would spring for an app that isn’t.

angelcreative

4 years ago

this is nice!!!!

Gidon Burcat

4 years ago

Hello Sencha,
Looks great on chrome on my pc , looks great on my Iphone.
Does not work on IE7 and IE9.
First off all I would like to praise your work , creating us designers a new tool to have interactive and animated content.
This is a long debate, but I am sure that many of us are trying to guess which approach is the best for these days. Should we move completely to CSS3 and leave Flash behind? Well it’s a confusing debate…
I wanted to ask if it is permitted to use the Animator Beta for my personal Website (not for my costumers… yet)?
I understand the Animator will expire in a few months, but the content that was created will not, Am I right?
Gidon
http://www.koomkoom.com

angelcreative

4 years ago

flash is flash and now, thanks god of designers, we have a lot of js libraries to do some job that before only flash can did, but we have a long way in front of us because today html5 and css3 cannot be a flash replacement. see the fwa website and look why i say this.

Gidon Burcat

4 years ago

I agree, I actually am an interactive developer and designer and You are right. Html 5 is NOT a Flash replacement yet. However, As Html 5 is evolving, Flash is evolving towards real time 3d - which, is way far from Html 5 and Css3…

Mark Grant

4 years ago

Nice example, though very heavy on cpu on ipad and android mobile. I thought flash was supposed to be cpu heavy and html5 was the special thing?

WP89Tutorials

4 years ago

Animation is only a small part of Flash. Multimedia with sound and video are more important for us.

WP89Tutorials

4 years ago

Forgot to say. Thanks!  Nice to have this animation options. Great to make it available for iOS…

Wiens Curtis

4 years ago

This is a great product so don’t get me wrong here. File sizes are enormous and there is no preloading. It’s not fair to compare this with flash without addressing these two huge issues.

Dave Bergschneider

4 years ago

@Gidon & @ angelcreative, HTML5 has nothing to do with the equation now does the use of CSS3. You could very well uses HTML or another mark-up choice. It is crucial that the design community understands that html5 can be used now and cross browser with a little extra help from JavaScript (granted certain features are not available everywhere). As for CSS3, I think the next set of browsers from Microsoft and Mozilla will make it fully cross browser however the real kicker is we will still be supporting the past 3 versions of internet explorer because of the install base of constituents whom never update.

angelcreative

4 years ago

ok, html5 have canvas and video support, we dont need flash now for that, and for animations (SOME animations can be make with css3 and javascript libraries as jquery or mootools) . of course you still can use not html5 markup for use css3 with js and theis beautiful features, but the discussion here is if with this kind of tools as sencha animator flash as we all know by today will be deprecated. I believe no. flash will remain and evolve. so the next question is, i still use flash in my projects? the answer is so simple as K.I.S.S. rule for design, just use the right tool for the appropriate project, no more no less…

Dave Bergschneider

4 years ago

I’d can agree with that. I only commented towards HTML5 because so many people keep clumping these technologies with HTML5 when they are supplemental technologies to HTML5 much like CSS and JavaScript is to HTML in general. HTML5 has been given way to much hype as if these things hadn’t been done before or accomplished by other means until now. Flash will evolve but I think the other technologies will evolve quicker on the web while Flash becomes more and more a GUI tool for device specific platforms like Tivo or the Playbook. In the end though, these other technologies will win across the board because they have a lot fewer dependencies than Flash, don’t have a hefty price tag for software licenses or learning curve to learn yet another ECMA based language that is only usable/executable within Flash.

John

4 years ago

The link at http://dev.sencha.com/animator/demos/rocking-boat/ works fine in the safari browser, but not in firefox. Using FF 4.0.1 on macosx 10.6.7

Jay Robinson Sencha Employee

4 years ago

John, Firefox will not support CSS Animations until FF 5: http://dbaron.org/log/20110419-animations

José

4 years ago

Will future Sencha Animator releases support Firefox 5 (out on the 21th of June)?

Glen Lipka

3 years ago

I tried in Chrome 14.0.794 and Firefox 5.  Neither worked.  What browser should I use?

Damian Poole

3 years ago

Both are unreleased betas, what do you expect?

Arne Bech

3 years ago

@Glen there is some issues with Chrome dev builds, if you use stable it should work. Most recent stable webkit browsers should handle it fine.

AwesomeBob

3 years ago

To all of you complaining that it doesn’t work in your browser, your browser doesn’t support HTML5 and CSS3. Use a browser that does. I’m using Chrome (it’s blinding fast and is on the bleeding edge of the new web standards).

lily

3 years ago

i dont know why,now i have not animate,nothing can make me happy. future is dark,i hope i can be happy .

Alain

3 years ago

@Dave Bergschneider
I dont agree with this statement of yours
“Flash will evolve but I think the other technologies will evolve quicker on the web while Flash becomes more and more a GUI tool for device specific platforms like Tivo or the Playbook. In the end though, these other technologies will win across the board because they have a lot fewer dependencies than Flash, don’t have a hefty price tag for software licenses or learning curve to learn yet another ECMA based language that is only usable/executable within Flash”

First i m a big fan of Sencha and of all the great tools they bring out. The animator is also one of those. But please this comparaison with Flash is simply getting odd and pure marketing B.S. It looks like every company that brings out some so called HTML5 tools has to say something about flash to get some attention.This blog entry shows that again. I never seen Adobe talking about HTML5 when they release a new version of Flash.

The bottom line HTML5 is a good idea but is not there yet. HTML5 still has a long way to go to even match the half of what flash brings on the table. The JS language despite beeing a powerfull language is one of the worst when it comes to writing big scale applications. Security has never been one of the strengh of JS. Now with HTML5 where one can access the users machine i dont even know where we are heading, XSite scripting is still one of the most dominant hack in the web. Now with HTML5 it will just get to another level.

You talked about “hefty price tag for software licenses or learning curve to learn yet another ECMA based language that is only usable/executable within Flash”.
I dont get it. Do you get charged by using Flash ? If you are talking about the Flash Builder IDE there are other alternatives. Also i think Adobe has the right to charge for their tools. Sencha does the same right ? And regarding the hard work they put in it it s absolut legitim.
Also If you are talking about ActionScript when you say ” ECMA based language that is only usable/executable within Flash”  then you should know that you DONT have to programm in ActionScript to write application for the Flash Platform. If you take a look at http://www.gwt4air.appspot.com/
you will see an example in action. That s a flex application entirely written in Java using the library i created: http://code.google.com/p/gwt4air/

So HTML5 is a good step but no need to compare it to flash. HTML5 is not even close yet.

Gaurav Mishra

3 years ago

Making waves with CSS3 animations! Great : )

Giulio Roggero

3 years ago

I’m on linux with Chrome Dev channel (v. 13), it doesn’t work - white page :(. On firefox 4 either. Do you know why? raspberry

FCTim

3 years ago

@Jay Robinson Firefox 5 is live now and animation still seems to be jumbled.

jt

3 years ago

Since this is basically a Flash vs. HTML5/CSS 3 post I’ll say the following about this issue:

Why has it taken html/css so long to get to this point versus all the progress Adobe has made with Flash over the last decade?  Because html/css, and javascript for that matter, have been developed by committee and consensus.  Flash doesn’t suffer from this.  Adobe owns Flash and when it and its large and dedicated developer base want something they move ahead and get it done.  It’s taken Adobe just a couple of years to go from not even being on the mobile radar to maturing Flash/Flex to a real development platform for Android, iOS and now even the Playbook.  Do they have more work to do?  Hell yes.  But no way could any of these “standards” organizations ever evolve html/css so rapidly.  None of that has changed and the very nature of a standard means it likely never will.  Especially when the members that make these committees are also fierce competitors.

Another point to make is that Flash doesn’t just compete with html.  It is now moving into arenas outside the browser.  This progress isn’t pretty but it is progress which is something the standards hawks know very little about.

One code base in multiple environments with consistent and reliable performance.  That is the promise Flash hopes to deliver.  Why would any developer scoff at that?

It’s great that html/css/javascript have finally arrived at the RIA party.  But they are noobs.  Which means they will have to party along with Flash for the foreseeable future.

I hope all these technologies continue to evolve so that developers have the rich tools necessary to continue pushing the boundaries of our digital lives.

Dave Bergschneider

3 years ago

@jt check your facts. CSS has been around as long as flash has even if it didn’t have animated effects the whole time. Just like Flash, it has evolved and made significant progress over the last decade and not usually by the said committees but the browsers/user agents playing catch-up. The most significant enhancements have been in the last 3 yrs with Flash just the same as CSS and this is because the browsers are finally stepping up to the plate and competing for market share and Adobe has been forced to move their lazy arses.

I can see some are passionate about the subject matter and have actually jumped the rails of the context of what we were discussing and into “I’m better than you” debates. Both flash and these other languages have their strengths and weakness. The difference I was originally discussing was HTML5 has nothing to do with these supplemental technologies that have been around for years including flash, video, audio, css (and animations). I had only pointed it out because it was a marketing tactic by Apple to bunch them all together to create the drive behind the new HTML standard.

@Alain I think your still confused on what HTML5 is or isn’t. As for the ActionScript, why would I download any program when I can use any other language I wish to accomplish the same thing with my normal editor of choice using another language that doesn’t require being compiled in a Flash container of some kind? With that said, I still believe their are things you can do in Flash that you can’t by other means however most of the more common/basic things are very tedious in Flash so I opt not to do it.

Alain

3 years ago

@Dave Bergschneider
Believe me i know what HTML5 is. 
HTML5 is build around JS. And JS was simply not build for the type of things we are trying to do today. Filesystem access, Hardware access etc… Until the browsermakers find a way to run a “secure” JS i have some problems with that power given to JS. The web is a very unsafe place and you never know where the scripts you are loading on a page are coming from.

“I still believe their are things you can do in Flash that you can’t by other means however most of the more common/basic things are very tedious in Flash so I opt not to do it”

  What are those bacis things that you are talking about that are tedious with flash ?

Again you choose the right tool for the right job. I m glad HTML/CSS/JS is becoming something good. But this does not mean bashing Flash everytime someone is able to do some fancy animation with Js and CSS. Also this   “open web standard”  argument is just getting odd.. Without Flash the web would not be where it is today. 

jt

3 years ago

@Dave Bergschneider

You say: “CSS has been around as long as flash has even if it didn’t have animated effects the whole time”

Animated effects are just one of MANY things CSS didn’t have.  And I find it both sad and hilarious that you would choose to mention animated effects within a post filled with comments of users who can’t even view these effects consistently…I mean it’s 2011 for christ sake.  When will someone be able to post a tutorial like this on CSS and not have a bunch of commenters complaining about how they can’t view the effect/animation in their browser, 2012? 2013? 2014?

And thank you for doing me the favor of providing me a perfect example of the point you still seem to be missing.  The reason for this fragmented implementation is due BECAUSE of the different browsers/user agents AND committees.  Don’t forget that they are one and the same since these committees are partly made up of representatives of these browser manufacturers.  When you talk about these committees you are talking about the very same competing companies/interests.

I’m not against CSS/HTML/JS.  I’m against the way they are developed, standardized and implemented.  I’m all for openness and standards and everyone holding hands singing cum-ba-ya.  But that’s not the way the real world works.  Can you imagine the progress the web could make if these technologies could be developed with the same focus as Flash?!  We’d be at Web 5.0 by now.  But alas, we’re still trying to get to Web 3.0.

In closing, I’ll say that I hope html/css/js continue to enjoy the speed with which their recent enhancements have taken place and that all those responsible for it get their act together.  As for Flash, as long as those browsers/user agents continue trying to one-up one another, it will be there ready to provide some sanity in the resulting chaos.

Chris Kovaks

3 years ago

I have been using the Sencha Animator beta and it is absolutely true that the output is not compatible with all browsers - but that for me has been its strength.  Some other recent tools used for creating animation like Hype offer better compatibility but with tradeoffs that make them useless (bad performance and a big mess of support code).  It seems the Sencha team has restricted their tool to only what Webkit handles well (with an emphasis on the hardware accelerated features).  For the mobile platforms I work on this has helped me do some amazing stuff that Flash would certainly choke on (not that I am a Flash hater - its is a great tool that has its place).

I think that it is a good strategy for Sencha Animator to “Skate where the puck is going” and I hope the product keeps its current trajectory.

Unity

3 years ago

Cheers pal. I do apprecaite the writing.

John

3 years ago

No offense, this is the most basic animation ever. There is nothing really impressive about this. How about replicate some decent animation from a flash source, then maybe we’re talking.

Good effort on the author, no disrespect. Flash still owns though.

interfaSys

3 years ago

Works on the PlayBook smile. HTML5 should only be used for mobiles today (even there it’s a mess). It’s too much of a hassle to make it work everywhere.
At the end of the day, it’s all about having to satisfy a client’s needs and he will probably not care about the technology used as long as the results meet his expectations and the price is right.

It’s still great to see a project like Animator come to life. It reminds me of Flash 3 where the only way to program was to use timeline loops smile

Joe Scorpio

3 years ago

Thanks for the tutorial - really helpful - one minor point, in the section ” Iteration: 0 (infinite)” the word “infinite” should be written out in the General Properties/repeats window rather than “0”

Jodie

3 years ago

It works for some applications, but there’s no way to pause or interact with the animations you’ve created, you can only make them play or rewind, there’s no interactivity like flash where you can truely effect what happens and when based on everything from rollovers to clicks, as well there’s no way to make “movieclip” style elements that run independant of the main timeline. I’ve used it and its okay, it just reminds me of an archaic version of flash from 10 years ago or something. It truely is a bummer that the internet is digressing away from “designers” and animators, and getting a code geeky. We need something like Final Cut for the web!

Animesh Kumar

3 years ago

Sencha will surely override the use of flash in the very near future..
thanx to the team for making such great application..

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.