Recording: Principles of Microsoft Silverlight Animation (T12F)

Presenter: Jeff Paries,SR. Experience Developer, Waggener Edstrom Worldwide. Author of Foundation Silverlight 2 Animation (Apress).

 

  • Session Topics
    • Storyboards, Animations and keyframes
    • Vectors
    • Frame-based Animations
    • Particle Systems
    • VR Objects
  • Where do Storyboards come from?, 2:00
    • Shows creating storyboard in Blend
    • <Storyboard x:Name=”StoryBoard1”/>
    • Are containers
      • Can contain many animations
      • Can be left empty (used as timers)
        • <Storyboard x:Name=”Move” Duration=”00:00:00”/>
    • Can also be crated in code
  • Where do animations come from?
    • Are placed inside Storyboard containers
    • Used to change object properties over time
    • Animation types correspond to data types:
      • Double (Width, Height, Left, Top, etc.)
      • Color (Fill, Stroke, etc.)
      • Point (for Path manipulation)
    • Can also be created with code
    • Each animation type has two variations
      • From/to
      • UsingKeyFrames
  • Where do keyframes code from?
    • Three types
      • Linear (linear movement between keyframes)
      • Spline (allows motion “easing”)
      • Discrete (holds an object until next keyframe)
    • Change type by right-clicking keyframe
      • “Ease in” or “Ease Out” = Spline
      • “Hold in” = Discrete
      • No direct way in Expression to build Linear
      • A spline keyframe with no easing applied is a linear keyframe, which is why Expression does not use them
  • Demo of keyframe types, 8:30
  • Demo of Storyboard animations
  • What’s a Vector?, 12:00
    • Are a key component of procedural animation
    • Describe direction and distance independent of time (very different from storyboard)
    • Vector movement is simple – for each unit of time that passes, add the vector components to the objects’s XY position
  • Vector Movement (1D)
  • Changing Vector Direction
  • Viewing related code snippets
  • Ball Drop example w/ real time gravity slider
  • What is frame-based animation?, 17:08
    • Imitates original “flipbook”techniques that have been used in animiatio for years
    • Accessible via:
      • Storyboards
      • Visual State Manager
      • Code
    • Complex frame-based animation (i.e. characters) requires planning
  • What’s a Sprite?, 18:05
    • a 2D or 3D image or animation that becomes part of a larger scene
    • First used in the mid-70’s, still in use
    • Methods of producing sprite content
      • Rotoscoping live video (blue screen)
      • Claymation
      • 3D Software
      • Vector artwork
  • Sprite with Discrete Keyframes, 19:15
    • A series of images that depict the desired action
    • Images are aligned
    • Translated at some interval with keyframes
  • Shown via Expression
  • Sprites with Visibility
    • Demo with Space Marine
    • Low load on CPU
  • Movement Flow Chart (Linear)
    • Goes directly from one move to another in a fixed order
    • Limits Options
  • Movement Flow Chart (Radial)
    • Less restrictive, but still limiting
  • Movement Flow Chart (Descending)
    • Works best, but more complex
  • Sprite Animation with Visual State Manager, 27:00
    • Pro: works well
    • Con: VSM does not support custom transitions yet
  • Particle Systems, 28:45
    • Often used to model “fuzzy” objects
      • Fire, smoke, explosions, water
  • Basic Model for Particle System
    • For each unit of time that passes:
      • New particles may be created
      • Old particles are conditionally removed
      • Existing particle positions are updated
  • Model in C#
    • position, age, remove, create, restart storyboard
  • Interesting Particle Systems
    • Randomize!
      • colors, scale, life spans, velocity
    • Use storyboards for secondary animation
    • Let the user modify the system
    • Use emitters
  • What do Particle emitters do?
    • define shape/area of system
      • Point
      • Rectangle (bounding box)
    • Can be animated
  • How to Implement an Emitter, 34:21
    • Name your emitter object (for accessing from code)
    • Generate particles based on object location
      • generate to layout root, not emitter
  • Comet example
  • Fountain example (water hose / fountain)
  • Silverlight VS (SLVR) Objects, 38:10
    • Like frame-based animations, but user controlled
    • Allows users to explore objects online
      • 360 degree view
      • product assembly
      • product packaging
      • time-lapse photography
  • VR Object Approaches, 39:58
    • “flipbook”
      • Load all images
      • flip forward or backward like a deck of cards
      • Why not ideal:
        • Managing images become cumbersome
        • Takes too long to set up new items
  • VR Object Approach
    • Single image translation
      • Load single image consisting of all frames
      • User controls the image translation
    • Better choice
      • single image
      • easy to setup
  • Types of VR Objects, 40:17
    • Single row (or plane)
    • Multi-row (or plane)
  • Getting VR Images
    • 3D Rendering program
    • Self-shot photography
    • Professional service like PhotoSpherix
      • use stable, specialized rigs
      • Shoot to precise requirements
      • Multiple planes
  • I have a lot of images – now what?, 42:26
    • Single plane = 10+ images in a single row
    • Multi-plane = 10+ images per row TIMES 5+ rows
    • Use a program like Adobe Photoshop or Irfanview, to create a single image
  • Contact Sheet
  • The SLVR Control, 44:35
    • can download from book site
    • Canvas / Image Control, MouseControl Rectangle, ActiveImage Image
  • Examples –
    • Bed object – single plane
    • Mini-cooper – multi-plane
  • Q&A
    • How to make smooth ticker?
      • Speed of system could be problem
      • Consider MaxFrameRate=30
    • Do you prefer animation in XAML or in code?
      • Prefers being more explicit in XAML
    • Suggestions for 4 frame animations
      • these techniques will work for those
    • Performance guidance
      • Depends
    • Advantage over browser timer vs. storyboard
      • Different ways to do this
      • Use based on what you find works
      • Prefers storyboard