animate visibility question...

Justam · Thread Author #1 12-08-2011, 08:39 PM

Code:

<animate attributeName="visibility" begin="EVENT" dur="LENGTH" fill="freeze" keyTimes="0;1" values="hidden;hidden" xlink:href="#hs0"/>

The above code works fine with theme builder created icons and hides them just fine..however any icon ive created in composer it does not work with. It does however work with other layers I have created in composer....is there something with my icons from composer??

here is a sample of my icon from composer:

Code:

<g id="Icon1">
	<!-- pz:tag type="layer" -->
<g id="Button1" transform="translate(-233 75)">
	<!-- pz:tag type="button" -->
<g id="Button1-Contents">
	<!-- pz:tag type="layer" -->
<g id="tabImage_120">
<image height="68" id="img_1_1_273" width="68" x="0" xlink:href="HCImage00003.png" y="0"/>
</g>
<g id="tabFocusImage_122">
<image height="72" id="img_1_1_277" visibility="hidden" width="80" x="-6" xlink:href="HCImage00002.png" y="-2"/>
</g>
<g id="normalImage_124">
<image height="80" id="img_1_1_281" width="80" x="-6" xlink:href="x-object:/EntryIcon?id=slot1&amp;size=80&amp;width=80&amp;height=80" y="-6"/>
</g>
<g id="focusImage_126">
<image height="80" id="img_1_1_285" visibility="hidden" width="80" x="-6" xlink:href="x-object:/EntryIcon?id=slot1&amp;size=80&amp;width=80&amp;height=80&amp;focus" y="-6"/>
</g>
</g>
</g>
</g>

and here is the code from an icon created in theme builder:

Code:

<g id="hs0focus"
          display="none">
      <image id="background_focus_tab0"
            x="389"
            y="252"
            width="80"
            height="72"
            xlink:href="tab_focus0.png"/>
      <image id="app_focus_icon0"
            x="384"
            y="254"
            width="90"
            height="68"
            xlink:href="x-object:/EntryIcon?focus&amp;width=90&amp;height=68&amp;id=slot0&amp;size=68"/>
    </g>
    
  <text id="app_focus_font0"
        x="429"
        y="325"
        font-family="BBAlpha Sans"
        font-size="13"
        fill="#ffffff"
        text-anchor="middle"/>
  </g>
  <set xlink:href="#app_focus_font0"
        attributeName="display"
        to="inline"
        begin="hs0.focusin"
        end="hs0.focusout"/>
  <set xlink:href="#hs0normal"
        attributeName="display"
        to="none"
        begin="hs0.focusin"
        end="hs0.focusout"/>
  <set xlink:href="#hs0focus"
        attributeName="display"
        to="inline"
        begin="hs0.focusin"
        end="hs0.focusout"/>

Really the only thing I can think is the fact the visibility code is being executed within the same <svg></svg> tags as the #Icon1 layer and the hs0 is just outside the first <svg></svg>

I do not want to use:

Code:

<set xlink:href="#hs0" attributeName="display" to="none" begin="EVENT" />

The simple reason of not using the above code is that the icon will not be navigable however I believe using the animate visibility that I should be able to navigate towards the object...(at least with today items this is true eg:calendar1hotspot...etc)

The reason for all of this is I am trying to have everything but object(a) hide when object(a) is selected. In order for the other objects to become visible I am using object(a).focusout as my trigger. I do not want a accessKey() for this operation...

Can someone please weigh in on this or provide some insight..

StaticFX · #2 12-09-2011, 11:40 AM

simple...

the animate code

<animate attributeName="visibility" begin="EVENT" dur="LENGTH" fill="freeze" keyTimes="0;1" values="hidden;hidden" xlink:href="#hs0"/>
is wrong... note it has both values as hidden... so it wont show.

either like this:
<set xlink:href="#Icon1" attributeName="visibility" to="visible" dur="1ms" fill="freeze" begin="object.focusin" end="object.focusout"/>

to fade in... (not as good when moving from one to another icon... sometimes it will stick)
ttry this (using opacity).. putting the Icon Name in as Icon1
<animate attributeName="opacity" begin="EVENT" dur=".5s" from="0" to="1" fill="freeze" values="0;1" xlink:href="#Icon1"/>

put this code at the bottom, just above the last line </svg>

Justam · Thread Author #3 12-10-2011, 03:37 PM

Quote:

Originally Posted by StaticFX

simple...

the animate code

<animate attributeName="visibility" begin="EVENT" dur="LENGTH" fill="freeze" keyTimes="0;1" values="hidden;hidden" xlink:href="#hs0"/>
is wrong... note it has both values as hidden... so it wont show.

either like this:
<set xlink:href="#Icon1" attributeName="visibility" to="visible" dur="1ms" fill="freeze" begin="object.focusin" end="object.focusout"/>

to fade in... (not as good when moving from one to another icon... sometimes it will stick)
ttry this (using opacity).. putting the Icon Name in as Icon1
<animate attributeName="opacity" begin="EVENT" dur=".5s" from="0" to="1" fill="freeze" values="0;1" xlink:href="#Icon1"/>

put this code at the bottom, just above the last line </svg>

I will give it a try but my main issue was the icons weren't hiding with the hidden value....

Posted from my CrackBerry at wapforums.crackberry.com