Silverlight Animation

Im creating a header for a website in silverlight.
The header will take an image slide the image across the header & fade out.
When the image reaches the other side of the header the image must change.
The animation is working but the image does not want to change.
What am i doing wrong ?
xaml attached
	Width="640" Height="239">
		<Storyboard x:Name="ImageMove">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="119"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="83"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="-22"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-98"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="-234"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="-329"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.1000000" Value="-367"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="-383"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.9000000" Value="-326"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03.3000000" Value="-279"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03.6000000" Value="-221"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03.9000000" Value="-148"/>
				<SplineDoubleKeyFrame KeyTime="00:00:04.3000000" Value="-48"/>
				<SplineDoubleKeyFrame KeyTime="00:00:04.6000000" Value="125"/>
				<SplineDoubleKeyFrame KeyTime="00:00:05" Value="163"/>
				<SplineDoubleKeyFrame KeyTime="00:00:05.3000000" Value="190"/>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.485"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.59"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0.695"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.795"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="0.895"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="0.985"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.1000000" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="0.1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.9000000" Value="0.17"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03.3000000" Value="0.395"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03.6000000" Value="0.575"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03.9000000" Value="0.715"/>
				<SplineDoubleKeyFrame KeyTime="00:00:04.3000000" Value="0.895"/>
				<SplineDoubleKeyFrame KeyTime="00:00:04.6000000" Value="0.705"/>
				<SplineDoubleKeyFrame KeyTime="00:00:05" Value="0.53"/>
				<SplineDoubleKeyFrame KeyTime="00:00:05.3000000" Value="0.135"/>
	<Grid x:Name="LayoutRoot" Background="White">
		<Image HorizontalAlignment="Right" Margin="0,0,8,8" Width="249" Source="Images/underfloor-heating.jpg" Stretch="UniformToFill" RenderTransformOrigin="0.5,0.5" Opacity="0.185" x:Name="image">
					<ScaleTransform ScaleX="1" ScaleY="1"/>
					<TranslateTransform X="257"/>

Open in new window

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

How are you going about changing the image?
u2envy1Author Commented:
While the storyboard is recording I selected the new image to the image control.
What is the options in changing the image ?
If you can't get it to work the way you are attempting. Have both or all of your images as seperate images in the animation.  when you reach the desired frame, you can then fade your images in and out, you can even get a better morphing effect this way.

After reading your 2nd post, I don't think you can do what you are trying to do in a storyboard.  I would just have both images ready with ones opacity set to 0
You can't "animate" an image change I don't think. I'm not positive on that though but I can tell from looking at your xaml that there is no image changing in any of the storyboard. I can think of two ways you can do what you need:

1) Have two images present and just animate the opacity of both so that one shows up and the other doesn't at the right time in your storyboard.

2) In code behind, add code that fires when the proper storyboard completes that changes the image source.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
u2envy1Author Commented:
Any code example for the 2nd option ?

2) In code behind, add code that fires when the proper storyboard completes that changes the image source.

If I would want to use this control in my app. Must I create the control as a silverlight project in expression blend or silverlight project in visual studio ?
For using the control in I just want to add a reference to the control & use it.
Is that possible ?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft Development

From novice to tech pro — start learning today.