1 / 25

Enhancing User Interaction with Motion Tracking Buttons in SCM-CityU

Discover the innovative approach to user interaction through motion tracking buttons using the SCM-CityU framework. This guide explores how to create and implement buttons that respond to user motion rather than traditional mouse clicks. Learn about setting up the MotionTrackerButton class, analyzing motion over interface elements, and adding visual effects to enhance feedback. Experience seamless interaction with tips for managing event listeners and optimizing the motion detection process. Perfect for developers looking to elevate user engagement through intuitive design.

chaz
Download Presentation

Enhancing User Interaction with Motion Tracking Buttons in SCM-CityU

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Topic 11: Motion Tracking Part III SCM-CityU

  2. Button Click • Usually done via mouse click SCM-CityU

  3. Button Click • Can we click digital buttons by our fingers directly? • Answer: Yes! • Through motion • Of course, you canalso rely on touchsensors • Need extra hardware SCM-CityU

  4. Today’s Examples • Motion-driven button interaction SCM-CityU

  5. Today’s Examples • Motion-driven button interaction SCM-CityU

  6. Motion Tracking Library • In cityu.scm package (developed by Hongbo Fu) • Webcam class • An easy-to-use wrapper for webcam access • MotionTracker class • Main class for motion tracking • MotionTrackerButtonclass • Use motion to trigger button clicking SCM-CityU

  7. Key Idea • Analyze motion over a button on the stage • If motion is detected over it, dispatch OVER event • Cf. MouseEvent.MOUSE_OVER • If motion continuously exists for a while, dispatch CLICKED event • Cf. MouseEvent.MOUSE_DOWN • To avoid undesired clicks after dispatching CLICKED event, clicking is disabled for a short period (say 2 sec) • If clicking is re-enabled, dispatch CLICKABLE event • Cf. MouseEvent.MOUSE_UP SCM-CityU

  8. MotionTrackerButton Class • To create a motion-driven button, you need • Step 1: create some display object (e.g., btn) on stage • By either design tool or ActionScript programming • Step 2: create a MotionTrackerButton object and associate it with btn • Step 3: add event listeners for motionBtn • MotionTrackerButton.OVER MotionTrackerButton.CLICKED MotionTrackerButton.CLICKABLE varmotionBtn:MotionTrackerButton= newMotionTrackerButton(webcam,btn); SCM-CityU

  9. Step 1: Create Display Object • Draw some shape on stage • Convert it to symbol • Assign an instance name (e.g., btn) SCM-CityU

  10. Review: Instance Name vs Class Name • Symbol instance name (cf. variable in AS) • Use this when you want to directly access this symbol instance in AS (e.g., btn.x = 20;) • Symbol class name (cf. complexdata type in AS) • Use this when you want to dynamically create (possibly many) symbol instances in AS • E.g., var btn2: MyButton = new MyButton(); SCM-CityU

  11. Step 2: Create MotionTrackerButton Object • Before adding a MotionTrackerButton object, we need to initialize a Webcamobject • We don’t need to explicitly create a MotionTrackerobject, since it is automatically generated for the associated button importcityu.scm.Webcam;// import Webcam class varwebcam:Webcam=new Webcam(640,480);webcam.addEventListener(Webcam.READY,onCameraReady); functiononCameraReady(e:Event):void{ addChild(webcam); // to avoid occlusion of stage objects by webcam webcam.sendToBack(); webcam.alpha=0.4; } SCM-CityU

  12. Step 2: Create MotionTrackerButton Object • First import MotionTrackerButtonclass • Then create a button with motion control • 3rd parameter: amount of motion needed to activate clicking • How easy a button can be clicked • 4th parameter: time (in milliseconds) needed to re-enable clicing after dispatching CLICKED event • How oftena button can be clicked importcityu.scm.MotionTrackerButton; varmotionBtn:MotionTrackerButton= newMotionTrackerButton(webcam,btn,10,500); SCM-CityU

  13. Step 2: Create MotionTrackerButton Object • Motion detection is clipped to the button area only • To see tracking visualization, make the button a bit transparent SCM-CityU

  14. Step 3: Add Event Listeners • Event types • MotionTrackerButton.OVER • MotionTrackerButton.CLICKED • MotionTrackerButton.CLICKABLE motionBtn.addEventListener(MotionTrackerButton.OVER, onButtonOver); motionBtn.addEventListener(MotionTrackerButton.CLICKED, onButtonClick); motionBtn.addEventListener(MotionTrackerButton.CLICKABLE, onButtonClickableAgain); function onButtonClick(e:Event):void{ trace("button clicked"); } SCM-CityU

  15. Add More Visual Effects • Idea: create multiple frames for the button and go to certain frame when a certain condition is satisfied • The button in our example is just a movie clip • Review: MovieClip’s properties and methods (ref) • Note: we can access a frame by either frame number or label • Properties • currentFrame: int • currentLabel: String • totalFrames: int • Methods • stop(), play() • nextFrame(), prevFrame() • gotoAndStop(frame) • frame is a number or string • gotoAndPlay(frame) SCM-CityU

  16. Add More Visual Effects • Modify button symbol to have two key frames • Frame 1 • Use the original shape • Frame label: up • Frame 2 • Add some shadow filter • Frame label: down SCM-CityU

  17. Class Exercise • Task 1: when button is clicked by motion • If btn’s current frame label is “up”, go to frame “down” • If btn’s current frame label is “down”, go to frame “up” • Tips • Add code in onButtonClick • Use currentLabel, gotoAndStop SCM-CityU

  18. Class Exercise • Task 2: play with different values for 3rd and 4th parametersof MotionTrackerButton. • 3rd parameter: how easy a button can be clicked • 4th parameter: how often a button can be clicked • Compare • MotionTrackerButton(webcam, btn, 1, 500); • MotionTrackerButton(webcam, btn, 20, 500); • Compare • MotionTrackerButton(webcam, btn, 5, 50); • MotionTrackerButton(webcam, btn, 5, 2000); SCM-CityU

  19. Example: Piano with Motion Control • How to interact multiple MotionTrackerButton objects? SCM-CityU

  20. Class Exercise • Open MotionTracker-Piano-Skeleton.fla and insert a new symbol • Frame 1 of this new symbol • Frame 2 of this new symbol • No AS code needed for this frame SCM-CityU

  21. Class Exercise • Create 7 instances of the new symbol on stage • Instance names from left to right: key1, key2, key3, key4, key5, key6, key7 • Alternatively, you can create those instances in AS using for loop SCM-CityU

  22. Music Notes • We use an array to store music notes var notes:Array=[new S1(),new S2(), new S3(),new S4(), new S5(),new S6(), new S7()]; SCM-CityU

  23. Create Motion Buttons • We use arrays to store both piano keys and their corresponding motion buttons • Corresponding key and motion button have same index // a list of motion buttons. e.g., keysMB[0] is for keys[0] var keysMB:Array=newArray(); var keys:Array=[key1, key2, key3, key4, key5, key6, key7]; for(var i:uint =0; i < keys.length; i++){ keysMB.push(newMotionTrackerButton(webcam,keys[i],5,500)); } SCM-CityU

  24. Event Listeners for(var i:uint =0; i < keys.length; i++){ // motion-driven keysMB[i].addEventListener(MotionTrackerButton.CLICKED, onKeyPressed); keysMB[i].addEventListener(MotionTrackerButton.CLICKABLE, onKeyReleased); } functiononKeyPressed(e:Event):void{ for(var i:uint =0; i < keys.length; i++){ if(keysMB[i]== e.target){ trace("index of pressed key", i); } } } SCM-CityU

  25. Extension to Other Instruments SCM-CityU

More Related