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 :
- Map the video into the 3D plane using a visual brush and then animate it.
- 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
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
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
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(
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
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.