I’m trying to create an interactive touch screen controller using Olaf Matthes flashserver. But so far I haven’t been able to find a great deal of information or examples on the web except for maybe things like soundtoys.net or vispo.com.

I’d like to be able to concurrently control visuals(flash) and generative sounds using Max.

So far I’ve prototyped an actionscript in flash

to create concentric circles that appear on mouse clicks but I’m wondering how to trigger sounds from the circles i.e if more than one of the circles merges with another then the harmonic content of the sound also changes.

I just wonder if anyone on this forum knows of anywhere that I can find some good implementation examples. I’ve got a fairly good working knowledge of both Flash and Max.

I’m guessing the best approach is probably to use Max and Flash forums depending on the problem, but if anyone has any useful hints or tips then I’d very much appreciate hearing them.

]]>To detect when two circles overlap you can use some basic trigonometry.

Say your circles are defined by a center point and a radius, you just find the distance between the two center points and see if their combined radii are greater than or equal to that distance, e.g.

// distance between centers

var dx:Number = c2.x – c1.x;

var dy:Number = c2.y – c1.y;

var dist:Number = Math.sqrt( (dx*dx) + (dy * dy) );

if(dist < c1.radius + c2.radius)

{

trace(“Circles overlap”);

}

….

then its matter of sending that event to max. :)

Have you got the flashserver running and working with max?

]]>Yeah I’ve got flashserver up and running and working with max. So far I’ve sent a few remote messages to max using the max.send command. Although I haven’t tried it the other way round yet so that max is sending flash messages. I’d ultimately like to have some sort of concurrent control between flash and max visuals so that flash influences max and vice-versa.

Eventually I’d like the concentric circles to randomly generate colours which would influence other sound morphing characteristics from max…sort of create a pseudo-synaesthesic experience, but one step at a time.

So far I’ve found it useful to look at existing examples, in particular the .fla files to deconstruct the process, but I strangely haven’t found many .fla examples using flashserver controlled projects. If you possibly know of any useful flashserver examples to concurrently control audio/visuals then it’d be worth its weight in gold.

It would be nice to get some implementation help if possible.

The following is the code I’m using for the concentric circles:

circle._visible = false; // hide our source circle

listener = new Object(); // create a function to “listen” for mouse events

listener.onMouseDown = function(){

_root._quality = “MEDIUM”;

instructions._visible = false;

msDown = true;

}

listener.onMouseUp = function(){

msDown = false;

}

Mouse.addListener(listener);

var circleCount = 0; // an arbitrary name to count the unique instances of the circle movie clip

this.onEnterFrame = function(){ // updates every frame

if (msDown==true){ // if the mouse is down

circleCount++; // increment a counter by 1

_root.circle.duplicateMovieClip(“circle”+circleCount, circleCount); // create a circle with a unique ID and depth

_root["circle"+circleCount]._x = _root._xmouse; //move the circle to the mouse location

_root["circle"+circleCount]._y = _root._ymouse;

trace (“[x value= " + _root._xmouse + "]“)

trace (“[y value= " + _root._ymouse + "]“)

trace (“[circleCount= " + circleCount + "]“)

_root.max.send(“; x_value ” + _root._xmouse + “;”);

_root.max.send(“; y_value ” + _root._ymouse + “;”);

}

}

Would you mind explaining how to insert the line of trigonometry code. If not then I’m sure I’ll figure it out in time :)

]]>—————————————————-

> So far I’ve found it useful to look at existing examples, in particular the .fla files to deconstruct the process, but I strangely haven’t found many .fla examples using flashserver controlled projects. If you possibly know of any useful flashserver examples to concurrently control audio/visuals then it’d be worth its weight in gold.

—————————————————-

Unfortunately I dont know of any. You’re probably more likely to find examples that use ‘flosc’

Which could be adapted to use flashserver

> It would be nice to get some implementation help if possible.

I’ll do my best :)

> The following is the code I’m using for the concentric circles:

>

> Would you mind explaining how to insert the line of trigonometry code. If not then I’m sure I’ll figure it out in time :)

Ok, im thinking it might help if i give a more general overview of ways of approaching flash development so you can get a feel for the different ways you can approach things. I dont know how much you know already but i’ll try not to assume anything for now :)

In general there are 2 ways you can organise your code with flash.

1. on the timeline, like you have. This means all the code is contained in the .fla

2. in external files. This means all your code is kept in text files and loaded by flash when it compiles the swf.

The benefits of (1) are that you only have to manage one file, if you have the .fla then you can hit ctrl+enter and there you go. The downsides are that

1. it can become very hard to manage as code ends up being distributed around the fla

