Topic: Image animation

Hello everyone, I hope you are all well and thank you for reading my request.
I would like to understand if it would be possible to create an animation for an image. Let me explain better: I would like for when a form is opened, an image enters from above or from the side. Will this be possible?
Thank you all.

Re: Image animation

Ciao Fabio,
Come ti vanno le cose?   Spero che tu e la famiglia stiate bene.
I use a few animation options - they are all for various 'log in' screens but they could also be used any where in your program.
Examples 1 and 2 are in the attachment with this message and examples 3 and 4 are in the next message (they were too large to zip into a single attachment!).
All 4 examples also have an animated .gif on the main screen - perhaps that's another option.
Regards,
Derek.

Post's attachments

Attachment icon animations 1.zip 1.2 mb, 219 downloads since 2024-05-26 

Re: Image animation

Hello Again,
Here's the second attachment with examples 3 and 4..
Derek.

Post's attachments

Attachment icon animations 2.zip 1.05 mb, 84 downloads since 2024-05-26 

Re: Image animation

Hi Derek and Fabio.

Derek, try this.
Comments in the script.
Likewise for other examples where there is a need.

Post's attachments

Attachment icon enlarging-m.zip 495.12 kb, 94 downloads since 2024-05-26 

Re: Image animation

Hi Derek,
I'm fine, the family is fine, thank you very much. I hope you and yours are well too..
Thank you very much for the projects that I will now study to understand how to do.
In the meantime, I'll explain what the purpose is: my son finishes middle school this year. Here in Italy, at the end of middle school you have to take an exam and present a small thesis. Usually, during the exam, the thesis is shown in Power Point.
I wanted to make him make a good impression by creating a program with animations doing something original.

Re: Image animation

in boccalupo per la tesi Fabio!

Domebil

Re: Image animation

Ciao Domenico. Grazie!!!

8 (edited by reteinformatica 2024-05-27 16:17:16)

Re: Image animation

Good evening Derek and Domenico,
based on Derek's examples, always very well done, I tried to start with this program. I more or less understood the code but obviously there is always something that doesn't work for me.
My intent was to have the first window open with a fade effect, fix the window for a certain time and then make it disappear again with a fade effect. In Derek's example it works great, but my project has the following problems:

  • the window does not open in the center

  • the window does not appear with a fade effect

  • some controls inside the window are dancing

I've tried a bit to change the loop values but the problems remain.
I'm attaching this weird stuff I made.
A thousand thanks!

Post's attachments

Attachment icon Tesina.zip 414.9 kb, 45 downloads since 2024-05-27 

Re: Image animation

Ciao Fabio,
There are two extra steps you need to complete when using an 'introduction' screen
1.  You need to set the forrm's position to be 'poscreencentre' (for all types of 'introduction' screen)
2.  Set the 'alphablend' property to 'true' (only when using the 'fade' effect).
Have a look at the screen shot (fabio fading.jpg) in the attachment.
I also reduced the size of your 'introduction' screen - when it's too large, you can sometimes have a problem with buffering (although yours seemed fine when I first tried it).
Regards,
Derek.

Post's attachments

Attachment icon Tesina Fixed.zip 477.65 kb, 66 downloads since 2024-05-27 

10 (edited by reteinformatica 2024-05-27 18:44:31)

Re: Image animation

Hi Derek, as always I don't know how to thank you.
I thought that to make the fade effect slower I needed to increase the number of cycles, for example like this:

for vi := 5 to 400 do

Instead this opens the window for me twice. Instead I tried increasing the value of the sleep instruction and by doing so the effect slows down.
I didn't understand the mechanism but that's how it is.
Thanks Derek!

Re: Image animation

Hi,
Strictly speaking, the line of code would usually be

for vi := 0 to 255

This represents the range of 'fade' that you can set with the 'autoblend' property (with 0 being invisible and 255 being fully visible).
In my code, I usually use a range from 5 to 240 to avoid delays at the start and end of the 'fade' effect;  below 5 and above 240 and you don't really notice much difference.
The 'sleep(nn) code determines how long the program pauses before starting the next cycle - you just experiment with the settings until the animation is how you like it.
Regards
Derek.

