Skip to main content
M
moloh12345
Participant
September 5, 2012
Question

scroll xml thumbnail grid by arrows

  • September 5, 2012
  • 1 reply
  • 1018 views

Hi


I'm new on this forum


I've got xml thumbnail grid, i creaded mask for it and now i want to scroll the grid but don't have idea how.


I wan't to have two arrows previous and next to scroll my thumbnail grid to next column.


here is my code :

import flash.net.URLLoader;

import flash.net.URLRequest;

import flash.events.Event;

import flash.display.MovieClip;

import flash.display.Loader;

import flash.events.MouseEvent;

import flash.display.Sprite;

var rows:Number;

var columns:Number;

var my_x:Number;

var my_y:Number;

var my_thumb_width:Number;

var my_thumb_height:Number;

var my_images:XMLList;

var my_total:Number;

var container_mc:MovieClip;

//maska

var mask_mc:Sprite;

var maskHeight:int = (my_thumb_height+10)*y_counter;

var maskWidth:int = (my_thumb_width+10) *3 ;

var x_counter:Number = 0;

var y_counter:Number = 0;

var myXMLLoader:URLLoader = new URLLoader();

myXMLLoader.load(new URLRequest("gallery.xml"));

myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void

{

   var myXML:XML = new XML(e.target.data);

   columns = myXML. @ COLUMNS;

   rows = myXML. @ ROWS;

   my_x = 20;

   my_y = 20;

   my_thumb_width = myXML. @ WIDTH;

   my_thumb_height = myXML. @ HEIGHT;

   my_images = myXML.IMAGE;

   my_total = my_images.length();

  

   createContainer();

   callThumbs();

   createMask();

  

}

function createContainer():void

{

   container_mc = new MovieClip();

   container_mc.x = my_x;

   container_mc.y = my_y;

   container_mc.buttonMode = true;

   container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);

   container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);

   addChild(container_mc);

}

function createMask():void{

   mask_mc  = new Sprite();

   mask_mc.graphics.beginFill(0x000000);

   mask_mc.graphics.drawRect(0,0,(my_thumb_width+10)*columns,(my_thumb_height+10)*rows);

   mask_mc.x = my_x;

   mask_mc.y = my_y;

   addChild(mask_mc);

   container_mc.mask = mask_mc;  

   mask_mc.cacheAsBitmap = true;

   container_mc.cacheAsBitmap = true;

  

}

function callThumbs():void

{

   for (var i:Number = 0; i < my_total; i++)

   {

      var thumb_url = my_images. @ image;

      var thumb_loader = new Loader();

      thumb_loader.load(new URLRequest(thumb_url));

      thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);

      thumb_loader.x = (my_thumb_width+10)*x_counter;

      thumb_loader.y = (my_thumb_height+10)*y_counter;

      if (y_counter + 1 < rows)

      {

         y_counter++;

      }

      else

      {

         y_counter = 0;

         x_counter++;

      }

   }

}

function thumbLoaded(e:Event):void

{

   var my_thumb:Loader = Loader(e.target.loader);

   container_mc.addChild(my_thumb);

}

arrowLeft.addEventListener(MouseEvent.CLICK,leftClick);

arrowRight.addEventListener(MouseEvent.CLICK,rightClick);

function leftClick(MouseEvent):void{

}

function rightClick(MouseEvent):void{

}

And now i don't have an idea how to move my thumbnail grid after click to arrow to next column or previous column.

I need to add something here but i don't know what:

arrowLeft.addEventListener(MouseEvent.CLICK,leftClick);

arrowRight.addEventListener(MouseEvent.CLICK,rightClick);

function leftClick(MouseEvent):void{

}

function rightClick(MouseEvent):void{

}

Please help !!!

Greetings.


This topic has been closed for replies.

1 reply

Ned Murphy
Ned Murphy
Legend
September 6, 2012

What you do with those functions depends on how you want things to scroll.  For starters you can just try using something like the following, and after you see what it does then you might be able to think about what you really want it to do.

arrowLeft.addEventListener(MouseEvent.CLICK,leftClick);

arrowRight.addEventListener(MouseEvent.CLICK,rightClick);

function leftClick(MouseEvent):void{

    container_mc.x += 100;  // arbitrarily chose 100 pixels

}

function rightClick(MouseEvent):void{

    container_mc.x -= 100; 

}

M
moloh12345Author
Participant
September 6, 2012

Yes i alredy make something like this:) and it work i want have effect like this but i wan't to use tween lite for scroll.

But with this script is a problem when you click two or three times to arrow it will scroll the grid by about 230 pixels. I want to always scroll grid one column next and previous and when i want to click three times fast i want to scroll three columns.

I know that have to add var index for column and then scroll grid for that index but i don't know how to start do it.

And i also want to have limit of scroll to not have a free spaces. Like when my grid is on x=0 previous button musst be disable and also when i scroll it to max next button have to be disable.

Any Idea how to do it ??

Greetings

Ned Murphy
Ned Murphy
Legend
September 6, 2012

Your first posting should have offered the detail your second posting does... that is why my response offered only a basic solution. 

If you images are all different widths, because of your desire to base the amount of scrolling on how many times you click, it will be necessary to store the location of each image in an array and use a counter to keep track of the clicks.  That counter will coincide with the index of the array.  So if you start at 0 clicks, when you have clicked three times you will go to the location designated by the x value defined in the array at index 3.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices