Help with actionscript 2

  • john+00
  • Born
  • Born
  • john+00
  • Posts: 1

Post 3+ Months Ago

I have a photo gallery carousel which rotates pictures in the shape of a 3 dimensional infinity symbol. I have a spherically shaped logo that spins on it's y-axis. I am trying to make the sphere appear to be inside the infinity sign (meaning that the pictures in front pass in front of the sphere and the pictures rotating on the back side appear behind the sphere. Does anyone know how to include that actionscript to the photogallery script? Here is the preview--kindrasdesigns dotcom /preview/carousel.html that shows each part of my project.

Here is the actionscript for the gallery..



Please help, thanks.











Code: [ Select ]
import flash.geom.Point;
import flash.filters.BlurFilter;
import flash.filters.GlowFilter;
import flash.geom.Rectangle;
import flash.display.BitmapData;
// Default settings
var blurQuality:Number = 1; // the quality of the distance blur, can have values between 1 and 3. choose 1 for optimum speed, 3 might slow the animation too much
var animPause = 0; // a variable used to pause the rotation of the carousel
var step = 0; // step is used to rotate the carousel

// this function initializes the carousel elements and parameters, once the xml is read
function initImageCarousel(images) {
nr_obj = images.length;
// zE and zC are parameters used for perspective effects
zE = 900*perspectiveEffect;
zC = radiusX+zE;
var cnt = this.createEmptyMovieClip("carouselContent", 1);
this.attachMovie("infoText","infoText",2);
infoText._visible=false; // infotext shows the captions of carousel elements
cnt._rotation = animRotation;
for (var i = 0; i<nr_obj; i++) {
var newobj = cnt.createEmptyMovieClip("obj"+i, i);
var imgcnt = newobj.createEmptyMovieClip("img", 1);
imgcnt._visible=false;
newobj.attachMovie("preloader","preloader",2);
loadImage(images[i].imageUrl,imgcnt);
newobj.rot_angle = -i*(360/nr_obj);
newobj.txtinfo = images[i].txtinfo;
newobj.linkUrl=images[i].linkUrl;
if(newobj.linkUrl.length<1) { // if the link given to the carousel element is not defined, the hand cursor is not used
newobj.useHandCursor=false;
}
newobj.linkTarget=images[i].linkTarget;
newobj.isSelected=false;
newobj.onRelease=function() {
if(this.linkUrl.length>3) { // the getURL should be called only if the url is defined,
getURL(this.linkUrl,this.linkTarget);
}
}
newobj.onRollOver=newobj.onDragOver=function() { // showing the infoText (the caption)
animPause=1; // When mouse is over an element, the carousel rotation is paused (slowed gradually to 0);
infoText.showInfo(this.txtinfo);
if(useSelectionGlow=="true") {
this.isSelected=true;
applyGlow(this);
}
};
newobj.onRollOut = newobj.onDragOut=function () {
if(useSelectionGlow=="true") {
this.isSelected=false;
}
if(useDistanceBlur == "true") {
applyBlur(this)
} else {
this.filters=null;
}
animPause = 0; // when mouse rolls out of the element, the carousel is unpaused
infoText.hideInfo();
};
setObjPos(newobj); // Setting position for the current element
}
sortDepths(); // bringing to front the closer carousel elements
this.onEnterFrame = function() {
updatePos();
};
}
// this function sets the position and rotation for each element
function setObjPos(obj) {
var oldpos = new Point();
oldpos.x = obj._xpos;
oldpos.y = obj._ypos;
obj._z = radiusX*Math.cos(obj.rot_angle*Math.PI/180)+zC;
obj._xpos = radiusX*Math.sin(obj.rot_angle*Math.PI/180)*zE/obj._z;
obj._ypos = radiusY*Math.sin((obj.rot_angle)*2*Math.PI/180)*zE/obj._z;
obj._x = obj._xpos;
obj._y = obj._ypos;
var newpos = new Point();
newpos.x = obj._xpos;
newpos.y = obj._ypos;
if (orientImagesToPath == "true") {
obj._rotation = getAngle(newpos, oldpos);
} else {
obj._rotation = -animRotation;
}
var scale0 = 100*zE/obj._z;
obj._yscale = scale0;
obj._xscale = -scale0*Math.cos(obj.rot_angle*Math.PI/180);
if (obj._xscale<0) {
obj.enabled = false;
} else {
obj.enabled = true;
}
if (useBacksideTint == "true") {
applyTint(obj);
}
if (useDistanceBlur == "true" and obj.isSelected!=true) {
applyBlur(obj);
}
}
// this function applies tint to each carousel element to give a "back side" effect
function applyTint(obj) {
var tint = 50*Math.abs(Math.sin(obj.rot_angle*Math.PI/180));
if (obj._xscale<0) {
changeTint(obj.img,"0x"+backsideTintColor,backsideTintAmount);
} else {
changeTint(obj.img,"0x000000",tint);
}
}
// this function applies blur to the elements,considering how far is each element
function applyBlur(obj) {
var objBlur = maxDistanceBlur*(obj._z-zE)/(2*radiusX);
var filter:BlurFilter = new BlurFilter(objBlur, objBlur, blurQuality);
var filterArray:Array = new Array();
filterArray.push(filter);
obj.filters = filterArray;
}
// this function applies glow to each element, the effect can be seen when rolling over an element with the mouse
function applyGlow(obj) {
var filter2:GlowFilter = new GlowFilter(Number("0x"+selectionGlowColor), 0.8, maxSelectionGlow, maxSelectionGlow, 2, 3, false, false);
var filterArray:Array = new Array();
filterArray.push(filter2);
obj.filters = filterArray;
}
// this function brings in front the elements that are closer(bigger in scale)
function sortDepths() {
var depthArray = new Array();
for (var i = 0; i<nr_obj; i++) {
var item = new Object();
item.depth = Math.round(carouselContent["obj"+i]._z*1000);
item.ref = carouselContent["obj"+i];
depthArray.push(item);
}
depthArray.sortOn("depth",Array.NUMERIC,Array.DESCENDING);
for (var i = 0; i<nr_obj; i++) {
depthArray[i].ref.swapDepths((nr_obj-1)-i);
depthArray[i].ref.dt.text = depthArray[i].ref.getDepth();
}
}
// this function updates the position of each element, it generates the rotation
function updatePos() {
if (animPause == 0) {
step += (animSpeed-step)/9; //step is gradually brought to the animation speed value, to give the impression of acceleration
if (Math.abs(animSpeed-step)<=0.05) {
step = animSpeed;
}
} else {
step -= step/9; //when the animation is paused (mouse over an element) step is gradually brought to 0, smoothly braking the animation
if (Math.abs(step)<=0.05) {
step = 0;
}
}
for (var i = 0; i<nr_obj; i++) {
carouselContent["obj"+i].rot_angle += step;
setObjPos(carouselContent["obj"+i]);
}
sortDepths();
}
// getAngle is a function that returns the necessary angle for orienting a tthumbnail to the carousel path
function getAngle(P1, P2) {
var dx = ((P2.x<>undefined) ? P2.x : P2._x)-((P1.x<>undefined) ? P1.x : P1._x);
var dy = ((P2.y<>undefined) ? P2.y : P2._y)-((P1.y<>undefined) ? P1.y : P1._y);
var u = Math.atan(dy/dx)/Math.PI*180;
if (dx<0) {
u += 180;
}
return u;
};
//changeTint is the function that tints the movieclips
function changeTint(ref, col, tint_amount) {
if (col<>undefined and tint_amount<>undefined) {
var red = parseInt("0x"+col.toString().substr(2, 2))*tint_amount/100;
var green = parseInt("0x"+col.toString().substr(4, 2))*tint_amount/100;
var blue = parseInt("0x"+col.toString().substr(6, 2))*tint_amount/100;
var new_color:Color = new Color(ref);
new_color.setTransform({ra:100-tint_amount, rb:red, ga:100-tint_amount, gb:green, ba:100-tint_amount, bb:blue, aa:100, ab:100});
}
};

// function that loads each image (jpeg, gif, png) or swf animation
function loadImage(url:String, container:MovieClip) {
var loader:Object = new Object();
var mc:MovieClipLoader = new MovieClipLoader();
loader.onLoadInit = function(target:MovieClip):Void {
target._parent.preloader.removeMovieClip();
target._x = -target._width/2;
target._y = -target._height/2;
target._visible=true;
if (url.split(".")[1] == "swf") {
} else {
var bitmap:BitmapData = new BitmapData(target._width, target._height, true, 0x000000);
bitmap.draw(target);
target.attachBitmap(bitmap,0,"never",true);
}
};
loader.onLoadError = function():Void {
trace("error");
};
mc.addListener(loader);
mc.loadClip(url,container);
}

var xmlFile=_global.carouselXML;
if(xmlFile==undefined or xmlFile==null or xmlFile=="") { // checking for the global xml path,if it is not found, the default is images.xml
xmlFile="images.xml"
}
// loading the XML
var imagesXML:XML = new XML();
imagesXML.ignoreWhite = true;
imagesXML.load(xmlFile);
// Function that parses the XML"
imagesXML.onLoad = function(success) {
if (success) {
preloader._visible=false;
var stgs = this.firstChild.childNodes[0];
animSpeed = parseFloat(stgs.attributes["animSpeed"])/5;
animRotation = parseFloat(stgs.attributes["animRotation"]);
radiusX = parseFloat(stgs.attributes["radiusX"]);
radiusY = parseFloat(stgs.attributes["radiusY"]);
useDistanceBlur = stgs.attributes["useDistanceBlur"].toString().toLowerCase();
maxDistanceBlur = Math.abs(parseInt(stgs.attributes["maxDistanceBlur"]));
useBacksideTint = stgs.attributes["useBacksideTint"].toString().toLowerCase();
useSelectionGlow = stgs.attributes["useSelectionGlow"].toString().toLowerCase();
maxSelectionGlow = Math.abs(parseInt(stgs.attributes["maxSelectionGlow"]));
selectionGlowColor = stgs.attributes["selectionGlowColor"].toString();
orientImagesToPath = stgs.attributes["orientImagesToPath"].toString().toLowerCase();
backsideTintColor = stgs.attributes["backsideTintColor"].toString();
backsideTintAmount = Math.abs(parseInt(stgs.attributes["backsideTintAmount"]));
perspectiveEffect = Math.max(0.1, Math.min(2, parseFloat(stgs.attributes["perspectiveEffect"])/10));
var imgs = this.firstChild.childNodes[1];
var images = new Array();
for (var i = 0; i<imgs.childNodes.length; i++) {
var item = new Object();
item.Title = imgs.childNodes[i].attributes["title"].toString();
item.txtinfo = imgs.childNodes[i].attributes["infoText"].toString();
item.imageUrl = imgs.childNodes[i].attributes["imageUrl"].toString();
item.linkUrl = imgs.childNodes[i].attributes["linkUrl"].toString();
item.linkTarget = imgs.childNodes[i].attributes["linkTarget"].toString();
images.push(item);
}
//initializing the carousel after the xml is parsed
initImageCarousel(images);
}
};
  1. import flash.geom.Point;
  2. import flash.filters.BlurFilter;
  3. import flash.filters.GlowFilter;
  4. import flash.geom.Rectangle;
  5. import flash.display.BitmapData;
  6. // Default settings
  7. var blurQuality:Number = 1; // the quality of the distance blur, can have values between 1 and 3. choose 1 for optimum speed, 3 might slow the animation too much
  8. var animPause = 0; // a variable used to pause the rotation of the carousel
  9. var step = 0; // step is used to rotate the carousel
  10. // this function initializes the carousel elements and parameters, once the xml is read
  11. function initImageCarousel(images) {
  12. nr_obj = images.length;
  13. // zE and zC are parameters used for perspective effects
  14. zE = 900*perspectiveEffect;
  15. zC = radiusX+zE;
  16. var cnt = this.createEmptyMovieClip("carouselContent", 1);
  17. this.attachMovie("infoText","infoText",2);
  18. infoText._visible=false; // infotext shows the captions of carousel elements
  19. cnt._rotation = animRotation;
  20. for (var i = 0; i<nr_obj; i++) {
  21. var newobj = cnt.createEmptyMovieClip("obj"+i, i);
  22. var imgcnt = newobj.createEmptyMovieClip("img", 1);
  23. imgcnt._visible=false;
  24. newobj.attachMovie("preloader","preloader",2);
  25. loadImage(images[i].imageUrl,imgcnt);
  26. newobj.rot_angle = -i*(360/nr_obj);
  27. newobj.txtinfo = images[i].txtinfo;
  28. newobj.linkUrl=images[i].linkUrl;
  29. if(newobj.linkUrl.length<1) { // if the link given to the carousel element is not defined, the hand cursor is not used
  30. newobj.useHandCursor=false;
  31. }
  32. newobj.linkTarget=images[i].linkTarget;
  33. newobj.isSelected=false;
  34. newobj.onRelease=function() {
  35. if(this.linkUrl.length>3) { // the getURL should be called only if the url is defined,
  36. getURL(this.linkUrl,this.linkTarget);
  37. }
  38. }
  39. newobj.onRollOver=newobj.onDragOver=function() { // showing the infoText (the caption)
  40. animPause=1; // When mouse is over an element, the carousel rotation is paused (slowed gradually to 0);
  41. infoText.showInfo(this.txtinfo);
  42. if(useSelectionGlow=="true") {
  43. this.isSelected=true;
  44. applyGlow(this);
  45. }
  46. };
  47. newobj.onRollOut = newobj.onDragOut=function () {
  48. if(useSelectionGlow=="true") {
  49. this.isSelected=false;
  50. }
  51. if(useDistanceBlur == "true") {
  52. applyBlur(this)
  53. } else {
  54. this.filters=null;
  55. }
  56. animPause = 0; // when mouse rolls out of the element, the carousel is unpaused
  57. infoText.hideInfo();
  58. };
  59. setObjPos(newobj); // Setting position for the current element
  60. }
  61. sortDepths(); // bringing to front the closer carousel elements
  62. this.onEnterFrame = function() {
  63. updatePos();
  64. };
  65. }
  66. // this function sets the position and rotation for each element
  67. function setObjPos(obj) {
  68. var oldpos = new Point();
  69. oldpos.x = obj._xpos;
  70. oldpos.y = obj._ypos;
  71. obj._z = radiusX*Math.cos(obj.rot_angle*Math.PI/180)+zC;
  72. obj._xpos = radiusX*Math.sin(obj.rot_angle*Math.PI/180)*zE/obj._z;
  73. obj._ypos = radiusY*Math.sin((obj.rot_angle)*2*Math.PI/180)*zE/obj._z;
  74. obj._x = obj._xpos;
  75. obj._y = obj._ypos;
  76. var newpos = new Point();
  77. newpos.x = obj._xpos;
  78. newpos.y = obj._ypos;
  79. if (orientImagesToPath == "true") {
  80. obj._rotation = getAngle(newpos, oldpos);
  81. } else {
  82. obj._rotation = -animRotation;
  83. }
  84. var scale0 = 100*zE/obj._z;
  85. obj._yscale = scale0;
  86. obj._xscale = -scale0*Math.cos(obj.rot_angle*Math.PI/180);
  87. if (obj._xscale<0) {
  88. obj.enabled = false;
  89. } else {
  90. obj.enabled = true;
  91. }
  92. if (useBacksideTint == "true") {
  93. applyTint(obj);
  94. }
  95. if (useDistanceBlur == "true" and obj.isSelected!=true) {
  96. applyBlur(obj);
  97. }
  98. }
  99. // this function applies tint to each carousel element to give a "back side" effect
  100. function applyTint(obj) {
  101. var tint = 50*Math.abs(Math.sin(obj.rot_angle*Math.PI/180));
  102. if (obj._xscale<0) {
  103. changeTint(obj.img,"0x"+backsideTintColor,backsideTintAmount);
  104. } else {
  105. changeTint(obj.img,"0x000000",tint);
  106. }
  107. }
  108. // this function applies blur to the elements,considering how far is each element
  109. function applyBlur(obj) {
  110. var objBlur = maxDistanceBlur*(obj._z-zE)/(2*radiusX);
  111. var filter:BlurFilter = new BlurFilter(objBlur, objBlur, blurQuality);
  112. var filterArray:Array = new Array();
  113. filterArray.push(filter);
  114. obj.filters = filterArray;
  115. }
  116. // this function applies glow to each element, the effect can be seen when rolling over an element with the mouse
  117. function applyGlow(obj) {
  118. var filter2:GlowFilter = new GlowFilter(Number("0x"+selectionGlowColor), 0.8, maxSelectionGlow, maxSelectionGlow, 2, 3, false, false);
  119. var filterArray:Array = new Array();
  120. filterArray.push(filter2);
  121. obj.filters = filterArray;
  122. }
  123. // this function brings in front the elements that are closer(bigger in scale)
  124. function sortDepths() {
  125. var depthArray = new Array();
  126. for (var i = 0; i<nr_obj; i++) {
  127. var item = new Object();
  128. item.depth = Math.round(carouselContent["obj"+i]._z*1000);
  129. item.ref = carouselContent["obj"+i];
  130. depthArray.push(item);
  131. }
  132. depthArray.sortOn("depth",Array.NUMERIC,Array.DESCENDING);
  133. for (var i = 0; i<nr_obj; i++) {
  134. depthArray[i].ref.swapDepths((nr_obj-1)-i);
  135. depthArray[i].ref.dt.text = depthArray[i].ref.getDepth();
  136. }
  137. }
  138. // this function updates the position of each element, it generates the rotation
  139. function updatePos() {
  140. if (animPause == 0) {
  141. step += (animSpeed-step)/9; //step is gradually brought to the animation speed value, to give the impression of acceleration
  142. if (Math.abs(animSpeed-step)<=0.05) {
  143. step = animSpeed;
  144. }
  145. } else {
  146. step -= step/9; //when the animation is paused (mouse over an element) step is gradually brought to 0, smoothly braking the animation
  147. if (Math.abs(step)<=0.05) {
  148. step = 0;
  149. }
  150. }
  151. for (var i = 0; i<nr_obj; i++) {
  152. carouselContent["obj"+i].rot_angle += step;
  153. setObjPos(carouselContent["obj"+i]);
  154. }
  155. sortDepths();
  156. }
  157. // getAngle is a function that returns the necessary angle for orienting a tthumbnail to the carousel path
  158. function getAngle(P1, P2) {
  159. var dx = ((P2.x<>undefined) ? P2.x : P2._x)-((P1.x<>undefined) ? P1.x : P1._x);
  160. var dy = ((P2.y<>undefined) ? P2.y : P2._y)-((P1.y<>undefined) ? P1.y : P1._y);
  161. var u = Math.atan(dy/dx)/Math.PI*180;
  162. if (dx<0) {
  163. u += 180;
  164. }
  165. return u;
  166. };
  167. //changeTint is the function that tints the movieclips
  168. function changeTint(ref, col, tint_amount) {
  169. if (col<>undefined and tint_amount<>undefined) {
  170. var red = parseInt("0x"+col.toString().substr(2, 2))*tint_amount/100;
  171. var green = parseInt("0x"+col.toString().substr(4, 2))*tint_amount/100;
  172. var blue = parseInt("0x"+col.toString().substr(6, 2))*tint_amount/100;
  173. var new_color:Color = new Color(ref);
  174. new_color.setTransform({ra:100-tint_amount, rb:red, ga:100-tint_amount, gb:green, ba:100-tint_amount, bb:blue, aa:100, ab:100});
  175. }
  176. };
  177. // function that loads each image (jpeg, gif, png) or swf animation
  178. function loadImage(url:String, container:MovieClip) {
  179. var loader:Object = new Object();
  180. var mc:MovieClipLoader = new MovieClipLoader();
  181. loader.onLoadInit = function(target:MovieClip):Void {
  182. target._parent.preloader.removeMovieClip();
  183. target._x = -target._width/2;
  184. target._y = -target._height/2;
  185. target._visible=true;
  186. if (url.split(".")[1] == "swf") {
  187. } else {
  188. var bitmap:BitmapData = new BitmapData(target._width, target._height, true, 0x000000);
  189. bitmap.draw(target);
  190. target.attachBitmap(bitmap,0,"never",true);
  191. }
  192. };
  193. loader.onLoadError = function():Void {
  194. trace("error");
  195. };
  196. mc.addListener(loader);
  197. mc.loadClip(url,container);
  198. }
  199. var xmlFile=_global.carouselXML;
  200. if(xmlFile==undefined or xmlFile==null or xmlFile=="") { // checking for the global xml path,if it is not found, the default is images.xml
  201. xmlFile="images.xml"
  202. }
  203. // loading the XML
  204. var imagesXML:XML = new XML();
  205. imagesXML.ignoreWhite = true;
  206. imagesXML.load(xmlFile);
  207. // Function that parses the XML"
  208. imagesXML.onLoad = function(success) {
  209. if (success) {
  210. preloader._visible=false;
  211. var stgs = this.firstChild.childNodes[0];
  212. animSpeed = parseFloat(stgs.attributes["animSpeed"])/5;
  213. animRotation = parseFloat(stgs.attributes["animRotation"]);
  214. radiusX = parseFloat(stgs.attributes["radiusX"]);
  215. radiusY = parseFloat(stgs.attributes["radiusY"]);
  216. useDistanceBlur = stgs.attributes["useDistanceBlur"].toString().toLowerCase();
  217. maxDistanceBlur = Math.abs(parseInt(stgs.attributes["maxDistanceBlur"]));
  218. useBacksideTint = stgs.attributes["useBacksideTint"].toString().toLowerCase();
  219. useSelectionGlow = stgs.attributes["useSelectionGlow"].toString().toLowerCase();
  220. maxSelectionGlow = Math.abs(parseInt(stgs.attributes["maxSelectionGlow"]));
  221. selectionGlowColor = stgs.attributes["selectionGlowColor"].toString();
  222. orientImagesToPath = stgs.attributes["orientImagesToPath"].toString().toLowerCase();
  223. backsideTintColor = stgs.attributes["backsideTintColor"].toString();
  224. backsideTintAmount = Math.abs(parseInt(stgs.attributes["backsideTintAmount"]));
  225. perspectiveEffect = Math.max(0.1, Math.min(2, parseFloat(stgs.attributes["perspectiveEffect"])/10));
  226. var imgs = this.firstChild.childNodes[1];
  227. var images = new Array();
  228. for (var i = 0; i<imgs.childNodes.length; i++) {
  229. var item = new Object();
  230. item.Title = imgs.childNodes[i].attributes["title"].toString();
  231. item.txtinfo = imgs.childNodes[i].attributes["infoText"].toString();
  232. item.imageUrl = imgs.childNodes[i].attributes["imageUrl"].toString();
  233. item.linkUrl = imgs.childNodes[i].attributes["linkUrl"].toString();
  234. item.linkTarget = imgs.childNodes[i].attributes["linkTarget"].toString();
  235. images.push(item);
  236. }
  237. //initializing the carousel after the xml is parsed
  238. initImageCarousel(images);
  239. }
  240. };
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

to do that, you'll need to insert the logo symbol inside the items of the carousel, test for it so it will not be rotated along with the other items, and then swap the depth of the logo according to the positions of the carousel items.
Sound simple doesn't it? Well, it isn't that simple :p

Another thing i have in mind is to create a mask for the carousel items, and cut it so that it will not display the items behind the logo. I think this would be an easy and quick approach that would solve your issue.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 18 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.