[meowbits]

Not asking for code, just what you think would be the way to go for implementing this.
One of my frames is going to have the something similar to this image, on the bottom part of the frame.

I want to click an arrow, and have all of the boxes shift that direction one space and I want the center box to expand slightly on all sides.
I want to show the movement when this happens.
The boxes are going to contain a small amount of text, and a background image
There will be ~70 boxes total.

Have not done anything with movement before and I would like it to be as smooth as possible without lagging the system.

fail image, use your head to flip -1/-2 around lol

This post has been edited by meowbits: 13 March 2012 - 08:15 AM

[modi123_1]

Okay so what's the issue? If the user click's the left button assign the -1 picture box to what was in -2's picture box.. -2 gets current, current get's +1... +1 get's +2... +2 gets something new. Do the reverse when clicking 'right'.

[meowbits]

Yes but I want to show the animation of going from one spot to another.
Is that possible? And what would be the best way to implement that if it was.

[modi123_1]

What do you mean "show the animation of going from one spot to another"?

[CharlieMay]

You could put the buttons in a panel, set the autoscroll to true, this should show a scroll bar at the bottom of the panel.

You can manipulate that scrollbar by increasing or decreasing the horizontalscroll.value of said panel.

[meowbits]

Sorry, what I mean is

If you clicked one of the arrows - say the right arrow. The "current" box would move to the right one spot, as that box goes from the "current" to "1" position you would see it happen. It would not be instantaneous. So you would see the box getting smaller and smaller until it was the same size as the other boxes. At the same time the boxes would be moving to the right and the new "current" box would be becoming larger and larger.

[ZRonZ]

meowbits, on 13 March 2012 - 09:54 AM, said:

Sorry, what I mean is

If you clicked one of the arrows - say the right arrow. The "current" box would move to the right one spot, as that box goes from the "current" to "1" position you would see it happen. It would not be instantaneous. So you would see the box getting smaller and smaller until it was the same size as the other boxes. At the same time the boxes would be moving to the right and the new "current" box would be becoming larger and larger.

Use a loop to add or subtract small increments to the horizontal position until it gets to the position you want it in. The small increments should give the illusion of movement. If it moves too fast, either make the increment smaller or put a timer in the loop to slow down the update based on the new increment.

[meowbits]

ZRonZ, on 13 March 2012 - 09:12 AM, said:

meowbits, on 13 March 2012 - 09:54 AM, said:

Sorry, what I mean is

If you clicked one of the arrows - say the right arrow. The "current" box would move to the right one spot, as that box goes from the "current" to "1" position you would see it happen. It would not be instantaneous. So you would see the box getting smaller and smaller until it was the same size as the other boxes. At the same time the boxes would be moving to the right and the new "current" box would be becoming larger and larger.

Use a loop to add or subtract small increments to the horizontal position until it gets to the position you want it in. The small increments should give the illusion of movement. If it moves too fast, either make the increment smaller or put a timer in the loop to slow down the update based on the new increment.

Ah, ty. I did not think of that.
Hopefully I can get that illusion without slowing the system.

[modi123_1]

Side note - I was able to make a quick proof of concept - and yes this is doable.. to the degree of smoothness is different story, but it works.. The key is knowing your states.

I threw together a user control that has an image and a rectangle for the size/location - totally blowing off the need for a bloated picturebox.

From there I added a timer (with events) and a tick set to 200.

Then I added my only state "isShrinking".


My new I set the rectangle to some arbitrary location and the height & width to 100. I also loaded the image and cranked out the timer.


What I have in my timer's tick is a quick evaluation of what state the control should be in: if isShrinking is set to true then do method "shrink" else do method "move left". At the end the tick event throws a "refresh" to invalidate the control and have the paint method take over.

Shrink just checks to see if the width is greater than or equal to a specific size - in my case 50. If not then it subtracts five from the height and width.

Move left is a simple <rectangle>.x -= 5 (I want it to move left by five pixels).

The paint method just draws the image at the specific location.

Much like a video game done in VB.NET the timer unifies the movements... and with the styles set right it down right looks professional.

[meowbits]

Thank you I am/will be following that. I'll be sure to post the code afterwards.
Didn't go to bed yet so it could be a while before I post it.

Dang sleep is a crutch

[meowbits]

How do I tell if I am clicking the left or the right arrow on a horizontal scroll button? Thanks.

[modi123_1]

You check the value changed.

[meowbits]

Oh wow...

[meowbits]

I can't get my head around this.

I have a row of 5 panels each containing an image.
This is what I am trying to do,

| 01 | 02 | 03 | 04 | 05 | <-- Any image in 01-05 is visible. Otherwise not
|img1|img2|img3|img4|img5|img6|img7|img8|....|imgX| <-- Collection of images




If you clicked the button to the right, images 1-5 would shift to the left, image 1 would disappear, and image 6 would become visible.
| 01 | 02 | 03 | 04 | 05 |
|img2|img3|img4|img5|img6|img7|img8|img9|....|imgX|




If you clicked the button to the left, images 2-6 would shift to the right, image 1 would re-appear, and image 6 would disappear.
| 01 | 02 | 03 | 04 | 05 |
|img1|img2|img3|img4|img5|img6|img7|img8|....|imgX|


So my question is, what do I need to do to make this? I don't want a row of 100 images loaded at all times when I only need to see 5 at any given time.

I also am showing the movement of images, so when you click either button, the images will move on a timer to show animation. I have the movement figured out.

[modi123_1]

A few things here.. first don't open duplicate topics.

Second - why are you using image boxes? the paint method's "e.graphics.drawimage" is where you need to be.