The video shows a helicopter moving from left to right and then landing on a boat in a moving sea. It's a little bit crude, but I was playing around with animated gifs in photoshop and I thought it would be nice to make an animation of getting to work when your job is on a boat.
The video can be seen on the index page of my site:
https://www.imperial.ac.uk/humanities/webdesign/2012/grahamshaw/webroot/index.html
Originally I made the animation using HTML 5:
The animation is made by using two animated gifs, the helicopter and the sea background. The helicopter then moves from left to right and from top to bottom using the modules keyframes and animation.
Here is the link for the page:
https://www.imperial.ac.uk/humanities/webdesign/2012/grahamshaw/webroot/html/helicopter.html
It looks really good in firefox but unfortunately it doesn't work very well in Internet Explorer as older versions don't support html 5. It's also too big for many monitors as I coded it to fill the screen of my widescreen monitor without thinking about how it would look on someone else's machine. Woops.
Instead, I found software online to make a video file from screen grabs cam studio. I then converted this avi file to flash using a trail piece of software I found online: Moyea Flash Video Pro. While the screen recording software can be toggled to convert to flash I found that the quality wasn't very good. The second piece of software also allowed me to change the output video dimensions to 900px wide.
Once my flash file was made it was easy to add it to my index page. Dreamweaver allows you to insert media like flash from the menu bar and it figures out the code that is required. the only thing I added was to place the flash inside a wrapper which I cleverly called flashwrapper in the style sheet:
The width of the wrapper is slightly smaller than the video size because there is a black bar on the right hand side of the video for some reason. Adding overflow:hidden masks this bar. Making the position relative ensures that the wrapper appears in the middle of the screen.
Above and below the image I added my logo and an enter button that fade in after 10 and 12 seconds respectively:
This link describes in greater detail how I got the code to work.
The fading is implemented like so:
The two images are placed inside their own ids, logo and enter, so that I can control exactly where they are on the page. Inside the image tags, calling the ids picOne and picTwo adds the fade effect to the two images.
I should note that in the css style sheet, you do need to add the following:
If you don't put this in, then the images display automatically and you don't get the benefit of the fade in effect.
The only other thing to mention is the the gray bits of code in the image above. I was finding that the images were not fading in correctly in Internet Explorer, so using the <--![if IE]> command displays the two images without applying the ids picOne and picTwo. The command if !IE, makes sure that the two ids picOne and picTwo are applied to all other browsers that are NOT internet explorer.
No comments:
Post a Comment