Creating a Swipable Gallery for Tablets

[Darci_Thornton]

I would like to create a photo gallery that will be seen in a publication on tablets using ActionScript 3in flash CS5.5.  I have little to no ActionScript experience.   I have created one that works before but it has less images.  When I try to create this new one there are too many images to convert it into a movie clip (which is how I've done previous ones).  All the tutorials I have found say to create a movie first but with this many images it's not working.  I have also seen some that us an xml file but that's not an option as I can only upload a .swf file with the publication and it does not allow me to upload an xml file.  The other solution would be to upload the xml to a local sever and point my .swf file there but I don't know how that will work if a person is trying to view the content offline. 

I am wondering if there is a way to use the swipe gesture to swipe to different points in the timeline.  That way I could put each of my images on the timeline and swipe to them.  I would use a tap or other gesture but I have already created the same photo gallery using jquery that is swipable and we want the same experience for people whether they are using the iPad or other device.  Or is this just above me and maybe we should look to hire someone to do this for us?

If you have code or know of a source where there is code that I can use to get this working I would really appreciate any help!

[kglad]

your jquery app will work for mobile users, too.  why are you creating a swf version?

[Darci_Thornton]

When you are creating a digital publication with interaction the jquery only works on iPads because the publication acts like an app itself.  HTML5 & Jquery do not work on an adroid based tablet.  Basically when you are viewing a publication on a android tablet it is an interactive pdf, therefore you have to use a .swf file in order for your interactive content to even be seen and work. So basically we have to create all of our intereactive content twice so that it can be viewed on both tablets.

[kglad]

are you building an app?

[Darci_Thornton]

There is an app yes.  We are not creating it we are having someone else do that.  We are creating the publication and the interactive content.

[kglad]

for an installed app, using html5 and jquery makes no sense and using flash makes sense.

and yes, you can mimic the native swipe functionality of idevices using the following code.  there's no need to use the timeline.  that would just add an extra complication.

private function listTouchBeginF(e:TouchEvent):void{

            if(this.listP.height>this.mask_mc.height){

                stage.addEventListener(TouchEvent.TOUCH_END,listTouchEndF,false,0,true);

                if(!this.listP.cacheAsBitmap){

                    this.listP.cacheAsBitmap = true;

                }

                // 150 and 300 are to allow drag beyond listP borders and allow tween back to borders.

                dragRect.y = this.mask_mc.y-this.listP.height+this.mask_mc.height-150;

                dragRect.height = this.listP.height-this.mask_mc.height+300;

                this.listP.startTouchDrag(e.touchPointID,false,dragRect);

                //startDragY = this.listP.y;

                //startDragTime = getTimer();

                this.listP.addEventListener(Event.ENTER_FRAME,listTouchMoveF,false,0,true);

            }

        }

        private function listTouchMoveF(e:Event):void{

            startDragY = this.listP.y;

            startDragTime = getTimer();

        }

        private function listTouchEndF(e:TouchEvent):void{

            stage.removeEventListener(TouchEvent.TOUCH_END,listTouchEndF,false);

            this.listP.removeEventListener(Event.ENTER_FRAME,listTouchMoveF,false);

            this.listP.stopTouchDrag(e.touchPointID);

            dragTime = getTimer()-startDragTime;

            // predict end point, duration.  if abs <500, converge slowly.  if abs>900, converge quickly

            velocity = 1000*(this.listP.y-startDragY)/dragTime;

            if(velocity>0){

                // lowerLimit = this.mask_mc.y, assigned in init()

                endY = Math.min(lowerLimit,this.listP.y+velocity);

            } else if(velocity<0){

                // this.listP.height changes depending on expanded/contracted titles

                upperLimit = this.mask_mc.y+this.mask_mc.height-this.listP.height;

                endY = Math.max(upperLimit,this.listP.y+velocity);

            } else {

                // velocity = 0;

                upperLimit = this.mask_mc.y+this.mask_mc.height-this.listP.height;

                endY = Math.min(lowerLimit,this.listP.y);

                endY = Math.max(upperLimit,endY);

            }

            //trace(velocity,this.listP.y,endY,upperLimit)

            if( (velocity>=0 && endY==lowerLimit) || (velocity<=0 && endY==upperLimit) ){

                duration = 1;

                TweenLite.to(this.listP,duration,{y:endY,ease:Quint.easeOut});

            } else {

                duration = (endY-this.listP.y)/velocity;

                TweenLite.to(this.listP,duration,{y:endY,ease:Quint.easeOut});

            }

        }

[Darci_Thornton]

Thank you for your help.  Like I said I am a newbie when it comes to ActionScript.  So I have a few questions.  Looking at the code it looks like I need to create a list.  Do I do that by dragging a TileLIst or List from the components box?  Then do I add my list items to the code somewhere?  I found this line of code is this what I can use to add my list items?

for(var i:int = 0 ; i < 10; i++) t.addItem({label:'item'(i+1),source:new Bitmap(new YourBitapData())});

Do I change where it says this.listP to the instance name I give my list?

[kglad]

listP (list parent) is just (an empty) movieclip that is parent to all the displayobjects you want to scroll.