How to create Gallery like Android gallery in Flash AIR

Question

How to create gallery like Android gallery which is zoom-able, slide to navigate, and slide to next content when user slide zoomed image to the most right/left.

And in addition, the content(MovieClip) may contain interactive object like button & slider, is it possible to create with 1 finger navigation(touch event)? if not, maybe it should use 2 finger navigation (Panning).

I already do a few search on google, but the topic is uncommon to Flash Air so I haven't found it yet.

Thank you.

Answer 1

to break it down you will first need to load your images either from aa self contain loader, or give the user the option to choose there file: load image by user :

     var holder = new movieClip;
     Addchild(holder)
     var file:FileReference;
     var fileLoader:Loader;

      function start()
      {
      loadImageBtn.addEventListener(MouseEvent.CLICK, showDialog);
      }
      start();

      function showDialog(event:MouseEvent):void
      {
      file = new FileReference();

      var imageFileTypes:FileFilter = new FileFilter("Images (*.png; ","*.png;");

      file.browse([imageFileTypes]);
      file.addEventListener(Event.SELECT, selectFile);
       }

       function selectFile(e:Event):void
       {
      file.addEventListener(Event.COMPLETE, loadFile);
      file.load();
       }

       function loadFile(e:Event):void
       {
   fileLoader = new Loader();

   fileLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, displayImage);
   fileLoader.loadBytes(file.data);
       }

       function displayImage(e:Event):void
       {
   holder.addChild(fileLoader);
       }

Then you will need to be able to move around the content:

       var maxY:Number = 0;
       var minY:Number = Math.min(0,stage.stageHeight - holder.height - 300);
       var _startY:Number;
       var _startMouseY:Number;
       addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

       function mouseDownHandler(event:MouseEvent):void
       {
   _startY = holder.y;
   _startMouseY = mouseY;
   stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMoveHandler, false, 0, true);
   stage.addEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler, false, 0, true);
       }

       function stage_mouseMoveHandler(event:MouseEvent):void
       {
   var offsetY:Number = mouseY - _startMouseY;
   holder.y = Math.max(Math.min(maxY,_startY + offsetY),minY);
       }

       function stage_mouseUpHandler(event:MouseEvent):void
       {
   stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMoveHandler);
   stage.removeEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler);

       }

if you want several images as i imagine you would, you could literate through them, pushing each image into an array for storing, and place each item like a grid type pattern or in a column seprated by their own height or width.

            var array()
        for (i = 0; i <items; i++)
    {

        items.x =  170+ i * (item.width + 1);
                    //you can add child
    }

A better option probably be for each statment, using either an array or xml to grab each object..hope it helps