Using a Flex Component as a Material

Tuesday, March 31st, 2009 | examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	layout="absolute" 
	minWidth="640" 
	minHeight="480" 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	applicationComplete="applicationCompleteHandler(event)"
	>
	<mx:Script>
		<![CDATA[
			import org.papervision3d.objects.primitives.Plane;
			import org.papervision3d.materials.MovieMaterial;
			import org.papervision3d.view.BasicView;
			import mx.events.FlexEvent;
 
			private var plane:Plane;
			private var basicView:BasicView;
 
			protected function applicationCompleteHandler(event:FlexEvent):void
			{
				basicView = new BasicView(width, height);
				rawChildren.addChild(basicView);
				basicView.camera.focus = 10;
				basicView.camera.zoom = 100;	
				basicView.viewport.interactive = true;
 
				var material:MovieMaterial = new MovieMaterial(myAwesomePanel, true, true, true);
				material.interactive = true;
				material.smooth = true;
				material.doubleSided = true;
 
				plane = new Plane(material, myAwesomePanel.width, myAwesomePanel.height, 10, 10);
 
				basicView.scene.addChild(plane);
 
				addEventListener(Event.ENTER_FRAME, enterFrameHandler);
			}
 
			private function enterFrameHandler(event:Event):void
			{
				plane.rotationY++;
				basicView.singleRender();
			}
 
 
			protected function button_clickHandler(event:MouseEvent):void
			{
				textArea.text = "";
			}
 
		]]>
	</mx:Script>
	<mx:Panel 
		id="myAwesomePanel" 
		width="204"
		height="160"
		verticalAlign="middle" 
		layout="vertical" 
		horizontalAlign="center"
		includeInLayout="false"
		blendMode="{BlendMode.ERASE}"
		x="-1000"
		y="-1000"
		>
		<mx:TextArea id="textArea" text="Blah blah blah"/>
		<mx:Button label="Click to clear text" click="button_clickHandler(event)"/>
	</mx:Panel>
</mx:Application>
  • Dan Lines
    Has anyone tried using this approach with flex charts? I am able to make the charts interactive but the datatips do not appear in the correct location (they appear where the hidden panel is located). If anyone has any suggestions please let me know!
  • mores
    When viewing this panel, it is not as sharp and crisp as a plain Flex panel. ( It looks like it is slightly out of focus ).

    What can be done ( if anything ) to make this Flex Material Panel look exactly like a Flex Panel ?
  • here is the solutiion for the scrollbars problem using scrollPolicy=”on”

    http://labs.wispagency.com/?p=...
  • Aleks
    is there any good way to make the hand cursor to show on rollover on the button ?
  • just a side note. using -X and -Y will work. but flex actually spends some time deciding if it needs to render that stuff or not, every frame. my solution is to wrap your panel in a canvas. then set the canvas.visible=false and keep the panel visible. flex will see the stuff is invisible and not worry about it, yet PV3D will still have access to your objects and they are still interactive!
  • @flamander & other flash requests. You need to get the handle from the material.movie level and then use standard events to access them. check link to my name above for a sample
  • Nawara
    Hi John - that's a very good example. However, when I try it I cannot click the button nor enter text in the text area.. Any ideas why?
  • Hias! Is there an example for Flash?
    I tried the same but it ignores the Mouse click.. I can write and give enter or tab betwwen controls but cant click on them it doenot recognize. I am usign the lastest as3 papervision from svn with Flash CS3. ^_^
  • Correction: the scrollbars don't work within the Panel but this seems to be the case for objects that are added to MovieMaterial.

    By the way great example - thanks for posting.
  • Question: If the scrollPolicy="on" within the Panel and content extends beyond the height, the scrollbars don't work within MovieMaterial? Why is this?
  • Cool! 3D spinny forms. I was inspired, so I had to go and make a 3D spinny form in flash too.
  • I have a question.
    If your TextArea has more words than text="Blah blah blah", the Scroll disables interactivity.
  • John Lindquist
    @Peter - setting visible to false disables interactivity.
  • keyriest
    john - well done, thanks for your time. this works to assuage my concerns as to the ability to do this. that said, I'm still curious if it's possible to do this without referencing an mxml component by id. is there anyway to simply add a new Label() (for example) to a panel at runtime?
  • Isn't visible=false as fast as x/y = -1000 ?
blog comments powered by Disqus

Search

Recommended Books

Speaking at FITC Toronto

 

March 2009
M T W T F S S
« Feb   Apr »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Preferred Video Tutorial Resolution

  • 1024x768 (53%, 85 Votes)
  • 1280x1024 (15%, 24 Votes)
  • 1920x1080 (15%, 24 Votes)
  • 800x600 (13%, 20 Votes)
  • 480x320 (4%, 6 Votes)
  • 640x480 (0%, 2 Votes)

Total Voters: 160

Loading ... Loading ...