Jump to content
GreenSock

mrEmpty

Percent math thing, no idea what o call this thread.

Recommended Posts

Hello.

 

Not sure how to describe this.

 

Imagine a square sprite, 200 pixels. Now imagine that sprite contains a sprite which is 800 pixels wide. That sprite is split into 4 200pixel squares itself. As you move your mouse from far left to far right of the first sprite, the second wider sprite moves the other way. That's all good. Now, the bit I'm having difficulty working out.

 

The second sprite is split into 4 section, I want to take the position of the cursor, and feed that into the tween so that as we get within x pixels of 0, 25, 50, 75% etc the sprite tweens at that point.

 

So at far left, sprite section 1 is showing in the top sprite, we move slowly to the right, when we get near 25% the sprite section 2 tweens in, 50% sprite section 3 tweens in etc.

 

I can deal with taking the width of the sprite and working out the points the tween should fire at, but the (if within x pixels of) part I can't fathom.

 

Any ideas?

 

Cheers :)

Link to comment
Share on other sites

i'm having a tough time visualizing this. sorry I can't be of more help.

 

c

Link to comment
Share on other sites

Yeah, I couldn't quite understand the description either. Sorry :(

Link to comment
Share on other sites

Don't worry, I have no idea how to explain it. I'll try to draw it up in a few scribbles.

 

Basically, I want to get values of where the mouse is in X from the edge of a sprite or movie clip. That's fine. What I then want to do is divide the width of said sprite or movie clip by n (for ease we'll say 10) and as the mouse moves over each point given by n (in this case, 0, 10, 20, 30, 40, 50, 60 70, 80, 90) something happens.

 

So if you are under 10, you trace out "I am under 10", as you move into under 20, it traces "20" etc etc. It's like a very granular version of tracking the mouseX.

Link to comment
Share on other sites

I'm not sure I understand correctly, but maybe you're talking about something like:

 

var segments:Number = 10; //like in your example
var segmentLength:Number = mc.width / segments;
var curSegment:int = int((this.mouseX - mc.x) / segmentLength);
this.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
function mouseMoveHandler(event:MouseEvent):void {
   var newSegment:int = int((this.mouseX - mc.x) / segmentLength);
   if (newSegment != curSegment) {
       curSegment = newSegment;
       trace("over segment " + curSegment);
   }
}

Link to comment
Share on other sites

I'll give that a go later and see if it works. I think you get what I'm asking, and that code looks like what was in my head.

 

Thank you :)

Link to comment
Share on other sites

  • 2 weeks later...

Hello.

 

Had a chance to try it, it kinda works but on a square 500px wide it'll give 50 segments instead of the 10. I could divide the number again but I'd like to make it dynamic.

 

Busy trying to remember remedial math :)

Link to comment
Share on other sites

Ah, okay - I adjusted the code above to reflect what I think you're after (notice the new "segmentLength" variable).

Link to comment
Share on other sites

No way! I figured it out over the night and was about to post my respond, which is identical part from the variable's name :) Thanks for the initial poke in the correct direction :)

Link to comment
Share on other sites

Hello.

 

I'm now trying to take the reason for this code and move it into a re-useable class. I'm using LoaderMax to load a series of images, they are placed into a master MovieClip and added to an array. I then wish to use the following code to move the image that corresponds to the segment to the top of the display stack:

 

private function onMove(event:MouseEvent):void
	{
		var picNumber:int = int((this.mouseX - ppMaster.x) / ppSegmentWidth);
		if (picNumber != ppCurSegment)
		{
			ppCurSegment = picNumber;
			event.currentTarget.setChildIndex(ppArray[picNumber], numChildren -1);
		}
	}

 

Which kinda sometimes works, but then other times doesn't at all.

 

I get Error of type 2007: Parameter child must be non-null when moving over the right edge of ppMaster (guessing a number mis-match here?) and also, the images only sometimes move to the top.

 

The project is here, grab the 'Thing' link:

 

https://skydrive.live.com/redir.aspx?cid=d96ee0343f940893&resid=D96EE0343F940893!405&parid=D96EE0343F940893!116&authkey=!AO6RV0-g9SeY5W4

 

In the last line, it makes no difference if I swap out ppCurSegment for picNumber.

Link to comment
Share on other sites

One other thing, the array length is 10. The array has 10 items in it, but shouldn't it start at 0?

 

And also, if I try this:

 

if (ppArray[ppCurSegment] != null)
		{
			trace("item null");
		}

 

It traces back that everything I'm calling is null.

 

But if I:

 

trace(ppArray[0]);

 

