Question

I have two columns: the left one is a Canvas containing an mx:Tree and the right one is a Canvas containing a Canvas (to allow for scrolling) of some custom Sprites that go along with the tree nodes on the left. I made the right Canvas scrollable (horizontal and vertical) and I want the vertical scroll to also scroll the left Canvas so that the tree nodes line up with their representations on the right.

The scrolling portion works fine and when I embed with wmode=”window” there are no problems. Unfortunately, the customer requires dynamic HTML to overlap the Flash at times and when using wmode=”opaque” or “transparent”, there are issues. The scrolling still works, per se, but Flash does not seem to redraw either Canvas appropriately. The Canvases become out of sync and artifacts often remain on the right side.

I catch a scroll event on the right column and update the scroll position on the left column like so:

        public function onTimelineScroll(scrollEvent:ScrollEvent):void {
            leftColumn.verticalScrollPosition = rightColumn.verticalScrollPosition; 
        }

Removing this event listener allows the right column to draw correctly.

Any suggestions on how I can fix this? Unfortunately, wmode=”window” is not an option. Perhaps there is a better way to scroll?

Thanks.

Answer 1

Well, as horrible as the solution turned out to be, I ended up having to implement a hack to solve my problem. I added:

rightColumn.horizontalScrollPosition = rightColumn.horizontalScrollPosition + 1;
rightColumn.horizontalScrollPosition = rightColumn.horizontalScrollPosition - 1;

in order to force the canvas to redraw and it works flawlessly with no noticeable degradation in performance and no jerkiness. Now sure if there is a better way to force the canvas to redraw.