MorphSVG in Adobe Edge Animate

[Liam@II]

hi,

 

im using Edge animate for its ease of use for Symbols with nested timelines.

 

ive sold the idea of using morphSVG as a transition effect in a banner im building.

 

my problem is that (and correct me if im wrong) you can only either import svgs as images in Edge Animate or paste the svg code into the published html file at the end and manipulate the code then.

 

im applying the TweenMax morph call in the compositionReady call within Edge seen below

 

// insert code to be run when the composition is fully loaded here
var rect = sym.$("redNovember")
var box = sym.$("box")


TweenMax.to(redNovember, 1, {morphSVG:box});

but its not working for me. i suspect its because Edge is looking for content it created within the stage.

 

ive followed a Edge and Greensock tutorial on Youtube and i can get it working fine, so i dont think its just a simple syntax error

 

 

any ideas would be much appreciated

 

Liam

[Liam@II]

http://greensock.com/forums/topic/12743-animated-svgs-and-adobe-edge-animate-does-edge-animate-support-gsap-and-svgs/?hl=edge+animate#entry53620

 

i found this post, so im going to look at this first before anyone needs to look at this.

 

sorry, i search morphsvg and Edge Animate and found nothing

[Liam@II]

ok,

 

i read that post and i got as far as

EC.SVG.accessSVG(sym.$("Pasted")).done(
function(svgDocument){
var yourSVG = $(".myClassName",svgDocument) ;
TweenMax.set(yourSVG,{ stroke:'red' , strokeWidth:5 }); // set stroke and stroke-width 
TweenMax.from(yourSVG,10,{drawSVG:0});
}
);

but i dont know if this is correct for my situation and if it is, currently its only accessing one .svg (pasted). il need to bring in a second .svg to morph to.

 

can anyone take a look please

[GreenSock]

I think it'd really help if you could show us the actual project files so that we can see what's going on. Would you mind posting the simplest, most reduced test case possible here (you can click the "more reply options" button to get to a screen where you can attach files, and don't forget to zip them first). 

 

Your code is actually trying to use drawSVG, but you mentioned morphSVG in your first post. Did you make sure you loaded the correct plugin file? 

[Liam@II]

Hi,

 

ive created a simple version of what i want to achieve and attached it here. ive removed the MorphSVG plugin from the js folder before zipping. i was using DrawSVG as a means of testing that i can get access to the paths within the pasted svg in Edge.

 

im using this code on the compositionReady call

 

EC.SVG.accessSVG(sym.$("Pasted")).done(
function(svgDocument){
var rect = $(".st0",svgDocument);
var poly = $(".st1",svgDocument);
TweenMax.to(rect, 1, {morphSVG:poly});
}
);

also in the zip is text doc with the svg output from illustrator.

 

and lastly, thanks very much!

 

Liam

 

 

 

morphTest.zip

[somnamblst]

You may want to ask on the Edge Animate forum. There are a couple people who have advanced knowlege taht are quite active and very helpful in an Adobe forum taht no llonger has any moderators.

 

https://forums.adobe.com/community/edge_animate/content?filterID=contentstatus[published]~objecttype~objecttype[thread]

[Liam@II]

You may want to ask on the Edge Animate forum. There are a couple people who have advanced knowlege taht are quite active and very helpful in an Adobe forum taht no llonger has any moderators.

 

https://forums.adobe.com/community/edge_animate/content?filterID=contentstatus[published]~objecttype~objecttype[thread]

 

thanks il give this  a try

[Liam@II]

I think it'd really help if you could show us the actual project files so that we can see what's going on. Would you mind posting the simplest, most reduced test case possible here (you can click the "more reply options" button to get to a screen where you can attach files, and don't forget to zip them first). 

 

Your code is actually trying to use drawSVG, but you mentioned morphSVG in your first post. Did you make sure you loaded the correct plugin file? 

 

sorry to be a pain in the ass Jack, just wondering if you had time to look at the files i attached? if its not achievable, i need to cut my losses and build outside of Edge

[Carl]

I tried your files in 3 different browsers and got a variety of errors.

it seems you weren't loading MorphSVGPlugin and you were trying to morph a <rect>

 

MorphSVGPlugin should warn you that you should use MorphSVGPlugin.convertToPath() before trying to morph.

 

However, even with those fixes, I'm still seeing problems. You may want to move forward with Plan B for now. Not sure when we will be able to look at this further. The way edge organizes things and loads them is very confusing.

[Liam@II]

Hi,

 

yes i deleted references to MorphSVG probably unnecessarily because someone got chastised for packaging up plugins in zips,

but i was referencing the file locally and yes im sorry in the file that was attached i was using 'rect' instead of a path. i had since spotted that error but to no avail. 

 

Plan B it it then.

 

thanks for looking. 

[Diaco]

Hi Liam@II 

 

your code should be something like this :

EC.SVG.accessSVG(sym.$("Pasted")).done(
  function(svgDocument){
    var myShape= $("#myShape",svgDocument)[0];
    var anotherShape= $("#anotherShape",svgDocument)[0];
    TweenMax.to(myShape,0.5,{morphSVG:anotherShape}});
  }
);

[Liam@II]

thanks Diaco!

 

 

can you tell em what the addition of the [0] does? and why the [0] isnt  needed in the DrawSVG example i referenced earlier?

im curious and i think it will help me learn

 

 

DrawSVG example

http://greensock.com/forums/topic/12743-animated-svgs-and-adobe-edge-animate-does-edge-animate-support-gsap-and-svgs/?hl=edge+animate#entry53620 

 

[GreenSock]

The jQuery object that gets returned by $(...) acts like an array, so adding [0] after it just grabs the first element inside that list/array/collection. 

 

What makes your example unique/challenging is that it looks like you're trying to reference elements that are sandboxed inside of an <embed> tag, thus regular document.querySelectorAll() or document.getElementById() won't work (mostly for security reasons, the browser sandboxes stuff). That's why you had to define the scope in your jQuery calls. So you can just tap into that for the other stuff too. Like if you wanted to convert the shapes, it'd be:

MorphSVGPlugin.convertToPath($(".st0, .st1",svgDocument));

Does that solve things for you?

[Liam@II]

Absolutely! thanks a million

 

The jQuery object that gets returned by $(...) acts like an array, so adding [0] after it just grabs the first element inside that list/array/collection. 

 

What makes your example unique/challenging is that it looks like you're trying to reference elements that are sandboxed inside of an <embed> tag, thus regular document.querySelectorAll() or document.getElementById() won't work (mostly for security reasons, the browser sandboxes stuff). That's why you had to define the scope in your jQuery calls. So you can just tap into that for the other stuff too. Like if you wanted to convert the shapes, it'd be:

MorphSVGPlugin.convertToPath($(".st0, .st1",svgDocument));

Does that solve things for you?