Pages

Thursday, 7 June 2012

Custom Cursor in Flash

This tutorial will teach you how to create a custom cursor for your flash movie. Here we will be using movieclip symbol and little bit of actionscript to develop custom cursor. The .fla download file is included at the end of the tutorial.

Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX 2004 must be installed in your system to download the .fla file.


Well, I would like to start this tutorial assuming that the reader knows about Basics of flash such as different kinds of symbols used in flash.
Firstly, you will need to create a movieclip symbol for customized cursor design then you will have to type in few lines of code asking flash to hide the existing cursor and show the new cursor developed by you.

Create a movieclip symbol

Steps to Follow :
  • Press (Ctrl+F8) to create a new symbol.
    "Create New symbol" window will appear
  • Name your symbol cursorNew_mc.
  • Click on movieclip behavior and then press "OK"
    Now you would have entered your movieclip symbol
  • Draw anything you like to replace the existing cursor.
    For example I drew an arrow as shown below
  • Now come back to "Scene 1" which is your main movie
    To get back to "Scene 1", click on the "Scene 1" text on top of your timeline window as shown in the figure below
In "Scene 1" of your Main Movie
  • Drag your cursorNew_mc movieclip symbol from library onto your stage.
    If Library window is not open, Press (Ctrl+L).
  • Name this Symbol "cursornew" in the instance text box of your property window.
  • Select 1st Frame of your "Layer1". Go to Actionscript panel ( If your actionscript panel is not open, Press "F9")
  • With Frame1 of your layer 1 still being selected, type the below mentioned script in your action panel.

    Mouse.hide()
    startDrag(cursornew,true)
Guess what! You have finished with customizing your cursor :), Press Ctrl+Enter to view customized cursor.

Below is an example which would give you more ideas to customize your cursor
Example
Download the .fla file

No comments:

Post a Comment