2. the code editor inside flash is not very good.

I think for now while prototyping you can keep the code in the .fla but its definitely worth getting into the habit of keeping your code in text files and editing them outside of flash.

Which editor you use really depends on which platform you are on, which version of flash you have and how much programming you are going to be doing. If you let me know what platform you are using and which flash version i’ll try and recommend some text editors that work well with flash / actionscript.

Now to go with the 2 ways of ‘physical organisation’ there are also 2 ways of ‘logically’ organising your code, or what are called ‘programming paradigms’.

1. procedural programming

2. object oriented programming (OOP)

You can do either in flash, although even with a procedural approach you are still going to be dealing with objects so you can entirely escape from OOP. Anyway, in my opinion thats a good thing. :)

If you dont know anything about OOP then its definitely worth taking the time to get the basics as it really helps with being able to decompose your problem into smaller pieces that encapsulate some semantic notion about the problem space.

Here’s one link that looks reasonable :

http://www.developer.com/design/article.php/3317571

So the question of ‘how to insert the line of trigonometry code’ has a lot of different answers depending on your approach.

if i was building the system I would just use OOP and start by creating a Circle class and that piece of code would be inside a method inside the circle class, something like

public function checkOverlap(otherCircle:Circle):Boolean

{

// distance between centers

var dx:Number = otherCircle.x – x;

var dy:Number = otherCircle.y – y;

var dist:Number = Math.sqrt( (dx*dx) + (dy * dy) );

if(dist < radius + otherCircle.radius)

{

trace(“Circles overlap”);

return true;

}

else

{

return false;

}

}

so then you can ask a particular circle if it overlaps another one.

If I was doing it with a procedural then one way would be to keep all of the created circles in an array,

so where you do this :

_root.circle.duplicateMovieClip(“circle”+circleCount, circleCount);

you could do

var newCircle:MovieClip = _root.circle.duplicateMovieClip(“circle”+circleCount, circleCount);

circles.push(newCircle);

and somewhere near the top you have to declare the array so you have some storage to use, e.g.

circles = new Array();

or the shorter version :

circles = [];

then for collision detection you can loop through the circles array every frame and see if they overlap :

for(var i:Number = 0;i

{

var src:MovieClip = circles[i];

for(var j:Number = 0;j

{

// dont check with ourself

if(i == j) continue;

var dest:MovieClip = circles[j];

var touching:Boolean = checkOverlap(src,dest);

if(touching)

{

trace(“Circles : ” + src + ” : ” + dest + ” overlap);

}

}

}

then you would put that code into a ‘checkOverlap’ function like this :

function checkOverlap(c1:MovieClip, c2:MovieClip):Boolean

{

// distance between centers

var dx:Number = c2._x – c1._x;

var dy:Number = c2._y – c1._y;

var dist:Number = Math.sqrt( (dx*dx) + (dy * dy) );

if(dist < c1._width + c2._width)

{

return true;

}

else

{

return false;

}

}

which should do the job.

There is a ‘MovieClip.hitTest’ method available in flash which at first appears like it could do the job, you would hope that :

src.hitTest(dest);

would give you the result you want, but the problem is that hitTest only checks bounding boxes, not the actual movieclip content, so you would get false positives if the circles were close diagonally.

That being said, what you could do is to use hitTest as an quick way of skipping checks that cant possibly return true and only doing the proper check if the hitTest returns true.

If you start having a lot of circles that could save quite a bit of time.

i guess thats enough for now, lots to digest.

please feel free to ask any questions and i’ll do my best to explain what i can.

One other thing i will suggest is to focus on the seperate pieces first, so get the basic mechanics of the flash movie working then hook it up to the flashserver and get things working together.

oh and i just remembered there is this place :

http://levitated.net/daily/index.html

which has a lot of interesting flash movies and they all have .fla’s available which are good for studying.

good luck.

]]>—

You can do either in flash, although even with a procedural approach you are still going to be dealing with objects so you can entirely escape from OOP.

—

should be ‘CANT entirely escape from OOP’

sorry about that.

]]>Is it possible to use text edit on the mac? I was thinking that perhaps it would be beneficial for me to use flash to call an external file. The immediate problem that I’m facing with my circles at the moment is that when new circles are created, I don’t think the circle movie clip is actually being removed, even though I have a piece of script at the end of my tweened circle movie clip that states:

this.removeMovieClip()

I wouldn’t know how else to explain why flash would begin struggling after creating about 40 circles. Is it possible therefore to call the circle externally to flash. Basically I want to lessen the load.

I’ve also had a bit of a struggle still trying to implement the trigonometry code (was a very nice piece of trigonometry). It seemed to me as if flash wasn’t recognizing the functions, so tried to create a function called ‘andgo’ to try and call the functions that you gave me. The following is the script I’m using, I expect you’ll easily be able to tell me where my mistakes lie.

circles = new Array(); //A new array called circles

//src.hitTest(dest); //Can’t get this hitTest to work

circle._visible = false; // hide our source circle

var drawCFlag:Boolean = true;

listener = new Object(); // create a function to “listen” for mouse events

listener.onMouseDown = function(){

_root._quality = “MEDIUM”;

instructions._visible = false;

msDown = true;

}

listener.onMouseUp = function(){

msDown = false;

drawCFlag = true;

}

Mouse.addListener(listener); // adds mouse listener event

var circleCount = 0; // an arbitrary name to count the unique instances of the circle movie clip

this.onEnterFrame = function(){ // updates every frame

if (msDown==true && drawCFlag == true){ // if the mouse is down

circleCount++; // increment a counter by 1

var newCircle:MovieClip = _root.circle.duplicateMovieClip(“circle”+circleCount, circleCount);

circles.push(newCircle);

_root["circle"+circleCount]._x = _root._xmouse; //move the circle to the mouse location

_root["circle"+circleCount]._y = _root._ymouse;

trace (“[x value= " + _root._xmouse + "]“)

trace (“[y value= " + _root._ymouse + "]“)

trace (“[circleCount= " + circleCount + "]“)

trace (“[circles size = " + circles.length + "]“)

//trace (“[circle draw = " + newCircle. + "]“)

_root.max.send(“; x_value ” + _root._xmouse + “;”);

_root.max.send(“; y_value ” + _root._ymouse + “;”);

drawCFlag = false;

}

andgo(); //andgo function

}

function andgo(){

//Collision detection:

for(var i:Number = 0;i < circles.length;i++) // Loop: Variable [i] that flash will recognize as a number with the :Number

{

var src:MovieClip = circles[i]; // Variable called src (source) that is a movieclip that’s defined by circle[i]

for(var j:Number = 0;j < circles.length;j++)// Loop: Variable [j]

{

// dont check with ourself

if(i == j) continue;

var dest:MovieClip = circles[j]; //Variable: dest [j]

var touching:Boolean = checkOverlap(src,dest); //If circles touch [true] then checkOverlap

if(touching) //If they are touching [true] show results on flashes output

{

trace(“Circles : ” + src + ” : ” + dest + ” overlap”);

}

//else

//{

//trace(“No overlap between : ” + src + ” : ” + dest);

}

}

}

function checkOverlap(c1:MovieClip, c2:MovieClip):Boolean //Check overlap function

{

// Trigonometry: distance between centers

var dx:Number = c2._x – c1._x;

var dy:Number = c2._y – c1._y;

var dist:Number = Math.sqrt( (dx*dx) + (dy * dy) );

if(dist < c1._width + c2._width) //If distances is more than circle 1 + circle 2 width

{

return true; //Overlap is true

}

else //Otherwise

{

return false; //Overlap is false

}

}

I eventually want to have the concentric circles generating random colours and fading as they grow outwards. I’m guessing it should be fairly simple to implement the colours using flashes API. But how much of a problem do you think I would have merging various colours from other existing circles that exist on the screen at the same time, would that require a matrix or something? I suppose that worst case scenario would be to swap the depths of the circles appearing on the screen.

Generally I think I could still do with some sort of reference to the properties and methods of a movie clip. Do you know of any good books that lays out flashes guts really well?

]]>The first problem I’m still having is with regards to removing the circle movieclip from the stage after it’s been used. I’ve got an instance of a movieclip called “circle”on the stage – The movieclip consists of a circle being tweened with a piece of script at the end that states:

this.removeMovieClip()

But it doesn’t seem to be doing the job – I was informed that I might be able to use something called a destructor to do the job.

The other problem I’m still facing is getting flash to return the exact string of numbers that I need. So basically when two or more circles overlap on the stage I’d like flash to tell me how much overlap is occuring. Am I right in thinking that at the moment the checkOverlap function at the end is just returning true and false depending on whether the checkOverlap function has been called whereas I think I need the “dist” returned if true and a value of 0 if false.

This is really giving me a headache so any hints or tips would be most appreciated.

here is the code:

circles = new Array();

circle._visible = false;

var drawCFlag:Boolean = true;

listener = new Object();

listener.onMouseDown = function(){

_root._quality = “MEDIUM”;

instructions._visible = false;

msDown = true;

}

listener.onMouseUp = function(){

msDown = false;

drawCFlag = true;

}

Mouse.addListener(listener);

var circleCount = 0;

this.onEnterFrame = function(){

if (msDown==true && drawCFlag == true){

circleCount++;

var newCircle:MovieClip = _root.circle.duplicateMovieClip(“circle”+circleCount, circleCount);

circles.push(newCircle);

_root["circle"+circleCount]._x = _root._xmouse;

_root["circle"+circleCount]._y = _root._ymouse;

trace (“[x value= " + _root._xmouse + "]“)

trace (“[y value= " + _root._ymouse + "]“)

trace (“[circleCount= " + circleCount + "]“)

trace (“[circles size = " + circles.length + "]“)

_root.max.send(“; x_value ” + _root._xmouse + “;”);

_root.max.send(“; y_value ” + _root._ymouse + “;”);

drawCFlag = false;

}

andgo();

}

function andgo(){

for(var i:Number = 0;i < circles.length;i++)

{

var src:MovieClip = circles[i];

for(var j:Number = 0;j < circles.length;j++)

{

if(i == j) continue;

var dest:MovieClip = circles[j];

var touching:Boolean = checkOverlap(src,dest);

if(touching)

{

trace(“Circles : ” + src._x + ” ” + src._y + ” : ” + dest._x + ” ” + dest._y + ” overlap”);

}

}

}

}

function checkOverlap(c1:MovieClip, c2:MovieClip):Boolean

{

var dx:Number = c2._x – c1._x;

var dy:Number = c2._y – c1._y;

var dist:Number = Math.sqrt( (dx*dx) + (dy * dy) );

if(dist < c1._width + c2._width)

{

return true

}

else

{

return false;

}

}

I’m not completely sure about this but i think that the scope of your code

is your problem. the removeMovieclip should work but an object can remove

itself. Its more likely that you should set up a class that manages that

for you and then put the movieclip inside of that class.

here’s an example of a function that works..

/*

* CLEAR SCREEN

* – function that clears the movieclips that are displayed on screen

*/

public function clearScreen(_array:Array):Void{

for(var i:Number = 0; i < _array.length; i++){

var tmpMov = _array[i].getContainer();

// trace(“REMOVING MOVIECLIP: ” + tmpMov);

tmpMov.removeMovieClip();

// trace(“REMOVED MOVIECLIP: ” + tmpMov);

tmpMov = _array[i].getMC();

// trace(“REMOVING BUTTON: ” + tmpMov);

tmpMov.removeMovieClip();

// trace(“REMOVED Button: ” + tmpMov);

delete(tmpMov);

}

}

See if you can get that to work.

As far as your other issue, you are correct in assuming that it only returns

true false. You datatyped it as a Boolean so it would throw an error if you

tried to return anything else.

If you need a number datatype it as a Number and return that.

I think that this is probably more of a flash issue at this point than a

Max/Msp issue so you are proabbly better off emailing off the list.

Let me know if I can be of any more help to you

Email me here

gboland@iconnicholson.com

Good Luck

greg

On Mon, May 19, 2008 at 4:30 AM, Dominic

wrote:

>

> Hi I’m still struggling to get this piece of code functioning properly.

>

> The first problem I’m still having is with regards to removing the circle

> movieclip from the stage after it’s been used. I’ve got an instance of a

> movieclip called “circle”on the stage – The movieclip consists of a circle

> being tweened with a piece of script at the end that states:

>

> this.removeMovieClip()

>

> But it doesn’t seem to be doing the job – I was informed that I might be

> able to use something called a destructor to do the job.

>

> The other problem I’m still facing is getting flash to return the exact

> string of numbers that I need. So basically when two or more circles overlap

> on the stage I’d like flash to tell me how much overlap is occuring. Am I

> right in thinking that at the moment the checkOverlap function at the end is

> just returning true and false depending on whether the checkOverlap function

> has been called whereas I think I need the “dist” returned if true and a

> value of 0 if false.

>

> This is really giving me a headache so any hints or tips would be most

> appreciated.

>

> here is the code:

>

> circles = new Array();

>

> circle._visible = false;

>

> var drawCFlag:Boolean = true;

>

> listener = new Object();

> listener.onMouseDown = function(){

> _root._quality = “MEDIUM”;

> instructions._visible = false;

> msDown = true;

> }

> listener.onMouseUp = function(){

> msDown = false;

> drawCFlag = true;

> }

> Mouse.addListener(listener);

>

> var circleCount = 0;

