Highlighted

Catptivate 2019 has margins empty when importing Animate OAM file

Community Beginner ,
Sep 30, 2020

Copy link to clipboard

Copied

I am fairly new at learning Animate. A total noob. But I have manage to create a few small eLearning animations for a few silly games requested by our ISDs. When I create something in Animate (HTML canvas, sized as neede 640x360 px, center stage and responsive set to BOTH, and OAM is tranparent. stage has transparent background) then import as an HTML animation in Captivate, I consistently get a top and left magin that pushes the animation outside of the right and bottom edge of the frame. Does anyone know if there is a setting or some code I can edit to correct this? Or at least why and how it is happening. It looks like there is some padding added. My coding abilites are weak but I have a coworker who programs that can help if needed. But first I have to help find out why it is happening. 

CP_OAM_margin.png

Also is it true, that an .ini change to the CP code will allow us to layer the OAM file below a static graphic? Currently it always appears on top when viewed and published from CP. I just discovered this today and have yet to ask my progrmming collegue about this. Trying to do some perliminary research for her. Thanks for any input you can provide. 

Most Valuable Participant
Correct answer by Lilybiri | Most Valuable Participant

For the OAM, need more time to double-check.

 

For your last question, this is the answer I mostly give:

"Animations and web objects are always on top, whatever the stacking order in the timeline. You need to edit the captivate.ini file, and toggle the value of UseWidget7 to 1 in the file captivate.ini. You find it in the installation folder, need administrator rights."

Views

163

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Catptivate 2019 has margins empty when importing Animate OAM file

Community Beginner ,
Sep 30, 2020

Copy link to clipboard

Copied

I am fairly new at learning Animate. A total noob. But I have manage to create a few small eLearning animations for a few silly games requested by our ISDs. When I create something in Animate (HTML canvas, sized as neede 640x360 px, center stage and responsive set to BOTH, and OAM is tranparent. stage has transparent background) then import as an HTML animation in Captivate, I consistently get a top and left magin that pushes the animation outside of the right and bottom edge of the frame. Does anyone know if there is a setting or some code I can edit to correct this? Or at least why and how it is happening. It looks like there is some padding added. My coding abilites are weak but I have a coworker who programs that can help if needed. But first I have to help find out why it is happening. 

CP_OAM_margin.png

Also is it true, that an .ini change to the CP code will allow us to layer the OAM file below a static graphic? Currently it always appears on top when viewed and published from CP. I just discovered this today and have yet to ask my progrmming collegue about this. Trying to do some perliminary research for her. Thanks for any input you can provide. 

Most Valuable Participant
Correct answer by Lilybiri | Most Valuable Participant

For the OAM, need more time to double-check.

 

For your last question, this is the answer I mostly give:

"Animations and web objects are always on top, whatever the stacking order in the timeline. You need to edit the captivate.ini file, and toggle the value of UseWidget7 to 1 in the file captivate.ini. You find it in the installation folder, need administrator rights."

Views

164

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 30, 2020 0
Adobe Community Professional ,
Oct 01, 2020

Copy link to clipboard

Copied

The required change to the AdobeCaptivate.ini file found in the Captivate install directory is as follows:

UseWidget7 = 1

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 1
Community Beginner ,
Oct 01, 2020

Copy link to clipboard

Copied

Thank you. I'll have my collegue assist with editing the .ini file. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 0
Most Valuable Participant ,
Oct 01, 2020

Copy link to clipboard

Copied

For the OAM, need more time to double-check.

 

For your last question, this is the answer I mostly give:

"Animations and web objects are always on top, whatever the stacking order in the timeline. You need to edit the captivate.ini file, and toggle the value of UseWidget7 to 1 in the file captivate.ini. You find it in the installation folder, need administrator rights."

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 1
Community Beginner ,
Oct 01, 2020

Copy link to clipboard

Copied

Thank you. I'll get my collegue to help with this one. She isn't afraid of the CP .ini file.  🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 0
Adobe Community Professional ,
Oct 01, 2020

Copy link to clipboard

Copied

Just one extra thing you need to be aware of with changing settings in the captivate.ini file.  Windows will likely prevent you from simply opening the file directly in Notepad and then just editing the value before saving and closing. 

 

