The Stage
We have two frames, one for the login and one for the memopad. I will not go into details how to make the login stage. You can easily find out and there are other tutorials explaining this. The login script is attached to the submit button and is very simple. Just as a precaution when you make the textfields for the login, set the number of maximum characters to 0 so you are not limited to any length of your login and password.
The second frame contains all the parts for the memopad. There is first of all a textfield, which will show the date, then 7 radiobuttons and a movieclip box, which holds the input textfield and two buttons. We name all these parts of course and you can see the names by clicking on the objects and looking in the property inspector.
The movieclip box has a textfield with a scrollbar. We name the textfield rather than giving a var name. This is important when we use the scrollbar. Then there is a reset button, which gets the name (resetButton). We need this button if we decide to eliminate the text in the textfield and finally a close window button to unload the movie. You can, therefore, put this movie into your main movie.
The Actionscript: Date
A memopad should show the current date, which is shown in the code below. You have to add +1 to the current month, since in Flash the count starts at 0. If you did not add +1 you would always be one month behind (which could be nice depending on the situation?!).
stop();
//get the current date
var today = new Date();
var currentDay = today.getDay();
var currentMonth = today.getMonth();
var currentDate = today.getDate();
var currentYear = today.getFullYear();
//you have to add +1 to the month, because counting starts at 0.
dateTextField = (currentMonth + 1) + " - " + currentDate + " - " + currentYear;
The Actionscript: Shared Object
First we want to make the movieclip box invisible, because it will change depending on the day unless we prefer a particular day.
//we make the movieclip box invisible at start
_root.box._visible = false;
Next we define the shared object. Since we have 7 days we will define one single function and use the weekday as an argument. We could also make one movie with one shared object but that of course would result in 8 movies. We call the function createNewLocal(weekDay). Now we write the code to make our shared object. First we create the instance myLocalSO, which will hold the shared object.
//here we define the general function for the shared object for all days
//and weekDay is our argument
function createNewLocal(weekDay){
//we define the shared object
myLocalSO = sharedobject.getLocal(weekDay);
The contents of myLocalSO will hold the data so we add .data.myText. If there is contents which means myLocalSO.data.myText is not (!=) null, then we want this contents written in the textfield mainText, which is in the movieclip box (_root.box.mainText.text). If we have nothing written in there (else) we want the weekday written upfront. And now comes the cool thing. Because the weekday is also part of the shared object, it will be remembered even the contents is not null and will always be upfront.
To have the string weekDay (it is a string because it is in quotations) recognized as a variable we have to use eval. Otherwise the string weekDay instead of the day of the week will be written upfront.
//if we have text in the textfield, we want this text to be memorized.
if (myLocalSO.data.myText != null) {
_root.box.mainText.text = myLocalSO.data.myText;
} else {
//if we have no text (null) then we want the weekday in front.
//weekday is used as a constant or string "weekDay", then we have to
//use eval to evaluate its actual content, since it is a variable.
_root.box.mainText.text = eval("weekDay") +": ";
}
In this final part of the script we introduce a handler for the textfield mainText. In Flash MX there is the action textfield.onChanged, which is invoked when the content of a text field changes. By default, it is undefined but here we define it.
//here we have to make sure that the input text when changed will be our stored data.
_root.box.mainText.onChanged = function() {
myLocalSO.data.myText = _root.box.mainText.text;
}
}
The reset button
We create a reset button, which we name resetButton in the name field of the property inspector. This will set the contents of the textfield to null.
//If we want to erase any content we use the reset-button for the main textfield.
_root.box.resetButton.onRelease = function () {
//content is null...
myLocalSO.data.myText = null;
To recover the weekday we put the following action.
//but weekday will be recovered.
_root.box.mainText.text = eval("weekDay") +": ";
}
The Actionscript: The Radio buttons
We now have to create the tools for the interaction with the user. We could use ordinary buttons for each weekday but Flash MX has components, which can work like buttons and are kind of fancier. We will use radio buttons. We put 7 radio buttons on the stage each one into a different frame. I like to put each object into a different frame except for buttons and their text. Then I know where to find them. We click on each button and give it a name conveniently here we call them radioMonday and so on. When you click on a radio button you see a description in the property inspector. First of all all radio buttons, which you have put on the stage belong to the same group. This is a particular feature of radio buttons compared to checkboxes for example. Use of radio buttons allows only one choice whereas checkboxes allow several choices. If you want to to use radio buttons like checkboxes you have to give every button a different group name. This will unlock their relation to each other. However in our case we don´t want that.
Now let´s get back to the script. We first label all the buttons, which consequently results in a description next to the button. We can actually choose where to put this description (property inspector). We want it to the right of the button. We use the setLabel command to do that and in brackets we write what we want the label to be (for example "Monday"). We do that now for all buttons.
//Here we set the label for the radio buttons to the individual days.
_root.radioMonday.setLabel("Monday");
_root.radioTuesday.setLabel("Tuesday");
_root.radioWednesday.setLabel("Wednesday");
_root.radioThursday.setLabel("Thursday");
_root.radioFriday.setLabel("Friday");
_root.radioSaturday.setLabel("Saturday");
_root.radioSunday.setLabel("Sunday");
Next we have to attach a function to the radioGroup (which we named as by default radioGroup). This function is a changeHandler and makes sure that when we select a different button the corresponding action will be done, in our case changing the textfield for another weekday. And that´s it. Now we have to define the function.
//change handler for the radio buttons is the function "onChange".
radioGroup.setChangeHandler("onChange");
The Actionscript: function onChange(component)
As the last step we now define the function onChange with the argument component, which indicates to flash that this is a function for a component. Our function basically consists of a number of if statements. What we do is we ask if the value, which we previously set for a radio button is identical (==) to that button. If so then make the movieclip box visible and execute the function createNewLocal(weekDay); where we replace weekDay with the actual day. And that´s it.
//we add an event handler "onChange"
function onChange(component){
//we call the value of a button, if the button is selected by the user.
if (_root.radioGroup.getValue()=="Monday"){
//the movieclip will now be visible
_root.box._visible = true;
//we create a shared object called "Monday" using the above function
createNewLocal("Monday");
}else if (_root.radioGroup.getValue()=="Tuesday"){
_root.box._visible = true;
createNewLocal("Tuesday");
}else if (_root.radioGroup.getValue()=="Wednesday"){
_root.box._visible = true;
createNewLocal("Wednesday");
}else if (_root.radioGroup.getValue()=="Thursday"){
_root.box._visible = true;
createNewLocal("Thursday");
}else if (_root.radioGroup.getValue()=="Friday"){
_root.box._visible = true;
createNewLocal("Friday");
}else if (_root.radioGroup.getValue()=="Saturday"){
_root.box._visible = true;
createNewLocal("Saturday");
}else if (_root.radioGroup.getValue()=="Sunday"){
_root.box._visible = true;
createNewLocal("Sunday");
}
}
Conclusion
I hope you enjoyed this tutorial. I have not tested this file on PC because I am a Mac (OS 9.1) user but I think there should be no problem. You can now change this into something completely different. You can also use the shared object for different purposes. Let me know because I also want to learn new things. If you find bugs, have comments send me e-mail. Thank you for studying this tutorial.
NOTICE: This particular memopad is not for commercial use but only for non-commercial, private or educational use.
DISCLAIMER: The creator of this memopad Joachim Schnier will not be responsible for any lost data or damage caused by using this memopad.
|