Development work covered during lesson
Today we linked the buttons to the sub forms so that when the user clicks on the different buttons it takes them to the different screens that they want to get to. Firstly I opened up Flash and then selected Action Script 3.0. Next I opened up the files that included my four main forms by going to 'file', 'open' and then selecting 'Forms' located in H:\Applied ICT\Unit 11\E block video. Once I opened my document the first thing that I did was add codes to my front end so that the buttons on the main menu worked correctly. Firstly I went to the code layer, right clicked the first frame and then selected 'actions' which opened up a large blank box. In order to help us when coding our front end we were given a code library, which included all the codes we needed to make our IMP work correctly. However in order to make the codes work I had to use my initiative and change many aspects of the code in order to make it suitable for my IMP because otherwise it would not work correctly. The first code that I copied into the box in order to make my 'Play options' button work was box 5, which I have provided below:
frmMain.btnmaintofilm.addEventListener(MouseEvent.CLICK, OpenPlayForm);
In order to make this work for my IMP I change it to this:
frmmain.btnmaintoplay.addEventListener(MouseEvent.CLICK, OpenPlayOptions);
Next I copied box 6 into the code layer underneath the previous box:
function OpenPlayForm(evt:Event)
{
if (frmmain.visible == true)
{
frmmain.visible = false; frmplay.visible = true
frmplay.x=300
frmplay.y=200
}
}
In order to make this work for my IMP I changed the code to:
function OpenPlayOptions(evt:Event)
{
if (frmMain.visible == true)
{
frmMain.visible = false; frmPlayoptions.visible = true
frmPlayoptions.x=300
frmPlayoptions.y=200
}
}
By making these changes to the code it means that when the user clicks the 'Play options' button on the main menu it will take them to the Play Options screen. Firstly I had to change the function from 'OpenPlayForm' to
'OpenPlayOptions' as this needs to be exactly the same as the event on box 5 in order for it to work. As well as that I also chnaged all of the 'frmmain' to 'frmMain' because although they are very similar this is the exact name I gave to the main options form and therefore if I had to include the capital letter because otherwise it wouldn't work correctly. By writing 'frmMain' it means that this is where the command starts from. Next I changed all of the 'frmplay' to 'frmPlayoptions' because this is the exact name of the sub form that I want it to go to when the user clicks the 'Play options' button on the main menu screen and If I wrote an incorrect name then the button would not work correctly. Once I had done this for the 'Play options' button I tested the front end to make sure that the button was working correctly so that I knew I was doing it correctly. I tested the front end by click CTRL + Enter and then clicking the Play options button and ensuring that it went to the corresponding subform.
Next I repeated all of the following steps for all of the main screens within my IMP. On the main menu I added the codes for the interactive features button underneath the codes for the Play options button on the code layer. This is the code that I added:
frmMain.btnmaintointeractive.addEventListener(MouseEvent.CLICK, OpenInteractive);
function OpenInteractive(evt:Event)
{
if (frmMain.visible == true)
{
frmMain.visible = false; frminteractivefeatures.visible = true
frminteractivefeatures.x=300
frminteractivefeatures.y=200
}
}
This code ensures that when the user clicks the interactive features button it goes onto the correct sub form. I also coded the two main buttons on the 'Play options' form which were 'play film' and 'scene selection' using the same two boxes from the code library but with the correct form and button names to make them work correctly. On the scene selection screen I had to use different codes as the buttons were leading to SWF files rather than another sub form. There are four main buttons on this screen which are 'Scene 1', Scene 2', 'Scene 3' and 'Scene 4'. On the code library I copied box 5 again, however underneath I copied box 8 instead of box 6 as this was the code which opens a video instead of a sub form. Below is both of the codes I copied without the changes:
frmmain.btnmaintofilm.addEventListener(MouseEvent.CLICK, OpenPlayForm);
function loadFilm(evt:Event)
{
channel.stop();
var urlReq:URLRequest = new URLRequest("mainfilm.swf");
var myLoader:Loader = new Loader();
myLoader.x = 120 ; myLoader.y= 60 ;
myLoader.load(urlReq); // passed to the ldr
try { removeChildAt(4); } //One bigger than the number of forms, starts from 0
catch (e:Error) { }
addChild(myLoader); // display object container
}
The first thing I changed about this code was the form name from 'frmmain' to 'frmSceneselection' as this is the exact name of the form that the button is on. Next I also changed the button name 'btnmaintofilm' to 'btnselectiontoscene1' as this is the instance name of the 'scene 1' button. Also I changed 'OpenPlayForm' to 'Openscene1' as this is exactly what I wanted to happen when the user clicked the 'scene 1' button and I also changed the function on the second code from 'loadFilm' to 'Openscene1' as these had to be the same in order for the code to work properly. As well as that in order to make sure that the correct video comes up when the user clicks the scene 1 button I changed 'mainfilm.swf' to 'Scene 1 - Entrance corridor.swf' as this was the exact name of the video that I wanted open. Lastly I tested my IMP by clicking CTRL + Enter and then clicking the 'Scene 1' button on the scene selection form. Below is the code for the 'Scene 1' button on the 'scene selection' form after I had made the changes:
frmSceneselection.btnselectiontoscene1.addEventListener(MouseEvent.CLICK, Openscene1);
function Openscene1(evt:Event)
{
//channel.stop();
var urlReq:URLRequest = new URLRequest("Scene 1 - Entrance corridor.swf");
var myLoader:Loader = new Loader();
myLoader.x = 120 ; myLoader.y= 60 ;
myLoader.load(urlReq); // passed to the ldr
try { removeChildAt(4); } //One bigger than the number of forms, starts from 0
catch (e:Error) { }
addChild(myLoader); // display object container
}
After I had done this I repeated these steps for all of the other buttons on the scene selection form which were 'Scene 2', 'Scene 3' and 'Scene 4' which means that when the user clicks each of these buttons the correct video should appear. In addition I also used these codes in order to open my quiz's, scratch game and drag and drop puzzle by changing it to suit the command.
How the development work fitted into the client brief
The development work fitted into the client brief because without the coding the user wouldn't be able to navigate themselves around the IMP as the buttons would not work properly. Below is part of section E of my client brief, which the development work fits into:
'As well as that my front end must also be interactive in order to get the user involved and make the IMP a lot more enjoyable. I am going to add buttons to each page so that the user can navigate them around the front end a lot easier and I will also make the videos more interactive by adding a skin which includes various different buttons they can click depending on what they want the video to do. I will also make my front end interactive by including a drag and drop puzzle as well as a scratch game which are related to the theme that my IMP is about.'
New skills table reference number
8 & 9
