Edge Suite not working after Edge Animate upgrade

Hi,

I have tested 7 animations that do not use a preloader, and all uploaded an worked correctly.

I tested 3 animations that do use a preloader and they also uploaded an worked correctly.

I tested 3 animation on a single page and all of them displayed correctly.

I also tested 1 animation that: has a preloader, does not use the Adobe CDN, and does not ” Publish preload DOM as a separate file.” This animation also uploaded and works correctly.

BUT, I did see some playback issues. I never saw my preloaders (wait cursor animations) and many of the animations did not display as they should have until my browser window was resized. I want to note that this may be more of an issue of browser refresh than a problem with the plugin. To do the testing, I would import an animation; in the WP admin update the shortcode, then in another tab reload that page to see the new animation.

I am going to do some more testing to see if the animation sizing issue that I ran into is related to the plugin. Namely I am going to setup individual animations in their own pages instead of reusing the same page. Along with this I need to check if selecting the settings for Responsive Scaling and Center Stage in Edge Animate might be related to the sizing issue I just encountered.

More to come …
~ PacWeb

Ok good news and bad news …

The Good News – Using the experimental build (from a few days ago); I have used the plugin to load in an almost full width animation into the header on the local dev version of my site. This animation is replacing my company logo. The site is running on WP 4.0, as well as the Genesis framework and a decently complex, responsive theme. The animation has a downlevel stage, as well as being set to responsively resize (width only). I used the php if statement, loaded in the functions.php (the theme has a function in there that controls the header image) then set a default animation through the plugin in the WP Admin. It all works perfectly, including the responsive resizing. I am now able to further refine the animation in Edge Animate, then just do a quick upload in the plugin to see the update.

The bad news – I have seen the same quirk that I saw this morning. When the page loads for the first time it is relatively blank and massive in size. I saw massive because there are very, very long horizontal and vertical scroll bars. If I reload the page (I think it goes away). If i resize the page, even just a small bit, the page loads up correctly. I think I have only seen this with animations that are set to use the Responsive Scaling setting in Edge Animate.

Timm – I will try to reproduce the problem and email you a screen shot.

~ PacWeb

Here is an update to the problem I found earlier and a solution …

It has been difficult to exactly reproduce the problem I saw yesterday. What I am seeing is that when Responsive Scaling is turned on in an animation, the stage becomes huge (proportionally) in the final webpage. The animation ends up bigger than what was built in Edge Animate. It is as if responsive scaling over scales the animation. For example, I built a test animation that was 550×353. When I inserted it into a page, the animation extended beyond my browser window, which was about 1400 by 720.

I found a simple fix for this problem:
make sure to set a Max Width for your stage, equal to the actual width of your stage.

Using my previous example above, when I set a max-width to 550, and re-uploaded the animation, the animation was the right size and exactly the same as in Edge Animate.

~ PacWeb

PacWeb,

seriously, thanks a tone for all the testing!!! This helps a lot to move forward, I really appreciate your help!

Would it be possible for you to test an animation without preloader and without CDN, think someone reported a problem somewhere.

I’m not sure yet why the responsive scaling doesn’t work anymore. Could you maybe sent me your test animation where you set the max width, then I could take a closer look. Maybe we need to take a look at the edge animate forum and open an issue over there.

Hi Timm,

Glad my testing is helpful. I am happy to be helping out. It is a great plugin that makes life easier. I really like that it is easy to add animations either through shortcode or by hard coding. It is great that installing the plugin gives someone the means to work either way (in code or shortcode). But once it is installed and setup, updating your animations is a 2 second process. It really puts you into a situation where your are concentrating on designing and animating, not fighting code or laboring to update.

I will do some No Preloader, No CDN tests. I have been testing with 2 sets of animations, one set with preloaders and one without. Not sure if the without preloader set uses the CDN.

Yeah the responsive scaling quirk is weird. I will email you two animations: the one that uses the max width and another that doesn’t (and that uses a big animation that really demonstrates the problem ).

With all of my tests in the past few days, it looks like uploading is not an issue any more.
~ PacWeb

Thanks for the nice plugin, I did a few simple animations; uploaded them in the ea5 version of the edge suite. The animations showed fine in firefox, complete with working interactions and sound. In chrome there were problems, I was seeing big large grey boxes filling the browser screen…

