Link:INB Home|INB English| INB русский язык|INB العربية|INB Türkiye|INB فارسی|INB Español|INB Français|INB Português|INB Deutsch|INB 國語|INB 中文|INB 日本语|INB 한국어|INB ภาษาไทย|INB tiếng Việt||Tutoriais Flash Basic
INB Português Fórum
BEM - vindo a indústria nativa e "boffin") Da era industrial, aqui está cheio de espírito de Luta, Ambos através Da rede espaço biológico nativo espírito "boffin" VEIO a mad labs.Casa inbforum.com, Nome Definitivo: inb-english.forumotion.com
INB Português Fórum
BEM - vindo a indústria nativa e "boffin") Da era industrial, aqui está cheio de espírito de Luta, Ambos através Da rede espaço biológico nativo espírito "boffin" VEIO a mad labs.Casa inbforum.com, Nome Definitivo: inb-english.forumotion.com
INB Português Fórum

BEM - vindo a indústria nativa e boffin) Da era industrial, aqui está cheio de espírito de Luta, Ambos através Da rede espaço biológico nativo espírito boffin VEIO a mad labs.Casa inbforum.com, Nome Definitivo: inb-english.forumotion.com


Você não está conectado. Conecte-se ou registre-se

《《《《《《《上一页INBforum   Ir para baixo

上一页INBforum》》》》》》》Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

1Tutoriais Flash Basic Empty Tutoriais Flash Basic Qua Jan 19, 2011 11:21 pm

Admin

Admin
Admin
Author: Bill Trikojus
Tutoriais Flash Basic 01Setting up a flash document
Tutoriais Flash Basic 02Adding actions
Tutoriais Flash Basic 03Frames and keyframes
Tutoriais Flash Basic 04Instances and actions
Tutoriais Flash Basic 05Create content
Tutoriais Flash Basic 06Motion and shape tweens
Tutoriais Flash Basic 07Summary
Tutoriais Flash Basic 01Setting up a flash document

Ok here is a basic Flash tutorial for you - just covers stuff we discussed the other day so it should be very easy. Here is the basic movie you will be making.





OK start by loading flash. This will create a blank document. Double click on the box under the timeline where it says "12fps".

Tutoriais Flash Basic Picture-1

