1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to make an animated background

Discussion in 'Tutorials' started by SyntaxTerror, Jul 22, 2016.

  1. SyntaxTerror

    SyntaxTerror Swell Supporter Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    367
    Likes Received:
    85
    How to make an animated background
    Tutorial and tools

    This tutorial shows how to make an animated background for Vanillla or the Loader using an animated GIF image and Adobe Flash Animate CC (formerly Flash Pro CC, I assume it also works with CS versions).
    With some knowledge of Flash, you may extrapolate and make you own animations with classic/motion/shape tweens for example.

    Prior to continue reading this tutorial, you should understand the basics of SDT backgrounds by consulting my Static Background Tutorial. ModGuy's tool presented there can also help you to choose the right image or video to use.

    This tutorial assumes that you already have an animated GIF or a video that can be set to make an infinite loop, sized 700x825 px (or at least 700x600px, but it will not be able to be zoomed). It must not have too many frames, because it will impact the game frame rate (FPS).

    To make, rezise, crop, optimize, add effects or split an animated GIF, you can use ezgif.com, that is a wonderful online tool for this (however, I had a problem with a transparent background that was showing different plain colours in Animate CC, I had to choose another online GIF editor on that time). It can also convert videos to GIF.
    To cut or crop a video, you can use online-video-cutter.com, that is a good online tool for this. It supports all formats and is multilanguage.

    You also need Flash Pro CS/CC or Animate CC (available here, 30 days trial) and Konashion's modding template: Flash CS3, CS4 or Flash CS5, CS6, CC.
    You may download my Background Template.fla that contains only the necessary things from Konashion's template to design backgrounds (but the SDTMods folder), plus a layer containing an image of him and her on an alpha background to directly see the render ingame.
    [​IMG]
    Example of him & her on alpha background.​

    When everything is ready (click the images to see them full size):
    1. Open SDTMod.fla.
    2. Change the workspace to Animator (you can choose another, but this one will be used in the tutorial. Sorry that my Animate CC version is in French, but the layout will be the same for every language and my explanations use the English terms) and reduce the Color panel.
      [​IMG]
    3. Import your GIF: File / Import / Import in Library.
    4. Select the GIF in the Library panel.
    5. Right-click its layer in the Scenario panel and Copy it.
    6. Select the Background Template in the Library panel.
      [​IMG]
    7. Right-click the Background layer and choose Paste layers to paste your GIF. Its top left corner should be aligned with the little cross automaticaly and thus be at the right place.
      [​IMG]
    8. Delete the Background layer.
    9. Choose Loop (Shift+Alt+L) in the Scenario panel.
    10. Select all the frames of the GIF in the Loop in the Timeline.
    11. Select Main.
      [​IMG]
    12. Delete the README layer.
    13. Select the Mods layer.
    14. Drag the Background Template in the main panel and give it a name in the Properties panel.[​IMG]
    15. Right-click the first frame in the Timeline of the Settings layer and select Actions (F9).
      [​IMG]
    16. Type "registerMod(<name of the Background Template>);" (case is important).
    17. Choose a name for the mod and put your name in the actions "modName" and "modCreator".
      [​IMG]
    18. Save as your mod and Publish it.
      [​IMG]
    19. Try your new mod in SDT: load it from the Modding tab with the SWF... button.
    20. If it is good, share it in the Background section of the forum and add it to the downloads of the Resource Manager!
    Notes:
    • In Konashion's Background Template layer, there are three rectangles. The top one is sized 700x600 px, which is the size used in the firsts versions of SDT, when zoom wasn't avalaible. You can still make backgrounds of this size, but zooming will have no effect. These three rectangles together mesure 700x850 px, but the correct size for a background is 700x825 px. With this size, zoom is possible: the bottom part of the image will be shown when zoomed in and its top when zoomed out.
    • Changing the Frame Rate in the Flash editor seems to have no effect ingame. Thus, the only way to slow the ingame frame rate seems to be putting identical images in frames one after another. To accelerate, some images must be removed (e.g. remove one image every four images).
     
    Last edited: Jul 29, 2016
  2. aztlan

    aztlan Swell Supporter

    Joined:
    Sep 14, 2013
    Messages:
    507
    Likes Received:
    15
    I'm interested in 'filming' some SDT scenes as animated backgrounds... (Inspired by Dante's SD Chan's bedroom scene.) Any (free and easy to use?) tools you can recommend to capture this so I could later follow your directions above to add it as an animated background?

    Or does the restriction on having long animation make this pointless? (How long of a snippet could I have for my animation without utterly killing FPS?)

    I'm thinking of having maybe 1/2 a dozen related backgrounds that would change during the course of a dialog as the story progresses...

    PS - I just saw all your new animated backgrounds - thanks!
     
    Last edited: Jul 27, 2016
  3. SyntaxTerror

    SyntaxTerror Swell Supporter Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    367
    Likes Received:
    85
    I do not know Flash Pro/Animate well and I do not know other Flash editors, but I think I've read that only Adobe's softwares can be handled by begginers, because other Flash editors need some knowledge in programming. Also, I think that only Adobe's stuff has a graphic interface. Anyway, I am a begginer in Flash editing and I cannot really give advice on this subject.
    There is a 30 days free trial for Animate CC, and some cracks exist, but
    (at least, it is what the FBI says) :tongue:
    I do not know much about FPS and its relation with the number of frames in the animation, I think that @stuntcock or @sby can give you more information on this.
    I noticed that an animated GIF with 50 different frames does not seem to impact FPS much, but it certainly depend of the computer, the kind of images, the number of layers, the ingame resolution, etc. Anyway, 50 frames is not much if you are thinking of long animations, but I didn't tried to do more, the animated backgrounds I made are quite simple.
     
    Last edited: Jul 27, 2016
    aztlan likes this.
  4. SyntaxTerror

    SyntaxTerror Swell Supporter Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    367
    Likes Received:
    85
    Added a FLA template in the top post containing only the necessary things needed to make a SWF background, plus a layer with an image of him and her on an alpha background to directly see the render ingame.