Mailing-List: contact dev-help@flex.apache.org; run by ezmlm
Precedence: bulk
Reply-To: dev@flex.apache.org
Received-SPF: pass (athena.apache.org: domain of aharui@adobe.com designates
 64.18.1.23 as permitted sender)
From: Alex Harui <aharui@adobe.com>
To: "dev@flex.apache.org" <dev@flex.apache.org>
Date: Wed, 10 Apr 2013 15:02:42 -0700
Subject: Re: SVG button with skin states and JS
Thread-Topic: SVG button with skin states and JS
Thread-Index: Ac42NAkZLUVEilrLSaCk6JjY8E8BCAAAxZr5
Message-ID: <CD8B2F92.50D88%aharui@adobe.com>
In-Reply-To: 
 <CACK5iZdEHY1-f4s=8QeQM-b3Qk5NsxUAzNtyPGvj08bojqY37Q@mail.gmail.com>
Accept-Language: en-US
Content-Language: en-US
user-agent: Microsoft-Entourage/13.16.0.130206
acceptlanguage: en-US
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: quoted-printable
MIME-Version: 1.0


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?
>=20
>=20
>=20
> 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]):
>=20
> /* "rollover-sprite.png" file contains images for both states side by sid=
e. */
> 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;}
>=20
>=20
>=20
> 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.
>=20
> 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-stat=
e
> checkbox (selected, unselected, partially selected) with this approach.
>=20
>  [1]
> http://stackoverflow.com/questions/13015603/css3-background-transition-fl=
icker
> s-on-first-hover
Well, if sprite-sheets are the best practice, why not use the same techniqu=
e
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?
--=20
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui