Share via


Media overview

In Microsoft Expression Blend, you can add media files to your project such as images, audio, and video.

For instructions about how to add a media files to your project, see Add an image, audio, or video file to a project and Insert an image, audio, or video file into the active document.

Images

Expression Blend supports the most common types of image files such as BMP, GIF, ICO, JPEG, PNG, and TIFF. After you add an image file to your project, you can add it to the artboard by double-clicking the image file name under Files in the Project panel, or by setting the Source property of an existing image control to the name of the image file.

You can add images to the artboard for display. In Windows Presentation Foundation (WPF) and Microsoft Silverlight 2 projects, you can convert images to brush resources that you can apply to other objects. For more information, see Convert an image to a brush.

In WPF projects, you can also convert an image to a 3D object and animate it. For more information, see Convert a 2D image into 3D.

Cc295252.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gifBack to top

Audio

Expression Blend supports audio file types such AIF, AIFC, AIFF, ASF, AU, MID, MIDI, MP2, MP3, MPA, MPE, RMI, SND, WAV, WMA, WMD. These are all file formats that Windows Media Player 10 supports.

Note

Silverlight 1.0 and Silverlight 2 support only the MP3 and WMA file types.

After you add an audio file to your project, you can add it to the artboard by double-clicking the audio file name under Files in the Project panel, or by setting the Source property of an existing MediaElement control to the name of the audio file.

Cc295252.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gifBack to top

Video

Expression Blend supports video file types such as ASF, AVI, DVR-MS, IFO, M1V, MPEG, MPG, VOB, WM, and WMV. These are all file formats that Windows Media Player 10 supports.

Note

Silverlight 1.0 and Silverlight 2 support only the WMV file type.

You will not be able to insert other video file types, although you will be able to add them to your project by using a MediaElement control. You can add a MediaElement control from the AssetLibrary Cc295252.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png to your document and then modify its Source property to point to the nonrecognized media file type, to make sure that the video plays in your application at run time.

Warning

To work with media in Expression Blend, you must have Windows Media Player 10 installed on your computer. You can download Windows Media Player 10 from the Windows Media website.

Cc295252.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gifBack to top

Audio and video in WPF projects

After you insert an audio file or video clip into your document, you can control its playback using the media timeline that was created for it under Objects and Timeline. You can do the following things with a media timeline:

  • Modify the properties of a media element selected under Objects and Timeline. You can change properties such as volume, balance, and speed in the Media category of the Properties panel.

  • Manually move the timeline by selecting the Selection Cc295252.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.10).png tool in the toolbox, and then dragging the gray time bar. You can also right-click the shaded time bar to select the looping options. For more information, see the topics listed in Set the loop duration.

  • Copy and paste the media element under Objects and Timelines, and then move the various time bars to schedule the sound to occur at different times.

  • Configure a control such as a button to start and stop the media timeline. For an example, see Control media using triggers in a timeline.

  • Change the media timeline in the code-behind file just as you would change an animation timeline. For information, see the Storyboards Overview topic on MSDN. The following code is a very simple example in C# to show the minimal necessary lines of code to start a storyboard:

    using System.Windows.Media;
    using System.Windows.Media.Animation;
    // In a method...
    Storyboard audioResourceWav;
    audioResourceWav = (Storyboard)this.Resources["AudioResource_wav"];
    audioResourceWav.Begin(this);
    

Synchronizing media with other timelines

If a storyboard contains both media (video or audio) and animation timelines, the animation timelines might appear to begin before the media timeline if the media timeline is delayed because of loading time. You can use the XAML SlipBehavior attribute to start all the timelines at the same time. For instructions about how to synchronize timelines, see Synchronize the starting times of animation and media timelines.

Cc295252.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gifBack to top

Audio and video in Silverlight 1.0 projects

After you insert an audio file or video clip into your document, you can control its playback using event handlers. The media will automatically play when your application starts unless you change the behavior in event handlers in the code-behind file for the document. For an example, see Create a button that controls a storyboard in a Silverlight application.

Alternatively, you can use Microsoft Expression Encoder 2 to create a full-featured media player to display your media by using a Silverlight 1.0 template. For more information, see Modify a Silverlight template for Expression Encoder 2 in Expression Blend.

Cc295252.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gifBack to top

Audio and video in Silverlight 2 projects

After you insert an audio file or video clip into your document, you can control its runtime behavior (such as playback, download progress, buffering progress) using the properties and events of the Silverlight 2 MediaElement object that was created for it under Objects and Timeline. For more information, see MediaElement States (Silverlight.

Alternatively, you can use Microsoft Expression Encoder 2 with Service Pack 1 to create a full-featured media player to display your media by using a Silverlight 2 template. For more information, see Customize an Expression Encoder template for Silverlight 2.

Cc295252.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gifBack to top

See also

Concepts

Import 3D content

Convert a 2D image into 3D

Convert an image to a brush