Advanced Search

Remove an Object, iPhone App Style

/ Published in: ActionScript 3
Save to your folder(s)
How to create a delete effect inspired by the iPhone iOS interface. By Carlos Yanez.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. private var timer:Timer = new Timer(1000); //The time to hold the mouse button down the icon in order to show the delete button
  2. private var tiltTimer:Timer = new Timer(80); //The time of the rotation change, makes the shake effect
  3. private var rotationValue:int = 2; //The rotation desired for the shake
  4. private var tween:Tween; //A tween instance to animate the alert dialog
  5.  
  6. public function Main():void
  7. {
  8.  
  9. /*Hide elements*/
  10. 	hideObjects(appIcon.deleteButton, deleteAlert, darkScreen);
  11.  
  12. /*Add necesary listeners*/
  13. 	deleteAlert.cancelBtn.addEventListener(MouseEvent.MOUSE_UP, cancel);
  14. 	deleteAlert.deleteBtn.addEventListener(MouseEvent.MOUSE_UP, deleteApp);
  15. 	appIcon.deleteButton.addEventListener(MouseEvent.MOUSE_UP, displayAlert);
  16. 	appIcon.addEventListener(MouseEvent.MOUSE_UP, stopTimer);
  17. 	appIcon.addEventListener(MouseEvent.MOUSE_DOWN, pressAndHold);
  18. }
  19.  
  20. /*Hide objects function*/
  21. private function hideObjects(...objects):void
  22. {
  23. 	for(var i:int = 0; i < objects.length; i++)
  24. 	{
  25. 		objects[i].visible = false;
  26. 	}
  27. }
  28.  
  29. /*Starts the timer when the mouse is down*/
  30. private function pressAndHold(e:MouseEvent):void
  31. {
  32. 	timer.start();
  33. 	timer.addEventListener(TimerEvent.TIMER, showDeleteButton);
  34. }
  35.  
  36. /*If mouse up, timer stops*/
  37. private function stopTimer(e:MouseEvent):void
  38. {
  39. 	timer.stop();
  40. }
  41.  
  42. /*if the hold timer completes, the delete button is shown and the icon shakes*/
  43. private function showDeleteButton(e:TimerEvent):void
  44. {
  45. 	timer.stop();
  46. 	appIcon.deleteButton.visible = true;
  47. 	tiltTimer.addEventListener(TimerEvent.TIMER, tilt);
  48. 	tiltTimer.start();
  49. }
  50.  
  51. /*The shake function, changes the rotation every time the tiltTimer completes*/
  52. private function tilt(e:TimerEvent):void
  53. {
  54. 	appIcon.rotation = rotationValue;
  55. 	rotationValue *=  -1;
  56. }
  57.  
  58. /*if the delete button is pressed the alert is shown*/
  59. private function displayAlert(e:MouseEvent):void
  60. {
  61. 	deleteAlert.visible = true;
  62. 	darkScreen.visible = true;
  63. 	tween = new Tween(deleteAlert,"scaleX",Back.easeOut,0.3,1,0.5,true);
  64. 	tween = new Tween(deleteAlert,"scaleY",Back.easeOut,0.3,1,0.5,true);
  65. }
  66.  
  67. /*removes the icon if the delete button in the alert is clicked*/
  68. private function deleteApp(e:MouseEvent):void
  69. {
  70. 	hideObjects(appIcon, deleteAlert, darkScreen);
  71. }
  72.  
  73. /* removes the alert, stops the tilt and doesn't remove the icon, called by the cancel button*/
  74. private function cancel(e:MouseEvent):void
  75. {
  76. 	hideObjects(appIcon.deleteButton, deleteAlert, darkScreen);
  77. 	tiltTimer.stop();
  78. 	appIcon.rotation = 0;
  79. }

URL: http://active.tutsplus.com/tutorials/actionscript/quick-tip-remove-an-object-iphone-app-style/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.