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
  • 2416 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 7, 2020

      Hi klaus

      A quick question. What are the options to be selected in HTML/JS and Image Settings while publishing?

      Seeking your support on the same

      V
      Vinod_IndiaAuthor
      Known Participant
      July 7, 2020

      So, coming back to this:

      There's quite a lot to cover and let me first point you to this tutorial from Adobe

      Publishing animations to HTML5

      This tut explains everything relatively well, it can be a bit too much at first for a beginner though.

      I try to focus on the most relevant settings in these sections: HTML/JS and Image settings particularly in connection with Captivate.

      Template for publishing HTML - In some cases it can be useful to create your own HTML-template, I used it in the past to add custom JS to the published HTML5 output from Animate. In such a case the normal procedure is that you first use the Export function and save the Default Template to your harddrive in order to add your custom elements. There's  list of HTML Template Variables which can become handy for this task. But for Captivate it is advisable to stick to the Default template.

      Overwrite HTML file on publish - (checked by default) In some cases you might want to add something to your HTML custom template that would be overwritten every time you publish your Animate animation. Then it makes sense to uncheck this option. Let's say your animation is called myanim.fla.When you publish you get myanim.html and myanim.js. If you uncheck Overwite ... then on each publish only the myanim.js is overwitten, the HTML file stays the same. In the Captivate scenario don't worry too much, just leave it checked.

      Include Javascript in HTML - there are cases one can be restricted to use only one file to deliver your animation for online use. Especially in the Ad Banner field. Then this function can help to accomplish this. Javascript will be included in the HTML file and you don't have myanim.js. Again, for Captivate via the OAM Package you don't need to worry about this.

      Moving over now to the Image settings.

      Export image assets - Leave it checked. I'm myself not so sure right now, but I guess the case of unchecking this option can be useful in the beforementioned Ad Banner scenario. All visual components would be included in code in the published myanim.js. For the use in Captivate just go with the default.

      Export as Texture, Spritesheet or Image assets - best advice, use Texture in most cases. All your visual assets will be combined to one or more so called Atlas files (png) even your SVGs or otherwise in Animate created vector shapes. Image assets can be useful if you don't want (for some reason) your visuals combined either to Texture files (i.e. myanim_atlas.png) or Spritesheets. About Spritesheets in general maybe watch this quite funny video: SpriteSheets - The Movie.

      So much from me. Find out more via the above linked Adobe tutorial. And you are aware that this subject matter is more an issue for the Animate community.

      Good luck, Klaus


      Dear Klaus

      That is so very kind of you, Thanks a lot for explaining things in detail. Will try it out and share my feedback.

      Regards

       

      Lilybiri
      Lilybiri
      Legend
      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
        Legend
        June 16, 2020

        Not sure about your issue but I will just share a thought.

        I do a fair amount of  HTML5 animation embedding with my projects.

        I can confirm that my animations never come in at the same size they were created. Mine are typically always 400x300 regardless of how big I actually make them. I simply resize them such that the dimensions of the webObject exceed the animation being held within, remove the border, and remove the scrolling. I have not experienced the issue of pixelation but I never create the animation to be larger than my Captivate stage.

         

        I was thinking, since you are creating an animation that exceeds the size of your stage - that perhaps you are stuck scaling it down to fit and thus breaking it in a sense - perhaps because it is simply not scaling nicely.

         

        Are you looking to have a full screen animation? I don't use Animate. Can you publish or create your animation to be properly sized for your Captivate stage without scaling? I wonder if it would make a difference?

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