circlecube

RSS comments
LinkedIn Twitter delicious fb last.fm

Posts Tagged ‘interactive’

Overview

Allowing users to use the keyboard as well as the mouse is a great way to incite interaction with your flash. This tutorial will show how to code it and what you can do with some keyboard events. This changed with actionscript 3, note this tutorial is AS3.
altKeY (Boolean) Indicates whether the Alt key is active (true) or inactive (false).
charCode (uint) Contains the character code value of the key pressed or released.
ctrlKey (Boolean) Indicates whether the Control key is active (true) or inactive (false).
keyCode (uint) The key code value of the key pressed or released. KeyboardEvent
keyLocation (uint) Indicates the location of the key on the keyboard. KeyboardEvent
shiftKey (Boolean) Indicates whether the Shift key modifier is active (true) or inactive (false).

Steps

  1. import KeyboardEvent,
    import flash.events.KeyboardEvent;
  2. assign any keycodes
    //keycodes
    var left:uint = 37;
    var up:uint = 38;
    var right:uint = 39;
    var down:uint = 40;
  3. add event listener KeyboardEvent.KEY_DOWN
    stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);
  4. respond to keys
    function keyDownListener(e:KeyboardEvent) {
            trace(e.keyCode.toString());
    }

    or

    function keyDownListener(e:KeyboardEvent) {
            if (e.keyCode==left){
    		ship.x-=10;
    		ship.rotation = 90;
    	}
    	if (e.keyCode==up){
    		ship.y-=10;
    		ship.rotation = 180;
    	}
    	if (e.keyCode==right){
    		ship.x+=10;
    		ship.rotation = 270;
    	}
    	if (e.keyCode==down){
    		ship.y+=10;
    		ship.rotation = 0;
    	}
    }

Example

Here we have a swf with the keyboard event listener on the stage, and feedback boxes to give us all we can know about the event. It will tell us about certain keys (alt, ctrl (cmd), and shift) with a Boolean, it will tell us the keyCode and the charCode. The keyCode is the number that is tied to the actual button pressed or key, and the charCode relates to the character represented by the button(s) pressed. So hitting ‘s’ and then hitting ‘shift + s’ will tell you different charCodes, ‘s’ and ‘S’. but you’ll see that the s key has the same keyCode (you’ll also see the ‘shift’ keyCode as well). If needed you can use the String.fromCharCode function to determine what the charCode for something is. The location on the keyboard is even reported, this helps distinguish between the left shift and the right shift and even the numbers across the qwerty and the numpad on the right of the screen.

Get Adobe Flash player

Actionscript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import flash.events.KeyboardEvent;

//keycodes
var left:uint = 37;
var up:uint = 38;
var right:uint = 39;
var down:uint = 40;

stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);

function keyDownListener(e:KeyboardEvent) {

feedbackAlt.text = e.altKey.toString();
feedbackCharCode.text = e.charCode.toString();
feedbackChar.text = String.fromCharCode(feedbackCharCode.text);
feedbackCtrl.text = e.ctrlKey.toString();
feedbackKey.text = e.keyCode.toString();
feedbackLoc.text = e.keyLocation.toString();
feedbackShift.text = e.shiftKey.toString();

if (e.keyCode == left){
ship.x-=10;
ship.rotation = 90;
}
if (e.keyCode == up){
ship.y-=10;
ship.rotation = 180;
}
if (e.keyCode == right){
ship.x+=10;
ship.rotation = 270;
}
if (e.keyCode == down){
ship.y+=10;
ship.rotation = 0;
}
}

Download

source file download: key-listener.fla

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
1 Aug 2008

Actionscript Key Listener Tutorial AS3

Author: Evan Mullins | Filed under: tutorial

sbm_1sbm_2sbm_3
Social Bookmarking master site built for StomerNet SMARTS (Social Marketing Traffic Secrets) members for easy social bookmarking. Minimalist design for clear presentation of organized sortable data. Implemented javascript (jquery) libraries for sorting and paging tables, javascript used to control visibility of elements on the page. Very simple and organized design, but still contain loads of information.sbm_4

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
29 Jun 2008

SuperBookMarker Web App Design

Author: Evan Mullins | Filed under: portfolio

StomperNet now has a site map. Only it’s much bigger than just a site map, we’re calling it Stomper Universe! It contains all the pieces parts that make up StomperNet. It links to different sites, video series, tools, and more by giving a 3D interactive space to inspect the thumbnails and click through to the sites! It will help visitors navigate easily to all areas of StomperNet, whether they are new to them or old favorites.

So go check out the StomperNet Universe now!

Stompernet universe thumbnail

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
25 Jun 2008

StomperNet’s Stomper Universe | Interactive Flash Site Map

Author: Evan Mullins | Filed under: portfolio, work

gn3_1Site built for Going Natural 3, free series of videos to promote the re-opening of StomperNet. Includes flash video and html template design in drupal all styled with custom made themes and css. Users were prompted to subscribe with email address and then allowed to view the premium video content and comment. Site discontinued, but video content still available at stomperblog.gn3_2

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
11 May 2008

StomperNet Going Natural 3 Web Design

Author: Evan Mullins | Filed under: portfolio

iKill_1

iKill: Pick Fruit, Be Happy, Keep Killing

iKill_5I developed this game for my Digital Media Thesis. I wanted to do a project that was interactive, and enjoying flash I decided to create it in the form of a game. The project called “iKill’ is Installation Game Art, and is also available online. It explores multiple these, such as man in nature, globalization, fast food, economics, etc. The game was part of an installation for the Digital Media Exit show of Spring 2007. I kept progress of the game online at my digmeexit blog with incremental demo versions of the project. The installation had a fully interactive game and used game controller to play. In the game you play the generic man and work through the work week. Your job is to pick fruit as it grows on the trees. You receive your wages according to your harvest and at the end of the day you “cash out” and earn your happiness (how else but with Happy Meals). You do encounter obstacles and must kill the bugs before they deprive you of your happy harvest! It is pretty simple critique on a culture that equates unhealthy food to happiness without regard to the environment, and equates a mindless 40 hour work week and competitive salary to a full life. For more details visit the development blog (digmeexit.blogspot)
iKill_6
iKill_4iKill_3iKill_2

Play Online Version of iKill

Use the arrows to move, space bar to pause, ‘z’ to jump and ‘x’ to swat.

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
4 May 2008

iKill Flash Game Art

Author: Evan Mullins | Filed under: portfolio