Internet Resource

Flex using:Show Your Products In 360 Degree View

It is so cool if show your products in 360 degree view on your website to your customer? In fact it is not difficult to realize after you read the following example. First you need prepair a serial images about your products in different views. The basic principle is by using SliderBar to control the image. Generally, you will meet the problem: how to avoid the image flickering when move the sliderbar? Then it have told you the answer. Using loader component which could avoid flickering. Components Sequence, Canvas and TextArea are also used in this example. More details please see the following source

  1. <?xml version=1.0 encoding=utf-8?>
  2. <mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout=absolute backgroundGradientAlphas=[1.0, 1.0]
  3.     backgroundGradientColors=[#FFFFFF, #FFFFFF] creationComplete=init() viewSourceURL=srcview/index.html>
  4. <mx:Script>
  5. <![CDATA[
  6.  
  7. private function init():void{
  8.     myFade.play();
  9.     myFade2.play();
  10.     myCanvas.alpha = 0;
  11. }
  12. //Use SliderBar to show the image in 360 view
  13. private function onChange():void{
  14.     //Use loader component to avoid flickering
  15.     var loader:Loader = new Loader();
  16.     loader.load( new URLRequest( aliceImage/+ int(hs.value)+ .jpg ) );
  17.     loader.contentLoaderInfo.addEventListener(Event.COMPLETE , function ():void{
  18.         myImage.source = loader;
  19.     });
  20. }       
  21. ]]>
  22. </mx:Script>
  23. <mx:Sequence id=”myFade”>
  24.     <mx:Pause duration=”1000″/>
  25.     <mx:Fade target={myCanvas} alphaFrom=0 alphaTo=100 duration=10000“/>
  26. </mx:Sequence>
  27. <mx:Sequence id=myFade2 target={myCanvas2} effectEnd={comment.visible = true;}>
  28.     <mx:Pause duration=1500“/>
  29.     <mx:Parallel>
  30.         <mx:Move yTo=”{myCanvas2.y +10}”/>
  31.     </mx:Parallel>
  32. </mx:Sequence>
  33. <mx:Canvas id=myCanvas backgroundImage=DSC_0074.jpg width=1002 height=721 x=0 y=0 borderColor=#FFFFFF themeColor=#B1E1FF alpha=0.85>
  34.     <mx:Canvas id=myCanvas2 width=328 height=344 x=644 y=10 cornerRadius=10>
  35.         <mx:Image id=myImage x=10 y=-4 width=317 height=309 source=aliceImage/1.jpg“/>       
  36.         <mx:HSlider id=”hs” x=”10″ y=”313″ change=”onChange()” value=”0″ minimum=”1″ maximum=”20″ enabled=”true” liveDragging=”true” snapInterval=”1″ allowTrackClick=”true” width=”305″/>
  37.     </mx:Canvas>
  38. </mx:Canvas>
  39. <mx:TextArea alpha=0 visible=false  showEffect=myBlur2 id=comment x=690 y=396 width=258 height=77 backgroundAlpha=0.1 editable=false borderStyle=solid borderThickness=0>
  40.     <mx:text><![CDATA[1/8 PoP Wonderland Alice in Wonderland
  41. Sells Day?Mar.2008?Maker?alter
  42. Price?60$ 15% off
  43. Maker Suggested Price?65$]]></mx:text>
  44. </mx:TextArea>
  45. </mx:Application>