[Animated SVGs and Adobe Edge Animate - Does Edge Animate support GSAP and SVGs?]

Thanks very much for your patience and time (!) and apologies for "share zip files with club bonus plugins" (doh!) 

 

The most important thing is how you save your illustrator files:

http://graphicdesign.stackexchange.com/questions/33764/specify-css-class-names-on-svg-paths-using-illustrator

 

"myClassName" your svg Path class name

When you save your SVG from illustrator, click on the SVG code generator at the bottom of the panel that opens, the path class is located near the bottom:

 

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">

<style type="text/css">

.Drop_x0020_Shadow{fill:none;}

.Round_x0020_Corners_x0020_2_x0020_pt{fill:#FFFFFF;stroke:#231F20;stroke-miterlimit:10;}

.Live_x0020_Reflect_x0020_X{fill:none;}

.Bevel_x0020_Soft{fill:url(#SVGID_1_);}

.Dusk{fill:#FFFFFF;}

.Foliage_GS{fill:#FFDD00;}

.Pompadour_GS{fill-rule:evenodd;clip-rule:evenodd;fill:#44ADE2;}

.st0{fill:#FFFFFF;stroke:#231F20;stroke-miterlimit:10;}

</style>

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0.7071" y2="0.7071">

<stop  offset="0" style="stop-color:#DEDFE3"/>

<stop  offset="0.1783" style="stop-color:#DADBDF"/>

<stop  offset="0.3611" style="stop-color:#CECFD3"/>

<stop  offset="0.546" style="stop-color:#B9BCBF"/>

<stop  offset="0.7324" style="stop-color:#9CA0A2"/>

<stop  offset="0.9181" style="stop-color:#787D7E"/>

<stop  offset="1" style="stop-color:#656B6C"/>

</linearGradient>

<path class="st0" d="M4.7,4.3c0,0-4.3,94.3,81.7,95.7c114,1.8,110.3,97,110.3,97"/>

</svg>

[Animated SVGs and Adobe Edge Animate - Does Edge Animate support GSAP and SVGs?]

Thanks Diaco,

The example file that I supplied has worked successfully when previewed in a browser and on a local test server,

 

However my issue is I can't figure out why I can't get any other SVG to work using the same code and using the same div name ('GSAP')

 

Whenever I substitute a new SVG, even with the same name I do not get a result.

 

What could be the reason for this?

 

I have attached a file as an example....

 

 

Edit : attached files removed ( included bonus plugins )

[SVG Plugin with Edge Animate]

Apologies, let me clarify, there is a definite delay of time before the animation downloads and displays ...and I am not pointing a finger at any platform in particular, it's just an observation...

[SVG Plugin with Edge Animate]

Does anyone else get quite a time-lag before the animation plays? (successfully - I might add ) I'm talking about a serious lag...

[Animated SVGs and Adobe Edge Animate - Does Edge Animate support GSAP and SVGs?]

I have attached a file that I downloaded that indeed works with Edge Animate, but I can not get any other SVG to work in this file.

 

I am wondering what I am doing wrong... the code seems straightforward enough...

 

there is a bit of a lag when previewing as well... wondering what this about...

 

What I thought I could do is substitute another symbol for the one in this file, just keep the same div name but I suspect it's more complicated than this...

 

Could someone point me in the right direction as always?

 

I would like to use Edge Animate as my platform for developing for now...

 

 

You guys rock.

GSAP SVG DRAWING AND EDGE ANIMATE.zip

[Draggable MC, in increments]

AWESOME!

 

yeah I used the wrong naming convention... my bad -  I am an ole Flash user, it's just bad naming convention habits...

of course it is an HTML5 project as I no longer use flash, Greensock is soooooo gooood...  will keep that in mind when I ask my questions later...

[Draggable MC, in increments]

 

I have a  movie clip that I want to drag "scroll left" in 650 pixel increments.

 

I have a movie clip (mc1) that is 650x650px on the stage

 

(embedded within this clip is a symbol (mc2) that is 3250pxs x 650pxs (divided into 5 images)

 

I want to drag through mc1 in 5 swipes revealing each image (650x650) on mc2

 

//movie clip 1

Draggable.create(mc1, {type:"scrollLeft", edgeResistance:0.5, throwProps:true});

 

 

Could you help me with the code that I need to initiate this please,

I just need a push in the right direction and away I'll go until the next hurdle.

 

Learning heaps and loving it.

[applying a tween to a nested symbol via a button, edge animate]

Yeah I think you actually answered my question/s, thanks a lot...

 

So since I am working in Edge Animate, I adjusted the code to suit:

 

document.getElementById("Stage_mc1_element_element2_element3"); 

 

TweenLite.to(Stage_mc1_element_element2_element3, 10, {css:{scale:.5, alpha:.2}, ease:Elastic.easeOut})

 

So now I can tween multiple embedded symbols, very exciting stuff, I kinda came across similar code while embedding video into iframes within movie clips, thanks. 

 

So as far as 'attaching a timeline' I meant this:

 

//new timeline lite

//create a TimelineLite instance

var tl = new TimelineLite();

 

tl.to(Stage_mc1_element_element2_element3, 10, {css:{scale:.5, alpha:.2}, ease:Elastic.easeOut})

.to(Stage_mc1_element_element2, 2, {css:{scale:2, alpha:.5}, ease:Elastic.easeOut})

 

tl.timeScale(6);

 

If you know of a more economical way of writing this let me know

 

[applying a tween to a nested symbol via a button, edge animate]

sym.getComposition().getStage().getSymbol('mc1').getSymbol('element').

 

Above is the button code (btn) I have to reach the symbol 'element',

nested in 'mc1' on the stage.

 

For this example I want to tween 'element' with this code: TweenMax.to(element, 3, {alpha:0.5});

 

in the future I want to apply a timeline to it. (is this possible? Not quite sure)

tl.to(element, 1, {width:"50%"});

 

My problem is that I can't quite point to it, or figure out how to do this... I have managed to work out how to add external images, video, iFrames and apply text to nested symbols via buttons but this one is an issue for me. I hope to be able to control nested symbols within other symbols this way.

 

Anyway I am a newbie and not that great at code so excuse my naivete. and don't laugh.

 

 

 

[Control a timeline from within Edge Animate]

I want to control my GASAP timeline that I have created in Adobe Edge Animate so this is what I do.

 

//declare my variables

var square1 = sym.$("square1");

square2 = sym.$("square2");

square3 = sym.$("square3");

square4 = sym.$("square4");

 

 

var tl = new TimelineLite();

 

//my simple timeline

 

tl.to(square1, 2, {x:445})

  .to(square2, 1, {x:-150})

  .to(square3, 1, {y:"-=160"})

  .to(square4, 1, {y:"-=160"})

 

 

sym.$("pauseBtn").click(function() {

tl.pause()

});

 

sym.$("playBtn").click(function() {

tl.resume()

});

 

and so on... (yeah I figured it out and this is the course I used to figure it out

 

http://greensock.com/sequence-video

 

AWESOME

easing_2.html