How to manage elements of SVG via Edge Animate

I have a particular SVG image and I want to manipulate a particalr line within it. For example I want to rotate it, or to bend it.
How can I do this using Edge Animmate?
Is this even possible to do using only WSIWYG tools, or I had to dig into some JS code?
Thank you for taking time!

Hi,
One discussion close to your issue: http://forums.adobe.com/message/4868321#4868321
I re_upload files here: attachments.
It's not quite your issue because you don't have to changes images from png to svg (first task).
But, other tasks are very close to your question.

Similar Messages

  • Snap.svg in Edge Animate

    Hi, everyone,
    I'm trying to use Snap.svg.js in my EA composition to animate some svg elements. Does anyone know if this is possible? That is I want, to access an svg graphic created in Ai to animate it, but EA wraps it in a div and I need to be able to get inside of this div to access the graphic to use
    Snap("svgGraphic")
    Then change some of the attributes.

    I recommend Edge Commons (Edge Commons - Extension Library for Edge Animate and Edge Reflow | EdgeDocks.com) for this, it makes the whole thing really simple! There's a description of how to use it on the website but to give you a rough idea of whats required:
    Add onmouseover/onmouseout events to each State in your svg using the SVG Interactivity palette in Illustrator, e.g. onmouseover=notify(this, "over"); onmouseout=notify(this,"out");
    Import the svg into Edge Animate then use the following code to pick up the notify() value and run your mouseover and mouseout functions:
    EC.SVG.accessSVG(sym.$("map")).done(
      function(svgDocument){
    svgDocument.addEventListener("over", function(event) {
    sym.setVariable("overPart", event.target);
    var stateOver = sym.getVariable("overPart");
    stateOver.style.opacity=0.2;
    svgDocument.addEventListener("out", function(event) {
    sym.setVariable("outPart", event.target);
    var stateOut = sym.getVariable("outPart");
    stateOut.style.opacity=1.0;
    You can also select svg elements by ID from within your Edge composition, e.g. $("#florida", svgDocument).css({'opacity':'0.2'});

  • How to adjust bullet points in Adobe Edge Animate?

    How to adjust bullet points in Adobe Edge Animate?
    when a bullet point is long and does not fit in one line it apears in the next line unaligned.

    Hi Elaine,
    Yes, the only way I have discovered so far is using HTML and force it on stage based on my text width size, otherwise bullet list won't be align vertically. This is how currently I do it:
    sym.$("text1").html("<br>● Lorem ipsum dolor sit amet, consectetur adipisicing elit<br>&#160;&#160;&#160;Lorem ipsum dolor sit amet, consectetur adipisicing elit <br>● Lorem ipsum dolor sit amet, consectetur adipisicing elit")
    Thank you for your help in advance.
    Sean

  • How to pass javascript variables into an Edge Animate project from HTML

    I have just about got the basics nailed for Edge Animate now - coming from a Flash background it's been fairly straight forward, nice work so far (but more on that later)
    I have had to build a "promoted items" slider for the homepage on one of our sites....previously this would have been a flash animation but, hey ho .
    I originally built it as a jQuery extension/plugin but found it too time consuming to make minor alterations - that's where Edge came in and SEEMED to fill the job pretty well.
    Now for the moment i'll put on hold the whole issue about how we NEED to be able to work with dom-level elements directly on the page (eg, animating divs and images within a ul-li structure which is how these things usually work) and concentrate on the Edge specific issue...
    I've seen a few people asking this same question, but none of the answers either a) work at all for me , or b) are good enough for what I need to do.
    see previous solutions here http://support.muse.adobe.com/message/4658175 and here : http://forums.adobe.com/thread/1065343
    My project uses an internal array of data, and while in "preview" mode it works reasonably well.
    in the Stage creationComplete event i have Edge code like, for example :
       var imagesArray = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg"];
       var headlinesArray = ["product 1", "product 2", "product 3"];
       var subTxtArray = ["lovely widgets", "smelly doo-dads", "purple whatchamacallits"];
       var linksArray = ["http://www.adobe.com", "http://www.adobe.co.uk", "http://www.adobe.net"];
       //variables set to full internal scope, used immediately after this and called from sub-elements afterwards
       sym.getComposition().getStage().setVariable("imagesArrayData", imagesArray);
    this code obviously needs to be changed via the HTML page that is calling it.
    IDEALLY i would have these elements already on the page ( <div><h1>Product 1</h1><img src="....  etc ) and then jquery it to hell to make it look funky. This is how we NEED to be doing it in the future...that way our content is still searchable and findable by search bots etc. Edge will output a "static" version of the page, i tried that, but it won't work for dynamically built objects. There's no way i've found of building an array of Symbols based on the existing DOM structure like you can do in jQuery itself.
    however, in the meantime i'll settle for being able to set a javascript call up somewhere - like the old flashvars solution (which was horrible fudge, but worked as a way to get data into a project )
    i'd REALLY rather not use an internal jSon call .... it's adding uneccessary bandwidth and additional server processing when the data it needs has already been retrieved from the database when the HTML page is drawn - AND it means i need to make sure that the json producing web service gets ported accross to any other projects that use this same "slider"
    i've tried removing the internal declaration and changing my HTML to :
    <script>
    var imagesArray = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg"];
       var headlinesArray = ["product 1", "product 2", "product 3"];
       var subTxtArray = ["lovely widgets", "smelly doo-dads", "purple whatchamacallits"];
       var linksArray = ["http://www.adobe.com", "http://www.adobe.co.uk", "http://www.adobe.net"];
    </script>
    <!--Adobe Edge Runtime-->
         <script type="text/javascript" charset="utf-8" src="index_edgePreload.js"></script>
    etc
    but this hasn't worked.
    i'm going to attempt the solution using
    AdobeEdge.bootstrapCallback(function(compId) { ....
    as found on http://forums.adobe.com/thread/1065343
    but this doesnt explain how to set up Stage level variables, rather than targeting a specific Edge property
    Anyone got any ideas? Or do I just scrap the project?
    IMHO : Adobe need to be careful of falling into the same mindset that most of the anti-flash brigade have.
    Please remember that Flash is used for WAY more than just adverts.
    At the moment, Edge will work great as a way to put a simple animation onto the page with REALLY basic interactivity - suitable for a basic advert - but we need our HTML5 animations and scripts to be fully dynamic, data-driven, and portable, and preferably using existing DOM elements.
    One last thing, any chance of a feature to say "my page already uses jQuery, don't import Edge's own outdated version"
    Message was edited by: j1mp

    I have just about got the basics nailed for Edge Animate now - coming from a Flash background it's been fairly straight forward, nice work so far (but more on that later)
    I have had to build a "promoted items" slider for the homepage on one of our sites....previously this would have been a flash animation but, hey ho .
    I originally built it as a jQuery extension/plugin but found it too time consuming to make minor alterations - that's where Edge came in and SEEMED to fill the job pretty well.
    Now for the moment i'll put on hold the whole issue about how we NEED to be able to work with dom-level elements directly on the page (eg, animating divs and images within a ul-li structure which is how these things usually work) and concentrate on the Edge specific issue...
    I've seen a few people asking this same question, but none of the answers either a) work at all for me , or b) are good enough for what I need to do.
    see previous solutions here http://support.muse.adobe.com/message/4658175 and here : http://forums.adobe.com/thread/1065343
    My project uses an internal array of data, and while in "preview" mode it works reasonably well.
    in the Stage creationComplete event i have Edge code like, for example :
       var imagesArray = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg"];
       var headlinesArray = ["product 1", "product 2", "product 3"];
       var subTxtArray = ["lovely widgets", "smelly doo-dads", "purple whatchamacallits"];
       var linksArray = ["http://www.adobe.com", "http://www.adobe.co.uk", "http://www.adobe.net"];
       //variables set to full internal scope, used immediately after this and called from sub-elements afterwards
       sym.getComposition().getStage().setVariable("imagesArrayData", imagesArray);
    this code obviously needs to be changed via the HTML page that is calling it.
    IDEALLY i would have these elements already on the page ( <div><h1>Product 1</h1><img src="....  etc ) and then jquery it to hell to make it look funky. This is how we NEED to be doing it in the future...that way our content is still searchable and findable by search bots etc. Edge will output a "static" version of the page, i tried that, but it won't work for dynamically built objects. There's no way i've found of building an array of Symbols based on the existing DOM structure like you can do in jQuery itself.
    however, in the meantime i'll settle for being able to set a javascript call up somewhere - like the old flashvars solution (which was horrible fudge, but worked as a way to get data into a project )
    i'd REALLY rather not use an internal jSon call .... it's adding uneccessary bandwidth and additional server processing when the data it needs has already been retrieved from the database when the HTML page is drawn - AND it means i need to make sure that the json producing web service gets ported accross to any other projects that use this same "slider"
    i've tried removing the internal declaration and changing my HTML to :
    <script>
    var imagesArray = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg"];
       var headlinesArray = ["product 1", "product 2", "product 3"];
       var subTxtArray = ["lovely widgets", "smelly doo-dads", "purple whatchamacallits"];
       var linksArray = ["http://www.adobe.com", "http://www.adobe.co.uk", "http://www.adobe.net"];
    </script>
    <!--Adobe Edge Runtime-->
         <script type="text/javascript" charset="utf-8" src="index_edgePreload.js"></script>
    etc
    but this hasn't worked.
    i'm going to attempt the solution using
    AdobeEdge.bootstrapCallback(function(compId) { ....
    as found on http://forums.adobe.com/thread/1065343
    but this doesnt explain how to set up Stage level variables, rather than targeting a specific Edge property
    Anyone got any ideas? Or do I just scrap the project?
    IMHO : Adobe need to be careful of falling into the same mindset that most of the anti-flash brigade have.
    Please remember that Flash is used for WAY more than just adverts.
    At the moment, Edge will work great as a way to put a simple animation onto the page with REALLY basic interactivity - suitable for a basic advert - but we need our HTML5 animations and scripts to be fully dynamic, data-driven, and portable, and preferably using existing DOM elements.
    One last thing, any chance of a feature to say "my page already uses jQuery, don't import Edge's own outdated version"
    Message was edited by: j1mp

  • How to make something like this in Edge Animate?

    Hi,
    I'm hoping to make something like this – https://www.youtube.com/watch?v=OJeDppEHI1g – in Edge Animate but I'm not sure where to start.
    I'm new to Edge but am keen to explore.
    Anyone have any feedback on whether:
    1. It's possible, and
    2. What techniques/effects have been used.
    Thanks!

    Hi there and welcome,
      Could you be a little more specific on what it is exactly that you would want to create? Most of what I can see from that website is doable in Edge Animate, but if you specify what it is you'd like to accomplish I could walk you through how to do it.
    Thanks!

  • How do I pass a variable from edge animate to an external JS?

    I need to pass a variable value from Edge Animate to an external JS file. How can I do it?

    Not sure if this is the best way ,but works
    Set the variable as a property of a global variable
    Like
    SET
    window.myVar = 'your value';
    AdobeEdge.myVar = 'your value';
    Read
    window.myVar
    AdobeEdge.myVar

  • Imported SVG from Edge Animate not rendering properly in Safari

    Hi,
    We are having problems with an animation we created in Edge Animate, when we import it into Adobe Muse and then view it in Safari it becomes jagged and doesn't render properly.
    It works perfectly on Chrome, Firefox and when using a retina screen.
    We are using CC 2014 version now, previously when we used the old version of CC it worked on all browsers.
    Is there any settings we need to change when exporting from Edge or importing into Muse?
    Here is the link to the Animated SVG: Spining Wheel

    Thanks vivekuma that seems to work now using the below steps.
    1. In "Position and Size" subsection of the property panel, note down somewhere, the values of "X", "Y", "W" & "H" of an svg file used on stage.
    2. In "Transform" subsection of the property panel, change the CSS Transform ScaleX and ScaleY from 10% to 100%.
    3. The above change will change the values for "X", "Y", "W" & "H". So, you have to set their values as you have noted down in the first step.
    4. Repeat the first 3 steps for every svg file used on stage.

  • What is the best way to manage file structure in an Edge Animate project

    I started an Edge Animate project, but halfway through I realized that one of the folders I created was misspelled. In Windows Explorer, I renamed the folder, but that caused the Edge Animate project keep crashing.  Is there a way to manage/edit the file structure of a project within Edge Animate?  If not, is it possible to make alterations to the project's file structure in Windows Explorer without causing errors in Edge Animate?
    Thanks,
    Paul

    Does anyone have any comments or know of any possible solutions for this?

  • How can I insert an iFrame in Edge Animate CC?

    Does anybody know how to insert an iFrame into a Edge file?

    is it possible to change the z-index of two separate symbols?
    Lets say you have layer one with mytargetsymbol as the symbol
    and then layer two with texthover1
    Can a function on mousenter swap them between the z-index.
    I was thinking of something like the following which didn't work.
    I was also thinking something like adding a +[i] option.  Stepping the z index + 1 forward everytime you mouse over between the two symbols because unless you wrote a mouse out event putting it back to it's original z-index how else would you do it?
    The following didn't work (yet)
    //on mouse over change z order
    sym.$("mytargetsymbol").click(function(){
    sym.$("mytargetsymbol").css({"z-index": 3});
    //on mouse over change z order the +i puts it in front incrementally on each mouseover
    sym.$("texthover1").mouseenter(function(){
    sym.$("texthover1").css({"z-index": 1});

  • How do I link a google drive edge animate project to an iframe?

    I have a simple edge animate project as a test. It has the following files in the root:
    edge_includes folder containing 3 images and edge.5.0.1.min.js
    project.html
    project_edge.js
    I want to be able to have these files stored on google drive (or dropbox or alternative) and link to them through an iframe on my website. I've tried doing this by keeping the file structure the same on google drive and just referencing the shared link of the html file, but the project will not work.
    I've also tried replacing the src links of the edge.5.0.1.min.js file and the image files to their shared links on the google drive. This didn't work either.
    Is there any way to host the files externally and have them still reference each other properly so the html file can be linked into an iframe on a different site?
    Many thanks in advance
    Barry

    Just to add the relevant requested information:
    I am using the latest version of Edge animate (2014.1)
    Google chrome (and IE desktop not metro as backup)
    If anyone wants to see the file then I'm happy to link to it, but I don't think the question really warrants it.
    Thanks again.

  • How do I use Typekit fonts within Edge Animate

    I have applied a 'Pragmatica' Typekit font to a website.  I'm using Edge animate to construct some pages and within these pages want to add Type; however, Edge Fonts does not include the Typekit font 'Pragmatica' and the instruction for the page to use Typekit seems not to filter through into the Edge animate section .... is there a way round this?

    Hi, Trimmertop-
    When you open up the Web Fonts viewer, you will see Edge Web Fonts by default.  However, there is a tab next to it that says "Custom."  You can stick in your kit code in that location.
    -Elaine

  • How do I save an SVG via save for web?

    I can't save for web to SVG format from illustrator CS6. The option isn't in the format list of the save for web dialogue; I only have gif, jpeg, png-8 and png-24. I am sure it used to be there, so where has it gone?
    Have I got to do something in the process of setting up a new document?
    TIA.

    Has it been removed from the 'Save for web' then?

  • How to manage web page content via labview

    My pproblem is to get cyclic information from a web page containing an
    applet.
    Using a container I cannot manage any text and object in the page. Isn't it?
    Ciao

    If I understand you correctly, you are hosting a webpage in a front panel ActiveX container, and you want to obtain certain information from the webpage.
    This is possible using ActiveX calls. To get access to the HTML document in the container itself, along with all of its text and applets, etc, you need to reference the Document child item from a property node. This item is variant, so you need to use Variant to Data with a ActiveX refnum constant set to MSHTML.IHTMLDocument2 wired to the type. At that point you can access information about the HTML page itself, such as the body's text and so forth.
    I'm attaching a simple example that should help you get started. It's written in LabVIEW 7.1. Good luck!
    Jarrod S.
    National Instruments
    Attachments:
    HTML Document Info.vi ‏36 KB

  • How to manage port 80 hosts via gateway - gateway vpn (rv220w)

    I replace our aging rv082 routers with wireless rv220w routers. The gateway to gateway vpn works great, however I am no longer able to manage our print servers port 80 management page. I can ping any host with success, and I can manage hosts that have a port 10000 or 8000 web interface - but no port 80 ones... I had no issues when using the old rv082 routers...

    I replace our aging rv082 routers with wireless rv220w routers. The gateway to gateway vpn works great, however I am no longer able to manage our print servers port 80 management page. I can ping any host with success, and I can manage hosts that have a port 10000 or 8000 web interface - but no port 80 ones... I had no issues when using the old rv082 routers...

  • How to use scrollInToView method in Adobe edge animate

    I would like to use scrollInToView method in one my long pages, but I can't seem to invoke this code, any help would be greatly appreciated.

    Hi, Krutneam.
    We can get the DOM element by using jQuery().get() method.
    If you want to scroll window to pos of "Rectangle" on the main timeline. like this.
    sym.$('Rectangle').get(0).scrollIntoView();
    thanks.
    Ume.

Maybe you are looking for