The app is nearly done although I will be working on it over the next couple of weeks to make a better version, I aim to make it so the user is a silhouette. I will be trying it on tuesday where I will be rear projecting it onto a shop window and as passers by walk past the snow will fall on them. Video to come soon. But as for now I will leave you with the application.

I will also include this other small application which is where I am up to silhouetting the user, there are a lot of problems that I can see that I would like to iron out before implementing it with the snowfall but hopefully I can iron this out over the next week or so. To start it running just click on the stage with you out of camera view when you come back it will silhouette you.

So onto the code, I have started by bringing in a camera feed and applying filters to it until I have the edges highlighted in white the theory next is to basically dynamically make snowflakes which land on the generated surfaces and stay there until they are moved or disturbed.

So just a quick overview of the idea… We are going to build a side scrolling game, that involves everyone’s favourite enemy… ZOMBIES!!! We are aiming to have a rough prototype by december without character… named Bob, walking and fighting that is our first milestone.

So I will be programming it all in AS3, but I have decided to push myself by using classes. Which I know about but I have never really made a piece as I plan to make this I have used classes, and wrote my own document classes but never wrote a class hierarchy as I plan to for this project.

So now onto the point of the post, I have started setting up classes and have a document class and a class for my main character. I have also started setting up the movement controls. I had problems to start with in that it would only allow me to use one key movement at a time, so I fixed this using an array which allows me to tell my mainCharacter class what keys are down and aren’t down. Here is my first test.

The image is controlled by the up, down, left and right keys.

It needs a little bit of refining but I need to test it as a projection before I start experimenting with the code.

 // VARIABLES \\
var colour = 0xff0000;
var thickness = 10;
var blurAmount = 10;
var fadeSpeed = 1.5;

After setting up our variables we are going to set up a 2 function one which draws the line and saves that section as a movieclip, and the other part which will fade and blur the line. This function is for drawing the line, I called it drawLine. We create 2 variables one to pass a number to the other variable and one which creates empty movieclips to store the separate sections of line. We then set the line style. We then set we were are starting to draw the line from or each time it will draw from the same place, so we call prevX and prevY which are variables that will store our last mouse positions. We then draw a line from this position to our new position which is the current mouse X and Y position. We then give prevX and prevY the current mouse so the next time the function is called it starts from the place it finished.

// FUNCTIONS \\
function drawLine():MovieClip {
	var depth:Number = _root.getNextHighestDepth();
	var line_mc:MovieClip = _root.createEmptyMovieClip("line"+depth, depth);
	line_mc.lineStyle(thickness,colour,100);
	line_mc.moveTo(prevX,prevY);
	line_mc.lineTo(_xmouse,_ymouse);
	prevX = _xmouse;
	prevY = _ymouse;
	return line_mc;
}

The next function is what we are going to call to blur and fade the parts of our line. I called mine fadeDraw. This function will be applied to our other function, so we use this to refer to the movieclip(section of line) it will be effecting. We will fade out and blur out every time we enter the frame so we put all the code in an onEnterFrame function. Firstly we make the alpha of the movieclip fade by reducing the alpha, and then we blur it. We then use an if statement to remove any movieclips that have 0 alpha this makes our .swf run more efficiently.

function fadeDraw():Void {
	this.onEnterFrame = function():Void  {
		this._alpha -= fadeSpeed;
		this.filters = [new flash.filters.BlurFilter(blurAmount, blurAmount, 2)];
		if (this._alpha<0) {
			this.removeMovieClip();
		}
	};
}

The final thing we do is call our functions, this I did every time the mouse is moved. This little bit of code call both our functions and applies the fade and blur to each bit.

onMouseMove = function ():Void {
	fadeDraw.apply(drawLine());
};

Try it out, here is my example.

 import processing.net.*;
 
int port = 9001;
Server myServer;
//Variables for Sending
byte zero = 0;
int total = 299;
int total2 = 200;
 
void setup() {
  size (200, 200);
  myServer = new Server(this,port);
}
 
void draw () {
  total += 1;
  total2 +=2;
  myServer.write(total+","+total2);
  myServer.write(zero);
}

Flash Actionscript 3

