Simultaneous fade out and fade in and image

Question

I currently have code that fades out on canvas of a view
stack and fades in a second canvas of the view stack. However, my
desired behavior is that the fade out happens as the fade in
happens so it would simulate a tween effect like when making
animated gif's. Is there a way to do this, and if so does anyone
have any sample code to do this?

Answer 1

so the fade out and fade in are working like you said,
however I want then to be in the same position on the page. I would
like each canvas to be at coordinates (0,0). Here is my code, but
the canvas' are stacked vertically? Is what I want to do possible?
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="initApp();">
<mx:Style>
Application {
backgroundColor: #ffffff;
backgroundGradientColors: #ffffff, #ffffff;
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable] private var homePageImageId:int = 0;
[Bindable] public var intervalId:uint;
[Embed(source="images/3_1813714899.jpg")]
[Bindable] public var imgClass3:Class;
[Embed(source="images/5_2065488856.jpg")]
[Bindable] public var imgClass5:Class;
[Embed(source="images/6_717433985.jpg")]
[Bindable] public var imgClass6:Class;
[Embed(source="images/9_263548684.jpg")]
[Bindable] public var imgClass9:Class;
function initApp():void {
checkDelayCounter();
intervalId = setInterval(checkDelayCounter,4000);
function checkDelayCounter():void {
if ( homePageImageId == 0 ) {
canvas0.visible = false;
canvas1.visible = true;
homePageImageId = 1;
} else if ( homePageImageId == 1 ) {
canvas1.visible = false;
canvas2.visible = true;
homePageImageId = 2;
} else if ( homePageImageId == 2 ) {
canvas2.visible = false;
canvas0.visible = true;
homePageImageId = 0;
]]>
</mx:Script>
<mx:Fade id="fade_in" duration="750" alphaFrom="0"
alphaTo="1"/>
<mx:Fade id="fade_out" duration="750" alphaFrom="1"
alphaTo="0"/>
<mx:Canvas id="canvas0" showEffect="fade_in"
hideEffect="fade_out" visible="true" alpha="0" x="0" y="0">
<mx:Image id="homePageImage6" source="{imgClass6}"
width="990" height="400" x="0" y="0"/>
</mx:Canvas>
<mx:Canvas id="canvas1" showEffect="fade_in"
hideEffect="fade_out" visible="false" alpha="0" x="0" y="0">
<mx:Image id="homePageImage3" source="{imgClass3}"
width="990" height="400" x="0" y="0"/>
</mx:Canvas>
<mx:Canvas id="canvas2" showEffect="fade_in"
hideEffect="fade_out" visible="false" alpha="0" x="0" y="0">
<mx:Image id="homePageImage5" source="{imgClass5}"
width="990" height="400" x="0" y="0"/>
</mx:Canvas>
</mx:Application>