Share via

Blend for Visual Studio 2015: Create a Customized Loader

  • Article

In this article we will learn how to design a loader which will look something like the following:

https://1.bp.blogspot.com/-Ze08P1iLgzw/Vryzr5-7sXI/AAAAAAAACzo/dFkfiDFwcVU/s1600/vF5GBvl5ww.gif

We'll be using Blend for Visual Studio 2015 to build this animation.

  1. Create a New Blank App(Universal Windows) Project and name it "Loader" or whatever you want.

    Before we actually start building the animation, I want you to go ahead and select a desktop screen from the top-left corner of the designer view,because we will be working and testing this animation on a desktop.

    https://2.bp.blogspot.com/-u1pCLcWIak8/VrxFO2iv-kI/AAAAAAAACwc/4F0uTavKW_g/s320/pic1.JPG

  2.  Now, we're all set. From the toolbar on the left side of the designer view, click and hold the rectangle icon and select ellipse form the pop-up.

    https://2.bp.blogspot.com/-fJcJpP_lT64/VrxFU_GLJuI/AAAAAAAACwg/IWCdP_a1utQ/s320/blog1.JPG

    Draw a circle by holding down the shift key and color it black from the properties window.

    https://4.bp.blogspot.com/-jOgQ4ewabWg/VrxGfZkWPJI/AAAAAAAACww/78IZqtx_7QQ/s320/blackBall1.JPG

  3. Now draw another circle, color it white and place it on the top of our black circle like below:

    https://3.bp.blogspot.com/-s9K7pEL54U0/VrxGvt1XeAI/AAAAAAAACw0/Z8WOPq5xGIM/s320/blackWhiteBall.JPG

    We want our inner circle to rotate around the center of our outer circle. This is really simple to achieve. As we know all shapes rotate around their center dot, and by moving that dot we can shift their center of rotation.

  4. Select the black circle, hold down Ctrl key and select the white circle. Now move the center dot of white circle exactly on top of the center dot of black circle.

    https://4.bp.blogspot.com/-fgy_KaIUbkg/VrxHNv7-H1I/AAAAAAAACxE/f8FYEPMRsv4/s1600/blog2.JPG

    https://3.bp.blogspot.com/-DSP_MPwb-C0/VrxHqrZt5kI/AAAAAAAACxQ/oCOQKFdHFZ0/s1600/blog3.JPG

    And we are done mingling with the ellipses for now.

  5. Go to the Objects and Timeline (View -> Objects and Timeline) window, click on "+" sign to create a storyboard as shown below.

    https://3.bp.blogspot.com/-MYWlVZ2c5u8/VrxdtAqfHhI/AAAAAAAACxk/f4mzgvv45jA/s320/blog5.JPG

    After creating a storyboard, you'll notice quite a bit of change in the interface.

    https://2.bp.blogspot.com/-89ThlAFYgCY/VryXhiHMqjI/AAAAAAAACyM/mNXHFtyeXvs/s1600/storyboardOpen.JPG

    Indicates the name of the open storyboard, if you have created a bunch of storyboards, you can switch between them from the drop down.

    The plus sign next to a diamond shape allows you to record a keyframe. In blend, keyframes are marker on timeline which indicates when a property change will occur.

  6. Click on the record keyframe button and drag the playhead (the yellow line) to the point in time where the animation should finish, in our case 1 sec.

    https://1.bp.blogspot.com/-UA-y5SdRy2Y/VryjfZNNlRI/AAAAAAAACyo/jiNdiGzU1Lg/s320/1o3tjYNPi9.gif

  7. After that, select your inner white circle and rotate it as shown below.

    https://3.bp.blogspot.com/-vMrzoF_DPFU/VrykSnTKQHI/AAAAAAAACyw/UBsTpQKpM1o/s1600/Htan6XlWrK.gif

    To check what we have recorded so far, go to the objects and timeline window and click on the green play button, above the playhead position timer.

  8. Now go to Assets -> Behaviors and click on the "Install 'Behaviours' NuGet Package.

    https://1.bp.blogspot.com/-ybPpQiosXeQ/VrynlzuUhGI/AAAAAAAACy8/Bs6NOTGmOaA/s320/behaviors.JPG

  9. After the installation, drag and drop the 'ControlStoryBoardAction' from behaviors window, on the Page in objects and timeline window.

    https://4.bp.blogspot.com/-QoUaAZMJD_A/VryrNj58akI/AAAAAAAACzI/WsmP8V2_J4Q/s1600/0MNP7aIeHY.gif 

  10. Click on the name of your storyboard, from the top left corner of the Objects and timeline window and from the properties window set the repeat behavior to forever.

  11. Finally select ControlStoryBoardAction and from properties window assign it's storyboard property the name of your storyboard.

    https://4.bp.blogspot.com/-mqliycUUJPo/VryvYq3gaSI/AAAAAAAACzU/7_11Mx39fKc/s1600/fianl.JPG

And now we are done, just hit the run button and enjoy looking at the animation that you have just created.

https://4.bp.blogspot.com/-9oHwLBLN4Jg/VryymODz6FI/AAAAAAAACzg/RkS0Aebz4nE/s320/6hPzu6JPWT.gif

In the gif above, the motion does not appear to be smooth but believe me it will be when you run the animation on your local machine.