This will open the "Movie Properties" box. Set the frame rate to 21, the width to 400 and the height to 300. Change the background colour to a dark grey (#333333).

OK now double click on the title of your one and only layer and name it "Actions".

Tutoriais Flash Basic Picture-2

Insert a stop action in the first frame

Tutoriais Flash Basic Picture-3

With the first frame still selected give it a frame label of "start"

Tutoriais Flash Basic Picture-1mx

create a new layer (the white box with the black "+" sign)

Tutoriais Flash Basic Picture-5

and name it "buttons". Make sure the buttons layers is selected and draw a square - can be any colour. With the black arrow tool double click on the fill of the square to select it all.

Tutoriais Flash Basic Picture-6

Now hit F8 to convert the square to a symbol. Make sure that button is selected as the symbol type and name it "main_button"

Tutoriais Flash Basic Picture-2mx
Tutoriais Flash Basic 02Adding actions

Now would be a good time to save your movie. Under the file menu choose "save as" and save it as "my_nav.fla". OK now with your button on the stage selected go to the the Property Inspector and give it an instance name of "button1" - without the "". Now click on frame 1 of the actions layer and underneath the stop action that is already on there put

button1.onRelease=function(){
gotoAndStop("start");
}

TIP - put the actions panel into expert mode and you can copy and paste the action directly from this webpage.

What this action does is say "When button 1 is click, the timeline the button1 is on (in this case _root - the main timeline) should go to and stop at a frame label named "start"."

Now your actions should look like this (colours may vary)

Tutoriais Flash Basic Picture-3mx
Tutoriais Flash Basic 03Frames and keyframes

In the buttons layer select frame 60 and hit F5 - this adds new frames but no keyframes. Select frame 10 of the actions layer and hit F6 - this will create a new keyframe for that layer. Insert a stop action in the new keyframe and label the frame "sec1". Do the same for frames 20, 30 and 40 of the actions layer, putting a stop action in each and labeling them "sec2", "sec3" etc. Put a keyframe in frame 50 and give it a frame label of "sec5" but do not put in a stop action. Put another keyframe in frame 60 and just insert a stop action there. You should end up with a timeline that looks like this

Tutoriais Flash Basic Picture-9

OK now in your library double click on the only thing in there - the button - to get inside the main button. Click in the over state frame and hit F6 to create a new keyframe. Give your button a different fill colour for the over state. Now do the same for the down state.

Tutoriais Flash Basic Picture-10
Tutoriais Flash Basic 04Instances and actions

OK now get back to the main timeline by clicking on "scene 1" up the top left corner. Select your button on the stage and option drag out 5 copies of the button (this is for the mac - not sure what button you need to hold down on the PC but I'm sure you can figure it out...) - hold down shift as well when copying to ensure the copy is directly below the original.

Tutoriais Flash Basic Picture-11

Now click on the keyframe in frame 1 of the buttons layer. This selects all the buttons on the stage. Look at your align panel, make sure the "to stage" button is not selected, and click on the button to "distribute vertical center". This will space your buttons evenly.

Tutoriais Flash Basic Picture-12

Now from the top button down, change their instance names so that you end up with button1, button2 right through to button6. Click on frame one of the actions layer and in the actions panel, copy and paste the code that you already have for the button. Change the button instance name for each action as well as the frame label that button is sending the main timeline to. You should end up with this set of actions on that frame

stop();
button1.onRelease=function(){
gotoAndStop("start");
}
button2.onRelease=function(){
gotoAndStop("sec1");
}
button3.onRelease=function(){
gotoAndStop("sec2");
}
button4.onRelease=function(){
gotoAndStop("sec3");
}
button5.onRelease=function(){
gotoAndStop("sec4");
}
button6.onRelease=function(){
gotoAndPlay("sec5");
}

Note - button6 has a gotoAndPlay action instead of gotoAndStop - you will see why soon.

Ok now create a new layer above the buttons layer and name it "button text". Select the text tool and put some (static) text on top of all your buttons. Save your movie.

Tutoriais Flash Basic Picture-14
Tutoriais Flash Basic 05Create content

Create a new layer and name it "content". With this layer selected use the text tool and type in big ugly white letters - "Home". Now select frame 10 in this content layer and hit F7 - this will insert a blank keyframe allowing us to introduce some new content - some more big white text perhaps? Why not! Enter some different text and then do the same for frames 20 and 30.

Tutoriais Flash Basic Picture-15

Ok now select frame 40 in the content layer and hit F7. Draw a circle, double click on the circle with the black arrow to select it and convert it to a movieclip (F8). Call it "ball".

Tutoriais Flash Basic Picture-16

Double click on the ball symbol to get inside it. The shape inside should automatically be selected so just hit F8 to convert this to a movieclip as well. Call it something imaginative like "ball2". OK now you have a movieclip inside a movieclip. Make sure you are inside the first ball

Tutoriais Flash Basic Picture-17

and make new keyframes in frame 10 and 20. Select the keyframe in frame 10 and then the free transform tool

Tutoriais Flash Basic Picture-4mx

and scale the ball down so it is small. In the Property Inspector click on the colour drop down menu, choose "alpha" and set it to "0%".
Tutoriais Flash Basic 06Motion and shape tweens

Now click on the frame 10 keyframe again and in the Property Inspector click on the Tween drop down menu and choose "Motion". Set the keyframe on frame 1 to have motion tweening as well.

Your ball timeline should now look like this

Tutoriais Flash Basic Picture-20

ok back to the main timeline. Select frame 50 in the content layer and hit F7. Select the type tool and type a big white "1". Select the black arrow tool again and with the "1" selected go to the "modify" menu and choose "break apart" down the bottom. Now in frame 60 of the content layer hit F7 again to create a blank keyframe and draw a box in about the spot that the "1" used to be. Now select the keyframe on frame 50 again and in the Property Inspector select "tween - shape"

Save your movie. That's it!! If you have bothered to get this far then you have covered many of the basic concepts of Flash animation and interactivity.

Now go to the Control menu up the top and choose "Test Movie" - hopefully it will work!
Tutoriais Flash Basic 07Summary

- to motion tween something (ie animate its scale, alpha, x position etc) it must be a symbol and on it's own layer.
- to shape tween 2 objects, neither of them can be symbols.
- you will notice with our movie that the animation within the ball movieclip continues to play
- even though our main timeline (_root) has stopped.
- to target a movieclip (or a button or a text field) with actionscript it must have an instance name (not just a name in the library).
- use frame labels instead of frame numbers when possible

You can download the source file for this tute from here.
Tutoriais Flash Basic Arrow1Back]

http://pt.inbforum.com

上一页INBforum   Ir para baixo

上一页INBforumVer o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos

Copyright ©2009-2010 LTD Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

IT:SINGLESERVGoogle谷歌翻译TranslateFORUMSOFTLAYERGoogle谷歌广告联盟AdSenseAsia

 

Um fórum grátis | ©phpBB | Fórum gratuito de ajuda | Denunciar um abuso | Criar um fórum