Monday 3 October 2011

Creating a gallery in Flash

Development work covered during lesson
Today I developed my IMP by creating a gallery for our IMP which contained any pictures that we wanted. There was no guidelines on how to make the gallery and therefore I had to use my initiative and work it out for myself however a pre made gallery was made available to use as the starting point for the our own gallery. Firstly I opened Flash, then I made a new document by clicking new on the file tab and then I selected Action Script 3.0 as this was the software that was most suitable for creating a gallery. After I had opened a new document I clicked on the file tab which opened a drop down box, then I selected open, clicked browse, found the gallery that I wanted to use as a basis of my gallery which was located in studentshareddrive/0AppliedICT/Unit11. Once the gallery was open  I then imported four of the images that I wanted in my gallery from the computer to my library by going to files, import and then import to library for each photo. I remembered how to do this from one of my previous lessons where we created the front end and I had to import all of the background pictures into my library to make it a lot easier to edit and change them. I also found that if you click Ctrl+R then the images were imported directly to stage however for this activity I though it was easier to have the images in my library. Following that I went to the buttons layers and selected the first frame on the timeline and I dragged each of the images from my library to the stage. It was very important that I selected the first frame on the buttons layer because otherwise the images would not work as they are supposed and therefore when each picture is clicked the next picture wouldn't appear, which is how I wanted my gallery to appear. Once all of the photos had been imported to the stage I changed the size of each picture by clicking them individually, selecting the properties tab on the right hand side and setting each picture 114 by 85px as I thought this looked the most appropriate size. I could have also modified them by right clicking each picture, selecting free transform tool and then dragging it to the size I wanted it to be however this would have been a lot less professional as the pictures may not have all been the same size. Next I made sure that all the pictures were aligned correctly at the bottom of the canvas so that my gallery looked as professional as possible. I set the image alignment by selecting Align in the window menu and then selected the option that aligned the pics to the bottom and distributed them horizontal centre however I could have also just clicked Ctrl+K which would have been slightly quicker.


The next step that I had to do was convert each of the thumbnails on the stage to buttons so that when each of the pictures were clicked then it would bring that picture up on the next screen. I converted the images into button symbols by selected the picture and then simply pressing F8 on the keyboard which I knew how to do from when creating my front end. It then opened a window so firstly I set the type to button, then gave each symbol an appropriate name such as btn1 or btn2 and then clicked OK. I did this for all four of the images. Next it was really important to give each of the buttons an appropriate instance name because otherwise they wouldnt work properly when it comes to coding the front end and making the front end interactive. In order to do this I clicked on each button individually, went to the properties panel  on the right hand side and then giving them an appropriate name such as btn1, btn 2 and so forth. The next step of making the gallery was to put all of the images that I wanted to view in the gallery. Firstly I switched to the images layer and selected the first frame on the timeline. Next I dragged the image that corresponded to the first thumbnail on the bottom left of the canvas from the library to the stage. Again it was really important that I put the picture in the image layer rather than any other layer because otherwise the images wouldn't show up the way I wanted them to in the gallery. After that I then sized each of the images down to 358 x 268 px as it thought this was the most appropriate size for my gallery. As well as that after I also went back to the timeline, selected the first frame and went to the properties panel in order to set the Frame Labels which I named computerroom, eblocksign1, eblocksign2 and eblocksign3 as these were the names that were most suitable for each of the frames because these were the main pictures that corresponded to each frame. Next I went to the first frame in the actions layer, right clicked and then selected actions which opened up a box. This box already had a code in it as it was pre made gallery so therefore all I had to do was change each of the frame labels to correspond to the frame label that I had named in order for it to work properly. This was the last stage of setting up my gallery and therefore the final thing that I had to do was test that it was working by pressing Ctrl+Enter and clicking the images to make sure everything was working correctly. Although I have finished the main steps of my gallery I may come back later in order to add special effects and make the gallery look a lot more professional and creative. 


How the development work fitted into the client brief
The development work fitted into the client brief as the gallery is going to be used to help portray to the user where all of the different classrooms are and the layout of e block a long with the film that is going in my IMP. I also made sure that my gallery was very easy to understand so that the user will get a lot of information out of my IMP. Below is the section of my client brief that the development work I did today fits into:


'The IMP (interactive multimedia product) is trying to portray where all of the classes within E block are located and what each of the classrooms is for. The films and photos that I will be using for my IMP will help my target audience have a better understanding of the layout of the E block as it will help to provide a visual aid to show them where each of the classrooms are and what they are for. The films and photos I use will also be very easy to understand and they need to be suitable to the topic my IMP is about to ensure that the user gets exactly what they want from the IMP and that It does not stray from the topic.'


The gallery also fits into my client brief as it is another feature which makes my IMP a lot more interactive and  gets the user more involved which is what I put in my client brief. It also makes the IMP a lot more enjoyable and makes the IMP a lot more interesting. Lastly it also fits into this section of the client brief as I said that I wanted to provide a gallery including pictures of E block as a visual aid for the user:


'The films that I am going to be using for my IMP will also help to show the audience exactly how to get to each classroom after they have entered the E block. In my IMP I am going to provide a gallery where the audience can go onto which shows them pictures of all of the different rooms within E block and all the different facilities that are provided.'


New skills table reference number
7

No comments:

Post a Comment