Your one-stop web everything MJPage Design

MJPage Design

Tips and Tricks - Everything about Plugins You need to Know

Some of these tips may have been covered in the past but they are worth repeating.

Many of us tend to want to do things fast especially when our boss is waiting for fast production. Moreover, if there are plugins out there that can do something interesting or needed, why spend the time rewriting the code? It is not out of laziness, though sometimes that could happen :( but it is more a matter of productivity. There are a few things to remember when using plugins.

What is your version of Edge Animate?

If you are using the latest version of Edge Animate, see below.

If you are using version 2014.0.1 or earlier, Animate includes jquery automatically. So no need to add it in the script loading panel. The rest applies as with 2015.

When loading scripts in versions 2014.1 or 2015

Remember that many plugins are jquery dependent. A clue is that 'juery' is included in their names, but it is not always the case. So do not assume. If the plugin you choose is, then it is imperative that you load jquery FIRST.

The order in which you load your plugins is important. If you inserted all your plugins at once, this most likely will result in having them in a crazy order. Fortunately, you can drap the scripts in the order you want always remembering to have jquery in the first/top position.

Remember plugins authors are nice people

First they are nice because they share their plugins with us when they could have kept that edge (no pu intended) for themselves. Most likely the author of the plugin provided a nice documentation. Read it! They also often have an API page that is worth consulting. It is usually straight forward and if you can read the code, then you will know what to do. Authors also give a lot of examples which is really helpful.

Unfortunately some plugins are hard to integrate with Edge Animate. All I can say is, try it and see what happens. Check out the Edge Animate forum where someone may have posted an example of that hard to deal plugin. Check out my previous tutorials where I have some examples.

Remember to use the minimized version

Authors provide both regular and minimized versions. Use the minimized version in Animate. If you are a programmer, use github to participate in the plugin or make suggestions.

Local or CDN

Depending on your production rules, you will have to choose whether or not you want to host the plugin. This is strickly your decision. Most popular plugins are hosted on a CDN and provide the necessary links. This also allows you to keep your publishing files smaller. Of course you can host the plugin yourself. Just follow the instructions to download it. Fortunately Edge Animate allow both methods.

Popular plugins

There are lots of great plugins out there. I have used many of them and have made some tutorials for some great ones. The list below is not exhaustive of course and is not in order of preference either. You will find yourself the ones you like or need to use.

Some plugins have been made specially for Edge Animate and are noted with a "*". Some plugins are free and may ask for donations. Sometimes their status changes from free to not free so do not hold me responsible if that happens. Some others cost a one time fee or a yearly membership fee with some added benefits .

jquery-UI This plugin allows you to add a lot of interaction such as drag n drop Find it here.
jquery-touch-punch Nice touch (no pun intended) - this plugin does the job for you if your users are going to use a mobile device. Find it here.
GreenSock This is an amazing pluggin! Note the circular drag which is great! Find it here.
Edge Commons * Created by Simon Widjaja. This was made specifically for Edge and has been implemented by many users. Find it here.
edgehero * Created by Rob Boerman. This is a great and easy to use plugin for galleries, 3D cube, etc... Find it here.
isotope I love this plugin. Allows you to sort divs as you can see on my tutorial page. Find it here.
reel Great plugin for commercial site or sites that want to be able to show a 360 rotation of an object. Find it here.
blockit Similar to isotope except you can have different sizes for the boxes. It is a dynamic grid. Find it here.
elevate Zoom Zoom tool. Image with thumbnails. Find it here.
Simple Weather Cool plugin to add whether on your site. Find it here.
shuffle letters It's name is explicit. Fun effect for any text on your stage or in a symbol. Find it here.
flippage This is a great light plugin for flipping pages of a book. Find it here.
jqfloat Makes objects appear like floating on your page. Find it here.
flot A plotting library to make graphs. Find it here.
jparallax A cool and simple parallax effect between layers Find it here.
MORE TO COME! Let me know if tere is a plugin you would like me to explore and test for Edge Animate. Find it here.
Find it here.


I will add interesting plugins as I come across them. So keep coming back here for more info and if you need a sample file, get it touch with me on my email form.