how to repeat animations

[wertzui]

i wanted to create a background animation for my skin.
for that i need an image to fade in and out forever.
i have searched the wiki, but i could not find anything.
how can i make an animation repeat itself forever?

if this isnt implemented, it would be nice to implement something like
repeatafter="time_in_msecs"

[wertzui]

another idea for animations:
make it possible to animate an image on top of a control (ie have a gutton that is blue and a white picture fading on top of it, creates a nice effect)

[Harley]

Hi.

you can do it with this :

<control>
<type>multiimage</type>
<id>1</id>
<width>720</width>
<height>576</height>
<imagepath>back</imagepath>
<timeperimage>150</timeperimage>
<fadetime>100</fadetime>
<loop>yes</loop>
<randomize>false</randomize>
<animation effect="fade" time="200">VisibleChange</animation>
</control>




For a animation on top for a button you can create a common.ButtonAnimation.xml like this:

<window>
- <controls>
- <control>
<description>ButtonAnimation</description>
<type>animation</type>
<textures>Animations\Button000014.png;Animations\B utton000013.png;Animations\Button000012.png;Animat ions\Button000011.png</textures>
<Duration>0:0:04</Duration>
<RepeatBehavior>Forever</RepeatBehavior>
<FillBehavior>HoldEnd</FillBehavior>
</control>
</controls>
</window>

and import it to your buttoncontrol like this:

<control>
<description>default button</description>
<type>button</type>
<id>1</id>
<posX>300</posX>
<posY>200</posY>
<width>190</width>
<height>32</height>
<textXOff>10</textXOff>
<textYOff>5</textYOff>
<textureFocus>common.ButtonAnimation.xml</textureFocus>
<textureNoFocus>menu_list_nofocus.png</textureNoFocus>
<font>font13</font>
<textcolor>ffffffff</textcolor>
<colordiffuse>ffffffff</colordiffuse>
<disabledcolor>60ffffff</disabledcolor>
</control>

Greetings Harley

[wertzui]

<loop>yes</loop> doesnt work for me.

here is my code:

     <control>
       <animation effect="fade" time="3000" repeat="2">WindowOpen</animation>
       <animation effect="fade" time="3000" repeat="2" delay="18000" start="100" end="0">WindowOpen</animation>
       <loop>yes</loop>
       <type>image</type>
       <description>background image1</description>
       <id>2</id>
       <posX>470</posX>
       <posY>10</posY>
       <width>250</width>
       <height>576</height>
       <texture>COMMON.BACKGROUND.LAYER1.PNG</texture>
     </control>
     <control>
       <animation effect="fade" time="3000" repeat="2" delay="3000">WindowOpen</animation>
       <animation effect="fade" time="3000" repeat="2" delay="15000" start="100" end="0">WindowOpen</animation>
       <loop>yes</loop>
       <type>image</type>
       <description>background image2</description>
       <id>2</id>
       <posX>250</posX>
       <posY>0</posY>
       <width>470</width>
       <height>576</height>
       <texture>COMMON.BACKGROUND.LAYER2.PNG</texture>
     </control>
     <control>
       <animation effect="fade" time="3000" repeat="2" delay="6000">WindowOpen</animation>
       <animation effect="fade" time="3000" repeat="2" delay="12000" start="100" end="0">WindowOpen</animation>
       <loop>yes</loop>
       <type>image</type>
       <description>background image3</description>
       <id>2</id>
       <posX>10</posX>
       <posY>370</posY>
       <width>670</width>
       <height>200</height>
       <texture>COMMON.BACKGROUND.LAYER3.PNG</texture>
     </control>

and do you have an idea how to animate an image over a button without having to create a lot of pngs?
when the button is selected, i want it to display the selectedtexture and have a fading animation with another image on top of that.

[Harley]

..take a look at my code you must use the multiimagefunktion

and for animation on top see my edit.

Harley .)

[wertzui]

multiimage doesnt work either.

and for animation on top of a button, i mean a fade animation, not an an animation where i have to create every single image.

     <control>
       <animation effect="fade" time="3000" repeat="2">WindowOpen</animation>
       <animation effect="fade" time="3000" repeat="2" delay="18000" start="100" end="0">WindowOpen</animation>
       <loop>yes</loop>
       <type>multiimage</type>
       <description>background image1</description>
       <id>2</id>
       <posX>470</posX>
       <posY>10</posY>
       <width>250</width>
       <height>576</height>
       <imagepath>COMMON.BACKGROUND.LAYER1.PNG</imagepath>
       <timeperimage>3000</timeperimage>
       <fadetime>3000</fadetime>
       <randomize>false</randomize>
     </control>
     <control>
       <animation effect="fade" time="3000" repeat="2" delay="3000">WindowOpen</animation>
       <animation effect="fade" time="3000" repeat="2" delay="15000" start="100" end="0">WindowOpen</animation>
       <loop>yes</loop>
       <type>multiimage</type>
       <description>background image2</description>
       <id>2</id>
       <posX>250</posX>
       <posY>0</posY>
       <width>470</width>
       <height>576</height>
       <imagepath>COMMON.BACKGROUND.LAYER2.PNG</imagepath>
       <timeperimage>3000</timeperimage>
       <fadetime>3000</fadetime>
       <randomize>false</randomize>
     </control>
     <control>
       <animation effect="fade" time="3000" repeat="2" delay="6000">WindowOpen</animation>
       <animation effect="fade" time="3000" repeat="2" delay="12000" start="100" end="0">WindowOpen</animation>
       <loop>yes</loop>
       <type>multiimage</type>
       <description>background image3</description>
       <id>2</id>
       <posX>10</posX>
       <posY>370</posY>
       <width>670</width>
       <height>200</height>
       <imagepath>COMMON.BACKGROUND.LAYER3.PNG</imagepath>
       <timeperimage>3000</timeperimage>
       <fadetime>3000</fadetime>
       <randomize>false</randomize>
     </control>

[Harley]

Wertzui,

you must use a Multiimage like this steps :

1. you create a control like this:

<control>
<type>multiimage</type>
<id>1</id>
<width>720</width>
<height>576</height>
<imagepath>back</imagepath>
<timeperimage>150</timeperimage>
<fadetime>100</fadetime>
<loop>yes</loop>
<randomize>false</randomize>
<animation effect="fade" time="200">VisibleChange</animation>
</control>

2. you must create a new folder, in this example with the Name "back", in the Folder Media/animations.

3. you must put your images for the animation in this Folder Media/animations/back.

The images in the Folder "back" will be used in the animation, in the steps like the names are set, for example: if you name your gfx Picture1, Picture2, Picture3.... It will play it in this sequence. 1,2,3

So you must use multiimages, then it works fine

Harley

[wertzui]

ok, thx, i will try that out, when im at home.

and do you have another idea on how to animate an image on top of a button?

[Inker]

I guess what wertui means is how to loop using the NEW animation options, such as fade/slide/zoom etc. These are much smoother and easier to create too.

Unless already in, perhaps a property could be added to allow for such looping? (*wink*wink* @ rtv ;-))

It would then be easy to do bg animations. You could even easily reverse the animations easily by creating another one in reverse but with the delay set to the time of the first animation.

Anyways...