Embed interactive map HTML5 files in Muse CC website

I am illiterate when it comes to code and therefore I am using Muse and not Dreamweaver to build a website.
I have created a interactive map that I wish to embed in this Muse website, with Avenza Mapublisher, an Adobe Illustrator Plugin, and exported it to HTML5.
The result is an index.html file as well as a folder containing scripts and subfolders containing map tiles at different zoom levels.
When I open the index.html in a browser it works 100%.
Now I want to embed it into a Muse website.
The HTML code in the index.html can be inserted via Object - Insert HTML in Muse CC.
In order for it to work the scripts in the folder needs to accessed. I changed all relative paths in the HTML code to "assets/" and try to use the "add files for upload" function in Muse to upload the scripts as assets in Muse. This worked and the scrips could be accessed.
The map tiles however (jpg tiles in different subfolders for different zoom levels), reside in subfolders whose folder structure needs to be preserved.
Unfortunately Muse does not allow me to upload a folder as an asset. I cannot add the tiles in the subfolders individually, as the scripts, depending on the zoom level, fetches different tile sets from different subfolders.
Can anyone please give me directions on how to embed this map in a Muse website?
HTML5 that I wish to embed:
Inside the assets folder:
Inside layer_1_files folder (Different zoom levels)
Inside folder 12 for example (zoom level 12)

I was able to reproduce the problem at my end with a similar setup. This is happening as HTML5 renders images a little differently and Muse uses HTML5. Refer to the following thread for more explanation on this. - http://stackoverflow.com/questions/8722017/weird-html5-sliced-images-margin-top-bottom-iss ue
So in your case, simply add the following CSS to Home -> Page Properties -> Metadata -> HTML for <head> and re-publish.
<style type="text/css">
img { display: block; }
</style>
You might also want to re-upload /Narin-&-Portnoo.gif to the /assets/ folder as it appears it hasn't been uploaded properly and is currently generating a Bad request error. However, if re-uploading doesn't help, change the file name removing any special characters, re-upload and update the embedded HTML.
Thanks,
Vinayak

Similar Messages

Can't Place Captivate 6 swf or html5 File into Muse v3.2.

Muse v3.2 won't place my Captivate 6 swf or html5 files. "Error encountered during import" error 0. Has anyone else solved this or a similar problem? What can I do? Suggestions welcome.

I inserted the following HTML code that I gleaned from
http://forums.adobe.com/message/5087131 -
Can't Place Captivate 6 swf or html5 File into Muse v3.2.
Re: Can't Place Captivate 6 swf or html5 File into Muse v3.2.
The code is:
<object width="1024" height="768"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://www.learndurkin.com/assets/infographics-history.swf/ version=8,0,0,0">
<param name="SRC" value="assets/captivate6_file.swf">
<embed src="assets/captivate6_file.swf" width="1024" height="768"></embed>
</object>
I also uploaded the .swf file using the "Add File" function. When I publish, I get a blank white box with no video that plays. Any suggestions? Have I named the file incorrectly in the HTML code?
I feel like an idiot. I keep pounding this day after day with no solution. Hope I am writing in the correct forum.
Judy Durkin
Hsinchu, TAiwan

Adding captivate files to muse???

is it possible to add work ive done in flash pro and captivate onto my muse website??? whatever I do does not work. this is doing my head in because I cant even find one google search that relates to this question, ive been searching for days.
please help!

Hi,
Yes, it is possible to add .swf files created in Muse or Captivate, to Muse.
Kindly refer to the below forum posts:
Re: Can't Place Captivate 6 swf or html5 File into Muse v3.2.
Re: swf not working after placing
Hope it helps,
Sonam

Using Google GWT to create (Dashcode) widgets for iBook Author I would like to embed interactive widgets in iBooks using iBookAuthor. The widgets in question started life in Java but GWT has allowed them to be converted to javascript and to run on web pa

