Creating 3D plane animated video in Expression Blend

In my previous article "How to create FlowDocuments in Expression Blend" you have learned how to add images and text in Expression Blend using the FlowDocument control. In this article I will explain how to add animation and videos in a 3D plane using Expression Blend. It is really interesting to work with. In short we are going to create videos in a 3D plane and animate them such that when you click on any 3D plane that video resizes to the size of the window.

Begin working like this:

For carrying out all this first we need to :

1. Map the video into the 3D plane using a  visual brush and then animate it.
2. Create the animation that increases the size of the video to fill the window when you click on the video.

Now Lets Start.

MAPPING THE VIDEO INTO THE 3D PLANE AND ANIMATING IT

Step 1 : First we need to create a visual brush and then mapping it into the 3D plane.

Step 2 : Than we need to create a 3D image, For this add an image into the project. This can be done either by dragging image from the storage directly to the project or goto Project--> add Existing Item --> select image and drag it where necessary. To add videos(.MP4 format preferred) follow the same procedure as for image.

Step 3 : After inserting image into the artboard select the image and resize it by selection tool. after the image has been resized, Now we have to change the image to 3D for this keep the image selected goto
Tools-->Make image 3D.

Step 4 : Making the image 3D do not really make it appear 3D infact to bring the real 3D effect select the Camera Orbit Tool from the tool box and drag it to the image now you can resize the image in 3D by holding the Alt key and moving the camera orbit tool. now the image is turned to 3D.

Step 5 : Now we have to add video to the project, follow the step 2 and drag the video to the artboard. Now to resize the video goto Tools -->Make Brush Resource.

Step 6 : Now the next mission is changing the video into 3D Plane and to do this select the video, then goto the OBJECTS AND TIMELINE panel -->Viewport3D-->ModelContainer-->Model, Now goto property window-->Materials -->click on the white space -->In Texture Brush select-->Brush Resources button and choose the visual brush that you created( select video).

Step 7 : Now we have to animate the video that we have added to our project in 3D plane. Now goto the OBJECTS AND TIMELINE panel click on th e "+" button to add new timeline, then select the viewport3D and drag the timeline to 0 second point to start recording the keyframe. Now you can change the orientation of the video the way you want it to animate and this is done by selecting the camera orbit tool and dragging the timeline to next and next position. Thats all for animating the video. One thing can be noted that animating video is similar to animating images in Blend as done in previous article

You can add more videos and animate them in the same way as we have done from step 1 to step 7.

Now Triggering the 3D Plane to resize the video on clicking it.

After achieving the mission of mapping video in the 3D plane now its time to give it a functional look, i.e. suppose there are more than one videos available to you then in order to watch only the video in the full screen mode that has been clicked.

To make this work follow the steps below:

Step 1 : Select the Viewport3D of the video you want to resize and Press "+" button to add new timeline for this event name it whatever you like to.

Step 2 : Now keeping the Viewport3D selected drag the timeline to 1second position and then resize the viewport3D in the design part to the size you wish it to run at. Also turn off the recording mode now by clicking the red button at the top left corner of the design part.

Step 3 : Now its time to create trigger to play the timeline created so far. Goto the trigger panel and click Window.Loaded,select Viewport3D instead of window and MouseLeftUp instead of Loaded.

Step 4 : Chose the name of the Timeline/Storyboard in which triggering is to be applied in the the pane below and set it to BEGIN and set other Storyboard to Stop that animate the video.

Final Output Appears like this:

Hope it was helpful for you to understand the ease of designing in Expression Blend. Keep waitng for next articles of creating sophisticated designs and that too without the pain of long long codings.