Flash Interactivity  spring 2008
Philip van Allen - v a n a l l e n @ a r t c e n t e r . e d u

all materials on this web site © copyright 2008, Philip van Allen
 
Flash Seminar - spring 2008- people.artcenter.edu/~vanallen/flash/

overview : 

Flash Seminar

  1. Flash description
  2. Resources
  3. Introduction to basic features
    1. windows
    2. timeline/frames/keyframes
    3. layers
    4. text
    5. playing/exporting
  4. Tweening
  5. Drawing tools (self study)
  6. Importing files
  7. Structuring the project
  8. Basic navigation and interaction
  9. Make a custom button
  10. Symbols - buttons, movie clips
  11. Sound
  12. More coding (drag movieclip, replace cursor, clip slider, animating graphics, text scrolling, preloader)

Sample portfolio movie: portfolio.swf, portfolio.fla

 



Flash description : 

Flash is an authoring tool for creating animation and interactivity with a focus on vector graphics. Flash is designed for the web, but can also be used to create stand-alone animations and interactive applications in CD-ROMs, kiosks, and other non-web mediums.

Flash is a flexible system that can be used for many different applications, including:

  • Complete websites
  • Website interface elements
  • Animations
  • Comics
  • Games
  • Interactive training systems
  • Mobile phone applications
  • Prototypes of interactive products

Flash specializes in vector graphics, which are particularly suited to the web and other low bandwidth applications which need small files. Vector graphics (like those created in Illustrator and Freehand) describe the shape of a graphic in a resolution independent way, without including information about every pixel. This usually creates small files compared to bitmap images like those created in applications like Photoshop.

Advantages of vector graphics:

  • Typically smaller files when compared to bitmap graphics
  • Resolution independent so images can be made larger or smaller without degradation of the image

Note that Flash also supports bitmap graphics, and can import files from Photoshop. In addition, Flash supports video. So Flash can be used to combine a variety of media in a single application. Just be careful of the file size created, because bitmap graphics and video do not compress as well as vector graphics.

 



flash resources : 

learning Flash and ActionScript

Flash Overview:

Flash Resource Sites:

Adobe:

Help available from within Flash:

  • HELP>FLASH HELP, then select USING FLASH>WORKSPACE -- Good starting point for basic information

Sounds & music:

Books

 

 

 



basic features : 

Flash has two main authoring features, the Stage and the Timeline, which enable the user to assemble graphics and make them animate over time.
  • The Stage: The area on the screen where you create, edit, and position graphics. Graphics objects are drawn, imported, edited and positioned on the stage for each keyframe in the movie. The user can set the pixel dimensions of the stage to determine the default display size of the Flash movie. The stage is composed of a number of layers (similar to those in Photoshop), which allow the user to determine how objects display in relation to each other.
  • The Timeline: This section of the program enables the user to navigate to specific time points in the Flash movie. When a point in time (a frame) is selected, the stage displays all the objects currently active and visible for that frame. The user can set the frame rate (i.e. how many frames display per second), extend the timeline by inserting frames, and create keyframes where (graphic, audio, or interactive) events occur.

 

 
brief tour of flash :  Main Windows to review
  • Main Window: Contains the Stage and Timeline
  • Window>Tools: Contains the controls for drawing and editing graphics on the stage
  • Window>Properties>Properties: Shows properties for the currently selected object. If nothing is selected, properties for the movie
  • Window>Library: Shows the graphics and other elements used in the current and other open movies
  • Window>Common Libraries>Buttons These are standard buttons that come with Flash
  • Window>Actions: (option F9) Where you can write and see ActionScript code

Flash movie settings. Set the following items using the property inspector (when no other objects are selected), or double click on the frame rate display, just below the timeline.

  • Frame rate: Defines how many frames per second the animation runs at. E.g. 12fps.
  • Dimensions: Defines the pixel size of the Flash movie.
  • Background color: Sets the color of the stage behind any graphics.
  • Publish settings: Determines the version of the Flash player required, along with many other settings

 

 
timeline : 

