These days you see more ofthen flash application containing 360 degree presentations of products. At the moment I’m trying to make one myself using xml instead of the old fashion timeline image strip method.
What I’m trying to archive is loading an xml file with information about the images (serie of pre-rendered images) put them in flash in an array and display the images on mouse movement on the stage.
At the moment I succeeded in loading the xml file, put them in an array, make a function to display the images and using the “right arrow key” to rotate the view. But while I’m that far, I’m having problems with it. Each time another image gets loaded on the stage, it flickers. I know how this comes, it’s because the main container gets overwritten and refilled and open an image in flash takes a few milliseconds, the results a little flicker. But I have no idea how I can solve that with actionscript.
The other problem is that I made it to work with keystrokes, but when I try mouse movement in the “onEnterFrame” function, with something like converting the mouse movement to rotation frame numers, it won’t work. Here a snipped I tried out.
pos = _xmouse
sum = Math.floor(pos / (Stage.width/26)) // 26 = amount of images of total 360 rotation
displayImage(sum)
The current code that works is:
// Variables
var imageList:Array = new Array();
config_file = "config_trap.xml";
pathImages = "img_trap/";
num = 0;
// Functions
function loadXml(filename:String) {
vXML = new XML();
vXML.ignoreWhite = true;
vXML.onLoad = getXmlData;
vXML.load(filename);
}
function getXmlData() {
count = vXML.childNodes[0].childNodes.length;
for (i=0; i<count; i++) {
file = vXML.childNodes[0].childNodes*.attributes.src;
imageList* = pathImages+file;
}
displayImage(0);
}
function displayImage(number) {
createEmptyMovieClip("container", 1);
container.loadMovie(imageList[number]);
appSize = (Stage.width/(800/100)); // image resizer
container._xscale = appSize;
container._yscale = appSize;
}
// ### MainLoop ###
loadXml(config_file);
onEnterFrame = function() {
if(Key.isDown(Key.RIGHT)){
num++
if(num == 26){num=0;}
displayImage(num);
}
}
The xml file will look like (shorten a little):
<?xml version="1.0" encoding="utf-8"?>
<images>
<img src="Trap0001.jpg" />
<img src="Trap0002.jpg" />
</images>
At the moment I’m clueless how to fix my problems and have been trying to find some examples to look at, but all were witht he old fashion method instead of xml files. The reason why I want to figure this out is because I want to show some 3D work from Maya on the web. I hope someone is willing to help me out a little.
Here some files I uploaded.
complete project: http://stud.cmd.hro.nl/0775659/various/flash/test.zip
Online version, no preloader yet, use right arrow key to rotate.
http://stud.cmd.hro.nl/0775659/various/flash/test.swf
Here an example what I’m trying to archive.
Already thanks
