locked
Can't Get Animation To Run RRS feed

  • Question

  • Yes, I have an ultimate newbie question.  I've created an animation in Blend that is simply a series of graphics images that appear and disappear on the screen.  The first one takes the opacity from 0 to 100, moves left to right across the screen, and then goes back to 0 opacity.  Then the second one does the same thing, and the third, and so on.  When I look at the animation in the storyboard and play it, all works GREAT.  It looks beautiful.  Then, however, when I try and "test" it, I get a static webpage (no animation) with the various images scattered around the page, etc.  I know I'm missing something very obvious, but I've read through everything and can't figure out what it is.  I want it to play automatically when people access the website -- in other words, I want it to be the first thing that loads and that they see and that plays automatically.

    I thought that this thread http://social.expression.microsoft.com/Forums/en-US/blend/thread/52d84c9d-5b1f-49fd-a2cf-35b49c3ab7ff/ might have been on piont, but I guess I'm a little too thick to follow it.  First of all, not knowing any better, I DID select the "create as a resource," etc. when I created the storyboard.  Is there any way that I can "undo" this without deleting all the work I've done?  I'm guessing there is some code I can nuke or change to do so, but I'm not sure what it might be.

    Any thoughts or clarification would be deeply appreciated!
    Saturday, June 13, 2009 3:23 PM

