Flex using:Show Your Products In 360 Degree View

by

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>