I would like to embed interactive widgets in iBooks using iBookAuthor. The widgets in question started life in Java but GWT has allowed them to be converted to javascript and to run on web pages (for example, http://softoption.us/content/node/437 scroll to the bottom). In theory, iBookAuthor can bring in most html5, and much javascript. The technique is to wrap the html in a folder, with 2 extra files, a plist and a default png and then change the extension of the folder to ‘.wdgt’. This is the technique for making Dashboard widgets for the Mac, and Apple even have the Dashcode software to do it. So what you really do is to make a Dashboard widget, then iBookAuthor can import it. So far, so good. And some folk have been doing this, for example http://www.prweb.com/releases/2012/2/prweb9242432.htm http://www.panophoto.org/forums/viewtopic.php?f=64&t=10417&p=158330#p158423 However, if you start with GWT and create a single page with one button and a Hello World, compile it, and get the WAR file (I use Eclipse here)… the Safari browser and others will run it properly (even on an iPad). Then if you wrap it, a proper Dashboard widget is created, which runs properly on a Mac. Then if you go to iBookAuthor and put a custom widget in the Text, then drag it in. It is accepted by the text and shown as being there. However, if you use Preview to look at it on an iPad, it is gone (or was never there in the first place). Anyone any ideas on this? [And iBook Author seems to give no warnings.] The widget is at https://dl.dropbox.com/u/46713473/Test6.wdgt.zip I have bells and whistles that I’d like to get into an iBook!
Thanks for any insights.
Martin

I do have a little to add, which might help someone. Indeed, opening a blank page and dragging the widget straight in seems good in difficult cases. But, actually, I was also able to insert successfully from the Toolbar especially to blank pages. So, it may have been something to do with the columns and stuff like that. Anyway back then the insertion would show in iBooks Author but not in the Preview on the iPad. I moved on to actual Google Web Toolkit output javascript. Basically I had three at hand to try: a Hello World with a button which went straight it, one of moderate complexity, (for example with a built in Lisp interpreter), which also went straight in, and finally a more complex one that initially was rejected by iBook Author. Author complained that there was an unsupported media file (of course, Author does not tell you which one it is, that would be too easy). [Remember, this was a proper working Dashboard widget which could be installed on a Mac]. Among other things I had read remarks about .gif files. When looking through the GWT war directory at the actual javascript etc files, I noticed there were two gifs there one called ‘clear.cache.gif ‘ and a second one called ‘0F89659FF3F324AE4116F700257E32BD.cache.gif’. (Now, there is obfuscation so the numbers here may be different from case to case.) The clear.cache.gif did not seem to be anything special. But the other one is an animation. It is three little boxes that twinkle (rather like a waiting spinning cursor). So, I opened that file and saved it to itself (that picks the top frame of the animation and saves only that, leaving you with an unanimated gif). The resulting widget drags and drops into iBooks Author (and seems to work properly at a quick glance). So, if you are having trouble with ‘unsupported media files’ converting animated gifs into unanimated gifs might help in some cases.

How to make the images show up on a linked file in Muse?

I am wondering how to get my images to show up on the linked files in Muse. Basically, in Muse, I have a page that links to other pages I designed in Dreamweaver. I put the images in the image folder and when I upload the site, the page links to the Dreamweaver page ok but the images are missing. This is a vital part of the site. Any suggestions?

If you made the pages with Dreamweaver then they should be on your system some place and you could make a "dreamweaver" folder inside your Muse site and upload the pages to that folder using the upload files option... see this thread talks about sound files but almost any file can be imported to muse
I need a recommendation for a slick way to embed audio
Another option is to link across to an online resource using the built in muse html editor but that has pit falls because once you link yourself outside the site you also lose some control of the content;
For an example of this have a look at an old demo page I made http://chec-garry2.businesscatalyst.com/index.html
When you click on the Brahminy Kite bird you are looking at what used to be called an Iframe but the problem of control is highlighted when you click the Blue Wren and sometimes get pop up adds… I could import the Blue Wren page into my Muse site to fix this issue and in your case that’s a good option but I didn’t because I don’t have copyright over that pages contents and didn’t want to steal someone else’s work.
p.s. if you have got a demo of the website/ pages online someplace that would help us see your problem.

Acrobat X Pro interactive Map/Dropdown fields

I create a variety of .pdfs for different purposes which are all related to the same parent (in this case a building on a site).
I now want to create an interactive map so that I can click the building (button, graphic shape or image etc) and be presented a collapsable list so that I can then select (from a list) the .pdf I am interested in (discipline specific) and open it in a new acrobat window. Each .pdf name in the dropdown list is to represent a separate .pdf file from the same or different network storage location (I am aware the file name(s)/location(s) must not change).
I have investigated Acrobat X Pro, Adobe Illustrator CS4 and Adobe InDesign CS4. I have decided to target Acrobat as Illustrator did not seem to allow linking and InDesign did not seem to allow List Boxes or Dropdowns for linking purposes. Also, I only wanted to create/manage one file (my interactive map)...my 'menu'...in graphical form...without going down the path of creating a web site.
Am I on the right track? Is this possible?
However, after adding the Dropdown field to my form (interactive pdf map), although it allowed any of the available list items to be selected, it DID NOT allow different actions for different list items!
I added two separate Open file actions (which could not be linked to the two separate list items)...one to open a pdf ffrom one location and the other to open a separate pdf from another location. When you click the field (button)...it just opens BOTH pdf files! Not what I wanted.
I would have thought that the very nature of a Dropdown list is to be able to select from a collapsable list and perform a specific action on that selection (after all, it does allow multiple similar actions, along with multiple different actions).
Can THIS be done?...in Acrobat?...in another Creative Suite application?

Thanks, but...I could not find a `combo box' field, and I have to ask why would I have to write custom code when the `dropdown' field is provided?
Why can't a different action be linked to a different list choice in a dropdown field?
If I want to perform a single action, then I would use a `single' button, but that's not what I want to do.

IS THERE ANY WAY TO EMBED LINKS INTO THE FILE YOU ARE WORKING ON?

IS THERE ANY WAY TO EMBED LINKS INTO THE FILE YOU ARE WORKING ON?

Ha! Perfectly classic case of XY problem! Pointed out by Jongware in some other thread recently - couldn't find an exact link right now...
In short:
    User wants to do X.
    User doesn't know how to do X, but thinks he can fumble his way to a solution if he can just manage to do Y.
    User doesn't know how to do Y either.
    User asks for help with Y.
    Others try to help user with Y, but are confused because Y seems like a strange problem to want to solve.
    After much interaction and wasted time, it finally becomes clear that the user really wants help with X, and that Y wasn't even a suitable solution for X.
Maybe it worth to add to a list of tips and best practices of the forum:
Avoid XY problem!

To make an online interactive map that works with a reservation system which is the best application to use?

I make campground maps and do interactive maps through a third-party program. I want to use something in CC that I can make "hotspots" or id maps that I can interface with a reservation system to show availability. I want the interactive map to work on both mobile and desktop. What is my best program to download and use?
I know html and css but have fallen in love with Muse. I am looking at the Edge Flow, Reflow and Edge Animate. I just need some simple advice as I don't want to waste my time learning a program that doesn't do what I want...
Thanks for any advice.

When you do not have to have it connected to the external monitor, just use the MBP on only battery power. Fastest would be to watch video or play a game. Any CPU intensive application will use the battery faster that 'ordinary' use.
Ciao.

Problem with "Building interactive maps with Flex" example

I have been looking at the tutorial by Matt Sheehan Building interactive maps with Flex found at
http://www.adobe.com/devnet/flex/articles/interactive_maps.edu.html
I have downloaded Flash Builder 4.6 trial version and followed the example. I have also copied the source code from the example and pasted that into the file mymodestmap.mxml.
In both cases the application opens a new page in Google Chrome but does not display any map data.
No errors or warnings are displayed when I run the code from Flash Builder.
Although I have got plenty of experience of writing software, I am a total beginner when it comes to developing web applications!
Any ideas as to what I am doing wrong, I have attached the source below.
Cheers
Steve
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx1="library://ns.adobe.com/flex/halo"
                                 minWidth="1024" minHeight="768" creationComplete="init()" viewSourceURL="srcview/index.html" xmlns:mx="library://ns.adobe.com/flex/mx">
          <fx:Script>
                    <![CDATA[
                              import mx.core.UIComponent;
                              import com.modestmaps.TweenMap;
                              import com.modestmaps.mapproviders.OpenStreetMapProvider;
                              import com.modestmaps.geo.Location;
                              import com.modestmaps.extras.ZoomSlider;
                              import com.modestmaps.extras.HandCursor;
                              [Bindable]private var _map:TweenMap;
                              private var _mapUI:UIComponent;
                              [Bindable]private var _initialLat:Number = 40.668903;
                              [Bindable]private var _initialLong:Number = -111.680145;
                              [Bindable]private var _initialZoom:Number = 6;
                              private var _mouseWheelZoomCenter:Location;
                              private var _mouseWheelZoom:int;
                              private function init():void
                                        _map = new TweenMap(mappanel.width, mappanel.height, true, new OpenStreetMapProvider());
                                        _map.setCenterZoom(new Location(_initialLat, _initialLong), _initialZoom);
                                        mapCore();
                              private function mapCore():void
                                        _map.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
                                        _mapUI = new UIComponent();
                                        _mapUI.addChild(_map);
                                        var zoomslider:ZoomSlider = new ZoomSlider(_map);
                                        zoomslider.x = mappanel.width - zoomslider.width*2;
                                        zoomslider.y = 30;
                                        _mapUI.addChild(zoomslider);
                                        var handcursor:HandCursor = new HandCursor(_map);
                                        _mapUI.addChild(handcursor);
                                        mappanel.addElement(_mapUI);
                              private function mouseWheelHandler(e:MouseEvent):void {
                                        if (e.delta < 0) {
                                                  _map.zoomOut();
                                        else if (e.delta > 0) {
                                                  _map.zoomIn();
                                        _mouseWheelZoomCenter = _map.getCenter();
                                        _mouseWheelZoom = _map.getZoom();
                    ]]>
          </fx:Script>
          <s:BorderContainer id="mappanel" width="100%" height="97%"/>
</s:Application>

Technically, it's Javascript, not Java :) TOTALLY different beasts. I wish they'd never named it Javascript, it's ambiguous. So anyway, on to the point of the whole thing...
If you want quotes in your values, you'll need to write a function to replace " with \", and pass the values through it. So instead of javascript:passBack('#ENAME#','#JOB#','#SAL#'); you would have javascript:passBack(addslashes('#ENAME#'),addslashes('#JOB#'),addslashes('#SAL#'));. That would mean that ABC"DEF"GH would be passed to the function as ABC\"DEF\"GH and your quotes would stay intact. Search around on the internet for more specifics as to how to pass double quotes in javascript by using backslashes.
~Jer

Html5 file from adobe edge to epub

i need to add html5 file from adobe edge to epub file from adobe indesign how can i do that ??

Thank you for helping me
But the situation that I can not use iBooks Authoring tool?? !! but I was able to insert files into epub ;
when viewing the epub file( interactivity from adobe edge (html and js files) ) on ipad i can not see any of the pictures.
Do you have any suggestions.
I know that the link from Mr. (1. hemanth kumar r ) contains an example of the pictures, but (Edge program) does not call the images via HTML, but calls through ( .js ) file.

Is there a way to stop .oam files from previewing as previously placed files in Muse CC?

I'm placing a new .oam file in a new website I'm creating in Muse but it previews as a previous .oam file that I used in a previous website. When preview the page on a browser it's fine but it's making it hard to place the .oam file in the correct position. Is there a way to stop this from happening so it previews correctly in Muse?

If you're using Safari as your web browser go to "Safari -> Preferences...", select "General" from the toolbar and uncheck the "Open safe files after downloading" box.
Other browsers should have a similar setting in their prefs.
Steve

Oam file in Muse generate error

After having integrated a ".oam" file in a Muse and exported the site in Html, the browser returns this error:
"MuseJSAssert: Error calling selector function:SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a cross-origin frame."
Is there a solution?

I got this issue this morning, saw this thread and thought everything was going to be okay.
Everything is NOT okay.
Take a look at this link.
Home
This is actually supposed to be a very long scrolling website with 6 major animations scrolling throughout. As you see it gets held up on the first one.
This link is what the site is supposed to look like and how it should function.
Take a look:
www.maxhilllumber.com
Now you may be asking yourself, "If he has the whole site up properly and in the right place and everything is working well then why is he bothering with all this?"
I'll tell you why, and this is my main problem.
I initially created a copy of my completed website prior to exporting and upon exporting that copy, I got the error. I researched the problem, found this link and thought I was going to be okay, thinking it was an "internal previewing" problem and wouldn't effect the final export to a web server. The result was the first above link, all messed up.
Now here is where it gets really crappy.
I thought, "THANK GOD I still have my original "non error" file!"
I rush back to that file in Muse, open it up, DID NOT PREVIEW THE SITE IN ANYWAY, when straight to export to ftp (I noticed in my earlier example that I had tried to export to html and then upload those files manually to my ftp, it did not fix the problem but upon export I did still receive the pop up error), the site exports up to 88% and FREEZING! I noticed it had completed 9 of 9 tasks and was hung up on an .xml file.
I had to manually terminate muse, the document was in recovery mode so I closed the program organically this time, not saving my recovered file because the only change was the act of exporting. reopened Muse, reopened my original file, went to preview it AND GOT THE POP UP ERROR!
Now not only is my copy of my original unplayable, now is my original. Every animation I try to preview hangs.
Even though the site may be up with a mystery amount of data missing (whatever was not transferred after freezing at 88%) there is now absolutely no way I can get the complete site up again without it freezing nor am I ever able to make updates to it which is absolutely not acceptable.
I even attempted to recreate from scratch the entire website. I had each of the 6 animations initially on separate pages before incorporating them onto one long master page. I tried to copy all the content on that page a paste it in it's appropriate spot on the master page. It did not work and now neither do my independent animations on separate pages within the document.
I'm pretty much dead in the water regarding this entire website if I cannot get this resolved.
Any takers?!
Zak I'm looking at you!

.OAM file in Muse - invalid block type (type==3)

Every time I try to insert an Edge .OAM file in muse and try to publish I keep getting an "invalid block type (type==3)" error, over and over... it doesn't matter even if the OAM file is empty, it still displays this problem... could someone please point me if this is a bug or if I'm just doing something wrong?
Regards

Hi,
I have the same issue but it's not an OS issue (i think) : I'm working on SnowLeopard and I have the same error message. All the http://www.adobekb.com/inserting_edge_content.html steps are correctly followed.
I cannot use the preview mode and cannot preview in a browser as well.
Any idea ?
Cheers,
Pierre

.oam file in Muse not appearing in browser

When I place the .oam file in Muse and then go to preview in browser it only shows me a black and white box - nothing else. I set the fill and set into invisible and tryed everything but it doesnt work. any ideas what I am doing wrong? (it's an .oam file which was made out of an mp4 video...don't know if its relevant)

Hi Valentina!
Good new! I fixed my problem!
Actually I restarted to create the beginning of my animation in Edge to check all the parts of it step by step with Muse! And everything works! So, I tried to understand where was the problem and I remembered that I made a wrong manipulation before I placed the first time the OAM file into Muse!
Indeed, I also choose web publish settings when I was in Edge to publish my animation but I didn't need it... and I put these files in the trash! Edge was not happy at all with my manipulation and the animation couldn't work well! Then I restore the files and everything was back to normal in Edge... But perhaps not as much as I thought!
So, I just have to create again my animation and everything should be fine!
About your problem, I create a new project in Edge and it's impossible to place a video file .mp4 on stage! Edge doesn't show this kind of file to put it in the library... How did you do?!
Then I found this video which explain a way to put an .mp4 video in Animate compositions http://www.youtube.com/watch?v=CGyOxwEsEFo I hope that will help you!
If you want to add graphics on your video, you should use Flash or After Effects at the beginning!
   1. Open the video file with AE or Flash to add graphics on it
   2. Export your new video and use the way of the link above
   3. Enjoy it
Hope you have all the keys in your hand to succeed now!
Thank you for your answer on friday
Bye!
Anne

How to embed and open PDF files within excel

I constantly need to embed PDF files onto Excel documents as well as extract/open/view PDF files from Excel documents. I am unable to do so with a macbook, i know that there is a workaround but it's such a tedious process. Is there a software i can buy or setting that i can do so that i can embed and open PDF files easily as i need to view these files multiple times a day for work.
please advise

Download and install Adobe Reader: Adobe Reader Install for all versions
Open the PDF file using it. If security restrictions don't prevent it you could also print it.

Embed interactive map HTML5 files in Muse CC website

Similar Messages

Maybe you are looking for