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 Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    910
    Likes Received:
    361
    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 in a folder containing konashion's SDTMods folder with SDT Action Scripts: ModElements.as, ModPackage.as, ModTypes.as (available in these archives: SDTModding.zip (for Flash Pro CS3 & CS4) or SDTModdingCS5.zip (for Flash Pro CS5, CS6, CC & Animate CC)).
      [​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: Jun 28, 2017
  2. aztlan

    aztlan Swell Supporter

    Joined:
    Sep 14, 2013
    Messages:
    566
    Likes Received:
    31
    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 Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    910
    Likes Received:
    361
    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 Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    910
    Likes Received:
    361
    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.
     
  5. Scoopy

    Scoopy Content Creator

    Joined:
    Jun 28, 2017
    Messages:
    43
    Likes Received:
    23
    Tried rather hard to make an animated background following the above tutorial, whilst I appreciate your effort in putting it together I just can't seem to get any SWF fil created to actually work.

    Every time the file is published it tells me there is an error or two.

    Symbol 'Background Template', Layer 'Settings', Frame 1, Line 10, Column 22 1120: Access of undefined property ModTypes.
    Symbol 'Background Template', Layer 'Settings', Frame 1, Line 16, Column 28 1120: Access of undefined property ModElements.

    If you understand what that says please tell me where I might be going wrong. Only have 6 days on CC trial so would appreciate a fairly quick reply!
     
  6. SyntaxTerror

    SyntaxTerror Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    910
    Likes Received:
    361
    => You have to publish it in a folder containing konashion's SDTMods folder with SDT Action Scripts: ModElements.as, ModPackage.as, ModTypes.as (available in these archives: SDTModding.zip (for Flash Pro CS3 & CS4) or SDTModdingCS5.zip (for Flash Pro CS5, CS6, CC & Animate CC)).
    I edited the tutorial accordingly.

    By the way, this tutorial needs to be rewritten, because I found simpler methods since I wrote it.
     
  7. Scoopy

    Scoopy Content Creator

    Joined:
    Jun 28, 2017
    Messages:
    43
    Likes Received:
    23
    Appreciate the very quick reply! Will have a go tomorrow.
     
  8. Scoopy

    Scoopy Content Creator

    Joined:
    Jun 28, 2017
    Messages:
    43
    Likes Received:
    23
    Ok, my understanding has improved a little but still getting problems even after following the instructions. The latest 2 errors are the same;

    "5001: The name of package 'SDTMods' does not reflect the location of this file. Please change the package definition's name inside this file, or move the file."

    I've tried renaming the individual mod files to have the background name, the file path and folder itself. Bit of a head scratcher.

    Never mind, worked it out.

    When 'saving as' you need to save over the original fla file. I was saving the fla file with a new name and thus having 2 fla files screwing things up.

    Thanks again.
     
    Last edited: Jun 30, 2017
  9. stuntcock

    stuntcock Staff Member Moderator

    Joined:
    Jun 5, 2012
    Messages:
    2,331
    Likes Received:
    631
    I would encourage you to undo these changes if possible, or revert to a backup if you made one. Shotgun debugging will sometimes fix the current problem, but it tends to create extra confusion and problems at a later stage.

    Flash wants the SDTMods subfolder (containing three plaintext source files with the .as file extension) to appear in the same folder as your FLA source file. That's all. It doesn't want you to copy the *.as files into the same folder as your FLA file. It doesn't care what your FLA file is named. It doesn't expect you to perform extensive tinkering with project filepath settings. It doesn't expect you to rename any files in order to conform to the names of your animation/video source files. It doesn't require you to move any files; it's entirely possible to have a Flash project whose reference images (or audio files) are stored on a different drive partition or a different physical drive.

    Flash will become unhappy if the SDTMods subfolder has been renamed to "sdtmods" or "SDTMods-background-animation-project" or "SDT modding template files" or "this folder was extracted by WinZip trial version, please register now!" or anything like that. It will also become unhappy if you've manually moved or renamed any of the *.as files within the SDTMods subfolder. You're expected to leave those files completely unchanged.

    Suggested fix:
    1. close any Flash projects that are currently open
    2. create a backup of your FLA source file (just in case it accidentally gets misplaced or overwritten during this process)
      • if your FLA file is still named "ExampleMod.fla" then please take this opportunity to rename it to something else, such as "BgAnimationTest.fla"
    3. extract the SDTModdingCS5.zip file into a new folder
    4. explore the newly-created folder; find the newly-created ExampleMod.fla file
    5. copy-paste your FLA source file into the same place as the newly-created ExampleMod.fla file
    6. open your FLA source file (which you've just pasted into its new home)
    7. try to publish your project
     
  10. Scoopy

    Scoopy Content Creator

    Joined:
    Jun 28, 2017
    Messages:
    43
    Likes Received:
    23
    Appreciate the expanded explanation SC. Made sure that the template fla was copied form the original and put into it's own folder for each animation planned. have in fact now made two so far, all rather easy once you know how.

    Mind you there's another problem now. Made a rather ambitious third gif to create another background out of and CC won't let the GIF be pasted from the library into the background layer (whereas this was not encountered before). My guess would be that the GIF file is too large or CC is fucked in some way. Or I've ticked a box somewhere that's buggered CC.

    Anyway, will be sure to upload whatever I can come up with after the CC trial is over.
     
  11. SyntaxTerror

    SyntaxTerror Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    910
    Likes Received:
    361
    Actually, you can import the GIF directly into the scene, it is easier.
    Be careful that if the GIF has too many frames (more than 50), SDT's FPS rate will drop a lot and make the game very slow, and Animate CC will become buggy, unless you hav a very fast computer and a good graphic card.
     
  12. Scoopy

    Scoopy Content Creator

    Joined:
    Jun 28, 2017
    Messages:
    43
    Likes Received:
    23
    Did it.
     
    Last edited: Jun 30, 2017
  13. SyntaxTerror

    SyntaxTerror Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    910
    Likes Received:
    361
    @Scoopy: Nice work, but if I may give you some advices:
    • In the dungeon and tentacles backgrounds, the GIF play too slowly and look quite jerky. Usually, most GIFs paly at the right pace if there is only one frame per image in the timeline. You have two options:
      • remove surplus frames on Animate CC. This can be a bit tricky as it is difficult to select several frames.
      • make your GIF faster with an GIF editor. This is the option I prefer, it is faster and all your images will be on only one frame each.
    • In the spaceship background, it is necessary to zoom in to see the animation. It is usually better to put the most important part of a background in the bottom 600 pixels, so it will be seen whatever the zoom is.
    • Do not forget to add tags to your dowloads, it will make their search easier. The basic tags I put on animated backgrounds are animated, animated background, background, sdt, vanilla, (you can copy these tags and paste them directly).
    Good luck.
     
  14. Scoopy

    Scoopy Content Creator

    Joined:
    Jun 28, 2017
    Messages:
    43
    Likes Received:
    23
    @SyntaxTerror Thank you!

    Will play about with the tentacle one at some point, though OrcDungeon has been upgraded as it was a very quick job of just deleting loads of frames. Tentacles will be a bit of a fuck about.

    Whilst I was pleased with the spaceship one as you see the effect once zoomed in (That wasn't intentional...) however I can see that would not be to everyone's taste. Did have another background to be given the warp treatment mind you which will have a more central view.

    Also will add tags. Cheers Syn.
     
  15. SyntaxTerror

    SyntaxTerror Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    910
    Likes Received:
    361
    Sorry, but I do not understand well what you are meaning.
    I already added the most obvious ones. You can add some others if you want.
     
  16. Scoopy

    Scoopy Content Creator

    Joined:
    Jun 28, 2017
    Messages:
    43
    Likes Received:
    23
    There is another picture with the window in the centre, I will use that for the next warp animation.

    Thank you.