That Blue Square Thing

Applied ICT A Level Unit 14 - Multimedia

Note: this page applies to the AQA Applied ICT A level specification. This exam was withdrawn in 2012, with final exams in 2013. The content will be retained as an archive and because it has some stuff that might be quite useful for someone or other

Old mobile phoneThere are some really good (and lots of really bad...) examples of interactive flash style applications out in the real world.

I quite liked the Get to know Wallander's Ystad application used by the Ystads Allehandaexternal link newspaper from the town of Ystad in southern Sweden.

The application linked the fictional world of Henning Mankell's detective, Kurt Wallander, to the real town, including locations used in film and television productions. It's an effective way to develop a little tour of the town.

Unfortunately the application is no longer on the web, but it was really good - promise!

Map flash app imageText, images, sound and video can be accessed through "hot-spots" (made using the Invisible Button Trick below) to allow users to explore the fictional setting and link to information about the real town. By using quotes from the books about the locations (such as the Pizzaria or the Marina) the application built up a nice picture of the town.

I'll try and build up some other examples of good ideas, and tricks to implement some of them, when I get the chance.

The Invisible Button Trick

Standard buttons you see and press, yes? They're easy to deal with - you create your button, maybe reusing some image, and attach the script. Fine - the button moves you to another area in the scene or to another scene.

But sometimes buttons aren't as useful. On an interactive map, for example, you wouldn't want to create a whole set of buttons on top of the map. And sometimes you want to make words into "buttons".

The solution is the Invisible Button Trick.

This is a really effective way of creating a button which can be layered on top of any image, or part of an image, in order to run action script then pressed. And it's reusable and resizeable - once you have the asset in place (which takes all of two minutes to create) you can reuse it many times in the same application, simply attaching different code to each instance (each time you use) of the button.

Here's how you do it:

  1. On a blank scene draw a rectangle using the Rectangle Tool. Any size will do.
  2. Now pick up the Selection Tool (the dark arrow at the top of the toolbar) and select the shape you just drew by clicking and dragging around it
  3. Right click > Convert to symbol
  4. Make sure that Type: button is selected and give the symbol an appropriate name - btnInvis for example. Click OK
  5. Flash button being madeDouble click the button icon in the Library window on the right of the screen. This will take you to the symbol editing area.
  6. Click the Hit box in the Timeline window
  7. Hit F6 to create a new keyframe (or right click away by all means, but remember that keyboard shortcuts rock...)
  8. Now, and this is the odd bit, click back in the Up box and hit Delete - yes, this will delete the shape in the Up, Over and Down sections of the Timeline. Seems odd yes? But this is the bit that makes it work so trust me on this.
  9. Click Scene 1 (or whatever) on the Timeline bar to get back to the scene - you'll see an blue shaped box in the place of your rectangle. You can delete this for now because the button's over on the side.
  10. Bring in an image, or type a word or something on the scene. I'll use the words 'Play Movie'
  11. Button made on the sceneCreate a new layer for your button to live in. Call this something useful like Buttons...
  12. Now click on btnInvis in the Library window and drag it onto the screen more or less on top of your words or image.
  13. Use the Free Transform Tool to make btnInvis as large or as small as you need to so that it sits over the area you want to click - on a map or an image this might only be part of the image of course.
  14. Make sure the button (the blue transparent shape) is selected and then click to open the Actions tab at the bottom. You can then type your action script in - for example:
on (release) {
gotoAndPlay (10);
}

All you do now is hit Ctrl+Enter to compile the application and check that the button does it's job

Endlessly useful, you can pull in as many buttons as you want and you can overlay more than one button on an image - just make sure they don't overlap.

You should probably look at That Blue Square Blog for all the really good other A Level stuff.