More than a maths teacher » Wordpress

In The (Learning) Zone

Lois Lindemann — Fri, 22 Apr 2011 16:28:55 +0000

I’ve been doing some more work on MoreThanMaths.com over the last couple of days. It was high time that I added some content to the Learning Zone. In the process of doing this I learned something. How appropriate.

Anyway, having spent a bit of time grappling with the wonders of combing Flash and WordPress, I thought I’d share what I’ve discovered:

1. Embedding Flash files in a WordPress site

I’ve been doing this for a while (here’s an example) and I’ve found the easiest way is to use a good plugin.

I recommend SwfObj – it’s reliable and really easy to use. I usually add some code to my posts/pages, eg:

[swfobj src="http://www.morethanmaths.com/mtm-content/puzzles/coins-01-triangle-to-square.swf" height="450" width="600"]

Alternatively, I can use the link that the plugin adds to the WordPress dashboard. When writing a post or page, just look for an icon with a little f. It’s sitting next to the other media upload icons. Click it and follow the instructions. It’s easy!

There are two functions from the SwfObj plugin that I don’t use.

- Alignment

I find it easier to align the movie by placing the code inside center tags:

[swfobj src="http://www.morethanmaths.com/mtm-content/puzzles/coins-01-triangle-to-square.swf" height="450" width="600"]

- Full screen view

I offer a hyperlink to a full screen version of the file rather than using the built in function (example on this page). This makes it easier for anyone who wants to grab a copy of the movie (eg to embed in a flipchart file for an interactive whiteboard), or who wants to hyperlink straight to it.

Incidentally, if you are going to do this, make sure that your Flash movies don’t have things going on offstage – otherwise they will show up! Many of my movies do have things going on offstage, but before publishing I cover these with a ‘curtain’ – actually a big white rectangle with a hole that shows the stage. Yes, I could deal with this by setting opacity on a webpage, but that won’t help if someone downloads the individual file.

2. Linking one Flash movie to another

Some of my resources aren’t single Flash files, they are too big for that. For example, Measure Island is made from a set of Flash files: one for the introduction, one for the map, one for the flea circus activity etc. They are linked together using Actionscript commands within the Flash files. This command is used to load the flea circus:

_root.loadMovie("ruler_flea_circus.swf");

After trying to get this to work with WordPress, I learned that this doesn’t work quite as I expected. I knew that the loadmovie command was a relative link. I was surprised to learn that it doesn’t point at the folder/directory that contains the Flash movie; instead it defaults to the folder/directory that holds the webpage that the movie is on.

My old site consisted of static html pages, with the relevant Flash files held in the same folders, so that wasn’t a problem. On my WordPress site, it was an issue, because the ‘folder’ containing the page doesn’t exist as such on a database driven site.

I tried lots of things before realising that the solution was easy!

I tried putting an absolute link in my loadmovie commands. The result was crashing Flasherama. Not pretty. Not recommended.

I discovered the base command on Adobe’s page listing Flash OBJECT and EMBED tag attributes

base -. or [base directory] or [URL]. Specifies the base directory or URL used to resolve all relative path statements in the Flash Player movie. This attribute is helpful when your Flash Player movies are kept in a different directory from your other files.

I failed at using this in various ways before eventually deciding to try a base command with SwfObj. There is no mention that this is supported on the plugin’s page, but the plugin does use the SWF Object 2.2 library and I was getting desperate…

[swfobj src="http://www.morethanmaths.com/mtm-content/measureisland/mi_intro.swf" height="450" width="600" base="http://www.morethanmaths.com/mtm-content/measureisland/" ]

It worked perfectly! Now when a user clicks on a link in my Flash movie, it looks in my www.morethanmaths.com/mtm-content/measureisland/ folder for the Flash file. No crashing, no gnashing of teeth. You can see the results here.

As I said, I recommend SwfObj – it’s reliable and really easy to use. And it does even more than it says on the tin!

Using Rollover Images

Lois Lindemann — Mon, 28 Dec 2009 09:00:47 +0000

Yesterday I wrote about creating rollover images in WordPress. This is all very nice, but what’s the point?

1. Engagement

Last term I sat with some students and asked them to show me things that they liked on various websites. There was no agreement whatsoever about preferred colour schemes, design styles or layouts, but almost everyone liked games, videos and interactive content. I am reliably informed that buttons which change when the mouse is rolled over them are ‘cool’.

If a set of buttons with rollover effects will encourage students to access the site I’ve set up for them, then it’s worth doing. (Yes I know, it’ll take much more than that, but it’s still worth it.)

2. Simple interactive content

Once you’veset up the use of rollover effects for the first time, it makes it possible to put some simple interactive content into web pages or posts in a class blog. Here’s a few examples:

Flashcards:

I’m going to ask Y10 to make some of these for the perimeter/area/volume formulae that they need to learn for their exam in January.

Revision prompts:

Can you name the sides in this triangle?
(Roll your mouse over the image to see the answer.)

Giving information or clues:

In a flowerpot in my garden I found 3 slugs, 2 spiders and 4 beetles.
How many legs were there altogether in the flowerpot?

Any more suggestions?

Creating Rollover Images in WordPress

Lois Lindemann — Sun, 27 Dec 2009 11:04:55 +0000

My student website is long overdue for a major revamp. I decided to rebuild the site using WordPress, which is going well, but some of the things I want to do are not automatically built in, so I thought I’d try to write some very simple guides as I work out how to do things.