Re: Image animation

Thanks Derek for the always very clear explanation.
I created an enlargement effect on a "label" and I managed to both create the effect and center it in the window. I consider it, for me, a great success, thanks to your examples I was able to understand the system.

Re: Image animation

Hi everyone,
Thanks to Derek's precious suggestions I managed to do something, at least what I wanted the program to do, at least for the initial part.
Then I got stuck on a problem that I can't solve: in a window I wanted labels to scroll, like the credits of a film. Let's say that the label scrolls but I don't see it scroll, that is, when the window opens the label is already in the position indicated without seeing the scrolling effect.
To do this I wrote:

procedure fmrRingraziamenti_OnShow (Sender: TObject; Action: string);
var vi: integer;

begin
  for vi := 1 to 100 do
    begin
      fmrRingraziamenti.lbFabio.top := fmrRingraziamenti.lbFabio.top -1;
      application.processmessages;
      sleep(10);
    end;
end;

The window is called "frmThanks". To open it I put a temporary button (Button1) in "frmSummary" which is also the opening form of the program.
Thanks to all.

Post's attachments

Attachment icon Tesina.zip 518.24 kb, 43 downloads since 2024-05-30 

14 (edited by sparrow 2024-05-30 19:13:36)

Re: Image animation

Hi Fabio,

Unfortunately it doesn't work that way.

The first way is to call the form manually using the button's onClick event by disabling the automatic opening of the form in the button properties.

procedure frmSommario_Button1_OnClick (Sender: TObject; var Cancel: boolean);
var vi: integer;

begin
fmrRingraziamenti.Show;
  for vi := 1 to 100 do
    begin
      fmrRingraziamenti.lbFabio.top := fmrRingraziamenti.lbFabio.top -1;
      application.processmessages;
      sleep(10);
    end;
end;

The second method is more difficult to implement. In the mode of automatically opening the form in the OnShow event, trigger your effects on a timer with a delay of 200-500 ms. in order for the form to be displayed first and with a delay the effects. Which is the same as in the first method, but more complicated.


P.S. And don't forget to use "formname".doublebuffered := true; // enable doublebuffering Pay attention to Derek's example.

Re: Image animation

Hi sparrow,
A thousand thanks! So it does what I liked it done. As you suggested I also added:

frmSummary.doublebuffered := true;

In Derek's example I read the comment "stop the gif from flickering".
There isn't a gif in mine, what do I need this instruction for? It's a couriosity.
Thank you!

Re: Image animation

Flickering is possible both when redrawing gifs and when quickly redrawing objects on the screen.

Description

When DoubleBuffered is false, the windowed control paints itself directly to the window. When DoubleBuffered is true, the windowed control paints itself to an in-memory bitmap that is then used to paint the window. Double buffering reduces the amount of flicker when the control repaints, but is more memory intensive.

Re: Image animation

I understood, thanks!
In the meantime I tried to add a second label to scroll after the first. In this case the second does not slide but starts already fixed. As you can see from the project that I am attaching again.

Post's attachments

Attachment icon Tesina.zip 518.59 kb, 37 downloads since 2024-05-30 

Re: Image animation

Be careful when writing.


procedure frmSommario_Button1_OnClick (Sender: TObject; var Cancel: boolean);
var vi: integer;

begin
  frmRingraziamenti.doublebuffered := true;                   // ADD
frmRingraziamenti.Show;
  for vi := 1 to 180 do
    begin
      frmRingraziamenti.lbFabio.top := frmRingraziamenti.lbFabio.top -1;
      application.processmessages;
      sleep(10);
    end;

//frmRingraziamenti.lbFabio.hide;                                    // Fixed bug
frmRingraziamenti.lbFabio.Visible := false;
sleep(2);
//frmRingraziamenti.lbProfessori.show;                                // Fixed bug
frmRingraziamenti.lbProfessori.Visible := true;

  for vi := 1 to 180 do
   begin
