I'm fairly new to making effects, and it's a miracle I have any hair left.
I have created the following effect so that I can transition between various
states of a component. The problem is that I want to reuse the same
component and not make a new one for every different screen. So I'm making
a bitmap snapshot, sliding that one out of the way and sliding in the new
one behind it.
I have two problems. Well, probably more once you read this code, as it's
kinda hacked together. But the two problems that happen are:
1) when the effect starts, the original box disappears then reappears. bad
flicker.
2) when the effect ends, there is a slight hitch at the end that makes it
look jumpy
Any tips on how I can fix these two problems, or any comments on other
errors in the code? Thanks.
Slide.as:
/////////////////////////////////////////////////////////////
package nes.effects
{
import flash.display.DisplayObject;
import flash.display.DisplayObjectContainer;
import mx.containers.Canvas;
import mx.effects.Effect;
import mx.effects.IEffectInstance;
import mx.events.EffectEvent;
import nes.effects.effectClasses.SlideInstance;
public class Slide extends Effect
{
public function Slide(target:Object=null)
{
super(target);
instanceClass = SlideInstance;
}
override public function getAffectedProperties():Array
{
return ["parent", "x", "y"];
}
override protected function initInstance(instance:IEffectInstance) :
void
{
super.initInstance(instance);
}
} // end class
} // end package
/////////////////////////////////////////////////////////////
SlideInstance.as:
/////////////////////////////////////////////////////////////
package nes.effects.effectClasses
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.DisplayObjectContainer;
import mx.containers.Canvas;
import mx.controls.SWFLoader;
import mx.effects.EffectInstance;
import mx.effects.Tween;
import mx.effects.easing.Bounce;
public class SlideInstance extends EffectInstance
{
public var before:DisplayObject;
private var canvas:Canvas;
private var tween:Tween;
public function SlideInstance(target:Object)
{
super(target);
}
private function createSnapshot(screen:DisplayObject):SWFLoader
{
var originalImage:BitmapData = new BitmapData(screen.width,
screen.height, true, 0);
originalImage.draw(screen);
var bmp:Bitmap = new Bitmap(originalImage);
var loader:SWFLoader = new SWFLoader;
loader.width = screen.width;
loader.height = screen.height;
loader.addChild(bmp);
return loader;
}
private var targetPercentHeight:Number;
private var targetPercentWidth:Number;
override public function play():void
{
before = createSnapshot(DisplayObject(target));
var dt:DisplayObject = DisplayObject(target);
var tp:DisplayObjectContainer = dt.parent;
var i:int = dt.parent.getChildIndex(dt);
canvas = new Canvas;
canvas.height = dt.height;
canvas.width = dt.width;
canvas.x = dt.x;
canvas.y = dt.y;
canvas.horizontalScrollPolicy = "off";
canvas.verticalScrollPolicy = "off";
canvas.autoLayout = false;
before.y = 0;
before.x = 0;
dt.y = canvas.height;
dt.x = 0;
targetPercentHeight = target.percentHeight;
targetPercentWidth = target.percentWidth;
target.height = target.height;
target.width = target.width;
canvas.addChild(before);
canvas.addChild(dt);
tp.addChildAt(canvas, i);
tween = new Tween(this, canvas.height, 0, duration, -1, tweenUpdate,
tweenEnd);
//tween.easingFunction = Bounce.easeOut;
super.play();
}
private function tweenUpdate(currentValue:Number):void
{
before.y = currentValue - before.height;
DisplayObject(target).y = currentValue;
}
private function tweenEnd(currentValue:Number):void
{
end();
}
override public function finishEffect():void
{
var cp:DisplayObjectContainer = canvas.parent;
var i:int = cp.getChildIndex(canvas);
var dt:DisplayObject = DisplayObject(target);
cp.removeChild(canvas);
target.percentHeight = targetPercentHeight;
target.percentWidth = targetPercentWidth;
cp.addChildAt(dt, i);
canvas = null;
super.finishEffect();
}
}
}
/////////////////////////////////////////////////////////////
SlideTest.mxml:
/////////////////////////////////////////////////////////////
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical"
paddingRight="0"
paddingLeft="0"
paddingTop="0"
paddingBottom="0"
>
<mx:Script>
<![CDATA[
import nes.effects.Slide;
private function slideit():void
{
var slide:Slide = new Slide(box);
ac.selectedIndex = (ac.selectedIndex + 1) % 2;
if (ac.selectedIndex)
box.setStyle("backgroundColor", 0xFF0000)
else
box.clearStyle("backgroundColor");
slide.duration = 2000;
//callLater(slide.play);
slide.play();
}
]]>
</mx:Script>
<mx:HBox id="topBox" height="100%" width="100%">
<mx:Canvas id="left" width="70%" height="100%" backgroundColor="green"/>
<mx:VBox id="box" width="30%" height="100%" borderStyle="solid"
borderThickness="1">
<mx:Text width="100%" text="someText"/>
<mx:Button label="Button" click="slideit()"/>
<mx:Accordion id="ac" width="100%" height="100%">
<mx:Canvas backgroundColor="blue" width="100%" height="100%"/>
<mx:Canvas width="100%" height="100%">
<mx:TextArea wordWrap="true" width="100%" height="100%">
<mx:text>
<![CDATA[Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Fusce ultricies, tellus sit amet semper accumsan, enim dui tincidunt
nisl, at bibendum massa erat in nisl. Sed consequat, mi a tempus
scelerisque, velit risus pulvinar velit, et sollicitudin lectus dui a orci.
Duis quis sem. Ut luctus consequat lacus. Aliquam iaculis. Cras blandit. In
placerat, erat vitae consectetuer tincidunt, mi nibh hendrerit orci, sit
amet aliquet leo risus sed odio. Sed volutpat vehicula sapien. Sed et ipsum.
Aliquam sem dui, feugiat et, ullamcorper vitae, consectetuer sed, neque.
Nunc eros. Mauris tincidunt. Fusce molestie ipsum aliquet urna. Donec ut
purus. Nunc ut elit commodo lacus fermentum dictum. Sed ac metus sit amet
nisl hendrerit nonummy. In quam ante, pulvinar quis, venenatis ut, accumsan
sit amet, nulla. Mauris faucibus purus. Etiam sollicitudin elementum nulla.
Vivamus et velit.
]]>
</mx:text>
</mx:TextArea>
</mx:Canvas>
</mx:Accordion>
</mx:VBox>
</mx:HBox>
</mx:Application>
/////////////////////////////////////////////////////////////
--
Jason
