« Finding character positions

Visual Reflections in AS2

I’m currently working on a project where I’m using a bit of reflection, and although I found a couple of reflection classes on the web, I was looking for something that worked out of the box without too much hassle.

Basically I was looking for something that allowed me to do new Reflection(myClip) and be done with it 9 times out of 10.
Making a reflection is not that hard (although I need to work on the alpha and falloff, will post a new version later), but getting it to work right with scaled clips with weird registration points was a little harder.

Anyway I think I came up with something nice, and it performs quite well. You can download the source and a bunch of demo’s here Reflection demo’s

Here is a list of features:

  • simple setup by default. In most cases doing new ReflectionManager (sourceClip) will suffice
  • default setup is a clip that fades from 40 to 0 alpha at 40% of the image
  • you can change the falloff height, overall alpha, and the redraw interval (eg to mirror video)
  • retrievable reflection and source clips to apply filters or otherwise control clips
  • redraw interval is disconnected from framerate, specify a low redraw interval to save system resources
  • works with scaled, non top left regpoints, and masked clip, using an autobounds detection algorithm
  • works with negative scaled clips
  • tries to warn you in most cases when the result is likely to be different from what you expect
  • very high performance
  • no dependencies on non flash classes

    • A couple samples:

    The code:

    1. import flash.display.BitmapData;
    2. import flash.geom.Matrix;
    3. import flash.geom.Rectangle;
    4.  
    5. /**
    6. * ReflectionManager manages the reflection for one clip.
    7. *
    8. * Short feature set:
    9. * - simple setup by default. In most cases doing new ReflectionManager (sourceClip) will suffice.
    10. * - default setup is a clip that fades from 40 to 0 alpha at 40% of the image.
    11. * - you can change the falloff height, overall alpha, and the redraw interval (eg to mirror video)
    12. * - retrievable reflection and source clips to apply filters or otherwise control clips
    13. * - redraw interval is disconnected from framerate, specify a low redraw interval to save system resources
    14. * - works with scaled, non top left regpoints, and masked clip, using an autobounds detection algorithm
    15. * - works with negative scaled clips
    16. * - tries to warn you in most cases when the result is likely to be different from what you expect
    17. * - very high performance
    18. * - no dependencies on non flash classes
    19. *
    20. * @author J.C. Wichman, TriMM Interactive Media (www.trimm.nl / j.c.wichman@trimm.nl),
    21. * ObjectPainters.com (blog.objectpainters.com / j.c.wichman@objectpainters.com)
    22. */
    23. class nl.trimm.movieclip.Reflection {
    24.  
    25. private var _sourceClip:MovieClip = null; //reference to the source you want to mirror
    26. private var _sourceClipParentBounds:Rectangle = null; //the source bounds as interpreted by the parent
    27. private var _sourceClipLocalBounds:Rectangle = null; //the source bounds as interpreted by source itself
    28. //same as parentbounds for nonscaled, nontranslated clips
    29.  
    30. private var _reflectionClip:MovieClip = null; //contains _reflectionClipContent and _reflectionClipMask
    31. private var _reflectionClipContent:MovieClip = null; //contains resultbitmap into which source reflection is drawn
    32. private var _reflectionClipMask:MovieClip = null; //contains alpha mask used as fade out effect
    33.  
    34. private var _redrawMatrix:Matrix = null; //contains all transformation necessary to draw a scaled,
    35. //translated and flipped reflection of the source into the dest
    36. private var _redrawRectangle:Rectangle = null; //specifies clip on redrawing method
    37.  
    38. private var _resultBitmap:BitmapData = null; //contains result of drawing source into dest through matrix
    39. private var _updateIntervalId:Number = null; //redraw interval, use null for static images
    40.  
    41. private var _autoClear:Boolean = false; //auto clear the bitmap before redrawing
    42.  
    43. /**
    44. * The purpose of this reflection class is to make it as simple as possible to provide a working reflection,
    45. * yet give you the freedom to adjust what's needed.
    46. *
    47. * Restrictions:
    48. * - source and reflection share the same parent
    49. * - source should not be scaled, if you want to scale, either wrap the scaled clip, or scale the parent
    50. *
    51. * @param pTarget the object you want to create a reflection for
    52. * @param pAlpha the alpha of the reflection 0..1
    53. * @param pHeight the height of the reflection, 1 is the whole image height is used as fall off, 0 is no reflection, and
    54. * everything in between (0 .. 1)
    55. * @param pFrameRate the framerate for the redraw method
    56. * @param pBounds explicit bounds that define the area to be reflected, if these are not passed, bounds are auto detected,
    57. * based on what's visible at the moment of creation. The bounds are relative to the source clips coordinate
    58. * system. In other words, IMAGINE you edit the source clip, draw a rectangle around the area you want to see
    59. * reflected, and write down those bounds, THAT area defines the boundsrectangle.
    60. * @param pCustomClip an empty clip on the same parent as pSource that you would like to display the reflection.
    61. * The only reason I can think of to do so, is that this will allow you to apply filters to this
    62. * clip through the IDE instead of filter classes, which might be convenient for non coders.
    63. * @param pAutoClear often it's not necessary to auto clear the canvas again before redrawing, UNLESS you are moving
    64. * your content, and your content is transparent. By default autoclear is off, but you might want
    65. * to enable it.
    66. */
    67. public function Reflection(pSource:MovieClip, pAlpha:Number, pHeight:Number, pFrameRate:Number, pBounds:Rectangle, pCustomClip:MovieClip, pAutoClear:Boolean) {
    68. if (pAlpha != null && (pAlpha < 0 || pAlpha > 1)) trace ("pAlpha has to be > 0 < 1");
    69. if (pHeight != null && (pHeight < 0 || pHeight > 1)) trace ("pHeight has to be > 0 < 1");
    70.  
    71. if (_global.warn == null) _global.warn = trace;
    72.  
    73. _sourceClip = pSource;
    74. _setupReflection(
    75. pAlpha == null?40:pAlpha * 100,
    76. pHeight == null?0.4:pHeight,
    77. pBounds,
    78. pCustomClip
    79. );
    80. if (pFrameRate != null) setAutoUpdateFrameRate (pFrameRate);
    81. if (pAutoClear != null) _autoClear = pAutoClear;
    82. }
    83.  
    84. /**
    85. * Create a gradient required to create the fading out alpha effect
    86. */
    87. private function _setupReflection(pAlpha:Number, pHeight:Number, pBounds:Rectangle, pCustomClip:MovieClip) {
    88. //store short reference to the parent that contains our source, it will contain the reflection and
    89. //reflection alpha mask as well
    90. var lReflectionParent:MovieClip = _sourceClip._parent;
    91. if (pCustomClip == null) {
    92. _reflectionClip = lReflectionParent.createEmptyMovieClip (
    93. "reflection_[" + _sourceClip._name + "]",
    94. lReflectionParent.getNextHighestDepth()
    95. );
    96. } else {
    97. if (pCustomClip._parent != lReflectionParent) {
    98. _global.warn ("WARNING:the clip you have passed is not on the same timeline as the clip to reflect.");
    99. }
    100. _reflectionClip = pCustomClip;
    101. }
    102.  
    103. if (pBounds == null || (pBounds.width == 0 && pBounds.height == 0)) {
    104. //now get the local bounds
    105. var lBounds:Object = _sourceClip.getBounds(_sourceClip);
    106. _sourceClipLocalBounds = new Rectangle (lBounds.xMin, lBounds.yMin, lBounds.xMax - lBounds.xMin, lBounds.yMax - lBounds.yMin);
    107.  
    108. //an important thing to note is that flash returns a _width and _height based on unmasked content.
    109. //if you have a 100x100 clip, with a topleft mask of 50x50, the bounds will be based on the 100x100 size,
    110. //not on the 50x50. This causes an issue in a number of cases, and reflecting the clip is one of them:)
    111. //therefore we are going to check the visible area using the bounds we just established to check if we need to
    112. //adjust our bounds
    113.  
    114. //we create a bitmap to draw the clip into first
    115. var lBoundsDetectionBitmap:BitmapData = new BitmapData (_sourceClipLocalBounds.width, _sourceClipLocalBounds.height, true, 0x0);
    116. var lBoundMatrix:Matrix = new Matrix();
    117. //enforce top left
    118. lBoundMatrix.translate ( -_sourceClipLocalBounds.x, -_sourceClipLocalBounds.y);
    119. lBoundsDetectionBitmap.draw (_sourceClip, lBoundMatrix);
    120. //now detect visible area in the bitmap, and translate it back to the original origin
    121. var lVisibleBounds:Rectangle = lBoundsDetectionBitmap.getColorBoundsRect(0xff000000, 0xff000000, true);
    122. lVisibleBounds.offset (_sourceClipLocalBounds.x, _sourceClipLocalBounds.y);
    123. //dispose tha bitmap
    124. lBoundsDetectionBitmap.dispose();
    125.  
    126. lVisibleBounds.width = Math.ceil (lVisibleBounds.width);
    127. _sourceClipLocalBounds = lVisibleBounds;
    128.  
    129. } else {
    130. _sourceClipLocalBounds = pBounds;
    131. }
    132.  
    133.  
    134. //we can establish parent bounds using _sourceClip.getBounds(lReflectionParent), but the bounds might have
    135. //been prepassed or altered by getColorBoundRect detection, established etc, so we do it through globalToLocal,
    136. //localToGlobal so instead of
    137. //var lBounds:Object = _sourceClip.getBounds(lReflectionParent);
    138. //_sourceClipParentBounds = new Rectangle (lBounds.xMin, lBounds.yMin, lBounds.xMax - lBounds.xMin, lBounds.yMax - lBounds.yMin);
    139. //we do
    140. var xMinyMin:Object = { x: _sourceClipLocalBounds.x, y: _sourceClipLocalBounds.y };
    141. var xMaxyMax:Object = { x: _sourceClipLocalBounds.x+_sourceClipLocalBounds.width, y: _sourceClipLocalBounds.y+_sourceClipLocalBounds.height};
    142. _sourceClip.localToGlobal (xMinyMin);
    143. _sourceClip.localToGlobal (xMaxyMax);
    144. lReflectionParent._parent.globalToLocal (xMinyMin);
    145. lReflectionParent._parent.globalToLocal (xMaxyMax);
    146.  
    147. var lWidth:Number = xMaxyMax.x - xMinyMin.x;
    148. var lHeight:Number = xMaxyMax.y - xMinyMin.y;
    149. _sourceClipParentBounds = new Rectangle (xMinyMin.x, xMinyMin.y, Math.abs(lWidth), Math.abs(lHeight));
    150. //note that for an unscaled clip with left top registration these bounds will be equal
    151. //we will use the parent bounds as much as possible, in short this means that if you are reflecting a movieclip
    152. //that is 1000x1000 but scaled down to 10%, the reflection will only create a bitmap sized 100x100
    153.  
    154. //beside offsetting, we need to establish a reflection height, since we might want a greater falloff than a complete reflection
    155. var lReflectionHeight:Number = _sourceClipParentBounds.height * pHeight;
    156.  
    157. //we create a clip to be used as mask, and we draw an alpha gradient on it (yes it's possible:))
    158. _reflectionClipMask = _reflectionClip.createEmptyMovieClip ("mask", 0);
    159. _reflectionClipMask.lineStyle (0, 0x0, 0);
    160. var lBottomGradientMatrix:Matrix = new Matrix();
    161. lBottomGradientMatrix.createGradientBox(_sourceClipParentBounds.width, lReflectionHeight, Math.PI/2, 0, 0);
    162. _reflectionClipMask.beginGradientFill ("linear", [0xffffff, 0xffffff], [pAlpha, 0], [0, 255], lBottomGradientMatrix);
    163. _reflectionClipMask.moveTo (0, 0);
    164. _reflectionClipMask.lineTo (_sourceClipParentBounds.width, 0);
    165. _reflectionClipMask.lineTo (_sourceClipParentBounds.width, lReflectionHeight);
    166. _reflectionClipMask.lineTo (0, lReflectionHeight);
    167. _reflectionClipMask.lineTo (0, 0);
    168. _reflectionClipMask.endFill();
    169.  
    170. //now create reflection container
    171. _reflectionClipContent = _reflectionClip.createEmptyMovieClip ("content", 1);
    172. //and we set up our resulting bitmap
    173. _resultBitmap = new BitmapData (_sourceClipParentBounds.width, lReflectionHeight, true, 0x0);
    174. _reflectionClipContent.attachBitmap (_resultBitmap, 0, "none", true);
    175.  
    176. //align the reflection clip to the source
    177. _reflectionClip._x = _sourceClipParentBounds.x;
    178. _reflectionClip._y = _sourceClipParentBounds.y + _sourceClipParentBounds.height;
    179.  
    180. if (lWidth < 0) {
    181. _global.warn (
    182. "Source clip has been scaled negatively horizontally, trying to adjust, this will hurt performance." +
    183. "Try to wrap the source clip in another clip."
    184. );
    185. _reflectionClipContent._xscale = -100;
    186. _reflectionClipContent._x += _reflectionClipContent._width;
    187. _reflectionClip._x -= _reflectionClipContent._width;
    188. }
    189. if (lHeight < 0) {
    190. _global.warn ("Source clip has been scaled negatively vertically, trying to adjust, this will hurt performance." +
    191. "Try to wrap the source clip in another clip."
    192. );
    193. _reflectionClipContent._yscale = -100;
    194. _reflectionClipContent._y += _reflectionClipContent._height;
    195. _reflectionClip._y -= _reflectionClipContent._height;
    196. }
    197.  
    198. //hook up the mask and set cacheAsBitmap to true so the alpha in the mask is applied to
    199. _reflectionClipContent.setMask (_reflectionClipMask);
    200. _reflectionClipContent.cacheAsBitmap = true;
    201. _reflectionClipMask.cacheAsBitmap = true;
    202.  
    203. //the redraw matrix is just one matrix, no matter how many operations you add. So it doesn't hurt
    204. //to keep operations separated for clarity. View the redraw matrix from the perspective of the source clip:
    205. _redrawMatrix = new Matrix();
    206. //first we 'enforce' a top left registration point
    207. _redrawMatrix.translate ( -_sourceClipLocalBounds.x, -_sourceClipLocalBounds.y);
    208. //then we scale the relation between parent and child, if the parent bounds for clip a say the clip is 200 wide,
    209. //and the local bounds say 400, appearently is has been scaled by 50 percent
    210. _redrawMatrix.scale (_sourceClipParentBounds.width/_sourceClipLocalBounds.width, _sourceClipParentBounds.height/_sourceClipLocalBounds.height);
    211. //now flip the whole thing upside down
    212. _redrawMatrix.scale (1, -1);
    213. //and move it down again to we can see it
    214. _redrawMatrix.translate (0, _sourceClipParentBounds.height);
    215.  
    216. //everything is tranformed so it fits within this rectangle:
    217. _redrawRectangle = new Rectangle (0, 0, _sourceClipParentBounds.width, lReflectionHeight);
    218.  
    219. //if original clip has filters attached, warn.
    220. if (_reflectionClip.filters.length > 0) {
    221. _global.warn (
    222. "Warning source clip has filters. You might want to wrap this clip in a parent clip without filters, " +
    223. "or pass correct bounds. You might want to add yourReflection.getReflection().filters = yourSourceClip.filters."
    224. );
    225. }
    226.  
    227. //redraw once to get started
    228. redraw();
    229. }
    230.  
    231. public function redraw() {
    232. if (_autoClear) {
    233. //seems faster than a fillRect but fillRect less processor intensive
    234. //_resultBitmap.dispose();
    235. //_resultBitmap = new BitmapData (_redrawRectangle.width, _redrawRectangle.height, true, 0x0);
    236. //_reflectionClipContent.attachBitmap (_resultBitmap, 0, "none", true);
    237. _resultBitmap.fillRect (_redrawRectangle, 0x0);
    238. }
    239. _resultBitmap.draw (_sourceClip, _redrawMatrix, null, null, _redrawRectangle, true);
    240. }
    241.  
    242. public function setAutoUpdateFrameRate(pFrameRate:Number) {
    243. //clear any old intervals
    244. if (_updateIntervalId != null) {
    245. clearInterval (_updateIntervalId);
    246. _updateIntervalId = null;
    247. }
    248.  
    249. //if no interval specified exit
    250. if (pFrameRate == null) return;
    251.  
    252. _updateIntervalId = setInterval (this, "redraw", Math.round (1000/pFrameRate));
    253. }
    254.  
    255. public function setAutoClear (pAutoClear:Boolean) {
    256. _autoClear = pAutoClear;
    257. }
    258.  
    259. public function getReflection():MovieClip {
    260. return _reflectionClip;
    261. }
    262.  
    263. public function getSourceClip():MovieClip {
    264. return _sourceClip;
    265. }
    266.  
    267. public function finalize() {
    268. setAutoUpdateFrameRate (null);
    269. _sourceClip = null;
    270. _reflectionClipContent.setMask (null);
    271. _reflectionClipContent = null;
    272. _reflectionClipMask = null;
    273.  
    274. _reflectionClip.removeMovieClip();
    275. _reflectionClip.filters = null;
    276. _reflectionClip = null;
    277.  
    278. _resultBitmap.dispose();
    279. }
    280.  
    281. }
    282. Download this code: Reflection.as

    A couple of screenshots of the other demo’s:
    Difference process

    This entry was posted on Sunday, November 23rd, 2008 at 3:35 pm and is filed under AS2, Flash, Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

    3 Responses to “Visual Reflections in AS2”

    1. Sorv Says:
      November 24th, 2008 at 12:12 pm

      One note, if (_reflectionClip.filters.length > 0) should be if (_sourceClip.filters.length > 0), I’ll fix this tonight. It ony applies to the warnings given not the functionality

    2. Paul Says:
      November 24th, 2008 at 3:52 pm

      Looks awesome!

    3. ochtendhumeur » Reflecties in Flash Says:
      November 26th, 2008 at 10:33 am

      […] Op het blog van Hans (mijn zwager) zag ik dat hij bezig is met een hele makkelijke manier te programeren om van die mooie reflecties te krijgen met flash. Dus misschien voor de webnerds onder ons interessant om even te kijken. Source files en uitleg staan er allemaal bij. objectpainters.com […]

    Leave a Reply