This is a file buried inside the Program Files folder and as such it will be protected.  So, even though you already have Administrator rights to your computer it will try to block you.

 

The trick is to take a copy of the file and save it to another folder somewhere, then make the edits to that copy.  When finished, copy the edited file back to the original location, overwriting the previous version. You will still need to be an Admin to do this.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 1
Community Beginner ,
Oct 01, 2020

Copy link to clipboard

Copied

Thanks RodWard. I was able to locate and edit it using Notepad++  Preliminary change seems to work. I'll test it more tomorrow. Thank you for the advice. Hoping I can get the OAM margins fix as well.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 0
Community Beginner ,
Oct 06, 2020

Copy link to clipboard

Copied

@Lilybiri  The INI change worked like a charm for layering above the OAM file. Thank you so much. We still have to test on the LMS, but it works nicely in HTML5 Preview for chrome.

Have you had any success in finding a solution for the OAM margins? Fingers still crossed. 

Regards,

Cazimier

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2020 0
Adobe Community Professional ,
Oct 01, 2020

Copy link to clipboard

Copied

in the HTML file that is published from animate you'll need to add this CSS to the head section:

 

<style>

body{
margin: 0px 0px
}

</style>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 2
Community Beginner ,
Oct 01, 2020

Copy link to clipboard

Copied

Thank you. I hope the OAM issue is as easy as changing CSS. 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 0
Community Beginner ,
Oct 08, 2020

Copy link to clipboard

Copied

@TLCMediaDesign   OMG! LIGHTBULB!

I was listening to a youTube video for something else in Animate and I think I found the missing link. I figured out what you were trying to tell me -- When publishing an OAM from Animate, you get 3 files that are sort of a "package" - HTML, JS, and OAM.  I didn't grasp how they worked together. DUH!  Being a noob is so time consuming!  You were EXACTLY correct about how to fix the issue.

Locate and Edit published HTML (I used Notepad++) then 

find and locate magin:auto; change it to margin: 0px 0px;  and save the file BEFORE adding the OAM file to CP.

cazimier_0-1602179808162.png

TA-DAAAA!!!!!   This in turn removed the blank margin mentioned above when imported into CP!!!

I'm not a programmer, just hang out with a few.  I have 7 of these to do!!!  Thank you so much!!!  Snoopy Dance!!  

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Community Beginner ,
Oct 08, 2020

Copy link to clipboard

Copied

RATS! I was wrong... I had to reboot the computer and nothing changed. I wish I could delete the post but can't see a way to do it.

And actually the margin is only in CP. Once in HTML preview, it jumps into place the moment it begins playing.So my solution is to create 2 overlay layers with a static image on each and use the alpha to/from effect so I can fade out the static image. Sigh. This makes placement as part of a layered slide extremely difficult. I'll definately metion it the next time the "rate captivate" windows appear. 😞

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
RodWard LATEST
Adobe Community Professional ,
Oct 09, 2020

Copy link to clipboard

Copied

Perhaps this will help.

When you publish an HTML5 Canvas project from Animate you always output an HTML, and JS file with the same name as your project plus one or more folders named libs (for Animate's Create.JS files) and possibly an images folder containing any JPG or PNG files your project needs.  If you had also selected the OAM checkbox in the output options then you will have another OAM file that is basically just a renamed ZIP archive that contains all the other files plus an XML file as well.

 

Captivate accepts the OAM file as an animation, but (if you do it properly) you can also just select and zip the other output files and insert that zip file as an animation.  Either one will usually work.  The OAM is the better way to go because there's no extra steps to get it to work.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2020 0
Advocate ,
Oct 01, 2020

Copy link to clipboard

Copied

Hi cazimier

Maybe, just maybe: Did you check in Animate under Publish Settings the option Scale to fill visible area? Like this:

Screenshot 2020-10-01 at 23.45.26.png

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 0
Community Beginner ,
Oct 06, 2020

Copy link to clipboard

Copied

Kdmemory, Scale to fill visible area does fill in the margin area, but it also "scales" the image up. Once enlarged, it is hard to layer on the page because of the size change. Even if I save out my images to accomodate the extra 8px size increase, it still makes precise placement difficult. What it is good for, as I suspected, is helping to scale the animation with better quality. But thank you for you input.  🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2020 0