//     frmRingraziamenti.lbProfessori.top := frmRingraziamenti.lbFabio.top -1;
     frmRingraziamenti.lbProfessori.top := frmRingraziamenti.lbProfessori.top -1;   // Fixed bug
     application.processmessages;
     sleep(10);
   end;
end;

Re: Image animation

Oh, what a simple mistake! Thank you so much sparrow, without you all on the forum I wouldn't know what to do.

Re: Image animation

Ciao Fabio, Hi Sparrow,
I was wondering if you could make the 'thankyou' form a bit simpler by placing the labels outside of the panel and then just have them scrolling up - that way you don't need to make them visible / invisible.  And rather than going through the counter twice, just increase the number of cycles.
Just a thought (and I like anything that keeps the script compact!).
Give my regards to Tommaso big_smile.
Derek.
n.b. - I may have messed your timings up a bit - I was in a rush and couldn't wait for the animations to finish roll  Sorry

Post's attachments

Attachment icon Tesina3.zip 532.05 kb, 55 downloads since 2024-05-30 

21 (edited by domebil 2024-05-31 06:12:01)

Re: Image animation

Ciao fabio to messo qualche icona per i pulsanti

Post's attachments

Attachment icon tesina2.rar 1.07 mb, 61 downloads since 2024-05-31 

Domebil

Re: Image animation

Hi Derek, Domenico, Fabio

I've tweaked and simplified the animation calculations a bit in Derek's example for "frmIntro".
Reduced flicker, improved placement... . Comments in the script.

Post's attachments

Attachment icon Tesina3-m.zip 521.33 kb, 53 downloads since 2024-05-31 

23 (edited by reteinformatica 2024-05-31 10:19:46)

Re: Image animation

Hi Derek, Domenico and Sparrow,
I thank you immensely for all the suggestions and corrections which are always very welcome and which I will apply with great dedication.
Thanks derek for the idea of the titles remaining fixed. Indeed, without making them disappear, they always remain visible and can be read better. And for regars to Tommaso (Tommy).
Grazie Domenico per le icone, un tocco originale.
Thanks sparrow for the flicker reduction, that was another thing I would have asked for.

24 (edited by reteinformatica 2024-05-31 14:36:14)

Re: Image animation

Hi everyone, I'm here again asking for help.
in the Italian subject window, you can get there by clicking on the "Avanti" button at the bottom right of the main window (frmSommario), I wanted to set the title with the letters that entered one at a time according to Derek's second (staccato) project.
I basically wrote:

procedure frmItaliano_OnShow (Sender: TObject; Action: string);
var  vi: integer;
frmItaliano.doublebuffered := true;
begin
  for vi:= 0 to frmItaliano.ComponentCount -1 do
    begin
      if frmItaliano.components[vi] is tdblabel then tdblabel(frmItaliano.components[vi]).styleelements := 0;
      application.processmessages;
      Tlabel(frmItaliano.Components[vi]).visible := true;
      sleep(400);
    end;
  application.processmessages;
end;

As always derek's one works, mine not, yet I seem to have written everything correctly but this is clearly not the case.

Post's attachments

Attachment icon Tesina.zip 519.61 kb, 33 downloads since 2024-05-31 

Re: Image animation

Hi Fabio,
Basically, your version does work but you are calling from the wrong place.
This is the same issue that Sparrow identified and fixed for you earlier when you were trying to run the animation on frmringraziamenti
If you try and 'pull it' by using the standard 'onshow' event,  it runs the animation before actually showing frmitaliano;  you can tell this because of the delay (8 letters (I T A L I A N O x 400 milliseconds) ) between clicking the 'avanti' button and frmitaliano appearing.
Instead, you need to 'push it' from frmsommario.bavanti - that way, you can manually force frmitaliano to show before running the animation - look at the position of the instruction 'frmitaliano.show in the script (line 7 which is BEFORE the instructions to run the animation).
Hope that makes sense,
One other thing to note (it's not that important) but if you are running a lot of animations, you can usually just declare the counter (vi : integer) once at the start of your script as a 'global variable' rather than defining it as a 'local variable' within every procedure.
Derek.

Post's attachments

Attachment icon Tesina.zip 533.31 kb, 55 downloads since 2024-05-31