> this.onEnterFrame = function(){

> if (msDown==true && drawCFlag == true){

> circleCount++;

> var newCircle:MovieClip =

> _root.circle.duplicateMovieClip(“circle”+circleCount, circleCount);

> circles.push(newCircle);

> _root["circle"+circleCount]._x = _root._xmouse;

> _root["circle"+circleCount]._y = _root._ymouse;

> trace (“[x value= " + _root._xmouse + "]“)

> trace (“[y value= " + _root._ymouse + "]“)

> trace (“[circleCount= " + circleCount + "]“)

> trace (“[circles size = " + circles.length + "]“)

> _root.max.send(“; x_value ” + _root._xmouse + “;”);

> _root.max.send(“; y_value ” + _root._ymouse + “;”);

> drawCFlag = false;

> }

> andgo();

> }

>

> function andgo(){

>

> for(var i:Number = 0;i < circles.length;i++)

> {

> var src:MovieClip = circles[i];

> for(var j:Number = 0;j < circles.length;j++)

> {

>

> if(i == j) continue;

> var dest:MovieClip = circles[j];

> var touching:Boolean = checkOverlap(src,dest);

> if(touching)

> {

> trace(“Circles : ” + src._x + ” ” + src._y

> + ” : ” + dest._x + ” ” + dest._y + ” overlap”);

> }

> }

> }

> }

>

> function checkOverlap(c1:MovieClip, c2:MovieClip):Boolean

> {

> var dx:Number = c2._x – c1._x;

> var dy:Number = c2._y – c1._y;

> var dist:Number = Math.sqrt( (dx*dx) + (dy * dy) );

>

> if(dist < c1._width + c2._width)

> {

> return true

> }

> else

> {

> return false;

> }

> }

>

Yeah that’s what I originally thought – I tried replacing :Boolean with :Number but it displays two errors:

“Type mismatch in assignment statement: Number where Boolean is required”

and

“The Expression returned must match the function’s return type”

Could you explain how to go about implementing that class script?

Is it to do with storing that piece of script in a text file outside of flash?

]]>yeah thats what i thought you were doing.

You don’t have to, you could put it all in the timeline.

I’ll send you an example of file that you can use to help you along if you’d

like. but if you have never written a class structure before its a little

more involved than writing on the timeline. not hard but it would be an

extra step for you to have learn and would probably introduce a lot more

errors until you got the hang of it

The easiest way to fix your two errors is to change the datatype to Number

instead of Boolean and then change the the return value. it can’t be a

Boolean, so you could do this…

function checkOverlap(c1:MovieClip, c2:MovieClip):Number

{

var dx:Number = c2._x – c1._x;

var dy:Number = c2._y – c1._y;

var dist:Number = Math.sqrt( (dx*dx) + (dy * dy) );

if(dist < c1._width + c2._width)

{

return Number(true)

}

else

{

return Number(false);

}

}

By placing the Number() around the true false you are telling Flash that it

needs to be a Number and in this case it will give you a 0 or a 1. Its

called Casting and its a powerful tool.

Otherwise you might want to return dist instead because its a Number as

well.

Let me know if this is helping and if you need more examples. I could send

you a whole project for you to use as a reference.

thanks

greg

On Mon, May 19, 2008 at 5:35 AM, Dominic

wrote:

>

> Hey Greg, thanks for the reply

>

> Yeah that’s what I originally thought – I tried replacing :Boolean with

> :Number but it displays two errors:

>

> “Type mismatch in assignment statement: Number where Boolean is required”

>

> and

>

> “The Expression returned must match the function’s return type”

>

>

> Could you explain how to go about implementing that class script?

>

> Is it to do with storing that piece of script in a text file outside of

> flash?

>

>

>

On flashes output window it appears as:

[circles size = 1]

[x value= 250]

[y value= 235]

[circleCount= 2]

[circles size = 2]

Circles : 252 136 : 250 235 overlap

Circles : 250 235 : 252 136 overlap

Circles : 252 136 : 250 235 overlap

Circles : 250 235 : 252 136 overlap

Circles : 252 136 : 250 235 overlap

Circles : 250 235 : 252 136 overlap

Circles : 252 136 : 250 235 overlap

Circles : 250 235 : 252 136 overlap

Circles : 252 136 : 250 235 overlap

Circles : 250 235 : 252 136 overlap

Circles : 252 136 : 250 235 overlap

Circles : 250 235 : 252 136 overlap

It’s repeating the same sequence of numbers.

Very kind of you to provide examples and I’d very much like to take you up on that offer if possible.

Someone on a flash forum made this suggestion:

>> if true

>> myvar = 1

>> if false

>> myvar =0

>> couldn’t you just have a function that reads the distance, or >> stick the distance in a variable when they collide for the >> first time?

Thanks again

]]>