AuthorTopic: searching a program for creating multiframe-animations (timeline)  (Read 28439 times)

Offline 32

  • 0011
  • **
  • Posts: 535
  • Karma: +1/-0
    • @AngusDoolan
    • http://pixeljoint.com/p/19827.htm
    • View Profile

Re: searching a program for creating multiframe-animations (timeline)

Reply #20 on: January 25, 2014, 04:49:47 pm
Okay so I got around to putting this together. It's far from comprehensive and definitely NOT the best way to do it. But it is probably the simplest start to finish without having to learn too much new stuff. The way I'm going to do this is to just introduce the interface and explain some basics and then I'll run through a few tutorials.


This is the main Workspace in After Effects. Like all Adobe products it is completely customisable so yours probably won't look exactly like this when you start it up. The main things you'll want to be aware of for this are the project window (1) the new composition button (2) and the timeline (3).

The project window is where you'll want to drag (or right click > import) all of the resources you're using.

The new composition button is used to create compositions which are kind of like groups in Photoshop.


This is the composition settings window which you'll get when you create a new composition or right click and existing composition and go to composition settings. All of the settings should be pretty straight forward, you'll want resolution set to full unlike mine. If you're unfamiliar with timecodes it's simply H:MM:SS:FF where FF is frames in a second and dependant on the frame rate.


The timeline works pretty much like a layers menu. When you expand a layer you'll see its transformation properties which allow you to manipulate the layer and animate them if keyframing is enabled (click the stopwatch)

Labelled 1 is the new keyframe button, when you click this you'll add a new keyframe to the timeline wherever the current time indicator (red line) is. Labelled 2 and 3 are keyframes. Make sure whenever you're editing that you are aware of which is selected, if you select multiple at once you will edit the values for all of them.

1.
   Go into your preferred image editor and get all your background layers and multiply them horizontally, the faster you want it to move the more times you need to do this. So in mine the back layer is duplicated twice and the front layer is duplicated four times. Once again not the best way to do this, could easily be done in After Effects with a little more work.

2.
   Import all of your images into the project window and then create a new composition with the properties for the final animation.

3.
   Inside the new composition drop in all of the layers that will be in use.

4.
   Each layer individually; Expand them and find 'position' in the transformation properties. Right click on 'position' and click 'Separate Dimensions.' Now alt+left click on the stopwatch beside each value. This should add an expression to the property (you may need to expand the property to see it.) Add the expression “Math.round(value)” (without quotes and case sensitive) to both the x and y values. This will ensure that the layers can only move in one pixel increments and keep everything crisp.

5.
   Each moving layer; go to the first frame in the time line and add a keyframe to the x dimension, drag the image completely to the left (assuming we are moving right.) Now create another keyframe at the end of the timeline and drag the image completely to the right. It should now loop (there will be a jitter when it loops which can be taken care of simply by deleting the last frame after export).

This method of scrolling will take a little more advantage of the expressions in After Effects and not require any key framing.

1.
   Follow steps 1-3 in the Scrolling tutorial above.

2.
   Separate the position values on your moving layers and add an expression to the dimension which it will be scrolling.

3.
   Add the expression a/2-b*(time*c)

The idea here is that a is the width of your image(this will position it initially at the edge of the frame) b will determine how many pixels it scrolls each frame and c is the framerate of your composition (time is read out in seconds). You will have to manually replace the variables (though I imagine there is a way to have After Effects grab them which I will look in to)

If you want this to loop endlessly you will have to set your composition duration to last for the exactly correct number of frames, so if your image is 320 pixels wide, the image moves at 1 pixel per frame and the frame rate is 24 fps then you will want the duration to be 13 seconds and 8 frames (320/24)



If your image isn't maintaining its transparency for whatever reason consider using the built in keying features. Colour key is probably the most straight forward for pixel art. To access this select the layer you want to add transparency to and add an effect either from the effect menu or by right clicking in the effect window.



If you have an animation loop you want to play you'll need to create a pre-compostion by dragging the animation .gif onto the new composition button. Make this as long as your main composition for simplicity. Make sure to pay attention to the frame rate.

