Panel + Image Issue

[rvk]

I found that GetMem's idea was a lot smoother when I implemented the move animation but rvk's did what I wanted it to do but was very gittery...problem with GetMems is it moves the whole panel and image when going down which minus the smoothness is what I was doing already.
I've attached the examples you made with my animation to give you an idea of what I wanted to begin with.

You wanted this ??

Code: Pascal  [Select][+][-]

1.     tpanel(moveobj).Left := round(leftfrom + (moveareax * i / 100));
2.     tpanel(moveobj).Top := round(topfrom + (moveareay * i / 100));
3.     Draw; // Add this in your source
4.     Repaint;

[DmedZ]

And here's rvk's.
From the sound if it, it looks like the gitter and flickering is a really hard thing to get rid of when dealing with Lazarus and object animation.

[rvk]

All I want though is something like rvk's with the smootheness of GetMems

In GetMems version you would at least need to add the Draw-call after (or before) your Paint.

(also... are those moveObj not TPanels instead of TImage like you cast?)

(In GetMems version)

Code: Pascal  [Select][+][-]

1.     tpanel(moveobj).Left := round(leftfrom + (moveareax * i / 100));
2.     tpanel(moveobj).Top := round(topfrom + (moveareay * i / 100));
3.     Draw; // Add this in your source
4.     Repaint;

I still had some jitter.

[balazsszekely]

@DmedZ

OMG! I completely misunderstood you. For this you don't need to move controls, just take a screenshot of the panel, then move the screenshot against the background. It should be much much faster.

[DmedZ]

Yeah they are TPanels thanks totally missed that I'll change it...
But yeah I see there's still jitter. is there no way to eliminate the jitter or better yet educate me on what's causing it coz it looks like the image behind it is refusing to stay still and moving up and down.

[rvk]

Yeah they are TPanels thanks totally missed that I'll change it...
But yeah I see there's still jitter. is there no way to eliminate the jitter or better yet educate me on what's causing it coz it looks like the image behind it is refusing to stay still and moving up and down.

I'm wondering if your loop is accurate enough.

For example if I do this it's much smoother:

Code: Pascal  [Select][+][-]

1. var
2.   stepX: Integer=1;
3.   stepY: Integer=1;
4. ...
5.   if leftTo < leftFrom then stepx := -1;
6.   if TopTo < TopFrom then stepy := -1;
7.   while (tpanel(moveobj).Left <> LeftTo) or (tpanel(moveobj).Top <> TopTo) do
8.   begin
9.     if (tpanel(moveobj).Left <> LeftTo) then
10.       tpanel(moveobj).Left := tpanel(moveobj).Left + stepx;
11.     if (tpanel(moveobj).Top <> TopTo) then
12.       tpanel(moveobj).Top := tpanel(moveobj).Top + stepy;
13.     Draw;
14.     Repaint;
15.   end;

(typed rough out of hand and needs some checking in case you go with bigger steps)

So you need to make sure the steps are all equal.

@GetMem: The panel would still need to move because the background behind the panel needs to move against the image. Or you would need to use transparent images/panels.

"then move the screenshot against the background."
How would you move a screenshot against a background? A screenshot is solid.
(Or did you have something else in mind?)

[balazsszekely]

@rvk
then move the screenshot against the background.

I mean redraw the screenshot(bmp) to the background and yes it would require transparent bitmaps.

PS: With BGRABitmap this shouldn't be to difficult. I saw many examples in this forum, when a moving object was simulated.
    DrawBackGround();
    DrawObject();
    ClearBackground();
and so on.

[balazsszekely]

@DmedZ

This is how you draw a transparent png to a jpg background without flickering. You should do something similar in your project(Tested with Lazarus/FPC trunk).
1. Download "bgrabitmap8.7.zip" from: http://sourceforge.net/projects/lazpaint/files/src/
2. Unzip to Component directory
3. Open then build bgrabitmappack.lpk
4. Run the project(Draw.zip attachment)

[rvk]

This is how you draw a transparent png to a jpg background without flickering. You should do something similar in your project(Tested with Lazarus/FPC trunk).

But as I see it, the top of the background image should be removed when there is no panel/image above it. The goal was to let a panel with images appear from the bottom and only inside that panel should you see the (non-movable to the main-form) background image.

Sort of "through a looking glass" panel.

You could slide a panel from the top over the background image... when your images go down, but then the question is... does the original underlying form have any components?

[DmedZ]

Hi guys thanks for all the work you put in but im still baffled

for the past couple days ive been trying to merge all the code together to get the desired effect that i want but it has left me more confused than anything, with what i see as 100 lines of code that does nothing lol so i just decided to give you a demonstration of the type of effect im looking for in the link below. @GetMem i tried the bunny program you gave me but it doesn't want to go up and down when i recode button1 it just stays in the same position or moves then goes back to "0" been scratching my head with this...

------> http://www.filedropper.com/so-preview <-------

[rvk]

Wait. That doesn't quite match up with your original question in your first post.
There you asked for a panel which showed you a background (IN the panel) which didn't scroll.

Here, in your preview, I'm seeing a "Glass"-panel (semi-transparent).
Was what we see in this preview exactly what you want?

Next question will be... is a Windows-only solution enough or do you need it on other platforms too?

[DmedZ]

Hi Rvk

Thats the effect that i wanted to go for originally like i said theres an image on the background i wanted to stay still
"I have a panel that moves up and down and on it an background image and when the panel moves I want the image to stay in the same place for sort of a parallax effect."

The effect i showed you in the preview is what i want to happen...

[rvk]

The effect i showed you in the preview is what i want to happen...

Ok, next I was thinking about something like using AlphaBlend for a panel.
See attached example blur.zip (and image).
The only problem I see with that is that the components (and images) on the panel are also blended.

Besides the blending of the images on the panel... is this similar to what you're after?

(Another option would be a complete transparent panel and this panel underneath and under that the form-image.)

[DmedZ]

I tried out blur.zip

but the panel isnt transparent for me for some reason. dont know if i should add anything? or if im missing something?

[rvk]

dont know if i should add anything? or if im missing something?

What is your OS? (and os-version)