Author Topic: Tutorial: Step by Step Guide for Converting Video to DMD Animations.  (Read 10231 times)

Seven11

  • Wizard
  • *****
  • Posts: 228
    • View Profile
    • Skit-B Presents - Predator
There have been a lot of discussions about getting and making DMD animations out there, and I've been working with it for quite a few days now, so I thought I would take a break and share my workflow with everyone.  I'm hoping this will be helpful for the guys out there using movies or TV shows as their machine theme (Indiana Jones and Star Trek: Voyager come to mind).  This is in no way the only way to do this, it's just the way I've found works best for me.  As always, if you see a flaw in the information, don't hesitate to reply and tell me about it.  

This might also be a good time to quickly mention that I do not endorse piracy at any level.  If you like a movie enough to make a pinball machine out of it, then you can at least go purchase the dvd and decode it to your pc for this purpose.  Also, I understand that software can be expensive.  There are trial versions for both Flash and Camtasia available from their creators, so I would recommend starting there.  If you like the software and you can use it for what it is advertised to do, then, again, buy it.  A lot of work goes into these programs; the least we can do is pay the programmers for their hard work.

At any rate, let's get into this.  Here's a list of the things you'll need:

1: A movie or clip file of your source.  For this example, I'll be using the latest Karate Kid movie, simply because it was a good one that I found on my HDD.
2: A video editing program that can export as a gif image.  I'm using Camtasia Studio 7, as it fits this purpose VERY well.  
3: Adobe Flash.  I use and highly recommend version CS4, as it is very optimized for raw video-type usage.

First, let's get your video editor open and load your movie file.  It's very important to keep the aspect ratio the same all the way up until your clip is loaded into flash as a symbol (more on this down the page), otherwise you're going to lose quality in your clip.  With only 128x32 to work with, keeping the quality as high as possible is paramount.



Let me deviate for a second and say a few things about video editors.  In this guide, I'm going to assume the reader has no prior knowledge of video editing, so I will be giving very complete examples based on the software I've chosen.  If you're using a different video editing program, I will assume that you have it because you like it, and you know how to use it.  Therefore, when my examples call for specific actions in Camtasia Studio to get something done, just do whatever steps you need to do to get the same results from your editing software.  That being said...

After you have your video loaded into Camtasia, move to the point in your movie where you want to get your clip from (it helps to use the zoom feature on the timeline to get more precise frames).  Put the slider at the beginning of your clip, then drag the red flag on the right of the slider and drag it to where you want to end your clip.  Now go to "File>Produce Special>Produce Selection As..."  A wizard will come up allowing you to change a series of options to get the clip you want.  In the drop down box, go towards the bottom and choose "Custom Production Settings."  Then, again, towards the bottom, select the gif option and hit next.  For the next series of options, you want the colors to be 256, automatic framerate, optimized palette and include windows colors.  Do NOT dither color reduction, as this will make your clips appear "painted" in the final DMD file.



Stressing again, keep the aspect ratio the same as the source movie file.  Leave everything else unchecked on the next few screens and just hit next until you get to name your file.  When you get to this screen, pick a location for your clip and name it something you will remember.  Finish the wizard and wait for the program to process it.  You now have your raw clip of what will eventually become your DMD animation.

::For the programmers out there::

This is a good time to start thinking of your naming structure for your animations, as it will be considerably easier for you to recall names of files and all that if you start early.  You will be physically typing the names of these clips MANY times throughout this process, and you will intimately remember what each clip is called by the time you need to code them into your game.  
« Last Edit: January 23, 2011, 05:24:48 PM by Seven11 »
See the progress with the custom Predator machine!
http://www.skitbpinball.com/

Seven11

  • Wizard
  • *****
  • Posts: 228
    • View Profile
    • Skit-B Presents - Predator
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #1 on: January 23, 2011, 05:23:06 PM »
Now that you have your raw gif file, it's time to open Flash and make your environment.  Again, I will assume no prior knowledge of the program, so for those of you who have used it before and are already comfortable with it, this might get a little "fluffy."  Just skim for the relevant parts.

