Sometime around 17/11/09 (at 12:58 -0600) Todd said:
That’s right. The 100% width/height stretches the 500px x 500px
graphic to fit the window.
Yep. Although the way I did it was slightly different from your suggestion.
Draw a graphic box the size of the page and give it a fill or an
image. I used the Fill Master action to make a linear blend between
two colours and then the Fade action to fade it out at one end.
Use the Inspector palette’s Dimensions pane to have it set to be
fixed to the left and the right sides, making the width inactive
(dimmed). Do the same for the top/bottom settings as well.
Note that this sets the div, the HTML structure that contains the
graphic. This in itself doesn’t change the size of the graphic.
Now choose Item > Extended, select the ‘img style’ tab, add a new
attribute and give it that width 100% setting. Add another for
height, 100% as well.
THIS is what tells the browser that the graphic can flex. It sets it
to be 100% of the width (and height) of its container, which is the
div that we set to fit itself to the left, right, top and bottom
edges of the page (and hence browser window).
I did this with two graphics, one fading downwards and the other
fading upwards. I set them both to be output as PNG format bitmaps
set to millions of colours, so the transparency set through the Fade
action was preserved as an 8-bit alpha channel in the graphics that
The grey tint box is simply a graphic that’s filled with black and
set to 30% opacity, using the Styles & Colors palette.
This was then set to flex in a similar fashion to the larger
graphics, just with a bit of variation in the actual details.
The float:left stuff is produced by Freeway as standard. All I did
was (1) set the CSS-positioned object to pin its sides to the window
rather than be a fixed width/height, and (2) add the Extended
attributes to the img style section, setting the image’s width and
height to 100%.
freewaytalk mailing list
Update your subscriptions at: