fit screen type apps.

[taboca]

So I am trying to make a kind of 100% width full screen production. I am also loading directly the swf (I am intended to make an HTML that puts the swf using 100% width later).

Ideally I would like to use the full width, to scale the contents to the width="100%". Then I can take care of the height to center things If I know the canvas actual height.

Seems like something like the following sample it's almost good. I have a background image with 1280 so I load this SWF directly into the browser window. Then the 100% of the window becomes the 1280 relative points.

<canvas width="1280" bgcolor="#000000" oninit="">
<splash/>
<view resource="bg/bg1.jpg" />
</canvas>

But then the background appears somewhat at position x=0 (good) but y=200 (bad). BTW it's not really 200 - it's variable. I am wondering if I can position the view of the bg image really at the 0x0 - or maybe you know an alternate avenue to take here so I can have a full screen type of production inside the browser page.

[antun]

I don't think that what you're trying to do is possible. You won't have any control over how the browser scales the SWF if you load it directly (i.e. no <embed> tags. I believe that by default it will try to keep the aspect ratio the same, which is why you're seeing the swf start 200 pixels below the top of the page - it will center the SWF vertically.

-Antun

[taboca]

Do you know if there is a workaround to have a full screen type of app? Maybe via scaling or using screen size. Is there a varilable exposed that represents the canvas visible size?

[antun]

Not as far as I know. There have been a number of requests for this, and I filed another feature request for what you described.

-Antun

[metasarah]

I did this little test to see what was happening:
<canvas width="1280" bgcolor="#000000" oninit="">
<method event="oninit">
canvas.setbgcolor(0xffffff);
</method>
<splash/>
<view width="10" height="10" bgcolor="red" />
</canvas>

then opened the swf in the browser without the HTML wrapper:
http://localhost:8080/lps/my-apps/temp.lzx?lzt=swf

It seems that the canvas is centered vertically on the page. If you modify the generated HTML wrapper and specify height as 100% then I believe you will achieve your desired effect.

--Sarah

[Jim]

Is there fscommand support by any chance?

[antun]

There aren't any browser JavaScript hooks at the moment, other than the LzBrowser.loadURL('javascript:doSomething()') method - it's just too unreliable across browsers.

-Antun

[J&E Design]

This post is old but i had this problem so here's my solution.

first, canvas must have width="100%" and height="100%"

Then, you sould use "SWFObject" (google for this) javascript library to load the swf into the html file. it has some parameters, and among those parameters you should again use width="100%" and height="100%".

then in your OL code, something like this....

<canvas width="100%" height="100%" bgcolor="black">
<view name="container" align="center">
<!-- YOUR OL WEB HERE -->
</view>
</canvas>

Like this you will always have a 100% fit swf web, and always centered.

Hope this helps someone!