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

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

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

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

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

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

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

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