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