locked
Animation in Silverlight HTML page not working (WafflesFTW) - 1/9/2008 3:56 PM PST RRS feed

  • Question

  • By: WafflesFTW


    I've creted a new Silverlight app in the Dec. Blend 2 preview trial. The 
    page.xaml file contains a blue circle. I then created a new storyboard and 
    created keyframes where I've changed the appearance of the circle. If I scrub 
    the timeline the animation works fine. However when I save the document and 
    preview in a browser, the animation isn't doing anything. Doesn't a new 
    Silverlight project create an event to start the animation on the page.load 
    event? If not, how do I get this timeline to animate when viewing the HTML 
    file?
    Friday, February 22, 2008 4:02 PM

Answers

  • You have to uncomment the event handler method in the Page.xaml.js page like this:

     // Sample event handler
     handleMouseDown: function(sender, eventArgs)
     {
      // The following line of code shows how to find an element by name and call a method on it.
      this.control.content.findName("Storyboard1").Begin(); <------ This line of code is uncommented**
     }


    Now when you run your project a left mouse button click will run your storyboard. Just make sure you pass in the correct storyboard name.  That is, if you changed your storyboard name to something else than : storyboard1", you'll have to change the name in this page. I agree with you that there should be a tool to manipulate Javascript code in Blend. There mght be a tool, but I'm not aware of it, I'm still quite new to Expression. Good Luck

    Todd
    • Proposed as answer by toddms41 Monday, June 2, 2008 6:11 PM
    • Marked as answer by Lori DirksModerator Sunday, November 23, 2008 3:47 AM
    Monday, June 2, 2008 6:10 PM

All replies

  • WafflesFTW


    Anyone? I'm assuming that I have to create an event trigger to get the 
    animation started but I can't find anywhere to do this. This is a Silverlight 
    project. If I create a rectangle on the page and wanted to use this as a 
    button how would I set a trigger for that rectangle?
    
    C'mon Microsoft, this shouldn't be that difficult. 
    
    "WafflesFTW" wrote:
    
    > I've creted a new Silverlight app in the Dec. Blend 2 preview trial. The 
    > page.xaml file contains a blue circle. I then created a new storyboard and 
    > created keyframes where I've changed the appearance of the circle. If I scrub 
    > the timeline the animation works fine. However when I save the document and 
    > preview in a browser, the animation isn't doing anything. Doesn't a new 
    > Silverlight project create an event to start the animation on the page.load 
    > event? If not, how do I get this timeline to animate when viewing the HTML 
    > file?
    Saturday, February 23, 2008 12:33 AM
  • WafflesFTW


    Nevermind, I figured this one out on my own. 
    
    For anyone else having this problem, the answer is when you create a new 
    storyboard, by default the checkbox for "Create as a Resource" is checked - 
    which means your storyboard can only be controlled by code. 
    
    This option is checked by default, but it shouldn't be since Microsoft is 
    touting Blend as a Designers application, not a developer application. 
    
    "WafflesFTW" wrote:
    
    > Anyone? I'm assuming that I have to create an event trigger to get the 
    > animation started but I can't find anywhere to do this. This is a Silverlight 
    > project. If I create a rectangle on the page and wanted to use this as a 
    > button how would I set a trigger for that rectangle?
    > 
    > C'mon Microsoft, this shouldn't be that difficult. 
    > 
    > "WafflesFTW" wrote:
    > 
    > > I've creted a new Silverlight app in the Dec. Blend 2 preview trial. The 
    > > page.xaml file contains a blue circle. I then created a new storyboard and 
    > > created keyframes where I've changed the appearance of the circle. If I scrub 
    > > the timeline the animation works fine. However when I save the document and 
    > > preview in a browser, the animation isn't doing anything. Doesn't a new 
    > > Silverlight project create an event to start the animation on the page.load 
    > > event? If not, how do I get this timeline to animate when viewing the HTML 
    > > file?
    Saturday, February 23, 2008 12:34 AM
  • WikiDiscovery


    Thanks for making this post because I was having the same problem. In fact, I 
    still am. I unchecked the "Create as a Resource" checkbox and added some 
    animation (some Opacity and Fill). I can scub it in the timeline but still 
    nothing testing within a browser. Any more suggestions?
    
    "WafflesFTW" wrote:
    
    > Nevermind, I figured this one out on my own. 
    > 
    > For anyone else having this problem, the answer is when you create a new 
    > storyboard, by default the checkbox for "Create as a Resource" is checked - 
    > which means your storyboard can only be controlled by code. 
    > 
    > This option is checked by default, but it shouldn't be since Microsoft is 
    > touting Blend as a Designers application, not a developer application. 
    > 
    > "WafflesFTW" wrote:
    > 
    > > Anyone? I'm assuming that I have to create an event trigger to get the 
    > > animation started but I can't find anywhere to do this. This is a Silverlight 
    > > project. If I create a rectangle on the page and wanted to use this as a 
    > > button how would I set a trigger for that rectangle?
    > > 
    > > C'mon Microsoft, this shouldn't be that difficult. 
    > > 
    > > "WafflesFTW" wrote:
    > > 
    > > > I've creted a new Silverlight app in the Dec. Blend 2 preview trial. The 
    > > > page.xaml file contains a blue circle. I then created a new storyboard and 
    > > > created keyframes where I've changed the appearance of the circle. If I scrub 
    > > > the timeline the animation works fine. However when I save the document and 
    > > > preview in a browser, the animation isn't doing anything. Doesn't a new 
    > > > Silverlight project create an event to start the animation on the page.load 
    > > > event? If not, how do I get this timeline to animate when viewing the HTML 
    > > > file?
    Saturday, February 23, 2008 12:34 AM
  • You have to uncomment the event handler method in the Page.xaml.js page like this:

     // Sample event handler
     handleMouseDown: function(sender, eventArgs)
     {
      // The following line of code shows how to find an element by name and call a method on it.
      this.control.content.findName("Storyboard1").Begin(); <------ This line of code is uncommented**
     }


    Now when you run your project a left mouse button click will run your storyboard. Just make sure you pass in the correct storyboard name.  That is, if you changed your storyboard name to something else than : storyboard1", you'll have to change the name in this page. I agree with you that there should be a tool to manipulate Javascript code in Blend. There mght be a tool, but I'm not aware of it, I'm still quite new to Expression. Good Luck

    Todd
    • Proposed as answer by toddms41 Monday, June 2, 2008 6:11 PM
    • Marked as answer by Lori DirksModerator Sunday, November 23, 2008 3:47 AM
    Monday, June 2, 2008 6:10 PM