Dancing Stars in Flash without ActionScript

In this Flash tutorial you will learn about Movie Clips, working on Guided Layers, use of Tweening Properties, working on different layers. So we will be making Dancing Stars in Flash using a single star and without using ActionScript. Hopefully it will be having a lot knowledge for you to learn Flash.

 

1. Lets start with a new file of Size 560 x 450 px size with Black color in the background and 24 Frames per second frame rate:

2. Now we are going to take a star inside a Movie Clip. First of all press Ctrl+F8 key (or run the command Insert >> New Symbol), write the name ‘single-star‘, select Movie Clip from Type list box and hit Ok:

3. Now pick Polystar tool and draw a star having the size 5×5 px with Yellow color as:

4. Now again press Ctrl+F8 to take another new Movie Clip, write the name ‘single-star-animation‘ and hit Ok, now paste ‘single-star’ movie clip onto stage. In Timeline panel select Frame 50 and hit F5 key, then right click over it and select ‘Create Classic Tween’ and then hit F6 key, so you may have Timeline as:

5. Click on Frame 25 and press F6 key to make Keyframe. Now move your star upward by using Shift + Up Arrow key, so it will move above. Select Frame 1 and goto Property Panel and type 100 in Ease. Then Select Frame 25 and goto Property Panel and type -100 in Ease. You may press Enter to check the animation. Now we are going to give this animation some Tweening effects. Carefully do these steps.

Select Frame 1 and goto Property Panel, you will fine Rotate option there, select CW from list box. Then select Frame 25 and goto Property Panel and select CCW from Rotate list box.

Now Select Frame 15 and hit F6 key, then select Frame 35 and hit F6 key. Now select Frame 15 and open Transform Panel, write 50 in width and 50 in height, do the same with Frame 35. Keep selecting Frame 15, click on the star and see in Property Panel you will find Style list box under Color Effect option, choose Tint from it and then select Blue color from color palette. Then select Frame 25 and choose Red color after selecting Tint, then select Frame 35 and click on star and choose Green color from Tint. For Frame 25 give 200 width and 200 height in Transform panel to enlarge its size, so you may have Timeline as:

6. Again press Ctrl+F8 key to create new Movie Clip, give it name as ‘star-animation-circle‘, hit ok and paste ‘single-star-animation‘ movie clip from Library panel, which we just made above, in it. Now we are going to move it in Circle, for this purpose first make its animation by selecting Frame 100 and press F5 key, then right click over it and select ‘Create Classic Tween‘ then hit F6 key. Now as we need to move it in Circle, so we would be needing Guided Layer to do so. So Right click on the name of layer in Timeline panel and select ‘Add Classic Motion Guide‘, it will give you a Guide layer, so draw Circle by using Oval tool , delete the Fill area so you may have only outline. Now zoom in on any part of the ellipse and select some area by using Selection tool  and delete it as:

select Frame 1 of animation layer and hold the star from center and move it towards one edge of this ellipse, then select last frame of the animation and hold the star from center and drop it on the other edge of the ellipse, so you will have Star animation in Circle. Select Frame 1 of the animation and goto Property Panel and Check ‘Orient to Path’ option.

7. Now we will be needing another Movie Clip, write the name as ‘star-repeat‘. Now we will be needing ‘single-star-animation‘ (we just made above) in it. Paste it from Library and then move it towards the center of the stage. Press Ctrl+C to copy it, then take new layer and press Ctrl+Shift+V to paste in place. Move it a bit towards right side, then press Ctrl+C to copy it, then take new layer and press Ctrl+Shift+V to paste in place and move it towards right and down, so that by doing this you will be needing total 8 stars, but in a circular position and in new layers, as:

8. Now we have to move Frames towards right side one by one, and then keep selecting the last frame of every layer and hitting F5 key to make the key frames as (select last frame and hit F9 key to write stop(); ):

9. Now we are going to take new Movie Clip again and giving it a name as ‘star-trail‘ and pasting the above made Movie clip inside it. Then press Ctrl+C to copy it and take new layer and press Ctrl+Shift+V to paste in place, then moving it towards up almost 20 px. Then press Ctrl+C to copy it and then take new layer and press Ctrl+Shift+V to paste in place and move it towards up 20 px and do this step to make total 7 stars. Reduce the size of second last star to 80%, then third last to 70%, then 60% and upto the first one as 40%, so you may have Timeline as (select last frame and press F9 key and write stop(); ):

and Stars position would be:

10. Now come to the stage and paste this last Movie clip in the middle and bottom part of the stage. Press Ctrl+C to copy it and then press Ctrl+Shift+V to paste in place and then move it towards right. So copy this animation 4 times and align it towards left and right side of the original movie, so you may have this final animation, press Ctrl+Enter to view it:

 

7 Responses to “Dancing Stars in Flash without ActionScript”
  1. stano

    nice 1 there

  2. less

    hi, i have a problems with this tut so any chance that some one can send me a fla file

  3. MasGepenk

    @wijdan rohail:

    may i send you my fla file?,coz the movie clip can’t be played..my stars just going up and down..but actually i don’t understand about step #8, my frames doesn’t seen like your screen shoot, when i move my frame to the right side one by one,the gray side where the code placed below doesn’t appear

  4. An anonymous complaint

    Has anyone else complained that certain computers lock down when the f6 button is pressed? Or that flash 8 appears not to accommodate classic tweens? Maybe you could provide me with a solution?

  5. MasGepenk

    could it work at CS3…??
    cuz when i see step 5 ,i can’t found rotate option , color effect option..

    Thx Before,

    • Wijdan Rohail

      Yes it will work for every version of Flash, even below CS versions. You just have to find the commands, as older versions were having Property Box at the bottom and having different style then CS. Also remember if you have selected the Frame, you will see Rotate option and if you have selected the Movie Clip (i.e. Object) then you will get Color options in Property Box. Hopefully you got it now?

  6. Joyoge Design Bookmark

    nice work, thanks for the tut.

Leave a Reply

*