Blank space around HTML Media

[dcrouse10]

Captivate 8

When I add HTML 5 media to a project, it comes with a large area around it that is not in the original file (see attached).

The grey area is added by Captivate.  The blue bit and the white around it is the original image (a button built in Flash, although Edge Animate does the same thing, other images and shapes do the same).

The grey box is 400x300 pixels.

How can I make it go away?  I only want the object, not all the spillover.  How can I trim it off?  It also appears to have a small grey border around the entire animation.  I have not found a setting for this.

Any thoughts?

[Jordster1 · Accepted solution]

400x300 is the default size for the imported media. If you select the media item and then click the Options tab in the Properties window, you'll find width and height fields that you can change. Just click inside them and set the width and height to the actual dimensions of your imported media. (Screencap below is from Cap 9 but its similar in Cap 8).

To get rid of the border, select the Style tab next to Options and uncheck the box next to the Border option.

-Jord

[dcrouse10]

Curious.  It doesn't seem to work, it just scales the entire image.  That is until you mouseover it, whereupon it finally updates itself to the new size.  Yay!  Thank you.

There is still the issue of the grey border around the image. Is there any way to get rid of that?  Or at least make it white?  Bottom and right side can be trimmed if you are careful, but the top and left side, not so much.

[Jordster1]

Hmm...is the Constrain Proportions box checked? Try un-checking that, its under where the width and height are. Also un-check the Lock Size and Position box above those value entries if its checked.

That border in your screencap still looks suspiciously like the overflow.

Alternatively, you can grab the editing handles that surround the object and trying squinching them in and out until the grey overflow goes away.

-Jord

[dcrouse10]

Constrain Proportions is off.
Lock Size and Position is off.

Grabbing the handles resizes the object, but it squinches to the upper left, trimming the object but leaving the border.

And the border does look like the overflow.

I assume that the object's coordinates within its window are not 0,0, but 10,10, leaving me with an unsightly strip.

[Jordster1]

dcrouse10 wrote:

...

I assume that the object's coordinates within its window are not 0,0, but 10,10, leaving me with an unsightly strip.

OOoh, yeah, good call, could very well be. Did you inherit the media from someone/somewhere else or can you get access to the source and fix it there? You may be inheriting a default margin/offset.

-Jord

[dcrouse10]

I created the file in Flash.  The origin there is 1.5,1.5 as the purple border is 3 pixels.

HTML Canvas files have a default background color, which is what this border is.  If I go into the HTML file for the image, I can change the background color.  When I import that modified file into Captivate, the border is invisible (white on white).  No coordinates in the HTML file, though.

Now, I just need to find the default to change it permanently.

Thanks for the helps.

[Lilybiri]

At this moment using OAM files (created with Edge Animate) is a much better work flow (better integration) than starting from Flash. Let us hope Flash will be able in the future to create OAM-files as well.

[dcrouse10]

I started working with Edge Animate, until I read that Adobe has ended development.  Flash will continue, although it will be rebranded to Adobe Animate CC.

So I went back to Flash.

Reference:

Adobe Edge Animate Team Blog

[Lilybiri]

As an ACP I am perfectly aware of that change, but for media I wait until Flash export to OAM is there

[dcrouse10]

Flash produces an HTML file and a JS file.  I added the margin command to both with no effect.

[Lilybiri]

I think it is a compatibility issue, that is why I cross my fingers to hope on good compatibility when Flash produces OAM's.

[Jordster1]

Sigh (@Captivate). Lookit this:

Cap embeds the animation file into an iframe, and it's the body tag on that DOM that needs to get the margin 0 treatment. You can see here its been given a default margin of 8px, that's what's causing the grey border effect. To test the theory I did some live browser DOM editing, and...

Voilà! No more margin.

Unfortunately, Cap 8 doesn't seem to be using jQuery so getting ahold of the iframe body context in native Javascript is proving to be slippery. Essentially though we should be able to grab that context by executing Javascript in the onEnter of the Master slide and force the margin 0 into the iframe body. I'll keep tinkering with it and see if I can come up with the right script and I'll update the thread.

Alternatively if there's an easier way to do this, say, somewhere in the settings from within Cap, that would be ideal. Maybe someone else will chime in on this particular windmill tilting we're trying here.

[Edit 1] So Cap 8 is really being evil about this. I've tried putting the style inline on the html page that Flash writes...Cap strips it out. I tried putting it in the head and at the end after the body and inline on the body tag itself. No dice. My guess is that at the point that the zip gets imported Cap removes anything it considers extraneous? And its gone. Poof. Blowing my mind right now. So that internal iframe user agent style sheet has to be overwritten by Javascript after Cap is done processing the page. Wild.

[Edit 2] Captivate 9 doesn't strip out the CSS added to the imported HTML page:

However the iframe is still subject to the user agent stylesheet rules so if I hadn't put in the CSS rule of margin 0 we'd still see the grey margin:

I'm gonna put this one to bed. If someone really needs me to work out the JS to force Cap 8 to play nice I'll give it another go otherwise my suggestion would be that if you really need that margin to go away, add the CSS rule to the animation HTML as shown and use Cap 9.

-Jord

[dcrouse10]

Above and beyond the call.  Thank you very much.

Let's hope Adobe is listening in and provides a better mechanism to control the output.

[Jordster1]

No problem, my pleasure. I get a kick outta rooting stuff like this out. I'd rather understand why something was functioning (or not functioning) than chalk it up to nebulous reasons.

Adobe did learn their lesson a little bit since Cap no longer removes your code (that still destroys me). There's probably solid arguments on both sides for whether Cap should introduce the 0 margin user agent override quietly behind the scenes or whether they should leave it up to the user. Maybe a Web Object property checkbox to set that override or not. That would actually be a pretty nice little option.

[Jordster1]

dcrouse10 wrote:

I created the file in Flash.  The origin there is 1.5,1.5 as the purple border is 3 pixels.

HTML Canvas files have a default background color, which is what this border is.  If I go into the HTML file for the image, I can change the background color.  When I import that modified file into Captivate, the border is invisible (white on white).  No coordinates in the HTML file, though.

Now, I just need to find the default to change it permanently.

Thanks for the helps.

No problem, but lets try one mo' thang.

In the CSS for your HTML package if there's a body selector already in it, add margin: 0px; to it. If there's no body selector add one:

body {

     margin: 0px;
}

This could be one of those instances where a reset sheet would be super handy to strip out any default browser-imposed settings so you wouldn't have this kind of unintended consequence.

-Jord