Scrollpane offsetting image issue

Report · Feb 06, 2014

Hi there,

I'm having an issue with the scrollpane in Flash CS5.5 using Actionscript 3. Each time I use it the image starts at the middle and is offset to the left. Here is what I mean:

How it should be:

How it is:

The code I'm using is:

spanetest.source = test1;

Not a coder at all so have pretty much no knowledge about this, if anyone can tell me in the simplist way I'd be so appriciative of it.

Report · Feb 06, 2014

I'm assuming that's a photoshopped example being the image is spilling out of the ScrollPane.

Couple things that are noticable, the first image fills the screen and the second in the ScrollPane looks nothing like it with a large amount of veritcal scroll available. Did you transform the first image to fit? If so, that transform needs to be applied to the image you're putting in the ScrollPane to look similar.

Aside that, ScrollPanes support scrolling both vertical and horizontal, and both can be configured. By default it allows scrolling both vertical and horizontal and is set to ScrollPolicy.AUTO, which means a scrollbar will appear in both directions if there is enough image to require it. In your picture you can see it detected your image is too tall so a vertical scrollbar appeared. It isn't detecting that your image is too wide however or your image would have a horizontal scroll control.

Are you sure the image you're inserting into the ScrollPane is correct? It looks like it's many screens tall, so you have a vertical scrollbar, yet far too narrow on width for that device's resolution.

Report · Feb 07, 2014

Yeah, the scroll bars on the bottom of the first image aren't really anything, ignore them.

The image I'm using has a width a little be less than the phone screen, so I made the scrollpane the same size as the screen, so there is no horizontal scroll.

In terms of image, I was imported an Ai file in the scrollpane, but then changed it to a PNG when I encounted this issue. Both PNG and AI cause this weird offsetting and starting at the top scenerio. I've tried moving the location of the image, more to the right but whereever I move it to it will always start half way through and off set to the left.

Report · Feb 10, 2014

Does this happen on the emulator?

What device is this happening on (brand/model), what size is your scrollPane set to and what is the resolution and DPI of the image? BTW since it's a component have you simply ran an invalidate() on it (e.g. myScrollPane.invalidate()) after you loaded the image or setSize so the ScrollPane can redraw itself properly?

Report · Feb 10, 2014

Emulator?

It happens every time I test the scene (ctrl+enter). In terms of devices I'm only using it on PC at the moment, the iPhone is just there as part of the artwork, the idea is that the image scrolls up and down the iPhone screen but run on PC/Mac. My PC is a Dell inspiron.

I thought it maybe the image so I tried just a coloured box with a line in the middle of it. Set it up same way as before ( spanetest.source = test1;) and it was still offsetting and starting in the middle.

Aside from the bit of code above I haven't done any other coding, as mentioned in the original post I'm a complete novice when it comes to flash.

Report · Feb 10, 2014

Emulator is just that, CTRL+ENTER (test movie). I was questioning if this was happening on your computer or just your device.

I'm assuming you're using at least AIR 4.0, if not please grab the latest here:

http://www.adobe.com/devnet/air/air-sdk-download.html

Player 12 here:

http://www.adobe.com/support/flashplayer/downloads.html

I'm using CS6 (doesn't matter) and made a new project, AIR for iOS, targeting iPhone 5 640x1136 portrait. I'm setting scrollDrag=true on the container so I can click and drag it. Here's a full code example if you want to test. Just open a new AIR for iOS file, drop a ScrollPane component in your library so the class is available and paste this code:

import flash.geom.Matrix;
import flash.display.Shape;
import flash.display.SpreadMethod;
import fl.containers.ScrollPane;
import fl.controls.ScrollPolicy;
// create top to bottom gradient for testing
// at 640px by 3000px
// matrix for vertical gradient
var matrix:Matrix = new Matrix();
matrix.createGradientBox(640, 3000, (Math.PI/180)*90, 0, 0);
// our visual, I'll just make it a shape
var box:Shape = new Shape();
box.graphics.beginGradientFill(GradientType.LINEAR,
                                                    [0xFF0000,0xFFFF00], // red to yellow
                                                    [1,1], // full alpha
                                                    [0x00,0xff], // full ratio
                                                    matrix); // vertical
box.graphics.drawRect(0,0,640,3000);
box.graphics.endFill();
// instantiate ScrollPane
var sp:ScrollPane = new ScrollPane();
// configure
sp.setSize(640,1136);
sp.horizontalScrollPolicy = ScrollPolicy.OFF;
sp.scrollDrag = true;
addChild(sp);
// set source
sp.source = box;

Or for ease here's the project saved down to CS5.5:

Example Source

Here's a video of this code running perfectly fine:

http://www.ertp.com/tmp/gradient.mp4

There must be something wrong with your source image. Be sure the DPI is 72 or 96 depending on your OS you're testing on.