midora

Animated Images

Recommended Posts

The simplest solution I can imagine in the moment is that we add something like sprites.

 

So you may mark a layer as a named sprite "// sprite=NAME" which will not be added immediatly as a frame (like "// background").

And then later add the sprite to the normal layer command with "// add=NAME,X,Y;" where X,Y is optional.

 

As an example:

 

L8 // add=VUBack; add=VUNeedle3; add=VUBack,100,0; add=VUNeedle3,100,0;

L7 // add=VUBack; add=VUNeedle2; add=VUBack,100,0; add=VUNeedle2,100,0;

L6 // add=VUBack; add=VUNeedle1; add=VUBack,100,0; add=VUNeedle1,100,0;

L5 // sprite=VUNeedle3

L4 // sprite=VUNeedle2

L3 // sprite=VUNeedle1

L2 // sprite=VUBack

L1 // background

 

This would then result in a three frame animation with two VU-meters on the background.

 

The grouping solution - I had in mind first - is too complex.

Share this post


Link to post
Share on other sites

I hope you don't mind @Gooney, but I played a bit with Midora's steps and came up with this:

 

W4kvkty.gif

 

And these were the steps:

 

- EDIT - Removed steps as requested by Midora - see his comment below!

 

I can't get enough of this Plugin - I have to confess I played with it all weekend :D .

Edited by Pixey

Share this post


Link to post
Share on other sites

@pixey: Great that there is some fun with this.

 

If I'm looking to your layer names in the last example you posted then I should warn you and others.

It's not a good idea to add any text after the command lead-in sequence //.

In the moment unknown commands are ignored but this may change in the future any you may get errors during save.

If you like to add some text to the layer name then do it in front of the //.

 

Maybe you should remove the image of the layer stack you used in the last example. Because the "Sprite=NAME" command will be used in the future and the image may confuse people.

Share this post


Link to post
Share on other sites

OK - because I guess this makes your work really easier - here is the sprites update.

 

ImAGIF.FileType 0.8 (30.3.2015)
- Removes duplicates (frames with the same content as the previous one)
  by removing the frame and incrementing the duration of the previous frame.
- Because some image hosters deliver html code in a gif file instead of an
  image the filetype throws now a more descriptive exception on load of a GIF:
  "File contains an HTML document but not a GIF image"
- Added two commands which allow to animate sprites on frames
  "sprite=NAME" defines the layer content as a sprite with the name NAME.
  A sprite layer can be drawn at any position in the layer stack.
  Sprite names are not case-sensitive and must be unique. Don't use
  whitespace or any delimiters in the names.
  "draw=NAME,X,Y" draws the sprite NAME to the frame generated from the current
  layer. X and Y are optional and define how much pixels the sprite should be
  moved (default: no move). Multiple 'draw' commands are allowed in a layer name.
  The sprite layer should be transparent because the content will be blended
  on top of the current frame.
 

AnimateIt.Effect 0.3 (30.3.2015)
- The player buttons are no longer visible if the image is no animation
- The tool ignores the file extension and determines the filetype from the
  signature stored in the image data.
 

Share this post


Link to post
Share on other sites

I may make one also, but it will be more complex and will involve multiple programs...

 

That would be great but I guess it is a lot of work. Maybe an introduction would be a good first step.

Share this post


Link to post
Share on other sites

Well I decided to try my method of adjusting the position of both the VU`s and the equalizer and it worked!

Took a bit of time to add a needle and adjust it on every layer ( 15 in all) but I think it was worth it.

What do you think? Only thing missing is music but that`s a whole new level I have no idea about.

Amplifier%20with%20VU%20200ms.gif

Edited by Goonfella
  • Upvote 1

Share this post


Link to post
Share on other sites

Nice animation on the amp. You learned very quickly. You can add music to that animation, but you'll have to export as a video file.

I could do it for you, which Queen song do you want? It will only take a couple of minutes to create.

Edited by racerx

Share this post


Link to post
Share on other sites

Thanks for the offer racerx, much appreciated. How about We Are The Champions?
 
After having another look at the graphic equalizer it does seem a bit jumpy. I think I just need to refine the alignment of the layers a bit. Also if I can I want to slow it down a little. I was just so pleased that it was all working that I just saved and posted it straight away. It might be worth waiting for the final version before adding music. No need to waste your time on this one. I want it to look as good as I can get it for Queen.  :)  :music:  :music:

 

Refinements completed. Slowed it down to 200ms and sorted out the layers. At first I thought slowing it down meant reducing the ms so I made it 60. Boy was that fast music! :lol:

