flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com>
Subject Re: SVG button with skin states and JS
Date Wed, 10 Apr 2013 22:02:42 GMT



On 4/10/13 2:39 PM, "OmPrakash Muppirala" <bigosmallm@gmail.com> wrote:


>>> It is not a limitation of the SVG background-images.  The same flicker
>>> happens when you use a .png or a .jpg as background.  It seems like the
>>> images are lazy loaded and I am not sure if we can force the images to be
>>> loaded into memory without resorting to hacks.
>> Again, we want to identify the best implementation and encapsulate it.
>>  Howe
>> are other frameworks skinning buttons?
> 
> 
> 
> The widely acceptable solutions seem to be:
> a) Preload the images using in an onLoad javascript function
> b) Use a sprite sheet.  So, it would look something like (copy-pasta from
> [1]):
> 
> /* "rollover-sprite.png" file contains images for both states side by side. */
> A {
>     background: url(rollover-sprite.png) no-repeat;}
> /* Width of image for each state is supposed to be 100px here
>   (sprite will be ~200px wide). */A:hover {
>     background-position: -100px 0;}
> 
> 
> 
> What I am doing is a modification of the sprite sheet solution.  Except
> that I am toggling visibility of states instead of translating the sprite
> sheet.
> 
> Again, I wouldn't want to go this route because it limits us to built in
> pseudo-selectors/states.  For example, we wont be able to do a three-state
> checkbox (selected, unselected, partially selected) with this approach.
> 
>  [1]
> http://stackoverflow.com/questions/13015603/css3-background-transition-flicker
> s-on-first-hover
Well, if sprite-sheets are the best practice, why not use the same technique
for SVG?  Otherwise, how does the designer express what they want without
code?

I'm not clear that spritesheets truly have a psuedo-state limitation.  CSS
usually allows for extensibility in most places, and/or you might alter the
class selector name.  How would you do a toggle-button bar if there weren't
separate hover visuals for selected-and-hovered?
-- 
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui


Mime
View raw message