The timeline is a simplified display of the frames that compose the movie. Each division represents one frame of the movie, and the numbers across the top show the frame number for each position.

  • Layers: The timeline is divided into separate sections, where independent animations take place. These layers run in parallel, with the graphics on them layered from top to bottom, where the topmost layer is in the foreground, and the bottom most layer is in the background. New layers can be added by clicking on the add "+" layer icon on the left, below the layer names. The new layer is put on top, "in front" of the layer that was clicked on.
  • Keyframes: Click a point on the timeline in a layer. Use F6 or INSERT>TIMELINE>KEYFRAME to insert a Keyframe at this location. If there are no frames at this location, the layer's time will be extended to this point. If there is a frame at this location, the frame is converted to a keyframe. Keyframes are points in the timeline where you can make changes to an element in the movie. Note that when you insert a keyframe, all of the contents in that layer are copied from the previous keyframe into the new keyframe (unless you use INSERT>TIMELINE>BLANK KEYFRAME).
  • Frames: Click a point on the timeline in a layer. Use F5 or INSERT>TIMELINE>FRAME to insert a Frame at this location. If there are no frames at this location, the layer's time will be extended to this point. If there are frames at this location, a new frame will be inserted at this point, pushing all frames to the right ahead by one frame. NOTE: If a frame (not a keyframe) is selected, and you draw or edit a graphic, you are actually changing the previous keyframe, not the current frame.
  • Onion Skin: It is possible to view the graphics on multiple frames in the timeline. Click on one of the two onion skin buttons under the timeline, at the left. Two brackets at the top of the timeline determine the number of frames displayed.
  • Edit multiple frames. There are often times when you want to move elements on many frames at a time. Rather than selecting each frame and moving the element on that frame, set the the Edit Multiple Frames button below the timeline, just to the right of the Onion Skin buttons.

 

Labeling keyframes

It's important to label any keyframe you want to be to be able to navigate to. For example, you might have keyframes labeled:

home, portfolio, resume, contact

This way you can create a navigation system that allows the user to go to any of these pages and see the corresponding content. It is better to use labels than the frame number, because you might move the contents of a keyframe to a different frame--with a frame label, your navigation will continue to work, even though the contents of the page are on a new frame.

To add a label to a keyframe, click on the keyframe, and in the property inspector type in the name for the label and hit return.

 

 
layers : 

Each layer contains a separately animating element(s), and can be used to organize your elements. Elements in layers that are higher on the timeline are "in front" of elements in lower layers.

  • Current layer: Select a layer for editing by clicking on the layer name. The layer name area will become darkened, and any subsequent editing will occur on that layer.
  • Layer name: Double click on the layer name to change the name. Naming your layers is an important aspect of documenting your project. You may remember which layer contains what 5 minutes from now, but you will not remember tomorrow!
  • Lock layers: To ensure you don't select or change elements on a layers, click the dot in a layer under the lock icon. You can lock all the layers by clicking on the lock icon itself.
  • Show/Hide layers: You can show or hide a layer by clicking on the dot in layer under the eye icon.
  • Layer folders: You can group layers (like Photoshop layer sets) with layers folders. Click on the folder icon to create a new folder. Drag layers into it to group them. Click on the folder triangle to open or close it.

 

 
playing/exporting : 

You can play the movie directly from the Stage, although not all of the motion, animation, and interactivity will show up. The best way to see how your movie animates is to Test the Movie in true Flash format.

  • Play: You can preview the motion in your movie by clicking on the Play button of the controller window, or selection CONTROL>PLAY.
  • Test movie: To see how the movie will really play, select CONTROL>TEST MOVIE, or press COMMAND + ENTER. This creates a fully compiled movie that will play exactly as it will in a web site or as an external application.
  • Publish movie: To create a flash movie and the HTML go to with it, select FILE>PUBLISH. To adjust the settings that go with the published movie, select FILE>PUBLISH SETTINGS...

There are two files associated with a Flash application:

  • .FLA: This is the authoring file used to edit and change the application
  • .SWF: This is the exported file used to deliver the final application. The .swf file is uploaded to the web server (not the .fla file). Typically, the .SWF file will be contained in an enclosing .html page.

 

 
text : 

Text in Flash is maintained as vector graphics, and can be edited at any time.

  • Insert text using the Text Tool
  • Select the text type (STATIC, DYNAMIC, INPUT) in the property inspector, and set the size, font, and other attributes of the text
  • Click once to insert a single line text box that expands to the size of the text entered
    OR
  • Click and drag to insert a paragraph box that has a fixed width
  • The property inspector is used to modify the entire text box or selections within the box

