Variables

2 posts Page 1 of 1
Contributors
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Variables
hungryhounduk
Hi All
Here is another Tutorial, VARIABLES

This time we are going to Create (1) DYNAMIC TEXTBOX and (1) INPUT TEXTBOX and (1) BUTTON and Give a VARIABLE Name to the TEXTBOX'S to Display YOUR Name cooll;

Lets get Flashing cooll;

1. Create a NEW Flash Document 290 x 125 Pixels

2. Add a Layer in your Timeline and Label it "ACTIONS"

3. Add a NEW Layer below the ACTIONS Layer and call it "LABEL"

4. Add another Layer below the ACTIONS Layer and call it "TEXT FIELDS"

5. Add another Layer called "BUTTONS"

* Your Timeline should look like the Pic Below

Image

6. Create a Small BUTTON ( Goto > INSERT > NEW SYMBOL > Choose BUTTON and Click OK, You will be inside your Button, Create a small Square or Round shape as your BUTTON and Center it Horizontally and Vertically and in the UP/OVER/DOWN/HIT state you see, Click on the HIT State and Press F5, This will fill in all your Button States )

7. Click on the SCENE 1 Tab to go back to your Main Stage Timeline

8. Select the First Keyframe of your BUTTON Layer and DRAG the Button from the LIBRARY and Place it on the Right hand side near the Right edge.

9. Select the FIRST KEYFRAME in the LABEL Layer and with the TEXT TOOL enter the following text: "Please enter your Name" make THE font size around 22 Points.

10. After entering the TEXT, Drag the Text to the Upper part of the stage, But leave some room as we need some room in the middle to add the TEXT FIELD.

11.Make sure your Button is in the Position like the Pic Below

Image

12.Click the First Frame of the TEXT FIELDS Layer and Draw a small Textbox below "Please enter your Name", Set the TEXTBOX VARIABLE NAME you have just created to "inputName" and click the BORDER/Bg Checkbox so that the TEXTFIELD has a Black Border round it, and Click the EMBED FONTS Option.

Like the Pic Below

Image

13.We now need to add (10) Frames to each Layer, Place your MOUSE POINTER on FRAME (10) of the ACTIONS Layer, Then click and hold down your MOUSE button and drag down to Frame (10) of the Buttons Layer, While the (4) Frames are Highlighted ( in a Straight line ) Right Click on a Highlighted Frame and Choose > INSERT FRAME from the Menu.

14. Insert a Blank Keyframe on Frame (10) of the TEXT FIELD Layer (right click on the frame (10) and Choose > INSERT BLANK KEYFRAME from the Menu )

15. Select the Blank Keyframe you just added, and Click on the TEXT TOOL and add a TEXTBOX to the Middle of the Work Area ( make sure DYNAMIC TEXT is selected for this TEXTBOX ).

Image

16. INSERT a Blank Keyframe in Frame (10) of the LABEL Layer, ALSO INSERT A KEYFRAME (Not a Blank Keyframe ) in Frame (10) of the Button Layer.

* Now all thats left is for you to add some ACTIONSCRIPT CODE and Asign some VARIABLES to the Animation we just Created.

17. Select the DYNAMIC TEXTBOX on Frame (10) of the TEXT FIELD Layer, In the TEXT Properties IN THE VARIABLE FIELD, Type the name: "finalName", From the Text Properties uncheck the Border/Bg, so its like the Pic Below

Image

* Now that we have the 2 TEXT FIELDS named we can now add the code

18. INSERT a Blank Keyframe on FRAME (10) of the ACTIONS Layer, Once the Blank Keyframe has been added, Right Click on it and Select "ACTIONS", The Actions window will appear, From the Actions Window Press Ctrl+E (This is to Open the EXPERT MODE of the CODING Window )

* The EXPERT MODE allows you to directly to TYPE in Code more EASILY and Quickly than in Normal Mode. Because what we want to take what the USER INPUTTED into the INPUT BOX ( Known as inputName ) and display it in your DYNAMIC TEXT FIELD ( Known as finalName ) We need to make them equal to each other.

19. In the ACTIONS WINDOW Copy and Paste the Code below in
Code: Select all
finalName = "Hello " + inputName
* Make sure there is a space after Hello and the Quotation mark.

20. add a "GotoAndStop" Statement for the button Code on Frame (1)

* Like Below
Code: Select all
on (release){
gotoAndStop (10);
}
21. For the Button on Frame (10) add the Folowing ACTION
Code: Select all
on (release){
gotoAndStop (1);
}
The ACTIONS for the Button you have just Entered make sure that your Visitors can get from FRAME (1) to FRAME (10) and Visa Versa.

2. Add a STOP(); Action to the First Frame of the ACTIONS Layer ( like below )
Code: Select all
stop();
Job Done cooll;

Save your Animation and Preview it by Pressing Ctrl+Enter, Fill out your Name and Click the Button
YOU WILL SEE YOUR NAME AND THE WORD "HELLO" BEFORE IT.

Image

Check out the attachment below with the working SWF File and the Flash 8 Project File.

Chris
You do not have the required permissions to view the files attached to this post.
Last edited by hungryhounduk on Fri Apr 09, 2010 3:17 pm, edited 1 time in total.
Image
User avatar
DreadNought
VIP - Donator
VIP - Donator
Posts: 116
Joined: Fri Jan 08, 2010 12:37 pm

Re: Variables
DreadNought
Very very nice it is nice to see alot of guides posted :D
Bound and boom tech,
The Future Of Coding
2 posts Page 1 of 1
Return to “Tutorials”