Juice Machine Project In ActionScript 3

Introduction:

In this project you will learn how to program using an external editor for programming, manipulate Flash movieClips/textFields, and debugging with Flash CS3. I chose to name the project Juice Machine instead of soda machine because I don't want to promote soda; it's just bad stuff, trust me. Soda only makes sense when eating BBQ food, not as a casual drink; anyway I'm getting off topic. I will assume that you've read and completed the previous tutorials.

Section 1: Getting Started

I recommend using an external editor for any programming done in Flash. Get a powerful, free editor here: Notepad++.

I've created a tutorial file for you to follow up on in addition to instructions on how to get to that point.

Grab the initial source files here: Juice Machine

There are a few things in the Juice Machine starter file that I have not talked about: dynamic textfields, layers, and filters. You may create a new AS3 document and create everything from scratch or you can examine the source file and follow along. I recommened following my steps in the next section if you have little or no experience with the Flash tools.

Section 2: Designing The Juice Machine With Flash.

This section shows you some design skills with Flash CS3. You may skip to section 3 if you've decided to use the initial source files. Try to create something like this:

1) Draw a rectangle on the stage. This is your soda machine background. Name the layer background (double click on the layer name to rename it).

2) Create a new layer by clicking on first icon in the image above (3 icons to the left of the trash can).

3) Name the new layer buttons. Select the rectangle tool if it isn't already. Select white as the fill color (the bucket). Create rounded rectangles by modifying the edge properties before drawing the rectangles on the stage (set it to 10).

4) Convert this rectangle to a movieclip symbol (F8) and give it the name m_juiceButton.

5) With the juice button selected, press ctrl-c to copy it.

6) Press crl-shift-v to paste a copy of the button right on top of itself. This is very handy for precision work; don't ever forget this short cut key.

7) Press shift-down a few times to move the button down from its copied position.

8) Repeat steps 6 and 7 so you have a total of 3 evenly spaced, white buttons.

9) Select the top most button.

10) In the properties panel, select an orange tint color and set the intensity to 60%.

11) Set the second button to light green, and the third one to purple.

12) Go to the filters tab and add a bevel filter on the buttons to give it more depth.

13) Create a price layer and use the text tool (T) to create a text field. Make it a dynamic text field instead of static text in the properties panel. You can name this whatever you want. Dynamic text can be manipulated by code (notice you can put an instance name there).

14) Create another layer called cash and put it outside of the juice machine. Copy and paste the dynamic text field you just created or create a new one.

15) Create a new layer called text. Give the juice machine a title, label the price, cash, and juice names by using the text tool and creating static text.

16) You can make the title or background into a movie clip and add bevel filters to it if you'd like. The background that I created used a linear fill type instead of the basic solid one. This can be changed in the Color panel.

17) I usually do this part first. Add a new layer called code. Save your work.

When you're happy with your colors and position of things, get ready to start making it functional.

Section 3: Making It Work

1) In the top layer called code, click on the first frame and open the actions panel (F9). Enter the following: include "./juiceMachine.as";

An include is basically a copy and paste of whatever code is in your text file and into that spot. The ./ means current directory. You can include any text file; it doesn't have extension .as.

2) In the same directory as your saved file, create a juiceMachine.as.

3) Open juiceMachine.as with Notepad++ or your preferred editor.

4) In the editor, type in trace("Testing testing 123"); . Save juiceMachine.as . Go back to Flash and do a movie test run (Ctrl-enter). You should see the output.

5) Select the price/cost dynamic textfield with the select tool (v). Give it an instance name tf_cost.

6) Do the same for your cash dynamic text field but name it tf_cash.

7) Click on your juice buttons and name them m_orange, m_apple, and m_grape.

8) Save your work. Your Flash file juiceMachine.fla now has proper linkage for juiceMachine.as to manipulate.

9) TYPE the following in juiceMachine.as. I'm not going to let you copy and paste this time. Get use to typing it so you'll remember the keywords. There are many ways to optimize this but I chose to do it this way for the sake of simplicity.

If you are getting compile errors when you try to do a ctrl-enter, check your syntax to make sure you did not enter something wrong.

Section 4: Debugging Your Code

Sometimes getting compile errors in code is frustrating because the error messages are confusing. Here's a handy option to have Flash tell you exactly what line of code is causing the problem.

1) In Flash CS3, go to File->Publish Settings.

2) Click on the Flash tab.

3) In the Options section, check the box that says Permit debugging.

4) Click OK and save.

5) Somewhere in the code, say line 14, paste the following in juiceMachine.as: asjhfadsjfh

6) Save juiceMachine.as. Do a movie test run (ctrl-Enter).

7) You should get the following error:
juiceMachine.as, Line 14   Access of undefined property asjhfadsjfh.

Without permit debugging on, you would not get the line number.

Section 5: Exercise

This program is obviously incomplete. Here is the list of things for you to do if you'd like:

- make apple and grape buttons work

- don't let your cash ever go to negative

- Juice to actually come out after paying (you'll need to know how to use gotoAndPlay() )

Ending Summary

This is the first tutorial where you mix design and programming together. I suggest you press F1 and go through all the Flash design tutorials CS3 provides. Balance yourself in the learning process with design and programming; you don't want to be lacking in either one side. By learning both skills at the same time, your mind has more time to digest the material. Learning both at the same time is far better than learning all design or all programming before learn the other half.

You now posses the knowledge of dynamic Flash content creation.

Published On: July 22, 2008

Previous Chapter: Manipulating Flash Content From Timeline In ActionScript 3