Edge Animate (EA): The Interface-Part 3

I understand that right now this is pretty boring information but I will be going through the FAQ  with samples soon.

I just want to concentrate on those who just opened animate and are wondering how it works and what does what. It can be pretty intimidating at first but soon it will become for you a familiar interface where a lot of things can be done.

With EA, you can do simple animations that require little or no code (that you have to write yourself) and robust compositions where a lot of interactivity can be performed. You can also load data and interact with it. You can send data back as well.

The one thing that one has to remember is that HTML5 is still evolving and that you MUST preview in different browsers (at least the most widely used) to see how it is rendering your composition. Sometimes I feel it is  like using a TV remote control - why do they not put the volume control and the channel control on the same side? When you change device, you inevitably press the channel control instead of the volume control because the other remote is done the opposite. It is frustrating! Having all browser vendors do things the same way is desired but it is not happening in some cases and you have to remember that.
The EA team is doing all they can to stay on top of that and the first update of EA CC has already been released to correct problems with IE by updating the Yepnope.js (an integrated asynchronous loader)  to its latest version. Read more you yepnope here.

The timeline

The timeline has a familiar look for those who have used Adobe Flash © or After Effect ©. It shows all the elements that you added to the stage. You can choose to show only the elements that are animated and hide the others by turning the funnel on or off.

The snapping tool will snap objects in position.

You can also decide how to set up your grid.

When setting elements on your timeline, you have several options for display, animations, key frames, etc.

1. The auto key frame records edits on the timeline. If an object is manipulated between 2 different spots on the timeline. If it is undesirable for an element, then you can turn it off.
2. The auto-transition mode allow you to add a smooth transition to an effect.
3. The pin allows you to create easily a from and to edit.
4. The easing tool have several easing types you can choose from.

The timeline controls allow you to play and stop the timeline so you can have a direct visual of the animation.

On the right bottom side of the timeline is the zoom tool which will be handy when you have a long animation or when you want to zoom in a particular time of the timeline.

When you animate an object, you have a visual representation of the animation (the green and orange part shown abobe). The 2 diamond shapes at the beginning and the end are the keyframes.

You can also add keyframes on the timeline by clicking the grey diamond shape next to the element's name.

When you open EA, there is a list of simple lessons to get you started. I highly recommend that you go through them. 

This is it for today!

So long...