Image Gallery Flicker via ThrowProps (SOURCE included)

[needlemouse]

Hello Guys,

 

I just recently downloaded the new plugin by master jack called ThrowProps.

 

I hope I'm not asking too much, but im really weak when it comes to mathematical computations. Just wanna ask if there someone who can point me to the right direction

 

I basically want to create an image gallery (horizontal) and i want to browse through it like on iOS. Flick once, then it will show the next image, and so on...

 

Master Jack, if youre reading this, can you assist if you have the time

 

Thank You Sooo Much!!!

[GreenSock]

Actually, the way that type of thing (flicking to the next/previous panel) works on the iOS is much simpler than you might think. As far as I can tell, the logic is as simple as:

 

- Sense the direction of the flick movement (right or left)

- If the velocity is more than a particular (relatively low) threshold, do a simple easeOut tween to the next (or previous) panel. Maybe 0.5 seconds or so.

- If the velocity is below that threshold, just do an easeOut tween to the current panel (to snap it back into position)

 

That's it.

 

Make sense?

 

ThrowPropsPlugin is great for larger areas of content that get smoothly tweened, not so much for panel flicking. It actually could be great for an effect like zooming to further panels based on the flick velocity which might look visually cool but functionally speaking it's not ideal because users get frustrated if they see the panel they wanted fly past! Typically users would rather just always advance one panel at a time.

[needlemouse]

Thanks for the super quick reply Master Jack

 

I don't want to ask again without doing something first because I have an experience where some people gets easilly pissed off if you ask too much without doing anything first

 

So yeah, basically, I assembled a working sample of the Image Flicker and its basically usable (so people out there who likes to use this source, please go ahead ) You just click and drag and it will basically go to the next image.

 

The only thing I can't make to work is the threshold you mentioned on your previous post.

 

The images will only scroll IF, the X coordinate of the currently active image is greater than the stage / 2. I want it to scroll like the one you mentioned before, using an specific threshold. So if you flick it a bit faster, it will scroll, but if you flick it slow, it will just tween on its original position.

 

The files attached are the FLASH CS4 fla, the images (which are basically my artworks dedicated for Japan earthquake ), and the XML where the data of the images are stored.

 

And yeah, this source file is usable, I just want to improve it and work similar to the behaviour on iOS

 

PS: Im using full greensock library for animation and loading it rocks man!

[needlemouse]

Hmm, I can't upload the images because its too big. Just use any image and name it p1.jpg p2.jpg and so on...

[GreenSock]

Looks like you also forgot to upload your ActionScript file(s). Can't do much to troubleshoot without that.

[needlemouse]

Oh ******

 

here it is master Jack!

[GreenSock]

I think it'd be easier for me to just whip together a working example that demonstrates the concept. Then you can pick it apart and adapt it to whatever you need. Check it out here:

 

http://www.greensock.com/as/zip/PanelScrollExample.zip

 

Is that the effect you're lookin' for?

[needlemouse]

WOW! the code u used here is like 1/4th of my own code lols. Thank you very much Master Jack!!! Ill study the code right away Thanks again!!!

[needlemouse]

Hello Master Jack!

 

So I've studied the code and I pretty much understand some of it. The only thing that is a bit new to me is this basic method call of startDrag().

 

_container.startDrag(false, new Rectangle(_panelBounds.x - 9999, _panelBounds.y, 99999, 0));

 

Specifically the 9999 values. What does it mean?

[GreenSock]

The 9999 was just a big number that allows the object to slide really far to the right or left. I didn't want to cap it right at the edges because I wanted the user to be able to drag things beyond the edge just like on the iPhone/iPad. Make sense?