Interactive SVG in FrameMaker

Is there any way to import an SVG image into a FM document and use any text information in the SVG (on an extra "unlocked layer whilst all others are locked" ) interactively e.g. for referencing purposes or like a hotspot feature?

Thanks for the reply.
The idea with the varuoious single text boxes is quite a work around, not sorry to say - neither really elegant nor really suitable for the task.
I had recalled a feature in a tool called "Catalog Creator" which boasts a so-called "Hot Spot Editor":
"...The graphics can be edited, hotspotted and then saved in the interactiv SVG format. SVG is a W3C web standard and is characterised by a high quality at extreme compression ratio.[...] the hotspots can be detected due to existing layers, fonts, colors, textsizes or other available attributes. Hotspots are not limited to text and geometries, you can also use contour lines to define a hotspot. ..."
The idea was to use the data on the text layer that may be referenced as any other formatted text in FM. So if it is possible to use script (I am just your average FM user, nothing truely fancy) to extract that info then it might be done.
Since Frame Maker doesn't work with layers, it might be able to "use" the layer feature in one of the other Adobe products such as Photoshop or Illustrator.
And if others can do it (See CC) - why shouldn't Adobe itself offer that (some day).
(Maybe I should post this in the "wish list" section)

Similar Messages

How to add a link to an interactive svg using edge commons library

Hi,
I've been playing around with this wonderful Edge Commons interactive SVG tutorial
My question is : How to add an external link "url" to an interactive svg using edge commons library ?
Edge commons example file :
http://edgedocks.com/market/interactive-svg-example-project-edge-commons
Edge commons video tutorial :
http://www.youtube.com/watch?v=4UEB6gaLKuw
I have adapted this tutorial to an interactive map, http://madudesign.com/works/france/ every thing is going fine until I couldn't figure out to link a particular url on each part of the region of the map.
I managed to figure out how to change colors on the different parts of the map on mouse over and mouse out but I'm not quite comfortable with JavaScript since I don't use it every day...
I have tryed to link to an url by passing it on the illustrator layer and via the onclick event (event.target.id) to a simple url
http://redpen.io/6svh5u
then working in Edge and publishing on the browser the link returns me a weird url line by replacing the original url slashes "//" by "_x2F_" and I must have misunderstood the proper JavaScript line to open that link from there...
for example on my actual exemple "http://madudesign.com/works/france/"
the first top region of France is normally a link to "http://www.google.com" and it returns "http:_x2F__x2F_www.google.com" plus the complete path to the file too...
I don't know how to get around this trick and have back for each region a particular clean link from the event target id of the svg...
thank-you for any help
matt
link to my edge animate file if needed :
http://madudesign.com/works/france/carte_de_france.zip

I got an answer from the Edge Commons dream team and I am very grateful to them :
"The problem that you bumped into was that you hadn't included a valid URL so far. We weren't sure if you wanted to include them within the SVG file or if you wanted to implement the functionality within Edge Animate. We came up with a solution for the latter one, with a simple switch in the js code:
You have to type in the appropriate URL of course for all the cases."
I have to share the final result:
http://www.madudesign.com/works/france/france_map/
And the zipped project file:
http://www.madudesign.com/works/france/france_map.zip
Thanks to Daniel & Simon
Matt

Can interactive SVG's be called from within a symbol in the yepnope function?

