Skip to main content
V
Vinod_India
Known Participant
June 16, 2020
Question

HTML5 animation size reduced while importing into captivate 2019

  • June 16, 2020
  • 2 replies
  • 2396 views

Hi Guys

I'm developing a HTML5 animation (size 1960 x 966 approx. Created in Adobe Animate) and trying to import into Captivate 2019 where I'm encountering a peculiar issue.

0. I create a new responsive Captivate project.

1. I go to Media - Import HTML 5 - browse and select the zipped file to import.

2. The HTML5 gets imported.

3. Unfortunately, the HTML animation is imported as a very small box (approx 600 x 600) into Captivate slide.

4. As a result, I try resizing it manually by pulling it diagonally to fit the captivate slide.

5. By manually resizing the imported HTML 5 animation, all the elements of the animation gets pixelated thereby losing the crispness.

 

I need your support in importing the HTML 5 in the full size which it was developed or atleast in the full size of the captivate responsive slide (1024 x 627 approx).

 

Note: in the attached picture, the "Hover to preview" is the HTML 5 animation that is being imported. Note the small size.

 

Regards

Vinod

    This topic has been closed for replies.

    2 replies

    kdmemory
    kdmemory
    Inspiring
    July 2, 2020

    Hi Vinod

    I'm not sure if I entirely understand the problem you are facing.

    Firstly if you are publishing the An animation at 1960by966 pixels, that's an aspect ratio of 140:69. Your Cp stage is 1024by627 pixels. That's an aspect ratio of 1024:627. To follow your An aspect ratio your Cp stage should be 1024by504 pixels (rounded), if we keep the width of 1024 pixels. What I'm saying is that you should keep aspect ratios in mind. Otherwise you can't fill the entire Cp stage with your animation without distortion.

    Secondly, if we are talking here about a responsive Cp project with fluid boxes, from your screenshot it doesn't appear to show any fluid box, not even just one which fills the entire Cp stage. Your An animation seems to be floating outside any fluid box.

    Thirdly, I work a lot with An and recently had some problems with size and proportions of An animations when placing them OAMwise in Cp. I discovered the following: If you set up your An canvas project in its Publish Settings like shown here:

    When I set Scale to fill visible area to Fit in view, and then, when imported into Cp as OAM in the Properties panel I uncheck Maintain Aspect Ratio. After this the An animation filled the fluid box in Cp much more fitting.

    Maybe this can help you,

    Klaus

      V
      Vinod_IndiaAuthor
      Known Participant
      July 4, 2020

      Thanks a ton Klaus.

      Guess this was the reason for my problem. Now solved!

        Lilybiri
        Lilybiri
        Brainiac
        June 16, 2020

        This seems contradictory: your CP project at its desktop resolution is already much bigger than the animation? And you want moreover the project to be responsive, probably with fluid boxes?  Can you explain?

        Please to not attached images, but insert them as screenshots. Nobody wants to download images before being able to see them.

          V
          Vinod_IndiaAuthor
          Known Participant
          June 16, 2020

          Hi Lilybiri

          Thank you for your post.

          In reality, the captivate project's resolution is smaller than the HTML animation created using Animate. But while importing, it gets resized to what you see in the screen shot. (The big white box you see is the captivate slide and the small black box you see is the HTML animation)

           

          Stagprime2687219
          Stagprime2687219
          Brainiac
          July 1, 2020

          Hi Stag

          As advised, I had resized the animation to the captivate stage size, published as OAM, imported into captivate 2019 and previewed it. Unfortunately, still all the elements distorts and i lose the crispnes of the lines.

          What could be going wrong?

          Regards

           


          I do not have any other ideas on this, unfortunately, I work with neither responsive projects nor OAM files.

          All of my HTML5 animations are coded in Brackets and brought in as a zip file.

           

          I can confirm that resizing does have both pros and cons like when you  have something perfectly centered at 100% and when you scale to 95% it is no longer centered but centers again at 90% and off at 85% etc.

          Objects of any kind always seem to be best when viewed at the specs they were originally created with.

           

           

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices