Hi,

#1
Code listing 25-1 - Rich Media Integration main app - is not to be found on the Wrox site code downloads.

#2
There is a Reflection tag after the mx:VideoDisplay. FB2 throws an error - it can't find it. How can I use the Reflection effect?

Thanks.

We are aware of item #1 and should have the code reposted in the next day or so.

As for item #2, I have asked the author(s) to respond here.

Chris Webb
Executive Editor

Chris Webb,
Executive Editor

The code for this is as follows:

Create a ActionScript class and then reference in MXML like the book example shows.

package
{
import mx.core.UIComponent;
import flash.display.DisplayObject;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.Event;
import mx.events.FlexEvent;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.display.Shape;
import flash.geom.Point;
import flash.display.BlendMode;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.filters.BlurFilter;

public class Reflection extends UIComponent
{
public var target:UIComponent;
public var bitmap:Bitmap = new Bitmap(new BitmapData( 1, 1, true, 0 ));
public var gr:Graphics;
public var fadeFrom:Number = 0.5;
public var fadeTo:Number = 0;
public var fadeCenter:Number = 0.4;
public var skewX:Number = 0;
public var scale:Number = 1;
public var delay:Number = 5;

private var timer:Timer;

public function Reflection():void
{
addChild(bitmap);
addEventListener( FlexEvent.CREATION_COMPLETE, drawReflection );

timer = new Timer(delay);
timer.addEventListener(TimerEvent.TIMER, onTimerComplete);
timer.start();
}

private function onTimerComplete(event:TimerEvent):void
{
drawReflection();
}

public function drawReflection( e:Event = null ):void
{
if( this.width>0 && this.height>0 )
{
// add blur
var blur:BlurFilter = new BlurFilter();
blur.blurX = 5;
blur.blurY = 5;

//draw reflection
var bitmapData:BitmapData = new BitmapData(this.width, this.height, true, 0);
var matrix:Matrix = new Matrix( 1, 0, skewX, -1*scale, 0, target.height );
var rectangle:Rectangle = new Rectangle(0,0,this.width,this.height*(2-scale));
var delta:Point = matrix.transformPoint(new Point(0,target.height));
matrix.tx = delta.x*-1;
matrix.ty = (delta.y-target.height)*-1;
bitmapData.draw(target, matrix, null, null, rectangle, true);

//add fade
var shape:Shape = new Shape();
var gradientMatrix:Matrix = new Matrix();
gradientMatrix.createGradientBox(this.width,this.h eight, 0.5*Math.PI);
shape.graphics.beginGradientFill(GradientType.LINE AR, new Array(0,0,0), new Array(fadeFrom,(fadeFrom-fadeTo)/2,fadeTo), new Array(0,0xFF*fadeCenter,0xFF), gradientMatrix)
shape.graphics.drawRect(0, 0, this.width, this.height);
shape.graphics.endFill();
bitmapData.draw(shape, null, null, BlendMode.ALPHA);

//apply result
bitmap.bitmapData.dispose();
bitmap.bitmapData = bitmapData;

}
}
}
}

Hey thanks! Impressively quick response!

The Reflection class works perfectly :) .. and it is quite lovely too. Nice one.

Hi again,

Some ideas with the reflection class..

#1 - distort it
e.g. to stretch the bottom corners wider, giving a perspective effect.

#2 - animated watery ripples effect
A more difficult problem. Doing it purely in math is one idea, but I would prefer to use a source of watery displacement frames - a FLV(?) or set of bitmaps.

..and of course, 1 + 2 would = a really nice 3D pool effect.


I am still learning Flex and would appreciate any pointers as to how to approach these ideas. (And my matrix math is rusty by about 20 years <gulp>..)

Thanks.

Since you have had some nice things to say about the book, how about letting everyone know with a review at Amazon.com?

Chris Webb,
Executive Editor

Done. If WROX support is this good across all your books then you guys go to the top of my list.

When I run it from a remote web server (the sandbox model changes) I get an error: (urls changed below)
SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: http://www.mysite.com/myflexproject.swf cannot access http://adiffserver.mysite.com/flv/myvideo.flv. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.
    at flash.display::BitmapData/draw()
    at ns::Reflection/drawReflection()
    at ns::Reflection/::onTimerComplete()
    at flash.utils::Timer/flash.utils:Timer::_timerDispatch()
    at flash.utils::Timer/flash.utils:Timer::tick()

There is a proper crossdomain.xml file on the root of adiffserver.mysite.com allowing access from *.

I don't see a way to set the checkPolicyFlag on the ms:Video object.

The flv plays fine without the Reflection class. The problem is something to do with accessing its bitmap.

Any ideas?

Thanks.
G.

Not sure why the policy file is not being checked properly and throwing the error. You can try explicitly loading a Policy file with the following code:

Security.loadPolicyFile("http://adiffserver.mysite.com/crossdomain.xml");

Make this call before trying to do the reflection.

That works. Thanks!