Animations (FMA/AFMA)

How to make and use FancyMenu animation files.

Animationslink

AFMA/FMA files are special animated texture files created for FancyMenu.
They are pretty much the same as APNGs, but way more optimized for FancyMenu.

AFMA Fileslink

FancyMenu 3.9.0 adds AFMA (Advanced FancyMenu Animation), the successor to classic FMA files.

AFMA files are no longer ZIP files. They use FancyMenu's newer animation format with better file sizes, lower memory usage and better performance.

For new large or complex animated textures, use AFMA instead of classic FMA.

To create an AFMA file, do this:

  1. Open FancyMenu's menu bar.
  2. Go to Tools -> AFMA Creator.
  3. Import/convert your frames with the creator.

Classic FMA files are still supported and were optimized in FancyMenu 3.9.0, so existing layouts do not need to be converted immediately.

Classic FMA Fileslink

Making an FMAlink

Making an FMA file is as easy as creating a ZIP file! Well, that's mostly because it is a ZIP file under the hood.

File Extensionslink

You need to see file extensions to be able to follow this documentation, so make sure to ENABLE FILE EXTENSIONS before you start.

On Windows, this works by opening a random folder and then clicking on the arrow on the top-right side to extend the menu below.

Then go to the View tab and enable File Name Extensions.


Screenshot_9

Preparationlink

Lets start with creating a new folder for the content of the FMA file.
In this example, lets call the folder fancymenu_animation.

In this folder, create two more folders. The first folder has to be called frames and the second folder has to be called intro_frames.

Now in the same folder, create a new TXT file and rename it to metadata.json.
Please make sure the file is not still a TXT file. You have to change the file extension to json.

Now you should have a folder called fancymenu_animation and in this folder are a folder called frames, a folder called intro_frames and a JSON file called metadata.json.


Screenshot_3

The Metadata JSONlink

This is the file that tells FancyMenu how it should handle your FMA texture.
It contains information such as the frame times (how long a frame is visible) and the loop count.

Please open the metadata.json file with a text editor.

Copy this text to the file:

{
  "loop_count": 0,
  "frame_time": 41,
  "frame_time_intro": 41,
  "custom_frame_times": {
  },
  "custom_frame_times_intro": {
  }
}

This is the basic template of how the file should look like.
Now you can customize it to your liking.

loop_countlink

This is to control how many times the texture should loop (restart it's animation).

Setting this to 0 means it will loop indefinitely. It will never stop.

Everything bigger than 0 means how many times the texture plays. So for example, setting the value to 1 means the texture will only play once, then stops at the last frame, 2 means it will play two times, then stop at the last frame and so on.

frame_timelink

This is the universal frame time in milliseconds for the frames of the animated texture.
Frame time means how long the frame is visible before the animation goes to the next frame.

frame_time_introlink

This is basically the same as frame_time, but for the intro frames of your animated texture.
Intro frames are optional and you will learn more about them later.

custom_frame_timeslink

This is optional and can be used for overriding the frame time for specific (non-intro) frames.
For example, you want all your frames to show for 41 milliseconds, so you set frame_time to 41, but you want the first and second frames to show for 5000 milliseconds.

In that case, you would do this:

{
  "loop_count": 0,
  "frame_time": 41,
  "frame_time_intro": 41,
  "custom_frame_times": {
    0: 5000,
    1: 5000
  },
  "custom_frame_times_intro": {
  }
}

Frames are zero-based, which means the first frame of the animation is 0, the second one is 1 and so on.

There needs to be a comma at the end of every custom frame time entry, except of the last one!

custom_frame_times_introlink

This is exactly the same as custom_frame_times, but in this case for the intro frames. Intro frames are optional and you will learn more about them later.

That's it for the metadata.json file. Save it now and close the text editor.

The Frameslink

The frames of your animated texture go into the frames folder.

Frames need to be PNG FILES! There is NO SUPPORT FOR JPEG AND OTHER FORMATS!

Every frame has to be called just the number of the frame and the file extension.
The first frame should be called 0.png, the second one 1.png, the third one 2.png and so on.
The texture will NOT WORK if the frames have invalid file names!

To extract frames from videos, please take a look at this docs page.


Screenshot_4

The Introlink

This feature is OPTIONAL.

The intro feature of FMA files is a special way to play some frames before the actual frames of the frames folder start playing.

The intro will never loop and only plays the very first time the animation plays, which allows you to play something like a fade-in animation before the actual animation starts playing in a loop.

Intro frames go into the intro_frames folder and work the same as normal frames:

Frames need to be PNG FILES! There is NO SUPPORT FOR JPEG AND OTHER FORMATS!

Every frame has to be called just the number of the frame and the file extension.
The first frame should be called 0.png, the second one 1.png, the third one 2.png and so on.
The texture will NOT WORK if the frames have invalid file names!

Packing the FMA Filelink

Now everything important is in the fancymenu_animation folder, so you can pack your FMA file now!

Packing the FMA file basically just means to pack the folder content to a ZIP file.
The content needs to be in the ROOT of the ZIP file, so it can't be in an extra folder inside the ZIP.

On Windows, the easiest way to pack your FMA content to a ZIP file is by selecting everything in the fancymenu_animation folder and then right-clicking the metadata.json file. In the context menu that opens, click on Send To -> Compressed ZIP Folder.


Screenshot_6

Now there should be a new ZIP file in the fancymenu_animation folder called metadata.zip, frames.zip or intro_frames.zip.


Screenshot_7

When you open this file, its content should look like this:

Screenshot_8

Now you need to rename the file to fancymenu_animation.fma. Make sure to REPLACE the .zip with .fma, so it's not a ZIP anymore.

Of course you can change the fancymenu_animation part to whatever you want, but make sure it stays a .fma file!

That's it! You now have a (hopefully) working FMA file!

Using AFMA & FMA Files in FancyMenulink

You can use AFMA/FMA files like any other animated texture/image format. FancyMenu sees it as normal image, so you can use it everywhere you can set a texture to something, like Image elements or Image menu backgrounds.

Make sure the AFMA/FMA file is in the /config/fancymenu/assets/ folder, because FancyMenu can only pick textures and other resources from its assets folder.