Make a basic scrolling text box

  • Select the Text Tool, and set the property inspector to dynamic text box, and Multiline
  • Click and drag to create the text box
  • Open WINDOW>COMPONENTS, and drag the User Interface>UIScrollbar onto the side of the text box where you want it to display. It will resize, and attach to that side of the text box.
  • If you want to resize the text box, drag the Scrollbar away from the text box, resize the box, and then drag the Scrollbar back over the text box
  • If you add another scrollbar, drag it from the project Library rather than from the Component window so you don't duplicate the Scrollbar in the project Library

For information about how to make a scroller using a text field and your own graphics for the buttons, see the coding example at end of this page.

 

 

tweening : 

The tweening capability of Flash is a powerful feature that automatically creates all the frames between any two keyframes you create. If you position a symbol with a start and end position (including any transformations you want to make), Flash will create all the frames in between to create smooth motion. Alternatively, Flash can Tween from one shape to another, creating a "morph". To make a Tween:
  • To create a MOTION TWEEN, select a layer and create the beginning keyframe
  • Place a symbol (it must be a symbol, graphics won't tween) on that keyframe, in the beginning position for the animation. It's important that only one symbol is in the layer to be tweened
  • Now create the ending keyframe, and position the symbol to its end position
  • Select the beginning keyframe, and in the Property Inspector set TWEEN to MOTION. Flash will create the in between frames in a straight line between the beginning and ending keyframes
  • To create a complex path, you can place keyframes at each point along a path with tweening set for each keyframe. Or you can create a Motion Path
  • To create a SHAPE TWEEN, or morph, put the initial graphic shape (NOT a symbol) in the first keyframe
  • In the next keyframe, place the end shape
  • In the first frame, set TWEEN to SHAPE

 



drawing tools : 

Flash has many tools for creating graphics, and most of them are similar to those available in Illustrator, though they don't always work quite the same.

To learn about Flash drawing tools, go to the Adobe Design Center for a series of videos including this one on drawing:

http://www.adobe.com/designcenter/video_workshop/?id=vid0119

 



importing images : 

To import a bitmap or vector graphic, select the layer and frame you want the element to appear on, and select FILE>IMPORT (import to stage or import to library depending on your needs). Any element you import will also be made a symbol and placed in the movie library.

For practice, download and open this Photoshop file: ducky.psd

  • .PNG files: Use the PNG file format for importing bitmap graphics with an alpha channel
  • .PSD files: You can import Photoshop files directly, and if you want, you can import with layers and editable text intact
  • Multiple files: If you have a series of files that are frames of an animation, name them with a number at the end. For example, anim01.png, anim02.png...anim13.png. Flash will import them all, and automatically place them in subsequent frames.

 



project structure : 

Interactive Flash projects require a methodical approach to the project structure. Making the projects easy to create and maintain involves organizing the different pages/scenes as well as organizing the content within each page. In addition, the ActionScript that makes the project interactive and the sounds used should have their own organization.

Keyframes for each page

Typical Flash projects have several "pages" with different content. For example, in a portfolio site, you may have a home page, plus pages for the portfolio, resume, and contact. The best way to structure a project like this is to put all the content for each page in a single frame on the timeline dedicated to this page. Here is an example of a project structured this way:

You can see in the above Flash timeline that frames 1, 5, 10, and 15 are used for each of the pages respectively. The different elements for each page (e.g. page content, sound, page title, and actions/labels) have keyframes at these points. Common elements that exist for every page (e.g. site name, navigation, backgrounds) do not have keyframes at these points so that these same elements are visible and usable throughout the project, on every page.

Layers for each kind of content - graphics, actions/frame labels, sounds

It is best to separate each element of content on its own layer, being sure to name the individual layers in a clear way. Of course, layers also allow you to control how elements display, either in front of or behind each other.

In addition to the visual content of the project, it is best to create separate layers for any ActionScript used in the timeline frames. Typically, frame labels are put in the same layer as the ActionScript, and this layer is usually the top layer to make it easy to find. Sounds should also be placed in their own timeline to make them easier to work with.

Exercise: Recreate the above timeline, layers, labels, and simple content for the portfolio

If you get into trouble, you can download the following file that has this completed: portfolio_thin.fla



navigate/interact : 

Flash has the capability to respond to the user for navigating to different parts of the flash movie, starting/stopping animations, and many other possibilities. These interactions are controlled by a scripting language called ActionScript.

Where does code go?

ActionScript code can go in many different places inside a flash movie, and where it goes affects when the code is run. There are two main kinds of places where code can be placed:

  • Keyframes - ActionScript code can be attached to any keyframe, either in the main movie timeline, or in the timeline of a MovieClip. Scripts cannot be attached to a normal frame - they must be put on a keyframe.

    • Click on the keyframe to add a script to it.

      A script attached to a keyframe is run upon entry of the timeline into that frame. So if a script is on a keyframe on frame 15, the script will be run when the movie play head crosses that frame. If the movie or MovieClip is stopped before frame 15, that script will not be run.

      Note that scripts in keyframes are run before any graphics are displayed for that frame. For example, if a script is on the first frame of the main movie, and that script changes the location of graphics on the screen, the user will only see the new locations of the graphics. I.e. the script is run and the graphics are moved before the first frame is displayed.

    • Example: Insert a keyframe at frame 15. Click on that keyframe, open the Actions window, and insert the following code:

      trace("got to frame 15");
  • Buttons and MovieClips - In ActionScript 2.0, scripts can be attached to instances of Buttons and MovieClips on the stage. Scripts cannot be directly attached to Buttons and MovieClips in ActionScript 3.0, but they can be assigned to to these objects by putting some script in one the timeline.

    ActionScript 2.0
    • Click on the Button/MovieClip instance on the stage to add a script to it. You'll have to specify what event for that object will trigger the script--e.g. "on (release)" specifies that the script will be run when the mouse button is released.

      A script on a Button or MovieClip is run when some event occurs, regardless of the position of the timeline or if the timeline is playing or is stopped. An event can be a mouse click, the point at when the object first appears, or when some data is finished loading. When associated event occurs, the script is run.

    • Example: Create a movieclip and put it on the stage. Click on that movieclip, open the Actions window, set it to Expert Mode, and insert the following code:
      on (release) { 
          trace("release event received"); 
      }


    ActionScript 3.0
    • Give an instance name to the Button/MovieClip
    • In a layer called actions, click on the first frame, and open the Actions window and type in the following:

      portfolio_nav.addEventListener(MouseEvent.MOUSE_UP, goportfolio);
      
      function goportfolio(evt:Event):void {
          gotoAndStop("portfolio");
      }
      

 

Working with ActionScript

You access the ActionScript capabilities by selecting the keyframe, button or movieclip you want to make interactive, and then opening WINDOW>ACTIONS (or F9). This interface enables you to add the action you want taken by double clicking.

Putting stop() Actions on frames

For our example portfolio project, we need to prevent the Flash movie from playing through all of the pages continuously. To do this, we need to place a "stop()" action on each of the page keyframes. To do this

  • select each page keyframe in the Actions layer
  • in the left side of the actions window, click on Global Functions and then Timeline Control set of actions
  • double click on the "stop" action to add this action to the frame


  • For Action Script 3.0, select flash.display and then MovieClip, then Methods, and then double click stop. After "not-yet-set.stop();" is inserted, in the box where it says Object, type in "this".

 

 


making a button : 

Flash includes a set of standard buttons, but often you want to make your own interactive buttons. To do this:

  • select INSERT>NEW SYMBOL... and provide a unique name for the button and select "Button" as the behavior for this symbol
  • then create graphics for each state of the button. States are the different visual displays of the button for the normal, mouse over, and mouse down situations. Often, you will create a common background in one layer that will be the same for all states, and then make a different text color for the normal and over states. Here is the timeline of such a button:
  • button timelines have special kinds of frames to represent each state, plus a frame that can define the shape of the hotspot for the button. In this example, a common gray background is placed in a layer for both Up and Over states. Black text is placed in the Up frame of the text layer, and green text is placed in the Over frame.
  • this produces a button that shows black text in the normal state
  • and green text for the over state
  • when you've completed making your button graphics, select Scene 1 from upper left hand corner of the stage to return to editing the main timeline.
  • now you can place copies of the new button on the stage by dragging them out of the main library (WINDOW>LIBRARY) and dropping them on the stage.

 

 

symbols : 

Each movie has a library of elements that can be reused throughout the movie. These are called symbols, and are displayed in the LIBRARY window. It's recommended that symbols be used for any graphics you plan to move or place in multiple sections of the animation. Using symbols saves file size because you are reusing the same graphic everywhere. In addition, only symbols can have scripting attached to them.

Symbols are self-contained objects defined in the library. To use them, you drag a copy (formally named an instance) of the symbol from the library onto the stage. This instance will always reflect the version defined in the library. For example, if you change the shape of the graphic in the library, all instances on the stage will reflect this change.

  • Create a symbol: In the pull down menu in the upper right hand corner of the Library window, select Create Symbol (or select INSERT>NEW SYMBOL). A dialog will be presented which enables the user to set the name and type of symbol. When finished editing the symbol, select the scene name right above the layers (or EDIT>EDIT DOCUMENT) to return to editing the full movie.

  • Convert a graphic into a symbol: select the graphic(s), and select INSERT>CONVERT TO SYMBOL.
    • Graphic: This is the simplest type of symbol, used for static graphics or simple animations (that sync with the main movie timeline). Graphic symbols can be a single frame or multiple frames with as many layers as you want. Use the stage to create the graphic. Alternatively, any graphic that's imported automatically becomes a Graphic symbol.
    • Button: A Button symbol responds to button clicks, rollovers and other behaviors. It has 3 frames for the Up, Over, and Down positions of the button. In addition, it has a Hit frame to define the "hotspot" of the button (i.e. the area that is clickable or responsive). Put a graphic in the Up, Over and Down positions, and Flash will automatically display the right frame when the button is used in the full movie. If you want any of the button states to animate, place a Movie symbol in the Up, Over, or Down frame. Draw a simple filled rectangle in the Hit frame to set the hotspot.
    • Movie Clip: A Movie symbol is a self-contained movie that can have multiple layers and frames. These animated symbols are complete Flash movies that become objects in the full movie. When placed in a frame in the full movie, they run whether the full movie is playing or stopped (including any interactivity you've defined in the symbol). Create and edit a Movie symbol as you would a regular Flash movie.
  • Edit a symbol. You can edit a symbol at any time, and the changes will automatically be reflected wherever the symbol is used in the movie. On the stage or in the library window, double click on the symbol to edit it.
  • Place an instance of a symbol: To place a symbol in the full movie, select the desired layer and frame (making sure you are editing the movie and not the symbol). With the Library window open, select the name of the symbol you want, and drag its image from the Library window onto the movie stage. Placing a symbol in a layer creates an instance of the symbol which can be named and addressed individually from other instances of the symbol in the movie.

In addition to any user created symbols, Flash has many standard buttons built-in. To use these, select:
WINDOW>COMMON LIBRARIES>BUTTONS.

Symbols are efficient

One reason to use symbols is that they save space in the Flash movie, since the same information is used for each instance of the symbol that's placed on the stage. In addition, it makes your production more efficient because if you decide to make a change to a symbol used throughout the project, you only need to make the change once to the symbol, and all the instances will instantly reflect the changes.

Symbols can consolidate complex timelines/interactions into a single object

It's often convenient to create an animation or interactive segment inside of a symbol to make it easier to work with. Since a symbol has its own timeline, all of the animation and interaction are included inside of the single symbol. In this way, you can place a whole animation on the stage as a single object that can be resized, duplicated, and interacted with.

Animated symbols

An example of this in animation would be if you wanted many birds on the stage. You could animate a bird flying once inside of a symbol, and then place multiple copies of the bird symbol on the stage.

Interactive symbols

An example of this for interactive symbols would be creating a self-contained portfolio viewer that has frames for each member of the portfolio. This symbol would have its own navigation buttons to move between the portfolio members within the symbol timeline. Once complete, the entire portfolio viewer symbol can be placed on the main timeline as a single object. Then it will be a complete interactive application on a single frame of the main timeline.

Symbols within symbols

There are times when it makes sense to put a symbol inside of another symbol. In the above portfolio example, the buttons are symbols that are placed inside of the portfolio symbol. Another example is when you want something to animate and move. Say you want to have a bird both flap its wings and fly across the screen. This requires putting on symbol (the flapping animation), inside another symbol (the motion tween across the screen). The symbol with the motion tween is then placed, perhaps multiple times, on the main timeline as single objects.

Here is an example of this principle

birdflight.fla

EXERCISE: In your portfolio file, create a new movieClip that contains each of your portfolio images on a different frame. Also create small boxes as symbols (buttons) that will be the navigation within the movieClip. These nav boxes should be on a frame that spans all of the frames of the movieClip (i.e. on their own layer that has only one keyframe). The timeline should look like this:

timeline     layout

Place the images one to a frame, centered in the same location. Place the navigation boxes in a line, being sure they are not overlaped by the images. To easily align all the images, select the Edit Multiple Frames option in the timeline, extend the selected frames to all you've used, and then select all the frames. Use MODIFY>ALIGN>HORIZONTAL CENTER and MODIFY>ALIGN>BOTTOM or MODIFY>ALIGN>VERTICAL CENTER as appropriate.

To make the navigation work:

  • select each square and use MODIFY>CONVERT TO SYMBOL, select button, and OK
  • now select button and give it an instance name in the property inspector that relates to its location. e.g. btn1, btn2, btn3, etc.
  • place the portfolio symbol in the content layer of the main movie, on the portfolio frame. Give it an instance name of "portfolio"
  • on the actions layer, at the portfolio from, add the following code:

    portfolio.stop();

  • Then on the same from, add the following code for each button you created inside the portfolio symbol. Change the "1" to the appropriate number for each case of "btn1", "go1", and in the "gotoAndStop(1)";
    portfolio.btn1.addEventListener(MouseEvent.MOUSE_OVER, go1);
    
    function go1(evt:Event):void {
    	portfolio.gotoAndStop(1);
    }
    

 

 



sound : 

Sound can add a tremendous impact to any presentation, but designers often seem to forget about the power and importance of sound. As of Flash MX 2004, Flash has no sounds built in, so you have to import sounds to experiment. These sounds are attached to keyframes and play when the play-head reaches that keyframe.

To import a sound in .WAV or .AIFF format, select FILE>IMPORT>IMPORT TO LIBRARY... and locate the file.

Sample Click Sound

Once the sound is in the library, select the keyframe you want the sound to start at, and drag the sound to the stage. Or, you can drag a sound directly to any keyframe in the timeline. Once inserted, you will see the sound located in the timeline. In general, it's a good idea to create a separate layer for sounds.

You can edit the volume (e.g. for fade-ins or outs) by clicking on the keyframe, and selecting edit in the property inspector.

Sources for sounds and music loops on the Internet include:

For information on how to use ActionScript to control sounds (change volume, set pan position, start and stop sounds, etc.), go to this link on the web scripting site.

 



coding : 



jump to a frame:  

You can use symbols to move around the timeline and change what is displayed.

To do this:

  • on the time line, in the first layer, add a keyframe at frame 5
  • on this layer, put a text box with a "1" on frame 1, and a "5" on frame 5.
  • add another layer, and create two symbols and place them on the stage, one with an instance name of goframe1, and the other with a name of goframe5
  • on this layer, add a frame (NOT KEYFRAME) at frame 5
  • add a third layer called actions,and add a frame (NOT KEYFRAME) at frame 5
  • on this layer put stop(); in the first frame's actionscript
  • add the following code to symbol goframe1
    on (press) {
        _root.gotoAndStop(1);
    
    }
  • and on goframe5
    on (press) {
        _root.gotoAndStop(5);
    
    }
    

For actionScript 3.0, create the same movie as above, but do the following:

  • put the following code to the first frame of the actions layer
    stop();
    goframe1.addEventListener(MouseEvent.MOUSE_DOWN, go1);
    
    function go1(evt:Event):void {
         gotoAndStop(1);
    }
    
    goframe5.addEventListener(MouseEvent.MOUSE_DOWN, go5);
    
    function go5(evt:Event):void {
         gotoAndStop(5);
    }
            

 

 
dragable symbols : 

It is possible to make symbols dragable by the user, so that when they click on the symbol, they can drag it across the screen, and the drop it when they release the mouse button.

To do this:

  • create a symbol, place it on the stage in the main timeline, and give it an instance name of dragme
  • create code to look like the this:
    on (press) {
        this.startDrag();
    
    }
    on (release, releaseOutside) 
        this.stopDrag();
    }
    
    OR IN ACTIONSCRIPT 3 - place on the main timeline
    
    dragme.addEventListener(MouseEvent.MOUSE_DOWN, startdrag);
    dragme.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
    
    function startdrag(evt:Event):void {
         evt.target.startDrag();
    }
    
    function stopdrag(evt:Event):void {
         evt.target.stopDrag();
    }
    
    
  • in addition to allowing the user to drag a symbol, you can set constraints on the dragging to a specified rectangle. This prevents the user from dragging the symbol outside of an area. If you want the dragging limited to a single line (e.g. for a sound fader knob), then make the Left and Right the same for a vertical drag, and the Top and Bottom the same for a horizontal drag. The way to do this is to add what are called "parameters" to startDrag() by putting them between the parenthesis. The parameters are as follows: this.startDrag(lockToMouseCenter, left, top, right, bottom) So if we wanted to make the symbol lock to the mouse center, and be constrained to a space on the stage that was near the top left, and was a rectangle of 100 pixels wide, by 150 pixels tall we would change the code to look like the following:
    on (press) {          
        this.startDrag(true, 20, 20, 120, 170);
    }
    
    OR IN ACTIONSCRIPT 3 - place on the main timeline
    
    var rectangle:Rectangle = new Rectangle(20, 20, 120, 170);
    function startdrag(evt:Event):void {
         evt.target.startDrag(true, rectangle);
    }
    
            
 
custom cursor : 

Sometimes you want to replace the standard cursor with your own graphic. Doing this requires putting some custom code on the graphic symbol you want to use for the cursor.

To do this:

  • select the movieClip that will be the cursor
  • paste in the following code:
onClipEvent (enterFrame) {
    Mouse.hide(); // hides the normal cursor
    this._x = _root._xmouse; // sets the movie clip to the x mouse position
    this._y = _root._ymouse; // sets the movie clip to the y mouse position
} 

OR IN ACTIONSCRIPT 3 - place on the main timeline

Mouse.hide();

stage.addEventListener(MouseEvent.MOUSE_MOVE,redrawCursor);
function redrawCursor(evt:MouseEvent):void
{
    myCursor.x = evt.stageX;
    myCursor.y = evt.stageY;
}

 
animating symbols : 

It is possible to create movement and animation of symbols without using the timeline. Instead, you can use code to change the position, rotation, or shape of a symbol. For example, if you wanted to make a symbol spin around by itself:

  • select the symbol
  • paste in the following code:
              
    onClipEvent (enterFrame) {
        this._rotation = this._rotation + 5;
    }
    
    ACTIONSCRIPT 3.0 - place on the main timeline
    
    myButton.addEventListener(Event.ENTER_FRAME, doEnterFrame);
    
    function doEnterFrame(evt:Event):void {
        evt.target.rotation = evt.target.rotation + 5;
    }
    
  • another interesting thing to do is move the symbol across the screen:
    onClipEvent (enterFrame) {
        this._x = this._x + 10;
        if (this._x > 550) {// reached the right side, reset to the left side 
            this._x = 0;
        }
    }
    
    ACTIONSCRIPT 3.0 - place on the main timeline
    
    function doEnterFrame(evt:Event):void {
        evt.target.x = evt.target.x + 10;
        if (evt.target.x > 550) {
        	evt.target.x = 0;
        }
    }
    
    
  • make the symbol move back and forth across the screen:
    onClipEvent (enterFrame) {        
        // check for going off screen
        if (this._x>=500) {
            this._rotation = 180;
        }
        if (this._x<=0) {
            this._rotation = 0;
        }
       
        // make the symbol move in the direction it's pointing
        if (this._rotation == 0) {
            this._x += 10;
        } else {
            this._x -= 10;
        }
    }
    
    ACTIONSCRIPT 3.0
    
    function doEnterFrame(evt:Event):void {
       if (evt.target.x>=500) {
            evt.target.rotation = 180;
        }
        if (evt.target.x<=0) {
            evt.target.rotation = 0;
        }
       
        // make the symbol move in the direction it's pointing
        if (evt.target.rotation == 0) {
            evt.target.x += 10;
        } else {
            evt.target.x -= 10;
        }
    }
    
    
    

If you want to find out about other properties (e.g. width, height, x position, etc.), see this link in the web scripting site.

 

 

all materials on this web site © copyright 2006, Philip van Allen

top