Edge Suite

Description

Upload of compositions through published OAM files. Integrate Adobe Edge Animate compositions seamlessly into your website.

Detailed tutorials on how to install and use Edge Suite can be found here:

More resources can be found at EdgeDocks.com.

The plugin has been intensively tested over the last couple of months and seems to be rather stable, it is up to you though if you want to try and use it in production.
If you experience any problems please read the FAQ before opening an issue in the support section.

WARNING: Future versions of Edge Animate might not be supported! The development of the Edge Suite plugin has been very time consuming due to the constant change of the
Edge Animate runtime. I can not keep this up and am therefore not sure that I can support future versions. If you are interested in taking over the plugin for further development
please contact me. Take a look at the FAQ for manual integration of animations as an alternative to the plugin.

Features

  • Upload Edge Animate compositions through published OAM files
  • Manage all compositions
  • Easy placement of compositions on the website
  • Shortcode support for posts and widgets
  • Sharing of resources
  • jQuery no conflict mode

Support

Please report any bugs to the Edge Suite support queue on wordpress.

Installation

  1. IMPORTANT: Backup your complete wordpress website, this module is in early development state!
  2. Install the Edge Suite plugin as any other wordpress plugin.
  3. Make sure /wp-content/uploads/edge_suite was created and is writable.
  4. Backup your complete theme folder.
  5. Publish your project in Adobe Edge with option “Animate Deployment Package”. It will generate a single OAM file.
  6. Go to “Edge Suite > Manage”, select the oam file and upload it.
  7. Upload as many composition as you want.
  8. After uploading, the compositions can be placed in multiple ways on the website:
  9. Shortcodes:
    • Take a look at the manage page drop down and remember the id of the composition you want to integrate. E.g. for “3 – My first edge compositions” the id is 3.
    • Edit a page and include [edge_animation id=”3″] where 3 is of course your composition id.
    • Save the post, the composition shows up.
    • You can also use [edge_animation id=”3″ left=”auto”] to center the stage on the page.
    • If you want to define a pixel base left an top offset of e.g. 10px from the left and 20px from the top, try [edge_animation id=”3″ left=”10″ top=”20″]
  10. Template based:

    • Here you insert a PHP snippet in your theme files:
    • Find e.g. the header.php file in your theme.
    • Insert the following snippet where the compositions should appear (inside php tags):

      if(function_exists(‘edge_suite_view’)){echo edge_suite_view();}

    • Placing the code within in a link tag (<a href=””…) can cause problems when the composition is interactive.

    • You now have three options to tell wordpress which composition to show where the PHP snippet was placed.
    • Default: A composition that should be shown on all pages can be selected on the “Edge Suite > settings” page under “Default composition”.
    • Homepage: A composition that is only meant to show up on the homepage can also be selected there.
    • Page/Post: In editing mode each post or a page has a composition selection that, when chosen, will overwrite the default composition.

FAQ

Dev version

When experiencing any problems, please always try the latest dev version (https://downloads.wordpress.org/plugin/edge-suite.zip).
Manual installation is needed. New features and bugfixes are always tested first in the dev version before they are being merged
into the stable version.

Manual integration

Animation with newer versions of Edge Animate can easily be integrated manually without depending on the plugin. Consider that as an
option when running into problems.

Publish your composition with option “Animate Deployment Package” and rename the .oam to .zip. Unpack it and upload the “Asset” folder
to your server under “myproject” (maybe /wp-content/uploads/myproject). Open the contained main project .html file. Copy the

<div id="Stage" class="EDGE-11111111"></div>

line into your desired template. Also copy everything in between the ‘script’ tags (including the tags) and insert it into the same template.
The first line after the opening script tag should read

var custHtmlRoot="";

Adjust that so it matches the relative project directory. E.g.:

var custHtmlRoot="/wp-content/uploads/myproject";

Save the template. The animation should come up.

General things to check when problems occur
  • Open the debug console in Chrome (mac: alt + cmd + j) or Firefox and check for JavaScript errors.
jQuery issues

Try to enable jQuery no conflict mode in the settings page, this might resolve conflicts between Edge Animates
version of jQuery and other plugins.

Animations don’t show up

Uploading worked but nothings shows up on the page. Things to check:

  • Look at the source code of the page and search for:

  • “stage” – You should find a div container, if so HTML rendering went fine.

  • “_preloader” – You should find a script tag, if so JS inclusion went fine.

  • If “stage” or “_preloader” are not found, disable other plugins for testing to check if they might interferer.

  • For testing remove all other fancy JavaScript like galleries, slideshows, etc. that are placed alongside the animation, the JS might collide.

  • Enable the JS debug log in the settings

  • Enable jQuery no-conflict mode in the settings

Custom JavaScript

When using custom JavaScript code make sure you reference the Stage through

sym.$('Stage')

$(‘#Stage’) or sym.$(‘#Stage’) will not work. The reason is that Edge Suite needs to alter the Stage Div Id, so ‘#Stage’
does not exist. When using sym.$(‘Stage’) Edge Animate will use its internal reference to get the stage.

Head Cleaner: Animations don’t show up

Head Cleaner basically skips the processing of edge_suite_header() which is needed to inject the Edge Javascript.
Under Settings > Head Cleaner > Active Filters check the box “Don’t process!” for “edge_suite_header” and click “Save options”.
This stops Head Cleaner from “processing” ede_suite_header(), which basically means allowing edge_suite_header() (reverse logic).

PHP ZipArchive not found

zip.so needs to be installed as a PHP library

Background animation

If you want to use your composition as a background animation, try the following CSS on your stage id, e.g. #Stage_mycomp

Stage_mycomp{

position: absolute !important; /* That is not pretty, but no way around it. /
top: 0px; /
Aligns the animation with the top of the header (can be removed or changed) /
z-index: -5; /
Places animation in the background, set to a positive value for an overlay */

    /* Only use the following if you want to center the animation */
    left: 50%;
    margin-left: -346px; /* Half the width of the stage */
    top: 50%;
    margin-top: -200px; /* Half the height of the stage */
}

Reviews

Doesn't Work with Latest Version

** Note: Edge Animate has been discontinued, you can still install it and use it from Creative Cloud, but it will no longer be updated. As such I would imagine this plugin will never be updated as well **

This plugin does what it needs to and is the easiest way to add Edge animations to a WordPress page. The plugin still works, but only works with Adobe Edge Animate CC 2014. If you have the CC 2015 version, just install the previous version. Here’s an adobe guide to do that:

http://blogs.adobe.com/adobecare/2015/06/16/how-to-find-and-install-previous-version-of-adobe-apps-in-cc-2015/

After switching back to the old version, the animation I made in 2015 loaded and published fine and I was able to use this plugin again.

Don't use it

Doesn’t work. As above, with the latest and greatest improvement from Adobe.

Read all 37 reviews

Contributors & Developers

“Edge Suite” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

0.2

Change of filesystem usage

0.3

Changes to support Edge Animate version 1.0, minified files, oam files

0.4

Bugfixes

0.5

Bugfixes, jQuery no conflict mode, readme update

0.6

Bugfixes, readme update, better error handling, Edge Animate 3 updates