How to create a video background using frames and timer?

[sword117]

Im trying to create a video background using frames from a video, and using a timer to run the frames 30FPS , can someone help me out? its for a school project.

im here so far, i can make this work with a trackbar, but using a timer to automatically refresh the background 30FPS would be a lot more cool =).

 
 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Diagnostics;
using System.Threading;
 
namespace MyClock
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
 
        }
 
 
 
        private void Form1_Load(object sender, EventArgs e)
        {
            Text = "My Clock";
        }
 
        private void timer1_Tick(object sender, EventArgs e)
        {
            //timer1.Interval = 1000;
            //FPS set up
            double FPS = 30.0;
 
            timer1.Interval = Convert.ToInt32(FPS);
 
             Image[] images = new Image[2003];
             for (int i = 1; i < 10; i++)
             {
                 images[i] = Image.FromFile(@"C:\Users\Sword Master\Desktop\New folder (6)\PS3 Background Waves Attempt HD (08-07-2010 23-45-07)\PS3 Background Waves Attempt HD 000" + i + ".jpg");
                 this.BackgroundImage = images[i];
             }
           //test if the timer works
            label2.Text = DateTime.Now.ToLongTimeString();
        }
 
    }
}
 
 

[GaryTexmo]

We can't really do your homework for you, but we can help you out.

What question specifically do you have about a timer?

Here's something to try... on your form, drop down a timer. Set the interval to say, 1000 (milliseconds, 1 second). Attach a handler to the tick event and put something visible in there, maybe a Console.WriteLine("Ticked!");

Hopefully that's enough hint to get you started :)

[sword117]

@GaryTexmo
=) okay i already done that, but my question here is more like how do i put the timer to search the image[i] and show the images on a speed of 30 FPS, but my main problem is how to say that on the timer1_tick(like the interval), i really dont know where to start, i tried everything that i found on google and still had no results,please give me a light =)

[GaryTexmo]

Two things...

1) If you want to run through an image in an array, you'd going to need some kind of counter, right? A class member variable might be appropriate here... What I mean by this is, what is images[i]? You're accessing it via a for loop, right? Well, you kind of want to replace your for loop with the timer itself...

2) What does FPS actually mean? Frames per second. If you had 30 frames per second, how many seconds would it be per frame? Where on the timer can you enter an amount relating to seconds?

(Hopefully that nudges ya in the right direction. You've clearly stated what you want to do, you've just gotta play around with a timer to learn how you can use it to your advantage.)

[sword117]

@GaryTexmo
im using 2003 images, and i want to show them, but if i dont get to control the speed that they are showed i dont see the images, thats why i created a for, but im only doing it to 10 just like a test drive.

I say 30FPS because it shows 30 frames a second, i see in games that the img flows right, and im trying too do that, it actualy doesnt need to be 30FPS, just the speed need to flow nomal.

but thanks again =)

[sword117]

@sword117
Hello again =) i managed to what i want with a scrool bar, but i cannot control the trackbar value... so i thinked of the timer.

here is the code to create a flow of images.

  private void trackBar1_Scroll_1(object sender, EventArgs e)
        {
             Image[] images = new Image[2003];
                for (int i = 1; i < 10; i++)
                {
                    images[i] = Image.FromFile(@"C:\Users\Sword Master\Desktop\New folder (6)\PS3 Background Waves Attempt HD (08-07-2010 23-45-07)\PS3 Background Waves Attempt HD 000" + i + ".jpg");
 
                    if (trackBar1.Value == i)
                    {
                        this.BackgroundImage = images[i];
                    }
 
                }
                label1.Text = trackBar1.Value.ToString();
 
        }

[GaryTexmo]

im using 2003 images, and i want to show them, but if i dont get to control the speed that they are showed i dont see the images, thats why i created a for, but im only doing it to 10 just like a test drive.