I get what I'd expect. I can grab the sprites width, height etc. So the sprite is in the array and I can get at it.

Link to comment
Share on other sites

First of all, you had a typo in your conditional logic:

 

if (ppArray[ppCurSegment] != null) {
   trace("item null");
}

 

I think you meant "== null" not "!= null" :) That explains why it reported that all your stuff was null.

 

As for the other stuff, you need to add conditional logic to your code so that if the mouse goes PAST either end of your object, it resolves the index to be at the end rather than beyond it. For example, you don't want to get index values of -1, -2, etc. Nor do you want to get index values that are greater than the length of your array.

 

private function onMove(event:MouseEvent):void {
   var picNumber:int = int((this.mouseX - ppMaster.x) / ppSegmentWidth);
   if (picNumber         picNumber = 0;
   } else if (picNumber >= ppArray.length) {
       picNumber = ppArray.length - 1;
   }
   if (picNumber != ppCurSegment) {
       ppCurSegment = picNumber;
       event.currentTarget.setChildIndex(ppArray[picNumber], numChildren -1);
   }
}

Link to comment
Share on other sites

I think you meant "== null" not "!= null" That explains why it reported that all your stuff was null.

 

That made me giggle. :)

 

However, still no good.

 

private function onMove(event:MouseEvent):void {
   		var picNumber:int = int((ppMaster.mouseX) / ppSegmentWidth);
 			if (picNumber < 0)
		{
       		picNumber = 0;
   		} else if (picNumber >= ppArray.length)
		{
       		picNumber = ppArray.length - 1;
   		}
   		if (picNumber != ppCurSegment)
		{
       		ppCurSegment = picNumber;
       		ppMaster.setChildIndex(ppArray[ppCurSegment], ppMaster.numChildren -1);
			trace("Current section is " + ppCurSegment);
  			}
	}

 

I've tried everything I can think of on this today.

Link to comment
Share on other sites

I tried downloading your file but there were missing dependencies (like NavBox and TouchPoint classes). I don't have time to dig through all the code either - can you create a SUPER simple FLA with only the essential code and post it here? I wasn't sure what you meant by "still no good" - still getting an error? What exactly is (or isn't) happening? Do you have a very specific question?

Link to comment
Share on other sites

Sorry. Yes, I can create a super simple FLA.

 

The error is in fact not an error reports in Output, but the switching of the sprites inside ppMaster doesn't take place. I can trace ppCurSegment and PicNumber and they change as expected, but the line:

 

ppMaster.setChildIndex(ppArray[ppCurSegment], ppMaster.numChildren -1);

 

Does nothing at all.

 

The folder 'Non working thing" here contains a simplified version.

 

https://skydrive.live.com/redir.aspx?cid=d96ee0343f940893&resid=D96EE0343F940893!406&parid=D96EE0343F940893!116

 

But please don't spend ages on it, I'll get it in the end. Most likely re-write the thing. :)

Link to comment
Share on other sites

Yep, there were several problems:

 

1) You nested things incorrectly. You had only one ppImage that you were adding all your images to, and you were placing that ppImage into ppMaster. Then, you were bringing that ppImage to the top of the stacking order in ppMaster, but that won't make any difference because the stuff you're stacking are the children of ppImage, not ppMaster.

 

2) Your MOUSE_MOVE listener was attached to ppMaster, but that means it will only be dispatched when the mouse is over ppMaster. As soon as it moves outside of those bounds, you'll no longer be checking the stacking order. So if the user moves the mouse REALLY fast, it might appear "stuck" on the wrong image. You should attach that MOUSE_MOVE listener to the stage so that it always dispatches properly.

 

I think there were a few other things that needed tweaking - here's the revised code:

 

