..... < Study week > .....
Sunday, May 1, 2011
Week 15 : 15 April 2011 (Reflection)...
Using Delete & Update Behaviors
( appropriate for administrator page where the admin can delete certain users or updating information on users)
Before using Delete and Update behavior, we have to use the RecordSet behavior first.
Steps:
1. Create a page to view back the data of all the registered users. Insert form first OK.
2. Add a Delete and Updating buttons / texts in the page.
3. Use RecordSet and Repeat Region.
4. Create a Delete Page. In the Delete Page, view back the information of the user based on the RecordSet. Add a Delete button.
5. Use a Delete Behavior.
> Name of the form
> Name of the RecordSet
6. Highlight the Delete button / text and use Go To Detail Page or Go To Related Page behavior to link the asp file to the Delete Page to view back the detail information of the user.
For update behavior, continue these steps:
1. Create an Update Page. Insert form first OK.
2. Use RecordSet and Repeat Region.
3. In the Page, insert Text Field for each field.
4. View back the information of the user based on the RecordSet by arranging the behavior from Bindings into the related field:
5. Add an update button.
6. Use update behavior.
7. Highlight the Update button / text and use Go To Detail Page or Go To Related Page behavior to link the asp file to the update Page to view back the detail information of the user.
( appropriate for administrator page where the admin can delete certain users or updating information on users)
Before using Delete and Update behavior, we have to use the RecordSet behavior first.
Steps:
1. Create a page to view back the data of all the registered users. Insert form first OK.
2. Add a Delete and Updating buttons / texts in the page.
3. Use RecordSet and Repeat Region.
4. Create a Delete Page. In the Delete Page, view back the information of the user based on the RecordSet. Add a Delete button.
5. Use a Delete Behavior.
> Name of the form
> Name of the RecordSet
6. Highlight the Delete button / text and use Go To Detail Page or Go To Related Page behavior to link the asp file to the Delete Page to view back the detail information of the user.
For update behavior, continue these steps:
1. Create an Update Page. Insert form first OK.
2. Use RecordSet and Repeat Region.
3. In the Page, insert Text Field for each field.
4. View back the information of the user based on the RecordSet by arranging the behavior from Bindings into the related field:
5. Add an update button.
6. Use update behavior.
7. Highlight the Update button / text and use Go To Detail Page or Go To Related Page behavior to link the asp file to the update Page to view back the detail information of the user.
Week 14 : 8 April 2011 (Reflection)...
Activity 1: Integrating Security into an Application
1. Create a form as following:
2.Create a table in a database file as following:
3. Type. a few username and password for testing.
4. Close your database file and view back your dreamweaver file.
5. Save the file. Make sure your connection is working.
6. Click Server Behavioes > User Authentication > Log In User
7. Select the correct form and connection.
8. Make sure you select the correct table and also the correct fields for username and password.
9. Select also the html or ASP file for If Login Succeeds and If Login Fails.
10. For Restrict Access Based, just select Username and Password.
11. Click OK. Test your application.
12. Try to create the Logout Page.
Activity 2: Integrating Security into an Application with Registration Page
1. Create a table in a database to hold all the data from the registration page. Don't forget to set a Premiary Key to the id variable or username variable.
2. The registration page should ask information such as Name, Username, Password.
3. Text Field for password has to set up as password.
4. Use Insert Record bahavior.
5. No need to view back the registration information. Therefore, don't use RecordSet bahavior.
6. Create another ASP file for login page.
7. Use Login Behavior and please use a same table (that holds registration information) for the username and password.
Activity 3: Go To Related Page and Go To Detail Page
1. Create a page to view back the data of all the registered users.
2. Use RecirdSet and Repeat Region.
3. Highlight one user and Go To Detail Page or Go To Related Page Behavior to link the asp file to the file that view back the detail information of the user.
4. Prepare the detailed file by viewing back the detail information of the user. Create another RecordSet and filter it based on it. Please use this new RecordSet.
Week 13 : 1 April 2011 (Reflection)...
Inserting Security into the System (use either ASP or PHP)
1. Connecting to a database file
2. Creating a register page
3. Inserting text field
4. Inserting data to a database
5. Check username
6. Creating a checkuser.asp file
7. Creating a Login Page
8. Inserting a Flash Button
9. Creating a Login-failed file
10. Restricting Access
11. Creating a Logout Link
12. Creating restricted.asp
1. Connecting to a database file
2. Creating a register page
3. Inserting text field
4. Inserting data to a database
5. Check username
6. Creating a checkuser.asp file
7. Creating a Login Page
8. Inserting a Flash Button
9. Creating a Login-failed file
10. Restricting Access
11. Creating a Logout Link
12. Creating restricted.asp
Week 12 : 25 Mac 2011 (Reflection)...
This week, we learned about how to create Database & Tables using PhpMy Admin.
Step 1: Just enter your database name and click the 'Create' button to create your database.
Step 2: Now to create a new table, enter your table name and the number of fields in the table, then click the 'Go' Button.
Step 3: Next, create the fields, just enter values for each field name, type, length of the field, null option and mention whether it is a primary key or not.
Then, click the 'Save' button.
Step 4: The following figure is displayed upon successful creation of your table.
Saturday, March 19, 2011
Week 11 : 18 Mac 2011 (Reflection)...
This week, we learned about how to create a contact form in Dreamweaver CS3 using ASP.
Step 1: Setup a site
Step 2: Setup the database file in Access
Step 3: Setup the Connection
Step 4: Setup the Contact Form
Step 5: Writing a data into a database using the Insert Record
Step 6: Reading / Viewing a data from a database using the RecordSet
Step 7: Execute the file
Step 1: Setup a site
Step 2: Setup the database file in Access
Step 3: Setup the Connection
Step 4: Setup the Contact Form
Step 5: Writing a data into a database using the Insert Record
Step 6: Reading / Viewing a data from a database using the RecordSet
Step 7: Execute the file
Week 10 : 11 Mac 2011...
Dr Zaida was not feeling very well. The class was called but Dr Zaida asked to complete assignment 1 and update our blogs. Hopefully Dr Zaida will recovered as soon as possible...
Week 9 : 4 Mac 2011 (Reflection)...
Introduction to Web-based Development...
1) Differences between ASP and PHP.
a) Server
ASP > Needs a Microsoft Server
PHP > Using Linux or Unix Server & NT Server (updated PHP)
b) Database connectivity
ASP > MS-SQL (Microsoft Product) - need to purchase the product
PHP > My SQL (free)
c) Speeds
ASP > Slow
PHP > Quick (Security better)
d) Language
ASP > Visual basic programming
PHP > C / C++ Programming
e) Platform
ASP > Window-based platform (can run in Linux platform with install ASP- APACHE program
PHP > Windows, Solaris, Unix, Linux
ASP > Needs a Microsoft Server
PHP > Using Linux or Unix Server & NT Server (updated PHP)
b) Database connectivity
ASP > MS-SQL (Microsoft Product) - need to purchase the product
PHP > My SQL (free)
c) Speeds
ASP > Slow
PHP > Quick (Security better)
d) Language
ASP > Visual basic programming
PHP > C / C++ Programming
e) Platform
ASP > Window-based platform (can run in Linux platform with install ASP- APACHE program
PHP > Windows, Solaris, Unix, Linux
2) Basic skills about :
a) Insert image
b) Hyperlink to other files
c) Link to e-mail
d) Link to webpage
e ) Anchor
Saturday, February 26, 2011
Friday, February 18, 2011
Week 7 : 18 February 2011 (Reflection)...
On week 6, we continue our lesson with text entry question.
1. Create several layers as following and rename each of the layer with an appropriate name.
2. In layer bg, draw an object to acts as a background of the application. For example, you can draw 3 rectangles to act as a background as the followings.
3. In layer text1, type the following text:
4. In layer text2, type the following text:
5. In layer step, type the following text:
6. In layer question, type the question.
7. Please use the following types of Text for each text field in layer question:
1. Create several layers as following and rename each of the layer with an appropriate name.
2. In layer bg, draw an object to acts as a background of the application. For example, you can draw 3 rectangles to act as a background as the followings.
3. In layer text1, type the following text:
4. In layer text2, type the following text:
5. In layer step, type the following text:
6. In layer question, type the question.
7. Please use the following types of Text for each text field in layer question:
9. In layer stop, type the following actionscript:
var respon;
var answer;
respon = ""
answer = ""
stop ();
10. Behind Pause button, type the following actionscript:
on (release) {if (answer == "carbon monoxide and other hydrocarbons")
{respon="Correct";
} else {
respon="Incorrect. Your answer "+answer+"is incorrect";
}
}
11. If you want your application accept Enter key press, edit the script as following:
on (release, keyPress "<Enter>") {if(answer=="carbon monoxide and other hydrocarbons") {respon="Correct";
} else {
respon="Incorrect. Your answer "+answer+"is incorrect";
}
}
12. Behind Play button, type the following actionscript:
on(release) {gotoAndPlay("Scene1");
}
The script will bring the application to the first scene if you have the scene!
13. Test the movie an you will get the following view:
Self Review : (Class Activity 5) -Part 3-
Tutorial 3 : Personalise your flash games using input & dynamic text boxes
Let's learn how to do it...
1. Open a new file in flash by selecting File > New.
2. Select the Text Box tool from the tool box and draw a text box on the stage.
3. Make sure the properties panel is visible at the bottom of the screen. Let's look through the different options for text in Flash.
4. In step 2, create a text box. Convert the text box to an Input text box. (the type of text box that the person using game/flash)
Click text book > Select the Input text option (from the Text Type drop down Menu)
5. Next, make this box as variable. In variable name cell > enter a name.
6. Ensure the border tool button is selected.
7. Select the Text Tool. Draw another text box on the stage.
8. Select Dynamic Text option from the types menu.
9. In the Variable Name Cell in the properties panel, enter the same name as Input Text box.
Var : name
10. Control > Test movie
Self Review : (Class Activity 5) -Part 2-
Tutorial 2 : Developing multiple choice questions
1. Create a question and answer
1. Create a question and answer
2. Convert the answer A & B into symbol with press F8.
3. Insert layer STOP and type the action script stop();
4. Insert layer CORRECT and insert keyframe at Frame Number 5. Type the text for correct answer with using Text Tool. At keyframe Frame Number 5, type the action script stop();
5. Next, insert layer INCORRECT and insert keyframe at Frame Number 10. Type the text for incorrect answer with using Text Tool. At keyframe Frame Number 10, type action script stop(); also.
6. Then, type action script for button a & b.
Sunday, February 13, 2011
Self Review : (Class Activity 5) -Part 1-
Tutorial 1 : Make a simple interactive environment with buttons
Planning your environment
1. Decide on the context of environment. Ex: farm.
2. Make a list or a storyboard that contains the contents of the background and the objects / parts that you are going to make interactive.
Let's getting started
1. Open a new file. File > New
2. In the timeline, double click on the name of this layer and type in background.
3. On this layer, draw the background for your interactive environment.
4. Lock the character layer by clicking on the white dot that is underneath the lock symbol on the character layer.
5. Add a layer by selecting the Add New Layer button.
6. Double click on the text Layer 2 and rename it objects.
7. Click on the first keyframe on the object layer. Using the draw tools provided, draw your first object. (Alternatively, select File > Import > Import to stage)
8. Select object and press F8 to convert your object to a symbol.Type in the name of your object and ensure you select the button behaviour option Click OK.
9. Click on the object you just converted to a button and click your right mouse button to open up the context menu. Select Edit in Place from the menu.
10. Now editing the button symbol. The timeline for this button symbol only has four frames - one for each of the button states.
UP-when the mouse isn't over the button
OVER-when your mouse is over the button
DOWN-when you click your mouse on the button
HIT-the active area that is the button-the region the user can hit or roll over.
11. Add a keyframe to the Over state by selecting the frame under the word Over and selecting Insert > Timeline > Keyframe from the menu.
12. Click on this new keyframe to ensure that it is the frame you are editing. Change your object to include the name or whatever you wanted to add or remove to make your object interactive.
Ex: Simply added a rounded rectangle and a text box containing the text 'sheep'.
13. Add a keyframe to the Down state by selecting the frame under the word Down and selecting Insert > Timeline > Keyframe from the menu.
14. Click on this new keyframe to ensure it is the frame you are editing. Change the object as required.
Ex: Added a sound file that I have recorded and edited.
15. To add a sound to the Down state keyframe. Select File > Import > Import to library.
16. Open the library select Window > Library or press F11.
17. Drag the sound onto the stage.
18. The sound has been added to the frame because a blue horizontal line will appear across the frame. This is a graphical representation of a sound wave.
Select Scene 1 above the timeline to return to the main stage.
19. Select Control > Test movie
20. File > Save
21. Turn flash into a game. Select File > Publish Settings.
22. Tick the file format. Click Publish button.
Saturday, February 12, 2011
Week 6 : 11 February 2011 (Reflection)...
Hello guys....See U again...Hope you all have abundance energy after one week semester break (Week 5 : 1 - 6 Feb 2011) ...
On 5th week, we continue our lesson about:
1. Make a simple interactive environment with buttons
2. Developing multiple choice questions
3. Personalize flash games using input & dynamic text boxes
Self Review : (Class Activity 4) -Part 3-
Tutorial 3 : Integrating Sound and Video into flash
Let's follow the steps below.
1. Download the sound and video file from e-learning system. Extract the latar.zip file into hardisk.
2. Then open any flash that created before.
3. Add a new layer in the timeline.
4. Rename it as music.
5. Click File > Import file to the library. Choose the sound file.
6. Drag the sound file from library into the music layer.
7. Save file and test movie.
8. For video, download any video file from the internet.
9. Add a new layer in the timeline.
10. Rename it as video.
11. Click at File > Import file to library. Choose the video file. Click next.
Let's follow the steps below.
1. Download the sound and video file from e-learning system. Extract the latar.zip file into hardisk.
2. Then open any flash that created before.
3. Add a new layer in the timeline.
4. Rename it as music.
5. Click File > Import file to the library. Choose the sound file.
6. Drag the sound file from library into the music layer.
7. Save file and test movie.
8. For video, download any video file from the internet.
9. Add a new layer in the timeline.
10. Rename it as video.
11. Click at File > Import file to library. Choose the video file. Click next.
Self Review : (Class Activity 4) -Part 2-
Tutorial 2 : Scene concept in flash
1. Choose the Background Color. Then, rename this scene as Introduction. Where to edit this scene? Go to Window menu > Other Panels > Scene OR Shift + F12 > double click at Scene 1 > type Introduction.
2.
1. Choose the Background Color. Then, rename this scene as Introduction. Where to edit this scene? Go to Window menu > Other Panels > Scene OR Shift + F12 > double click at Scene 1 > type Introduction.
2.
Self Review : (Class Activity 4) -Part 1-
Tutorial 1 : Basic Actionscript
In flash, we will insert Actionscript either in a frame in a Timeline or behind a button.
a) If we insert an Actionscript in a frame, the timeline will look like this.
b) If we insert an Actionscript behind a button, we cannot see any changes on the Timeline and stage.
Actionscript - stop
How to stop Scene 1 from running?
1. Open class activity2.fla file
2. Activate Scene 1.
3. Add a new layer on top of all layers in Scene 1. Rename it as action.
4. Right click on any frame in the new layer and choose Action.
5. When the action window is opened, click at Add icon (+) and choose Global Functions > Timeline Control > Stop
6. Close the action window > Test movie.
(If your Scene 1 consists of animation, you can't see it anymore. This is because; the stop action is in frame 1. Therefore to make sure that you still can see the animation in Scene 1, you have to move the stop action from frame 1 in action layer to the last frame)
7. Click at frame 1 in action layer.
8. Holf Shift key and drag the first frame of action layer to the last frame.
9. Save your file > Add the stop action in all of your scenes if required.
Actionscript - gotoAndPlay
1. Add a new layer above action layer. Rename it as button.
2.Open button library through window > Common libraries > Buttons.
3. Double click classic buttons and Playback.
4. Drag gelRight button to the stage in layer button.
5. Click at the button on stage and right click to open action window.
6. Click at Add icon (+) and choose Global Functions > Movie Clip Control > On
7. Then choose release.
8. Move the blinking cursor in {symbol and click Add > Global Functions > Timeline Control > gotoAndPlay
9. In a bracket type the name of the scene you want to jump "Scene 2".
10. Save your file > Test the movie. Add button more in the following scene if required.
In flash, we will insert Actionscript either in a frame in a Timeline or behind a button.
a) If we insert an Actionscript in a frame, the timeline will look like this.
b) If we insert an Actionscript behind a button, we cannot see any changes on the Timeline and stage.
Actionscript - stop
How to stop Scene 1 from running?
1. Open class activity2.fla file
2. Activate Scene 1.
3. Add a new layer on top of all layers in Scene 1. Rename it as action.
4. Right click on any frame in the new layer and choose Action.
5. When the action window is opened, click at Add icon (+) and choose Global Functions > Timeline Control > Stop
6. Close the action window > Test movie.
(If your Scene 1 consists of animation, you can't see it anymore. This is because; the stop action is in frame 1. Therefore to make sure that you still can see the animation in Scene 1, you have to move the stop action from frame 1 in action layer to the last frame)
7. Click at frame 1 in action layer.
8. Holf Shift key and drag the first frame of action layer to the last frame.
9. Save your file > Add the stop action in all of your scenes if required.
Actionscript - gotoAndPlay
1. Add a new layer above action layer. Rename it as button.
2.Open button library through window > Common libraries > Buttons.
3. Double click classic buttons and Playback.
4. Drag gelRight button to the stage in layer button.
5. Click at the button on stage and right click to open action window.
6. Click at Add icon (+) and choose Global Functions > Movie Clip Control > On
7. Then choose release.
8. Move the blinking cursor in {symbol and click Add > Global Functions > Timeline Control > gotoAndPlay
9. In a bracket type the name of the scene you want to jump "Scene 2".
10. Save your file > Test the movie. Add button more in the following scene if required.
Week 4 : 28 January 2011 (Reflection)...
On 4th week, we continue our lesson about:
1. Basic Actionscript
2. Scene concept in flash
3. Integrating Sound and Video into Flash
Sunday, January 23, 2011
Self Review : (Class Activity 3) -Part 3-
Tutorial 3 : Frame by frame animation (cell animation) - using movie clip symbol
Let's get started
1. Download frame by frame animation
2. File > New
3. Create a new symbol Insert > New symbol > Movie clip
4. File > Import file to stage (Import the first file only)
5. Click Yes of the following pop-up window
6. Automatically all images will be arranged on stage
7. Click Scene 1 > Drag bird symbol
8. To test movie. Select control > Test movie
Self Review : (Class Activity 3) -Part 2-
Tutorial 2 : Make a traditional animation
Let's get started
1. File > New
2. Draw character (Ex: Worm) > Name layer (Ex: Apple)
3. Click frame 2. Select Insert > Timeline > Keyframe or F6
4. Change image in frame 2
5. Click frame 3. Select Insert > Timeline > Keyframe or F6
6. Change image in frame 3
7. Add more frame to make animation longer
8. To test movie Select Control > Test Movie
Self Review : (Class Activity 3) -Part 1-
Tutorial 1: Using motion guides in Flash CS3 (The ant tunnel).
Let's follow the steps below.
1. File > New
2. Select Properties Panel > Background > Light green colour
3. Rename layer > Background
4. Choose rectangle tool > Draw a large light brown (the whole stage area)
5. Choose eraser > Draw a tunnel
6. Make a new layer Insert > Timeline > Layer. Name the new layer > Ant
7. On the ant layer > Draw ant
8. Select ant > Modify > Convert to symbol
9. Name the symbol ant > Graphic > Select the centre square (Registration option)
10. Create a guide layer
11. My timeline look like this
12. Guide: ant layer > Click first keyframe > Use pencil tool > Draw the path
13. Snap the ant to the guide
a) On the magnet icon
b) Select ant layer > Frame 1 > Select ant > Position mouse at the
centre (see crosshair) > Move the ant to starting point
c) Object has 'snapped' (if outline of circle just behind the crosshair)
d) Select Insert > Timeline > Keyframe (Ex: Frame 50 at ant, guide:
snake and background layer)
e) Select ant layer > Click frame 50 > Drag the ant to the end
Saturday, January 22, 2011
Week 3 : 21 Jan 2011 (Reflection)...
Hye guys! On 3rd week, we continue our lesson about:
- Using motion guides in Flash CS3 (The ants nest)
- Make a traditional animation
- Frame by frame animation (Cell animation) – using movie clip symbol
Let's look at my results during class with Dr Zaida.
Exercise 1
Subscribe to:
Posts (Atom)