It is then simply a matter of duplicating the animation in the time line (ctrl+D) and making each line up with the previous as you see in my example.


To export simply go to file > export > add to render queue while in your main composition. This will bring up a new tab in the timeline window where you can specify your export settings. Once you have them correct just hit render.

To avoid a jutter in an infinitely scrolling animation export as a PNG sequence and delete the last frame and then import the sequence back into the editor of your choice. If you do this consider that looping animations will also have a frame cut off, if anyone needs help solving that particular conundrum just let me know.

Well hopefully that helps someone out. If anyone needs some help with something I didn't cover or clarification with it don't hesitate to ask. Like I said, not the most elegant solution but it definitely works. Here's what the export looked like if anyone is interested, not exactly usable as is but the general idea is sound.
« Last Edit: January 28, 2014, 03:20:49 am by 32 »

Offline cels

  • 0010
  • *
  • Posts: 380
  • Karma: +1/-0
    • http://pixeljoint.com/p/32715.htm
    • View Profile

Help with scrolling animation (GIMP or other freeware)

Reply #21 on: January 26, 2014, 06:47:01 pm
Hey guys,
I have a rather unusual piece of pixelart I've been working on. It's 1400 x 140 pixels. And I want to turn it into an looping animation, 224 x 140 pixels, by basically panning / scrolling sideways. Previously, I've done stuff like this manually by chopping up each frame in MS Paint, converting it to a .gif and feeding it to Microsoft Gif animator. But when it's 1400 pixels wide, and I don't want to make it too choppy... well, that's a lot of frames. That's a lot of back of forth between MS Paint, GIMP and Microsoft GIF animator.

Does anyone have a good tutorial to recommend, or perhaps an explanation of how to proceed?

Help me Obi Wan Pixelfans. You're my only hopes.

Offline 32

  • 0011
  • **
  • Posts: 535
  • Karma: +1/-0
    • @AngusDoolan
    • http://pixeljoint.com/p/19827.htm
    • View Profile

Re: searching a program for creating multiframe-animations (timeline)

Reply #22 on: January 27, 2014, 03:21:16 am
What software do you have access to? If you can use After effects then my Tutorial just above would be perfect. I believe you can use photoshop to do something similar (look up keyframe animation in photoshop.) Or obviously Flash as PPD has demonstrated. If Adobe is out the window there are a plenty of programs out there with the functionality.

Offline cels

  • 0010
  • *
  • Posts: 380
  • Karma: +1/-0
    • http://pixeljoint.com/p/32715.htm
    • View Profile

Re: searching a program for creating multiframe-animations (timeline)

Reply #23 on: January 27, 2014, 07:24:47 am
Oh, someone merged the threads. Well, I've already figured out how to use GIMP GAP to do the job. Something like 2-3 hours of googling, watching YouTube videos, reading on forums, blogs and websites... to do a job that ultimately took me 5 minutes to carry out.

But it's nice to have the knowledge, I suppose.

Thanks for responding though. I wanted to try out GIMP first since I already had the software installed, but otherwise I would have looked at your tutorial for sure.

Offline 32

  • 0011
  • **
  • Posts: 535
  • Karma: +1/-0
    • @AngusDoolan
    • http://pixeljoint.com/p/19827.htm
    • View Profile

Re: searching a program for creating multiframe-animations (timeline)

Reply #24 on: January 28, 2014, 02:48:35 am
Oh I see :crazy:. Glad it worked out for you. Maybe you could link to anything you found particularly useful for others in this thread?

I've thought of another way of doing scrolling entirely with expressions in After Effects which might be easier for some people if they're more mathematically inclined. It should also lead to more "perfect" scrolling. I'll update my previous post with a tutorial shortly.

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile

Re: searching a program for creating multiframe-animations (timeline)

Reply #25 on: January 28, 2014, 10:03:55 am
cels' earlier PM inspired me to make a full tutorial for scrolling a simple background using GIMP-GAP.

Simple Scrolling Background with GIMP-GAP

