• 
• 
• 
• 
• 
• 
• 
• 2

November 2009

3D-Verbiegungen in Flash

Fortsetzung, Teil 2

Krumme Dinger in der dritten Dimension

(Link zum Artikel: http://www.createordie.de/cod/artikel/2657)

Schon ist es verdreht

In wirklich kürzester Zeit haben wir nun zwei Würfel erstellt, die zwar, wie schon oft gesehen, per Mausklick auf der y-Achse rotieren, sich dabei aber zusätzlich gummiartig in sich selbst verdrehen. Das sorgt für neuen Schwung und Abwechslung in der sonst so gewohnten Animationsmechanik.

Wer jetzt aber an dieser Stelle den eben beschrieben Sourcecode schon kopiert und verwendet hat, wird sich just mit einigen Error-Meldungen befassen. Das rührt daher, dass unseren Würfeln noch die generativen Texturen fehlen, ohne die das BitmapMaterial hier nun mal nicht verwendet werden kann. Das sowie den Kernaufruf von kontinuierlicher Texturgenerierung und den 3D-Würfel-Modifizierer reiche ich hiermit nach.

1. package {
3. ///////////////////////////////////
4. // import used classes
5. ///////////////////////////////////
6. import flash.display.*;
7. import flash.events.*;
8. import flash.filters.*;
9. import flash.geom.*;
10. import flash.media.*;
11. import flash.utils.*;
13. ///////////////////////////////////
14. // class
15. ///////////////////////////////////
17. public class Main extends Sprite {
19. private var core :TwistyCubes;
20. private var surface :RgbScroller;
22. ///////////////////////////////////
23. // class constructor
24. ///////////////////////////////////
26. public function Main() {
28. surface = new RgbScroller( 500, 500 );
30. core = new TwistyCubes();
31. core.surface = surface.surfaceMap;
32. core.vortex = surface.bgMap;
34. addChild( surface );
35. addChild( core );
37. stage.quality = StageQuality.LOW;
39. }
40. }
41. }
43. public class RgbScroller extends Sprite {
45. public var bufferMap :BitmapData;
46. public var bgMap :BitmapData;
47. public var surfaceMap :BitmapData;
48. private var perlinMap :BitmapData;
49. private var bmp :Bitmap;
51. private var disp :DisplacementMapFilter;
52. private var conv :ConvolutionFilter;
54. private var colors :Array;
56. private var w :int = 0;
57. private var h :int = 0;
58. private var cnt :int = 0;
59. private const colorShade :int = 48;
60. private const sx :Number = Math.sin( ( -17800 ) % 3050 * 0.0315 * Math.PI / 180 );
61. private const sy :Number = Math.cos( ( -17800 ) % 3050 * 0.0315 * Math.PI / 180 );
62. private var pnt :Point = new Point;
63. private const mtr :Matrix = new Matrix( 1, 0, 0, -1, 0, 500 );
65. private var pi :Number = Math.PI;
66. private var sin :Function = Math.sin;
67. private var cos :Function = Math.cos;
69. ///////////////////////////////////
70. // class constructor
71. ///////////////////////////////////
73. public function RgbScroller( w:int, h:int ) {
75. this.w = w;
76. this.h = h;
77. this.cnt = 0;
78. this.colors = ColorPalette.create16ColorsArray( this.colorShade );
80. this.bufferMap = new BitmapData( this.w, this.h, false, 0xFF0000 );
81. this.bgMap = new BitmapData( this.w, this.h, false, 0xFF0000 );
82. this.perlinMap = new BitmapData( this.w, this.h, false, 0x808080 );
83. this.surfaceMap = new BitmapData( this.w, this.h, false, 0xFF0000 );
85. this.bmp = new Bitmap( this.bgMap );
87. ///////////////////////////////////
88. // setup: filter(s)
89. ///////////////////////////////////
91. this.perlinMap.perlinNoise( 100, 100, 10, 1, true, true, 7, true );
92. this.disp = new DisplacementMapFilter( this.perlinMap, null, BitmapDataChannel.RED, BitmapDataChannel.BLUE, this.sx * 200, this.sy * 200, "clamp" );
93. this.conv = new ConvolutionFilter( 3, 3, new Array( 0, 20, 0, 20, -80, 20, 0, 20, 0 ), 20 );
95. ///////////////////////////////////
96. // add
97. ///////////////////////////////////
99. addChild(this.bmp);
101. ///////////////////////////////////
102. // event(s)
103. ///////////////////////////////////
105. addEventListener( Event.ENTER_FRAME, onUpdateFrame );
107. }
109. private function onUpdateFrame(evt:Event):void{
111. var _sx :Number;
112. var _sy :Number;
114. var mod :int = 3050;
115. var i :int = 0;
116. this.cnt = getTimer() / 10;
118. while ( i < this.h ) {
120. this.bufferMap.fillRect( new Rectangle( 0, i, this.w, 1 ), this.colors[ ( i + this.cnt ) % ( colorShade << 4 ) ] );
121. i++;
122. }
124. this.surfaceMap.applyFilter(this.bufferMap, this.bufferMap.rect, this.pnt, this.disp );
126. this.bgMap.draw( this.bufferMap, this.mtr );
128. }
129. }

Der Quellcode steht auch als Download bereit.

Noch mehr Verdrehtes

Auf den Geschmack gekommen? Die komplette Bibliothek kann über http://code.google.com/p/as3dmod/ heruntergeladen werden. Noch mehr abgedrehte Beispiele hält Bartek Drozdz, der Entwickler der AS3mod-Lib, in seinem Blog bereit (http://www.everydayflash.com/blog/index.php/2008/09/26/update-as3dmod-1/). Natürlich muss man dieses Add-on nicht benutzen, sondern kann auch getrost Verbiegungen, Verdrehungen oder sonst welche Verformungen selbst per Script berechnen – aber für solide Resultate, die noch dazu zeitlich schnell herzustellen sind, ist AS3mod eine wirklich gute Lösung.

Frank Reitberger arbeitet und entwickelt als Flash-Teamleiter für anyMOTION GRAPHICS Internet- und Offlineanwendungen im B2C- und B2B-Bereich. Frank veröffentlicht unter seinem Nickname „pwdVergesser“ auch viele seiner kleinen Flash Snippets im Flashforum sowie in seinem Blog www.prinzipiell.com

• 1
• 2

 

• prinzipiell.com

• Gute Kommentare werden belohnt.
•   (optional)
•   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
•    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
• Dein Kommentar (HTML- und sonstige Codeelemente werden nicht angezeigt)
• -+
• 

• 3d,
• alternativa3d,
• augmented reality,
• away3d,
• cs4,
• flash,
• papervision3d,
• physics,
• sandy3d