I say 30FPS because it shows 30 frames a second, i see in games that the img flows right, and im trying too do that, it actualy doesnt need to be 30FPS, just the speed need to flow nomal.

but thanks again =)

Like I said, think about what frames per second actually means. That's the number of frames shown in a second. This value is easily converted to how many seconds we show each frame...

30 frames per seconds --> 1/30 seconds per frame, this is 33.33 milliseconds per frame. There's a place on your timer exactly for this.

Now what does your timer need to do? It needs to advance your frame counter, then update the drawing. In your case, the background image.

With the code you've posted, you'll never see more than 10 images cycle and only when the user scrolls the track bar. Keep on with the timer, you'll get there :D Just think about it and before you know it, you'll have one of those "oooooooh" moments.

By the way, it just so happens that about a year ago I did almost exactly this with a little animation from Mega Man X. You're welcome to see the code, but I'm going to make you figure this out first ;) Trust me, you'll be happier for it.

[sword117]

@GaryTexmo
Thank you very much! =) i made it lol
but now i have another problem, the form becomes unusable when i click it, or move it, button´s dont work...

i saw in the toolbox the background worker, if i put this code there will i be able to click on the form?

thanks a lot =)

private void timer1_Tick(object sender, EventArgs e)
        {
 
            Image[] images = new Image[2003];
            timer1.Interval = 1000 / 30;
 
            for (int i = 32; i <= 2001; i++)
            {
                if (i <= 2001)
                {
                    this.Refresh();
                    images[i] = Image.FromFile(@"C:\Users\Sword Master\Desktop\New folder (6)\PS3 Background Waves Attempt HD (08-07-2010 23-45-07)\1 (" + i + ").jpg");
                    this.BackgroundImage = images[i];
                    label2.Text = i.ToString();
 
 
                }
                else
                {
                    return;
                }
 
            }
 
        }

[GaryTexmo]

You're close, but not quite there :)

Take a look at what you're doing in your timer tick method. Every 33.33 milliseconds you're setting the timer tick to 33.33 milliseconds, then you're looping through every image in the list.

You do not need to do this. Your timer's tick method is what changes the drawn image. Read: You do not need the for loop at all.

Also, preload all your images into the image array in the constructor or form load event. Putting it in the timer tick event makes things very slow as every 33 milliseconds you're loading a file from the hard drive.

Let me try to put this another way. Your tick event just puts an image in the background. The tick happens whenever the timer's interval expires. The interval controls the framerate of the image drawing.

[sword117]

@GaryTexmo
i think i didnt understand you well xD

is it close to this? lol

        private void Form1_Load(object sender, EventArgs e)
        {
            Text = "My Clock";
            MyClock();
 
        }
 
        public void MyClock()
        {
            Image[] images = new Image[2003];
            for (int i = 32; i <= 2001; i++)
            {
                images[1] = Image.FromFile(@"Images\1 (" + i + ").jpg");
                this.BackgroundImage = images[i];
                label2.Text = i.ToString();
 
            }
        }
 
        private void timer1_Tick(object sender, EventArgs e)
        {
             timer1.Interval = 1000 / 30;
             this.Refresh();
        }
 

[GaryTexmo]

How come literally all of your data is local to the method? How come you don't use any class member variables?

http://msdn.microsoft.com/en-us/libr...8VS.71%29.aspx

Doing it like you are, everything you allocate gets destroyed as soon as you leave the method. Wouldn't it make more sense to allocate the images to a class member so that other methods could access them?

public class MyClass
{
  private Image[] images = new Image[2003];
 
  public MyClass()
  {
    // load images[...]
  }
 
  public void SomeMethod()
  {
    // this method can now access images[...]
  }
}

Your timer will tick every Interval, so why are you setting the interval again every time it ticks? You can set it once and it will not change until set elsewhere.

Lastly, think about what you want to do. You want to set an image to your background every X seconds such that the background will appear to animate. So why aren't you doing that? Your timer's tick method will go ahead and tick every 1000/30 seconds on and on, so what should you do in there to make your image animate?

