most of you have seen the effect of the vista dialogs where the background of the form appears to move whe the form is moved. while difficult to describe, it is easy to see and even easier to implement for your forms.

obviously if you have vista, then you already have the animated background effect. so this post is aimed at those of us who have upgraded to and still use xp.

this effect is achieved with just 2 lines of code as you will see.

click on either of the images below to view it at full size and right click and "save picture as" somewhere - backgroung.jpg

  or  

this will be your background for your form.

so create a new form and drop an image control on it. make sure you click on it and "send to back" or in its init add the line

this.zorder(0)

to make sure it is always the rearmost item on your form. now you can either assign the above picture you downloaded as its picture property or do that in the form.init. i prefer the latter:

form::init

thisform.image1.picture = "background.jpg"

now to get this animation effect you will need only the following 2 lines of code: so open the form.moved and add this code exactly as shown:

with this.image1

     .left = -thisform.left

     .top = -thisform.top

endwith

and yes, that is -thisform.left (minus thisform.left) &  (minus thisform.top)

run the form and see that the form now has the background you set. now move the form and observe the background appears to move when the form is moved.

and there you have it - an animated background for your form a la vista with just 2 lines of code. you can also load the above background image into any paint application and change the colours to suit your theme or make up one of your own.

unfortunately because of the amount of junk mail being generated from the weblog i have switched off comments. please post your comments, if any, at www.foxite.com

10 Responses to Interesting Animated Background Effect for Forms

  • Andrzej says:

    neatly 🙂

  • Imran says:

    Good one

    Thanks for sharing.

  • Bernard:

    I guess you forgot some other settings, how is it that the image control covers the whole form? Do we set the Stretch property to something? How about the Anchor property?

    Nope I did not forget anything. The image, if you downloaded it, is 1280×1024 which is big enough for most screens. If needed it can be made bigger. Since the image object has its stretch property = CLIP(default), the image object stretches automatically when the image is loaded to display the whole image. Besides you cannot use the Anchor property for this. All you need is a large enough background image. And the two lines of code.

  • Cesar says:

    Simply splendid!
    Now tell me… hod did ya find this ???

    A-M-A-Z-I-N-G !!!!!!!!

    Thanks Cesar. Just fooling around with forms and images and it suddenly came to me. It surprised me too considering I don’t have vista, only XP. The effect was too good to keep to myself.

  • Mike Yearwood says:

    Nice demonstration of a very cool effect! You could do it in one line of code. 😉

    THIS.Image1.Move(-ThisForm.left,-ThisForm.Top)

    Very True and a nice one there.

    In order to completely encapsulate the functionality into a class, you could place this code in the image.init

    THIS.ZOrder(0)
    THIS.Move(0,0,THISFORM.Width, THISFORM.Height)
    THIS.Picture = “backgroundblue.jpg”
    BINDEVENT(THISFORM,”Moved”,THIS,”Move”)

    and these lines in the image.move

    LPARAMETERS m.nLeft, m.nTop, m.nWidth, m.nHeight
    RETURN DODEFAULT(-THISFORM.Left,-THISFORM.Top)

    The encapsulation (and bindevent of course) permits anyone to drop this image class on any form and have it work without customizing form code.

    Mike Yearwood

    Sure Mike and thanks for the excellent suggestion. It is actually the idea that I wanted to share, not any code implementation, hence there is no usual download except the images. As to its implementation, I leave that to whoever wants to use this idea however they want to implement it. Anyway you have given an implementation of the idea that anyone can use or adapt.

  • My mistake, I right-cliked on the little image and saved it as secondarythumb.aspx.jpg, did not read carefully, to first click to get the large image.

    No worries. Glad you got it to work.

  • Nice idea, I just added these lines in the form’s init:
    With This.image1
      .Width=SYSMETRIC(1)
      .Height=SYSMETRIC(2)
      .Stretch= 2
    Endwith

    This way I make sure the image on the back is always big enough for the _screen (I work on two 24″ monitors.)

    BL

    BL

    Your comments are much appreciated.

    I am almost sure, like Carlos, you did not read the post properly. The images I posted are 1280×1024 which are large enough for most monitors. Of course you have to go and get 2x 24″ monitors and confuse the issue.Smile [:)] It is better to resize the image than to stretch it as some effect is always lost and the strain on resources goes up. Also the image is not distorted by the stretch. But your point is also valid.

  • IN addition to my previous post, You should set the width of the image pbject to
    sysmetric(1)*2 and the height to sysmetric(2)*2
    As you move the picture in the opposite direction of the left and/or top of the form you should actually adjust the width and height of the image accordingly.

    Again I can only assume that you have downloaded the thumbnail image and not the real image that you can access just by clicking the thumbnail and “SaveAs” since there is no need for all this stretching at all with a large image.

  • Johan Ballet says:

    Damn you’re good, Bernard…

    Smile [:)]

  • meidy says:

    O Jeezzz … thank u !

    If you liked that then how about this:

    http://weblogs.foxite.com/bernardbout/archive/2008/11/07/7249.aspx

Leave a Reply

Your email address will not be published. Required fields are marked *