Freedome Editor Comics

Dome features run over freedome_client — see doc/migration-to-freedome_client.md.

Flutter library for creating and editing interactive comics with animation, sound and multi-language support.

Russian version: README.ru.md.

Description

Freedome Editor Comics is a Flutter library ported from the C# legacy_comics_editor. It provides everything needed to build interactive comics with:

  • Multi-layer structure - layers made of images
  • Animation - transformations (translate, rotate, scale, alpha)
  • Sound - audio files with time stamps
  • Multiple languages - several languages (EN, RU, HI)
  • Export / import - projects saved and loaded as .comics / .puzzle

Data format

Comics

class Comics {
  int width;           // Comics width
  int height;          // Comics height
  List<Layer> layers;  // Layers
  List<Sound> sounds; // Sounds
}

Layer

class Layer {
  bool preview;                    // Preview mode
  List<Image> images;              // Images for the different languages
  List<Animation> animations;      // Layer animations
}

Image

class Image {
  String file;          // Path to the image file
  String popup;         // Path to the popup image
  int width;           // Image width
  int height;          // Image height
  bool isTiles;        // Whether the image is split into tiles
}

Animation types

TranslateAnim (translation)

class TranslateAnim extends Animation {
  int x;  // Offset along X
  int y;  // Offset along Y
}

RotateAnim (rotation)

class RotateAnim extends PivotAnimation {
  double angle;   // Rotation angle in degrees
  double pivotX;  // Pivot X (0.0-1.0)
  double pivotY;  // Pivot Y (0.0-1.0)
}

ScaleAnim (scaling)

class ScaleAnim extends PivotAnimation {
  double scaleX;  // Scale along X
  double scaleY;  // Scale along Y
  double pivotX;  // Scaling pivot X (0.0-1.0)
  double pivotY;  // Scaling pivot Y (0.0-1.0)
}

AlphaAnim (opacity)

class AlphaAnim extends Animation {
  double alpha;  // Opacity (0.0-1.0)
}

SoundAnim (sound)

class SoundAnim extends Animation {
  // Special animation that plays a sound
}

Sound

class Sound {
  String file;                    // Path to the audio file
  List<Animation> animations;     // Sound animations
}

Animation base class

abstract class Animation {
  int start;        // Start time
  int end;          // End time
  AnimationType type; // Animation type
  
  // Interpolation between animations
  Animation interpolate(Animation current, double scroll);
  
  // Interpolation factor
  double factor(double scroll);
}

Supported languages

  • EN - English
  • RU - Russian
  • HI - Hindi

File formats

Input

  • Images: JPG, PNG
  • Audio: MP3
  • Projects: .comics, .puzzle

Output

  • Projects: .comics (regular comics), .puzzle (puzzles)

Usage examples

Creating a new comics

import 'package:freedome_editor_comics/freedome_editor_comics.dart';

// Create a new comics
final comics = Comics(
  width: 1080,
  height: 2160,
  layers: [],
  sounds: [],
);

// Add a layer
final layer = Layer.create(
  imagePath: '/path/to/image.jpg',
  scroll: 0.0,
  isPuzzle: false,
);

comics.layers.add(layer);

// Add a sound
final sound = Sound.create(
  audioPath: '/path/to/audio.mp3',
  scroll: 0.0,
);

comics.sounds.add(sound);

Working with animations

// Add a translation
final translateAnim = TranslateAnim(
  start: 0,
  end: 1000,
  x: 100,
  y: 50,
);

layer.animations.add(translateAnim);

// Add a rotation
final rotateAnim = RotateAnim(
  start: 500,
  end: 1500,
  angle: 45.0,
  pivotX: 0.5,
  pivotY: 0.5,
);

layer.animations.add(rotateAnim);

Saving and loading

// Save a comics
await comics.save('/path/to/comics.comics');

// Load a comics
final loadedComics = await Comics.load('/path/to/comics.comics');

Playing an animation

// Current animation state
final currentState = layer.getAnimationState(scroll: 500.0);

// Apply the transformations
canvas.translate(currentState.translateX, currentState.translateY);
canvas.rotate(currentState.rotation);
canvas.scale(currentState.scaleX, currentState.scaleY);
canvas.setAlpha(currentState.alpha);

Architecture

The library follows the MVVM pattern:

  • Models - data models (Comics, Layer, Image, Sound, Animation)
  • ViewModels - presentation logic (ComicsViewModel, LayerViewModel)
  • Utils - utilities (FileManager, ZipUtils, ImageMagick)

Dependencies

  • path_provider - file system access
  • archive - ZIP archives
  • image - image processing
  • audioplayers - sound playback

Installation

dependencies:
  freedome_editor_comics: ^1.0.0

Licence

NativeMindNONC (see LICENSE).

Support

Questions and proposals: issues in the project repository https://gitlab.com/FreeDome108/freedome_dart or support@freedome.nativemind.net.


Licence: NativeMindNONC. Commercial use → NativeMind sales (https://nativemind.net)