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