Development work covered during lesson
In order to make sure that I was organised when developing my IMP in Flash so that I created it as efficiently as possible I found a tip of www.like2flash.com that allowed me to remove unwanted library. I followed a very basic tutorial in order to carry this out. Firstly, I opened the library panel by clicking CTRL + T and selected the drop down option at the top of the panel. I then selected the 'select unused items' option which highlighted all of the unused library items and then I pressed the delete key to remove them.
How the development work fitted into the client brief
This fits into my client brief as it allowed me to organise my library better so that there were only items that I had included in my IMP in there. This made the project easier to carry out as it took me shorter time to find the items I was looking for and therefore allowed me to be more efficient when creating my IMP.
New skills table reference number
22
Thursday 1 December 2011
Find mouse position in IMP
Development work covered during lesson
On www.ilike2flash.com I found a tutorial for 'find mouse position', which allows the user to immediately find the mouse position on the IMP if the user cant find it. In order to create this I first opened a new Flash AS3 file and then set an appropriate stage size, with the colour #65FF98 from the colour palat as the background. I then selected the text tool with dynamic text and dragged four text boxes near the bottom left of the stage. Next I selected the dynamic text box in turn and gave them the following instance names: xstage_txt, ystage_txt, xmovie_txt and ymovie_txt. I then selected the rectangule tool and dragged the rectangle shape at the centre of the stage area and then converted it to a symbol by clicking F8. I also gave it the instance name 'box_mc'. The stage of creating this effect was to create a new layer on the timeline called 'Actions', selected the first time frame, hit F9 to open up the actions panel and copied the code from the tutorial into the box. Lastly I tested my mouse position by clicking CTRL + Enter, however it did not work as it was supposed to. I tried lots of things in order to sort out this effect, but when I went back on the website I found this was a tutorial where Adobe Flash AS3 was required and I used AS2.
How the development work fitted into the client brief
Although this did not work as I would hope it would have still fitted into the client brief because it was another interactive feature to add to my IMP.
New skills table reference number
21
On www.ilike2flash.com I found a tutorial for 'find mouse position', which allows the user to immediately find the mouse position on the IMP if the user cant find it. In order to create this I first opened a new Flash AS3 file and then set an appropriate stage size, with the colour #65FF98 from the colour palat as the background. I then selected the text tool with dynamic text and dragged four text boxes near the bottom left of the stage. Next I selected the dynamic text box in turn and gave them the following instance names: xstage_txt, ystage_txt, xmovie_txt and ymovie_txt. I then selected the rectangule tool and dragged the rectangle shape at the centre of the stage area and then converted it to a symbol by clicking F8. I also gave it the instance name 'box_mc'. The stage of creating this effect was to create a new layer on the timeline called 'Actions', selected the first time frame, hit F9 to open up the actions panel and copied the code from the tutorial into the box. Lastly I tested my mouse position by clicking CTRL + Enter, however it did not work as it was supposed to. I tried lots of things in order to sort out this effect, but when I went back on the website I found this was a tutorial where Adobe Flash AS3 was required and I used AS2.
Although this did not work as I would hope it would have still fitted into the client brief because it was another interactive feature to add to my IMP.
New skills table reference number
21
Fullscreen button in action script 3
Development work covered during lesson
As one of my other initiative elements I decided to include a full screen option within my IMP.I found a tutorial on www.ilike2flash.com and followed this throughout. First, I created my button on the stage, which I knew how to do in the early production stages of my IMP when I was building the fulls. After I created a button with the words 'Full screen' on it, I then gave it the instance name 'button1' so that it would work on the code. I then inserted a new layer on my timeline called 'Actions', right clicked on the first frame, selected actions and then added the code in the tutorial. I had then completed the tutorial.
How the development work fitted into the client brief
This development work fits into the client brief as in the brief I stated I was going to add many interactive features to make my IMP easier to use and to make it more attractive. Adding a 'full screen' button allows the user to view the IMP in a full screen and therefore have a better view of the content on each screen.
New skills table reference number
20
As one of my other initiative elements I decided to include a full screen option within my IMP.I found a tutorial on www.ilike2flash.com and followed this throughout. First, I created my button on the stage, which I knew how to do in the early production stages of my IMP when I was building the fulls. After I created a button with the words 'Full screen' on it, I then gave it the instance name 'button1' so that it would work on the code. I then inserted a new layer on my timeline called 'Actions', right clicked on the first frame, selected actions and then added the code in the tutorial. I had then completed the tutorial.
How the development work fitted into the client brief
This development work fits into the client brief as in the brief I stated I was going to add many interactive features to make my IMP easier to use and to make it more attractive. Adding a 'full screen' button allows the user to view the IMP in a full screen and therefore have a better view of the content on each screen.
New skills table reference number
20
Friday 18 November 2011
Creating black and white gallery in Flash
Development work covered during lesson
Today I developed my skills by adding a black and white gallery in Flash. I found a tutorial on http://www.ilike2flash.co.uk/ which helped me when making the gallery. Firstly I opened up a new Flash AS3 document with 450 x 300 dimensions as this was size that was suggested as most appropriate for this task. I then created a new folder in the library called 'pictures' and then imported the four pictures I wanted in my galley by selecting the 'File' tab, 'import', 'import to library', finding the photos I wanted to open and then selecting 'Open'. After that I then dragged each or the images individually on to the stage and then arranged and aligned them the way I wanted them to look on the gallery. All of the images that I used in this gallery were the images that I added a border to because I felt these would look the most effective on a black and white gallery. Next, I converted each of the images to a symbol by clicking on them and then pressing F8, giving them an appropriate name, selecting button and then clicking 'Ok'. I also had to give each of the symbols an instance name so that when I added the code the gallery should work as its supposed to. The next step in the tutorial that it said to do was to double click on one of the images to enter the movie clips timeline and then select the 20th frame and insert a key frame (F6). Then I had to right click anywhere between the 1st and 20th frame,select 'insert motion tween', select the first frame, then the image on the stage and then select the adjust colour property and change the saturation value to -100.
After I had completed all of these steps I then inserted a new layer on the timeline called 'Actions' by right clicking and selecting 'insert new layer' and then insert a key frame on the 20th frame by clicking F6. Then I right clicked on the 1st frame and 20th frame, selected 'Actions' and pasted the code from the tutorial on http://www.ilike2flash.com/. I then returned to the main timeline and repeated all of the steps from double clicking on the image up to and including add the code to all of the other images on my gallery. Once I had done this for all of the images I then selected the first frame of the main menu, right clicked, selected 'Actions' and then pasted the second code into the box. To finish off I tested the gallery by clicking CTRL + Enter.
How the development work fitted into the client brief
In my client brief I said that I wanted to add images to my IMP in order to give the user a better understanding of the layout of e block and that I also wanted to add effects to make the IMP more interesting. Below are the sections of the client brief that the development work fitted 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.'
' 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
19
Today I developed my skills by adding a black and white gallery in Flash. I found a tutorial on http://www.ilike2flash.co.uk/ which helped me when making the gallery. Firstly I opened up a new Flash AS3 document with 450 x 300 dimensions as this was size that was suggested as most appropriate for this task. I then created a new folder in the library called 'pictures' and then imported the four pictures I wanted in my galley by selecting the 'File' tab, 'import', 'import to library', finding the photos I wanted to open and then selecting 'Open'. After that I then dragged each or the images individually on to the stage and then arranged and aligned them the way I wanted them to look on the gallery. All of the images that I used in this gallery were the images that I added a border to because I felt these would look the most effective on a black and white gallery. Next, I converted each of the images to a symbol by clicking on them and then pressing F8, giving them an appropriate name, selecting button and then clicking 'Ok'. I also had to give each of the symbols an instance name so that when I added the code the gallery should work as its supposed to. The next step in the tutorial that it said to do was to double click on one of the images to enter the movie clips timeline and then select the 20th frame and insert a key frame (F6). Then I had to right click anywhere between the 1st and 20th frame,select 'insert motion tween', select the first frame, then the image on the stage and then select the adjust colour property and change the saturation value to -100.
After I had completed all of these steps I then inserted a new layer on the timeline called 'Actions' by right clicking and selecting 'insert new layer' and then insert a key frame on the 20th frame by clicking F6. Then I right clicked on the 1st frame and 20th frame, selected 'Actions' and pasted the code from the tutorial on http://www.ilike2flash.com/. I then returned to the main timeline and repeated all of the steps from double clicking on the image up to and including add the code to all of the other images on my gallery. Once I had done this for all of the images I then selected the first frame of the main menu, right clicked, selected 'Actions' and then pasted the second code into the box. To finish off I tested the gallery by clicking CTRL + Enter.
How the development work fitted into the client brief
In my client brief I said that I wanted to add images to my IMP in order to give the user a better understanding of the layout of e block and that I also wanted to add effects to make the IMP more interesting. Below are the sections of the client brief that the development work fitted 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.'
' 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
19
Adding a solid border to images
Development work covered during lesson
Today I developed my skills by adding a border to my images. Firstly I opened up photoshop and then opened up the image I wanted to create a border around by going to the 'file' tab, then I clicked 'Open', found the image I wanted to use which was located in V:\0APPLIED ICT\unit 11 resources\Palmers photos\E_Block_photos and then clicked 'open' in the bottom right corner of the box. After I had opened the image in Photoshop I then selected the rectangular marque tool and drew a rectangular shape around near the edge of the picture, where I wanted the border to be. Once I had done this I then chose 'select', 'Inverse' and then hit the 'delete' key which removedthe section of the picture that was outside of the rectangular shape.Lastly I selected the bucket tool so that I could colour in the border, however I thought that the white border already looked nice and therefore I kept it the same. After I was satisfied with how the picture look I then saved it buy going to 'file', 'save as' and then gave the picture an appropriate name. I then repeated these steps for three more pictures that I wanted to include in my black and white gallery.
How the development work fitted into the client brief
In my client brief I said that I wanted to include image in my IMP in order to give people a better understanding of the layout of the e block. I also said that I was going to add effects to my IMP to make it more interesting and this is what I have done with these images. Below is are the sections of my 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.'
' 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
18
Today I developed my skills by adding a border to my images. Firstly I opened up photoshop and then opened up the image I wanted to create a border around by going to the 'file' tab, then I clicked 'Open', found the image I wanted to use which was located in V:\0APPLIED ICT\unit 11 resources\Palmers photos\E_Block_photos and then clicked 'open' in the bottom right corner of the box. After I had opened the image in Photoshop I then selected the rectangular marque tool and drew a rectangular shape around near the edge of the picture, where I wanted the border to be. Once I had done this I then chose 'select', 'Inverse' and then hit the 'delete' key which removedthe section of the picture that was outside of the rectangular shape.Lastly I selected the bucket tool so that I could colour in the border, however I thought that the white border already looked nice and therefore I kept it the same. After I was satisfied with how the picture look I then saved it buy going to 'file', 'save as' and then gave the picture an appropriate name. I then repeated these steps for three more pictures that I wanted to include in my black and white gallery.
How the development work fitted into the client brief
In my client brief I said that I wanted to include image in my IMP in order to give people a better understanding of the layout of the e block. I also said that I was going to add effects to my IMP to make it more interesting and this is what I have done with these images. Below is are the sections of my 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.'
' 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
18
Thursday 17 November 2011
Adding keyboard controls to my IMP
Development work covered during lesson
Another feature that I decided to add to my IMP was keyboard controls. This is where the user is able to move objects on the IMP by using the keyboard. In order to help me whilst creating this feature I used a tutorial from www.ilike2flash.com which gave me guidelines on what steps to take in Flash. Firstly I opened a new Flash AS3 document and then imported the object I wanted to control by selecting the import tab, then clicking 'import to stage', selecting the image and then clicking 'Open'. Next I converted the symbol into an object by clicking F8, gave it an appropriate name, selected movie clip, clicked 'Ok' and then also gave it the instance name 'Lemon_mc' as this was the name in the code on the tutorial and therefore it needed to be the same in order for it to work with that particular code. However If I wanted I could have chosen a different instance name and then change the name within the code, but this would have taken more time and the outcome would have been exactly the same. After I had done this I clicked on the timeline, right clicked, selected 'Insert new layer' and then called it 'Actions'. I then right clicked on the first frame, selecting 'Actions' and then pasted the code on the tutorial into the box. Lastly I checked that it was working by clicking CTRL + Enter and then using the navigation keys on the keyboard to see whether it moved the object they way I wanted it to.
How the development work fitted into the client brief
The development fits into the client brief because in it I stated that I was to add effects to my IMP in order to make it more fun and interesting for the user. Below is part of section D) which this fits into:
'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
17
Another feature that I decided to add to my IMP was keyboard controls. This is where the user is able to move objects on the IMP by using the keyboard. In order to help me whilst creating this feature I used a tutorial from www.ilike2flash.com which gave me guidelines on what steps to take in Flash. Firstly I opened a new Flash AS3 document and then imported the object I wanted to control by selecting the import tab, then clicking 'import to stage', selecting the image and then clicking 'Open'. Next I converted the symbol into an object by clicking F8, gave it an appropriate name, selected movie clip, clicked 'Ok' and then also gave it the instance name 'Lemon_mc' as this was the name in the code on the tutorial and therefore it needed to be the same in order for it to work with that particular code. However If I wanted I could have chosen a different instance name and then change the name within the code, but this would have taken more time and the outcome would have been exactly the same. After I had done this I clicked on the timeline, right clicked, selected 'Insert new layer' and then called it 'Actions'. I then right clicked on the first frame, selecting 'Actions' and then pasted the code on the tutorial into the box. Lastly I checked that it was working by clicking CTRL + Enter and then using the navigation keys on the keyboard to see whether it moved the object they way I wanted it to.
How the development work fitted into the client brief
The development fits into the client brief because in it I stated that I was to add effects to my IMP in order to make it more fun and interesting for the user. Below is part of section D) which this fits into:
'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
17
Zoom in and out effect on Flash
Development work covered during lesson
Today I created a zoom in and out effect on some pictures within my IMP in Flash. I found a tutorial on www.ilike2flash.com which gave me a basic outline on the steps I needed to follow. Firstly I opened a new Flash AS3 file and then imported a picture onto the stage by selecting 'import', 'import to stage', selected the image and then clicked 'Open'. Next I converted the image into a movie clip by clicking F8, giving the symbol an appropriate name, selecting movie clip, setting the registration point to centre and then clicked 'Ok'. I also changed the instance name of the symbol to 'fish_mc' because this is the name in the code on the tutorial and therefore this needs to be the same in order for the effect to work. After I had done this I created a new layer called 'Actions' by selecting the timeline, right clicking and selecting 'Insert new layer'. Then I clicked F9 to open the actions panel and I pasted the code from the tutorial into the box. In order to make the picture look as clear as possible when zooming in I right clicked on the image in the library, selected properties on the drop down menu and checked the 'smoothing' check box which made the image edges less pixelated. Lastly I tested the movie by clicking CTRL + Enter to ensure everything was working correctly.
How the development work fitted into the client brief
This development work fitted into my client brief because in the brief I stated that I was going to add photos as a visual aid to help the target audience understand the layout of e block better and that I was also going to add effects in order to make it more interesting and easier to use. Below are the sections of the client brief that the development work fitted 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
16
Today I created a zoom in and out effect on some pictures within my IMP in Flash. I found a tutorial on www.ilike2flash.com which gave me a basic outline on the steps I needed to follow. Firstly I opened a new Flash AS3 file and then imported a picture onto the stage by selecting 'import', 'import to stage', selected the image and then clicked 'Open'. Next I converted the image into a movie clip by clicking F8, giving the symbol an appropriate name, selecting movie clip, setting the registration point to centre and then clicked 'Ok'. I also changed the instance name of the symbol to 'fish_mc' because this is the name in the code on the tutorial and therefore this needs to be the same in order for the effect to work. After I had done this I created a new layer called 'Actions' by selecting the timeline, right clicking and selecting 'Insert new layer'. Then I clicked F9 to open the actions panel and I pasted the code from the tutorial into the box. In order to make the picture look as clear as possible when zooming in I right clicked on the image in the library, selected properties on the drop down menu and checked the 'smoothing' check box which made the image edges less pixelated. Lastly I tested the movie by clicking CTRL + Enter to ensure everything was working correctly.
How the development work fitted into the client brief
This development work fitted into my client brief because in the brief I stated that I was going to add photos as a visual aid to help the target audience understand the layout of e block better and that I was also going to add effects in order to make it more interesting and easier to use. Below are the sections of the client brief that the development work fitted 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
16
Displaying the date in Flash
Development work covered during lesson
I decided to add the date to my IMP that automatically updates so that the user would always know what date it is when the used my IMP. I thought this was a good feature to add on my IMP as it helps to show that my IMP is up to date and makes it look more professional. I found another tutorial on www.ilike2flash.com to give me a guideline on how to add this to my IMP. The first step that I did was to open a new Flash AS3 document and I selected the text tool (T) with dynamic text and created a small rectangle shape on the stage below.Furthermore on the properties panel I also had to make sure that I had embedded the Uppercase, Lowercase, Numerals and Punctuation glyph's by selecting the 'Character embedding button'.I then gave my dynamic text the instance name 'the_date' by going on the properties tab and typing it in the box. After this I created a new layer on the timeline by right clicking on the first layer and then clicking 'insert new layer' and I named it 'Actions'. The I opened up the 'Actions' panel by clicking F9 and I pasted the code from the tutorial into the box. Lastly, I checked to see if it was working correctly by clicking CTRL + Enter.
How the development work fitted into the client brief
In my client brief I said that I was going to add effects to make my IMP more interesting and that I was also going to create a well designed front end that mirrors the theme. Below are the sections that this development work fitted 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.'
'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
15
I decided to add the date to my IMP that automatically updates so that the user would always know what date it is when the used my IMP. I thought this was a good feature to add on my IMP as it helps to show that my IMP is up to date and makes it look more professional. I found another tutorial on www.ilike2flash.com to give me a guideline on how to add this to my IMP. The first step that I did was to open a new Flash AS3 document and I selected the text tool (T) with dynamic text and created a small rectangle shape on the stage below.Furthermore on the properties panel I also had to make sure that I had embedded the Uppercase, Lowercase, Numerals and Punctuation glyph's by selecting the 'Character embedding button'.I then gave my dynamic text the instance name 'the_date' by going on the properties tab and typing it in the box. After this I created a new layer on the timeline by right clicking on the first layer and then clicking 'insert new layer' and I named it 'Actions'. The I opened up the 'Actions' panel by clicking F9 and I pasted the code from the tutorial into the box. Lastly, I checked to see if it was working correctly by clicking CTRL + Enter.
How the development work fitted into the client brief
In my client brief I said that I was going to add effects to make my IMP more interesting and that I was also going to create a well designed front end that mirrors the theme. Below are the sections that this development work fitted 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.'
'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
15
Creating an image rollover effect in Flash
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
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
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
Subscribe to:
Posts (Atom)