@nolimit.ma and @manstok – thank you for posting your experiences. I got me thinking and I have been able to reproduce the over-enlargement issue I mentioned above.

I have setup 5 animations on a testing site: https://es-test.sfwebfoundry.com/

4 of the animations have the over-enlargement problem. I have tested them in most of the major browsers, and the issue has existed in all cases (possibly except 1): Chrome, Safari and Firefox for MAC; Chrome, Firefox, and IE for Windows; and Safari Mobile (iOS). These animations are all set in Edge Animate to use Responsive Scaling, but do not have a Max Width set. So they blow up all over the place. The 5th one (named Test #4 version 1) has the Max Width set and displays correctly.

BTW, if you check out the site, please keep in mind that Test #4 was only meant as a quick and dirty test animation (I admit it is awful looking) to explore this responsive scaling issue. Another thing to note, Test #4 is only 352×301.

These animations were made in the Nov update version of Adobe Edge Animate, CC 2014.11. I used the latest, test build of the Edge Suite plugin.

So it looks like the importing issues are gone, but there is this scaling issue. Thankfully setting a Max Width in Edge Animate has been a solid workaround.

~ PacWeb

Hi Pacweb,

Just wondering if you can enlighten me.

I have updated an animation and used es5 to get it to upload, set responsive scaling and max-width in edge.

It uploads fine, however I cant see the animation as its scale is auto setting to 0.

What did you do to stop this from happening?

I will share the CSS for the container holding the edge animation:

.edgewrap {
position: relative;
width: 100%;
height: 100%;
max-height: 419px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}

Ok upon further inspection it seems to be the custom field that causes the problem. If I use the standard wordpress post field the animation shows (and is responsive), however if I use a custom field it will not load. No idea why this is happening as of yet.

Hi @shoalinagent,

Thanks for the info. That is a weird situation. Did you code the custom field or are you using a plugin for it?

I am curious what is causing the conflict. If it is a plugin it would be good to know. If you coded it can you share your code?

Thanks,
~ PacWeb

https://www.advancedcustomfields.com is the plugin. But I am using a wysiwyg field which is no different to a standard wp post field. I even tried to use a standard post field on the front page and it still didn’t work, now Im really confused. I do get a message upon uploading ghe animation which says unable to determine stage size perhaps its the reason. Not sure why im getting that message though.

Hi @shoalinagent,

That is weird. Advanced Custom Fields is The plugin for when you need a custom field. I will have to try installing it on a test site and see if I can get the same reaction.

The “stage size” message you are getting in the import confirmation, I get that all of the time. I am pretty sure Timm said it was harmless. But I think he is looking into it along with the responsive scaling issue.

Would you mind sending me an OAM of your animation?
I’d like to also test it with ACF. If you can’t share it, I totally understand.

Thanks,
~ PacWeb
[email protected]

Hi, ignore the warning, have to remove that, still a left over from an early version.

@shoalinagent Can you check the HTML source code of your page, is there any sign of the EA stage DIV? Did advanced custom fields work with previous versions?

Thanks a lot to the both of you for your help in the issue queue and for your testing! This is incredibly helpful and takes a lot of the work from me.

@pacweb, going to take a look at the animations that you sent now. I think in general this is kind of ready to be submitted to WP so that people can test it in the dev branch.

Hi,

@timm – sounds like a great plan. Even though there are quirks, I agree that getting more people testing would help. Then we can find more of the interesting quirks like @shoalinagent’s. It feels like there are more than a few versions of the plugin available, not just a production and a development version.

@shoalinagent – Timm brings up a good point, in Edge Animate are you assigning any CSS classes to your assets (images, shapes, etc)? Also, have you changed the attribute of any text assets from being a DIV to something else (h1, p, etc)?

Thanks!
~ PacWeb

@pacweb Thanks for all your testing and for your OAMs, that helped me to figure things out.

Am I right that when you set the max width that the animation doesn’t rescale at all anymore? So when resizing the browser nothing changes? I would still want that to work, otherwise people will complain a lot. I reformatted the whole EA runtime and digged through the code and think I found a way. Have to check if this is already part of the API and therefore stable or if we can expect lot of changes to it.