What else do you need to keep track of what image is currently being shown? (Hint: See above... I've also said you need this in several posts above)

Keep at it, you're getting there. Just think about what you need and what you have.

You need your image changed every X seconds so that your background animates. You have a method that happens every X seconds.

[sword117]

is this right? i cant see the background..

public class Myclass
        {
           private Image[] images = new Image[2003];
 
            public Myclass()
            {
 
                for (int i = 1; i <= 440; i++)
                {
                    images[i] = Image.FromFile(@"Images\1 (" + i + ").jpg");
                }
 
            }
 
            public void MyClock()
            {
                Form1 form1 = new Form1();
                for (int i = 1; i <= 440; i++)
                {
                    form1.BackgroundImage = images[i];
                    form1.Refresh();
                }
            }
 

ive searched all over the web and i didnt find how to put timer count the this.background= images[];
im really desperate. please help =)

[sword117]

should i do this? http://msdn.microsoft.com/en-us/library/aa446493.aspx

[GaryTexmo]

ive searched all over the web and i didnt find how to put timer count the this.background= images[];
im really desperate. please help =)

What's stopping you from doing this...

public class Blah : Form
{
  private int m_currentFrame = 0;
  private Image[] m_images = new Image[2003];
 
  ...
 
  public void Timer_Tick(...)
  {
    this.BackgroundImage = m_images[m_currentFrame];
 
    m_currentFrame++;
    if (m_currentFrame > m_images.Length) m_currentFrame = 0;
  }
}

[sword117]

thank you very much! youre a life saver!!!
thanks x 1 million!!!

best regards =)


heres the final code =)

 private int m_countframe = 1;
        private Image[] m_images = new Image[2003];
 
    private void timer1_Tick(object sender, EventArgs e)
            {
 
 
                timer1.Interval = 1000 / 30;
 
                this.BackgroundImage = m_images[m_countframe];
                m_countframe++;
                m_images[m_countframe] = Image.FromFile(@"Images\1 (" + m_countframe + ").jpg");
                if (m_countframe > m_images.Length) m_countframe = 1;
}

[GaryTexmo]

Glad you got it working :)

I would still preload all your images in the constructor or form_load event first so you're not doing a disk read every cycle though. A disk read is very slow. If they're all precached in the array, you're just changing the reference to existing memory... ie, fast ;)

[sword117]

@GaryTexmo
OMG XD how do i preload the images in the form_load? xD

[GaryTexmo]

