Sencha Animator

What is Sencha Animator?
Sencha Animator is a new tool that makes it easy to create CSS3 transformation-based animations. So easy that you don’t even need a whiff of  CSS3 skills.. !
Actually, working with Animator will look very familiar to anyone who’s used the Flash IDE (or any tool that uses timelines) to create animations.

Let’s walk through a simple Sencha Animator project.

Our finished project will look like this.

First, you’ll need to download and install Animator – get it here.

1. Set Up Your Project
Once you get it up and running you’ll select File–>New Project and set the size (ours is 600×320). Next, save your project (File –> Save) where you can find it again.

New Project

2. Add Images
For our project we’ll be fading in each of the four elements of our logo. Assuming we’ve already separated the logo into PNGs, the first step is to place the images onto the Canvas.
Select the Image Tool and then click anywhere on the Canvas.

Place Image on Canvas

Now we have a placeholder graphic on the Canvas. Let’s link this to our image. Click the button next to the default image name in the General Object panel and browse to your image.

Link to Your Image

While in the Object Panel with your image selected you’ll also want to set the image Name and Position.

Set Name and Position

Repeat these steps with the additional images. You should now have 3 layers in your Object Tree. You can rearrange these so that the layers are stacked correctly.

All Images in Place

3. Well, that’s great – LET’S ANIMATE!
Set the Playhead between 0s and 1s and double-click in the timeline of the bottom layer (ours is called ‘LeftThing’).
This will create a white Keyframe and the Properties for this Keyframe will be displayed.

New Keyframe Added

Under Properties, change the Easing to ‘Linear’. This will connect the Keyframe to another Keyframe at 0s.
Select the Keyframe at 0s and change the Opacity to 0% so that this element will appear to fade in to the scene.
(You can scrub the playhead to watch it fading in — ooohhh, aaahhh!)

Keyframe Opacity at Zero

Repeat this process with the other two images so that each element fades-in on top of each other. Your timeline should look similar to this.

All Images Animated

4. Add Some Text
Let’s create some text and fade that in too.
Select the Text Tool and click on the Canvas.
Just like with the Image Tool, we need to adjust the properties of our new Text Element.
See the screenshot below to see the settings that we used.

Logo Text Properties

To simulate our logo, we duplicated the text layer (Ctrl-D) and changed the Content to a left parenthesis and then repeated to create a right parenthesis. We then positioned and changed the Fill Color of these new text layers to match our RealEyes logo.

Three Text Layers

Next we’ll animate these layers to fade-in like the previous layers.

Text Animated

5. Add Interactivity
Excellent. Now we have a logo whose various elements fade-in and then the animation stops.
So, how hard would it be to add some interactivity and make the animation repeat if the user clicked on the logo?
Here’s how.
Select the top-most image layer (‘Yellow Thing’ in our example) and open the Actions panel. You’ll notice several interactions to choose from.
Select ‘click’ and then ‘Go to next scene’ from the drop-down menu.

Setting Up a Click Action

6. Export the Project
Almost done! Lastly, we need to select File–>Export Project and then FTP this to our favorite web-server or simply open the  html file that Animator creates as it exports the project.
Viola – you have some snappy animation that looks a whole lot like Flash – but isn’t!

With browser support for CSS3 animation growing everyday, designers and developers have been turning to frameworks, libraries and plugins like transform.js, paper.js, move.js and JSAnim to simplify their workflow.   However, making convincing animations with pure code can be a frustrating and ultimately disappointing process. Because successful animation depends on nuance and timing, creating them with some kind of IDE or GUI has always been the natural solution (Flash owes a lot of it’s success to it’s easy to use and powerful timeline controls).

Without getting into advanced easing, multiple scenes, z-axis rotations, etc.., we’re really just scratching the surface of what this tool is capable of. While Sencha Animator is still a work in progress and will never be able to offer the power of the Flash IDE, we’ve seen that Animator is intuitive, easy to learn and offers a time-saving GUI for modifying CSS properties over time.
Another plus – the version that we used (1.2) seemed very stable.


Rumble in the Country

A flyer I developed for the Rumblers Car Club ‘Rumble in the Country’ car show in Terryville, CT.

Rumble in the Country

Rumble in the Country

Sustainable Cards Revamp

The challenge: take an existing site that was functional but was burdened with a generic design that did not capture the essence of the product or visually promote the brand.
The solution: see for yourself!

Old Sustainable Cards Design

The OLD Design

New Sustainable Cards Site Design

The NEW Design

See it live: http://sustainablecards.com

Squid Power!

sea squid
Just a little fun with Photoshop

Web 2.0 Mockup

Web Design Or is it 3.0 now? Anyway, here’s a redesign concept for a client that wanted a fresh look.

Car Show Posters

Rumblers Nomads Rumblers Nomads 2 new designs for a poster promoting a car show in Connecticut.

GT and the Sidewinders

Sidewinders Site I’ve been building a new site for local rockers GT and the Sidewinders. This site incorporates WordPress CMS functionality, but also has some After Effects motion-graphics snuggled under the navigation in the header.

BMW Microsite Idea

BMW Concept Here’s another take on integrating motion graphics into the web experience. This time I built a page for BMW’s X5 sport utility vehicle. This site gets it’s impact from the resizable full-screen CSS effect. The video in the background is a swf but all of the other elements are fluid CSS-based html.

Interactive Motion Graphics Concept

Sherwin Williams Concept So I designed and built some cool motion graphics for Sherwin Williams with the theme of Color Your World. The hard part is how to turn cool motion graphics into a practical, usable web experience. Let’s take it one step further – how can you make the experience interactive and involve the visitor even more?
To tackle this problem I built a microsite with a flash element that plays the movie and then changes color randomly with the users mouse movements. The user can play the movie again and change the movies color while it plays.

New Motion Graphics

Here is a motion graphics experiment for Le Vin Skin Care. The process began with some product photography at home with my trusty Nikon D90, and then some clever work in photoshop to get a 360 degree view of the product. Finally the photoshop layers were brought into After Effects where the bulk of the work was done with a lot of help from some great tutorials at VideoCopilot.net
(Click the image to see the ad..)

Next Page »