I'm hoping someone may have run across this before, I'm trying to access an interactive svg (called "map") from inside a symbol (called "world") in the compositionReady event from the stage. The image loads just fine as long as I have it directly on the stage, but for the project I'm working on it would be way more convenient to have the svg inside of a symbol since it's supposed to scale in sync with a bunch of other elements. I have tried everything I can think of to reference the svg inside the symbol, but nothing works.
My code from the compositionReady event looks like this:
yepnope({
          load: "http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js",
          complete: function() {
                    // enable svg access
                    EC.SVG.accessSVG( sym.$("map") ).done(              // this is the line where I'd like to reference the svg "map" inside of the symbol "world"
                              function(svgDocument){
                                        // event listener
                                        svgDocument.addEventListener("select", function(event){
                                                  // remember selecte part
                                                  sym.setVariable("selectedPart", event.target);
                                                  // show id
                                                  sym.$("selectedPartTxt").html(event.target.id);
It's the EC.SVG.accessSVG( sym.$("map") ).done part that I can't wrap my head around. I've tried to reference the "world" symbol with things like:
EC.SVG.accessSVG(
var mySymbolObject = sym.getSymbol("world");
mySymbolObject.$("map") ).done
or
EC.SVG.accessSVG( sym.$("world").$("map") ).done
but nothing is working!!! Does anyone know where I've gone wrong? Or perhaps it isn't possible to call an svg from a symbol?
Thanks for any advice you have!

Here is my code in a file I used as a sample. I put the bee in a symbol named world and it works correctly:
EC.SVG.accessSVG(sym.getSymbol('world').$('bees')).done(
          function(svgDocument){
                    // add event listener
                    svgDocument.addEventListener("select", function(event) {
                    // Remember selected part
                    sym.setVariable("selectedPart", event.target);
                    // show the id of the selected part in the textfield
                    sym.$("selectedPartTxt").html( event.target.id );
Let me know if this helps. I can post the sample if you want.
here is the sample: https://app.box.com/s/xb20izcmbmd0lgqfnbgu

MapViewer 10.1.2: Interactive SVG in a JSP page

Hello everyone,
I'd like to be able to embed an interactive SVG map in my JSP page (similar to the mapinit/svgmap demo).
What is the simplest way to do it? Is there a JSP tag that would render a map with all javascript?
I'd like to avoid having lots of Java and Javascript code in my JSP definition.
Thanks,
Max

There is no such JSP up to this point. Currently, you have to have some java and Javascript code to implement the control flow. If you want your JSP code to look cleaner, you can move the Javascript code into a seperate JS file and use <SCRIPT TYPE="text/javascript" SRC="myscript.js"></SCRIPT> in your JSP code.

Interactive SVG : Can't change the mouse cursor to pointer

Hello I am having issue with the interactive SVG file I have followed the example from adobe tv and edgedocks and created my own project and everything is working just fine, now my question is how to change the cursor that hovers over the svg into pointer, I tried the box inside adobe edge animate and everything but not working even jquery or javascript nothing is really working and I can't get the id from the svg itself so I can target it with jquery so could somebody help me with that, Thanks

you can use css to change the cursor in the init function with
sym.$("selectedPartTxt").css({'cursor':'cursormode'});
change cursormode to one of these:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=all-scroll
add this to the element that needs the cursor asshown above (element chosen from edgecommmons example).

Edge Commons - Interactive Svg Map

Hi folks!
I've watched the extraordinary video tutorial of the very talented guys from EdgeDocks (http://edgedocks.com) about how to build an Interactive Svg Graphic with Adobe Illustrator and Adobe Edge Animate: http://www.youtube.com/watch?v=4UEB6gaLKuw.
I've followed the example explained in the video tutorial using a Svg Map file and making selectable one region (the lower right, in light brown color) to try:
http://www.terredainventare.it/svg/MappaSvgInteractive.html
(project files: http://www.terredainventare.it/svg/SvgMap.zip)
So when I select this regione, Edge Animate replaces the placeholder text with the name of the path ("Isontino"), but when I click the red Ellipse, the color of the region remains in light brown. Why?
Many thanks in advance for your help!
Davide

Hi!
Following a precious hint of Simon Widjaja, the author of EdgeCommons libraries,
I've replaced
$(selectedPart).css("fill", $(e.currentTarget).css("background-color"));
with
$(selectedPart).each(function (index) {
$( this ).css("fill", $(e.currentTarget).css("background-color"));
beacuse my "SelectedPart" was a group in Adobe Illustrator and I need to select each element to fill it with color: but it doesn't work.
Where I am get wrong?
Here the update project files: http://www.terredainventare.it/svg/SvgMapEach.zip
Many thanks in advanced!
Davide

Yepnope still works, Interactive SVG does not without it | EA 2014.1.1

Hi all,
I'm trying to create an interactive map of the US using Edge Commons interactive SVG. I've been reading that yepnope is deprecated and doesn't work in the new version of EA 2014.1.1 but it seems to still work for me and appears to be the only way I can interact with an SVG. I have added both jquery-1.11.2.min.js and EdgeCommons.SVG.js in the scripts panel but can't seem to get it to work without using the yepnope function. Can anyone help me with this? I'm running a Mac OSX 10.10.2.
Here's a link to the EA file.
Dropbox - default.zip
Thanks in advance for all your help!
Kenny

Hi all,
I'm trying to create an interactive map of the US using Edge Commons interactive SVG. I've been reading that yepnope is deprecated and doesn't work in the new version of EA 2014.1.1 but it seems to still work for me and appears to be the only way I can interact with an SVG. I have added both jquery-1.11.2.min.js and EdgeCommons.SVG.js in the scripts panel but can't seem to get it to work without using the yepnope function. Can anyone help me with this? I'm running a Mac OSX 10.10.2.
Here's a link to the EA file.
Dropbox - default.zip
Thanks in advance for all your help!
Kenny

Advice on using Edge Animate & Interactive SVG to create an interactive map

Hello folks, I'm hoping for some guidance on a complicated graphic. My org. has an existing interactive map which was created by a freelancer for us using Ruby and js. It's very nice but I wanted to see if it's possible to recreate using Edge Animate (both as a challenge to myself and as a way of being able to move ownership of it in-house). Here's the map:
http://csai-online.org/sos
I have done a fair amount of work in Edge Animate but have mostly stuck with simple interactivity (play, repeat, navigation links, etc.) so this would be a stretch. But I'm thinking that the map itself (with various shadings) could be recreated using Edge Commons' Interactive SVG function. I would create the map in Illustrator as an svg with different layers for each group of states, which would then be activated by the buttons in Edge Animate. (The floating box could be done entirely in Animate.)
So my questions are,
- Does this seem doable, and has anyone done something similar?
- How do I trigger the layer visibility toggle from Edge? There's a tutorial from Edge Commons which changes the color of an object by CSS, but it seems like it would be simpler to use layer visibility.
- Some of the combinations of checkboxes result in States that are in multiple groups (resulting in a striped fill). I'm guessing I'd need to add some code to indicate that if buttons X and Y were both checked, a third combined layer would be shown. (A further complication is that each of the groups of buttons shuts off the other groups.)
Alternately, it seems like I could also create each state as a series of differently-colored graphics which are then shown or hidden based on which buttons are checked (using arrays, maybe?), but that seems a messier due to the million separate images.
Anyway, how would you approach this problem, I guess is my main question.
Thanks very much.

This looks pretty simple to me and I don't see why you wouldn't be able to do it in edge animate.
Create each state as a button and animate the hover effects inside a symbol and then on the main timeline animate the content boxes opacity to on and off and set labels for each "on" state and then in your button link to that label in the mouse over actions preset.u
As far as calling the bottom content into the div i would just do that by hand by grabbing a simple script off the internet. *theres loads*

What am I doing wrong on this interactive SVG? Please help.

I watched the tutorial on youtube on creating the svg and making an interactive color changing character. I have tried to implement it but I’m not doing something right and am a little lost on the code. I was wondering if anyone could tell me what I am doing wrong.
The SVG File
Has 18 groups that can color change each in a different layer but not grouped within the layers
The layer names are as follows
Owl_Wing_Spots
Owl_Wings
Owl_Belly
Owl_Body
Trunk
Leaf_Outline
Leaf_1
Leaf_2
Leaf_3
E2_Ear_Spots
E2_Ear_Tail
E2_Body
E1_Ear_Spots
E1_Ear_Tail
         15. E1_Body
     16. Wall_Color
     17. Bird_Body
     18.   Bird_Butterfly_Wing
I put the notify(this, "select"); on each layer
I referenced http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js for the javascript file in AI and I also created a js file that is the same as the one in the video named svg.js (but neither made a difference)
The Edge Animate File
I added the SVG file named “elephant_tree2” and then added the following code to the CompositionReady Area
// Load Edge Commons
yepnope({
load: "http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js",
complete: function() {
                        // Enable SVG access
                        EC.accessSVG(sym.$("elephant_tree2")).done(
                                        function(svgDocument){
                                                        // add event listener
                                                        svgDocument.addEventListener("select", function(event) {
                                                                        // Remember selected part
                                                                        sym.setVariable("selectedPart", event.target);
                                                                        // show the id of the selected part in the textfield
                                                                        sym.$("selectedPartTxt").html( event.target.id );
// insert code to be run when the composition is fully loaded here
I added a selectedPartTxt text box and named it that too.
None of the groups on the SVG are recognized and the selectedPartTxt does not change. I suspect it may have something to do with the fact there are groups instead of one part but I don’t know how to fix it.
I was also wondering if someone could tell me how to use an SVG for the color chart too instead of recreating it in Edge Animate. I haven't tried to to the color part of the SVG because I still can't get the mouse click to work when on a group that changes.
Any help would be appreciated.
Thanks!
Cherie

Hi, I had a similar problem and this fixed it.
You know how in the illustrator file, you need to reference a file called svg.js from the edge commons library? Download that file, or write the code in a text editor and save it in a .js file and then make sure that the file is in the same folder as your images called by the adobe edge file.
I hope this works!
Liz

Can not import SVG in FrameMaker after upgrading CS from 3.X to 6.0

We have upgraded Adobe Design CS from 3.x to 6.x. After the installation, everything worked in normal except one problem - we could not import svg in all FrameMaker software. This problem occurs in the CS6 version installed on those computers. Please comments!
Thanks in advance for your help!

Hi
Generally while doing upgrade some Object gets inactive to activate that we do few steps, those steps are called post upgrade. this is the one of the step in post upgrade activity. what this will repair the objects after upgrade.
Generally we run the Program RSUPGRCHK through SE38 after upgrade, the output of the program will show the inactive objects. collect those objects and repair through RSD1 and then recheck again with the same program.
Regards,
M Kalpana.

Note on interactive SVG and Edge Commons

I encountered something I want to mention so people do not pull their hair trying to find out which things are not working.
1- issue publishing
If you add a js folder for your js files, Animate v2 will not import it in your web folder - So add it after you have published
2- SVG layer names
If you use uppercase for your layer names, you may have problem using it for adding images for example. This is especially true if your server is Unix because it is case sensitive. It is better to not use uppercase in names.
I used the layer names to add images and of course the server could not read the uppercase. The code was right but the reading was wrong and the images did not load.
Note: in the code below I added 3 lines to take off numbers created when more than one layer had the same name and also took off space when I had more than one word in the name. Not pretty but it works.
var newText = (event.target.id).split("_").join(" ");
var newText2 = (newText).split("1").join("");
var newText3 = (newText2).split(" ").join("");
sym.$('image').attr('src', 'images/'+ newText3 + '.jpg'); // if the layer name is uppercase then the image is not loaded.

Thanks Gil
I guess being case sensitive can make things tricky!
To clarify, you have to keep track of what is what like for javascript. If your files are lowercase then your call needs to be lowercase too. This is exactly what happened. I suppose if my file names had been uppercase then it would have worked but I did not test it.

SVG in ADF

Hi folks,
I want to embed some interactive SVG graphics in my ADF application.
So when a user clicks on an object in SVG I have somehow to propagate the event to the ADF/JSF domain to navigate the view objects.
I read some papers from Frank regarding Applet/ADF interaction, tried to do something similar with SVG-didn't work yet.
Anyone has experience with SVG?
Thanks,
Kresimir

As an alternative you might consider using xsql:
XSQL SVG Example questions
SVG Example Source - XSQL
in cooperation with ADF.
NA
http://nickaiva.blogspot.com

"TypeError: undefined is not an object" after upgrading to 2014.1.1

I'm seeing the error: "TypeError: undefined is not an object (evaluating 'cpoint.getSymbolElement') in an _upgraded composition which is causing points and tooltips to not appear in the loaded composition.
Edge Animate version 2014.1.1
Mac OS 10.10.1
Safari 8.0.2, Chrome 40.0.2214.94, Firefox 35.0.1
This issue only began happening after upgrading to 2014.1.1
No changes were made to my computer and I've tested it on other computers with the same result
Here is the upgraded composition which is not working: http://inlightmedia.com/edge-interactive-svg-maps_upgraded/
Older composition which correctly shows the pins and tooltips: http://inlightmedia.com/edge-interactive-svg-maps/
Zip files of both compositions: Zip file
I am very much an Edge and JavaScript rookie and have been modifying this project (which was created by someone else who is no longer supporting it) to suit my needs. Any help getting this to work in the new version of Edge would be greatly appreciated.
Thanks,
Jansen

Hi,
It comes from compositionReady, line #34:
You wrote: var cpoint = sym.createChildSymbol("point", "stage");
and it was: var cpoint = sym.createChildSymbol("point", "Stage");
stage must be capitalized: Stage.

How to create 2 or 3 links URL in a jpeg ?

How to create 2 or 3 links URL in a jpeg ?
Do i use photoshop ?
Thank you

Images cannot contain links. All that stuff is done in the web page source code, e.g. using image maps, interactive SVGs or JavaScripts that track coordinates and respond accordingly. You will have to use a web authoring tool like Muse or Dreamweaver to produce such stuff, but since you seem to be a complete beginner, I strongly urge you to read up at least on some basic stuff about HTML, CSS and how the web ticks in general or you'll be forever lost.
Mylenium

Ignore transparency of a png?

Hey there, got a slight issue. I have a character on the top layer, then below it is the orange box that needs to be a rollover button, unfortunately the character's transparency is over it and I you can't rollover it. Is there a way to ignore the transparency of an image?

No unless you decide to use an interactive SVG. See tut here http://www.youtube.com/watch?v=4UEB6gaLKuw .
if your character does not move then use an SVG file with paths. see Edge Commons for that.
The bounding box of the png is always there and blocks what is behind even if it is transparent. I do not think that using z-index in this case would be practical.

Interactive SVG in FrameMaker

Similar Messages

Maybe you are looking for