As designers, you most likely use many other tools or programs such as Adobe Photoshop or Adobe Flash Professional to create complex images and character animations. Edge Animate lets you reuse such creations by supporting the import of sprite sheets generated from such tools.

A sprite sheet is an image file that contains several smaller graphics in a tiled grid arrangement. By compiling several graphics into a single file, you enable Edge Animate and other applications to use the graphics while only needing to load a single file. This loading efficiency can be very helpful in situations such as building animations where performance is especially important. 

Most tools let you export sprite sheets only as image files (PNG/JPEG). Adobe Flash Professional CC 2014 and later can generate Edge Animate-specific sprite sheets. You can import both types of sprite sheets - PNG/JPEG as well as the ones that are generated from Flash Professional - into Edge Animate.

 

Note:

You may see performance issues with Edge Animate compositions on devices if you import and use sprite sheets of size greater than 2048 X 2048 pixels.

Import sprite sheets saved as only image files

  1. Before importing sprite sheets into Edge Animate, ensure that:

    • The images in the sprite sheet are of equal dimensions
    • The padding between the images are uniform
  2. Open Edge Animate. In the Symbols panel, right-click +, and click Import Sprite Sheets.

    You can also click File > Import Sprite Sheets.

    Import Sprite Sheets from Symbols panel
    Import Sprite Sheets from Symbols panel

  3. Browse for the required sprite sheet and select the PNG or the JPEG file. Click OK.

    The Define Sprite Tiles dialog box appears. 

    image_sprite_import
    Define Sprite Tiles - importing PNG or JPEG sprite sheets

    • To preview the animation, click Preview Animation
    • Specify the duration and fps. For PNG and JPEG files, the fps is set to 24 by default. You can modify the fps as required.
    • Specify the number of rows and columns and the trimming options.
  4. Click Import.

    The PNG or the JPEG file corresponding to the sprite sheet is saved in the Images panel. The constituent images are saved as separate symbols (named spritesheet_name_n) in the Symbols panel.

  5. Drag the required symbols from the Symbols panel onto the Stage.

Import sprite sheets generated from Adobe Flash Professional

  1. Ensure that you have generated the sprite sheet by choosing the Edge Animate format in Adobe Flash Professional CC 2014 (or later).

    For information on generating sprite sheets in Adobe Flash Professional CC, see Adobe Flash Professional CC Help.

  2. In the Symbols panel, right-click +, and click Import Sprite Sheets.

    You can also click File > Import Sprite Sheets.

    Import Sprite Sheets using Symbols panel
    Import Sprite Sheets using Symbols panel

  3. Browse for the required sprite sheet and select the PNG or the JPEG file. Click OK.

    The Define Sprite Tiles dialog box appears. 

    Define Sprite Tiles - importing Flash sprite sheets
    Define Sprite Tiles - importing Flash sprite sheets

    • To load the EAS file that corresponds to the selected PNG or JPEG, select Load An EAS File.
    • To preview the animation, click Preview Animation.
    • Specify the duration and fps. For EAS files, the fps is inherited from the source. You can modify the fps as required.
  4. Click Import.

    The PNG or the JPEG file corresponding to the sprite sheet is saved in the Images panel. The constituent images are saved as separate symbols (named spritesheet_name_n) in the Symbols panel.

  5. Drag the required symbols from the Symbols panel onto the Stage.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy