[Flashcoders] Pyramid Z
Hello everyone, A moment of your time if I could. I have a little brain teaser if you will. I have a set of images that are dynamically loaded via XML. Everything is loading and showing fine. I want them to do a pyramid in their z index. Meaning, there will be about 5 images shown at a time, but all the images load in a line and the others are masked off. They are loaded into a horizontal scroller and what I want to do is have the first image load and then the next be higher in its z index, then the next will be higher than that, but then next image (the fourth one) will be the same z index as the second image and the fifth image the same z as the first. the sixth will be the same as the second and so on. creating a pyramid so to speak. But here is the clincher... I want them to take on this z index only when passing through the masked area. Hens the middle image will be closer and the images to either side will fan out behind it. My thoughts are to figure out and set the z indexes when loading the images and check for multiples of three and set those to the highest z index. Then do a swap of z indexes as they scroll, but if I load to a z index and another mc is there, wont it delete that image? The only other thing I can think of is to load them regularly (this.getNextHighestDepth) have the z indexes variables set inside the loaded MCs and have a listener see if they have an x coordinate that matches a section of the masked area. and do my swapping that way? Please tell me this makes sense to someone!! All/Any help/pointers appreciated. Best, Karl DeSaulniers Design Drumm http://designdrumm.com ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Pyramid Z
Hello Karl,
Quick example:
package {
import flash.display.Sprite;
import flash.events.Event;
public class PyramyDepth extends Sprite {
private var holder : Sprite = new Sprite();
public function PyramyDepth() {
super();
initInstance();
}
private function initInstance() : void {
y = 50;
x = 300;
addChild(holder);
drawVisibleArea();
addPhotos(100);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event : Event) : void {
holder.x -= mouseX / 100;
dispatchEvent(new Event(Event.CHANGE));
}
private function addPhotos(num : Number) : void {
var previous : AnyPhoto;
for (var i : int = 0;i num; i++) {
var anyPhoto : AnyPhoto = new AnyPhoto(this, previous);
holder.addChild(anyPhoto);
previous = anyPhoto;
}
holder.x = -holder.width / 2;
dispatchEvent(new Event(Event.CHANGE));
}
private function drawVisibleArea() : void {
graphics.lineStyle(0, 0);
graphics.drawRect(-200, 0, 400, 60);
graphics.moveTo(0, -100);
graphics.lineTo(0, 100);
}
}
}
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
class AnyPhoto extends Sprite {
private static var topPhoto : AnyPhoto;
private var previous : AnyPhoto;
private var next : AnyPhoto;
private var point : Point = new Point();
private var pyramyDepth : PyramyDepth;
public function AnyPhoto(pyramyDepth : PyramyDepth, prev : AnyPhoto) {
super();
initInstance(pyramyDepth, prev);
}
private function initInstance(pyramyDepth : PyramyDepth, prev :
AnyPhoto) : void {
this.pyramyDepth = pyramyDepth;
pyramyDepth.addEventListener(Event.CHANGE, onChange);
graphics.lineStyle(0, 0);
graphics.beginFill(0xFF * Math.random());
graphics.drawRect(-50, -40, 100, 60);
y = 30;
previous = prev;
if (previous) {
previous.next = this;
setPosition();
}
}
private function setPosition() : void {
x = previous.x + previous.width / 2;
}
private function onChange(event : Event) : void {
point.x = 0;
point = localToGlobal(point);
point = pyramyDepth.globalToLocal(point);
var distance : Number = Math.abs(point.x);
visible = distance (200 + 50);
if (!visible) {
return;
}
var scale : Number = 1 - distance / 500;
scaleX = scaleY = scale;
if (distance 25) {
resort();
}
}
private function resort() : void {
if (topPhoto == this) {
return;
}
topPhoto = this;
parent.setChildIndex(this, parent.numChildren - 1);
if (next) {
next.setNextIndex(parent.numChildren - 2);
}
if (previous) {
previous.setPreviousIndex(parent.numChildren - 3);
}
}
private function setNextIndex(depth : int) : void {
parent.setChildIndex(this, depth);
if (next) {
next.setNextIndex(depth - 1);
}
}
private function setPreviousIndex(depth : int) : void {
parent.setChildIndex(this, depth);
if (previous) {
previous.setPreviousIndex(depth - 1);
}
}
}
--
Ivan Dembicki
http://realaxy.com
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Pyramid Z
WOW.. was not expecting that. THANKS Ivan!
My classes knowledge is a little fuzzy, but how would I utilize this
on my stage?
I am very new to AS3. My code is currently in AS2.
this.thumbHolder = attachMovie(MC, MC + i, i);
This is how the MCs are added to the stage currently and they pull
their info from preloaded arrays.
Does this script also load the image? If so, where is that parameter
set?
Also, is there any way to not use onEnterFrame to accomplish this?
I have found it to be a bit of a memory hog in situations like this.
Would an internal loop work better for memory usage?
Here is an image eg. of what I am trying to accomplish.
http://designdrumm.com/gallery_example.png
Thanks again!!
Best,
Karl
On Oct 4, 2010, at 4:59 AM, Ivan Dembicki wrote:
Hello Karl,
Quick example:
package {
import flash.display.Sprite;
import flash.events.Event;
public class PyramyDepth extends Sprite {
private var holder : Sprite = new Sprite();
public function PyramyDepth() {
super();
initInstance();
}
private function initInstance() : void {
y = 50;
x = 300;
addChild(holder);
drawVisibleArea();
addPhotos(100);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event : Event) : void {
holder.x -= mouseX / 100;
dispatchEvent(new Event(Event.CHANGE));
}
private function addPhotos(num : Number) : void {
var previous : AnyPhoto;
for (var i : int = 0;i num; i++) {
var anyPhoto : AnyPhoto = new AnyPhoto(this, previous);
holder.addChild(anyPhoto);
previous = anyPhoto;
}
holder.x = -holder.width / 2;
dispatchEvent(new Event(Event.CHANGE));
}
private function drawVisibleArea() : void {
graphics.lineStyle(0, 0);
graphics.drawRect(-200, 0, 400, 60);
graphics.moveTo(0, -100);
graphics.lineTo(0, 100);
}
}
}
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
class AnyPhoto extends Sprite {
private static var topPhoto : AnyPhoto;
private var previous : AnyPhoto;
private var next : AnyPhoto;
private var point : Point = new Point();
private var pyramyDepth : PyramyDepth;
public function AnyPhoto(pyramyDepth : PyramyDepth, prev :
AnyPhoto) {
super();
initInstance(pyramyDepth, prev);
}
private function initInstance(pyramyDepth : PyramyDepth, prev :
AnyPhoto) : void {
this.pyramyDepth = pyramyDepth;
pyramyDepth.addEventListener(Event.CHANGE, onChange);
graphics.lineStyle(0, 0);
graphics.beginFill(0xFF * Math.random());
graphics.drawRect(-50, -40, 100, 60);
y = 30;
previous = prev;
if (previous) {
previous.next = this;
setPosition();
}
}
private function setPosition() : void {
x = previous.x + previous.width / 2;
}
private function onChange(event : Event) : void {
point.x = 0;
point = localToGlobal(point);
point = pyramyDepth.globalToLocal(point);
var distance : Number = Math.abs(point.x);
visible = distance (200 + 50);
if (!visible) {
return;
}
var scale : Number = 1 - distance / 500;
scaleX = scaleY = scale;
if (distance 25) {
resort();
}
}
private function resort() : void {
if (topPhoto == this) {
return;
}
topPhoto = this;
parent.setChildIndex(this, parent.numChildren - 1);
if (next) {
next.setNextIndex(parent.numChildren - 2);
}
if (previous) {
previous.setPreviousIndex(parent.numChildren - 3);
}
}
private function setNextIndex(depth : int) : void {
parent.setChildIndex(this, depth);
if (next) {
next.setNextIndex(depth - 1);
}
}
private function setPreviousIndex(depth : int) : void {
parent.setChildIndex(this, depth);
if (previous) {
previous.setPreviousIndex(depth - 1);
}
}
}
--
Ivan Dembicki
http://realaxy.com
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Karl DeSaulniers
Design Drumm
http://designdrumm.com
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Pyramid Z
Hello Karl,
I am very new to AS3. My code is currently in AS2.
- please forget AS2.
Does this script also load the image? If so, where is that parameter set?
- no. It's just quick demo.
Also, is there any way to not use onEnterFrame to accomplish this?
I have found it to be a bit of a memory hog in situations like this.
Would an internal loop work better for memory usage?
- no. Don't worry about it.
Just use AS3.
On Oct 4, 2010, at 4:59 AM, Ivan Dembicki wrote:
Hello Karl,
Quick example:
package {
import flash.display.Sprite;
import flash.events.Event;
public class PyramyDepth extends Sprite {
private var holder : Sprite = new Sprite();
public function PyramyDepth() {
super();
initInstance();
}
private function initInstance() : void {
y = 50;
x = 300;
addChild(holder);
drawVisibleArea();
addPhotos(100);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event : Event) : void {
holder.x -= mouseX / 100;
dispatchEvent(new Event(Event.CHANGE));
}
private function addPhotos(num : Number) : void {
var previous : AnyPhoto;
for (var i : int = 0;i num; i++) {
var anyPhoto : AnyPhoto = new AnyPhoto(this, previous);
holder.addChild(anyPhoto);
previous = anyPhoto;
}
holder.x = -holder.width / 2;
dispatchEvent(new Event(Event.CHANGE));
}
private function drawVisibleArea() : void {
graphics.lineStyle(0, 0);
graphics.drawRect(-200, 0, 400, 60);
graphics.moveTo(0, -100);
graphics.lineTo(0, 100);
}
}
}
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
class AnyPhoto extends Sprite {
private static var topPhoto : AnyPhoto;
private var previous : AnyPhoto;
private var next : AnyPhoto;
private var point : Point = new Point();
private var pyramyDepth : PyramyDepth;
public function AnyPhoto(pyramyDepth : PyramyDepth, prev : AnyPhoto) {
super();
initInstance(pyramyDepth, prev);
}
private function initInstance(pyramyDepth : PyramyDepth, prev :
AnyPhoto) : void {
this.pyramyDepth = pyramyDepth;
pyramyDepth.addEventListener(Event.CHANGE, onChange);
graphics.lineStyle(0, 0);
graphics.beginFill(0xFF * Math.random());
graphics.drawRect(-50, -40, 100, 60);
y = 30;
previous = prev;
if (previous) {
previous.next = this;
setPosition();
}
}
private function setPosition() : void {
x = previous.x + previous.width / 2;
}
private function onChange(event : Event) : void {
point.x = 0;
point = localToGlobal(point);
point = pyramyDepth.globalToLocal(point);
var distance : Number = Math.abs(point.x);
visible = distance (200 + 50);
if (!visible) {
return;
}
var scale : Number = 1 - distance / 500;
scaleX = scaleY = scale;
if (distance 25) {
resort();
}
}
private function resort() : void {
if (topPhoto == this) {
return;
}
topPhoto = this;
parent.setChildIndex(this, parent.numChildren - 1);
if (next) {
next.setNextIndex(parent.numChildren - 2);
}
if (previous) {
previous.setPreviousIndex(parent.numChildren - 3);
}
}
private function setNextIndex(depth : int) : void {
parent.setChildIndex(this, depth);
if (next) {
next.setNextIndex(depth - 1);
}
}
private function setPreviousIndex(depth : int) : void {
parent.setChildIndex(this, depth);
if (previous) {
previous.setPreviousIndex(depth - 1);
}
}
}
--
Ivan Dembicki
http://realaxy.com
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Karl DeSaulniers
Design Drumm
http://designdrumm.com
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
--
Ivan Dembicki
http://realaxy.com
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
