Tutorials »Development» Flash »ActionScript

Create MovieClip modal TopMost

Monday, November 12, 2007

Illustrate a technique to create symbols (MovieClip) procedures to be used similarly to components Alert and Window Flash. The aim is to show a MovieClip above all others, disabling - as well - access to the area below and any other object / component present. To be honest I have achieved all this by doing a little 'reverse engineering by the codes Adobe, which are clear! I do not have withstood ;)

The Artefizio that is used to disable any interface present below our MovieClip, is to create a transparent MovieClip that takes the whole area of the Stage. In this MovieClip, which will be virtually no visible hooks up a method "void" on the event onRelease being careful to set the property useHandCursor to false

First of all we create a movie with any interface on the main stage:

Interface

This consists of a TextField a TextInput and a button used to open our MovieClip modal: our custom pop.

When we added our symbol using attachMovie() what we will see will be:

MovieClip modal

I left in red alpha=10 the MovieClip ghost that hangs below the interface so as to be seen. Our symbol can be done in any way, just set in the properties an identifier (eg moviemodal) and the class 2.0 to MovieClipModal:

Settings symbol

Here is the class MovieClipModal:

PLAIN TEXT
ActionScript
  1. / *
  2. **
  3. ** File: MovieClipModal.as
  4. ** Author: Giovambattista Fazioli (g.fazioli @ undolog.com)
  5. ** Web: http://www.undolog.com
  6. ** Email: g (dot) Fazioli (at) undolog (dot) (com)
  7. ** Created: 08/11/2007 23.57
  8. ** Modified: 08/11/2007 23.57
  9. **
  10. **
  11. * /
  12. managers . DepthManager ; import mx. managers. DepthManager;
  13. / /
  14. MovieClip { MovieClipModal class extends MovieClip (
  15. / /
  16. __release : String = "1.0" ; private var __release: String = "1.0";
  17. / /
  18. __modal_mc : MovieClip ; private var __modal_mc: MovieClip;
  19. / /
  20. __movieWidth : Number = 0 ; private var __movieWidth: Number = 0;
  21. __movieHeight : Number = 0 ; private var __movieHeight: Number = 0;
  22. __left : Number = 0 ; private var __left: Number = 0;
  23. __right : Number = 0 ; private var __right: Number = 0;
  24. __top : Number = 0 ; private var __top: Number = 0;
  25. __bottom : Number = 0 ; private var __bottom: Number = 0;
  26. / /
  27. MovieClipModal function () (
  28. scaleMode = "noscale" ; Stage. ScaleMode = "noscale";
  29. addListener ( this ) ; Stage. AddListener (this);
  30. / /
  31. onLoad = _onLoad;
  32. onunload = _onUnload;
  33. / /
  34. width ; __movieWidth = Stage. width;
  35. height ; __movieHeight = Stage. height;
  36. )
  37. / *
  38. ** _onLoad () - Wrap onLoad MovieClip
  39. * /
  40. _onLoad ( ) { _onLoad private function () (
  41. / / AddListener (this);
  42. / /
  43. "__modal_mc" , DepthManager . kTopmost ) ; __modal_mc = _root. createEmptyMovieClip ( "__modal_mc" DepthManager. kTopmost);
  44. ( ) ; __modal_mc. Clear ();
  45. ( 0xff0000 , 100 ) ; __modal_mc. beginFill (0xff0000, 100);
  46. ( 0 , 0 ) ; __modal_mc. moveTo (0, 0);
  47. ( 100 , 0 ) ; __modal_mc. lineTo (100, 0);
  48. ( 100 , 100 ) ; __modal_mc. lineTo (100, 100);
  49. ( 0 , 100 ) ; __modal_mc. lineTo (0, 100);
  50. ( ) ; __modal_mc. endFill ();
  51. / /
  52. this ) ; __modal_mc. setDepthBelow (this);
  53. ; __modal_mc. _alpha = 10;
  54. / / _global.style.modalTransparency;
  55. = __modal_mc . useHandCursor = false ; __modal_mc. tabEnabled = __modal_mc. useHandCursor = false;
  56. / /
  57. ( ) { } ; __modal_mc. onRelease = function () ();
  58. / /
  59. onResize ();
  60. )
  61. / *
  62. ** _onUnload () - Wrap onUnload MovieClip
  63. * /
  64. _onUnload ( ) { _onUnload private function () (
  65. ; __modal_mc. removeMovieClip ();
  66. )
  67. / *
  68. ** OnKeyDown - Key wrap
  69. * /
  70. onKeyDown ( ) { onKeyDown private function () (
  71. Key . getCode ( ) == Key . TAB ) { if (key. getCode () == Key. TAB) (
  72. / / Selection.setFocus ();
  73. )
  74. )
  75. /************************************************* *******************************************
  76. ** OnResize () event
  77. ************************************************** ******************************************/
  78. onResize ( ) { onResize private function () (
  79. Number = Math . round ( Stage . width ) ; var sw: Number = Math. round (Stage. width);
  80. Number = Math . round ( Stage . height ) ; var sh: Number = Math. round (Stage. height);
  81. Number = Math . round ( this . __movieWidth ) ; var ow: Number = Math. round (this. __movieWidth);
  82. Number = Math . round ( this . __movieHeight ) ; var oh: Number = Math. round (this. __movieHeight);
  83. / /
  84. Math . floor ( ( ( sw - ow ) / 2 ) ) ; __modal_mc. _x = - Math. floor (((sw - ow) / 2));
  85. Math . floor ( ( ( sh - oh ) / 2 ) ) ; __modal_mc. _y = - Math. floor (((sh - oh) / 2));
  86. . width ; __modal_mc. _width = Stage. width;
  87. . height ; __modal_mc. _height = Stage. height;
  88. )
  89. )

This class is only an example and can be expanded and improved. However as it works fine. Of particular interest is the use of DepthManager for placement at depths of our MovieClip modal, thanks to constant kTopmost (lines 43 and 52).

Note also the presence (commentary in this version) to rows 41 and 70 of an additional handler for the keyboard. Our pop-ups, in fact, contains a button that removes a possible unexpected in this system. The addition of ghost MovieClip (lines 43 to 57) and the related event Artefizio onRelease() does not prevent some movements from the keyboard as pressing the TAB key. In some cases, therefore, may need to intercept keyboard activity prior to divert elsewhere, such as restoring fire to an internal control to our MovieClip modal.

Related Post

Was this article helpful?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags:

One comment to "Create MovieClip modal TopMost"

  1. getAvatar 1.0
    09 dic, 2007 upnews.it:

    undolog  »Blog Archive » Creating MovieClip modal TopMost ...

    Illustrate a technique to create symbols (MovieClip) procedures to be used similarly to components and Window Alert Flash. Lâ € ™ goal is to show a MovieClip above all others, disabling - even - € ™ lâ € ™ access to the underlying area ...

Leave a comment

TAG XHTML PERMISSIONS: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL