Webmastering / Jennifer Lee / Journal   1  2  3  4  5  6   
   

The Journal will feature an embedded video animation of yourself reacting to click of the mouseWebmastering on the journal dates. The journal dates will spin around in a vortex fashion. It was adapted from the vortex experiment found on the Levitated.com. It is an open source code, so you can use or adapt it as you like as long as you give the original author credit.

 Journal Final

1. The video

1a: digital camera:
Use the digital camera to make a 5 second video of yourself. You can smile, frown, cry, growl, whatever.  The quality of the video is not high, so make sure the shot is a close up of just your face like in the example. Don't move your hands around either. The file will be saved as a mpg format on your disk.

To make it easier to clean up the background later, it is also best if you have a high contrast between you and the background: dark clothing against a light background or vice versa.

When done, you should have a short clip like shown here: original clip

1b: Paint Shop Pro Animation Shop:
Open Paint Shop Pro Animation Shop. Go to open and find your video. The following Import Options screen will pop-up. Set it like shown.

This is a large file and it has to be reduced some. One way is to take a "sample for every 3" frames. The reduction won't be that significant.

 It should generate a bunch of frames like shown below.

We want to end up with a total of about 40 frames for the whole sequence. Select the frames you don't need and delete them. Probably some in front and some in back.

Next, select all your frames and use File / Save Frames As to save each cell as a separate file. Change the File Name and select JPG as the Format. You will get a sequence of 40 or so images.

2. Flash 5:

2a. Importing images:
We need to get the images you just saved prepared for the journal file. They have to be cleaned up a little and the animation sequence set up.

We'll use a temporary file for that and then later drag the symbol to the journal file. Open a new document and call it videoSetup.  Make a new movie clip symbol named videoClip.

Go to File / Import and find the first image saved above (my was karimot01.jpg). Flash will then prompt you that it has found a "sequence of images" and ask you whether you want to import them. Say yes to import all your images.

After you do this, Flash will insert each one of your images into a separate key frame.

2b. Magic Wand:
We want to delete the background part of each image.  Go to frame 1 and select the image on the Stage, then  Modify / Break Apart.
 

This is where the high contrast between the object and the background becomes important.  If your image is like the one on the left, then the Magic Wand can be used to easily to cut the background out.

Select the Lasso on the Tools Panel and in the Options choose Magic Wand Properties. Here you will have to experiment a little with the settings. Try the setting shown below first.

With the Wand, click on the white (hopefully) background area and then delete it. If things worked out as planned, most of the background should be gone.

You might have to use the Eraser tool to do some extra clean up-like eliminating left-over white areas.  This is tedious work, but the better job you do here, the better it will look.

Do the rest of the frames.

2b. copying frames:
To avoid any jerky motion between the last and the first frame of the animation. well copy all the present frames, paste them at the end and then reverse them.

Select all (Edit / Select Alll) the frames of you animation and Edit / Copy Frames. Note at this time the total number (my was 41). Select the the frame past the last one at the and Edit / Paste Frames. With the frames you just pasted still selected  Modify / Frames / Reverse.

The final version might look something like this if you play it.

Video animation

 

 
 Path:  Main / Webmastering / Jennifer Lee : journal
journal  [ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ] [ 6 ]