Well, you were already doing it in the constructor (see your post... #12), I'm not sure why you took it out. I don't see any reason why you couldn't just move that code to a form_load event instead if you wanted to do it there...

[sword117]

@GaryTexmo
so i did this but it doesnt work. i copy the code from post 12 but the program doesnt even open..
how should i put the code?

    private int CountFrames = 1;
        private Image[] Frames = new Image[5191];
        private void Form1_Load(object sender, EventArgs e)
        {
            Text = "My Clock";
 
            Frames[CountFrames] = Image.FromFile(@"Frames\1 (" + CountFrames + ").jpg");
 
        }
 
 
        private void timer1_Tick(object sender, EventArgs e)
        {
            timer1.Interval = 1000 / 30;
            CountFrames++;
 
            this.BackgroundImage = Frames[CountFrames];
            if (CountFrames > Frames.Length) CountFrames = 1;
 
}

[GaryTexmo]

That's not the code from the constructor in post 12 at all. Look again.

[sword117]

okay i got this, but it becomes very slow and the form takes a lot of time to appear, and the timer1.interval doesnt seem to apply to the timer...

public partial class Form1 : Form
    {
 
 
        private int CountFrames = 1;
        private Image[] Frames = new Image[5191];
 
 
        public Form1()
        {
            InitializeComponent();
 
            for (int i = 1; i <= 5190; i++)
            {
                Frames[i] = Image.FromFile(@"Frames\1 (" + i + ").jpg");
            }
 
        }
 
 
        private void Form1_Load(object sender, EventArgs e)
        {
            Text = "My Clock";
        }
 
 
        private void timer1_Tick(object sender, EventArgs e)
        {
            timer1.Interval = 1000 / 30;
            CountFrames++;
 
            this.BackgroundImage = Frames[CountFrames];
            if (CountFrames > Frames.Length) CountFrames = 1;
            progressBar1.Value = CountFrames;
            label1.Text = CountFrames + "%";
        }
 
    }

[sword117]

and when i execute the program it has 3.279.108k on task manager..

theres any solucion possible for reducing the memory?

[sword117]

@GaryTexmo
okay i got this, but it becomes very slow and the form takes a lot of time to appear, and the timer1.interval doesnt seem to apply to the timer.

and still when i execute the program it has 3.279.108k on task manager ,theres any solucion possible for reducing the memory? =)

 public partial class Form1 : Form
        {
 
 
            private int CountFrames = 1;
            private Image[] Frames = new Image[5191];
 
 
           public Form1()
          {
               InitializeComponent();
 
               for (int i = 1; i <= 5190; i++)
               {
                   Frames[i] = Image.FromFile(@"Frames\1 (" + i + ").jpg");
               }
 
           }
 
 
           private void Form1_Load(object sender, EventArgs e)
           {
               Text = "My Clock";
           }
 
 
           private void timer1_Tick(object sender, EventArgs e)
           {
               timer1.Interval = 1000 / 30;
               CountFrames++;
 
               this.BackgroundImage = Frames[CountFrames];
               if (CountFrames > Frames.Length) CountFrames = 1;
               progressBar1.Value = CountFrames;
               label1.Text = CountFrames + "%";
           }
 
       }
 
 

[GaryTexmo]

It's taking a lot of time to appear 'cause you're loading roughly 5200 images from the hard drive into memory. There's going to be a delay, the plus side is that now front-loaded and happens once per image. You're no longer loading the image from disk over and over every time you change the frame.

If you're concerned about this, you could always use a background worker to "buffer" the files and start playing as you're loading them from the disk. I don't mean to offend, but given what I've seen you do from this thread I think this might be a bit above your current abilities. Unless you have some pressing need to avoid the load delay at the start, just leave it. Otherwise you'll have to research background workers and threading, which you're free to do but it'll be some work :)

As for the timer not happening in the correct interval, your code looks right. Technically you don't need to set the timer interval over and over every timer tick (once in the constructor or designer is sufficient).

I actually plugged your code in and it's working fine. Did you create a new timer and forget to link up the tick event and/or enable it?

[sword117]

@GaryTexmo
well i only started c# about 8 months in the school, and my teacher doesnt teach us very much, so youre right, but im trying to learn all that i can, because i want to be a good programmer and thats my way of the ninja xD

but no i didnt create a new timer, i will search the web for the background worker. =) then if i dont know what to do im gonna create another post. thanks to you i learned new things and you have my thanks and best regards =)

[GaryTexmo]

Yea, don't take that to mean you shouldn't try, just that it may not be good to try just yet. Build your skills, then take a crack at it after. Sometimes it's best not to overwhelm yourself by trying to do too much at once.

Of course, if you're in for it you're in for it ;)

Regarding the timer, are you sure you didn't disable it somehow? I copy/pasted your code into a new project. I commented out the image stuff and just updated a progress bar/label with the counter. It worked just fine for me once I hooked the timer up to the timer_tick method. Make sure you check the events pane in the designer view for your timer. Also make sure enabled is set to true.

If your timer isn't working and everything is hooked up properly, then I'm not sure what the problem is. If you're still having trouble with it, post your designer file along with your source file and I can look.

Glad you learned something, good luck with the buffering if you do dive in :)

