Flex 4: Can I animate multiple objects within the same parallel? - apache-flex

Question

I have multiple spinning balls that I want to animate altogether. Here's what I have so far but when I play the parallel (spinning.play()), nothing happens.
Where am I going wrong?
<fx:Declarations>
<fx:Vector id="kfP1" type="spark.effects.animation.MotionPath">
<s:MotionPath property="baseColor">
<s:interpolator>
<s:HSBInterpolator />
</s:interpolator>
<s:Keyframe time="0" value="0x9F9B9B" />
<s:Keyframe time="250" value="0xFFFFFF" />
<s:Keyframe time="500" value="0x9F9B9B" />
</s:MotionPath>
</fx:Vector>
<fx:Vector id="kfP2" type="spark.effects.animation.MotionPath">
<s:MotionPath property="baseColor">
<s:interpolator>
<s:HSBInterpolator />
</s:interpolator>
<s:Keyframe time="125" value="0x9F9B9B" />
<s:Keyframe time="375" value="0xFFFFFF" />
<s:Keyframe time="625" value="0x9F9B9B" />
</s:MotionPath>
</fx:Vector>
<fx:Vector id="kfP3" type="spark.effects.animation.MotionPath">
<s:MotionPath property="baseColor">
<s:interpolator>
<s:HSBInterpolator />
</s:interpolator>
<s:Keyframe time="250" value="0x9F9B9B" />
<s:Keyframe time="500" value="0xFFFFFF" />
<s:Keyframe time="750" value="0x9F9B9B" />
</s:MotionPath>
</fx:Vector>
<fx:Vector id="kfP4" type="spark.effects.animation.MotionPath">
<s:MotionPath property="baseColor">
<s:interpolator>
<s:HSBInterpolator />
</s:interpolator>
<s:Keyframe time="375" value="0x9F9B9B" />
<s:Keyframe time="625" value="0xFFFFFF" />
<s:Keyframe time="875" value="0x9F9B9B" />
</s:MotionPath>
</fx:Vector>
<fx:Vector id="kfP5" type="spark.effects.animation.MotionPath">
<s:MotionPath property="baseColor">
<s:interpolator>
<s:HSBInterpolator />
</s:interpolator>
<s:Keyframe time="500" value="0x9F9B9B" />
<s:Keyframe time="750" value="0xFFFFFF" />
<s:Keyframe time="1000" value="0x9F9B9B" />
</s:MotionPath>
</fx:Vector>
<fx:Vector id="kfP6" type="spark.effects.animation.MotionPath">
<s:MotionPath property="baseColor">
<s:interpolator>
<s:HSBInterpolator />
</s:interpolator>
<s:Keyframe time="625" value="0x9F9B9B" />
<s:Keyframe time="875" value="0xFFFFFF" />
<s:Keyframe time="1125" value="0x9F9B9B" />
</s:MotionPath>
</fx:Vector>
<fx:Vector id="kfP7" type="spark.effects.animation.MotionPath">
<s:MotionPath property="baseColor">
<s:interpolator>
<s:HSBInterpolator />
</s:interpolator>
<s:Keyframe time="125" value="0x9E9A9A" />
<s:Keyframe time="750" value="0x9F9B9B" />
<s:Keyframe time="1000" value="0xFFFFFF" />
<s:Keyframe time="1125" value="0xCECCCC" />
</s:MotionPath>
</fx:Vector>
<fx:Vector id="kfP8" type="spark.effects.animation.MotionPath">
<s:MotionPath property="baseColor">
<s:interpolator>
<s:HSBInterpolator />
</s:interpolator>
<s:Keyframe time="0" value="0xFFFFFF" />
<s:Keyframe time="125" value="0x9E9A9A" />
<s:Keyframe time="875" value="0x9F9B9B" />
<s:Keyframe time="1125" value="0xFFFBFB" />
</s:MotionPath>
</fx:Vector>
<s:Parallel id="spinning" repeatCount="0" duration="1125" >
<s:Animate id="animateP1" motionPaths="{kfP1}" target="{p1}"/>
<s:Animate id="animateP2" motionPaths="{kfP2}" target="{p2}"/>
<s:Animate id="animateP3" motionPaths="{kfP3}" target="{p3}"/>
<s:Animate id="animateP4" motionPaths="{kfP4}" target="{p4}"/>
<s:Animate id="animateP5" motionPaths="{kfP5}" target="{p5}"/>
<s:Animate id="animateP6" motionPaths="{kfP6}" target="{p6}"/>
<s:Animate id="animateP7" motionPaths="{kfP7}" target="{p7}"/>
<s:Animate id="animateP8" motionPaths="{kfP8}" target="{p8}"/>
</s:Parallel>
</fx:Declarations>

Answer 1

Looking at the format for Parallel that Catalyst produces (which works) it looks like you need to do something like this (unchecked)
<s:Parallel>
<s:Parallel target = "{p1}">
<s:Animate id="animateP1" motionPaths="{kfP1}"/>
</s:Parallel>
<s:Parallel target = "{p2}">
<s:Animate id="animateP2" motionPaths="{kfP2}"/>
</s:Parallel>
</s:Parallel>
It looks weird to me, but that's what the tooling produces!