Open Flash and create a new document (I use AS2, but it honestly doesn't make any difference for the purposes of this guide).  Find your Properties dialog box and change the size to 128 x 32, and LEAVE THE FRAMERATE 24.  That is set to movie industry standard and, if you're using a Hollywood production, they will match.  I also like to make my stage color black, but we will be doing that manually in a minute, anyways.



Go to your timeline and make it so there are 3 layers (there is a little button in the bottom left for a new layer: see picture).



On the bottom layer, make a black box that covers your 128x32 area (doesn't have to be perfect, just make sure it covers your stage area) then "invis" the layer by clicking the dot under the little eye for that layer.  On the top layer, using the Rectangle Tool, make sure there is no fill (again, see picture) and make a rectangle that fits your stage EXACTLY.



This will be your guide so you know where your stage is under your clip (it will make more sense in a minute, trust me).  Your environment should be looking like the following picture now (I zoomed mine in, also, using the percentage drop box up and to the right of the stage, and I recommend you do so, as well).

At this point, I would recommend saving this file and using it as your basic template for creating your animations, especially if your machine is going to be using a lot of clips from movies, etc.



Now, at the top, click "Insert>New Symbol" and a dialog box will pop up.  Name your symbol (remember, be consistent with this filename!), and make sure it is set to "Graphic," not "Movie Clip," which is a very tempting mistake to make.  When you hit OK, you're taken to the editing environment for the new symbol you just made.  Now you want to click "File>Import>Import To Stage" and go to where your clip is saved as a gif and double click it.  Your clip is now loaded onto the stage, into the library, and into the symbol's timeline.

At this point, make a note of how many frames your animation has (my example has 45) and go back to your core document (by clicking the "Scene1" button above and to the left of the stage area).  On your main timeline, go to the last frame of how many your clip has (in my case, to frame 45) and click and drag straight downwards to select your frame in all 3 layers.  Right click and hit "Insert Frame."


 
Now click the first frame on your middle layer and drag the symbol you created to the stage.  Chances are good that it will appear HUGE on your screen.  Using the "Transform" dialog box, resize your symbol so that it fits closer to your box that you had drawn in your top layer (make sense now?).  A good general percentage I've been using is ~21%, but it will differ a bit based on the initial size of the movie file you pulled your clip from.  Just make sure that your clip completely covers your stage area, or you will end up with black boxes on the sides or top of your final DMD animation, and nobody wants that, right?

At this time, creative power is all yours.  Go ahead and center the clip the way you want it and all that.  I will be including a more advanced post beneath the next one to explain how to add a little more flair to your animations, so I need to create a break here.  If you wish to use what you've got at this point for your final animation, simply continue to the next step.
« Last Edit: January 23, 2011, 05:29:01 PM by Seven11 »
See the progress with the custom Predator machine!
http://www.skitbpinball.com/

Seven11

  • Wizard
  • *****
  • Posts: 228
    • View Profile
    • Skit-B Presents - Predator
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #2 on: January 23, 2011, 05:23:25 PM »


I'm going to assume that what you have now is, for the most part, the same as what I have pictured above.  If it isn't, or something is missing, you may need to retrace your steps a bit and make sure you didn't miss anything.  Also, as a little disclaimer, I'm also going to state that, while I consider my file structures and folder hierarchies to be pretty standard in the P-ROC world, yours may differ a bit.  Please note that the following folder locations are subjective to how you have your P-ROC environment set up.
 
The following steps will be considered pretty standard for DMD creation, but for the sake of those of us who may be new to the idea, I will be dictating the process in as complete of a fashion as I can.

To get things rolling, you need to get this clip out to your HDD as a .png sequence.  To do this, go to "File>Export>Export Movie" and you'll be presented with a dialog box asking you where to save your files.  At the bottom of the dialog box there is a drop box that says "SWF Movie (*.swf)."  Change this to the bottom option that says "PNG Sequence (*.png)."  Now make a new folder and name it after your clip, then, inside the new folder you just created, type the name in again and hit the save button.  The following box will appear, and you should set the options to mirror what I have here (see picture).  Hit OK and it will quickly do a process and your png's will be exported to the folder you specified.



Copy that folder (the folder, not just the contents of it) to your pyprocgame directory and open your command prompt.  "Cd" to your pyprocgame folder and call Python to open dmdconvert.py with the proper parameters to create your dmd animation.  To do this, follow the next steps.  Keep in mind, the animation I'm making is named "jackpot," so that's what my folders and images are called.  Substitute everything in my example named "jackpot" with your filename and everything will be fine.

Code: [Select]
python tools/dmdconvert.py jackpot/jackpot%04d.png jackpot.dmd

What that is saying is:

Using Python, open dmdconvert.py from the /tools/ directory, go into the /jackpot/ directory and use jackpot(plus any extra numbers created by flash).png's, and create a file called "jackpot.dmd."  If this needs to be clarified further, please post a reply.  This will create your .dmd file right in the pyprocgame folder.

Now just put your new .dmd into your code for testing.  Best way I've found is to add an extra animation to your attract mode of your game and run it and watch your new animation.  If anyone knows a quicker or easier way to test them without being hooked up to a P-ROC in a running machine, please reply and tell me.  It will be added to this guide.

If done correctly, this is something of what you can expect to see.  Turns out this particular shot from The Karate Kid isn't the best of examples due to all the motion of the camera work in the movie, but it still looks damn good (and we can fix that using Flash)!



The next post will address a few of the finer points of "jazzing up" that animation to better represent what you're using it for.
« Last Edit: January 31, 2011, 10:51:17 AM by Seven11 »
See the progress with the custom Predator machine!
http://www.skitbpinball.com/

Seven11

  • Wizard
  • *****
  • Posts: 228
    • View Profile
    • Skit-B Presents - Predator
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #3 on: January 23, 2011, 05:23:37 PM »
OK, starting at the beginning of the last step, we're going to be adding some flair to your animation before exporting it.  Let's add some motion to the clip itself so we can follow only what you want on your DMD, add some text to it so we know what we were just awarded, and extend the animation a bit so we can focus on said award without having the animation loop.

Click the keyframe at the beginning of the middle layer (with your clip in it) and center the clip on the stage where you want it to start.  Next, move to the right and click on the timeline (still on the same layer) where you want your motion to stop, and hit F6 (to insert another keyframe).  Again, move your clip to where you want it to be at the end of your motion, then right click somewhere between those two keyframes and click "Create Classic Tween."  Notice how the clip now moves fluidly over to where you wanted it to.  You can use this technique in many ways, so experiment and have some fun.  You'll be surprised what you can accomplish using only this simple, entry-level technique.

Let's get this animation to hold at the end so we can extend it a bit and show our text without having our animation loop at the end.  This is a great way to give yourself a little breathing room in your time with short clips (45 frames is not nearly long enough to tell someone they just scored a jackpot, if you ask me).  

Click the keyframe with your clip in it, then click on the clip itself.  You'll notice that the options in your "Properties" box have changed.  Under "Looping," there is a drop box that needs to be changed to "Play Once" to stop the animation at the end.  



**NOTE**  

If you've already made motion tweens to your clip, this step to make it only play once will have to be repeated on every KEYframe (the ones in the timeline that have dots in them) in that layer.  Now add some frames to your main timeline by using the Insert Frame method as described above.  For my example, I'll be going out to frame 85, adding 40 more frames to my project.


 
Let's get some fancy text on the screen to excite our players about nailing that jackpot!  This part is pretty subjective, so I won't go into the details of how I made the text do what it does in this example unless someone specifically asks me for it.  At this point, you know how motion tweening works and you know how the layering works, so I'll just say a few things about the rules of tweening and layers, and you will be able to do some pretty fancy stuff all by yourself.  Two very simple rules apply here:  

1:  An item has to be made into a symbol for Classic Tweening to work properly.  A shortcut for this is to highlight what you want to make into a symbol (probably your text) then press F8, give it a name, and work with it from there.  

2:  Only one single tween per layer.  Your symbol you want to motion tween has to be on a separate layer from ANYTHING ELSE, not just other tweens!

That being said, make a new layer above your clip layer.  In the timeline, go to where you want your words to show up and hit F6 to make a keyframe.  Now, using the text tool, click and type what you want it to say.  Now you want to make that text into a symbol using F8.  

**NOTE**  

Food for thought:  You can get pretty crazy here, if you want.  If you hit ctrl+b with your text clicked, it will break it into single letters.  All of those letters can be made into symbols, and all of those symbols can be put into their own layers with their own tweens.  This can cause some serious eye candy for those of us who don't mind the extra effort.  Consider stuff like that when building your animations, as it is definitely worth it!

Now that your text is a symbol, you can do whatever you want with it.  Remove the text from the timeline and put it back over and over to make it blink, tween it so it moves around, use the alpha function (in the properties box for the symbol) to make it fade in and out, whatever you like.  I like it to blink, so that's what I'm going to do first.



In your timeline, all you have to do is make a keyframe at every place that you want the text to be removed and then replaced again, then highlight the frame where you want it to be removed and hit the delete button.  Every spot on the timeline where there is a solid dot in a gray frame is where it is present, and the empty circles in white frames are where it won't be present.  The following image should be something like what you'd be expecting, at this point.



Now it's really looking like a dmd animation!  Now let's see what we can do with this if we put some serious effort into making it flashy, with a few extra steps taken to make it appear a little more "clean" in the process.  As I stated before, I won't be going into the specifics of this right now, unless someone specifically asks for it.  You've already learned all the basic tools to achieve this kind of production yourself, so be creative and see what you can do!  I'd bet you're going to surprise yourself.



A pretty stylish dmd animation, if I do say so myself.  This concludes this guide, so I hope it has been helpful for all of you who were wondering how to do any of this or who were reluctant to give it a try without a push in the right direction.  Also, while I'm still pretty new to Python and programming in general, I have been a Flash developer for about 15 years now, so if anyone has any questions on something to do with Flash, by all means, post a reply or feel free to send me a PM about it, as I'd be glad to help.  Now get to making those dmd animations!
« Last Edit: January 26, 2011, 03:43:23 PM by Seven11 »
See the progress with the custom Predator machine!
http://www.skitbpinball.com/

Seven11

  • Wizard
  • *****
  • Posts: 228
    • View Profile
    • Skit-B Presents - Predator
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #4 on: January 23, 2011, 06:00:26 PM »
Also, if it will help anyone a little more to see what I've got here personally, I've uploaded all the files used in this tutorial to RapidShare as a .zip file.  You can download the whole thing at the following link.

http://rapidshare.com/files/444195319/Tutorial.zip
See the progress with the custom Predator machine!
http://www.skitbpinball.com/

Koen

  • Wizard
  • *****
  • Posts: 387
  • Koen Heltzel
    • View Profile
    • Dutch Pinball
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #5 on: January 24, 2011, 02:43:53 AM »
Nice work Kevin (?). Great guide, and Flash is quite easy to work with and can be a sufficient tool to create DMD graphics.

Steven

  • Wizard
  • *****
  • Posts: 467
    • View Profile
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #6 on: January 24, 2011, 04:32:04 AM »
Looks great! I'll have to try that sometime. I already did a bit with movie material and Flash, but did it in a simple way, that caused the movie to go from i.e. 460 x 640 to 32 x 128 (so though it looked nice after trying, everything was quite 'flat' ;) ).

I think it's good to have tutorials like this.

Seven11

  • Wizard
  • *****
  • Posts: 228
    • View Profile
    • Skit-B Presents - Predator
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #7 on: January 24, 2011, 11:13:30 PM »
Nice work Kevin (?). Great guide, and Flash is quite easy to work with and can be a sufficient tool to create DMD graphics.

Thanks for the compliments, guys.  Flash is extremely easy to work with once you know the ins-and-outs of what it can do, but in my experiences I've noticed that a lot of people are intimidated by it for some reason.  I was hoping this little guide would take away that fear and, even if they don't come away knowing how to use the program to its full extent, they can at least use it as a tool to get their dmd animations done.  Since my machine is based on a movie, as well as a lot of other users' project announcements, I thought it would be nice to have a resource like this available.  Hope it helps!

Sidenote:  Yes, this is Kevin.  My partner in my P-ROC project, David, doesn't use the forums here, mostly because he doesn't do any coding or circuitry-kind of work.  He focuses most of his efforts on assembling playfield parts and stuff like that while I bang my head on the keyboard. :-)
See the progress with the custom Predator machine!
http://www.skitbpinball.com/

ozzycriss

  • Jr. Member
  • **
  • Posts: 21
    • View Profile
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #8 on: January 25, 2011, 01:20:59 AM »
Kevin this is fantastic stuff thanx so much .

Im still trying to work out how get the software running offline without the P-ROC hardware . If anyone has a chance it would be great to see a setup for the software what to install ect 

This is what the community needs , lots of newbie step by steps .

Thanx again

Seven11

  • Wizard
  • *****
  • Posts: 228
    • View Profile
    • Skit-B Presents - Predator
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #9 on: January 25, 2011, 11:51:54 AM »
...it would be great to see a setup for the software what to install ect


Criss,
A good place to start would be in the thread I created a while back, which I will link at the end of this post.  While getting started, I ran into just about every beginner problem I could, and everybody walked me through it very nicely.  If you look through the thread and still can't quite get it, send me a PM with what you've done so far and I can try to get you through the rest of it.  I was going to make a guide like this one for getting the software set up, but I haven't hooked a P-ROC up to a machine yet and I would want the guide to be more complete.  I've gotten the software set up to run offline in both a WinXP-32 machine and a Win7-64 machine, so hopefully I'll be able to help you out.  

Here's the thread of me getting started.
http://www.pinballcontrollers.com/forum/index.php?topic=188.0

Here's Steven's thread.
http://www.pinballcontrollers.com/forum/index.php?topic=68.0

Koen and his trials with 64 bit Windows.
http://www.pinballcontrollers.com/forum/index.php?topic=113.0

JetFireMike getting set up.
http://www.pinballcontrollers.com/forum/index.php?topic=176.0

Adam's thread about offline development (another good starting point).
http://www.pinballcontrollers.com/forum/index.php?topic=174.0

Like I said, if this doesn't get you going, send me a PM and we can see what we can work out for ya.  

Also, if anyone thinks it would be a good idea to make a guide similar to this one about getting the software set up for offline development, let me know.  It might be helpful for some, I just wouldn't be able to include a transition to getting your software out to a P-ROC.  At least not for a little while yet.
« Last Edit: January 25, 2011, 11:53:39 AM by Seven11 »
See the progress with the custom Predator machine!
http://www.skitbpinball.com/

ozzycriss

  • Jr. Member
  • **
  • Posts: 21
    • View Profile
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #10 on: January 25, 2011, 11:56:36 PM »
Thanx Kevin

Will go thru the threads and see how i get along .

Again thanx for your efforts its a big help to someone like myself , and makes the learning curve much easier .

Criss

nirshem64

  • Newbie
  • *
  • Posts: 15
    • View Profile
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #11 on: January 26, 2011, 03:04:47 PM »
Nice work, it gave me a good idea for video source into my DMD Animation engine i built overl LINUX (Opengl).

Link: http://www.pinballcontrollers.com/forum/index.php?topic=152.0

Today the engine can display text (with movements) and animation (from animation GIF/PNG).
Using this thread i'll try to produce the Animation Gif from the video and run it on My DMD Engine,
Thanks




Seven11

  • Wizard
  • *****
  • Posts: 228
    • View Profile
    • Skit-B Presents - Predator
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #12 on: January 26, 2011, 03:51:24 PM »
Nirshem,

How hard would it be to make something like that for files with the .dmd extension?  It seems like it would be fairly simple as far as programs go, I just wouldn't know where to get started on such a thing.  Your engine looks pretty darn sweet, though, nice job!
See the progress with the custom Predator machine!
http://www.skitbpinball.com/

nirshem64

  • Newbie
  • *
  • Posts: 15
    • View Profile
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #13 on: January 27, 2011, 04:41:52 PM »
I'm not familier yet with DMD file format in order to answer this.

Can you share a DMD files so i'll try check the format and even try to check it with my engine ?

Thanks,

Nir

Seven11

  • Wizard
  • *****
  • Posts: 228
    • View Profile
    • Skit-B Presents - Predator
Re: Tutorial: Step by Step Guide for Converting Video to DMD Animations.
« Reply #14 on: January 27, 2011, 06:08:06 PM »
I'm in class right now and I don't have access to my PC for a little while, so I can't really throw a DMD file up from here. There is, however, the completed DMD file for this tutorial in the download link in the fifth post, if you wanted to grab that and give it a shot. If not, I'll be back around in a few hours and I can post one up.
See the progress with the custom Predator machine!
http://www.skitbpinball.com/