gallery swiping app using array

Question

please help guys,, here is my code for my simple gallery android app for external images I made the loader is in array , and I made swiping action ,,

what I think I have to chose Wither removechild nor enter frame but I can't apply it coz when publish, things is mixed up and swiping is not working well :(

could you please help me to fix it it's AS3 at Flash 5.5

 var pictureArray:Array = new Array;

var loader1 = new Loader();
loader1.load(new URLRequest("1.jpg"));
pictureArray.push(loader1);

var loader2 = new Loader();
loader2.load(new URLRequest("2.jpg"));
pictureArray.push(loader2);

var loader3 = new Loader();
loader3.load(new URLRequest("3.jpg"));
pictureArray.push(loader3);

addChild(pictureArray[0]);
pictureArray[0].x = 0; pictureArray[0].y = 0; 
var n:int = 0;


Multitouch.inputMode = MultitouchInputMode.GESTURE;

var currentGalleryItem:Number = 1;
var totalGalleryItems:Number = 3;

stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, fl_SwipeToGoToNextPreviousFrame);

function fl_SwipeToGoToNextPreviousFrame(event:TransformGestureEvent):void
{
    if(event.offsetX == 1)
    {
        if(currentGalleryItem > 1){
            currentGalleryItem--;
            slideRight();
             removeChild(pictureArray[n]);
              n = n+1;

  if (n>pictureArray.length - 1)
    n=0;

  addChild(pictureArray[n]);
  pictureArray[n].x = 0; pictureArray[n].y = 0; 
        }
    }
    else if(event.offsetX == -1)
    {
        if(currentGalleryItem < totalGalleryItems){
            currentGalleryItem++;
            slideLeft();
             removeChild(pictureArray[n]);
             n = n-1;
             if (n<0)
    n=pictureArray.length - 1;

  addChild(pictureArray[n]);
  pictureArray[n].x = 0; pictureArray[n].y = 0;
        }
    }
}
var slideCounter:Number = 0;
function slideLeft(){
    (pictureArray[n]).addEventListener("enterFrame", moveGalleryLeft);
}
function slideRight(){
    (pictureArray[n]).addEventListener("enterFrame", moveGalleryRight);
}

function moveGalleryLeft(evt:Event){
    (pictureArray[n]).x -= 48;
    slideCounter++;
    if(slideCounter == 5){
        (pictureArray[n]).removeEventListener("enterFrame", moveGalleryLeft);
        slideCounter = 0;
    }
}
function moveGalleryRight(evt:Event){
    (pictureArray[n]).x += 48;
    slideCounter++;
    if(slideCounter == 5){
        (pictureArray[n]).removeEventListener("enterFrame", moveGalleryRight);
        slideCounter = 0;
    }
}

Answer 1

I would recommend load images on demand, for animation use some tweening engine(in my example It's TweenLite), and dispose previous frames, It's mobile device you should honour memory. Most of other comments in the code, I don't have ability to test in on the device, also It's not complete code, It's only carcass ;)

package {

    import com.greensock.TweenLite;

    import flash.display.Bitmap;
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.TransformGestureEvent;
    import flash.net.URLRequest;
    import flash.ui.Multitouch;
    import flash.ui.MultitouchInputMode;

    public class StackOverflow extends Sprite {
        private var _loader:Loader;
        private var _images:Array;
        private var _position:int;
        private var _currentFrame:Sprite;

        public function StackOverflow() {
            addEventListener(Event.ADDED_TO_STAGE, onAdded);
        }

        private function setup():void {
            _loader = new Loader();
            _images = ["1.jpg", "2.jpg", "3.jpg"];
            _currentFrame = new Sprite();

            _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImage);
            stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);

            addChild(_currentFrame);
            loadImageAtPosition(_position);
        }

        private function disposeFrame(frame:Sprite):void {
            //You can cache loaded bitmaps, or dispose them
            removeChild(frame);
            var bitmap:Bitmap = frame.getChildAt(0) as Bitmap;
            bitmap.bitmapData.dispose();
        }

        private function loadImageAtPosition(index:int):void {
            //By using one loader for all tasks, you will have only last requested image
            _loader.load(new URLRequest(_images[index]));
        }

        private function offsetScreenOn(direction:Number):void {
            var offset:int;
            var start:int;

            if (direction > 0) {
                //Direction to the right side
                offset = stage.stageWidth;
            } else {
                //Direction to the left side
                offset = -stage.stageWidth;
            }

            //Starting position for new frame
            start = -offset;

            //TweenLite is great for such task
            if (_currentFrame != null) {
                //Remove previous frame
                TweenLite.to(_currentFrame, 0.8, {x: offset, onComplete: disposeFrame, onCompleteParams: [_currentFrame]});
            }

            //Initialise new frame, fill them, decor them...
            _currentFrame = new Sprite();

            if (_currentFrame != null) {
                addChild(_currentFrame);
                _currentFrame.x = start;
                //Animate in new frame
                TweenLite.to(_currentFrame, 0.8, {x: (start + offset)});
            }
        }

        private function onLoadImage(e:Event):void {
            if (_currentFrame != null) {
                var image:Bitmap = _loader.content as Bitmap;
                if (image != null) {
                    image.smoothing = true;
                    _currentFrame.addChild(image);
                    //Resize, displace image for your needs
                    //Add appear animation if you want
                }
            }
        }

        //If you want, you can postpone swipe, while in state of transition
        private function onSwipe(e:TransformGestureEvent):void {
            //Left to Right swipe
            if (e.offsetX == 1) {
                if (--_position < 0) {
                    _position = _images.length;
                }

                offsetScreenOn(e.offsetX);
                loadImageAtPosition(_position);
            }

            //Right to Left swipe
            if (e.offsetX == -1) {
                if (++_position >= _images.length) {
                    _position = 0;
                }

                offsetScreenOn(e.offsetX);
                loadImageAtPosition(_position);
            }
        }

        private function onAdded(e:Event):void {
            removeEventListener(Event.ADDED_TO_STAGE, onAdded);

            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;

            Multitouch.inputMode = MultitouchInputMode.GESTURE;

            setup();
        }
    }
}

