3D Animation with Repeating Behavior Using Blend4 and Design4



3D animations are becoming quite popular. Earlier only the artists of a few big companies had access to the software required to create a 3D animation movie. However, today more people are getting access to these software and more companies are using these for various reasons. These days even mobile phones with 3D display screens are being developed.

I have tried in this article to show the effect of 3D Animation using Microsoft Expression Design 4 and Microsoft Expression Blend 4.

Stepwise description is as under:

Step 1: First of all we start from Design, Open a new document in Microsoft Expression Design 4.

1.gif

Step 2: Draw a circle holding Alt+Sft keys to constrain the shape of the circle using Ellipse tool.

2.gif

Step 3: Fill it with stone99.png from Properties ->Fill -> More Swatches ->Categories ->Stone Textures->Warm White Marbles: Stone99.png and name it as "Circle1l".

3.gif

Step 4: Copy-paste a new circle through Edit -> Copy -> Paste and rename it Circle2.

4.gif

Step 5: Change the gradient of the Circle2 to a Radial gradient and use black and white color to get the following effects:

5.gif

Step 6:Select the Gradient transform tool apply to the Circle2 like this:

6.gif

Step 7: Set opacity to 87% and place the Circle2 on the Circle1. Select Both the Circles and Align them to vertical centers, i.e. Arrange ->Align -> Vertical Centers.

7.gif

8.gif

Again Align them to Horizontal Centers :

9.gif

Step 8: Set the opacity to 45% of Circle2 to get tune transparency.

10.gif

Step 9: Create iris as ovals and for this draw one oval and use copy-paste for the other so that you have two ovals of same size.

  • Fill the copied Oval with black color and resize it a little smaller than the Original.
  • Fill the Original one with RadialGradient like this :

    11.gif


Step 10: Now Select both the ovals and align them vertically and then horizontally as we have done before for the circles.

12.gif

Group both the ovals and rotate them and also name them as "Iris":

13.gif

Step 11: Place the Iris on the Circle1 like the way I am doing and group them (Circle1 & Iris) Arrange -> Group :

14.gif

Select the Circle2; go to the Menu bar and arrange the order to "Bring to Front"

15.gif

Again Select all the three (Circle1, Circle2 and Iris) and align them Horizontally and vertically like the following :

16.gif

Resize the Iris to fix proportion :

17.gif

Note : I will call it a ball in this Article.

Step 12: Now Animate it in Expression Blend. Open a new Project in Blend and name it "EyeBallAnimation", draw a Rectangle equal to the size of layout root and in the brushes section choose Radial gradient in Gradient brush.

18.gif

Copy the ball from the Design and paste it on the Rectangle in the Blend and resize it as desired:

19.gif

Rename Ellipse as "Shade" andViewbox as "Eyeball".

Step 13: Select the Rectangle and resize it to make oval like this:

20.gif
  • Draw one more rectangle on top of the first rectangle, set its fill to "Black" and order it to send to back.
  • Also do this for ball select all (Eyeball, shade) and order them to Bring to front. Object -> Order -> Bring to Front.

    21.gif

    22.gif

Step 14: Now Select an ellipse tool, fill it using Black color and decrease the opacity to 27%, place it in the bottom of the ball:

23.gif

Rename the ellipse as "Shadow" and order it to Send Backwards.

Step 15: Start the animation using storyboard; in the object and timeline pane click on the "+" button then a pop-up appears "Create Storyboard Resource"; name it "EyeballAnimation" and click Ok.

24.gif

Step 16: Select all and set to the initial position by clicking on Record Keyframe button:

25.gif

Step 17: Now first set the timeline of the "Shadow" to 2 seconds and bring it horizontly up to the end of the rectangle:

26.gif

Step 18: Similarly move the Eyeball and Shade one by one up to 2 seconds:

27.gif

28.gif

And finally the window should be like this :

29.gif

Add a roll to an eyeball and shift the angle of Shade:

30.gif
  • Screen shots of Running Window

    31.gif

Code to animate and make your animation continously running:

<Window.Resources>
<
Storyboard x:Key="EyeballAnimation">

<DoubleAnimationUsingKeyFramesRepeatBehavior="Forever"Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"Storyboard.TargetName="Shadow">
<
EasingDoubleKeyFrameKeyTime="0" Value="0"/>
<
EasingDoubleKeyFrameKeyTime="0:0:2" Value="601.5"/>
<
EasingDoubleKeyFrameKeyTime="0:0:2" Value="601.5"/>
<
EasingDoubleKeyFrameKeyTime="0:0:4" Value="0"/>
</
DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFramesRepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"Storyboard.TargetName="Eyeball">
<
EasingDoubleKeyFrameKeyTime="0" Value="0"/>
<
SplineDoubleKeyFrameKeyTime="0:0:2" Value="537"/>
<
EasingDoubleKeyFrameKeyTime="0:0:2" Value="537"/>
<
EasingDoubleKeyFrameKeyTime="0:0:4" Value="0"/>
</
DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFramesRepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"Storyboard.TargetName="ellipse">
<
EasingDoubleKeyFrameKeyTime="0:0:2" Value="1.5"/>
</
DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFramesRepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform)
(TransformGroup.Children)[3].(TranslateTransform.X)"
Storyboard.TargetName="Shade">
<
EasingDoubleKeyFrameKeyTime="0" Value="0"/>
<
SplineDoubleKeyFrameKeyTime="0:0:2" Value="537"/>
<
EasingDoubleKeyFrameKeyTime="0:0:2" Value="537"/>
<
EasingDoubleKeyFrameKeyTime="0:0:4" Value="0"/>
</
DoubleAnimationUsingKeyFrames>
<
DoubleAnimationUsingKeyFramesRepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"Storyboard.TargetName="Eyeball">
<
EasingDoubleKeyFrameKeyTime="0" Value="0"/>
<
SplineDoubleKeyFrameKeyTime="0:0:2" Value="720.632"/>
<
EasingDoubleKeyFrameKeyTime="0:0:2" Value="720.632"/>
<
EasingDoubleKeyFrameKeyTime="0:0:4" Value="0"/>
</
DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFramesRepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"Storyboard.TargetName="Shade">
<
EasingDoubleKeyFrameKeyTime="0" Value="0"/>
<
SplineDoubleKeyFrameKeyTime="0:0:2" Value="-48.969"/>
<
EasingDoubleKeyFrameKeyTime="0:0:2" Value="-48.969"/>
<
EasingDoubleKeyFrameKeyTime="0:0:4" Value="0"/>
</
DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFramesRepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"Storyboard.TargetName="Shadow">

<EasingDoubleKeyFrameKeyTime="0" Value="-1"/>
<
EasingDoubleKeyFrameKeyTime="0:0:2" Value="-1"/>
<
EasingDoubleKeyFrameKeyTime="0:0:2" Value="-1"/>
<
EasingDoubleKeyFrameKeyTime="0:0:4" Value="-1"/>
</
DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFramesRepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"Storyboard.TargetName="Eyeball">

<EasingDoubleKeyFrameKeyTime="0:0:2" Value="0"/>
<
EasingDoubleKeyFrameKeyTime="0:0:4" Value="0"/>
</
DoubleAnimationUsingKeyFrames>
<
DoubleAnimationUsingKeyFramesRepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"Storyboard.TargetName="Shade">

<EasingDoubleKeyFrameKeyTime="0:0:2" Value="0"/>
<
EasingDoubleKeyFrameKeyTime="0:0:4" Value="0"/>
</
DoubleAnimationUsingKeyFrames>
</
Storyboard>
</
Window.Resources>