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
Hopeyou 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.