Edited by Goonfella

Share this post


Link to post
Share on other sites

The Union - An example about how to use sprites in a Paint.NET file to create an animation.

 

Sprites are objects on a transparent background you can use if you need the objects multiple times in an animation.

 

This is the story of two balls bouncing in and union in the center. Suddenly the ground opens and the balls disappear.

 

Here is the .pdn file used to create the following simple animation: Load the file and open it to see the steps in creating the animation by inspecting the layer names from bottom to top.

 

The%20Union%20-%20Sprite%20Example.gif

 

First we create a sprite which contains the ball. Easy today by filling a square with red and using Shape3d plugin to create the 3d effect. We place the ball in the top-left corner of the first layer which makes it easier later to move the position. The name of the layer indicates that this layer will be used as a sprite: "// sprite=ball"

 

Second we create a background layer. Just a horizontal line to define the ground. The layername "// background" tells that this layer will be used as background for all following frames we are creating.

 

Next layers describe the frames which let the balls bouncing in. The layer content is empty, we do not use it in this example. Each layer means for the encoder to create a new frame in the animation. The name of the layer tells you which sprite should be drawn on top of the frame. I.e. "// draw=ball,-20,20; draw=ball,380,20" In this case there is just one sprite but we are drawing it at two different locations on top of the frame.

 

After the union of the balls in the center the remaining ball bounces up and down 3 times. In the last down phase we are changing the background of each frame to open the ground so that the ball can escape.

 

Last step to do is to add a foreground layer. There is only on in the whole animation so we place it as topmost one in the layer stack. The name is "// foreground".

 

Wait there is one layer left immediately in front of the foreground layer. It is named "// skip". This is just a helper layer used to mark the center of the animation. It will not be part of the animation because it is marked with "// skip".

 

Remember the visibility state of the layers is not used to create the frames. You just use it to control what is visible in the main window of Paint.NET.

 

Keep in mind that you should always keep the .pdn file of your animation and just export to .gif. It is not possible to recreate the sprites later from the .gif file.

 

So hope this helps to get an idea about sprites.

 

Share this post


Link to post
Share on other sites

Argh!  Midora - you are brilliant and obviously did not flunk math :D .  Now I will have to try to get MY head around all these (60) layers and to work out some sequences too. 

 

I will be Baaaaaaaack - I hope ................

 

computer-22.gif

Share this post


Link to post
Share on other sites

You will be back.

 

I can imagine already a swarm of birdies or something completely different :-)

 

The physic is not quite good in the animation, may do an extended version later. Still I prefer stories and not too perfect images.

 

A future version may allow to define the origin point of the sprite. This would allow you to draw a help line or curve in a "// skip" layer. By pointing with the mouse to a point of the line you could get easily the draw coordinates of a sprite.

"// Draw" may also allow to stretch, rotate and change the opacity of the sprite..

Edited by midora

Share this post


Link to post
Share on other sites

I will look forward to any new versions, and instructions of course will be most helpful.

 

Meanwhile ............ a little picture for Easter.  100% PDN including your Plugin!

 

1.7_zpsuwkpivr1.gif

  • Upvote 1

Share this post


Link to post
Share on other sites

Meanwhile ............ a little picture for Easter.  100% PDN including your lPugin!

 

Happy Easter Pixey. The animation is nice but the banding is horrible.

You will get a version which supports dithering tomorrow...

Share this post


Link to post
Share on other sites

ImAGIF.FileType 0.9 (2.4.2015)
- Added "Duplicate=N,M" command, which duplicates the last N frames sequence
  M times. M is optional with a default value of 1.
- Added optional origin coordinates to the sprite command. "sprite=NAME,X,Y"
- Added "DitherLevel=N" 0 <= N <= 8, default is 7.
  Dithering is used in low color filetypes to avoid banding of colors.
  The advantage of dithering is a better quality of the final image.
  The disadvantage is that the file size may increase.
- Changed the definition of background and foreground command a bit to allow
  to switch off usage of a background and foreground and not just to replace it.
- Declared the command names background, foreground, default, skip, and sprite
  as depreciated. The new names are:
  UseAsBackground, UseAsForeground, UseAsDefault, UseAsNote, UseAsSprite
  The prefix UseAs indicates that the layer will not create a new frame.
- N fps (frames per second) is allowed now to define the duration.
 

Dithering helps to avoid banding which appears if you are reducing the amount of colors in images.

