Blinking image in Expression Blend

Blinking Image application in Expression blend

Hi guys, In this article I'll will demonstrating the simplest and most interesting application in expression blend and that too without hectic coding. In this article you will see that two images come and go one by one in the window and this produces a blinking effect. It is not very big task doing this thing in blend not even any other task, the only thing is as far as you explore your vision and think you can disguise it into a wonderful and interactive application.

So to start with this application all you need to do is follow the steps stated below :

Step 1 : Start Expression Blend 4 and select the WPF application and name it Blinking image.

Step 2 : Now go to toolbox and select two wrap panels. For this either select from the toolbox and if it is not present there go to assets library then type "panel" in the search box and then select the wrap panel and drag it on the artboard.

Step 3 : After selecting the panel, name them from the property window as panel1 and panel2.

Step 4 : Select the Label in the same way as you selected panel above and name it as lbl in the same way as you have named the panels above.

Step 5 : Now drag and set the two panels on the artboard such that they overlap each other.Then select the panel1 from the object and timeline palette and drag any image into the panel1. this is done in two ways either you select the image from the storage drive and drag it on the panel or copy the image and first paste it in the solution explorer under project window and then, on selecting the panel from the object and timeline window , right click on the image and select insert. The image will be inserted into the panel1.

Step 6 : Similarly add image to the panel2 also. You can add gradient to the artboard to make the application look more lively.

Step 7 : Now we start working with the main feature of the application i.e. adding the blinking effect. For this go to the object and timeline palette and click the "+" sign to add a new storyboard to the application. This will create a recording window in the design area. Here name the Label as image 1.

Step 8 : Now set the timeline to the zero second point and then press the recoding button if it is not active

Step 9 : Now turn off the recording by pressing the red button at the top of the design window and at the same time set the timeline to the 2 seconds mark.

After this turn on the recording and goto the property window while selecting the panel and under the appearance property select visible = hidden. Select the Label and change its gradient from the gradient brush and name it as image 2.

Step 10 : Now again drag the timeline to the 3 seconds mark and again go to the property window while selecting the panel and under the appearance property select visible = hidden, this time we are hiding the panel2. Select the Label and change its gradient from the gradient brush and name it as image 1.

Step 11 : Repeat the same process for at least 5 to 10 seconds in order to bring consistency in the application for long time. Then right click the recording path and select edit repeat count and select it to infinity. This property allows application to keep blinking effect until the application is closed.

Output

Hope you enjoyed the application. You can create much more than this in Expression Blend. Do post your views to help us bring best of the best for you.