====== HelloEEG! Part 2 ======
====== Features ======
* Build upon [[helloeeg_adobe_flash_tutorial|HelloEEG!]] Tutorial 1
* Animate an object using ActionScript
* Using other data supplied from the MindSet
====== Required Materials ======
This tutorial requires the following materials:
* [[http://neurosky.com/|MindSet]]
* [[thinkgear_connector_tgc|ThinkGear Connector]]
* Adobe Flash CS4 Professional
* [[https://github.com/mikechambers/as3corelib/downloads|as3corelib]]
====== Recommended Reading ======
* {{:app_notes:thinkgear_connector_user_s_guide_new.pdf|ThinkGear Connector User's Guide}}
* {{:app_notes:thinkgear_socket_protocol.pdf|ThinkGear Socket Protocol}}
* as3corelib API Documentation (JSON class only)
====== Prerequisite Steps ======
* Complete HelloEEG Tutorial 1
====== Animation with eSense ======
Now that you have connected to the ThinkGear Connector and you are now reading data from the MindSet, lets expand the Hello EEG! application further. Going back to "DisplayWindow.as", add the following code under the other imports:
import fl.transitions.*; //for animation
import fl.transitions.easing.*; //for animation
Next, create the ball that will be controlled by eSense by adding a Sprite to the ''DisplayWindow'' class.
//Private Properties
private var thinkGearSocket : Socket;
private var circle:Sprite; //add sprite
In the ''DisplayWindow'' initialization function, create and add ''circle''.
public function DisplayWindow() {
circle = new Sprite();
circle.graphics.beginFill(0xFF0000);
circle.graphics.drawCircle(275, 0, 40);
circle.graphics.endFill();
addChild(circle);
Your code should now look like this.
package {
import flash.display.*;
import flash.events.*; //for event handling
import flash.net.Socket; //sockets
import com.adobe.serialization.json.* ; //as3corelib JSON support
import fl.transitions.*; //for animation
import fl.transitions.easing.*; //for animation
public class DisplayWindow extends Sprite {
// Constants:
// Public Properties:
public var attention:uint;
public var meditation:uint;
public var poorSignal:uint;
// Private Properties:
private var thinkGearSocket : Socket;
private var circle:Sprite;
// Initialization:
public function DisplayWindow() {
circle = new Sprite();
circle.graphics.beginFill(0xFF0000);
circle.graphics.drawCircle(275, 0, 40);
circle.graphics.endFill();
addChild(circle);
thinkGearSocket = new Socket();
thinkGearSocket.addEventListener(ProgressEvent.SOCKET_DATA, dataHandler);
thinkGearSocket.connect("127.0.0.1", 13854);
Now in the ''dataHandler()'' function, add some animation code. Create a ''Tween'' object after receiving a ''poorSignal'' vaule.
poorSignal = data["poorSignalLevel"];
var yTween:Tween; //adding Tween object
if(poorSignal == 0) {
After receiving eSense data, the ball can now be updated by using a tween animation. Using tween allows Flash to do all the animation work for you.
if(data["poorSignalLevel"] != null) {
poorSignal = data["poorSignalLevel"];
var yTween:Tween;
if(poorSignal == 0) {
attention = data["eSense"]["attention"];
meditation = data["eSense"]["meditation"];
var newPos:int = 350 - (attention * 3.5); //calculate new position of ball
yTween = new Tween(circle, "y", Elastic.easeOut, circle.y, newPos, 0.95, true); //move ball
}
else {
if(poorSignal == 200) {
attention = 0;
meditation = 0;
yTween = new Tween(circle, "y", Strong.easeOut, circle.y, 350, 0.75, true); //move ball back
}
}
}
Now you can test your application. If everything is correct, you should see something like this.\\
{{:app_notes:helloeeg1:bouncyball.png?400|}}