Answer 2

check this out

simple android gallery

it a basic implementation of a gallery app, it makes use of the android media provider to actually get images in the device storage and provides an image slider by using a viewPager and a RecyclerView as indicator, I will outline the important parts here, you can use a RecyclerView and a Recycler Adapter to display your images

public class picture_Adapter extends RecyclerView.Adapter<PicHolder> {

    private ArrayList<pictureFacer> pictureList;
    private Context pictureContx;
    private final itemClickListener picListerner;

    /**
     *
     * @param pictureList ArrayList of pictureFacer objects
     * @param pictureContx The Activities Context
     * @param picListerner An interface for listening to clicks on the RecyclerView's items
     */
    public picture_Adapter(ArrayList<pictureFacer> pictureList, Context pictureContx,itemClickListener picListerner) {
        this.pictureList = pictureList;
        this.pictureContx = pictureContx;
        this.picListerner = picListerner;
    }

    @NonNull
    @Override
    public PicHolder onCreateViewHolder(@NonNull ViewGroup container, int position) {
        LayoutInflater inflater = LayoutInflater.from(container.getContext());
        View cell = inflater.inflate(R.layout.pic_holder_item, container, false);
        return new PicHolder(cell);
    }

    @Override
    public void onBindViewHolder(@NonNull final PicHolder holder, final int position) {

        final pictureFacer image = pictureList.get(position);

        Glide.with(pictureContx)
                .load(image.getPicturePath())
                .apply(new RequestOptions().centerCrop())
                .into(holder.picture);

        setTransitionName(holder.picture, String.valueOf(position) + "_image");

        holder.picture.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                picListerner.onPicClicked(holder,position, pictureList);
            }
        });

    }

    @Override
    public int getItemCount() {
        return pictureList.size();
    }
}   

the method below gets all the device images and load the info for each image in a imageFacer object which you can use to populate the recyclerview adapter see the full post in the link above

public ArrayList<pictureFacer> getAllImagesByFolder(String path){
        ArrayList<pictureFacer> images = new ArrayList<>();
        Uri allVideosuri = android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
        String[] projection = { MediaStore.Images.ImageColumns.DATA ,MediaStore.Images.Media.DISPLAY_NAME,
                MediaStore.Images.Media.SIZE};
        Cursor cursor = ImageDisplay.this.getContentResolver().query( allVideosuri, projection, MediaStore.Images.Media.DATA + " like ? ", new String[] {"%"+path+"%"}, null);
        try {
            cursor.moveToFirst();
            do{
                pictureFacer pic = new pictureFacer();

                pic.setPicturName(cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DISPLAY_NAME)));

                pic.setPicturePath(cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA)));

                pic.setPictureSize(cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.SIZE)));

                images.add(pic);
            }while(cursor.moveToNext());
            cursor.close();
            ArrayList<pictureFacer> reSelection = new ArrayList<>();
            for(int i = images.size()-1;i > -1;i--){
                reSelection.add(images.get(i));
            }
            images = reSelection;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return images;
}