I realised I should post my last two tutorials together, so when Lenny has the time he can work through them on his own (I know you're still busy, don't worry).
So, here is the 3rd lesson:
--------------------------------------------------------------------------
This is what we'll create. It looks simple, but as we get to tutorial two you should be able to add your own features to it:
Flash file: Date Widget
When you see the opening screen of Flash, click "Create New: Flash file (Actionscript 2.0). You'll see a white page. Now, always remember, this base page colour will stay the same no matter how many layers and levels (think "see-through sheets on top of a white page") you have. So, if, as you become more advanced, you choose to start adding more levels (see-through pages) on top of this base level, the bottom page in your stack will always determine your flash background colour.
Also, the layout of Flash CS3 may look daunting. But we'll get to each part as we go along. Once you get the hang of the program, you'll see it's fairly basic.
So, pick a background colour. Whatever you like. You'll find the colour setting at the bottom of the page, in the Properties panel. You could keep the page white, or try black or grey.
Here's the shapes labelled:
1) On the left in Flash you'll see a selection toolbar. These tools are used for creating 2D shapes and freehand lines and such. Press the one near the top called Rectangle Tool (R), since we want to create shape A. You'll see the bottom panel, called "Properties", change and give you options.
2) We want to make a big rectangular box to fill up the page. The "stroke color" in the Properties panel determines the colour of the border around your 2D shape; the "fill color" determines the colour of the rectangle. The other boxes change the width and style of your border, and the options under these are not needed. Pick a combination of colours, any you like. I've chosen a black border and a light purple fill, with a border of 3.
3) Draw a large box that covers most of your white page. If you aren't happy with it, go to the "Edit Menu" at the top and select "undo rectangle".
4) You may have noticed the Timeline panel at the top of your screen. If you've ever used professional animation software, or video software, you'll know what this does. It lets you create layers on top of other layers, and each of those tiny white blocks shows the keyframe (page) you're working on. For example, if you wanted to create an animation of a bouncing ball, you'd draw a ball in the first frame, then you'd create more keyframes and draw the ball in the air, then coming back down again. Then you'd play the Flash "movie" and see the ball bouncing as Flash displays each frame. You can play about with this in your own time.
Right now, you want to create a new layer, one that will sit above the rectangle you've drawn. This is because we want to create a new 2D shape – the white rectangle, shape B – and Flash cannot have two shapes on top of each other on the same level, or else the bottom shape loses whatever sat underneath the top shape. Go to the Insert menu at the top of your screen, then click Timeline, then Layer. You'll see a new layer (Layer 2) above your old one in the timeline. Press once on the name "Layer 2" at the side of the Timeline. This will ensure you're now working on the correct layer, and not Layer 1.
5) Now we want to create the next rectangle on this new layer, shape B, but with a white fill. This shape will be centred on top of the main rectangle, toward the top. Make it about 1-2cm high. It will be the box the date is displayed in. Click Create Rectangle on the side Selection panel/toolbar, then set the properties of it and create the shape.
6) Once you have the rectangle in place, press the Selection Tool on the left-hand selection toolbar. This stops your mouse from making more shapes if you accidentally press it down.
7) We want to add in code in, now, that tells Flash to check your computer's date and display it in the white rectangle we've created. In Flash, the term for writing code is called writing actionscript.
8) Now we need to create a textbox, which will display today's date in it once you've written the actionscript. On the toolbar selection panel on the left, select Text Tool. Set your ideal font and size and colour using the Properties panel at the bottom of your screen. Remember, the font must show up over the white rectangle behind, so pick a dark colour. I've chosen font size 20 and black and Garamond. Now, in the pulldown box beside this it lists types of textbox. You want "Dynamic Text", because this means the texboxt can perform functions when linked with actionscript. You also need to make sure the options are set to "Single Line" and that the font is "align centre". Now drag and draw a textbox on top of the white rectangle on your page.
9) Once you've drawn the shape (don't worry about getting it exactly centred over the white rectangle), go back to the properties panel. In the part labelled "Var:", you need a unique identifying name for your textbox (so your actionscript can see it). We'll call it display_day. If you want to move the textbox now, just press on it once and drag.
10) Okay, at this point you should save your file. Go to the File Menu, then select Save As. Call the document something like flash_tut.fla, and save it in a new folder, which makes it easier to upload the files later if you want to put them on the net.
11) Now we add the actionscript to tell Flash to check your PC and find the date, then display it in the textbox named display_day. So, in the Timeline panel, you'll see that the two layers each have a black dot in keyframe 1, with a red line that runs through both vertically. Press the black dot in frame 1 of Layer 1 to select it, because we will add the actionscript in that keyframe. Press F9 on your keyboard to bring up the actionscript panel. You'll have to get used to this panel if you want to work in Flash; it's where you will do all the "behind the scenes" coding that makes the Flash file perform effects and things.
Now, you need to add in some code. First, make sure Flash will display your text word wrapped, or else the code will run out of the visible window. Press the button that looks like three horizontal lines stacked, with an arrow beside them; it's in the right corner of the actionscript panel, near the X in the corner and the minimise button. Now press "Word Wrap". Okay, now you can add your actionscript to the actionscript window:
Have you read the greyed-out lines? Do you think you understand them? The "var" command tells Flash that the subsequent commands are variables that can be switched around. Now, if you wonder how a novice can find all these commands, such as getSeconds and getHours, look at the plus button on the top of the actionscript panel, or the split window on your left in the actionscript panel. You'll see a list of regularly used commands, although not the ones I've used here. This menu may help you write your own actionscript in the future.
12) Okay, if you've done everything correctly and the script can talk to the textbox you labelled display_day, you should now be able to see it partly working when you preview the flash file. Save your document, then press Ctrl/apple and Enter (or go to the "Control" menu at the top of the screen, then press "Test Movie". If you get an error window pop up, you've done something wrong and you need to try these instructions again. If you get no errors but you can't see any numbers in the white window, you've got the textbox font the same colour as your white rectangle, so you need to click on the textbox and change the font colour to black. If, however, you see numbers in the white box, even though the digits might not make sense, you've achieved the first part of this tutorial. Well done!
13) Now comes the next part of the actionscript. We need to tell Flash to display the date and time in written words rather than numbers in the white box. So, close the preview window, then go back to your actionscript panel. Make sure you're in the correct layer, Layer 1, the one that already has actionscript in it (again, you move through layers by pressing the titles listed to the left of the Timeline). Underneath the text already in the actionscript panel, copy this on a new line:
Okay, now to explain that whacking great chunk of code... When Flash checks your system for the day and month, it brings back the answer in digits, since it doesn't understand the concept of days, months, hours, minutes, and seconds. Flash assigns the days of the week with a number; that's how it works. So, if Flash checks your system and discovers it's Sunday, it returns with a value of 0. If Flash finds it's Monday, it returns with a value of 1. And if Flash discovers it's Friday according to the system clock, it returns with a value of 5. Again, that's how it works. But we don't want the date written in numbers in our display panel. Thus, we have to tell Flash that if it returns with a value of 0 after checking what day it is, it should understand the result also means the word "Sunday". And we have to write the code out for each day of the week, so each number will represent a day.
And that's where the If statements come in. "If Flash returns with a value of 0 for the day, then day = "Sunday". See:
if (day==0){
day = "Sunday"
And == means "equals". So, when we write the word "day" in our future code, Flash will check what day it is, then convert the integer into the appropriate word.
The same happens for the months. Flash brings back a value of 0-11 for each of the 12 months. We then have to tell Flash to display these values as words. The code is pretty much the same as the one for days.
14) Save and preview the Flash file again. Remember, preview = Ctrl/apple and Enter. If you've done everything correctly, you should see they date displayed properly. Congratulations!
Now you're free to publish it and upload it to the web.
So, here is the 3rd lesson:
--------------------------------------------------------------------------
Flash Tutorial C - Date Widget
This is what we'll create. It looks simple, but as we get to tutorial two you should be able to add your own features to it:
Flash file: Date Widget
When you see the opening screen of Flash, click "Create New: Flash file (Actionscript 2.0). You'll see a white page. Now, always remember, this base page colour will stay the same no matter how many layers and levels (think "see-through sheets on top of a white page") you have. So, if, as you become more advanced, you choose to start adding more levels (see-through pages) on top of this base level, the bottom page in your stack will always determine your flash background colour.
Also, the layout of Flash CS3 may look daunting. But we'll get to each part as we go along. Once you get the hang of the program, you'll see it's fairly basic.
So, pick a background colour. Whatever you like. You'll find the colour setting at the bottom of the page, in the Properties panel. You could keep the page white, or try black or grey.
Here's the shapes labelled:
1) On the left in Flash you'll see a selection toolbar. These tools are used for creating 2D shapes and freehand lines and such. Press the one near the top called Rectangle Tool (R), since we want to create shape A. You'll see the bottom panel, called "Properties", change and give you options.
2) We want to make a big rectangular box to fill up the page. The "stroke color" in the Properties panel determines the colour of the border around your 2D shape; the "fill color" determines the colour of the rectangle. The other boxes change the width and style of your border, and the options under these are not needed. Pick a combination of colours, any you like. I've chosen a black border and a light purple fill, with a border of 3.
3) Draw a large box that covers most of your white page. If you aren't happy with it, go to the "Edit Menu" at the top and select "undo rectangle".
4) You may have noticed the Timeline panel at the top of your screen. If you've ever used professional animation software, or video software, you'll know what this does. It lets you create layers on top of other layers, and each of those tiny white blocks shows the keyframe (page) you're working on. For example, if you wanted to create an animation of a bouncing ball, you'd draw a ball in the first frame, then you'd create more keyframes and draw the ball in the air, then coming back down again. Then you'd play the Flash "movie" and see the ball bouncing as Flash displays each frame. You can play about with this in your own time.
Right now, you want to create a new layer, one that will sit above the rectangle you've drawn. This is because we want to create a new 2D shape – the white rectangle, shape B – and Flash cannot have two shapes on top of each other on the same level, or else the bottom shape loses whatever sat underneath the top shape. Go to the Insert menu at the top of your screen, then click Timeline, then Layer. You'll see a new layer (Layer 2) above your old one in the timeline. Press once on the name "Layer 2" at the side of the Timeline. This will ensure you're now working on the correct layer, and not Layer 1.
5) Now we want to create the next rectangle on this new layer, shape B, but with a white fill. This shape will be centred on top of the main rectangle, toward the top. Make it about 1-2cm high. It will be the box the date is displayed in. Click Create Rectangle on the side Selection panel/toolbar, then set the properties of it and create the shape.
6) Once you have the rectangle in place, press the Selection Tool on the left-hand selection toolbar. This stops your mouse from making more shapes if you accidentally press it down.
7) We want to add in code in, now, that tells Flash to check your computer's date and display it in the white rectangle we've created. In Flash, the term for writing code is called writing actionscript.
8) Now we need to create a textbox, which will display today's date in it once you've written the actionscript. On the toolbar selection panel on the left, select Text Tool. Set your ideal font and size and colour using the Properties panel at the bottom of your screen. Remember, the font must show up over the white rectangle behind, so pick a dark colour. I've chosen font size 20 and black and Garamond. Now, in the pulldown box beside this it lists types of textbox. You want "Dynamic Text", because this means the texboxt can perform functions when linked with actionscript. You also need to make sure the options are set to "Single Line" and that the font is "align centre". Now drag and draw a textbox on top of the white rectangle on your page.
9) Once you've drawn the shape (don't worry about getting it exactly centred over the white rectangle), go back to the properties panel. In the part labelled "Var:", you need a unique identifying name for your textbox (so your actionscript can see it). We'll call it display_day. If you want to move the textbox now, just press on it once and drag.
10) Okay, at this point you should save your file. Go to the File Menu, then select Save As. Call the document something like flash_tut.fla, and save it in a new folder, which makes it easier to upload the files later if you want to put them on the net.
11) Now we add the actionscript to tell Flash to check your PC and find the date, then display it in the textbox named display_day. So, in the Timeline panel, you'll see that the two layers each have a black dot in keyframe 1, with a red line that runs through both vertically. Press the black dot in frame 1 of Layer 1 to select it, because we will add the actionscript in that keyframe. Press F9 on your keyboard to bring up the actionscript panel. You'll have to get used to this panel if you want to work in Flash; it's where you will do all the "behind the scenes" coding that makes the Flash file perform effects and things.
Now, you need to add in some code. First, make sure Flash will display your text word wrapped, or else the code will run out of the visible window. Press the button that looks like three horizontal lines stacked, with an arrow beside them; it's in the right corner of the actionscript panel, near the X in the corner and the minimise button. Now press "Word Wrap". Okay, now you can add your actionscript to the actionscript window:
If you copy and paste this actionscript into the Actionscript window, you'll see the lines starting with // are greyed out. This is because the lines are notes for you to read and learn from, and Flash doesn't see them.
Have you read the greyed-out lines? Do you think you understand them? The "var" command tells Flash that the subsequent commands are variables that can be switched around. Now, if you wonder how a novice can find all these commands, such as getSeconds and getHours, look at the plus button on the top of the actionscript panel, or the split window on your left in the actionscript panel. You'll see a list of regularly used commands, although not the ones I've used here. This menu may help you write your own actionscript in the future.
12) Okay, if you've done everything correctly and the script can talk to the textbox you labelled display_day, you should now be able to see it partly working when you preview the flash file. Save your document, then press Ctrl/apple and Enter (or go to the "Control" menu at the top of the screen, then press "Test Movie". If you get an error window pop up, you've done something wrong and you need to try these instructions again. If you get no errors but you can't see any numbers in the white window, you've got the textbox font the same colour as your white rectangle, so you need to click on the textbox and change the font colour to black. If, however, you see numbers in the white box, even though the digits might not make sense, you've achieved the first part of this tutorial. Well done!
13) Now comes the next part of the actionscript. We need to tell Flash to display the date and time in written words rather than numbers in the white box. So, close the preview window, then go back to your actionscript panel. Make sure you're in the correct layer, Layer 1, the one that already has actionscript in it (again, you move through layers by pressing the titles listed to the left of the Timeline). Underneath the text already in the actionscript panel, copy this on a new line:
Okay, now to explain that whacking great chunk of code... When Flash checks your system for the day and month, it brings back the answer in digits, since it doesn't understand the concept of days, months, hours, minutes, and seconds. Flash assigns the days of the week with a number; that's how it works. So, if Flash checks your system and discovers it's Sunday, it returns with a value of 0. If Flash finds it's Monday, it returns with a value of 1. And if Flash discovers it's Friday according to the system clock, it returns with a value of 5. Again, that's how it works. But we don't want the date written in numbers in our display panel. Thus, we have to tell Flash that if it returns with a value of 0 after checking what day it is, it should understand the result also means the word "Sunday". And we have to write the code out for each day of the week, so each number will represent a day.
And that's where the If statements come in. "If Flash returns with a value of 0 for the day, then day = "Sunday". See:
if (day==0){
day = "Sunday"
And == means "equals". So, when we write the word "day" in our future code, Flash will check what day it is, then convert the integer into the appropriate word.
The same happens for the months. Flash brings back a value of 0-11 for each of the 12 months. We then have to tell Flash to display these values as words. The code is pretty much the same as the one for days.
14) Save and preview the Flash file again. Remember, preview = Ctrl/apple and Enter. If you've done everything correctly, you should see they date displayed properly. Congratulations!
Now you're free to publish it and upload it to the web.
I've heard it said that once you know one programming language syntax, you know them all (you've just got to learn the code), and this strengthens that.
