• Build upon HelloEEG! Tutorial 1
• Animate an object using ActionScript
• Using other data supplied from the MindSet

This tutorial requires the following materials:

• MindSet
• ThinkGear Connector
• Adobe Flash CS4 Professional
• as3corelib

• ThinkGear Connector User's Guide
• ThinkGear Socket Protocol
• as3corelib API Documentation (JSON class only)

• Complete HelloEEG Tutorial 1

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.