Interactive Storybook
Test Project
I decided to start a test project yesterday to help me learn some code. I am very new to the AS3 coding scene and as allot of my course modules require some coding it is the least I can do.
I decided to do the interactive story book from Rex Van der Spuy's Foundation Games Design with Flash.
So to start off I got used to Flash's easy to use Vector graphics. Now there are allot of really easy tools in flash that make vector graphics very malleable. If you for example put two shapes of the same colour on top of eachother they become one shape that you can adjust to get your desired affect.

Now on this picture I used two green rectangles in an L shape then with the selection tool I sculpted the edges to form a hill. For the water I made one small blue rectangle and sculpted the top in to a concave curve then copy and pasted more of these and when I put them together they formed one single shape that can be moved about easily. Now Flash has the ability to convert text into vector graphics which is useful as what I did here is actually use a Text Ding bat called Saru's Flower Ding and all those flowers are actually the ding bats upper-case E. All you do after is convert one of them to a graphic and drag them from your library as you need them. The clouds are 3 white Ovals overlapped and converted it to a graphic symbol then dragged what I needed from the library. The clouds that you can see behind the hill are actually on the same layer but in Flash the layers themselves have what is called a stacking order. This means you can send objects behind one another in a single layer and as you can see this is very useful. The buttons are so easy to do in Flash as it most of it is automatic. When you create a button it automatically gives you a timeline that will give you an UP, Over, Down and Hit state. The Up state is what the button looks like with no interaction. The Over state is how the button will look when you have a cursor hovering over it. The Down button is what it will look like when you have clicked on the button. The Hit state is the hit box of the button. This is an invisible box that you click to activate the button.


Now I used the same techniques as mentioned before to create these last two levels and for the buttons I simply duplicated one and changed what I needed to on it.
Coding
So as you can see by the buttons the code I used in this project. It is very basic beginner code however it was fun to do and easy
The Hill, Pond and back to start buttons were pretty straight forward to code because each of these three levels are there own movie clip which contains all of its objects within which makes coding far simpler.
To start of with we need the FLA file which is where all your assets are saved and the AS file which is where all your code is saved. You work from it like this:
What you can see in the picture is the two tabs near the top on the right. One says InteractiveStorybook:InteractiveStorybook and the other says Main. The Main file is the AS file as you can see in the project window on the left and the Intera....file is the FLA you can also see in the project window. So all you do is basically switch the tabs at the top.
Right what you can see above is the start of my program that contains the package, class defenition and then the constructor method.
In this program the main things I am going to be working with are event listeners and movie clips. So I start by importing them into the program for future use.
next is the class defenition. Here I am declaring my variables and also you will notice it is called Main which is the same as the AS file it is saved as and also is the document class of the FLA file as you can see here
However back to the previous diagram you can see that the class main will need the help of MovieClip to work and is why Main extends MovieClip.
Now underneath I am creating my variables(fancy containers) and by putting a colon and either StartPage, PondPage or HillPage means that these variables can only contain information from these assigned labels. So I now have 3 empty containers labelled up and ready to go. Now I need to put stuff in them.
So now I am in the constructor method here is where I make everything work
So in the first variable I created called pageOne you can see that only objects relating to StartPage may go in so I am going to put an instance of StartPage inside the variable which means it contains all the symbols/objects from the StartPage you can see as the first picture in this blog. So whenever I use anything within the StartPage in my code including the objects within I simply call up the variable I created before pageOne!
The last bit of code you can see there is straight away I am adding pageOne variable onto the stage as it is the very first page hence pageOne. I do this with the addChild command which will add the variable pageOne onto the stage.
Getting the buttons to work
Event listeners are a commonly used part of Flash. You want your game to respond to anything you do you are going to need event listeners. Now once you get used to these they are pretty straightforward to use. So on the first page I have two buttons. The hillButton and the pondButton. Now as the StartPage and all its objects(including the buttons) are contained within the variable pageOne I will first need to direct Flash there, then I will will say what I am talking about within that variable in this instance the hillButton so Flash
if you would be so kind as to go to pageOne variable and get the hillButton I need you to put an event listener on that please then I am going to tell you what I want you to listen for and what to do whan you hear it. so it will go like this
pageOne.hillButton.addEventListener(MouseEvent.CLICK, onHillButtonClick);
so the last two arguments contained within the parenthesis are what type of event and then what I want it to do. So now I have to create the event handler which will be called onHillButtonClick.
So the function I want carried out when the hillButton is pressed is to display the hill level and remove the start page from the stage.
so.... function onHillButtonClick(event:MouseEvent):void
{
addChild(pageTwo);
removeChild(pageOne);
trace("Event regeistered CLICK")
}
So I am adding a new variable to the stage and removing the old one and with trace telling Flash to tell me the event was registered in the output.
So that pretty much covers what he buttons that direct you around the book do.
There is now some more buttons on the hill page they all follow the same principle as what I have written before but the functions they carry out on there event being registered are different.
up button
//event handler up button
function onUpButtonClick(event:MouseEvent):void
{
pageTwo.cat.y -= 15;
pageTwo.cat.x += 10;
if(pageTwo.cat.y < 67.35)
{
pageTwo.cat.y = 67.35
}
if(pageTwo.cat.x > 524.55)
{
pageTwo.cat.x = 524.55;
}
trace(pageTwo.cat.x);
trace(pageTwo.cat.y);
Here I am saying on the press of the up button keeping in mind that yes the cat is going up but also he is going up a hill so I need to adjust the x axis as well as the y axis. So on hearing the event move the cat that is in the pageTwo variable minus 15 on the up scale and + 10 on the across scale. Now the grid in flash is Zero at the top left so down is a y increase and right is an x increase. Now to stop the cat being clicked of the screen for eternity I have put a limiter on it. So
if the cats registration point is less than 67.35 then make sure it isnt! So if the next click would put it beyond that point then what this does is say whoa no you said if I was to go passed that point to say no you can go up to but not over this point. The same for the x axis.
Down button is the same so I wont explain it.
//event handler down button
function onDownButtonClick(event:MouseEvent):void
{
pageTwo.cat.y += 15;
pageTwo.cat.x -= 10;
if(pageTwo.cat.y > 334.35)
{
pageTwo.cat.y = 334.35;
}
if(pageTwo.cat.x < 294.55)
{
pageTwo.cat.x = 294.55
}
trace(pageTwo.cat.y);
trace(pageTwo.cat.x);
Grow Button
//event handler grow button
function onGrowButtonClick(event:MouseEvent):void
{
pageTwo.cat.width += 15;
pageTwo.cat.height += 15;
}
Here it is increasing the cats width and height by a set amount, now depending on the shape of the object this can have undesired results. If it is an uneven scaled object then you will want to use
scaleX and
scaleY as this will increaese its size by a percentage and not by pixels but it works on 1 is 100% so for a 10% increase you would use 0.1
Shrink Button
//event handler shrink button
function onShrinkButtonClick(event:MouseEvent):void
{
pageTwo.cat.width -= 15;
pageTwo.cat.height -= 15;
Vanish Button
}
//event handler vanish button
function onVanishButtonClick(event:MouseEvent):void
{
pageTwo.cat.visible = !pageTwo.cat.visible;
}
So on the vanish button is basically a boolean(true,false) statement but instead of putting false for example we put
! before itself again which means the opposite value of its current state. So it becomes a toggel button.
Link to the swf so far
http://swfcabin.com/open/1352062476