This will be my last post before the Critique on Monday, today I added the finishing touches to inthel00p.co.uk, these touches included:
Changing the sounds, finding that wasn’t too abrupt, something that people can listen to, I think I found a middle ground with the sound that inst irritating, the extremely clean piano sound that I was using to test had to much velocity and gain, the new sound is damper and has more reverb.
Also Yesterday I was working on the positional elements which I managed to overcome, I didn’t describe how I solved this, so I will do this now.. Basically what I needed to do was make all the notes positions relative to the stage so that no matter how big the variables “names” are you will always see all 8 on screen, and the distances between them will still be different. the way to do this is to divide the amount of characters in each name by the amount of characters in total on stage, and then times it by the width required. here is my code.
lengthtotal = anameFirst.length + bnameFirst.length + cnameFirst.length + dnameFirst.length + enameFirst.length + fnameFirst.length + gnameFirst.length + hcnameFirst.length;
apercent = anameFirst.length / lengthtotal;
bpercent = bnameFirst.length / lengthtotal;
cpercent = cnameFirst.length / lengthtotal;
dpercent = dnameFirst.length / lengthtotal;
epercent = enameFirst.length / lengthtotal;
fpercent = fnameFirst.length / lengthtotal;
gpercent = gnameFirst.length / lengthtotal;
hcpercent = hcnameFirst.length / lengthtotal;
I did the timesing when i got in to the positional part of my code.
That is just about all to be said, go and check it out for yourself and submit your note 
> inthel00p.co.uk
After discussion with Lecturer Liam about the development of my project there were a few changes that need to be made to the project.
Firstly, make the player loop to for-fill the name “inthel00p”, I have amended my code to make the player loop, and also added in a stop button to the player which resets the playhead to the start and stops all sounds on stage.
Secondly, the submit function was just a button that appeared near the facebook login box, not very user friendly as everyone will be looking down at the play and wanting to press play, so I needed to either make the note submission part of the facebook login or add a submit button on the player, for now I have added the button and will see how some friends think it works.
Finally I need to make the sounds more interesting and possibly add a loop beat in the background, this could make or break the project in terms of how it sounds, and if people want to actually listen to it. update on sounds to follow after some experimenting.
Yesterday evening I made the inthel00p site live here inthel00p.co.uk
After asking a few friends to login using facebook and submit their names I have noticed a few glitches, mainly based around the positioning of the notes and names, because of the way I have coded it and because of the uncontrollable variables being the names, sometimes the names are pushed of the edge of the screen, this requires some work to make sure people can see their name where they are supposed to. I have a few ideas of how I am going to get round this, the main way is to relate every positional calculation to the width of the movie, this will ensure that everything calculates to fit the size, not matter what the variable is. My Math is not so hot so I am going to need to work on this.
Other than that I need to think about what the sounds will be, at the moment the simple keyboard sound is fairly boring, although it is exciting to see your name as part of an 8 not composition the sound is pretty dull..
here is a screen shot of the site live and with myself logged in, you can see the note at the top left next to my profile picture this is the submit note button, I may include on below within the flash movie aswell.
So, with a little help from my friends, I have managed to get my information from the database and into the flash project, the demo that is at inthel00p.co.uk is calling the names directly from the database and spitting them out in to the correct positions and moving everything dynamically.
Here is my server var Actionscript code.
stop();
var anameFirst:String = "loading";
var anameLast:String = "loading";
var anamelink:String = "loading";
var anameimg:String = "loading";
var bnameFirst:String = "loading";
var bnameLast:String = "loading";
var bnamelink:String = "loading";
var bnameimg:String = "loading";
var cnameFirst:String = "loading";
var cnameLast:String = "loading";
var cnamelink:String = "loading";
var cnameimg:String = "loading";
var dnameFirst:String = "loading";
var dnameLast:String = "loading";
var dnamelink:String = "loading";
var dnameimg:String = "loading";
var enameFirst:String = "loading";
var enameLast:String = "loading";
var enamelink:String = "loading";
var enameimg:String = "loading";
var fnameFirst:String = "loading";
var fnameLast:String = "loading";
var fnamelink:String = "loading";
var fnameimg:String = "loading";
var gnameFirst:String = "loading";
var gnameLast:String = "loading";
var gnamelink:String = "loading";
var gnameimg:String = "loading";
var hcnameFirst:String = "loading";
var hcnameLast:String = "loading";
var hcnamelink:String = "loading";
var hcnameimg:String = "loading";
new ServerGetVar("shout",new Array(
{name:"auth_check",value:"008eh87fn38x"}
),
this);
function recieveVars(values:Object){
if(values.page == "shout"){
trace(values.firstname1);
trace(values.firstname2);
trace(values.firstname3);
trace(values.firstname4);
trace(values.firstname5);
trace(values.firstname6);
trace(values.firstname7);
trace(values.firstname8);
trace(values.lastname1);
trace(values.lastname2);
trace(values.lastname3);
trace(values.lastname4);
trace(values.lastname5);
trace(values.lastname6);
trace(values.lastname7);
trace(values.lastname8);
trace(values.fblink1);
trace(values.fblink2);
trace(values.fblink3);
trace(values.fblink4);
trace(values.fblink5);
trace(values.fblink6);
trace(values.fblink7);
trace(values.fblink8);
trace(values.fbimage1);
trace(values.fbimage2);
trace(values.fbimage3);
trace(values.fbimage4);
trace(values.fbimage5);
trace(values.fbimage6);
trace(values.fbimage7);
trace(values.fbimage8);
anameFirst = values.firstname1;
bnameFirst = values.firstname2;
cnameFirst = values.firstname3;
dnameFirst = values.firstname4;
enameFirst = values.firstname5;
fnameFirst = values.firstname6;
gnameFirst = values.firstname7;
hcnameFirst = values.firstname8;
anameLast = values.lastname1;
bnameLast = values.lastname2;
cnameLast = values.lastname3;
dnameLast = values.lastname4;
enameLast = values.lastname5;
fnameLast = values.lastname6;
gnameLast = values.lastname7;
hcnameLast = values.lastname8;
anamelink = values.fblink1;
bnamelink = values.fblink2;
cnamelink = values.fblink3;
dnamelink = values.fblink4;
enamelink = values.fblink5;
fnamelink = values.fblink6;
gnamelink = values.fblink7;
hcnamelink = values.fblink8;
anameimg = values.fbimage1;
bnameimg = values.fbimage2;
cnameimg = values.fbimage3;
dnameimg = values.fbimage4;
enameimg = values.fbimage5;
fnameimg = values.fbimage6;
gnameimg = values.fbimage7;
hcnameimg = values.fbimage8;
play();
}
}
This may seem like a lot of code, but the process to do this with less code is more complicated, and I do not have this coding knowledge at present. The data being called isn’t really that much anyway so having this much code is not an issue for this project. The next step is to add the submit function for facebook to send its users information to the database and then reload inthel00p to display the most recent entry. I think the plan would be to have php check the database for previous entrys, possibly against a date stamp to make sure people don’t spam their name over and over.
The next step of my project is to get the flash project talking to my database, I have filled my database with more than 8 records so that I am emulating the end project where users will submit their information in real time. the php and actionscript then need to select the most recent 8 entry’s from the database and spit them into the variables set out for the flash movie to display as notes.
In the image above you will see that I have added in columns for links to facebook profile and images to be stored, I am not sure yet whether to integrate links back to users profiles, this may put some people off using the system because strangers will have direct access to their limited profile.
Anyway, to get the ball rolling I am going to get these fields sending over to the action script from PHP and then decide what is to be done with them once in the project, After that I will need to write the submit function so users can submit their name to the database.
Okay, so far I have managed to create the project to handle all the variables needed, and I have put a live test of the flash movie here > http://inthel00p.co.uk/
there are a few things to note on this test movie, the sounds load fairly slow, they possibly need to be preloaded in to the movie before the user clicks play, at the moment they are loaded on the fly, this will cause problems for people with slower connections and in general adds a lag between when the playhead meets the notes and the sound playing.
also I have made the controls unusable during playback to save confusion with the ‘submit’ and refresh’ buttons that I have added to give an idea of future development. occasionally the visibility of the buttons changes during playback.. just to keep you on your toes ;P not really.. this is not deliberate I will investigate why this happens.
The next phase of the project is to start integrating the server side structure and the facebook integration, this will be the PHP and mySQL side of things, and I’m sure as I go there will be more tweeks to the actionscript needed.
I have also realised that there is nothing stopping the notes from leaving the side of the screen.. thats if there were lots of people with very long first names.. so I either need a way of limiting this, or a way of scaling it down if the length breaches the width of the movie.
here is a screenshot of it at its latest stage, again for now I have just set the names variables, there will be more needed once I start to include the images and web links to facebook.
Right.. So the next bit of development I have been working on is how to integrate peoples names in to the Action Script, and generate numbers and code from them. Flash has an excellent funtion “.length” that you can use to call the amount of digits in a selected string, I have used this along with making an individual function to handle all the notes, so that when a name is placed in to a variable (this will eventually be from facebook) it generates the note based on the amount of characters. here is my code. (The image below has been simplified for the coding, the notes are not in position as this is still to be coded and the dynamically generated text needs to be positioned, this will also be coded soon)
addEventListener(Event.ENTER_FRAME, notePlay);
function notePlay(event:Event){
if (noteRecord >= 1) {
if (noteRecord <= 4)
{
var cSound:Sound = new Sound();
cSound.load(new URLRequest("sound/C.mp3"));
cSound.play();
noteRecord = 0;
} }
if (noteRecord == 5){
var dSound:Sound = new Sound();
dSound.load(new URLRequest("sound/D.mp3"));
dSound.play();
noteRecord = 0;
}
if (noteRecord == 6){
var eSound:Sound = new Sound();
eSound.load(new URLRequest("sound/E.mp3"));
eSound.play();
noteRecord = 0;
}
if (noteRecord == 7){
var fSound:Sound = new Sound();
fSound.load(new URLRequest("sound/F.mp3"));
fSound.play();
noteRecord = 0;
}
if (noteRecord == 8){
var gSound:Sound = new Sound();
gSound.load(new URLRequest("sound/G.mp3"));
gSound.play();
noteRecord = 0;
}
if (noteRecord == 9){
var aSound:Sound = new Sound();
aSound.load(new URLRequest("sound/A.mp3"));
aSound.play();
noteRecord = 0;
}
if (noteRecord == 10){
var bSound:Sound = new Sound();
bSound.load(new URLRequest("sound/B.mp3"));
bSound.play();
noteRecord = 0;
}
if (noteRecord >= 11){
var hcSound:Sound = new Sound();
hcSound.load(new URLRequest("sound/highC.mp3"));
hcSound.play();
noteRecord = 0;
trace (noteRecord);
}
}
I have also replaced some of the graphical elements in the flash with dynamic objects that are updated by the text in the variables that I have set.. you will notice all the text boxes are blank in the project window, but below the variables that get put in there when the movie is run. (again these names wil; be replaced with the ones generated from facebook)
This bit of code puts the information in the variables in to the correct dynamic text areas.
addEventListener(Event.ENTER_FRAME, allText);
function allText (event:Event){
Firsta.text = String (anameFirst);
Firstb.text = String (bnameFirst);
Firstc.text = String (cnameFirst);
Firstd.text = String (dnameFirst);
Firste.text = String (enameFirst);
Firstf.text = String (fnameFirst);
Firstg.text = String (gnameFirst);
Firsthc.text = String (hcnameFirst);
}
One of the next things I will be working on is how to load external images into the centres of each note. I will also be working on the positioning of the notes to relative to the actual sound, so a higher not makes for a higher positioning of the graphical note. BRAP.
Tutorial I found on how to load external images in to AS3 http://www.newgrounds.com/bbs/topic/827299
So today I produced some notes using the midi features in garage band, for some reason they came out very loud, I will obviously be modifying these for the actual build.. I managed to use Action Script 3.0 effectivly to load external audio files straight from an external folder.. the code I used to do this is as follows.
var mySound:Sound = new Sound();
mySound.load(new URLRequest("sound/F.mp3"));
simples!.. Using Action Script I also developed the playhead, so now it moves along the screen and it does so by looking at the distance it needs to travel and tweens itself automatically, I then looked in to detecting collisions between objects, so the playhead knows when it hits the notes you do this by adding event listeners
stage.addEventListener(Event.ENTER_FRAME, ahitTest)
stage.addEventListener(Event.ENTER_FRAME, bhitTest)
stage.addEventListener(Event.ENTER_FRAME, chitTest)
stage.addEventListener(Event.ENTER_FRAME, dhitTest)
stage.addEventListener(Event.ENTER_FRAME, ehitTest)
and then functions for each listener so that when a listener is triggerd the sounds are played.
function ahitTest(yourEvent:Event):void{
if (playhead.hitTestObject(note1)){
var mySound:Sound = new Sound();
mySound.load(new URLRequest("sound/F.mp3"));
mySound.play();
};}
function bhitTest(yourEvent:Event):void{
if (playhead.hitTestObject(note2)){
var mySound:Sound = new Sound();
mySound.load(new URLRequest("sound/F.mp3"));
mySound.play();
}; }
function chitTest(yourEvent:Event):void{
if (playhead.hitTestObject(note3)){
var mySound:Sound = new Sound();
mySound.load(new URLRequest("sound/G.mp3"));
mySound.play();
}; }
function dhitTest(yourEvent:Event):void{
if (playhead.hitTestObject(note4)){
var mySound:Sound = new Sound();
mySound.load(new URLRequest("sound/E.mp3"));
mySound.play();
}; }
function ehitTest(yourEvent:Event):void{
if (playhead.hitTestObject(note5)){
var mySound:Sound = new Sound();
mySound.load(new URLRequest("sound/highC.mp3"));
mySound.play();
}; }
Here is a video of this in action. enjoy.
So I want to make this solution as slick as possible, I have considered a couple of ways to make the audio work, here are my thoughts..
1. I make the flash project have a max of 20 frames, then on each frame there is an individual note (generated by the Facebook user), which plays along the timeline. easy.
2. I produce a live timeline where there is a ‘line’ or ‘playhead’ that scrolls along the screen and as it reaches each note it plays the sound that is programmed to that hight of note.
Now, option one is very very simple and will require minimal programming knowledge, and option two is more complex and will require more Actions Script knowledge, the Facebook API access for each will be pretty much the same as I will need all the same information. There is going to need to be some crucial time management so that I develop the project correctly and get each slice done on time.
I much prefer the idea of number two, and I do think it is reasonable within the time, it would make for a much richer user experience, as the visual element of watching the playhead move will catch the eye. image below.
Looking at some examples of Generative audio online.
- Generative patterns - http://www.soniccharge.com/patternarium#
- Amazing piece of generated audio visual - http://vimeo.com/16219591
- Project Mooncircle (More than Music) – http://www.projectmooncircle.com/
- Forum for digital arts – http://node10.vvvv.org/
Most of these are offline generative solutions, there are a lot of mentions to VVVV, and after a quick search you can find a number of websites relating to VVVV and its visual capability mainly
- VVVV – http://vvvv.org/
- VVVV on Vimeo – http://vimeo.com/channels/vvvv
My solution is going to be mainly on the Audio side, although searching this online doesn’t seem to give me many results relative to web based generative audio, people use VVVV for this also. I think my solution is going to be fairly unique.