package com.fingerpuk.ui {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.loading.LoaderMax;
import com.greensock.loading.ImageLoader;
import com.greensock.loading.XMLLoader;
import com.greensock.events.LoaderEvent;


public class PreviewPane extends MovieClip {
	private var ppSize:uint;
	private var ppString:String;
	private var ppRounding:uint;
	private var ppMaster:Sprite = new Sprite();
	private var ppMask:Sprite = new Sprite();
	private var ppImage:Sprite = new Sprite();
	private var ppArray:Array = new Array();
	private var ppSegments:Number = 0;
	private var ppSegmentWidth:Number;
	private var ppCurSegment:int;

	public function PreviewPane(Size:uint, XMLURL:String, Rounding:uint) {			
		ppSize = Size;
		ppString = XMLURL;
		ppRounding = Rounding;

		ppMask.graphics.beginFill(0xffffff);
		ppMask.graphics.drawRoundRect(0,0,ppSize, ppSize, ppRounding, ppRounding);
		ppMask.graphics.endFill();

		ppMaster.mask = ppMask;
		this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		ppMaster.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
		ppMaster.addChild(ppImage);

		var xmlLoader:LoaderMax = new LoaderMax({maxConnections:1});
		xmlLoader.append(new XMLLoader("assets/content.xml", {onComplete:xmlLoaded}));
		xmlLoader.load();
	}

	private function onAddedToStage(event:Event):void {
		this.stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
	}

	private function xmlLoaded(event:LoaderEvent):void
	{
		var numImages:XMLList = event.target.content.image;
		var loader:LoaderMax = new LoaderMax({maxConnections:1});

		for (var i:int = 0; i 			{
			loader.append(new ImageLoader("assets/" + numImages[i].@file, {onComplete:imagesLoaded}));
			ppSegments += 1;;
		}
		loader.load();

		addChild(ppMask);
		addChild(ppMaster);

		ppSegmentWidth = ppSize / numImages.length();
	}

	private function imagesLoaded(event:LoaderEvent):void
	{
		ppImage.addChildAt(event.target.content, 0);
		ppArray.push(event.target.content);
	}

	private function onMove(event:MouseEvent):void {
   		var picNumber:int = int(ppMaster.mouseX / ppSegmentWidth);

		if (picNumber 			{
       		picNumber = 0;
   		}
			else if (picNumber >= ppArray.length)
		{
       		picNumber = ppArray.length - 1;
   		}
   		if (picNumber != ppCurSegment)
		{
       		ppCurSegment = picNumber;
       		ppImage.setChildIndex(ppArray[ppCurSegment], ppImage.numChildren -1);
			trace("Current section is " + ppCurSegment);
  			}
	}

	private function onDown(event:MouseEvent):void
	{
		trace("onDown called");
	}
}
}

Link to comment
Share on other sites

No way, many many thanks.

 

I'm going to sit here and study the differences and figure out what's happening there.

 

You ever thought about writing a book? You have a nice non-nonsense way of writing stuff out, kinda like you are speaking it rather than typing it. It's a good style for a book, mainly because most people stubble to learn from reading stuff, unless the style resonates with a spoken for style of learning. Anyway, off topic.

 

Thank you once again.

Link to comment
Share on other sites

Ha ha. Glad to hear it was helpful and that you find my "no-nonsense" practical manner (which in my opinion is more accurately termed "lazy get-to-the-point-and-don't-worry-about-sounding-smart") refreshing. I have been asked to write on a few occasions but thus far have resisted primarily because I love writing and supporting code, not books :) I really struggle with finding time to do everything I want to do, so I try to focus on what I'm relatively good at and most passionate about. I totally appreciate the kind words. Maybe you'll eventually see a book from me or Carl Schooff who happens to be much more talented and passionate in that particular area (educating). He has a similar style too. http://www.snorkl.tv

Link to comment
Share on other sites

Ye, I'm loving the Schoof. His style suits me too.

 

Maybe you two should combine forces, or how about you decide to code something insanely cool for no real reason, screen capture in super HD the entire thing, and the two of you sit there and talk about it all the way through.

 

Now I'd pay for that. A glimpse inside the heads of two people who understand Flash would be great, because coming from iOS it makes no sense at all :)

Link to comment
Share on other sites

Hey Mr Empty,

 

thanks for the kind words and support. glad you have been enjoying using GreenSock tools and my tutorials.

 

Perhaps something like the Lost ActionScript Weekend series would suit you. It aims to give you that "over-the-shoulder" view of a few actionscript dudes talking through various AS3 OOP concepts in a more "conversational" style. I haven't used it myself so I can't rate it, but there are enough samples available for you to get the feel of it.

 

Pack your bags for the Lost ActionScript Weekend! Gather 'round the fire, study in the cabin, and hang out on the dock with world-renowned ActionScript guru and educator Colin Moock on an intimate three-day ActionScript getaway. In the first segment of this one-of-a-kind learning experience, Colin sits down with artist James Paterson and technologist Hoss Gifford to cover the basics of object-oriented programming in ActionScript 3.0.

 

get a hefty dose of video samples

http://my.safaribooksonline.com/9780596801564

Link to comment
Share on other sites

Sweet, purchased. :)

 

Flash is great, the only thing I'm lacking is a decent IDE. I miss Xcode. FlashBuilder is slow and won't let me do anything without creating a complex project first. FlashDevelop seems great, but I don't have any Windows systems. Flash CS5.5 is terrible on Lion.

 

You know it's bad when you code in TextEdit and change the extension!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×