Transform your Vyond Animations into eye-popping CSS Animations

A unique eLearning Vyond Animation Implementation

Sometimes you want to blur the lines in your web apps, and have elements interact or be visible outside of their normal context.

In this Lesson Title Page treatment. I am using CSS to animate-in an animation that I built in Vyond, from the outside the screen display, over the background, and into the content area of the screen. It's more complex a process than it might appear.

Here are the steps. You'll need to have and be familiar with Vyond, Adobe After Effects, Adobe Photoshop, and a code editor and knowledge of CSS.

1. Build a custom animation in Vyond. Here I used a the built in jet-pack flying animation on 2 different custom designed characters
2. Use a green-screen colored background to build the characters on in Vyond.
3. Keep the animation length to one cycle (loop) of the Vyond pre-built animation.
4. Export (download) the video from Vyond.
5. Create a new project in Adobe After Effects and then a composition with the same dimensions as the Vyond produced video and import the the Vyond video.
6. Add the video to your new composition's timeline in After Effects. The composition duration should be the same as the video. Make sure the frame rate is a low as possible, 8 in this case, to keep the file size and number of output frames to a minimum.
7. Now key out the green background of the imported footage (in After Effects still).
8. Now you're ready to export a .png sequence from After Effects.
9. Add the composition to the render que and select .png sequence from the output options. Go ahead and render out the PNG sequence.
10. Next, create a new Adobe Photoshop document. The dimensions depend on the dimension of a frame of the exported PNG sequence. Make the width equal to the width to of one frame of the sequence, but make the height equal to the height of one frame x the total number of frames in your PNG sequence.
11. Now use guides to evenly divide the Photoshop document into the number of frame of your PNG sequence.
12. You can now import one PNG at a time , from your sequence, each on its own layer in Photoshop. Use the guides to place them exactly, and I mean EXACTLY, if you want your animation to play back smoothly,
13. When your down with this tedious process, save your Photoshop file out as one (tall) PNG file which is now a 'Spriteheet'. You're now ready to animate it in your app with CSS.
14. In Adobe Dreamweaver or your favorite code editor, use CSS 'steps' to precisely display one frame at a time of your Spritesheet within an appropriately described <div>. The dimensions should match one from of your PNG Spritesheet.
15. Here's the part of the CSS code that controls the example animation; simulated flying, and animation of the simulated flying into the content window:

.sprite {width:500x; height:500px; display:block; background:transparent url(../images/title-animation-v6.png) 0 0 no-repeat; margin: 0; animation: flying 1s steps(9) infinite;}

.sprite-container {margin: 0; animation: fly-in 2s ease-out 1 normal backwards 0s;}

@keyframes flying {0% {background-position: 0 0;} 100% {background-position: 0 -4500px;}}

16. Also, I'm using a screenshot from a Vyond background that I blurred slightly, as a background and am using a box-shadow around the content window to add a bit more pop.

That's it! Happy Developing!!