Development work covered during lesson
Today I created an image rollover effect in Flash, which I am then able to use in my IMP. For this development work I found a website called http://www.ilike2flash.com/ which contained a basic tutorial on how to create this effect because we were not told how to create an image rollover effect as it was an effect I decided to introduce myself. I opened a new Flash Action Script 3.0 file and imported two images to the library by going to 'file', 'import', 'import to library' and then clicking the files I wanted to use which were located in V:\0APPLIED ICT\unit 11 resources\Palmers photos\E_Block_photos. Once I had imported the photos I wanted into the library I then renamed layer 1 to 'image 1' and dragged my first image on to the stage from the library. Next I converted it into a symbol by pressing F8 and then a small box appeared where I gave the symbol an appropriate name, checked 'movie clip' and clicked 'Ok'. I also changed the instance name of the symbol by going to the properties tab and then I gave it the name 'Imag1_mc' as this was the name that was used in the code I found on http://www.ilike2flash.com/2009/06/create-image-rollover-effect.html and therefore I thought it would be easier to use as I wouldn't have to change the code.
After I had imported the image and made it into a symbol I then needed to create the rollover effect. In order to do this I first went onto the timeline, selected th 30th frame and then pressed F5, which inserted a frame. I then clicked anywhere between the 1st and 30th frame, right clicked and selected 'Create motion tween'. Next I selected the 30th frame again, clicked on the image on the stage and then went onto the properties panel and changed the alpha style to 0%, which made the image disappear. I then went on to the timeline, locked the 'image 1' layer and then inserted a new layer called 'Image 2' which is where my second image will go. Next, I selected the 55th frame of the 'Image 2' layer hit F5 to insert a frame, then selected the 25th frame and hit F6 to insert a key frame. After I had completed this I then had to drag my second image from the library onto the stage ensuring that I had selected 'Image 2' layer because otherwise it wouldn't work correctly. I then converted the image into a symbol by pressing F8, gave it the name 'Image2', checked 'movie clip' and then selected 'Ok'. As well as that I also had to change the instance name to 'image2_mc' so that it would work with the code and I did this by going to the properties panel and typing it in beside 'instance name'.
The next stage of creating the image rollover effect was to create motion tween on the 2nd layer. Firstly I right clicked anywhere in between the 25th and 55th frame and selected 'Create Motion Tween'. Next, I selected the 25th frame, then the image on the stage and changed the Alpha style to 0%. After that I then had to select the 30th frame, then the image on the stage and change the Alpha style to 100% and lastly I selected the 55th frame, then the image on the stage and changed the alpha style to 0%, which helps to create the disappearing then appearing affect after the code has been added. The last steps that I had to do to get the image working was to put the codes in. Before I could do this I had to insert a new layer on the timeline called 'Actions' and I also insert key frames by clicking F6 on the 30th and 55th frames. I then selected the first frame of the 'Actions' layer, right clicked and selected 'Actions' which opened up a blank box. I then copied the first specified code from the website and pasted it into the box. As well as that I also had to add one more code to ensure the image was working correctly and in order to this I instead had to select the 30th frame, right click,select 'Actions' and then paste the 2nd specified code into the box. Once I had completed all of these stages the final thing that I had to do was test the movie by clicking CTRL + Enter and then hovering my mouse over the picture to ensure it was working correctly.
How the development work fitted into the client brief
In my client brief I said that I would be using photos in my IMP in order to provide my target audience with a visual aid to give them a better understanding of the layout of the E block. As well as that I also said that I was going to add effects to my IMP in order to make it more interesting. Below are parts of paragraph B) and D) of the client brief that the development work fits into:
'The films and photos that I will be using for my IMP will help my target audience have a better understanding of the layout of the E block as it will help to provide a visual aid to show them where each of the classrooms are and what they are for. The films and photos I use will also be very easy to understand and they need to be suitable to the topic my IMP is about to ensure that the user gets exactly what they want from the IMP and that It does not stray from the topic.'
'Lastly I will also add effects to my IMP in order to make it a lot more interesting such as text that glows, animations etc.'
New skills table reference number
14
Thursday, 17 November 2011
Wednesday, 16 November 2011
Creating a custom cursor in Flash
Development work covered during lesson
In order to make my IMP more interesting I decided to create a custom cursor in Flash, which could be used within my IMP. Firstly I created the cursor in paint by using the shape tool to draw a star shape. The star shape was filled with black and I decided to keep this as I thought it was a good colour to use in my IMP because it would go well with the background and the overal theme. After I had created my custom cursor in Paint I then opened Adobe Flash Action Script 3.0 and clicked the 'file' tab, then 'new, which opened a new document. After I had done this I copied my custom cursor from paint by clicking CTRL + C and then pasted onto the new document within Flash by right clicking and then selecting paste. I also made the cursor a bit smaller by right clicking again, selecting the 'free transform tool' and then dragging the edges to make the shape as big or small as I wanted it.
After I had done this I found a website called http://www.ilike2flash.com/ which had a tutorial on how to create custom cursors in Flash, which I used to help me with creating the custom cursor. Firstly I selected the 'selection tool (V) to highlight my custom cursor on the stage and then pressed F8 to convert it to a symbol. A box then came up where I had to give the symbol a name so I called it 'custom cursor', selected 'movie clip' from the drop down box and pressed 'ok'. The next thing that I had to do was give it an instance name because this is what allows the cursor to work correctly when I code it. The instance name I gave the cursor was 'customcursor_mc' because this is the name I was going to use in the code so therefore it needed to be the same. After this I created a new layer on the timeline and called it 'Actions', then right clicked on the first frame of this layer and selected 'actions'. This then opened a blank box and I copied the code in step 6 of the custom cursor tutorial and pasted it into it. Lastly I clicked CTRL + Enter to test the cursor and it was working correctly.
How the development work fitted into the client brief
The development work fitted into the client brief because I mentioned in my brief that I wanted to add effects to my IMP in order to make it more interesting and that I was going to create a well designed front end that mirrors the theme of the films and the pictures. It was important that I did a cursor which was somewhat related to the topic in order to carry the theme throughout the IMP. Below is the section of the client brief this development work fitted into:
'I may also use sound effects in order to help portray the message of my IMP and give the reader a better understanding of what my IMP is about. Lastly I will also add effects to my IMP in order to make it a lot more interesting such as text that glows, animations etc. I will make my own custom cursor, which will make my IMP a lot more interesting for the user.'
New skills table reference number
13
In order to make my IMP more interesting I decided to create a custom cursor in Flash, which could be used within my IMP. Firstly I created the cursor in paint by using the shape tool to draw a star shape. The star shape was filled with black and I decided to keep this as I thought it was a good colour to use in my IMP because it would go well with the background and the overal theme. After I had created my custom cursor in Paint I then opened Adobe Flash Action Script 3.0 and clicked the 'file' tab, then 'new, which opened a new document. After I had done this I copied my custom cursor from paint by clicking CTRL + C and then pasted onto the new document within Flash by right clicking and then selecting paste. I also made the cursor a bit smaller by right clicking again, selecting the 'free transform tool' and then dragging the edges to make the shape as big or small as I wanted it.
After I had done this I found a website called http://www.ilike2flash.com/ which had a tutorial on how to create custom cursors in Flash, which I used to help me with creating the custom cursor. Firstly I selected the 'selection tool (V) to highlight my custom cursor on the stage and then pressed F8 to convert it to a symbol. A box then came up where I had to give the symbol a name so I called it 'custom cursor', selected 'movie clip' from the drop down box and pressed 'ok'. The next thing that I had to do was give it an instance name because this is what allows the cursor to work correctly when I code it. The instance name I gave the cursor was 'customcursor_mc' because this is the name I was going to use in the code so therefore it needed to be the same. After this I created a new layer on the timeline and called it 'Actions', then right clicked on the first frame of this layer and selected 'actions'. This then opened a blank box and I copied the code in step 6 of the custom cursor tutorial and pasted it into it. Lastly I clicked CTRL + Enter to test the cursor and it was working correctly.
How the development work fitted into the client brief
The development work fitted into the client brief because I mentioned in my brief that I wanted to add effects to my IMP in order to make it more interesting and that I was going to create a well designed front end that mirrors the theme of the films and the pictures. It was important that I did a cursor which was somewhat related to the topic in order to carry the theme throughout the IMP. Below is the section of the client brief this development work fitted into:
'I may also use sound effects in order to help portray the message of my IMP and give the reader a better understanding of what my IMP is about. Lastly I will also add effects to my IMP in order to make it a lot more interesting such as text that glows, animations etc. I will make my own custom cursor, which will make my IMP a lot more interesting for the user.'
New skills table reference number
13
Monday, 14 November 2011
Development testing
Development work covered during lesson
In order to see whether my IMP worked the way I wanted it to and whether there were any faults I decided to carry out development testing. This is where you test different aspects of the IMP as if the user was using it and recored it on a table showing the test being carried out, expected result, actual result, problem and the action taken to fix the problem. I carried this out whilst I was creating my IMP rather than at the end because I wanted to make sure that when I finished my IMP there were as few faults as possible, however I also did one final check after I had finished my IMP to ensure everything was working correctly. It is extremely important to do this as it ensures that I have found the faults within my IMP and fixed them to ensure that when the user uses my IMP it will run smoothly and efficiently. In order to carry out development testing I first had to open the programme that I created my IMP in, which was Adobe Flash. When this opened I selected Action Script 3.0 as this was the software I used when creating my IMP. Next I opened my IMP by going to 'File', 'Open', selecting the 'forms' document from H:\Applied ICT\Unit 11\E block video and then opening it in Flash. Once I had done this the first aspect that I decided to test of my IMP was a test to see if the 'Play options' button on the Main menu worked correctly. I opened my IMP to test it by clicking CTRL + Enter, which opened the IMP in a seperate screen and then I clicked the 'Play options' button. When clicked the 'Play options' button should lead to another screen where there are different options on how to view the film, however instead the button went to the 'interactive features' form. In order to find out what was wrong I first went onto the first frame of the code layer and selected 'actions', which then opened a large box with the codes in. I then looked at the 'Play options' button code and found that 'frmInteractivefeatures' was in place where 'frmPlayoptions' should be as this is the form where I want the button to lead to. Therefore In order to solve this problem I simply changed the code for the Play options button so that 'frmPlayoptions' was visible instead of 'frmInteractivefeatures'. After this I then tested the button again to see if it was working and it did what it was meant to do.
The next test I did was to see whether the 'play film' button worked correctly. I clicked CTRL + Enter to open the IMP and navigated myself to the 'Play options' screen and clicked the 'Play film' button. This button was meant to play the full film, however instead it did nothing. Again I looked at the code and found that in the section related to this button the file name of where the button should lead to was 'OpenMovie' when the actual file name didn't have any capital letters in. I didn't think this would of had that much affect on the button however when I removed the capital letters and tested the IMP the button worked the way I wanted it to. I also did a test to see if the interactive features button was working correctly. I opened the IMP by clicking CTRL + Enter as I had done with all of the other tests and then I clicked the 'Interactivefeatures' button on the main menu to see if it was working. When I clicked the button it should have led to the interactive form however instead it stayed on the main screen and didnt go anywhere. It was important that I fixed this because the interactive features make up at least half of my IMP and if the user was not able to get to them then my IMP wouldnt be very helpful. I went onto the code by right clicking the first frame of the code layer and then selecting actions. I then found the section of the code that related to the interactive features button and I found that there was a missing bracket underneath the first section so I decided to put a bracket there to see if that was preventing the button from working. I then tested the button by opening the IMP on a seperate screen (CTRL + Enter) and then clicking the 'interactive features' button on the main menu. When I clicked the button it went onto the Interactive features forms and therefore it was the missing bracket that made the button not work correctly.
Another test that I decided to do was to see if the scratch game revealed a picture when the mouse hovers and clicks over the box. In order to test the scratch game I first needed to open the document as the game was not on the same document as the forms. I did this by going to the 'file' tab, selecting 'open', finding the scratch game document which was located in H:\Applied ICT\Unit 11\E block video and then clicked 'open'. I then tested the scratch game by clicking CTRL + Enter and then holding down the left mouse click and hovering it over the coloured box. Instead of revealing a picture like it should have done nothing happened and the coloured box did not slowly disappear. In order to fix this I found that I had forgot to convert the picture to a symbol so I clicked the picture and pressed F8 and named it 'maskedbg_mc' as this was the name I needed to give it in order to work correctly. When I tested the scratch game again it worked the way it was supposed to and the coloured box gradually disappeared. As well as that I also decided to test the ICT quiz to see whether it came up with 'correct' or 'incorrect' when it was supposed to. I tested this by opening the quiz in Flash by going to 'file', 'open' and then selecting the ICT quiz document located in H:\Applied ICT\Unit 11\E block video. Once the document had opened in Flash I opened it in a seperate screen by clicking CTRL + Enter and then I was able to test the quiz to see whether it was working correctly. When the first question appeared I clicked the first answer as I knew this was correct, however it came up that the answer was incorrect and therefore this was a major error in the game. I knew that this problem was probably due to an error in the code and therefore I went onto the code layer, looked at question 1 and I found that I had put answer (2) as the correct answer so I changed it to '(0) as this was the correct answer. I then tested the ICT quiz again by clicking CTRL + Enter, then selecting the correct answer and It came up with 'correct', which therefore meant that I had fixed the problem.
Whilst creating my IMP there were also many other tests that I carried out to ensure that there were as few problems as possible and to see where I could improve on. I decided to carry out another test on the ICT quiz to make sure it was the best possible. Once I had opened the quiz up in Adobe Flash Action script 3.0 I clicked CTRL + Enter to open it up on a new screen where I was able to click the buttons and see if it was working as it should. I decided to have another look at the questions to see that all of the possible answers were sufficient and that there was only one correct answer for each question. The only fault that I could find was in question 3 where I didn't think that the answers were sufficient so I decided to look on the internet to try and find a better answer. After I had done my research I decided to swap the answer 'operating system' to 'Microsoft Excel' as this was more relevant to the question. I also did another test on the ICT quiz which was to make sure the title was in the correct position and could be seen by the user. I tested this by clicking CTRL + Enter and then I looked on the screen that opened to see whether the title was in the correct place. When I did this I was unable to find the title on the screen which is bad because the user wont know what quiz it is and therefore it may not have the information they are looking for. I fixed this problem by clicking the text box and moving it inside the canvas so that when the quiz opened the title would also be on the screen.
As well as that I also tested the 'scene 2' button on the 'scene selection' page to ensure that it worked the way it was supposed to. Firstly I opened the 'form' document in Flash again and then clicked CTRL + Enter so that I was able to use the IMP. I then navigated my way to the scene selection screen which meant I was also testing the other buttons in the pathway to ensure they were working at the same time. Once I reached the scene selection screen I clicked the 'scene 2' button and I expected it to open up scene 2 of the film. However the actual result that I got was that it didn't open anything and instead it just stayed on the same screen. To fix this problem I looked on the code and found that I had forgot to write 'swf' beside the file name so therefore I added it, then tested the button again and it worked correctly. In addition to that I also decided to test my drag and drop button to see whether it was working the way it should. The result I expected to see when I tested the drag and drop puzzle was that the when I clicked the puzzle pieces and dragged them across the screen they should have moved, however the actual result I got was that one of the four puzzle pieces did not move and the other three other pieces did move. When I was trying to figure out why the puzzle pieces wasn't moving I found that I had forgot to convert that particular image into a symbol and therefore in order to fix this problem I selected the puzzle piece, clicked F8, gave it an appropriate name and then it worked correctly. The last test that I carried out whilst creating my IMP was the gallery. Once I had opened the gallery up in Adobe Flash Action Script 3.0 I clicked CTRL + Enter and tested it to see whether it was working the way it should be. The result I expected to happen was that when I clicked each thumbnail at the bottom the corresponding image should appear above. However the actual result I got was that when I clicked one of the thumbnails at the bottom the correct image did not appear above. I fixed this problem by looking at the code on the actions layer to see what was wrong and then I changed ‘button1’ to ‘btn1’ as this is what the actual button was named.
How the development work fitted into the client brief
I stated in paragraph F of my client brief that I would carry out development testing whilst creating my IMP to ensure that It was working correctly and there were not problems that the user would come across when using it. It is very important that I carried out development testing because otherwise I wouldn't have noticed a lot of the faults within my IMP and then the user would come across many problems when using the IMP, which could prevent them getting the best out of the IMP. Below is part of paragraph F where I discussed development testing:
'I will also carry out development testing throughout the creation of my IMP to ensure that everything is working correctly and that there are no faults that the user will come across when using the IMP to ensure that the IMP appears professional.'
New skills table reference number
12
In order to see whether my IMP worked the way I wanted it to and whether there were any faults I decided to carry out development testing. This is where you test different aspects of the IMP as if the user was using it and recored it on a table showing the test being carried out, expected result, actual result, problem and the action taken to fix the problem. I carried this out whilst I was creating my IMP rather than at the end because I wanted to make sure that when I finished my IMP there were as few faults as possible, however I also did one final check after I had finished my IMP to ensure everything was working correctly. It is extremely important to do this as it ensures that I have found the faults within my IMP and fixed them to ensure that when the user uses my IMP it will run smoothly and efficiently. In order to carry out development testing I first had to open the programme that I created my IMP in, which was Adobe Flash. When this opened I selected Action Script 3.0 as this was the software I used when creating my IMP. Next I opened my IMP by going to 'File', 'Open', selecting the 'forms' document from H:\Applied ICT\Unit 11\E block video and then opening it in Flash. Once I had done this the first aspect that I decided to test of my IMP was a test to see if the 'Play options' button on the Main menu worked correctly. I opened my IMP to test it by clicking CTRL + Enter, which opened the IMP in a seperate screen and then I clicked the 'Play options' button. When clicked the 'Play options' button should lead to another screen where there are different options on how to view the film, however instead the button went to the 'interactive features' form. In order to find out what was wrong I first went onto the first frame of the code layer and selected 'actions', which then opened a large box with the codes in. I then looked at the 'Play options' button code and found that 'frmInteractivefeatures' was in place where 'frmPlayoptions' should be as this is the form where I want the button to lead to. Therefore In order to solve this problem I simply changed the code for the Play options button so that 'frmPlayoptions' was visible instead of 'frmInteractivefeatures'. After this I then tested the button again to see if it was working and it did what it was meant to do.
The next test I did was to see whether the 'play film' button worked correctly. I clicked CTRL + Enter to open the IMP and navigated myself to the 'Play options' screen and clicked the 'Play film' button. This button was meant to play the full film, however instead it did nothing. Again I looked at the code and found that in the section related to this button the file name of where the button should lead to was 'OpenMovie' when the actual file name didn't have any capital letters in. I didn't think this would of had that much affect on the button however when I removed the capital letters and tested the IMP the button worked the way I wanted it to. I also did a test to see if the interactive features button was working correctly. I opened the IMP by clicking CTRL + Enter as I had done with all of the other tests and then I clicked the 'Interactivefeatures' button on the main menu to see if it was working. When I clicked the button it should have led to the interactive form however instead it stayed on the main screen and didnt go anywhere. It was important that I fixed this because the interactive features make up at least half of my IMP and if the user was not able to get to them then my IMP wouldnt be very helpful. I went onto the code by right clicking the first frame of the code layer and then selecting actions. I then found the section of the code that related to the interactive features button and I found that there was a missing bracket underneath the first section so I decided to put a bracket there to see if that was preventing the button from working. I then tested the button by opening the IMP on a seperate screen (CTRL + Enter) and then clicking the 'interactive features' button on the main menu. When I clicked the button it went onto the Interactive features forms and therefore it was the missing bracket that made the button not work correctly.
Another test that I decided to do was to see if the scratch game revealed a picture when the mouse hovers and clicks over the box. In order to test the scratch game I first needed to open the document as the game was not on the same document as the forms. I did this by going to the 'file' tab, selecting 'open', finding the scratch game document which was located in H:\Applied ICT\Unit 11\E block video and then clicked 'open'. I then tested the scratch game by clicking CTRL + Enter and then holding down the left mouse click and hovering it over the coloured box. Instead of revealing a picture like it should have done nothing happened and the coloured box did not slowly disappear. In order to fix this I found that I had forgot to convert the picture to a symbol so I clicked the picture and pressed F8 and named it 'maskedbg_mc' as this was the name I needed to give it in order to work correctly. When I tested the scratch game again it worked the way it was supposed to and the coloured box gradually disappeared. As well as that I also decided to test the ICT quiz to see whether it came up with 'correct' or 'incorrect' when it was supposed to. I tested this by opening the quiz in Flash by going to 'file', 'open' and then selecting the ICT quiz document located in H:\Applied ICT\Unit 11\E block video. Once the document had opened in Flash I opened it in a seperate screen by clicking CTRL + Enter and then I was able to test the quiz to see whether it was working correctly. When the first question appeared I clicked the first answer as I knew this was correct, however it came up that the answer was incorrect and therefore this was a major error in the game. I knew that this problem was probably due to an error in the code and therefore I went onto the code layer, looked at question 1 and I found that I had put answer (2) as the correct answer so I changed it to '(0) as this was the correct answer. I then tested the ICT quiz again by clicking CTRL + Enter, then selecting the correct answer and It came up with 'correct', which therefore meant that I had fixed the problem.
Whilst creating my IMP there were also many other tests that I carried out to ensure that there were as few problems as possible and to see where I could improve on. I decided to carry out another test on the ICT quiz to make sure it was the best possible. Once I had opened the quiz up in Adobe Flash Action script 3.0 I clicked CTRL + Enter to open it up on a new screen where I was able to click the buttons and see if it was working as it should. I decided to have another look at the questions to see that all of the possible answers were sufficient and that there was only one correct answer for each question. The only fault that I could find was in question 3 where I didn't think that the answers were sufficient so I decided to look on the internet to try and find a better answer. After I had done my research I decided to swap the answer 'operating system' to 'Microsoft Excel' as this was more relevant to the question. I also did another test on the ICT quiz which was to make sure the title was in the correct position and could be seen by the user. I tested this by clicking CTRL + Enter and then I looked on the screen that opened to see whether the title was in the correct place. When I did this I was unable to find the title on the screen which is bad because the user wont know what quiz it is and therefore it may not have the information they are looking for. I fixed this problem by clicking the text box and moving it inside the canvas so that when the quiz opened the title would also be on the screen.
As well as that I also tested the 'scene 2' button on the 'scene selection' page to ensure that it worked the way it was supposed to. Firstly I opened the 'form' document in Flash again and then clicked CTRL + Enter so that I was able to use the IMP. I then navigated my way to the scene selection screen which meant I was also testing the other buttons in the pathway to ensure they were working at the same time. Once I reached the scene selection screen I clicked the 'scene 2' button and I expected it to open up scene 2 of the film. However the actual result that I got was that it didn't open anything and instead it just stayed on the same screen. To fix this problem I looked on the code and found that I had forgot to write 'swf' beside the file name so therefore I added it, then tested the button again and it worked correctly. In addition to that I also decided to test my drag and drop button to see whether it was working the way it should. The result I expected to see when I tested the drag and drop puzzle was that the when I clicked the puzzle pieces and dragged them across the screen they should have moved, however the actual result I got was that one of the four puzzle pieces did not move and the other three other pieces did move. When I was trying to figure out why the puzzle pieces wasn't moving I found that I had forgot to convert that particular image into a symbol and therefore in order to fix this problem I selected the puzzle piece, clicked F8, gave it an appropriate name and then it worked correctly. The last test that I carried out whilst creating my IMP was the gallery. Once I had opened the gallery up in Adobe Flash Action Script 3.0 I clicked CTRL + Enter and tested it to see whether it was working the way it should be. The result I expected to happen was that when I clicked each thumbnail at the bottom the corresponding image should appear above. However the actual result I got was that when I clicked one of the thumbnails at the bottom the correct image did not appear above. I fixed this problem by looking at the code on the actions layer to see what was wrong and then I changed ‘button1’ to ‘btn1’ as this is what the actual button was named.
How the development work fitted into the client brief
I stated in paragraph F of my client brief that I would carry out development testing whilst creating my IMP to ensure that It was working correctly and there were not problems that the user would come across when using it. It is very important that I carried out development testing because otherwise I wouldn't have noticed a lot of the faults within my IMP and then the user would come across many problems when using the IMP, which could prevent them getting the best out of the IMP. Below is part of paragraph F where I discussed development testing:
'I will also carry out development testing throughout the creation of my IMP to ensure that everything is working correctly and that there are no faults that the user will come across when using the IMP to ensure that the IMP appears professional.'
New skills table reference number
12
Tuesday, 25 October 2011
Adding sound to my IMP in Flash
Development work covered during lesson
In order to make my IMP more interactive and enjoyable I decided to add sound to my front end. Firstly I opened Flash and selected Action Script 3.0. I then opened up my front end by going to 'file', 'open' and then I found my document and selected open. Similar to when I linked my forms in my front end we were given a list of codes that we could use to help us create our front end. In order to add sound to my front end I first clicked on the code layer of my front end and then right clicked on the first frame of this layer and selected 'actions'. After this a white box appeared which already had a lot of codes in as I had already inserted codes in order to link the forms within my IMP and make the interactive features work correctly. I then went to the code library that was provided in the shared drive and I copied box 3 as this was the code that was relevant to the task that I was doing. Below is the code that I copied before I changed it to suit my front end:
How the development work fitted into the client brief
The development work fitted into my client brief because introducing sound to my IMP makes it a lot more interesting and attracts the user to continue to explore my IMP. Below is the section of my client brief that the development work fits into:
' In my IMP I am going to try and create a well designed front end that mirrors the theme of the films/pictures by using backgrounds on each screen which are relevant to what my IMP is about and making sure that I provide extra information and advice on my chosen theme in order to extend the value of the message that I am trying to achieve. I may also use sound effects in order to help portray the message of my IMP and give the reader a better understanding of what my IMP is about.'
New skills table reference number
11
In order to make my IMP more interactive and enjoyable I decided to add sound to my front end. Firstly I opened Flash and selected Action Script 3.0. I then opened up my front end by going to 'file', 'open' and then I found my document and selected open. Similar to when I linked my forms in my front end we were given a list of codes that we could use to help us create our front end. In order to add sound to my front end I first clicked on the code layer of my front end and then right clicked on the first frame of this layer and selected 'actions'. After this a white box appeared which already had a lot of codes in as I had already inserted codes in order to link the forms within my IMP and make the interactive features work correctly. I then went to the code library that was provided in the shared drive and I copied box 3 as this was the code that was relevant to the task that I was doing. Below is the code that I copied before I changed it to suit my front end:
var channel:SoundChannel
var snd:Sound = new Sound(new URLRequest("SubMenuMusic.mp3"));
channel = snd.play(1000,3);//1000 ms after start of sound, 3 times
The only change that I needed to make to this code was the 'SubMenuMusic.mp3' section as this is where the mp3 file name that I want to play when the IMP opens goes. Before I could input a name to the code I needed to find a piece of music that I thought was suitable for my front end. I didn't want anything to overpowering however I wanted something that attracted the users attention and made them want to explore the IMP to find out more information. I looked on youtube to see if I could find a good piece of background music which would suit my IMP and in the end I found an instrumental for a song that I liked called 'Starry Eyed' by Ellie Goulding and I thought this was a perfect piece of music to go with my IMP as it wasn't to overpowering. I used Youtube to mp3 converter to convert the file to an mp3 and I named it 'IMPmusic' and saved it in my project folder. Once I had done this I then changed my code so that the mp3 file would work on my IMP. This is what the code looked like after I changed it:
var channel:SoundChannel
var snd:Sound = new Sound(new URLRequest("IMPmusic.mp3"));
channel = snd.play(1000,3);//1000 ms after start of sound, 3 times
After I had inserted and changed the code I tested my IMP by clicking CTRL + enter in order to make sure that I had done the code correctly and that my IMP was working the way I wanted it to.
How the development work fitted into the client brief
The development work fitted into my client brief because introducing sound to my IMP makes it a lot more interesting and attracts the user to continue to explore my IMP. Below is the section of my client brief that the development work fits into:
' In my IMP I am going to try and create a well designed front end that mirrors the theme of the films/pictures by using backgrounds on each screen which are relevant to what my IMP is about and making sure that I provide extra information and advice on my chosen theme in order to extend the value of the message that I am trying to achieve. I may also use sound effects in order to help portray the message of my IMP and give the reader a better understanding of what my IMP is about.'
New skills table reference number
11
Monday, 24 October 2011
Creating a quiz in Flash
Development work covered during lesson
Today I created a quiz using Flash. Firstly, I opened up Flash CS4 and then selected Action Script 3.0. In order to create our quiz we were given a quiz template that we could use as the basis for our quiz. I opened this quiz by going to file, open and then searching through the database to find it. The quiz template was located in V:\0APPLIED ICT\unit 11 resources\Templates and Guides\Hierarchical Template\Quiz and once I had found it I clicked open which then opened up the quiz in Flash. After I had opened the quiz I had to change it in order to suit my IMP. Firstly, I went onto the code layer towards the bottom of the screen, right clicked the first frame and then selected Actions. This then brought up a large box with the codes in which are used to make the quiz work correctly. In the code there was a section that said 'var questionAndAnswers =' and underneath this line there were already some questions and the potential answers in green however these were not suitable for my topic and therefore I changed them in order to make it more relevant to the topic my IMP is about. I decided to do an ICT quiz first as I thought this was relevant to my topic as the ICT classrooms are in the E block. The first question that I decided to ask was 'How much data can DVD disks hold?' and the three potential answers that I wrote beside it was "4.7 GB", "5 GB" and "6.8 GB". In order for the user to click and answer and see whether its right I needed to put beside it which answer was correct and therefore I wrote '0]' in brackets beside it as this was the answer that corresponded. This ensures that when the user clicks an answer it will come up on the screen whether they have got it correct or incorrect, which makes the IMP more interactive. The next question I asked was "How many kilobites are there in one megabyte?" and beside it I wrote the potential answers that the user could chose "10", "100" and "1000" with 2 being the correct answer. Therefore if the user selects 10 as there answer then it will come us as incorrect whereas if the user selects 1000 then it will come up as correct. The last question that I put on this quiz was "Whis of these is an example of software?" and the three potential answers that I gave were "Printer", "Monitor" and "Microsoft excel" with the correct answer being number 1. It is really important that these questions are related to the topic that my IMP is about because it ensures that the user is learning the information that want to know rather than just playing a game for fun.
In addition to that I also decided to change the colour of the background of the quiz to something that I though suited my IMP a lot better. In the quiz template we were given the main background was bright, light green, which I didnt't think looked that good and the question and answer section was bright yellow. First of all I went on to the code layer and on the right hand side of the screen underneath properties there was a box that I clicked on in order to change the colour. Once I had clicked this box another larger box came up with a selection of different colours to choose from and I decided to choose red as I thought this stood out and was quite an attractive colour. As well as that I then clicked on the questions and answers section of the quiz and on the right hand side of the screen another box appeared which allowed me to change to colour of this part. I decided to change it to white as I thought this wouldn't overpower the questions and answers and that it contrasted with the red very well. Lastly I added a title to my quiz so that the user would know exactly what the quiz is. I did this by going to the panel on the right hand side of the page and selecting the text tool. Once I had done this I drew a box at the top of the quiz where I wanted the title to be and I wrote 'ICT quiz'. I then made the text a lot bigger by going onto the properties tab and chnaging the font size to 30. Finally once my quiz was finished I published it by going to file, and then clicking publish settings which meant that the user would be able to open up the quiz and it would work in my IMP.
As well as that I also created another quiz for my IMP as I wanted to ensure that I included as much information as possible that would help the user find out what they wanted to. The next quiz I created was a maths quiz as the maths rooms are situated in E block and therefore I thought this would be appropriate for my IMP. Below are the questions that I put into the code and beside are the choices of answers along with number of answer that is correct:
["What is 5 x 8 ?", "28", "134", "40", 2],
["What is 14 x 14?", "132", "144", "196", 1],
["What is 6 x 9?", "21", "54", "88", 1]
As you can see from the above it shows that the first question that I asked was 'What is 5 x 8' and I thought this was appropriate as it is a maths related question, which is relevant to the theme of my IMP as the maths classrooms are located in the e block. The possible answers that I gave to this question were '28', '134' and '40' and beside it I wrote '2' which shows that '40' is the correct answer and therefore when the user clicks '40' as the answer it will come up with 'correct' and when they click any other answer it will come up with 'incorrect'. The next question that I asked was 'What is 14 x 14' with the possible answers as '132', '144' and '196' and beside I wrote that '1' is the correct answer which corresponds to '144'. The last question that I asked was 'What is 6 x 9' with the possible answers '21', '54' and '88' and then beside it I wrote that the correct answer was '1' which corresponds to '54'.
In addition to this I also changed the colour of the quiz as I didn't want it to be the same colour as the ICT quiz otherwise it would be quite boring. In order to change the colour i clicked the 'code' layer and clicked the properties tab on the right hand side of the page and a small box appeared underneath where I was able to change the background colour of my quiz. I clicked the box and I decided to change the background of my ICT quiz to a pink/purple colour as I thought this looked really attractive and suited my quiz and IMP perfectly. As well as that I also changed the colour of te question and answer section to white as I didn't want the two colours to clash and over power the text and therefore this was the ideal contrast. Lastly I also added a title as I did with the ICT quiz so that the user knows exactly what it is. I added a title by going to the 'Text' tool on the right hand side of the page and the I drew a box at the top of the quiz and wrote 'Maths quiz' inside it. I also moved it to make sure that it was in the centre of the screen at the top and made it a little bigger to ensure that It was an appropriate size.
How the development work fitted into the client brief
Creating a quiz in my IMP fits in my client brief as it it makes my IMP a lot more interactive and gives the user something else to do in order to learn about the topic rather than just watching a video and looking at pictures. Below is part of bullet point E of my client brief which my development work fits in to:
' Another interactive feature that I will add to my IMP is a quiz. I am going to add two quizzes to my IMP, a maths and ICT quiz as these are suitable for my IMP as they are relevant to the theme as the ICT and Maths classrooms are located in the E block. Quiz’s are important as they will make my IMP a lot more interactive and will allow the user to get involved and have fun, along with learning new information.'
New skills table reference number
10
Today I created a quiz using Flash. Firstly, I opened up Flash CS4 and then selected Action Script 3.0. In order to create our quiz we were given a quiz template that we could use as the basis for our quiz. I opened this quiz by going to file, open and then searching through the database to find it. The quiz template was located in V:\0APPLIED ICT\unit 11 resources\Templates and Guides\Hierarchical Template\Quiz and once I had found it I clicked open which then opened up the quiz in Flash. After I had opened the quiz I had to change it in order to suit my IMP. Firstly, I went onto the code layer towards the bottom of the screen, right clicked the first frame and then selected Actions. This then brought up a large box with the codes in which are used to make the quiz work correctly. In the code there was a section that said 'var questionAndAnswers =' and underneath this line there were already some questions and the potential answers in green however these were not suitable for my topic and therefore I changed them in order to make it more relevant to the topic my IMP is about. I decided to do an ICT quiz first as I thought this was relevant to my topic as the ICT classrooms are in the E block. The first question that I decided to ask was 'How much data can DVD disks hold?' and the three potential answers that I wrote beside it was "4.7 GB", "5 GB" and "6.8 GB". In order for the user to click and answer and see whether its right I needed to put beside it which answer was correct and therefore I wrote '0]' in brackets beside it as this was the answer that corresponded. This ensures that when the user clicks an answer it will come up on the screen whether they have got it correct or incorrect, which makes the IMP more interactive. The next question I asked was "How many kilobites are there in one megabyte?" and beside it I wrote the potential answers that the user could chose "10", "100" and "1000" with 2 being the correct answer. Therefore if the user selects 10 as there answer then it will come us as incorrect whereas if the user selects 1000 then it will come up as correct. The last question that I put on this quiz was "Whis of these is an example of software?" and the three potential answers that I gave were "Printer", "Monitor" and "Microsoft excel" with the correct answer being number 1. It is really important that these questions are related to the topic that my IMP is about because it ensures that the user is learning the information that want to know rather than just playing a game for fun.
In addition to that I also decided to change the colour of the background of the quiz to something that I though suited my IMP a lot better. In the quiz template we were given the main background was bright, light green, which I didnt't think looked that good and the question and answer section was bright yellow. First of all I went on to the code layer and on the right hand side of the screen underneath properties there was a box that I clicked on in order to change the colour. Once I had clicked this box another larger box came up with a selection of different colours to choose from and I decided to choose red as I thought this stood out and was quite an attractive colour. As well as that I then clicked on the questions and answers section of the quiz and on the right hand side of the screen another box appeared which allowed me to change to colour of this part. I decided to change it to white as I thought this wouldn't overpower the questions and answers and that it contrasted with the red very well. Lastly I added a title to my quiz so that the user would know exactly what the quiz is. I did this by going to the panel on the right hand side of the page and selecting the text tool. Once I had done this I drew a box at the top of the quiz where I wanted the title to be and I wrote 'ICT quiz'. I then made the text a lot bigger by going onto the properties tab and chnaging the font size to 30. Finally once my quiz was finished I published it by going to file, and then clicking publish settings which meant that the user would be able to open up the quiz and it would work in my IMP.
As well as that I also created another quiz for my IMP as I wanted to ensure that I included as much information as possible that would help the user find out what they wanted to. The next quiz I created was a maths quiz as the maths rooms are situated in E block and therefore I thought this would be appropriate for my IMP. Below are the questions that I put into the code and beside are the choices of answers along with number of answer that is correct:
["What is 5 x 8 ?", "28", "134", "40", 2],
["What is 14 x 14?", "132", "144", "196", 1],
["What is 6 x 9?", "21", "54", "88", 1]
As you can see from the above it shows that the first question that I asked was 'What is 5 x 8' and I thought this was appropriate as it is a maths related question, which is relevant to the theme of my IMP as the maths classrooms are located in the e block. The possible answers that I gave to this question were '28', '134' and '40' and beside it I wrote '2' which shows that '40' is the correct answer and therefore when the user clicks '40' as the answer it will come up with 'correct' and when they click any other answer it will come up with 'incorrect'. The next question that I asked was 'What is 14 x 14' with the possible answers as '132', '144' and '196' and beside I wrote that '1' is the correct answer which corresponds to '144'. The last question that I asked was 'What is 6 x 9' with the possible answers '21', '54' and '88' and then beside it I wrote that the correct answer was '1' which corresponds to '54'.
In addition to this I also changed the colour of the quiz as I didn't want it to be the same colour as the ICT quiz otherwise it would be quite boring. In order to change the colour i clicked the 'code' layer and clicked the properties tab on the right hand side of the page and a small box appeared underneath where I was able to change the background colour of my quiz. I clicked the box and I decided to change the background of my ICT quiz to a pink/purple colour as I thought this looked really attractive and suited my quiz and IMP perfectly. As well as that I also changed the colour of te question and answer section to white as I didn't want the two colours to clash and over power the text and therefore this was the ideal contrast. Lastly I also added a title as I did with the ICT quiz so that the user knows exactly what it is. I added a title by going to the 'Text' tool on the right hand side of the page and the I drew a box at the top of the quiz and wrote 'Maths quiz' inside it. I also moved it to make sure that it was in the centre of the screen at the top and made it a little bigger to ensure that It was an appropriate size.
How the development work fitted into the client brief
Creating a quiz in my IMP fits in my client brief as it it makes my IMP a lot more interactive and gives the user something else to do in order to learn about the topic rather than just watching a video and looking at pictures. Below is part of bullet point E of my client brief which my development work fits in to:
' Another interactive feature that I will add to my IMP is a quiz. I am going to add two quizzes to my IMP, a maths and ICT quiz as these are suitable for my IMP as they are relevant to the theme as the ICT and Maths classrooms are located in the E block. Quiz’s are important as they will make my IMP a lot more interactive and will allow the user to get involved and have fun, along with learning new information.'
New skills table reference number
10
Linking buttons to sub forms and videos
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
Monday, 3 October 2011
Creating a gallery in Flash
Development work covered during lesson
Today I developed my IMP by creating a gallery for our IMP which contained any pictures that we wanted. There was no guidelines on how to make the gallery and therefore I had to use my initiative and work it out for myself however a pre made gallery was made available to use as the starting point for the our own gallery. Firstly I opened Flash, then I made a new document by clicking new on the file tab and then I selected Action Script 3.0 as this was the software that was most suitable for creating a gallery. After I had opened a new document I clicked on the file tab which opened a drop down box, then I selected open, clicked browse, found the gallery that I wanted to use as a basis of my gallery which was located in studentshareddrive/0AppliedICT/Unit11. Once the gallery was open I then imported four of the images that I wanted in my gallery from the computer to my library by going to files, import and then import to library for each photo. I remembered how to do this from one of my previous lessons where we created the front end and I had to import all of the background pictures into my library to make it a lot easier to edit and change them. I also found that if you click Ctrl+R then the images were imported directly to stage however for this activity I though it was easier to have the images in my library. Following that I went to the buttons layers and selected the first frame on the timeline and I dragged each of the images from my library to the stage. It was very important that I selected the first frame on the buttons layer because otherwise the images would not work as they are supposed and therefore when each picture is clicked the next picture wouldn't appear, which is how I wanted my gallery to appear. Once all of the photos had been imported to the stage I changed the size of each picture by clicking them individually, selecting the properties tab on the right hand side and setting each picture 114 by 85px as I thought this looked the most appropriate size. I could have also modified them by right clicking each picture, selecting free transform tool and then dragging it to the size I wanted it to be however this would have been a lot less professional as the pictures may not have all been the same size. Next I made sure that all the pictures were aligned correctly at the bottom of the canvas so that my gallery looked as professional as possible. I set the image alignment by selecting Align in the window menu and then selected the option that aligned the pics to the bottom and distributed them horizontal centre however I could have also just clicked Ctrl+K which would have been slightly quicker.
The next step that I had to do was convert each of the thumbnails on the stage to buttons so that when each of the pictures were clicked then it would bring that picture up on the next screen. I converted the images into button symbols by selected the picture and then simply pressing F8 on the keyboard which I knew how to do from when creating my front end. It then opened a window so firstly I set the type to button, then gave each symbol an appropriate name such as btn1 or btn2 and then clicked OK. I did this for all four of the images. Next it was really important to give each of the buttons an appropriate instance name because otherwise they wouldnt work properly when it comes to coding the front end and making the front end interactive. In order to do this I clicked on each button individually, went to the properties panel on the right hand side and then giving them an appropriate name such as btn1, btn 2 and so forth. The next step of making the gallery was to put all of the images that I wanted to view in the gallery. Firstly I switched to the images layer and selected the first frame on the timeline. Next I dragged the image that corresponded to the first thumbnail on the bottom left of the canvas from the library to the stage. Again it was really important that I put the picture in the image layer rather than any other layer because otherwise the images wouldn't show up the way I wanted them to in the gallery. After that I then sized each of the images down to 358 x 268 px as it thought this was the most appropriate size for my gallery. As well as that after I also went back to the timeline, selected the first frame and went to the properties panel in order to set the Frame Labels which I named computerroom, eblocksign1, eblocksign2 and eblocksign3 as these were the names that were most suitable for each of the frames because these were the main pictures that corresponded to each frame. Next I went to the first frame in the actions layer, right clicked and then selected actions which opened up a box. This box already had a code in it as it was pre made gallery so therefore all I had to do was change each of the frame labels to correspond to the frame label that I had named in order for it to work properly. This was the last stage of setting up my gallery and therefore the final thing that I had to do was test that it was working by pressing Ctrl+Enter and clicking the images to make sure everything was working correctly. Although I have finished the main steps of my gallery I may come back later in order to add special effects and make the gallery look a lot more professional and creative.
How the development work fitted into the client brief
The development work fitted into the client brief as the gallery is going to be used to help portray to the user where all of the different classrooms are and the layout of e block a long with the film that is going in my IMP. I also made sure that my gallery was very easy to understand so that the user will get a lot of information out of my IMP. Below is the section of my client brief that the development work I did today fits into:
'The IMP (interactive multimedia product) is trying to portray where all of the classes within E block are located and what each of the classrooms is for. The films and photos that I will be using for my IMP will help my target audience have a better understanding of the layout of the E block as it will help to provide a visual aid to show them where each of the classrooms are and what they are for. The films and photos I use will also be very easy to understand and they need to be suitable to the topic my IMP is about to ensure that the user gets exactly what they want from the IMP and that It does not stray from the topic.'
The gallery also fits into my client brief as it is another feature which makes my IMP a lot more interactive and gets the user more involved which is what I put in my client brief. It also makes the IMP a lot more enjoyable and makes the IMP a lot more interesting. Lastly it also fits into this section of the client brief as I said that I wanted to provide a gallery including pictures of E block as a visual aid for the user:
'The films that I am going to be using for my IMP will also help to show the audience exactly how to get to each classroom after they have entered the E block. In my IMP I am going to provide a gallery where the audience can go onto which shows them pictures of all of the different rooms within E block and all the different facilities that are provided.'
New skills table reference number
7
Today I developed my IMP by creating a gallery for our IMP which contained any pictures that we wanted. There was no guidelines on how to make the gallery and therefore I had to use my initiative and work it out for myself however a pre made gallery was made available to use as the starting point for the our own gallery. Firstly I opened Flash, then I made a new document by clicking new on the file tab and then I selected Action Script 3.0 as this was the software that was most suitable for creating a gallery. After I had opened a new document I clicked on the file tab which opened a drop down box, then I selected open, clicked browse, found the gallery that I wanted to use as a basis of my gallery which was located in studentshareddrive/0AppliedICT/Unit11. Once the gallery was open I then imported four of the images that I wanted in my gallery from the computer to my library by going to files, import and then import to library for each photo. I remembered how to do this from one of my previous lessons where we created the front end and I had to import all of the background pictures into my library to make it a lot easier to edit and change them. I also found that if you click Ctrl+R then the images were imported directly to stage however for this activity I though it was easier to have the images in my library. Following that I went to the buttons layers and selected the first frame on the timeline and I dragged each of the images from my library to the stage. It was very important that I selected the first frame on the buttons layer because otherwise the images would not work as they are supposed and therefore when each picture is clicked the next picture wouldn't appear, which is how I wanted my gallery to appear. Once all of the photos had been imported to the stage I changed the size of each picture by clicking them individually, selecting the properties tab on the right hand side and setting each picture 114 by 85px as I thought this looked the most appropriate size. I could have also modified them by right clicking each picture, selecting free transform tool and then dragging it to the size I wanted it to be however this would have been a lot less professional as the pictures may not have all been the same size. Next I made sure that all the pictures were aligned correctly at the bottom of the canvas so that my gallery looked as professional as possible. I set the image alignment by selecting Align in the window menu and then selected the option that aligned the pics to the bottom and distributed them horizontal centre however I could have also just clicked Ctrl+K which would have been slightly quicker.
The next step that I had to do was convert each of the thumbnails on the stage to buttons so that when each of the pictures were clicked then it would bring that picture up on the next screen. I converted the images into button symbols by selected the picture and then simply pressing F8 on the keyboard which I knew how to do from when creating my front end. It then opened a window so firstly I set the type to button, then gave each symbol an appropriate name such as btn1 or btn2 and then clicked OK. I did this for all four of the images. Next it was really important to give each of the buttons an appropriate instance name because otherwise they wouldnt work properly when it comes to coding the front end and making the front end interactive. In order to do this I clicked on each button individually, went to the properties panel on the right hand side and then giving them an appropriate name such as btn1, btn 2 and so forth. The next step of making the gallery was to put all of the images that I wanted to view in the gallery. Firstly I switched to the images layer and selected the first frame on the timeline. Next I dragged the image that corresponded to the first thumbnail on the bottom left of the canvas from the library to the stage. Again it was really important that I put the picture in the image layer rather than any other layer because otherwise the images wouldn't show up the way I wanted them to in the gallery. After that I then sized each of the images down to 358 x 268 px as it thought this was the most appropriate size for my gallery. As well as that after I also went back to the timeline, selected the first frame and went to the properties panel in order to set the Frame Labels which I named computerroom, eblocksign1, eblocksign2 and eblocksign3 as these were the names that were most suitable for each of the frames because these were the main pictures that corresponded to each frame. Next I went to the first frame in the actions layer, right clicked and then selected actions which opened up a box. This box already had a code in it as it was pre made gallery so therefore all I had to do was change each of the frame labels to correspond to the frame label that I had named in order for it to work properly. This was the last stage of setting up my gallery and therefore the final thing that I had to do was test that it was working by pressing Ctrl+Enter and clicking the images to make sure everything was working correctly. Although I have finished the main steps of my gallery I may come back later in order to add special effects and make the gallery look a lot more professional and creative.
How the development work fitted into the client brief
The development work fitted into the client brief as the gallery is going to be used to help portray to the user where all of the different classrooms are and the layout of e block a long with the film that is going in my IMP. I also made sure that my gallery was very easy to understand so that the user will get a lot of information out of my IMP. Below is the section of my client brief that the development work I did today fits into:
'The IMP (interactive multimedia product) is trying to portray where all of the classes within E block are located and what each of the classrooms is for. The films and photos that I will be using for my IMP will help my target audience have a better understanding of the layout of the E block as it will help to provide a visual aid to show them where each of the classrooms are and what they are for. The films and photos I use will also be very easy to understand and they need to be suitable to the topic my IMP is about to ensure that the user gets exactly what they want from the IMP and that It does not stray from the topic.'
The gallery also fits into my client brief as it is another feature which makes my IMP a lot more interactive and gets the user more involved which is what I put in my client brief. It also makes the IMP a lot more enjoyable and makes the IMP a lot more interesting. Lastly it also fits into this section of the client brief as I said that I wanted to provide a gallery including pictures of E block as a visual aid for the user:
'The films that I am going to be using for my IMP will also help to show the audience exactly how to get to each classroom after they have entered the E block. In my IMP I am going to provide a gallery where the audience can go onto which shows them pictures of all of the different rooms within E block and all the different facilities that are provided.'
New skills table reference number
7
Subscribe to:
Posts (Atom)