Minor variations can be applied to create parallax, looping scrolling, pauses in scrolling, etc. Less minor modifications can be applied to put something like a moving character in (I'll probably do a tutorial on that too, if only for self-education purposes)

Result image is in the linked post (not posted directly here because it's a large scrolling image, even after heavy color reduction it is 1.5mb.)
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline surt

  • 0011
  • **
  • Posts: 570
  • Karma: +0/-0
  • Meat by-product
    • not_surt
    • http://pixeljoint.com/p/2254.htm
    • View Profile
    • Uninhabitant

Re: searching a program for creating multiframe-animations (timeline)

Reply #26 on: January 29, 2014, 11:01:53 am
I got a little unlazy and hacked together a minimal HTML canvas parallax example (with epic arts): parallax.html
To use just download the HTML file and edit the following:
Code: [Select]
var FPS = 12;The number of times it updates per second.

Code: [Select]
var VIEWPORT = {width:320, height:240, zoom:4};The dimensions of the canvas and a zoom factor (just uses standard image scaling so blurry on Chrome).

Code: [Select]
var layers = [
  {file:'back.png', step:0},
  {file:'far.png', step:-1/8},
  {file:'mid.png', step:-1/2},
  {file:'near.png', step:-2},
];
Put your layers here, as many as you need. file is obviously path to the image file. step is the number of pixels the layer gets shifted each frame.

I'll do more work on it if there's interest. Looks like it might be possible to save out a PNG sequence.
« Last Edit: January 29, 2014, 11:16:24 am by surt »

Offline RAV

  • 0010
  • *
  • Posts: 293
  • Karma: +0/-0
    • View Profile
    • Blackbox Voxel Tool

Re: searching a program for creating multiframe-animations (timeline)

Reply #27 on: January 29, 2014, 12:06:12 pm
Surt, never came around telling you, but I like your wits and competence. You are doing good work. I like your random sprite generator for pixelart. (it adds to pixelart inspirationally, alongside the fantastic wealth of custom content there already is anyway)

When I look around here, there are good tutorials for semi-serious use, but I think there is still need for a quicker and simpler case of proto-use; web-based, platform agnostic, open standard. For this reason you should try and summon the motivation elaborating this tool some more towards this end, decidedly not trying to "replace" AfterEffects in the high end.


-----------


PixelPileDriver, I already noticed you are unusually thorough and qualified in your helpfulness. That animation you made looks very fun, and is a good example for the potential of even simple elements when set in scene with artistic intent.


-----------


AI, you are also very reliable in a variety of technical advice and support.
« Last Edit: January 29, 2014, 12:39:52 pm by RAV »

Offline Crow

  • 0011
  • **
  • Posts: 647
  • Karma: +0/-0
  • Technicanimal
    • View Profile

Re: searching a program for creating multiframe-animations (timeline)

Reply #28 on: January 29, 2014, 04:33:40 pm
I got a little unlazy and hacked together a minimal HTML canvas parallax example (with epic arts): parallax.html

This is cool. I hope you don't mind me hijacking it and improving upon: http://erdbeermil.ch/parallax/
Test away! Can't modify the settings without adding your own images, however.

Edit: Just noticed that it doesn't exactly work (well) without Opera (12.16) :huh: I'll fix that..
Edit²: Should work.
« Last Edit: January 29, 2014, 05:00:17 pm by Crow »
Discord: Ennea#9999

Offline Cyangmou

  • 0011
  • **
  • Posts: 929
  • Karma: +3/-0
    • cyangmou
    • http://pixeljoint.com/p/32234.htm
    • cyangmou
    • View Profile
    • Pixwerk Homepage

Re: searching a program for creating multiframe-animations (timeline)

Reply #29 on: January 29, 2014, 05:33:31 pm
that parallax thingy is cool, how to exactly upload files? Do they need a special name or something?
"Because the beauty of the human body is that it hasn't a single muscle which doesn't serve its purpose; that there's not a line wasted; that every detail of it fits one idea, the idea of a man and the life of a man."

Dev-Art
Twitter