As discussed in my previous post, resizing movies require careful planning. As one of the movie gets bigger, it's going to push other three movies to the side. They will have to scale down as the one, which viewers are focusing on, scales up. The transition has to be smooth, so it won't have negative impacts on the viewing experience. How do we execute this idea?
Implementation of Resizing Mechanics:
1. Divide the screen into four areas, one for each movie. Imagining it being a Cartesian coordinate system, with the origin at the centre of the screen. There will be fixed margins that all four movies will have between them.
2. Depends on where the cursor lies in the four quadrants, it will decide which movie to scale up. With the origin at the centre, we calculate the distance between the cursor and the origin. Use that as a factor for resizing while keeping the ratio. Imagining circles with the centre at origin, within each quadrant, the same distance will scale up the movie in that quadrant to the same size.
3. As one scaling up, all the rest will be scaled down at the same speed while keep the margin between them.
4. The whole piece will be of size 1024 by 768, which is 4 x 3. The movies, on the other hand, will be 1024 by 576, which is 16 x 9. The reason of using different ratios is that we can ensure the best viewing experience when presenting. The projector we will be using in the classroom one is of ratio 4 by 3. It means there will be margins on top and bottom that we're not going to use at all.
Here are some photos of notes I took while planning this:
