Flash CS3 component button tutorial: Difference between revisions
(using an external editor) |
(using an external editor) |
||
Line 9: | Line 9: | ||
; Prerequisites | ; Prerequisites | ||
The following tutorials are recommended but not fully necessary | The following tutorials are recommended but not fully necessary | ||
* [[Flash layers tutorial]] | |||
* [[Flash button tutorial]] | * [[Flash button tutorial]] | ||
* [[Flash components overview]] | * [[Flash components overview]] | ||
Line 38: | Line 39: | ||
=== A menu-based flash site === | === A menu-based flash site === | ||
Notice: In the [[Flash button tutorial]] we also demonstrated how to do similar applications with built-in and home-made buttons symbols. | |||
; Step 0 - | ; Step 0 - Make sure that you have the right component library | ||
Flash 9 (CS3) and Flash 8 components are different and not compatible. So make sure that you create a Flash (ActionScript 3.0) file or alternatively change the publish setting. | |||
To use the components library: | |||
* ''Window->Components'' or hit ''CTRL-F7'' | * ''Window->Components'' or hit ''CTRL-F7'' | ||
* | * Then dock it somewhere | ||
.... of course, you can do this also in Step 3. | .... of course, you can do this also in Step 3. | ||
Line 56: | Line 60: | ||
[[image:flash-cs3-simple-slideshow-timeline.png|frame|none|Timeline of the menu-based slideshow]] | [[image:flash-cs3-simple-slideshow-timeline.png|frame|none|Timeline of the menu-based slideshow]] | ||
Create these layers now | Create these layers now ! If you don't remember how, see the [[Flash layers tutorial]]. | ||
; Step 2 - Add pictures or other contents | ; Step 2 - Add pictures or other contents | ||
Line 72: | Line 76: | ||
; Step 4 - ActionScript 3 principles | ; Step 4 - ActionScript 3 principles | ||
ActionScript 3 does not allow to attach scripts to buttons. One can only script frames in the timeline. In order to script a component we basically have to do three things. | Let's recall some ActionScript principles here. ActionScript 3 does not allow to attach scripts to buttons. One can only script frames in the timeline. In order to script a component we basically have to do three things. | ||
# Give a name to the component (i.e. the movie instance on the stage) | # Give a name to the component (i.e. the movie instance on the stage) | ||
# Fill in some parameters, e.g. add a label for the button | # Fill in some parameters, e.g. add a label for the button | ||
Line 84: | Line 88: | ||
* Give the button instance a unique name: e.g. ''btn_rainbow'' is fine. ("btn" means "button" and "rainbow" because this button will lead to a rainbow picture). To be safe: | * Give the button instance a unique name: e.g. ''btn_rainbow'' is fine. ("btn" means "button" and "rainbow" because this button will lead to a rainbow picture). To be safe: | ||
** Start the label name with a letter | ** Start the label name with a letter | ||
** For the rest use letters, digits or the underscore "_". | ** For the rest of the name you can use letters, digits or the underscore "_". | ||
** Do '''not use''' whitespaces or punctuation characters or dashes !! | ** Do '''not use''' whitespaces or punctuation characters or dashes !! | ||
** I suggest that you use only lower case letters (Names are case sensitive) | ** I suggest that you use only lower case letters (Names are case sensitive) | ||
* Then change the '''label''' parameter of the button. This is what the '''user''' will see. Type anything there, but don't make it too long (it's a button after all). If your text is bigger than the label, change its width in the same panel, i.e. modify the '''W:''' field. | * Then you should change the '''label''' parameter of the button. This is what the '''user''' will see. Type anything there, but don't make it too long (it's a button after all). | ||
* If your text is bigger than the label, change its width in the same panel, i.e. modify the '''W:''' field. | |||
Notice how different it is to work with a component vs. using buttons as explained in the [[Flash button tutorial]] | Notice how different it is to work with a component vs. using buttons as explained in the [[Flash button tutorial]] | ||
Line 96: | Line 101: | ||
; Step 6 - Open the ActionScript panel | ; Step 6 - Open the ActionScript panel | ||
* | * Click in Frame 1 of the Action Layer you already should have define (see step 1) | ||
* Hit F9 to open the "Actions-Frame" panel. In case it is docked with the parameters, you may undock it to have some more space. | * Hit F9 to open the "Actions-Frame" panel. In case it is docked with the parameters, you may undock it to have some more space. | ||
* Then paste all the code in steps 7 to 8. Maybe open our [http://tecfa.unige.ch/guides/flash/ex/components-intro/flash-cs3-simple-slide-show-menu.fla flash-cs3-simple-slide-show-menu.fla] file and copy from there. | * Then paste all the code in steps 7 to 8. Maybe open our [http://tecfa.unige.ch/guides/flash/ex/components-intro/flash-cs3-simple-slide-show-menu.fla flash-cs3-simple-slide-show-menu.fla] file and copy code from there. | ||
Note: Code that is delimited by <code>/* */</code> represents so-called comments, i.e. code that is not interpreted by Flash, but that we inserted just to remember what our code is supposed to do. | Note: Code that is delimited by <code>/* */</code> represents so-called comments, i.e. code that is not interpreted by Flash, but that we inserted just to remember what our code is supposed to do. | ||
Line 110: | Line 115: | ||
; Step 8 - Associate buttons with handler functions | ; Step 8 - Associate buttons with handler functions | ||
ActionScript programming will include two things: | |||
# You must define what ActionScript function is executed when a user clicks on a button. Think of a function as a named set of instructions that Flash will execute. | |||
# You must define the ActionScript code for these functions. We will use the same function for all our buttons. | |||
Associate a handler function for each button instance: | Associate a handler function for each button instance: | ||
: Syntax: ''button_name''.'''addEventListener'''(''Event.type'', ''function_name'' | : Syntax: ''button_name''.'''addEventListener'''(''Event.type'', ''function_name'' | ||
Lines below mean: | Lines below mean: | ||
* If the user clicks on the btn_rainbow with the mouse, then the function clickHandler defined below will execute. | * If the user clicks on the btn_rainbow with the mouse, then the function clickHandler defined below will execute and so forth ... | ||
btn_rainbow.addEventListener(MouseEvent.CLICK, clickHandler); | btn_rainbow.addEventListener(MouseEvent.CLICK, clickHandler); | ||
btn_tecfa.addEventListener(MouseEvent.CLICK, clickHandler); | btn_tecfa.addEventListener(MouseEvent.CLICK, clickHandler); | ||
Line 122: | Line 131: | ||
; Step 9 - Write a clickHandler function | ; Step 9 - Write a clickHandler function | ||
Note: you could have chosen an other name, but as rule function names should be | Note: you could have chosen an other name, but - as a general rule - function names should be meaningful to you and to other people who read your program. | ||
Instead of writing a function for each button, we just created a single one. This code contains a so-called ''switch'' (or ''case'') statement. It's syntax is the following: | Instead of writing a function for each button, we just created a single one. This code contains a so-called ''switch'' (or ''case'') statement. It's syntax is the following: | ||
Line 135: | Line 144: | ||
} | } | ||
In order to understand which button was clicked, we | When a user clicks a button, a so-called MouseEvent is happening. This event is then given to the function for further treatment. Formally speaking, when we define a function, | ||
event:MouseEvent | |||
means that we define a parameter called "event" (i.e. the information that is handed over) and we tell Flash that this paramater is of type "MousEvent". | |||
Then we can use use this "event" information. In order to understand which button was clicked, we can from the event retrieve the label of the button with the following expression: | |||
event.currentTarget.label | |||
Now, for each label we then define what Flash should do. We only need on single instruction: | |||
'''Go to frame x and stop again'''. The instruction is | |||
''gotoAndStop(x)''. | |||
Here is the complete function you can copy/paste/adapt: | |||
function clickHandler(event:MouseEvent):void { | function clickHandler(event:MouseEvent):void { |
Revision as of 18:38, 22 October 2008
<pageby nominor="false" comments="false"/>
This is part of the flash tutorials
- Learning goals
- Learn how to use the component button
- Prerequisites
The following tutorials are recommended but not fully necessary
- Moving on
- Level and target population
- Beginners
- Quality
- This should get you going, component buttons are fairly easy to use.
Introduction
In Flash CS3 there exist two fundamentally different kinds of buttons:
- Button symbols (objects). See the Flash button tutorial. Graphically speaking, button symbols can be just any kind of drawing and their visual behavior is highly customizable.
- Button components. These are part of the built-in components library and that provides some easy to interface components. Graphically speaking, these buttons are some kind of nice looking, semi-transparent rectangles.
Button components are a bit easier to use than button symbols.
- Design goal of the example
The goal is to make a sort of simple Flash web site. The user at all times will have a menu to the left that will allow him to navigate to different contents.
We will build several versions of this. Have a look at the menu-based slide show example before you start reading. Also, we will introduce some ActionScript by using a "language" that is hopefully appropriate for non-programmers.
Notice: In the Flash button tutorial we also demonstrated how to do similar applications with built-in and home-made buttons symbols.
- Step 0 - Make sure that you have the right component library
Flash 9 (CS3) and Flash 8 components are different and not compatible. So make sure that you create a Flash (ActionScript 3.0) file or alternatively change the publish setting.
To use the components library:
- Window->Components or hit CTRL-F7
- Then dock it somewhere
.... of course, you can do this also in Step 3.
- Step 1- Planning the layers
In this example we will work with five layers:
- Actions: will include a little Action Script code
- Buttons: will include the buttons (displayed on all "pages")
- Pictures: Contents we want to display
- Credits: A special page for the "who's done it" (we also could have used the pictures layer for this).
- Background: A simple background that will remain stable.
So the timeline roughly will look like this:
Create these layers now ! If you don't remember how, see the Flash layers tutorial.
- Step 2 - Add pictures or other contents
- Decide how many pictures you want (we took four)
- Select the Pictures layer
- Frame 1 is reserved for a Title page.
- Create a few new empty keyframes (hit F7) and fill them with pictures or any other content or drawings you'd like. See button tutorial if you don't know how to import pictures. Btw pasting a picture to the stage also does the trick.
- Step 3 - Get buttons from the library
- Select the buttons layer
- Open the component library, select "User Interface" and drag as many buttons to the stage as you have pictures. Add an extra one for the credits page.
- Put them into a good position. You may use the Align panel to align and distribute properly (see the Flash arranging objects tutorial if needed).
- Step 4 - ActionScript 3 principles
Let's recall some ActionScript principles here. ActionScript 3 does not allow to attach scripts to buttons. One can only script frames in the timeline. In order to script a component we basically have to do three things.
- Give a name to the component (i.e. the movie instance on the stage)
- Fill in some parameters, e.g. add a label for the button
- Add some ActionScript to the timeline that will:
- Associate a user interaction event (e.g. user clicks) to some action function
- Program the action function
- Step 5 - Give a name to each button and change its label
- Click on a button (make sure to lock other layers)
- Select the Parameters panel (menu Window->Properties->Parameters)
- Give the button instance a unique name: e.g. btn_rainbow is fine. ("btn" means "button" and "rainbow" because this button will lead to a rainbow picture). To be safe:
- Start the label name with a letter
- For the rest of the name you can use letters, digits or the underscore "_".
- Do not use whitespaces or punctuation characters or dashes !!
- I suggest that you use only lower case letters (Names are case sensitive)
- Then you should change the label parameter of the button. This is what the user will see. Type anything there, but don't make it too long (it's a button after all).
- If your text is bigger than the label, change its width in the same panel, i.e. modify the W: field.
Notice how different it is to work with a component vs. using buttons as explained in the Flash button tutorial
Make sure you did this to all buttons.
- Step 6 - Open the ActionScript panel
- Click in Frame 1 of the Action Layer you already should have define (see step 1)
- Hit F9 to open the "Actions-Frame" panel. In case it is docked with the parameters, you may undock it to have some more space.
- Then paste all the code in steps 7 to 8. Maybe open our flash-cs3-simple-slide-show-menu.fla file and copy code from there.
Note: Code that is delimited by /* */
represents so-called comments, i.e. code that is not interpreted by Flash, but that we inserted just to remember what our code is supposed to do.
It's always a good idea to document your code ...
- Step 7 - Stop the animation from playing in frame one
The stop() instruction will stop Flash from playing all the frames, i.e. we want the user to stay in Frame 1 after the file loads.
stop();
- Step 8 - Associate buttons with handler functions
ActionScript programming will include two things:
- You must define what ActionScript function is executed when a user clicks on a button. Think of a function as a named set of instructions that Flash will execute.
- You must define the ActionScript code for these functions. We will use the same function for all our buttons.
Associate a handler function for each button instance:
- Syntax: button_name.addEventListener(Event.type, function_name
Lines below mean:
- If the user clicks on the btn_rainbow with the mouse, then the function clickHandler defined below will execute and so forth ...
btn_rainbow.addEventListener(MouseEvent.CLICK, clickHandler); btn_tecfa.addEventListener(MouseEvent.CLICK, clickHandler); btn_bosses.addEventListener(MouseEvent.CLICK, clickHandler); btn_my_computers.addEventListener(MouseEvent.CLICK, clickHandler); btn_credits.addEventListener(MouseEvent.CLICK, clickHandler);
- Step 9 - Write a clickHandler function
Note: you could have chosen an other name, but - as a general rule - function names should be meaningful to you and to other people who read your program.
Instead of writing a function for each button, we just created a single one. This code contains a so-called switch (or case) statement. It's syntax is the following:
switch (value) { case value_1 : /* do something */ break; case value_2 : /* do something */ break; .... }
When a user clicks a button, a so-called MouseEvent is happening. This event is then given to the function for further treatment. Formally speaking, when we define a function,
event:MouseEvent
means that we define a parameter called "event" (i.e. the information that is handed over) and we tell Flash that this paramater is of type "MousEvent".
Then we can use use this "event" information. In order to understand which button was clicked, we can from the event retrieve the label of the button with the following expression:
event.currentTarget.label
Now, for each label we then define what Flash should do. We only need on single instruction: Go to frame x and stop again. The instruction is
gotoAndStop(x).
Here is the complete function you can copy/paste/adapt:
function clickHandler(event:MouseEvent):void { switch (event.currentTarget.label) { case "Rainbow" : gotoAndStop(2); break; case "TECFA" : gotoAndStop(3); break; case "Bosses" : gotoAndStop(4); break; case "My computers" : gotoAndStop(5); break; case "Credits" : gotoAndStop(6); break; } }
- If things go wrong
- Make sure that your syntax is correct. One single ";" missing and your program will fail. In the ActionScript window click on the "Check syntax" icon.
- Also indent your code properly. Simply click on the "Auto Format" icon.
- Make sure that the Action layer extends to the end of your timeline. Put code in frame 1 and then hit F5 in the right-most frame you use ("insert frame" and 'not insert keyframe !)
- Make really sure that your code is in frame 1 and in the Action layer.
- Make sure that button instance names and label names are exactly the same in the Parameters panel and your Script.
Here is the picture of the timeline again:
Notice the little "a" in frame 1 of the Actions layer. It means "ActionScript code inside" :)
- Extra Step 1
This shows how to program a button that will open an URL in a Web Browser (look at the example file you can download).
btn_edutech_wiki.addEventListener(MouseEvent.CLICK, GoToUrl); function GoToUrl(event:MouseEvent):void { var url:String = "http://edutechwiki.unige.ch/en/Flash_components_tutorial"; var request:URLRequest = new URLRequest(url); try { navigateToURL(request, '_blank'); } catch (e:Error) { trace("Error occurred!"); } }
- Results
- flash-cs3-simple-slide-show-menu.html
- Grab the flash-cs3-simple-slide-show-menu.* files from
Too complicated ?
You may write this code in a slightly simpler but less elegant way: If you have no programming knowledge, you rather may work from the code below. The result will be same, though I changed to color of the background: 3 menu-based slide show
So here is what you need to change:
- (1) Event listener registration
So the principle is: For each button you got to register an event listener function. Change:
- The number of addEventListener definitions (here we got five)
- Make sure that each btn-xxx corresponds to names you gave to your own button instances
myButton.addEventListener(MouseEvent.CLICK, Handler_A);
- (2) Define event listener functions
- Copy/Paste/Change definitions of functions
- So change the name of the function, e.g. clickHandler_1 into Handler_A and the frame it has to jump to.
function Handler_A(event:MouseEvent):void { gotoAndStop(2); }
Note: Formatting in ECMAScript -like languages does not matter. You could have written the above line as:
function Handler_A(event:MouseEvent):void {gotoAndStop(2); }
However, make sure to keep delimiters like the { } ;
!!
- Start from this complete code
/* This will stop Flash from playing all the frames User must stay in Frame 1 */ stop(); /* Associate a different handler function for each button instance: Syntax: button_name.addEventListener(Event.type, function_name Lines below mean: * If the user clicks on the btn_rainbow with the mouse, then the function clickHandler defined below will execute */ btn_rainbow.addEventListener(MouseEvent.CLICK, clickHandler1); btn_tecfa.addEventListener(MouseEvent.CLICK, clickHandler2); btn_bosses.addEventListener(MouseEvent.CLICK, clickHandler3); btn_my_computers.addEventListener(MouseEvent.CLICK, clickHandler4); btn_credits.addEventListener(MouseEvent.CLICK, clickHandler5); /* Each function defines where to move the playhead in the animation. E.g. clickHandler2 will go to frame 3 and then stop */ function clickHandler1(event:MouseEvent):void { gotoAndStop(2); } function clickHandler2(event:MouseEvent):void { gotoAndStop(3); } function clickHandler3(event:MouseEvent):void { gotoAndStop(4); } function clickHandler4(event:MouseEvent):void { gotoAndStop(5); } function clickHandler5(event:MouseEvent):void { gotoAndStop(6); } /* This shows how to open an URL in a WebBrowser */ btn_edutech_wiki.addEventListener(MouseEvent.CLICK, GoToUrl); function GoToUrl(event:MouseEvent):void { var request:URLRequest = new URLRequest("http://edutechwiki.unige.ch/en/Flash_components_tutorial"); navigateToURL(request, '_blank'); }
- Results
- flash-cs3-simple-slide-show-menu-fewcode.html
- Grab the flash-cs3-flash-cs3-simple-slide-show-menu-fewcode.* files from
Improvements to be made / exercise
- If you got more and/or bigger pictures, you actually should not include the pictures in the *.swf, but rather load these from the Internet.
You then have to use how to use/program a preloader (we will cover this in some other tutorial).
- You may add text (labels) to each picture
- You also could add another URL button (e.g. I should add one to the TECFA Logo on top left).
- Exercise
- Add some contents to frame one and add a "home" button to navigate there.
Customizing buttons
You can customize button skins, but this is not easy.
- Double click the button on the stage
However, before you try this:
- Be aware that you can change width and height simply though the parameters panel
- Color will adapt to background (buttons are transparent)
Read more about Customizing the Button at Adobe
Component buttons in an animation example
You may consult this example in order learn:
- that one can add a button anywhere in the timeline
- how to work with scenes
Scenes can be understood as fragments of a long timeline (likes scenes in a theatre). They have the following advantage:
- The timeline becomes shorter and more manageable
- You can test scenes independently
To add a scene:
- Menu insert scene
- To rename a scene: menu Window->Other panels->Scene; then double-click on the scene
To navigate from one scene to another, use code like this:
The following code will move the user to a scene called "Credits" in frame 1 and stop after she presses the "credits_btn".
credits_btn.addEventListener(MouseEvent.CLICK, goCredit); function goCredit(event:MouseEvent):void { gotoAndStop(1,"Credits"); }
The following code will move the user to a scene called "Animation" in frame 1 and play
restart_btn.addEventListener(MouseEvent.CLICK, restart); function restart(event:MouseEvent):void { gotoAndPlay(1,"Animation"); }
- Example and code
- You can see the flash-cs3-cloud-animation-sound2.* example
- The files are here: http://tecfa.unige.ch/guides/flash/ex/components-intro/