Show Your Products In 360 Degree View In Flex

1Don’t you think 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.

Search-256x256 Demo  |  View source(main.mxml) 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]"
    backgroundGradientColors="[#FFFFFF, #FFFFFF]" creationComplete="init()" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[

private function init():void{
    myFade.play();
    myFade2.play();
    myCanvas.alpha = 0;
}
//Use SliderBar to show the image in 360 view
private function onChange():void{
    //Use loader component to avoid flickering
    var loader:Loader = new Loader();
    loader.load( new URLRequest( "aliceImage/"+ int(hs.value)+ ".jpg" ) );
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE , function ():void{
        myImage.source = loader;
    });
}
]]>
</mx:Script>
<mx:Sequence id="myFade">
    <mx:Pause duration="1000"/>
    <mx:Fade target="{myCanvas}" alphaFrom="0" alphaTo="100" duration="10000"/>
</mx:Sequence>
<mx:Sequence id="myFade2" target="{myCanvas2}" effectEnd="{comment.visible = true;}">
    <mx:Pause duration="1500"/>
    <mx:Parallel>
        <mx:Move yTo="{myCanvas2.y +10}"/>
    </mx:Parallel>
</mx:Sequence>
<mx:Canvas id="myCanvas" backgroundImage="DSC_0074.jpg" width="1002" height="721" x="0" y="0" borderColor="#FFFFFF" themeColor="#B1E1FF" alpha="0.85">
    <mx:Canvas id="myCanvas2" width="328" height="344" x="644" y="10" cornerRadius="10">
        <mx:Image id="myImage" x="10" y="-4" width="317" height="309" source="aliceImage/1.jpg"/>
        <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"/>
    </mx:Canvas>
</mx:Canvas>
<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">
    <mx:text><![CDATA[1/8 PoP Wonderland Alice in Wonderland
Sells Day:Mar.2008 Maker:alter
Price:60$ 15% off
Maker Suggested Price:65$]]></mx:text>
</mx:TextArea>
</mx:Application>
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

13 Responses to “Show Your Products In 360 Degree View In Flex”

  1. Cristian says:

    Very nice demo, it would’ve been even nicer if you boxed this into a “360-product-view” component…

    cheers!

  2. Great one, I was just looking for one. Thanks for sharing

  3. efish says:

    Yes, it’s 360 degree yaw by the y axis. How about roll and rotate?

  4. [...] 3D总是给人很Cool的感觉,并且在越来越多的场合被使用到。比如很多公司产品的全方位演示(@see Show Your Products In 360 Degree View In Flex)。不过并不是所有的时候都需要自己动手一步一步的去实现,现在已经有非常多的开源3D引擎可以供我们免费使用(@see the list of Open Source realtime 3D engine for Flash)。利用这些3D引擎,可以让我们无需注意太多的细节,快速的开发出自己的3D应用。Away3D就是其中比较好用的引擎之一。 [...]

  5. [...] the cool feeling and be used more and more. Its advantage in products showing for commerical (@see Show Your Products In 360 Degree View In Flex). Maybe you think too difficult to do it. Don’t worry, it doesn’t means you should do [...]

  6. Matt Smith says:

    If you need someone to provide the photos, come take a look.

    http://www.photospherix.com

  7. Mahek says:

    Ya , its very nice.
    i am having some questions.where can i ask?

  8. [...] 在你的网站上以360度视角在客户面前展示产品,你不觉得这是很件Cool的事情吗?也许你会觉得这是一件比较困难的事情,但是当你读完本文之后,你会发现它其实并不是很难实现。首先,你需要准备一组不同视角的产品图片。基本原理是通过使用SliderBar来控制图像,当然你可能会遇到一个问题:如何避免在sliderbar移动过程中的图象闪烁?其实很简单,可以用loader组件来避免这个问题。 这里我们使用Sequence、Canvas、TextArea等组件来演示该示例。详情请参考源代码。 示例  |  源代码 原文:Show Your Products In 360 Degree View In Flex [...]

  9. Keith says:

    May I ask how to do the same thing under AS2?

    Many thanks

  10. Shashi says:

    I would like to know how to convert the mxml file to swf dynamically during runtime.

    I have to show the 360 degree view for many images on my php site and each image consists of many subsets of images. These images are to be configured in the mxml file dynamically and converted into swf for viewing in the browser. How can i proceed ?

  11. Shridhar says:

    Thanks Buddy, You are very clever. You saved my time….!!!!!
    I ma using it for my 360 view

Leave a Reply