15 thoughts on “Action Scripts for you and me”

  1. Tutorial for flash: How to make a cool animation and image change when you hover over an image. Heres a preview of what it will look like (hover over the image): http://www.swfcabin.com/open/1306549787

    What you will need: an image and a black and white version of this image, both same size. (the size I’m using is 163×163 you can use any size but you will have to do some math to figure out how big your boxes need to be. Four 80×80 boxes fill my 163×163 frame).

    First we make the animation:

    1) In your library make a new movie file. Name it whatever you like, I named mine “box_movement_mc”
    2) In the layers panel of box_movement_mc make 5 layers: actions, bottom_left, bottom_right, top_right, top_left.
    3) Make sure onion skin outlines is turned on! Important so you can always know where to position these boxes.

    Working in the top_left layer:
    4) Select the layer and frame 1 in the timeline. In the tools bar choose the rectangle tool and make a box, it can be any color, in the first keyframe. Size it 80×80. (Be sure to copy it because we will be using this same box throughout the movie clip’s layers).
    5) Set this box’s alpha to 0% and right click frame 1 and make it a “shape tween”.
    6) Next insert a keyframe on frame 2 and paste in the box you made before. Place it over the one you just made. You can leave this one’s alpha on 100%.
    7) Repeat last steps on frame 3.
    8) On frame 11 insert another keyframe and place another box over the ones you just made, set its alpha to 0%.
    9) Now select frames 3-10 (make sure the keyframe on 11 is not selected) and create a “shape tween”.
    10) On frame 12 insert another keyframe and place a box over the other ones with the alpha of 0%.
    11) On frame 25 insert a “frame” (not a keyframe).

    top_right layer:
    You will be placing these boxes to the right of the top_left box layer. Same basic idea as top_left, repeat those step with a few minor changes:

    12) Instead of starting in frame 1 the first box will be placed in frame 3.
    13) 2nd shape tween should be on frames 5-13
    14) There will less space between your last keyframe and the ending frame on frame 25 (space of frames between that will shorten as we continue and work with the bottom right and left layers as the space of frames between the 2nd shape tween increases).

    bottom_right layer, same deal as before except:
    15)First box placed on 5th frame
    16)2nd shape tween on frames 7-17.
    17)Last keyframe on 19 with frame on 25.

    bottom_left layer, repeat steps except:
    18)First box on 7th frame.
    19)2nd shape tween on frames 9-23.
    20)There should be the 2 keyframes with boxes that are made on frames 24 and 25 like usual. Don’t worry about the ending frame on this last layer.

    Actions layer:
    21)Insert a keyframe on frame 25 in the timeline.
    22)The only code this needs is a “stop();” on line 1.

    There you have made your animation! On to the button!

    23)In the library create a button, name it what you like, I just named it hover_btn.
    24)Make 2 layers for this button.
    25)On the first layer place a keyframe in “over” and bring to the stage the image you want it to change to when you are hovering over the button, place it in the “over” frame.
    26)On the second layer place a keyframe in “over” and bring to the stage the movie clip you just made. In my case this is box_movement_mc.
    27)Match it over the image. (If you are only seeing a singular 80×80 box that is the top_left layer so place that in the top left corner of the image).

    Button made!

    28)Now on whatever layer on your main scene you want to add this effect to, bring your image out that we will see before we hover over it.
    29)Now on that same layer bring out your button, hover_btn and place it directly over the image.
    30)Test it!



    I discovered a “kick ass” video tutorial on how to create toggle buttons.

    Toggle buttons allow for things to be turned on and off or opened and closed. These buttons can really help to save space in small Flash Documents. You could easily have a small button that opens up content that takes up a large space. To hide that the user clicks again and then moves on.

    Here’s the link to the tutorial: http://www.rivercitygraphix.com/view-tutorial.php?id=28&sub=Flash&title=Create-Toggle-Buttons

    -Jackie L.

  3. For anyone who wants a constant moving background (clouds, grass, etc…) I found a pretty simple tutorial.
    It’s essentially a panoramic image that’s off stage, and then tweened to loop over and over again to a certain marker, creating the motion effect… same concept older films used before green screen.
    You only need to watch the tutorial to the 4:30 mark, unless you’d like to create the effect that someone’s falling, a car driving, etc then keep watching.

  4. I found this tutorial via The Republic of Code: http://www.republicofcode.com/tutorials/flash/mask_as_bc/. It gives a tutorial on creating a “spot-light” effect for images, but the most useful information in it is all about creating masks with movie clips and ActionScript instead of the timeline so you have the ability to create a sort of interactive masking layer. Very useful and interesting!

  5. This tutorial teaches you how to make morphing effect. I think it’ll be really cool for using this effect for logos! It uses Shape Tween in this technique. We covered other tween effects in class but I find this effective also!

  6. This tutorial will show you how to make a character for a flash game, and make him controllable using the arrow keys. Pretty spiffy.

    Create a character by using the brush tool (I made a simple circular guy with stick hands and feet) and select the character. Right click and convert the character to a symbol. Make it a movie clip and name it something.

    Next, go to your actions window.

    Type in this code:

    onClipEvent (enterFrame) {
    if (Key.isDown(Key.LEFT)) {
    this._x -= 10;
    Actionscript runs on a lot of “if” “then” coding, and this is no different. The code is self explanatory when you look at it: the script says that if the left key is down, the character should move 10 pixels in the negative x direction. If you test your movie at this point, you’ll see that when you push left, the character moves left.

    Now, copy and past this code three more times, but we’ll need to replace some things, namely which key will be affecting the movement, and which direction it will go. The result should look like this:

    onClipEvent (enterFrame) {
    if (Key.isDown(Key.LEFT)) {
    this._x -= 10;

    onClipEvent (enterFrame) {
    if (Key.isDown(Key.RIGHT)) {
    this._x += 10;

    }onClipEvent (enterFrame) {
    if (Key.isDown(Key.UP)) {
    this._y -= 10;

    }onClipEvent (enterFrame) {
    if (Key.isDown(Key.DOWN)) {
    this._y += 10;


    And voila! Your little guy will move around wherever you tell him to.

  7. http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001218.html

    I used this little bit of ActionScript to set a delay between frames:

    var my_timedProcess:Number = setTimeout(my_delayedFunction, 2000, “two second delay”);

    function my_delayedFunction (arg1) {

    In the ActionScript of frame 5, instead of having “stop();” use this script for a 2 second delay. Or change 2000 to 6000 for a six second delay. The time is in milliseconds. After frame 5 does its thing, there will be a delay (2,6, 100 seconds..) and then the movie goes to frame 6 as I specified in the gotoAndPlay parameter.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s