Assume there is a gradient made of hundreds of different blue colors in the original image. If you reduce the maximum amount of blue colors in the generated image to maybe 20 and map the original color to this palette then you will see large areas using the same color, To avoid this dithering adds some lighter or darker pixels in these areas using a process called error diffusion. The human eye will then interpret these areas as more homogeneous. The DitherLevel value defines how strong this process will be executed. 0 means no dithering. 8 is maximum and 7 is the default.

 

So why not always use dithering and forget about changing the DitherLevel? This is because dithering also destroys the mapping of the original colors. So depending on your image you have to test which value is the best. Large gradients use typically the highest possible value. Quiet often you can see the difference already in the preview window of the save dialog.

 

This filetype uses a floyd-steinberg variant of dithering with serpentine scanning. There are better algorithms but they are patented. We have to wait for 30 more years ;-)

Share this post


Link to post
Share on other sites

Wow!  That was a fast update Midora and thank you very much.  Although I've changed the background to a plain blue, I think that when I used a Gradient, it made matters worse.  I've noticed sometimes in making images in PDN that 'banding' occurs even then.  Sometimes it works and other times it doesn't.

 

Anyway, I've now tweaked the Easter Bunny in your newer version and I think it looks much better.

 

tweak6_zpsqvdvjryo.gif

 

Have a Happy Easter and I hope you get to eat plenty of chocolate, as I am going to do!  As well as hot cross buns ;) .

Share this post


Link to post
Share on other sites

Nice update. The Dithering feature helps a great deal. Although still not quite as good as ffmpeg, it is certainly usable...

 

Ocilloscope_PDN.gif

Share this post


Link to post
Share on other sites

Nice update. The Dithering feature helps a great deal. Although still not quite as good as ffmpeg, it is certainly usable...

 

Did you create the oscilloscope with the default DitherLevel of 7 or the maximum of 8?

 

The biggest issue in this kind of dithering is that the blue noise generation is not quite good.

Share this post


Link to post
Share on other sites

I ended up using the default 7. I did experiment in levels from 5 ~ 8, But level 8 made it 4x the size with little to no improvement in quality. I'll experiment with other gradient sources, but I think it is very usable at default 7. 

Share this post


Link to post
Share on other sites

Dithering is just one issue. If the quantizer does not provide enough colors for a gradient then dithering is not working well. So in some cases it may be better to use a different quantizer or a fixed palette.

 

I did a variant of 0.9 where you can set some initial values of the commands used in the layer names in the dialog.

 

[attachment obsolete see first post]

 

Still I'm not sure if this is a good idea because these settings are global to the filetype and survive a restart of paint.net (this is how Paint.NET handles settings in the save dialog). So you always have to control that the settings are correct if you are switching between different images.

 

The related commands in the layer names override these dialog settings. There may be the risk that users are getting confused because they are changing dither level in the dialog without any effect to the generated file just because there is a DitherLevel command in the layer names.

 

But for testing it is much easier to change a setting in a dialog. The risk is that for large animations a quick change in options will trigger multiple threads to calculate the final image. And these threads are not abortable. This is a Paint.NET issue I stated a while ago in the developer section.

Edited by midora

Share this post


Link to post
Share on other sites

I like v 0.10, it makes it much easier to do basic settings. The "Default" button resets everything to default, so I don't understand your concern. It's also good that custom commands on layers override the settings in the dialog window. 

Share this post


Link to post
Share on other sites

It's a maintenance question. Users do not read documentation if they think there is no need to do it.

 

If a user loads an .agif and then just changes duration or the comment in the save dialog then nothing will change in the generated file because load took the old settings from the file and wrote them to the layer names. Even if its written in the dialog that these settings are just initial some users will be confused. And they will start to ask what's going on.

 

Remember someone who was confused about the first version because he missed the settings ;-)

 

Now it will be vice versa. But ok, there is no perfect solution as long as it is not possible to initilize the dialog values from the file.

Share this post


Link to post
Share on other sites

Fair enough, the last place I would've thought to put commands in, were the layer names. Now that I've been using it, that seems like the perfect place......

 

When do you plan on releasing export to APNG? That way you can export to APNG with all your setting and use ffmpeg via the script I posted earlier to output a cleaner, banding free animated gif.

 

Anyway, great work on your plugin! It's improving in every new release.

Share this post


Link to post
Share on other sites

Thanks to you and Pixey for the support.

 

ImAPNG uses libpng plus apng patch plus some modifications. This works almost in 32bit but I'm fighting with 64bit.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now