2011年6月4日 星期六

Lesson 3 for Flex 4.5 (3D Rotating effect)

1. Open a Web project
2. Create assets folder and put into a picture file.
3. Copy cod
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 <s:layout>
  <s:BasicLayout />
 </s:layout>

 <fx:Declarations>
  <s:Rotate3D id="rotate3DX"
     target="{image}"
     angleXFrom="0"
     angleXTo="360"
     duration="2000"
     autoCenterTransform="true" />

  <s:Rotate3D id="rotate3DY"
     target="{image}"
     angleYFrom="0"
     angleYTo="360"
     duration="2000"
     autoCenterTransform="true" />

  <s:Rotate3D id="rotate3DZ"
     target="{image}"
     angleZFrom="0"
     angleZTo="360"
     duration="2000"
     autoCenterTransform="true" />
 </fx:Declarations>

 <mx:ApplicationControlBar width="100%" cornerRadius="0">
  <s:Button id="buttonX"
      label="Rotate3D X-axis"
      click="rotate3DX.play();" />
  <s:Button id="buttonY"
      label="Rotate3D Y-axis"
      click="rotate3DY.play();" />
  <s:Button id="bButtonZ"
      label="Rotate3D Z-axis"
      click="rotate3DZ.play();" />
 </mx:ApplicationControlBar>
 <!--resizeMode="scale" -->
 <s:BitmapImage id="image"
       source="@Embed('assets/fx_appicon.jpg')"
       smooth="true"
       x="30"
       y="40"
       width="100"
       height="100" />

</s:Application>

4. Run project


5. Down load code

沒有留言:

張貼留言