June 1st, 2008 
Ntt.cc 
Don’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.
Download: 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>
Posted in 
Tags: 
RSS Feed
Email Feed
Very nice demo, it would’ve been even nicer if you boxed this into a “360-product-view” component…
cheers!
Great one, I was just looking for one. Thanks for sharing
Yes, it’s 360 degree yaw by the y axis. How about roll and rotate?
[...] 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就是其中比较好用的引擎之一。 [...]
[...] clipped from ntt.cc [...]
[...] 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 [...]
If you need someone to provide the photos, come take a look.
http://www.photospherix.com
Ya , its very nice.
i am having some questions.where can i ask?
[...] 在你的网站上以360度视角在客户面前展示产品，你不觉得这是很件Cool的事情吗？也许你会觉得这是一件比较困难的事情，但是当你读完本文之后，你会发现它其实并不是很难实现。首先，你需要准备一组不同视角的产品图片。基本原理是通过使用SliderBar来控制图像，当然你可能会遇到一个问题：如何避免在sliderbar移动过程中的图象闪烁？其实很简单，可以用loader组件来避免这个问题。 这里我们使用Sequence、Canvas、TextArea等组件来演示该示例。详情请参考源代码。 示例 | 源代码 原文：Show Your Products In 360 Degree View In Flex [...]