STEPS to FOLLOW(Tutorial Flash)

Embed Size (px)

Citation preview

  • 8/9/2019 STEPS to FOLLOW(Tutorial Flash)

    1/11

  • 8/9/2019 STEPS to FOLLOW(Tutorial Flash)

    2/11

    Custom Cursor in Flash

    Steps to Follow :

    y Press (Ctrl+F8) to create a new symbol.

    "Create New symbol" window will appear

    y Name your symbol cursorNew_mc.

    y Click on movieclip behavior and then press "OK"

    Now you would have entered your movieclip symbol

    y Draw anything you like to replace the existing cursor.

    For example I drew an arrow as shown below

    y 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

    y Drag your cursorNew_mc movieclip symbol from library onto your stage.

    If Library window is not open, Press (Ctrl+L).

    y Name this Symbol "cursornew" in the instance text box of your property window.

    y Select 1st Frame of your "Layer1". Go to Actionscript panel ( If your actionscript panel is not

    open, Press "F9")

    y 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.

  • 8/9/2019 STEPS to FOLLOW(Tutorial Flash)

    3/11

    Flash Timeline Preloader

    STEPS TO FOLLOW

    Create a Graphic Symbol

    y First and foremost type "LOADING" on your center stage. Select the word LOADING and

    press F8 to convert it to a symbol.

    y Name the symbol "loading", choose Graphic behavior and press OK.

    Create a "LOADING" Movie clip

    y Press Ctrl+F8 to create a new Movie clip.

    y Name this Movie clip "loading_mc", choose Movie clip behavior and press OK.

    y

    Insert your loading Graphic Symbol in Frame1.y Press F6 to insert keyframe in frame5 and in frame10

    y Now go back to frame5. Select "LOADING", still keeping the playhead in frame5, choose

    Alpha 0 from color pop-up menu of your property panel.

    y Choose any frame between 2 and 4 and select Motion from the tween pop-up menu in the

    Property inspector.

    y Choose any frame between 6 and 9 and select Motion from the tween pop-up menu in the

    Property inspector.

    y Your Movie clip is ready, Now come back to Scene1.

    Create Bar Preloader

    y Insert 5 layers and name them as shown below.

    y

    y Now go to frame1 of loading layer, drag loading_mc to your center stage. Center Align the

    movie clip. Press F5 on your 40th frame of loading Layer.

    y Select frame1 of your mask layer and draw a rectagle as shown below.

  • 8/9/2019 STEPS to FOLLOW(Tutorial Flash)

    4/11

    y

    Press F5 in frame 40

    y Double click on this rectangle, Copy ( Ctrl+C), go to Layer bar and press (Ctrl+Shift+V) to

    paste it exactly in the same position. Now select only its border, Cut (Ctrl+X) and paste

    (Ctrl+Shift+V) in frame1 of your border layer.

    y Press F5 in frame 40 of border layer

    y Now come back to your bar layer, Push the rectangle to the left as shown below

    y Go to Frame 40, keeping playhead on frame 40, pull the rectangle onto the other side as

    shown below

    y Now select any frame between 2 and 39 and select Shape from the tween pop-up menu in the

    Property inspector.y Now go back to layer mask, right click on the label and select mask.

    Insert script in the action panel

    1. Go to action Layer, insert keyframe in

    1st,2nd,5th,6th,10th,11th,15th,16th,20th,21st,25th,26th,30th,31st,35th,36th and 40th Frame

    2. Copy & Paste the following script into the action panel of Frames mentioned below.

    ifFrameLoaded ("s1") {

    x = 1;

    play ();}

    Frame 1

    ifFrameLoaded ("s2") {

    x = 2;

    play ();

    }

    Frame 5

  • 8/9/2019 STEPS to FOLLOW(Tutorial Flash)

    5/11

    ifFrameLoaded ("s3") {

    x = 3;

    play ();

    }

    Frame 10

    ifFrameLoaded ("s4") {x = 4;

    play ();

    }

    Frame 15

    ifFrameLoaded ("s5") {

    x = 5;

    play ();

    }

    Frame 20

    ifFrameLoaded ("s6") {

    x = 6;

    play ();

    }

    Frame 25

    ifFrameLoaded ("s7") {

    x = 7;

    play ();

    }

    Frame 30

    ifFrameLoaded ("s8") {

    x = 8;

    play ();

    }

    Frame 35

    gotoAndPlay ("start"); Frame 40

    3.

    if (x != 1) {

    gotoAndPlay(1);

    }

    Frame 2

    if (x != 2) {

    gotoAndPlay(5);}

    Frame 6

    if (x != 3) {

    gotoAndPlay(10);

    }

    Frame 11

    if (x != 4) { Frame 16

  • 8/9/2019 STEPS to FOLLOW(Tutorial Flash)

    6/11

    gotoAndPlay(15);

    }

    if (x != 5) {

    gotoAndPlay(20);

    }

    Frame 21

    if (x != 6) {

    gotoAndPlay(25);

    }

    Frame 26

    if (x != 7) {

    gotoAndPlay(30);

    }

    Frame 31

    if (x != 8) {

    gotoAndPlay(35);

    }

    Frame 36

    4.

    Your preloader is now ready. You can start building your main movie from the 41st frame and call the 41

    frame "start" . After your main movie is ready. Divide the total frames used by your main movie by 8.

    Name them s1, s2, s3 and so on.

  • 8/9/2019 STEPS to FOLLOW(Tutorial Flash)

    7/11

    Flash Ripple Effect

    STEPS TO FOLLOW

    Create a Graphic Symbol.

    y Import an image to your work area upon which you would like to create ripple effect.

    y Press F8, to convert this image to a symbol.

    y Name this Symbol "girl_gr" and choose graphic behavior. Press OK.

    y Name this Layer "bg".

    y Select girl_gr and chooseAlpha 99% from color list box in your property window.

    Create a Movie clip.

    y Press Ctrl+F8, to create Ripple movie clip.

    y Name this symbol "ripple_mc" and choose Movie clip behavior. Press OK.

    y Drag girl_grto your working area from Library (ctrl+L).

    y

    Select girl_grand chooseAlpha 0% from color list box in your property window.

    y Insert Keyframe (F6) into the 5th frame.

    y Remaining on the 5th frame, Select girl_grand chooseAlpha 99% from color list box in your

    property window.

    y Now select 1st frame, choose Motion Tween from Tween list box in your property window.

    y Insert Keyframe into 15th frame and later to 20th frame.

    y Remaining on the 20th frame, Select girl_grand chooseAlpha 0% from color list box in your

    property window.

    y Select 15th frame, choose Motion Tween from Tween list box in your property window.

    y Insert a new layer above this layer, call it "Layer 2".

    y Select frame 1 ofLayer 2 and draw a borderless square or rectangle depending on the type of

    ripple effect you want.

    In the above demonstration, I have used rectangle with 15 pix as its height.

    y Place this vector wherever you want the ripple to begin. Make sure that the vector belongs

    only to layer 2.

    y Insert Keyframe into the 20th frame ofLayer 2.

    y Place the vector wherever you want the ripple to end or ebb.

    In the above demonstration, I have placed it right at the bottom and reduced the height to 5

    pix.

    y Select 1st frame, choose Shape Tween from Tween list box in your property window.y Right click on Layer 2 and select Mask.

    y Save (ctrl+S). Make it a habit to save your work after each step you do.

    Insert Ripple Movie Clip onto Scene 1

    1. Now go back to Scene 1.

    2. Insert a new layer above bg layer and call it ripple1.

  • 8/9/2019 STEPS to FOLLOW(Tutorial Flash)

    8/11

    3. Insert new Keyframe (F6) into the 10th frame ofripple1 layer.

    4. With 10th frame ofripple1 layer selected, Drag ripple_mc movie clip onto the working area.

    Place it appropriate to girl_gr. Make sure that this movie clip is placed exactly where you had

    placed your square or rectangular vector in ripple_mc Movie clip.

    5. Insert frame (F5) into the 30th frame ofripple1 layer. This is just to make sure that the ripple

    _mc runs only for 20 frame.

    6. Insert another new layer above ripple1 layer and call it ripple2

    7. Insert Keyframe into the 20th frame ofripple2 layer.

    8. With 20th frame ofripple2 layer selected, Drag ripple_mc movie clip onto the working area.

    Place it appropriate to girl_gr just the way you did in step 4.

    9. Insert frame (F5) into the 40th frame ofripple1 layer. This is just to make sure that the ripple

    _mc runs only for 20 frame.

    10. Insert frame (F5) into the 40th frame of bg layer.

    Here you go!! Your movie is ready. Press Ctrl+Enterto view your movie. Wasn't it simple.

  • 8/9/2019 STEPS to FOLLOW(Tutorial Flash)

    9/11

    Masking in Flash

    STEPS TO FOLLOW

    Inserting Layers and Naming them

    y By default you will have a layer in your timeline window. Insert one more layer, totally you

    need two layers to mask an object.

    y Rename the top layer to "Mask" and the layer below that to "background".

    Creating Shape Tween

    y Import your picture to the "background" layer.

    y Using Oval tool from your tool box, draw a circle in your "Mask" layer and delete it's border.

    y

    Drag the circle to one end of your picture.y Now go to"frame 40" of your "Mask" layer and press "F6" to insert a new keyframe.

    y Now go to "frame 40" of your "background" layer and press "F5" to insert frames, so that your

    background image is available all through your mask.

    y Select "frame 40" of your "Mask" layer, that is your new keyframe, Keeping the playhead on

    "frame 40" of "Mask" layer, drag the circle to other end of your picture.

    y Now go back to "frame 1" of your "Mask" layer, keeping the playhead on "frame 1" of your

    "Mask" layer, select Shape tween in your properties window.

    Masking

    y Right click on the "Mask" layer (the area where you named the layer not where the frames

    exist) and select Mask.

    Your Mask is all ready. Press Ctrl+Enterto view your Mask.

  • 8/9/2019 STEPS to FOLLOW(Tutorial Flash)

    10/11

    Zoom in Zoom Out Flash Animation with Fading Effect

    STEPS TO FOLLOW

    y Open a new flash file (Ctrl+N). The New Document window will appear. Select General panel

    and choose Type: Flash Document. Press OK.y If your timeline window is not open, press (Ctrl+Alt+T). Now you can see a single Layer called

    "Layer1" in your timeline Window.

    y Select the first frame. Import a background image onto stage, preferably an image of a street

    by clicking on File>Import>Import to Stage, or just press (Ctrl+R).

    y Press F8, to convert this image to a symbol. Name this Symbol "background_gr" and choose

    graphic behavior. Press OK. Name this Layer "bg". On the 35th frame press F6 to insert a

    new frame

    y Select the second layer. Import an image or create a shape of a car using shape tools from

    the tool box. Press F8, to convert this image to a symbol. Name this Symbol "car1_m" and

    choose movie clip (F8). Press OK. Name this Layer "car1".

    y Select the image(car1_m) >right click>edit in place. Now you will come to a new timeline

    Window called Symbol2

    y On Frame1 of Symbol2 convert the image to a graphic (car1_gr). Go to the Properties

    Bar>Color>Alpha>0%. In Frame5 insert a new Key frame (Press F6) and change Alpha to

    100% and make the image small. Eg : Pic

    y Right click in between Frame1 and Frame5 and press motion tween.

  • 8/9/2019 STEPS to FOLLOW(Tutorial Flash)

    11/11

    y Add one more Key Frame in Frame20. In this frame make the Image(car1_gr)bigger and

    move it out.

    eg:

    y On Frame25 insert a new key frame and change Alpha to 0% . Insert motion tween in

    between frame5-20 and Frame20-25. eg:

    y Now press (Ctrl+Enter) to view your motion tween.

    y Continue to do this for your other car images.

    Rememberto insert only ONE symbol/image in ONE new Layer only.

    Congratulations! You have successfully created a Zoom In/Zoom Out animation with Fade In and Fade

    Out effect!