Step-by-Step Director Portfolio, Part I -- Basic Scripts and Portfolio Shell
This will be the first of my step by step lessons for making a portfolio in Director. I will try to fill in the conceptual information as I go along. The project should look something like what you will see at the link below when you have completed this little tutorial. Because the sample you will see is in a web format, when you want to exit the project, everything stops, you have to refresh to get it going again!
Please view the project before you continue. Project
Note that this project is not completed, I will use it as a sample to continue with the lessons.
Copying some needed files:
You will need some graphic files that are available in these pages. Make a folder on your desktop and call it "Sample Portfolio". You will put the files you will need into this folder. To save a file from this page to your desktop simply use the right mouse button and click it on the image. A little drop down menu will appear that says "save picture as". Save to your folder and you've got it! I'll let you know what you will need.
First a little review. You should have gone through the first few Director lessons that are in the Acrobat file in the curriculum folder in the Director folder on your CD. These lessons, while directed toward animation stuff, will help you to understand the Director interface. If you have done that, your are ready to move into interactivity! Director isn't easy, don't be too hard on yourself. I am going to go really slow.
Step by Step
1. A couple of extra things to know. I talked about enter and exit frame in the application lesson at the beginning of this week. Now we are going to use that knowledge. In the diagram below the area where you write frame scripts (directions for things that happen in a frame) is in red
.
You will write scripts in the individual frames where you want them to go.
2. The frames are numbered across the top, the channels down the side. The channels on the left are called "sprite channels" That's where you put your buttons and stuff. Sprite scripts (mouseUP, mouseDown) go in this part of the score, directly on the sprites.
3. The following images should be saved into your folder now: (the first one is pretty big 640x480)
There should be five in all.
Getting Started with the Project:
4. Import the five images into your cast. (If you don't have a clue what I am talking about, go back to last week and do the director lessons and tutorials). They aren't animated gifs but you can select that option if you want. (See Import movie)
5. Once you have your images showing in the cast you are ready to start the portfolio shell.
6. Go to the Property Inspector for the Movie and make sure the stage size is 640 x 480.
7. Place the bkg.gif image in frame 1, channel 1 as shown below.
The background cast member becomes a sprite and fills in the default 28 frames.
If we had an animated splash, we would put it in the first frames and move this over, but because we are doing a very simple portfolio, we will just put it in frame 1.
Before we go much further, we should take a look at the nav chart for this sample project:
8. Next we will give the frames names (you could use numbers to identify them, but the numbers don't stay with what you tell the frames to do, names stay with the frame and with the directions, makeing editing easier). To name frames you click in the space above the frame number bar and you will see a shaded box appear that says new marker, it is next to a down turned triangle. While the box is shaded you can re-name it and you should call it MAIN. These markers can be moved around as much as you want. You can have one on each frame if you want to put them there. They overlap and you won't be able to read the whole name until you mouse over it, but that's ok.
Put in the following markers as you see below:
We are going to direct the play head to go to these markers when the buttons are pushed on the stage throughout the project.
10. Now, go back to the stage view, we will leave the score for a while. Make sure the play head is in frame one before you do anything else, I forgot to move mine above!