I've posted the CreateFromXAML and Timer sample from my Mix talk.  You can run the sample here and get the source here.  The sample uses the downloader component to retrieve a ZIP archive that contains a set of XAML files.  To do this, in the onLoad event, I kick-off a download of the ZIP archive:

 

  function onLoad(sender, args, root) {       

    // Download big file sender, "assets.zip"

    download(sender, "assets.zip");

  }

 

  function download(host, file) {

    var dl = host.createObject("downloader");

    dl.addEventListener("completed", downloadComplete);

    dl.open("get", file, true);

    dl.send();

  }     

 

This download is asynchronous and calls the downloadComplete event when finished.  In this event I then use CreateFromXAML to instance the XAML files and then add them to the main Canvas.  I also add an animation timer but talk about that in more detail in the next paragraph:

 

  function downloadComplete(sender, args) {

   

    var main = sender.findName("main");

 

    cfx(main, sender.getResponseText("Camera.xaml"));

    cfx(main, sender.getResponseText("Coffee.xaml"));

    cfx(main, sender.getResponseText("Glasses.xaml"));

    cfx(main, sender.getResponseText("Grass3.xaml"));

    cfx(main, sender.getResponseText("Landscape.xaml"));

    cfx(main, sender.getResponseText("Popcan.xaml"));

   

    // Show first

    main.children.getItem($idx).visibility = "Visible";

    

    // Start timer

    var timer = sender.findName("timer");

    timer.addEventListener("completed", timerCompleted);

    timer.begin();

  }

 

Finally, I setup an animation timer to cycle through the newly created instances.  The timer is creating by defining a named "dummy" animation in the main XAML file.  The key part here is the “Duration” – this defines the amount of time before the timer fires it’s completed event (e.g. times out).  I need to target some object for this animation and in this case I created a dummy Rectangle named “_timer” (shown below).  In the sample below, I’ve set the Duration to 2 seconds:

 

  <!-- Animation Timer -->

  <Canvas.Resources>

    <Storyboard x:Name="timer">

      <DoubleAnimation Duration="00:00:2"/>

    </Storyboard>

  </Canvas.Resources>

 

For the animation target, I createda dummy Rectangle named "_timer" and hide it from the scene by setting it's Opacity to 0:

 

  <Rectangle x:Name="_timer" Opacity="0"/>

 

To start the timer in JavaScript, I use FindName to retrieve the Storyboard and call Begin().  After 2 seconds (the duration), this will fire the “completed” event (timerCompleted):

 

    // Start timer

    var timer = sender.findName("timer");

    timer.addEventListener("completed", timerCompleted);

    timer.begin();

 

In the timerCompleted event, I do the work to cycle through the previously added instances and then re-start the timer:

 

    function timerCompleted(sender, args) {

      var main = sender.findName("main");

     

      // Hide current

      main.children.getItem($idx).visibility = "Hidden";

     

      $idx++;

      if ($idx >= main.children.count) {

        $idx = 0;

      }

     

      // Show next

      main.children.getItem($idx).visibility = "Visible";

     

      // Restart the timer

      sender.begin();

    }

 

Here's a less than fascinating screen shot:

 

CreateFromXAML sample