Please get the code examples and images used in this lab, by clicking here
1. Creating Images of Text
Some of you might be wondering why we have to create images of text. Well, sometimes you want to create labels on a webpage with a font type that is not standard for web browsers. The goal would be that someone half the world away would see the same font as you. One way to guarantee the same font (with non-standard types) is to use an image of the text. Normally, you can create images of text using a fancy application like Photoshop or Illustrator. Both of these packages are quite large. Instead, we are going to cheat by using something easy, and then capturing the font as an image using a "screen capture".
1.1 Using TextEdit
Open up the TextEdit Application by searching for it using "Spotlight" (the magnifying glass in the upper right-hand corner).
Like any editor, type the text in the document window.
To modify the font, first select the letter(s) that you would like to change by clicking and dragging over it/them.
From the main menu, choose: Format > Font > Show Fonts
You will see the following dialog box:
You can select a different "Family", "Typeface" and "Size" by clicking on them. As a note, If you are mixing fonts, you might find that you have to use different sizes (for large letters, anywhere between 64 and 144 inclusive).
If you would like to change the color of your text, you can click on the icon shown encircled in red in the image above. You will see the following dialog box:
Notice that there are different ways of viewing color. The icon encircled in red in the above image selects the "color wheel" view. You can move the dot around to choose a different color. If you would like, you can experiment with the other views.
The following is an "extreme" example of modifying the letters to be different colors and fonts. Make sure that you have space between the letters that you want to extract:
1.2 Capturing and Cropping
To capture the "image" of the text (as was done above), you can use the following combination of keys: command-shift-4, then space, and then mouse click on the window that you want to capture (it will be highlighted in blue).
The image will then be saved to the "Desktop". If you double click on the image, it will open in Preview.
Click on the "Show Edit Toolbar" icon (looks like a pencil in a box).
Then, choose the "Rectangular Selection" tool
and click and drag the dashed rectangle around the letter(s)
that you would like to extract from the image
Once you are happy with your selection, choose from the main menu: Tools > Crop
You should have the letter(s) isolated, and you can save it (as a .png file). A good idea might be to save all of the images into a new directory.
As a side note, if you would like to make the background clear, you can use the "Instant Alpha" tool shown encircled below:
After you choose this tool, you can click and drag on the area that you would like to "clear". The area will first be shown in red and then with "marching ants". When you are happy with the selection, hit the delete key to clear the background.
1.3 A Note on Installing Font
There are some really neat fonts "out there".
You can install fonts that you download from the internet.
The following website has some cool ones that are free or on a donation basis:
We are going to take a look at some web files (.html and .js) provided as sample code to this week's lab. The problem is that if you try to look at them using TextEdit, you will see the "web browser" version of the page and not the underlying code. You can view the code behind these webpages using another application called TextWrangler:
Use Spotlight to look for and start TextWrangler
Under the main menu, choose File > Open.... Browse to find the index.html file included in this lab's sample code. Be careful: if you double click on folders, TextWrangler will show your directory structure in a pane to the left. The following is what you will see when you open index.html:
Open the callPlax.js file included under the scripts folder included in this lab's sample code using the same method as above. You should now see something like the following:
Note a couple of things:
If you make changes to a file, the icon associated with that file
turns grey (notice the "Unsaved" label above).
Syntax highlighting is being applied. You can select the "language" from the drop down menu at the bottom (notice the "Syntax" label in the above image).
You can click on any of your "Currently Open Documents" to have them appear in the document window.
If you do not see the "Currently Open Documents" pane to the left, you can choose View > Show Files from the main menu.
That's it! That's all! A crash course in TextWrangler.
3. Animating Images on a Web
You guessed it! We are going to animate our images of text on the web. The code sample that is provided with this lab animates some round spheres based on mouse movement over a web page. You can take the ideas from the code samples and modify them to work with some text images.
In the following subsections we are going to answer the questions of "what is this code?" and "what do we have to change?". Before we get into those details, you might want to check out these animation examples that make use of the code that we are going to discuss:
You might already be familiar with JavaScript, but if you were told that the code we will be looking at is written in JQuery with a plug-in called Plax, your eyes might start glazing over. The next couple of subsections will define JQuery and Plax and where you can get more information about them.
3.1.1 JQuery
JQuery is a free, open source JavaScript library that has been designed to simplify client side scripting. In particular, it makes it easier to navigate a document, create animations, handle events, and perform Ajax operations. JQuery is extensible in that people have written plug-ins (specialized functions) that are freely available. These plug-ins make adding animation or, for instance, sorting table information as easy as calling a function.
If you would like to "install" JQuery, all you have to do is download the file available at: http://jquery.com/ and make it accessible to your target webpages. You will have to add the following code between the opening and closing head tags of your webpage:
This assumes that the jquery file is available in your current directory. If you are storing your work on Hercules and do not want to upload an extra file, you can use the version of JQuery that has been made available in the CS325 directory: src="https://www.cs.uregina.ca/Links/class-info/325/InteractiveText/Examples/scripts/jquery.min.js"
If you would like to know a little more about the syntax of JQuery, there are tutorials available at http://jquery.com/
The power of JQuery is really in the plug-ins. If you would like to look at a list of cool plug-ins, check out: http://plugins.jquery.com/
3.1.1 Plax
One of the cool plug-ins for JQuery is called "Plax", apparently, short for parallax. The idea of parallax is that depending on your line of sight, an object may appear to move (in relationship to a background or in relationship to another object). One example of this is: if you put your index finger up about six inches in front of your nose and then alternate closing your right and left eyes, it will appear like your index finger is moving quite a bit in relationship to the background. In technical terms, things that are closer have larger parallax. As you move your index finger farther away it seems to move less. The following webpage, https://github.com/500 gives the feeling that the sign is closer. Why?
Your lab instructor has provided you with a package that contains Plax. If you would like to know where Plax came from or look at more examples, you can click on this link: https://github.com/cameronmcefee/plax (click on the "Zip" icon to download everything). If you are a minimalist and know how things work, then all you really need is plax.js, which contains the function, plaxify. We will look at how we can call this function in the following subsection.
3.2 Working with the Example Code
In the example code that is provided with this lab there are a few things to point out in the index.html file:
There are several scripts that are being linked to between the opening and closing head tags:
data-xrange is the number of pixels that the image will move on the x axis. In the example where data-xrange="10", the image will move 5 pixels to the left and 5 pixels to the right from its starting location.
data-yrange is the number of pixels that the image will move on the y axis.
data-invert="true" will invert the direction that the image travels across both axes. This inversion is relative to the mouse movement. In other words, if the mouse goes up and to the left, then the object will move down and to the right.
Each image has its own id. See the next point for a description of the cascading style sheet that goes with this id.
An internal cascading style sheet is part of index.html. For the image with id of plax-sphere-3, the following "property: value" pairs are specified:
The starting location for the image is specified using top and left
The stacking order for the image is specified using a z-index. This controls which images will appear in front of others. Higher z-indices will be in front of lower z-indices.
Next, if you look at callPlax.js, you will see the following code:
$(document).ready(function () {-- This is our entry point for the plug-in. The plug-in code executes when the page is "ready", in other words, after the page has been loaded and the DOM has been fully constructed. You can think of the ready function as a jQuery's version of the window.onload function in JavaScript.
$('#shell img').plaxify()-- This calls the plaxify function that is part of the Plax plug-in. Notice the #shell img usage: this is specifying that each image within <divid="shell"> will have the plaxify function applied, effectively putting in place the calculations that will allow the images to move.
$.plax.enable()-- This is the way of "making it so" or turning on the animation. All the images should move after this.
As a side note, this is just one way of calling plaxify. If you are curious, you can see another way of calling plaxify at the following location: http://www.fadadance.ca/js/home.js.
Questions to Test Your Understanding
How would you make an image move more?
How would you change the starting location of an image?
What would you change to call the plaxify function for all of the images in the HTML code?
4. How to Transfer Files to Hercules
Once you have done all of this work, you might want to transfer your work up to your own personal website on Hercules. On the Mac, you can use an application called Filezilla (sorry, there is no WinSCP for macs; but this is almost better!). It is free to download for all platforms. To use Filezilla:
Use Spotlight to look for and start Filezilla.
In the lab, you will see the following "Site Manager" dialog window.
Ensure that hercules is selected under "Predefined Sites", then click on the "Connect" button.
You will see the following dialog box to fill in your username:
The first time that you run Filezilla, you might get the message shown below. Check off "Always trust this host, add this key to the cache" and click on OK:
Fill in your password:
You are now good to go. The left pane is your local host. The right pane is hercules. The idea is that you can change directories by clicking on their names. To transfer files, you can drag and drop files and directories from one side to another.
Note: If you are at home, you will not see the "Site Manager" dialog. Another way of connecting is by entering the information in the "Quickconnect" bar:
The goal of this exercise is to animate some images of text using the Plax plug-in for JQuery.
More Details
Animate at least six images of letters. They can be images of a combo of letters (like a sign) or they can be individual letters (from your name, for instance).
Use at least four different font types.
Use different starting locations, xrange, yrange and invert values from those used in the sample code (index.html)
It is optional to use background images or other non-letter images.