[sword117]

@GaryTexmo
sorry for the delay, but finally here is my project =)

http://www.mediafire.com/file/pq4cqc...lc/MyClock.rar

[GaryTexmo]

Ok, so I ran your code and the timer actually worked just fine for me. Not sure what problem you're having.

The problem I had was that it does indeed take a while to load and a ton of memory. I actually couldn't load the whole thing because my system doesn't have enough memory, which seems quite odd 'cause those pictures are only 34kb and 1000 images brings me up over 1gb.

I'm guessing there's a whole bunch of overhead associated with the image class, which is rather unfortunate actually.

What I also don't get is when I do this, as the program runs, the memory footprint actually decreases over time. Yea, I have no idea.

Actually, a bit of googling turned this up:
http://bytes.com/topic/net/answers/8...es-using-timer

I guess that when they're loaded into memory, they get uncompressed and are turned into bitmaps, hence the huge memory consumption. I don't get why the memory footprint decreases over time, but w/e.

Anyway, it turns out that I was wrong here. Apparently it's better to load it straight from the hard drive when needed... go figure! That's what I get for trying to be all efficient and whatnot.

You can remove the Image array and just load the image from the counter as you require it. My apologies for steering you in the wrong direction here!

[sword117]

@GaryTexmo
lol you dont need apologies, im very grateful for your help =)

[sword117]

@GaryTexmo
i got another problem that i didnt notice... when the image reaches the end it gives an error that the index was outside of the bounds of the array..

what can i do? =)

the current code is this(its the same that you got).

   private int m_countframe = 1;
        private Image[] m_images = new Image[2003];
 
        private void timer1_Tick(object sender, EventArgs e)
        {
            timer1.Interval = 1000 / 30;
            m_countframe++;
            m_images[m_countframe] = Image.FromFile(@"Images\1 (" + m_countframe + ").jpg");
            this.BackgroundImage = m_images[m_countframe];
            if (m_countframe > m_images.Length) m_countframe = 1;
 
      //progressBar1 Value 
            progressBar1.Value = m_countframe;
      //label1 Text
            label2.Text = m_countframe + "%";
 
      //time
            double hour = DateTime.Now.Hour;
            double min = DateTime.Now.Minute;
            double sec = DateTime.Now.Second;
 
            if (hour <= 13)
            {
                label1.Text = hour + ":" + min + ":" + sec + "am";
            }
            if (hour >= 13)
            {
                label1.Text = hour + ":" + min + ":" + sec + "pm";
            }
 
 
 
 
        }
 

[GaryTexmo]

Arrays are zero indexed in C#, which means the first item in the array starts from zero.

So...

string[] strArray = new string[] { "a", "b", "c", "d" };

strArray[0] == "a"
strArray[1] == "b"
... and so on ...

So when you start from 1, you're skipping the first iamge. Then when you access the max value, you're out of bounds.

You need to access from 0 to max value - 1.

Hope that helps.

[sword117]

@GaryTexmo
is this correct?

 
          private void timer1_Tick(object sender, EventArgs e)
        {
CountFrames++;
 
            if (CountFrames >= Frames.Length)
            {
                CountFrames = 0;
            }
            else
            {
                Frames[CountFrames] = Image.FromFile(@"Frames\1 (" + CountFrames + ").jpg");
                this.BackgroundImage = Frames[CountFrames];
            }
}
 

[GaryTexmo]

You can skip the array entirely now. Just do...

this.BackgroundImage = Image.FromFile(@"Frames\1 (" + (CountFrames + 1).ToString() + ").jpg);

You need the CountFrames + 1 because I noticed your image files start at 1, not 0.

I suppose you could also just do the count from 1 to MAX_FRAMES if you're not doing the array ;)

[sword117]

@GaryTexmo
it worked =) i didnt know that i could use "+(CountFrames + 1).toString() +". one more thing that i learned lol
thanks again =)