Zooming when publishing

[lmaley]

Sometimes pictures zoom in when publishing for me.  I have no idea why.   Typically I just  create a movie out of the slide and insert the movie that way, it fixes the zoom.  This time though, I have a quiz question, so 

I cannot convert it to a movie.  In captivate my slide looks like;

After publishing it looks like:

I am on captivate 11.5.5.676.  The image is a svg file.

[Lilybiri]

How did you create the image?  It looks like it is a screenshot taken on a monitor with a different display resolution. Check its size in the Options tab of the Properties panel. Edit it so that it has exactly the same size in px as you need.

How did you edit the answer area in the quiz slide?

[lmaley]

I did command shift 4.  Copied that into excel, saved as a SVG then imported.   I do this with most of my screen shots since I get the most crisp image.  Same monitor.  

[lmaley · Accepted solution]

The only way I could fix this was to change the SVG screen shots to PNG.  Now they work.  Not sure why.  I have other SVG created this same way and it works.

[Lilybiri]

Hmmm.... you use the Position Properties panel? Is this a responsive project??? That panel has no sense for a non-responsive project. I cannot imagine seeing such an image on a small phone screen.

[lmaley]

Yes I use te position properties panel all the time so that I can get everything lined up perfectly.  yes it is a responsive project, but I was viewing it on my macbook.   I even tried to lock position and size and it would not work.  I am new to captivate and only been doing this for a few months.   As soon as I changed it to a PNG file it worked perfectly.  I did the same procedure.  Screen shot, copied to excel, saved from excel to PNG instead of a SVG.  Not sure why?

[Lilybiri]

I am hesitating to answer, because you are a Mac user and I am a Windows user.

My Captivate intuition pushes me at doing so, because I suspect that there is some misunderstanding. That feeling is inspired by the screenshot of the Position Properties panel you posted, and that you told to be pretty new to Captivate. Probably without any training?

There are two ways to create a responsive project, which is a project that can be viewed on any device and adapts to also to portrati and landscape mode. The older workflow was with Breakpoint views and the Position Properties panel was important in that workflow. Since CP2017 Fluid Boxes workflow is the default when you create a responsive project from the Welcome screen. The 'fluid' layout is created by using boxes which are controlled by Captivate (using your setup rules) to adapt to any device (using its browser resolution). If you had told that you were creating a responsive project, my first question would have been: which workflow do you use, Breakpoints or Fluid Boxes. Maybe you can answer me now, if you want to learn more?

Position properties panel was made available in Fluid Boxes project for some exceptional situations where Fluid Boxes are not possible or not sufficient. That panel is inherited from Breakpoint views, can be used for a slide without fluid boxes or for objects unlocked from a fluid box.  Example: you cannot use slide video in a fluid box, but you can set it up to fill the width of a slide without fluid boxes using the percentage in the Position properties. Or you can unlock objects from a fluid box (like buttons) and position them near the bottom of a slide, using that panel whatever its resolution. 

In Breakpoint views everything is set up in multiple Breakpoints (different resolutions) using the Properties panel. For a bitmap image (like PNG) you don't want to have it distorted when another device is used. Typical setup in the Position properties would be:

     width  = 100%

     height = Auto

Such a setup would keep the width/height ratio: image will fill the width whatever the resolution or landscape/portrait mode and the height would decrease/increase keeping the image undistorted. With the setup you show in the screenshot you will have a distorted image.

This explains also why it didn't work for a SVG. Contrary to a bitmap image, you cannot distort a SVG, the ratio width/height is always kept. It is impossible to impose a fixed percentage for both width and height.

I hope you will not be insulting me as happens a lot, or label me as condescending. It may be time to explain the use of the Position Properties panel in a blog. If you want to understand and see examples of both workflows for responsive projects, you may have a look at this older blog, which was created for CP2017. At that moment it was not yet possible to use Position Properties panel in a Fluid Boxes project, that was added in CP2019. I haven't seen any documentation on that added feature but may have missed it.

http://blog.lilybiri.com/fluid-boxes-or-breakpoint-views