Differences
This shows you the differences between two versions of the page.
|
helloeeg_part_2 [2011/11/30 11:31] |
helloeeg_part_2 [2014/05/06 19:55] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== 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: | ||
| - | <code> | ||
| - | import fl.transitions.*; //for animation | ||
| - | import fl.transitions.easing.*; //for animation | ||
| - | </code> | ||
| - | Next, create the ball that will be controlled by eSense by adding a Sprite to the ''DisplayWindow'' class. | ||
| - | <code> | ||
| - | //Private Properties | ||
| - | private var thinkGearSocket : Socket; | ||
| - | private var circle:Sprite; //add sprite | ||
| - | </code> | ||
| - | In the ''DisplayWindow'' initialization function, create and add ''circle''. | ||
| - | <code> | ||
| - | public function DisplayWindow() { | ||
| - | | ||
| - | circle = new Sprite(); | ||
| - | circle.graphics.beginFill(0xFF0000); | ||
| - | circle.graphics.drawCircle(275, 0, 40); | ||
| - | circle.graphics.endFill(); | ||
| - | addChild(circle); | ||
| - | </code> | ||
| - | Your code should now look like this. | ||
| - | <code> | ||
| - | 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); | ||
| - | </code> | ||
| - | Now in the ''dataHandler()'' function, add some animation code. Create a ''Tween'' object after receiving a ''poorSignal'' vaule. | ||
| - | <code> | ||
| - | poorSignal = data["poorSignalLevel"]; | ||
| - | var yTween:Tween; //adding Tween object | ||
| - | if(poorSignal == 0) { | ||
| - | </code> | ||
| - | 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. | ||
| - | <code> | ||
| - | 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 | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | </code> | ||
| - | Now you can test your application. If everything is correct, you should see something like this.\\ | ||
| - | {{:app_notes:helloeeg1:bouncyball.png?400|}} | ||