My students all seem to like rollover images, so I wanted to incorporate them. Here’s how I did it:

You will need:

- A self-hosted WordPress blog. This simply will not work for a blog that is hosted on WordPress.com, because this process requires Javascript, which is not allowed on WordPress.com blogs. (That’s one of the many reasons I opted to go for the self-hosted option.)
- A folder somewhere on the web to hold your images.
- A text editor, such as Notepad.

Step One – Create some images

You will need two images – the basic image that will appear at first and the image that will replace it when the user hovers their mouse over. Obviously these images should be the same size! I created gifs, but pngs will also work. You will need to stick to one format, don’t use a mixture of file types.

Your rollover image needs to have the same name as the basic image, but with an ending such as _over added at the end: e.g. my-image.gif and my-image_over.gif

Once you have finished, upload your images to the web. You must save the two images in the same folder.

Step Two – Create and upload a Javascript file

Actually, no knowledge of Javascript is required here, because Atlanta Jones has created and shared a tutorial and a script that works perfectly. If you have created gif files and used the _over ending on your file names, you can simply download and use this file: rollover.js. Alternatively you can copy and paste this script into a text editor (NOT MS Word – I used notepad) and save it as rollover.js:

jQuery(function($) {
$(document).ready(function() {

		// Preload all rollovers
		$("#hoverlink img").each(function() {
			// Set the original src
			rollsrc = $(this).attr("src");
			rollON = rollsrc.replace(/.gif$/ig,"_over.gif");
			$("").attr("src", rollON);
		});

		// Navigation rollovers
		$("#hoverlink a").mouseover(function(){
			imgsrc = $(this).children("img").attr("src");
			matches = imgsrc.match(/_over/);

			// don't do the rollover if state is already ON
			if (!matches) {
			imgsrcON = imgsrc.replace(/.gif$/ig,"_over.gif"); // strip off extension
			$(this).children("img").attr("src", imgsrcON);
			}

		});
		$("#hoverlink a").mouseout(function(){
			$(this).children("img").attr("src", imgsrc);
		});

	});
});

If you have changed filetypes or endings, you will need to edit the script with your text editor to change anything that says .gif to .png, or anything that says _over to match the ending you used on your file names.

The script tells WordPress to pre-load your rollover images and what to do when the mouse is rolled over and off. It is dependent on a tag called hoverlink (I made that name up, you can change it if you want). We’ll use this tag in step four.

Once you have your Javascript file, you need to upload it. It needs to go in the root folder for the theme that you are using in Wordress. You will end up with a file at /wp-content/themes/whateveryourthemeiscalled/rollover.js

Step Three – tell WordPress to use the file that you just created

The good news is that WordPress comes bundled with JQuery, so all you have to do is tell it to use it. Even beter, Brian at frodesigns.com has kindly shared the code that is needed.

You will need to edit your header.php file, find this by clicking on Appearance, then Editor. First find the tag. NB in some themes the the tag may not look exactly like that, so you may need to look for something like this: .
Once you’ve found the tag, copy and paste this code directly under it:

    

You can see the penultimate line directs WordPress to the jQuery code for the image rollover effect that we are creating. It also refers to the hoverlink tag that we’ll use in the next step.

Step Four – putting your images into a post or page

Now you can actually put your images into a post or page. The last bit of technical trickery is to put your images inside a section tagged "hoverlink". To do this, use the html editor to create your page or post, rather than the visual editor.

This is the code that I used to create the image at the end of this post:

http://www.morethanmaths.com/teacher">http://www.morethanmaths.com/teacher/sample-files/2009/12/my-avatar.gif" border="0" alt="My Avatar" width="220" height="220" />

You can see that the code relating to the image is contained inside two tags:

and

. Obviously you will need to change the highlighted sections to match your own choice of hyperlink, image location and size.

Want a rollover image that isn’t hyperlinked? No problem:

http://www.morethanmaths.com/teacher/sample-files/2009/12/my-avatar.gif" border="0" alt="My Avatar" width="220" height="220" />

Want your rollover image in a sidebar? Add a text widget and put the code into that. WordPress will recognise the code and display the image with the rollover effect enabled.

Here’s the finished product:

There’s also an example of a rollover image in the sidebar of this blog, try rolling your mouse over the juggler to see it action – it’s a fairly subtle effect this time.

I’m not a Javascript expert – in fact I know next to nothing – but I got this working with little more than copy and paste. I’ve tried this with WordPress 3.0, 2.9 and 2.8.6, using the Atahualpa and the Default themes. I tested the finished product in Firefox, Chrome and Internet Explorer. As far as I can tell, it’s working perfectly.

Update: Drew left a really useful comment explaining how to get this to work if you are using a child theme:

“I was having a problem getting the rollovers to work. The problem was I am using a theme that is a CHILD theme of another (Graph Paper Press): the Parent theme (Modularity) is installed first and the Child theme (On Assignment) is then installed and activated. The .JS file needs to be uploaded to the PARENT theme (Modularity); it does not work if only uploaded to the in-use child theme.”

Update 2: I’ve done several theme upgrades without problems, but after a recent upgrade on one of my sites I found that I had to do some repair work. If the rollover effects stop working, it’s worth checking that the rollover.js script is still there and the code after the tag is still there. Mine got deleted

Update 3: John left a comment about getting this to work with tables and has shared his code. Thanks John!