<container>
  <image id="Comp" x="{component.begin.x}" y="{component.begin.y}" width="{component.begin.width}" height="{component.begin.height}" src="{component.src}" rendering="speed" />

  <action id="myAction1" on="Appear" onEnd="FinishedTransition" >
    <animate targetNode="Comp" targetAttr="opacity" from="0" to="1" begin="0s" dur="200ms" />
  </action>

  <action id="myAction2" on="Disappear" onEnd="FinishedTransition" >
    
    <animate targetNode="theControlImage" targetAttr="opacity" from="1" to="0" begin="0s" dur="150ms" />
    <animate targetNode="theControlImage" targetAttr="x" from="{(component.begin.x-component.begin.width*0.5) + component.begin.width*0.5}" to="{(component.begin.x-component.begin.width*0.8) + component.begin.width}" begin="0s" dur="150ms" ease="out" />
    <animate targetNode="theControlImage" targetAttr="y" from="{(component.begin.y-component.begin.height*0.5) + component.begin.height*0.5}" to="{(component.begin.y-component.begin.height*0.8) + component.begin.height}" begin="0s" dur="150ms" ease="out" />
    <animate targetNode="theControlImage" targetAttr="width" from="{component.begin.width}" to="{component.begin.width*0.5}" begin="0s" dur="150ms" ease="out" />
    <animate targetNode="theControlImage" targetAttr="height" from="{component.begin.height}" to="{component.begin.height*0.5}" begin="0s" dur="150ms" ease="out" />
  </action>
</container>