All replies

  • Yes, you can save your animation. If you post your xaml I'll take a look and let you know what's going on.
    Monday, June 15, 2009 6:05 PM
  • I am having the ame problem. I have already looked at some of the postngs and did what they mentiond but no result. Here is my code...

    <UserControl
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:Name="american" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
     x:Class="american_ad1.MainPage"
     Width="588" Height="240" mc:Ignorable="d">

     <UserControl.Resources>
      <Storyboard x:Name="adrotation" RepeatBehavior="Forever">
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
        <EasingDoubleKeyFrame KeyTime="00:00:05" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="00:00:07" Value="0"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image1" Storyboard.TargetProperty="(UIElement.Opacity)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="00:00:07" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="00:00:08" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="00:00:13" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="00:00:15" Value="0"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image2" Storyboard.TargetProperty="(UIElement.Opacity)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="00:00:15" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="00:00:17" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="00:00:22" Value="1"/>
       </DoubleAnimationUsingKeyFrames>
      </Storyboard>
     </UserControl.Resources>
     <i:Interaction.Triggers>
      <i:EventTrigger SourceName="ad_layout" EventName="Loaded">
       <im:ControlStoryboardAction Storyboard="{StaticResource adrotation}"/>
      </i:EventTrigger>
     </i:Interaction.Triggers>

     <Grid x:Name="ad_layout" Background="White">
      <Image x:Name="image" Source="media_image_afs.png" Stretch="Fill">
       <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonDown">
         <ic:HyperlinkAction NavigateUri="http://www.a-f-solutions.com"/>
        </i:EventTrigger>
       </i:Interaction.Triggers>
      </Image>
      <Image x:Name="image1" Source="media_image_apr.png" Stretch="Fill">
       <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonDown">
         <ic:HyperlinkAction NavigateUri="http://www.aprealtybroker.com"/>
        </i:EventTrigger>
       </i:Interaction.Triggers>
      </Image>
      <Image x:Name="image2" Source="media_image_afm.png" Stretch="Fill">
       <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonDown">
         <ic:HyperlinkAction NavigateUri="http://www.afmortgage.com"/>
        </i:EventTrigger>
       </i:Interaction.Triggers>
      </Image>
     </Grid>
    </UserControl>

    As you can see, I did setup the [ControlStoryBoardAction] behaviour to Play the storyboard "adrotation"

     

    Wednesday, May 26, 2010 9:43 PM
  • Does it work if you use a trigger other than Loaded?  My thought was that the app isn't ready at that event to play a storyboard yet.  You could attach it to a click event instead to see if it works that way.  That would at least validate that the storyboard is doing what you want.
    Thursday, May 27, 2010 12:51 PM
    Moderator
  • Hi BlendNewbie,

    you wrote:

    " I want it to play automatically when people access the website -- in other words, I want it to be the first thing that loads and that they see and that plays automatically. "

    I understood this as the problem which was to solve.

    So, I built a small sample application (Silverlight 3) for you. Part of this sample app is an image of big size to produce a loading delay time. Here is the sourcecode.

    XAML:

    <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     x:Class="StartStoryboardCorrectlyLabSL3.MainPage"
     Width="640"
     Height="480"
     mc:Ignorable="d">
    
     <UserControl.Resources>
     <Storyboard x:Name="sbMove">
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
       Storyboard.TargetName="rMove"
       Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
     <EasingDoubleKeyFrame KeyTime="00:00:00"
      Value="0" />
     <EasingDoubleKeyFrame KeyTime="00:00:00.3000000"
      Value="164" />
     <EasingDoubleKeyFrame KeyTime="00:00:00.8000000"
      Value="333" />
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
       Storyboard.TargetName="rMove"
       Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
     <EasingDoubleKeyFrame KeyTime="00:00:00"
      Value="0" />
     <EasingDoubleKeyFrame KeyTime="00:00:00.3000000"
      Value="2" />
     <EasingDoubleKeyFrame KeyTime="00:00:00.8000000"
      Value="1" />
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
       Storyboard.TargetName="rMove"
       Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
     <EasingDoubleKeyFrame KeyTime="00:00:00"
      Value="0" />
     <EasingDoubleKeyFrame KeyTime="00:00:00.3000000"
      Value="44.145" />
     <EasingDoubleKeyFrame KeyTime="00:00:00.5000000"
      Value="-25.23" />
     <EasingDoubleKeyFrame KeyTime="00:00:00.8000000"
      Value="-0.278" />
     </DoubleAnimationUsingKeyFrames>
     </Storyboard>
     </UserControl.Resources>
    
     <Grid x:Name="LayoutRoot"
     Background="#FF333333">
     <Grid.ColumnDefinitions>
     <ColumnDefinition Width="0.327*" />
     <ColumnDefinition Width="0.673*" />
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
     <RowDefinition Height="0.098*" />
     <RowDefinition Height="0.09*" />
     <RowDefinition Height="0.812*" />
     </Grid.RowDefinitions>
     <Grid Height="95"
     Margin="89,47,25,0"
     VerticalAlignment="Top"
     Grid.Row="2">
     <Rectangle x:Name="rMove"
     Stroke="#FF707E94"
     StrokeThickness="3"
     RadiusX="6"
     RadiusY="6"
     RenderTransformOrigin="0.5,0.5"
     d:LayoutOverrides="GridBox"
     Canvas.ZIndex="-1"
     d:IsHidden="True">
     <Rectangle.RenderTransform>
     <TransformGroup>
     <ScaleTransform />
     <SkewTransform />
     <RotateTransform />
     <TranslateTransform />
     </TransformGroup>
     </Rectangle.RenderTransform>
     <Rectangle.Fill>
     <LinearGradientBrush EndPoint="0.5,1"
      StartPoint="0.5,0">
     <GradientStop Color="#FF595959"
      Offset="0" />
     <GradientStop Color="#FF747474"
      Offset="0.493" />
     <GradientStop Color="#FF595959"
      Offset="1" />
     </LinearGradientBrush>
     </Rectangle.Fill>
     </Rectangle>
     <!--NOTE: Please add here your own big sized image source !-->
     <Image Source="rechtsInnencover.jpg"
     Stretch="Fill"
     Width="88"
     Height="88" />
     </Grid>
     </Grid>
    </UserControl>

     

    XAML.VB:

    Partial Public Class MainPage
    	Inherits UserControl
    
     Public Sub New()
    
      InitializeComponent()
    
     End Sub
    
     Public Delegate Sub ThisApplication_LoadedDelegate(ByVal sender As Object, ByVal e As RoutedEventArgs)
    
     Private IsPageLoaded As Boolean
    
     Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
    
      tbTimestamp.Text = DateTime.Now.Ticks.ToString
    
      If IsPageLoaded = False Then
    
       If VisualTreeHelper.GetChildrenCount(Me) > 0 Then
    
        Dispatcher.BeginInvoke(New ThisApplication_LoadedDelegate(AddressOf MainPage_Loaded), Me, e)
    
        IsPageLoaded = True
        Return
    
       End If
    
      Else
    
       sbMove.Begin()
    
      End If
    
     End Sub
    
    End Class

    I tested it and it works.

    If you have any further problems with my solution please post again.

    Best regards,

    Martin

    Please mark this as answer if it solves your problem.

     

    • Edited by Martin Krüger Thursday, June 3, 2010 11:54 AM code optimization
    • Proposed as answer by Martin Krüger Friday, June 4, 2010 5:59 PM
    Thursday, June 3, 2010 11:24 AM