Your one-stop web everything MJPage Design

MJPage Design

LEARN THE BASICS

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:

What Description
Position and sixe x position, y position, width, height.
Color for fill and border solid color and gradient including an eye dropper to choose colors from images or other elements.
Transform scale, origin, rotation, skewing
Corners size of the corners of a shape
Cursor types auto or specific like hand pointer
Shadows (one shadow allowed) select the posiitons (x and y), the blur, the color, and the spread.
Filters (not working in all browsers) invert, hue, contrast, saturate, sepia, grayscale, blur, shadow
Clip select tje clip area of an object
Accessibility essentially the alt text for an element. Also included the tab index.

These properties are instantly live on the selected element.

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

Example


sym.$('Rectangle').css('background-color','red');

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.

The Libray Panel

There are six library panel and each one contains elements that are automatically added if you have anything in any folder like: images, media, js.

what Description
Images Any image that is used in your composition will appear in the images library. Images can be dragged to the stage from there.
Symbols Any time you create a symbol from the stage or from the elements panel, it is added to the Symbols library. You can drag any symbol to the stage from the Symbols panel. If you add the same symbol several times the word copy will be added at the end of the symbol's name.
Fonts When you add fonts via the font panel in the property panel or using the + sign, the font information will be added to this panel.
Audio Audio files will be added to the media folder. If you have created the media folder when you save your new composition, all audio will be included in this panel. If you delete an audio file in the folder you will get a message asking you to update the composition. I usually answer no to avoid losing work. It will automatically update anywayt.
Video Files are acting in the same way as the audio files and are also added automatically to the panel.
Scripts This is an important panel I will discuss in more details below.

The Script Panel

After you use Edge Animate for a while, you will want to extend its capabilities. As I always says: "Why reinventing the wheel? If someone has created a plugin, then why spend time to code from SCRATCH. One of the most used script is jQuery. JQuery is used widely to create plugins. So when Adding plugins, add jQuery first and then any other plugin you need. The second most used script is jQuery-UI. With is you will be able to add drag n' drop capabilities for examples. Make sure you load your scripts or plugins in the correct order. JQuery should be at the top since most plugins are dependent on it.

As you will notice in the image above, there are two ways to add a script - from Disk or from a URL. Depending on the requirement of your network or hosting service, choose one or the other. Some prefer to host the files on their hosting service in case the plugin provider site would become unavailable. This is your choice!

Next ... The timeline.