// ===serverCom Class=== //
// ===     created by     ===//
// ===     Josh Shard     ===//
package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.DataEvent;
	import flash.events.IOErrorEvent;
	import flash.net.XMLSocket;
 
	public class serverCom extends Sprite {
 
		public var serialServer:XMLSocket;
 
		public function serverCom() {
			init();
		}
		public function init():void {
			serialServer=new XMLSocket  ;
			serialServer.connect("127.0.0.1",9001);
 
			serialServer.addEventListener(DataEvent.DATA,onReceiveData);
 
			serialServer.addEventListener(Event.CONNECT,onServer);
			serialServer.addEventListener(Event.CLOSE,onServer);
			serialServer.addEventListener(IOErrorEvent.IO_ERROR,onServer);
		}
		// --== EVENTS ==-- \\
		public function onServer(event:Event):void {
			trace(event);
		}
		public function onReceiveData(dataEvent:DataEvent):void {
 
			var Data:DataEvent=dataEvent;
			//trace(Data);
 
			// This grabs the data from Data var which is the string passed
			// from our processing server.
			var test=Data.data;
			//trace(test);
 
			// This splits the variables we are passing.
			var parts:Array=test.split(",");
			trace("parts0 this is the first variable: " + parts[0]);
			trace("parts1 this is the second variable: " + parts[1]);
		}
	}
}

So Alex Fish, a good friend of mine and me, began to look at actionscript 3.0, my background was in flash with as2, while Alex had previous programming experience with processing, css, html, and various other web languages. So we began to delve into the unknown…

By lunch time we had learnt some of the key basics of actionscript 3.0, one of the main think I learnt was about classes I was use to programming everything on the first frame of my file, now i just simply made a document class and compiled and voila, nothing in the .fla. So we began to work together, we decided we wanted to make a drag and drop class because this would be a useful class that would be helpful for me in the future, and also be something Alex could use with his latest project.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

// AS3 drag and drop class
// Alex Fish and Josh Shard
 
package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.TextField;
import flash.events.MouseEvent;
import flash.events.Event;
 
public class drag extends Sprite {
private var eventSprite:Sprite;
private var dragging=0;
private var speed=1;
private var xMouse:Number;
private var yMouse:Number;
public function drag() {
init();
}
private function init():void {
//Stops the movie changing scale
stage.scaleMode=StageScaleMode.NO_SCALE;
//
//Places in the top left of window
stage.align=StageAlign.TOP_LEFT;
 
//
//Place Sprite on the stage
eventSprite=new Sprite;
addChild(eventSprite);
 
//
// Draws a circle and fills it with the hexidecimal colour.
eventSprite.graphics.beginFill(0xffffff);
eventSprite.graphics.drawCircle(0,0,50);
eventSprite.graphics.endFill();
//
//Places the circle(sprite) in the centre of the stage
eventSprite.x=stage.stageWidth / 2;
eventSprite.y=stage.stageHeight / 2;
 
//
//Adds code to listen for mouse down and mouse up
eventSprite.addEventListener(MouseEvent.MOUSE_DOWN,onMousePressedDown);
eventSprite.addEventListener(MouseEvent.MOUSE_UP,onMouseReleased);
eventSprite.addEventListener(Event.ENTER_FRAME,onLoop);
 
}
//
// This is our on enterframe function to start the drag. And stop it.
private function onLoop(event:Event):void {
//trace("entering frame");
if (dragging == 1) {
eventSprite.x=mouseX;
eventSprite.y=mouseY;
}
eventSprite.x += speed;
}
//
// This function handles the event when the mouse is pressed
// on our sprite.
private function onMousePressedDown(event:MouseEvent):void {
//trace("Mouse Down");
dragging=1;
speed += 1;
}
//
// This function handles the event when the mouse is released
// on our sprite.
private function onMouseReleased(event:MouseEvent):void {
//trace("Mouse Up");
dragging=0;
}
}
}

This is the code we put together, and worked pretty well, I added a few additions to mine, including a speed factor meaning everytime you press down the ball gets faster. It also moves towards the edge of the screen which was a bit of simple animation I was exploring. You can check the compiled version here.  Over the next weeks I will be exploring more actionscript while also adding some recent as2 tutorials to my blog.