Multimedia Presentation 1

Fourth semester of the Micropublishing & Hypermedia.


4 Frame Animation

For our first assignment, we focus on making a walk cycle animation. We start by drawing four drawings of a character in different steps and create a spritesheet that we use for to make the animation.

CSS Transitions

For our second assignment, we turn to transitions.

Transition = Transformation = Transmogrifiction

CSS Transition is basically code that adds changes or effects on a simple element. Transforming from one state to another.

From adding colours to making animations.


Assignment Conditions

- 3D Transform

- Colour Transition

- Pop-Up Menu

- Call to Action

- Section Transition

- Inline-link Transition

- Surprise

System Design Specifications

Building a website is one that is built one step at a time like any great structures that still exist today, such as the Great Wall of China or the Pyramids of Gize, but for them to be ever lasting, it always begins with a plan, a blueprint. Even website has a blueprint, though don't mistake it as the codes that are found behind the screen display. The blueprint is called a Document and it contains the basic skeleton structure of the system.

Here's an example of how a system design specifications document looks like. This is an exercise to help us practice on how to plan and consider our desgin for our webpage before we begin the contruction with codes. It can be separated by three parts: The Main Page/ Home Page (the book cover of the website), the Basic page (the one whose structure remains the same and it's the content that changes) and a Style Tile (the panel that presents the different parts of the website: fonts, colours, etc.)

Search Engine Exercise

Online Game

We are going to tackle the most difficult subject of all, one that even the experts and people who are trained in this peculiar field have a hard dealing with it: Video Game.

We are tasked to create a video game with the codes we have learned from the tutorial that we have completed as shown in the link below.


The main idea of our video game comes from the trouble we often face as a Graphic Designer. Knowing the different fonts and knowing which is only made for display only and which is better in a longer text. So we put the player into the situation of choosing the right font.

The game's goal is simple: the player just need to collect 50 good fonts to win, but touch any bad fonts and it will be game over.