Due to a limitation in the flash player, device text can only be
visible or invisible; any non-zero opacity values for text will be
drawn as opacity=1.
There are two workarounds, both of which increase the download size:
1) Turn the text into an image; render it as an image with dynamic
opacity. This is a huge pain to maintain.
2) Use embedded fonts.
The difference between embedded and device fonts has been bothering
me for a while, so I put together a little example. It constrains the
opacity of various text objects to the value of a slider. John,
consider this a doc contribution, if you like.
<canvas width="600" >
<include href="incubator/stylishbutton.lzx" />
<font name="Arioso" src="ariosor.ttf">
</font>
<font name="timmons" src="timmonsb.ttf"/>
<view name="inset" x="20" y="20">
<simplelayout axis="y" spacing="10" />
<view name="controls" layout="axis:y; spacing:30"
width="100%" height="140" >
<text multiline="true" x="10" width="${parent.width-20}" >
This slider controls the opacity of each of the text
objects below, as
well as the right half of the rectangle at the
bottom of the canvas.
Opacity varies from 0 (slider=0) to 1 (slider=100).
The text using embedded fonts (timmons and arioso)
can have fractional
opacity; the text using device fonts can only be
visible or invisible.
</text>
<slider id="gSlider" minvalue="0" maxvalue="100"
value="50" x="10" width="${parent.width-20}" />
</view>
<view height="130">
<simplelayout axis="y" spacing="10" />
<text id="gText" height="24" font="timmons"
fontsize="18" opacity="${gSlider.value/100}">
some text in timmons (an embedded font)
</text>
<text height="24" font="Arioso" fontsize="18" opacity="$
{gSlider.value/100}">
some text in arioso (an embedded font)
</text>
<text height="24" font="Verdana" fontsize="18" opacity="$
{gSlider.value/100}">
some text in verdana (a device font)
</text>
<text height="24" font="Sans" fontsize="18" opacity="$
{gSlider.value/100}">
some text in Sans (a device font)
</text>
</view>
<view width="200" height="100" layout="axis:x">
<view bgcolor="black" width="100" height="100"
opacity="1" />
<view bgcolor="black" width="100" height="100" opacity="$
{gSlider.value/100}" />
</view>
</view>
</canvas>
On Dec 16, 2005, at 5:28 PM, Denis Bohm wrote:
I'm trying to make a control panel that fades in/out, but it
appears that parts of some controls don't respect the opacity - for
example button text. Is this a bug? Or is there some other way to
control the opacity of a child view completely?
<canvas>
<button opacity="0.1">Button</button>
</canvas>
_______________________________________________
Laszlo-dev mailing list
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-dev
_______________________________________________
Laszlo-dev mailing list
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-dev
