dotted lines
swoosh

The Spirit of Motion, a poem by Suzanna Moodie, is an exploration of text, and images using Html5, CSS3 and Jquery to create an appbook to present the findings as a final project for DTC 338, Multimedia Publishing. For this class I chose a poem that I could use for multiple smaller assignments that could then be gathered into a final assignment.

The concept for the final piece was that of motion. I found an open source poem that was based on motion. I then looked into Kuler to come up with a color palette for the book. I decided early on that I would pick one color that would be used for all of the verbs in the poem.

For the spatial text assignment I took the stanzas of the poem and tried to play with putting them into different forms. I originally wanted to give the words a feeling of flowing, but I ran out of shapes and changed them to using different forms. I used several different Google Fonts for this assignment and I made sure to use a specific blue for the verbs.



When I did the visual assignment for the class I decided to pull out all of the verbs in the poem and put them into a Google image search to come up with which images I would use. After choosing my pictures I used Photoshop to give them all the same blue duotone color that I had used in the spatial text assignment. I placed them into an HTML document so that I could let the images scroll horizontally, giving a feeling of motion as the reader does so.

For the final assignment I pulled these two pieces together into the HTML document. I wanted to keep the flow of the images and give the text the motion with those images. I then used the images from the spatial text assignment throughout the page. At first I was going to do a Prezi style to the book. As I played with the images in different locations, sizes and zoom levels. I didn’t like the choppiness of the plug-in that I was using. I then began to play with other ways of displaying the text. I didn’t like the cluttered when all of the images were displayed at once. I then decided to use CSS and its animation property to give each of the images different motions and placements. I then decided to give the verbs in the poem a button feature to give the reader the power to decide if they wanted to show and hide each of the images in their own timing.

Spirit of eternal ! Ruler of the stormy ocean, of the restless waves, of the blast that raves Hoarsely through yon lofty oak, to thy mystic stroke; Man from age to age has Thy secret--but it thought! Agent of the Deity! Offspring of eternity, Guider of the steeds of time Along the starry track , Founder of each wondrous art, Mover of the human heart; Since the world's primeval day All nature has thy . They who thy laws to Might as well the wind, out the drops of rain, the sands which the main, the earthquake's sullen shock, the eagle to the rock, Bid the sun his heat , The mountain torrent to . Spirit, active and divine-- Life and all its powers are thine! Guided by the first great , Sun and moon thy laws, Which to man must ever be A wonder and a mystery, known alone to him who gave Thee sovereignty o'er wind and wave And only thee in the grave!

About the Project

Amalia Vacca

The Spirit of Motion, a poem by Suzanna Moodie, is an exploration of text, and images using Html5, CSS3 and Jquery to create an appbook to present the findings as a final project for DTC 338, Multimedia Publishing. For this class I chose a poem that I could use for multiple smaller assignments that could then be gathered into a final assignment.

The concept for the final piece was that of motion. I found an open source poem that was based on motion. I then looked into Kuler to come up with a color palette for the book. I decided early on that I would pick one color that would be used for all of the verbs in the poem.

For the spatial text assignment I took the stanzas of the poem and tried to play with putting them into different forms. I originally wanted to give the words a feeling of flowing, but I ran out of shapes and changed them to using different forms. I used several different Google Fonts for this assignment and I made sure to use a specific blue for the verbs.

When I did the visual assignment for the class I decided to pull out all of the verbs in the poem and put them into a Google image search to come up with which images I would use. After choosing my pictures I used Photoshop to give them all the same blue duotone color that I had used in the spatial text assignment. I placed them into an HTML document so that I could let the images scroll horizontally, giving a feeling of motion as the reader does so.

For the final assignment I pulled these two pieces together into the HTML document. I wanted to keep the flow of the images and give the text the motion with those images. I then used the images from the spatial text assignment throughout the page. At first I was going to do a Prezi style to the book. As I played with the images in different locations, sizes and zoom levels. I didn’t like the choppiness of the plug-in that I was using. I then began to play with other ways of displaying the text. I didn’t like the cluttered when all of the images were displayed at once. I then decided to use CSS and its animation property to give each of the images different motions and placements. I then decided to give the verbs in the poem a button feature to give the reader the power to decide if they wanted to show and hide each of the images in their own timing.