create your own

Flash CS4 Tutorial, Dynamically Create a Button

76
rate or flag this page

By frenchsquared


Flash CS4 Tutorials, Dynamically Create a Button

Creating a Dynamic Button For This Flash CS4 Tutorial the will not be any starting files. You do not need any images or objects in the library. In this Flash CS4 Tutorial the button will be completely created using ActionScript. Start by opening a new Flash CS4 file, ActionScript 3.0. Select the first key frame and press F9 to open the actions panel. When creating a button one needs to define all the states ofthe button before anything else can be done. Add the example code to the actions panel.

var btn1up:Shape = new Shape(); btn1up.graphics.beginFill(0x00000) btn1up.graphics.drawCircle(475, 200, 20)

First, the ActionScript defines the variable btn1up, defines it as a shape and then creates a new shape called btn1up. The fill color is then defined as black(0x00000). Last the btn1up shape is drawn as a circle starting at an x location of 475, a y position of 200, and for a total size of 20px. You can play with all these values as you need. The up state of your new button has been defined..

Copy the next section of code and paste it below the existing code. This section of code is going to define the over state of your button. This is basically the exact same code. Notice that the color has been changed so that the user will see that your shape is actually a button.

var btn1over:Shape = new Shape(); btn1over.graphics.beginFill(0x762512) btn1over.graphics.drawCircle(475, 200, 20)

Yes this is getting repetitive, but you have to define each of the states. So, again copy and past the example code below the existing code in the actions panel. This code simple defines the Hit state of your button.

var btn1hit:Shape = new Shape(); btn1hit.graphics.beginFill(0x00000) btn1hit.graphics.drawCircle(475, 200, 20)

Finally, something new. The previous code created the shapes for the button, but now the button actually needs to be created. So copy the example code into the actions panel. This line of ActionScript simply creates a variable called your_btn sets it as a SimpleButton and then creates a new button. However, nothing has connected the new button to the shapes previously created.

var your_btn:SimpleButton = new SimpleButton();

Each shape needs to be defined as a state of the button, so add the example code. This code is pretty straight forward.

var btn1hit:Shape = new Shape(); btn1hit.graphics.beginFill(0x00000) btn1hit.graphics.drawCircle(475, 200, 20)

Since the button doesn't exist on the stage, remember it was drawn with ActionScript, it needs to be something to tell it to go to the stage. That's where the addChild method comes in. The example code is simply telling Flash to add your_btn to the stage.

stage.addChild(your_btn);

Last you just need to add an event listener to the button, just as you would any other button. Your set. This event listener simple traces when the button is clicked, but you can make it do anything.

your_btn.addEventListener(MouseEvent.CLICK, size1); function size1(event:MouseEvent):void{ trace("clicked") }

Press Control-Enter and test you movie.





IT Admin

  • CSS, How to understand inline and block level elements.

    Block level  elements are normally displayed as blocks with line breaks before and after. Examples of block level elements include paragraphs, headings, divs and block quotes. Inline elements are not displayed as blocks. The content is displayed in lines and there are no line breaks before and after. Examples of inline elements include emphasized text, strong [...] - 4 months ago

  • CSS, How To tweak css for only Safari?

    If you have spent anytime dealing with CSS you have run into issues with a browser rendering code incorrectly. You may even have gone as far as to make several style sheets and use a browser check to tell the browser which one to use. Most of my websites dont need more then one style [...] - 4 months ago

  • CSS, How to Hide Styles from Older Browsers?

    Some older browsers, such as Netscape Navigator 4 and IE 4, have poor support for CSS. It is possible to hide styles from these browsers using specific media types and @import rules. All styles will be hidden from Netscape Navigator 4 by changing the link element’s media type from screen to screen, projection. Netscape Navigator 4 [...] - 4 months ago

CSS How To

  • Twitter Weekly Updates for 2009-11-22

    The maker of iFart is sending a message to Steve Jobs and Apple: http://digg.com/d31ARUx?t # An Open Appeal to Steve Jobs: http://digg.com/d31ARUx?t # Powered by Twitter Tools - 5 days ago

  • CSS, How to work with content areas.

    The content are of a box can be given width, height, and color. Width and height can be specified in points (equal to 1/72 of an inch), picas (equal to 12 points), pixels, ems, exes, millimeters, centimeters, inches, or percents. - 2 months ago

  • Twitter Weekly Updates for 2009-09-20

    My Farmville is broken, cant access, gifts, market, or ribbons # Farmville and zynga are a rip off. Watch out. There are still some glitches in the game and zynga told me to bad Im unimportant. # wouldnt it make more since for a developer to fix broken issues rather then add new features. Well not farmville, [...] - 2 months ago

  • Twitter Weekly Updates for 2009-09-06

    I need 5 more neighbors on FarmVille help me out. http://bit.ly/tLsni # looking for flash tutorials and how to guides check out – http://frenchsquared.com/ # Powered by Twitter Tools - 3 months ago

  • Twitter Weekly Updates for 2009-08-30

    New version of Wordpress theme adStyle is live at: http://wordpress.org/extend/themes/adstyle # Just finished installing OS X 10.6 on my new Solid State drive. Very impressed, seems noticeably faster. # I need more neighbors on Farmville for Facebook. Hit me up as a friend. http://bit.ly/tLsni # playin farmville on my macbook 10.6 and new solid sate sata II [...] - 3 months ago

  • CSS, How to properly use Border Styles.

    The border properties specify the width, color and style of the border of an element. Shorthand border properties include border-top, border-bottom, border-right, border-left and border. - 3 months ago

  • CSS, How to Padding Padding and more Padding

    Padding can be applied to the outside edges of the content area of any block level or inline element. Padding creates the space between the edge of the element and its content. - 3 months ago

  • Twitter Weekly Updates for 2009-08-23

    Wordpress liked my theme. They have asked that a make a few revisions and resubmit. Sounds like my theme may get accepted! # how long does it normally take for wordpress to get back to you after submitting a theme? # Just finished update my first wordpress theme http://wordpress.org/extend/themes/adstyle # New wordpress theme made for adsense check it out [...] - 3 months ago

Comments

RSS for comments on this Hub

No comments yet.

Submit a Comment

Members and Guests

Sign in or sign up and post using a hubpages account.


optional


  • No HTML is allowed in comments, but URLs will be hyperlinked
  • Comments are not for promoting your hubs or other sites

working