StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCrawl Text Fade-In and -Out in Flex
text
Body
copied!<p>I'm working on a Flex application that includes a crawl component -- a block of text that moves across a portion of the screen from right to left, implemented as a Label object being moved by a Move effect across a containing Canvas object. (Okay, technically, at the moment it's an Image object being moved, but as it's an all-text crawl, I'm working to phase-out the image and just present it as text.) As a bit of visual eye candy, I'm trying to fade the text in when it appears and fade it out when it disappears, rather than have obvious sharp edges at either end of the Canvas.</p> <p>I've largely accomplished this by placing small rectangles at the left and right sides of the Canvas, setting them to the background color, and giving them an alpha gradiant. This works for the majority of situations, and if I don't come up with anything better, I'll gladly roll it into production.</p> <p>However, when there's a background image/pattern instead of a solid background color, this won't work; there will be two very conspicuous monochromatic blocks on either end of the text crawl. (Note that the background image/pattern applies to the entire application, of which the crawl Canvas is only a single part; when there is an app-wide background image, the crawl's background is transparent.) </p> <p>The only general solution I can see is to somehow apply the alpha gradiant to the crawl itself -- fade it in and out at the edges. But I have no idea how you'd do that for something like this. Putting the gradiant on the Canvas seems quite pointless, and if it were on the Label, it would need to slide along the Label from left to right at precisely the same speed the Label is moving across the Canvas from right to left.</p> <p>Is there some solution I'm missing, or should I toss this in the More Trouble Than It's Worth pile?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload