Development work covered during lesson
Today we created a scratch game for our IMP. We created this on Flash as with all of the other features of my IMP as it was the most suitable to create the game on. A scratch game is a game in which the user moves the mouse across the screen to reveal a picture underneath and this will be one of the features in my IMP that will make it a lot more interactive and enjoyable. I used a template that I found on www.iliketoflash.com in order to help me with the main steps of creating the scratch game on Flash, however for most of it I had to experiment and use my own initiative to decide what looked the most suitable for my scratch game and how to do certain things in flash. First of all, I opened a new Flash AS3 file and set the file an appropriate stage size, which I did as 400 x 200 as I thought this looked the most suitable. I then selected the rectangle tool and the colour purple and dragged a rectangle shape over the entire stage so that everything was covered. It was really important to make sure that the entire stage was covered otherwise the picture underneath would have shown through and the scratch game would have looked very unprofessional. After this I typed the message 'Have a scratch' on top of the rectangle shape so that the user is aware of what they have to do. I made this writing very big to ensure that it was extremely visible to the user, however I made sure that it looked an appropriate size for the rectangle box.
Next I went to the timeline lock 'layer 1' and inserted a new layer by right clicking and then selecting 'insert new layer'. Following this, I then imported the picture that I wanted to appear under the purple rectangular box by selecting file, import, import to stage and then opening the correct image. Once the picture had been imported I used the free transform tool to make the picture the size that I wanted it to be. I used the free transform tool instead of changing the size by going to properties because I wasn't sure exactly what size would look best and therefore I wanted to use my own initiative in order to make the scratch game look as good as possible. In the end I made the picture slightly bigger than the box as I wanted to make sure that the picture covered the whole canvas and therefore looked professional. The next step I did was I selected the image on the stage and coverted it to a symbol by pressing F8. I then named the image 'Eblocksign', checked the movie clip box and clicked ok. It was important that I left no gaps in the name because otherwise the file wouldn't have worked. After I selected the movie clip and named it I also gave it an appropriate instance name in order to ensure that the file would work correctly. I then inserted another layer, named it 'actions', right clicked the first frame and selected actions. This then brought up a large box with a blank space and I inserted the code that was on the template. This is one of the most important steps when creating my scratch game as it ensures that the game works as it is supposed to and therefore without the code the game wouldn't work. Lastly I tested my scratch card by holding down CTRL and clicking enter and used my mouse to click and drag which slowly revealed the image underneath the box.
How the development work fitted into the client brief
The development work fitted into my client brief because it added another interactive feature into my IMP. Below is the section that my client brief fitted in to:
As well as that my front end must also be interactive in order 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. The scratch that I will include is a game in which the user moves the mouse across the screen to reveal different pictures, which will also make the IMP a lot more interesting.
New skills table reference number
6
Thursday 29 September 2011
Creating Drag and Drop puzzle in Flash
Development work covered during lesson
Today we created a drag and drop puzzle for our IMP in Flash. To begin with we opened up the picture we wanted in Photoshop so that we could edit it, in order to make sure that it was suitable for the Drag and Drop puzzle. After we had imported the picture we cut it up into four main pieces by selecting the cut tool on the left hand side. There was no guidelines or templates that were available for us to use for this section of the activity so therefore I had to use my own initiative when deciding what I was going to do with the picture in order to make it suitable for the Drag + Drop puzzle. I started off by using the cut tool to cut around the top left corner of the picture by clicking the top left hand corner and dragging the box around the section I wanted to cut. I then put the mouse back to the original cursor so that I was able to click the 'edit' tab at the top of the page and then select cut. After I did this the top left corner that I had highlighted disappeared and then I opened a new file in Photoshop by clicking the 'file' tab and then selecting new. This opened up a new photoshop document which I then pasted the first section of my picture on by clicking the 'edit' tab and selecting 'paste'. A small box then appeared in the centre of the page where I had to give a name for the photo, so I gave it an appropriate name 'Topleftcorner'. Lastly, I saved the filed by going to the 'file' tab at the top of the page, clicking save as and then saving it my project folder where all of my other files for my IMP were located. I then had to repeat this process for the other three sections of my picture in order to ensure that I had done everything I needed to do before I could start creating the Drag and Drop puzzle in Flash.
After I had completed editing the picture and I had saved all of the different sections I could then begin the next step of creating my Drag and Drop puzzle. Firstly I opened up Flash and selected the Action Script 3.0 option which was the same application I have used when creating my IMP. Next I had to create the object which I was going to use for my drag + drop puzzle by importing each of the four pictures to the document. I started this by going to the file tab at the top of the page, clicking import, import to stage and then opening the the first picture that I wanted to upload which was 'topleftcorner' and I then repeated this for the other four sections of my picture. When doing this it was very important that I imported the pictures the the correct frame on the correct layer otherwise my puzzle would not have worked properly. I also made sure that all of the pictures were all the correct size by clicking on each individual picture, going to properties and then I set them to 150 by 150 as I thought this was the most suitable size for them. Next I converted all of the four pictures into symbols by clicking F8 and giving them each appropriate names. Furthermore I also had to make sure that the drag down box was selected for each of the pictures to ensure that they would work properly and then I clicked 'OK'. After that I changed the instance name of each of the pictures to ensure that they would work properly. I did this by clicking the picture, going to the properties tab on the right side of the page and then I named the first picture 'burger_mc', the second picture 'burger2_mc' and so on. It is really important to give the pictures these names as it helps to ensure that they work properly and they do everything they are supposed to do. Next on the timeline I inserted a new layer and called it 'actions', and then right clicked on the first frame and clicked 'actions'. I copied the code that was in the drag + drop tutorial and pasted it into the box that appeared. Once I had done this my drag and drop puzzle was completed so I clicked CTRL + Enter in order to test it to see if it was working correctly. Lastly, I added an unload button so that the user could exit the puzzle by going to windows, common libraries and then buttons.
How the development work fitted into the client brief
The drag and drop puzzle fits into my client brief as it makes it a lot more interactive and enjoyable for the user. It also contains an unload button so therefore it helps with the navigation of the IMP. Below is the section of the client brief that it fits into:
'As well as that my front end must also be interactive in order 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. A drag and drop puzzle is a simple game where the user can pick up puzzle pieces using their mouse and then drop them into a box in order to make a picture. This is quite a fun game and will help to make my IMP a lot more exciting and will also help to portray the message of the IMP a lot more effectively.'
New skills table reference number
5
Today we created a drag and drop puzzle for our IMP in Flash. To begin with we opened up the picture we wanted in Photoshop so that we could edit it, in order to make sure that it was suitable for the Drag and Drop puzzle. After we had imported the picture we cut it up into four main pieces by selecting the cut tool on the left hand side. There was no guidelines or templates that were available for us to use for this section of the activity so therefore I had to use my own initiative when deciding what I was going to do with the picture in order to make it suitable for the Drag + Drop puzzle. I started off by using the cut tool to cut around the top left corner of the picture by clicking the top left hand corner and dragging the box around the section I wanted to cut. I then put the mouse back to the original cursor so that I was able to click the 'edit' tab at the top of the page and then select cut. After I did this the top left corner that I had highlighted disappeared and then I opened a new file in Photoshop by clicking the 'file' tab and then selecting new. This opened up a new photoshop document which I then pasted the first section of my picture on by clicking the 'edit' tab and selecting 'paste'. A small box then appeared in the centre of the page where I had to give a name for the photo, so I gave it an appropriate name 'Topleftcorner'. Lastly, I saved the filed by going to the 'file' tab at the top of the page, clicking save as and then saving it my project folder where all of my other files for my IMP were located. I then had to repeat this process for the other three sections of my picture in order to ensure that I had done everything I needed to do before I could start creating the Drag and Drop puzzle in Flash.
After I had completed editing the picture and I had saved all of the different sections I could then begin the next step of creating my Drag and Drop puzzle. Firstly I opened up Flash and selected the Action Script 3.0 option which was the same application I have used when creating my IMP. Next I had to create the object which I was going to use for my drag + drop puzzle by importing each of the four pictures to the document. I started this by going to the file tab at the top of the page, clicking import, import to stage and then opening the the first picture that I wanted to upload which was 'topleftcorner' and I then repeated this for the other four sections of my picture. When doing this it was very important that I imported the pictures the the correct frame on the correct layer otherwise my puzzle would not have worked properly. I also made sure that all of the pictures were all the correct size by clicking on each individual picture, going to properties and then I set them to 150 by 150 as I thought this was the most suitable size for them. Next I converted all of the four pictures into symbols by clicking F8 and giving them each appropriate names. Furthermore I also had to make sure that the drag down box was selected for each of the pictures to ensure that they would work properly and then I clicked 'OK'. After that I changed the instance name of each of the pictures to ensure that they would work properly. I did this by clicking the picture, going to the properties tab on the right side of the page and then I named the first picture 'burger_mc', the second picture 'burger2_mc' and so on. It is really important to give the pictures these names as it helps to ensure that they work properly and they do everything they are supposed to do. Next on the timeline I inserted a new layer and called it 'actions', and then right clicked on the first frame and clicked 'actions'. I copied the code that was in the drag + drop tutorial and pasted it into the box that appeared. Once I had done this my drag and drop puzzle was completed so I clicked CTRL + Enter in order to test it to see if it was working correctly. Lastly, I added an unload button so that the user could exit the puzzle by going to windows, common libraries and then buttons.
How the development work fitted into the client brief
The drag and drop puzzle fits into my client brief as it makes it a lot more interactive and enjoyable for the user. It also contains an unload button so therefore it helps with the navigation of the IMP. Below is the section of the client brief that it fits into:
'As well as that my front end must also be interactive in order 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. A drag and drop puzzle is a simple game where the user can pick up puzzle pieces using their mouse and then drop them into a box in order to make a picture. This is quite a fun game and will help to make my IMP a lot more exciting and will also help to portray the message of the IMP a lot more effectively.'
New skills table reference number
5
Thursday 22 September 2011
Building forms on Flash
Development work covered during lesson
Today we built our forms onto stage. I used a guideline document that was available in the student shared drive to help me know what to do, however the instructions were very brief and didn't cover everything and therefore I had to use my own initiative in order to make the forms that way I wanted them to be. Firstly we opened Adobe Flash and selected Action Script 3.0 as this was the software that we needed to build our forms. Next I looked for the background picture that I wanted to use for my first form which was 'Main menu'. I decided to look on the internet to see if I could find the picture that would best suit my front end, however I could not find anything I liked so I looked in the student shared drive for pictures that were available to use. The picture that I used for my background I found in the E block folder and It was a picture of the E block hallway. I thought this was suitable for my front end as the theme is E block and it was also quite colourful so I thought it would be the best background to use. I then imported this picture by clicking on 'file' in the top left corner and then 'import to stage' in the drop down box. Once I found the picture that I wanted to import I clicked open, which then imported it onto Flash and I changed it to the size I thought was most suitable by right clicking the picture and going to the 'free transform' tool which allowed me to move the image and change it to the size I wanted.
However, soon after this I realised that by using this tool it would make it a lot harder for me to get each form exactly the same size and therefore it wouldn't look very professional. I clicked on the picture and went onto the 'properties' tab on the right hand side of the page and changed the width to 200 and height also to 200 so that I knew exactly what size my picture was, in order to make sure all of my forms were the same size. After I had edited the background I added a button so that the user easily exit the form whenever they wanted to. I did this by going to the 'windows' tab at the top of the page, then common libraries in the drop down box and clicked on buttons. It then provided me with lots of different options of buttons so I decided to choose the 'Buttons Bar Capped' option as it thought it looked the most appropriate for my front end. As well as that I also made the button purple as this is the colour that I had previously used for all of the buttons on the videos within my front end and therefore I decided to follow the theme through in order to make it look more professional. After I had chosen which button I wanted, I decided to use the button as a blueprint so that I would be able to copy the button every time I needed it, which would mean that I wouldn't need to go through the options for every button I create, and it therefore made the process a lot faster and more efficient. In order to do this I opened the 'Library' tab on the right hand side of the page and dragged the button in. I then duplicated the button several times by right clicking and selecting duplicate and then giving each button appropriate names such as 'maintointeractive' and 'maintoplayoptions'. Before I could put these buttons on my front end I had to change the text to display what I wanted it to and I did this by right clicking the button, selecting 'edit' and then typing in the word/s that I wanted. As well as that I also had to change the instance name of every button in order to ensure that it worked correctly and I did this by clicking each of the buttons, then going to the properties tab and giving them an appropriate name such as 'btnmaintointeractive'.
After I had done this for all of the buttons on the form I made sure that all of the items such as the background and all of the buttons were on the same frame of the same layer to ensure that it would work properly. Finally, once I had finished building the form and it contained all of the items I needed I completed the form by holding down the shift button, selecting all the items on the form, right clicking, selecting 'convert to symbol' and then I gave it the name I thought was best suitable which was 'main menu'. I also selected the form, went to properties and named the instance name of the form 'frmmain'. After I had finished all of this my 'main menu' form was complete and I repeated all of these steps for all of my other forms. Overall I created four main forms which were 'main menu', 'interactive options', 'play options' and 'scene selection'. Once I had finished all the forms I made sure that they were all in the correct order by looking at the layers and rearranging them where I needed to so that my front end would work the way I wanted it to. For example I made sure that the 'main menu' layer was at the top so that when my front end opened this would be the first form that would show up.
How the development work fitted into the client brief
We built the main forms onto Flash in order to create the main part of my IMP. The forms that I created were 'Main menu', 'Interactive features', 'Play options' and 'Scene selection'. All of these forms are extremely important to my front end as the user will use these to get to different activities or interactive media such as the drag + drop game and the most important part of the IMP which is the video. Without these forms my IMP wouldnt look very professional because the interactive media would appear immediately and it would be a lot harder for the user to navigate themselves around the IMP. In addition to that I also made sure that the forms I created suited the theme of my IMP by including a relevant background and suitable colours and buttons. This fits into this section of my client brief:
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
4
Today we built our forms onto stage. I used a guideline document that was available in the student shared drive to help me know what to do, however the instructions were very brief and didn't cover everything and therefore I had to use my own initiative in order to make the forms that way I wanted them to be. Firstly we opened Adobe Flash and selected Action Script 3.0 as this was the software that we needed to build our forms. Next I looked for the background picture that I wanted to use for my first form which was 'Main menu'. I decided to look on the internet to see if I could find the picture that would best suit my front end, however I could not find anything I liked so I looked in the student shared drive for pictures that were available to use. The picture that I used for my background I found in the E block folder and It was a picture of the E block hallway. I thought this was suitable for my front end as the theme is E block and it was also quite colourful so I thought it would be the best background to use. I then imported this picture by clicking on 'file' in the top left corner and then 'import to stage' in the drop down box. Once I found the picture that I wanted to import I clicked open, which then imported it onto Flash and I changed it to the size I thought was most suitable by right clicking the picture and going to the 'free transform' tool which allowed me to move the image and change it to the size I wanted.
However, soon after this I realised that by using this tool it would make it a lot harder for me to get each form exactly the same size and therefore it wouldn't look very professional. I clicked on the picture and went onto the 'properties' tab on the right hand side of the page and changed the width to 200 and height also to 200 so that I knew exactly what size my picture was, in order to make sure all of my forms were the same size. After I had edited the background I added a button so that the user easily exit the form whenever they wanted to. I did this by going to the 'windows' tab at the top of the page, then common libraries in the drop down box and clicked on buttons. It then provided me with lots of different options of buttons so I decided to choose the 'Buttons Bar Capped' option as it thought it looked the most appropriate for my front end. As well as that I also made the button purple as this is the colour that I had previously used for all of the buttons on the videos within my front end and therefore I decided to follow the theme through in order to make it look more professional. After I had chosen which button I wanted, I decided to use the button as a blueprint so that I would be able to copy the button every time I needed it, which would mean that I wouldn't need to go through the options for every button I create, and it therefore made the process a lot faster and more efficient. In order to do this I opened the 'Library' tab on the right hand side of the page and dragged the button in. I then duplicated the button several times by right clicking and selecting duplicate and then giving each button appropriate names such as 'maintointeractive' and 'maintoplayoptions'. Before I could put these buttons on my front end I had to change the text to display what I wanted it to and I did this by right clicking the button, selecting 'edit' and then typing in the word/s that I wanted. As well as that I also had to change the instance name of every button in order to ensure that it worked correctly and I did this by clicking each of the buttons, then going to the properties tab and giving them an appropriate name such as 'btnmaintointeractive'.
After I had done this for all of the buttons on the form I made sure that all of the items such as the background and all of the buttons were on the same frame of the same layer to ensure that it would work properly. Finally, once I had finished building the form and it contained all of the items I needed I completed the form by holding down the shift button, selecting all the items on the form, right clicking, selecting 'convert to symbol' and then I gave it the name I thought was best suitable which was 'main menu'. I also selected the form, went to properties and named the instance name of the form 'frmmain'. After I had finished all of this my 'main menu' form was complete and I repeated all of these steps for all of my other forms. Overall I created four main forms which were 'main menu', 'interactive options', 'play options' and 'scene selection'. Once I had finished all the forms I made sure that they were all in the correct order by looking at the layers and rearranging them where I needed to so that my front end would work the way I wanted it to. For example I made sure that the 'main menu' layer was at the top so that when my front end opened this would be the first form that would show up.
How the development work fitted into the client brief
We built the main forms onto Flash in order to create the main part of my IMP. The forms that I created were 'Main menu', 'Interactive features', 'Play options' and 'Scene selection'. All of these forms are extremely important to my front end as the user will use these to get to different activities or interactive media such as the drag + drop game and the most important part of the IMP which is the video. Without these forms my IMP wouldnt look very professional because the interactive media would appear immediately and it would be a lot harder for the user to navigate themselves around the IMP. In addition to that I also made sure that the forms I created suited the theme of my IMP by including a relevant background and suitable colours and buttons. This fits into this section of my client brief:
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
4
Thursday 15 September 2011
Importing FLV files to flash
Development work covered during lesson
Today we converted our FLV files into SWF files. Firstly we opened Adobe Flash and selected Action Script 3.0 as this was the software that we needed to use in order to carry out the task. After this we imported the first video into Flash by clicking import video, browse and then selecting the FLV file that we wanted to import which were located in . We then had to resize the video in order to make sure that it was the correct size by right clicking and choosing the free transform button and then making it the size I wanted it to be. There was a white box behind the video that I used to help me decide what size I wanted my video to be because If it was bigger than the white box then the viewer wouldn't be able to see the video properly. Furthermore I also left enough room at the bottom of the screen in order to make room for a button. We also had to rename the layer and add a button to the first frame of the film layer. In order to add a button I went to the 'windows' tab, selected 'common libraries' and then selected buttons.I decided to choose the purple tubed shape button as it looked the most appropriate for my front end and it matched the colour of the skin in order to follow the colour scheme throughout. In addition to this I also had to change the instance name of the file in the properties window to btnunloadfilm so that the film would work. Furthermore I also had to add a new layer and rename it code as this is where the code has to be inserted. Next I clicked on the first frame of the code layer, selected action and then inserted the code provided into the box. Lastly I saved the video in my project folder and then published it in order to check that the video was working correctly. After I had finished the first FLV file I repeated this for all of the other files in my 'Converted files' folder so that all of my videos were working and so that my front end was more interactive as I put buttons that the user could click.
How the development work fitted into the client brief
We converted our FLV files into SWF files so that the user could not only watch the video but be able to interactive with them by clicking buttons. By adding a skin to each of the videos it allows the user to play, stop, pause, rewind, forward the video or do whatever they want it to do. This means audience doesn't have to watch all of the video at once as they can go do different sections by rewinding and forwarding or they could stop or pause the video if they want to come back to it. In addition to that I also added other buttons at the bottom of each video such as 'back' in order to make the front end more interactive. Here is the section of the client brief that the development work fitted in to:
'As well as that my front end must also be interactive in order 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.'
In addition to that it also fits into the this section of the client brief as the videos that I am converting include a visual guide on where all of the rooms are located and how to get to certain places in the E block:
'The films that I am going to be using for my IMP will also help to show the audience exactly how to get to each classroom after they have entered the E block.'
New skills table reference number
2 & 3
Today we converted our FLV files into SWF files. Firstly we opened Adobe Flash and selected Action Script 3.0 as this was the software that we needed to use in order to carry out the task. After this we imported the first video into Flash by clicking import video, browse and then selecting the FLV file that we wanted to import which were located in . We then had to resize the video in order to make sure that it was the correct size by right clicking and choosing the free transform button and then making it the size I wanted it to be. There was a white box behind the video that I used to help me decide what size I wanted my video to be because If it was bigger than the white box then the viewer wouldn't be able to see the video properly. Furthermore I also left enough room at the bottom of the screen in order to make room for a button. We also had to rename the layer and add a button to the first frame of the film layer. In order to add a button I went to the 'windows' tab, selected 'common libraries' and then selected buttons.I decided to choose the purple tubed shape button as it looked the most appropriate for my front end and it matched the colour of the skin in order to follow the colour scheme throughout. In addition to this I also had to change the instance name of the file in the properties window to btnunloadfilm so that the film would work. Furthermore I also had to add a new layer and rename it code as this is where the code has to be inserted. Next I clicked on the first frame of the code layer, selected action and then inserted the code provided into the box. Lastly I saved the video in my project folder and then published it in order to check that the video was working correctly. After I had finished the first FLV file I repeated this for all of the other files in my 'Converted files' folder so that all of my videos were working and so that my front end was more interactive as I put buttons that the user could click.
How the development work fitted into the client brief
We converted our FLV files into SWF files so that the user could not only watch the video but be able to interactive with them by clicking buttons. By adding a skin to each of the videos it allows the user to play, stop, pause, rewind, forward the video or do whatever they want it to do. This means audience doesn't have to watch all of the video at once as they can go do different sections by rewinding and forwarding or they could stop or pause the video if they want to come back to it. In addition to that I also added other buttons at the bottom of each video such as 'back' in order to make the front end more interactive. Here is the section of the client brief that the development work fitted in to:
'As well as that my front end must also be interactive in order 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.'
In addition to that it also fits into the this section of the client brief as the videos that I am converting include a visual guide on where all of the rooms are located and how to get to certain places in the E block:
'The films that I am going to be using for my IMP will also help to show the audience exactly how to get to each classroom after they have entered the E block.'
New skills table reference number
2 & 3
Subscribe to:
Posts (Atom)