Rocking the Boat of Flash with CSS3 Animations
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.
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.
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)
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.
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
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
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:
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.