Edge Animate: Classes

Tip of the day:

If you want to add one or several properties to symbols, you can give them a class name and then apply this class name to all the elements.
Example: I want to give a number of my text elements a yellow glow.

I can add the class name to all these elements and then add the following code in compositionReady.

sym.$(".yellowGlow").css("text-shadow","0 0 5px #fcff00, 0 0 10px #fcff00, 0 0 20px #fcff00, 0 0 30px #ffd200, 0 0 40px #ffd200, 0 0 50px #ffd200, 0 0 60px #ff7800, 0 0 70px #ff7800");

This can be very convenient.

Next I will show you how to add classes loaded from a CSS file or from a JS file which is most practical when using plugins like edgeHero!

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...

Edge Animate: The Interface-Part 2

Elements created on the stage can be manipulate with the toolbox situated on the left side of the screen.

The Properties Panel

We have already seen that we can create 3 kinds of shapes in EA - rectangles, rounded rectangles, and  ellipses as well as text fields.

Each of these elements have properties that can be set via the property panel (see  above) situated on the left side of the working area or stage. 

Note: To activate all the properties on the panel, the element must be selected.

You will notice that these properties can be set in pixels (px) or percentage (%). 

The available properties are:

1. Position and sixe: x position, y position, width, height.
2. Color for fill and border: solid color and gradient including an eye dropper to choose colors from images or other elements.
3. Transform: scale, origin, rotation, skewing.
4. Corners.
5. Cursor types
6. Shadows (one shadow allowed).
7. Filters (not working in all browsers).
8. Clip.
9. Accessibility.

These properties are instantly live on the selected element. 

Note: CSS properties can be added or changed in code.

Beside choosing elements, this menu shows the select tool, the transform tool and the clip tool. 

On the right side of the screen under the Elements Panel is the library panel.

Assets: shows imported images

Symbols: shows the symbols that have been created. 

Fonts: shows the extra fonts from Adobe or other font services that can be added to the composition.

Nextr ... The timeline.

 

  

ANNOUNCEMENT!

Attention all Edge Animate users!

Today, Rob Boerman launches his awesome plugin for Edge Animate:

"Edgehero.js is made to make things simple for the beginner and to save time for the expert"



Let him know what you think.  (http://www.edgehero.com).
Like and follow on Facebook!

Edge Animate: The Interface-Part 1

For those used to Adobe Products, the interface will look somewhat familiar. 

The Stage

This is where you put your elements and your symbols. 

In code the stage is written with a Capital letter and can be manipulated like other elements because it actually is an element.

sym.$('Stage');  refers to the element stage.

Note: you can use single quote or double quote as long as they are a pair.

The elements panel

Every time you create an element (text field, square, ellipse, etc...) or import an image, it is listed in the elements panel on the right side of your screen. The elements are stacked into layer div, the bottom line is the element that resides at the bottom of the layers. Just like with a stack of paper, you can move layers up and down the elements panel by the drag n drop method.  

It is important to remember that if you want to access an element for a click event for example, it will need to be on the top. If it is not, you can move the layer or you can change the z-index with code when needed. 

You can use the following to move the element Rectangle to the top:

sym.$('Rectangle').css('z-index',10);
or

sym.$('Rectangle').css({'z-index':10});
Note the curly brackets in the second one. It is like  in <style> except you separate with commas. You can add as many properties as needed.

We will talk later about the different ways to target elements or symbols.

Elements names that appear in the Elements panel are also their id. The element Rectangle id is '#Rectangle' in jquery and in Edge can be referred to with:

sym.$('Rectangle');   is equivalent to jquery $("#Rectangle");

There are 4 different elements you can create directly in Edge Animate: 

• a rectangle
• a rounded rectangle
• an ellipse
• a text field

If you insert an image, it will also appear in a div:

Depending what you want to do with it, you can keep it as a div or change it to an img.

It is possible to swap images in code.

• If the image is a div you can use

sym.$('Viking').css({"background-image":"url('images/caveman.png')"});
The Viking image is replaced by the caveman image. Note that the image size will be respected. If your image is smaller than the original image it will repeat. It is therefore necessary to use no-repeat to prevent having several images.
Use:
sym.$('Viking').css({"background-image":"url('images/caveman.png')", "background-repeat", "no-repeat"});

• If the image is an img, then you use:

sym.$('Viking').attr('src','images/caveman.png');
Note that the image needs to be the same size as the original image or it will be truncated.
It is possible to create an array of image names and then load them on an event into the image div or img or into a container. 

Example:
var myImages = ['images/Viking.png','images/caveman.png'];
The advantage of using an array is that you can mix the kind of images: jpg, png, gig, svg and load them easily:
For example a click event will load a different image when you click on the image:
i=0;  // initialize
sym.$('Viking').click(function(){
   i++;  // increment
   sym.$('Viking').attr('src',myImages[i]);
});



To be continued...
Next: the properties panel

Some Tutorials

It is actually not hard to find good tutorials on the web.  

A very good resource for all of the important stuff is http://www.w3schools.com/ and it is rare when you do not find an answer there. This being said, a good systematic tutorial is a good thing. It is like learning a speaking language - you first get the essentials - then you start speaking the little you know and as you practice you increase your vocabulary and you learn new grammatical expressions, etc... In coding, you start learning the syntax (basics) , then the way each parts works (grammar), then you work out some examples (practice) and soon you are on your way coding your Edge Animate composition.

Javascript:

http://www.codeproject.com/Articles/755/JavaScript-For-Beginners
http://www.homeandlearn.co.uk/JS/javascript.html
http://www.w3schools.com/js/
http://www.hscripts.com/tutorials/javascript/

jquery:

http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/
http://www.w3schools.com/jquery/

CSS:

http://www.csstutorial.net/

After the tutorials

When I do not remember how to do something or plain do not know how to do it, I just Google it. It is amazing how much information you can find. Someone has already asked your question at some point and there is an answer out there. If not, ask the question on a forum and someone will answer. It is that simple.

Use the Edge Animate Forum

I can't help but promote the Edge Animate forum from Adobe since it always has good answers. Just do a search and if the answer if not there, ask.

EDGE ANIMATE : a new tool to do hml5 animations

Last year, after getting a new position at my company to develop interactivity for our online curriculum, I stumbled upon a new addition to the already vast panoply of tools by Adobe ©, the new, in preview, Edge Animate. Having used Flash in the past and loving to combine creativity and coding, I fell in love with Edge Animate right away.

I have been a faithful member of the Adobe Edge forum community, as resdesign, from the very beginning. My goal: helping people in getting familiar with Edge Animate. 

I have to say that helping others is a good way to keep on learning and stay sharp. 

The purpose of this blog is to put in one place the samples I have made while answering questions and to create a list of Frequently Asked Questions in order to help newbies and others who are interested in finding answers they may have a hard time tracking down otherwise.

I will try to post on a regular basis. If you have questions, do not hesitate to ask in your comments.

WHAT DO I NEED TO KNOW IN ORDER TO USE EDGE ANIMATE?

You could start making simple animations on the timeline without needing anything else. But is it really what you want to do?

Those who call themselves 'designers' often say: "I am not a coder." I get that! But, seriously, learning to code will free you as a designer! Do not hesitate to dive into some coding after taking some tutorials. You will become more powerful as a designer. You will become better and better at coding. Without having to depend on someone else to make your creations work, you will be more independent . Coding is intimidating but it is not so hard. If I learned it, so can you!

Tutorials:
javascript
jquery
CSS

I will recommend some soon.


More to come! Stand by...