Special Characters Cheat Sheet

February 26th, 2008 by Adrian Parr

Special Characters Cheat Sheet

I quite often find myself needing to find codes for special characters and then having to track down a website that lists the type of code I am after. Sometimes I need Unicode, other times I need ASCII, and other time I need URL Encoded values. Things like a list of key codes and escape sequences are also handy to have. So, to make mine (and your) life easier, I have put together a Special Characters Cheat Sheet (PDF) that lists all the characters from 0 - 255 (ASCII) and their other corresponding code values.

You can download the Special Characters Cheat Sheet (PDF) here

Here are some useful links to the Adobe Flash LiveDocs

Here is a little Flash 8 (AS2) movie that displays charCodeAt, escape, getCode, getAscii and Key.CONST

Flash 8 AS2 Source Code here

In AS3 there are a few more event properties we can access such as ctrlKey, shiftKey and altKey. There are also many more static constants which are mapped to certain keys on the keyboard. Here is the Flash 9 AS3 version of the above movie.

Flash 9 AS3 Source Code here

UPDATE 20/03/09: Lee Brimlow has just made me aware of a useful online tool for converting between Unicode and other representations such as Hex, CSS Escape Sequences and Percent Encoding for URIs. The tool is called Unicode Code Converter v6 and has been written by Richard Ishida.

Posted in ActionScript 3.0, Actionscript 1.0 & 2.0, Flash, HTML | 2 Comments »

Default code in Flex

February 25th, 2008 by Adrian Parr

Just for reference, here is the default code that Flex gives you when starting a new Flex project and ActionScript project.

Default Flex MXML file

< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

</mx>

Default ActionScript file

package {

    import flash.display.Sprite;

    public class ClassName extends Sprite
    {
        public function ClassName()
        {

        }

    }
}

Posted in ActionScript 3.0, Flash | No Comments »

Detecting key presses in AS3

February 25th, 2008 by Adrian Parr

Keyboard

In ActionScript 3 you can detect key presses on the keyboard using the Stage class. I discovered that the Stage object is not globally accessible. You need to access it through the stage property of a DisplayObject instance. So from within a Class you can check which keys are being pressed using the following code.

package {
    import flash.events.KeyboardEvent;
    import flash.display.MovieClip;

    public class KeyboardTest extends MovieClip {

        private var base:MovieClip;

        public function KeyboardTest($base:MovieClip):void {
            trace("KeyboardTest constructor is being run");
            base=$base;
            base.stage.addEventListener(KeyboardEvent.KEY_DOWN,keyboardListener);
        }

        private function keyboardListener(event:KeyboardEvent):void {
            trace("event.keyCode: " + event.keyCode);
        }
    }
}

Posted in ActionScript 3.0, Sample Code | No Comments »

Adobe Flex 3 and AIR Released

February 25th, 2008 by Adrian Parr

Adobe Flex 3 and AIR

Today Adobe officially released Flex 3 and AIR (Adobe Integrated Runtime) for the desktop. I won’t say too much about them here, as there is already plenty of info out there in the blogosphere. If you want to find out more, follow the links provided.

Posted in AIR, Adobe, Flex | No Comments »

Syntax Highlighting Plugins for WordPress

February 22nd, 2008 by Adrian Parr

CodeColorer Plugin

Hooray, at last I have found a WordPress plugin that displays ActionScript just how I want. I’ve tried about four different plugins now and there was always something not quite right about them. What I wanted was;

  • code to be displayed in a block
  • ActionScript syntax highlighting (using something like GeSHi)
  • line numbering
  • ability to copy and paste the code without copying the line numbers
  • long lines of code to not break out of the display block (to use horizontal scroll bars on long lines)
  • ability to set a maximum height of display block (then use vertical scroll bars)
  • keep code indented

Here are some of the plugins that I used at start with, and found that each of them had a problem with at least one of the above requirments;

Finally, the that I have settled on is called CodeColorer by Dmytro Shteflyuk. This seems to do all of the above, and was pretty easy to install and tweak. More info can be found on Dmytro’s personal site. So all the code blocks that you see on this blog are formatted using the CodeColorer plugin.

To use the CodeColorer plugin, simply wrap your code in the following tags …

<code lang=”actionscript”>

</code>

UPDATE 11/04/08

I have now turned off line numbering, because the numbers were being copied and pasted into peoples ActionScript editor when visitors tried to get the source code.

Also, there is still a slight issue with this plugin. When you want to go back and Edit a post, you are automatically taken to the ‘Visual’ editor. Switching between ‘Visual’ and ‘Code’ mode breaks the syntax highlighting.

So if anyone know of a really solid code syntax highlighter, then I’d still like to hear about it.

Posted in ActionScript 3.0, Actionscript 1.0 & 2.0, WordPress | 6 Comments »

AdobeAir Website

February 19th, 2008 by Adrian Parr

MasterCool By AdobeAir

I just did a quick Google search for “adobe air” and the sixth result was this website (www.adobeair.com) for air conditioning units. I did a quick Whois Lookup on the domain and it looks like they are genuine and have had that domain name registered since 1999. Just a coincidence?

Posted in AIR, Adobe | 1 Comment »

AS3 built-in events, public constants

February 14th, 2008 by Adrian Parr

Recently I’ve been reading up on the event handling in ActionScript 3. There is a lot about this in the docs, but it is spread all over the place. So I’ve decided to put together a quick list of the public constants that are available for the different objects.

In As3 you create an event listener to respond to an event that is dispatched by the object you are interested in. This is done using addEventListener. For example …

import flash.events.MouseEvent;

ball.addEventListener(MouseEvent.CLICK, ballClicked);

function ballClicked(e:MouseEvent):void {
    trace("Ball has been clicked");
    trace(e.target);
    trace(e.target.name);
    trace(e);
}

In the above example the output window would display …

Ball has been clicked
[object MovieClip]
ball
[MouseEvent type="click" bubbles=true cancelable=false eventPhase=2
localX=42 localY=31 stageX=192 stageY=185 relatedObject=null
ctrlKey=false altKey=false shiftKey=false delta=0]

You can import the entire events package using the following import statement …

import flash.events.*;

Here is the list of public constants available to the built-in events …

Event.ACTIVATE
Event.ADDED
Event.ADDED_TO_STAGE
Event.CANCEL
Event.CHANGE
Event.CLOSE
Event.COMPLETE
Event.CONNECT
Event.DEACTIVATE
Event.ENTER_FRAME
Event.FULLSCREEN
Event.ID3
Event.INIT
Event.MOUSE_LEAVE
Event.OPEN
Event.REMOVED
Event.REMOVED_FROM_STAGE
Event.RENDER
Event.RESIZE
Event.SCROLL
Event.SELECT
Event.SOUND_COMPLETE
Event.TAB_CHILDREN_CHANGE
Event.TAB_ENABLED_CHANGE
Event.TAB_INDEX_CHANGE
Event.UNLOAD

MouseEvent.CLICK
MouseEvent.DOUBLE_CLICK
MouseEvent.MOUSE_DOWN
MouseEvent.MOUSE_MOVE
MouseEvent.MOUSE_OUT
MouseEvent.MOUSE_OVER
MouseEvent.MOUSE_UP
MouseEvent.MOUSE_WHEEL
MouseEvent.ROLL_OUT
MouseEvent.ROLL_OVER

ActivityEvent.ACTIVITY

CaptionChangeEvent.CAPTION_CHANGE

CaptionTargetEvent.CAPTION_TARGET_CREATED

ColorPickerEvent.CHANGE
ColorPickerEvent.ENTER
ColorPickerEvent.ITEM_ROLL_OUT
ColorPickerEvent.ITEM_ROLL_OVER

ComponentEvent.BUTTON_DOWN
ComponentEvent.ENTER
ComponentEvent.HIDE
ComponentEvent.LABEL_CHANGE
ComponentEvent.MOVE
ComponentEvent.RESIZE
ComponentEvent.SHOW

ContextMenuEvent.MENU_ITEM_SELECT
ContextMenuEvent.MENU_SELECT

DataChangeEvent.DATA_CHANGE
DataChangeEvent.PRE_DATA_CHANGE

FocusEvent.FOCUS_IN
FocusEvent.FOCUS_OUT
FocusEvent.KEY_FOCUS_CHANGE
FocusEvent.MOUSE_FOCUS_CHANGE

HTTPStatusEvent.HTTP_STATUS

KeyboardEvent.KEY_DOWN
KeyboardEvent.KEY_UP

LayoutEvent.LAYOUT

ListEvent.ITEM_CLICK
ListEvent.ITEM_DOUBLE_CLICK
ListEvent.ITEM_ROLL_OUT
ListEvent.ITEM_ROLL_OVER

MetadataEvent.CUE_POINT
MetadataEvent.METADATA_RECEIVED

MotionEvent.MOTION_END
MotionEvent.MOTION_START
MotionEvent.MOTION_UPDATE
MotionEvent.TIME_CHANGE

NetStatusEvent.NET_STATUS

ProgressEvent.PROGRESS
ProgressEvent.SOCKET_DATA

ScrollEvent.SCROLL

SliderEvent.CHANGE
SliderEvent.THUMB_DRAG
SliderEvent.THUMB_PRESS
SliderEvent.THUMB_RELEASE

SoundEvent.SOUND_UPDATE

StatusEvent.STATUS

SyncEvent.SYNC

TextEvent.LINK
TextEvent.TEXT_INPUT

TimerEvent.TIMER
TimerEvent.TIMER_COMPLETE

TweenEvent.MOTION_CHANGE
TweenEvent.MOTION_FINISH
TweenEvent.MOTION_LOOP
TweenEvent.MOTION_RESUME
TweenEvent.MOTION_START
TweenEvent.MOTION_STOP

VideoEvent.AUTO_REWOUND
VideoEvent.BUFFERING_STATE_ENTERED
VideoEvent.CLOSE
VideoEvent.COMPLETE
VideoEvent.FAST_FORWARD
VideoEvent.PAUSED_STATE_ENTERED
VideoEvent.PLAYHEAD_UPDATE
VideoEvent.PLAYING_STATE_ENTERED
VideoEvent.READY
VideoEvent.REWIND
VideoEvent.SCRUB_FINISH
VideoEvent.SCRUB_START
VideoEvent.SEEKED
VideoEvent.SKIN_LOADED
VideoEvent.STATE_CHANGE
VideoEvent.STOPPED_STATE_ENTERED

Posted in ActionScript 3.0 | 2 Comments »

Shape tween on dotted line bug

February 13th, 2008 by Adrian Parr

Shape tween

Last week I one of the designers I was working with came across a bug in Flash CS3, well I presume it is a bug. Basically they were trying to do a shape tween on a line, bending from one place to another on the screen. Nothing strange there. But the line is question was dotted. When the shape tween was applied the line lost all dotted appearance and reverted back to a normal stroke, and then became dotted again on the last keyframe. The same thing happened when the line was dashed.

Obviously I would have expected it to remain dotted throughout the duration of the shape tween. See below.


We then tried converting the line to a fill (Modify > Shape > Convert lines to fills), which nearly worked, but the tweening got confused and random dots started swapping places, plus the filesize got bigger.

Surely this is a bug. I have reported it to Adobe using their Bug Report Form.

Posted in Bug, Flash | 7 Comments »

Useful Adobe Flash Player URLs

February 12th, 2008 by Adrian Parr

Adobe Flash Player

I’ve gathered together a whole bunch of URLs for the Flash Player that are always hard to find on the Adobe website when you need them.

I hope that is a handy list for you.

Posted in Adobe, Flash | 2 Comments »

Tweener Easing Types

February 12th, 2008 by Adrian Parr

I’ve been having a play with Tweener in AS3.0 and put together a little movie that demonstrates all the different easing type you can choose from. These are all based on the original Penner Easing Equations. This is very similar to Robert Penner’s Equations Visualizer. The duration for my tweens is set to one second.

Here is the Main class.

package {
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.events.MouseEvent;
    import flash.events.Event;
    import fl.controls.ComboBox;
    import flash.display.Loader;
    import flash.net.URLRequest
    import caurina.transitions.Tweener;

    public class Main extends MovieClip {

        private var _border:Sprite;
        private var _canvas:Sprite;
        private var _canvasWidth:int = 500;
        private var _canvasHeight:int = 300;
        private var _iNum:int = 100;
        private var _ball:Sprite;
        private var _cb1:ComboBox;
        private var _cb2:ComboBox;
        private var _selectedTween:String = "none";
        private var _loader:Loader;
        private var _folder:String = "graphs/";
        private var _ext:String = ".gif";

        public function Main():void {
            _border = new Sprite();
            var _thickness:int = 1;
            _border.graphics.lineStyle(_thickness, 0x036CB4, 1, true);
            _border.graphics.lineTo((_canvasWidth-(_thickness/2)), (_thickness/2));
            _border.graphics.lineTo((_canvasWidth-(_thickness/2)), (_canvasHeight-(_thickness/2)));
            _border.graphics.lineTo((_thickness/2), (_canvasHeight-(_thickness/2)));
            _border.graphics.lineTo((_thickness/2), (_thickness/2));

            _canvas = new Sprite();
            _canvas.graphics.beginFill(0xFFFFFF);
            _canvas.graphics.drawRect(0, 0, _canvasWidth, _canvasHeight);
            _canvas.graphics.endFill();
            _canvas.addEventListener(MouseEvent.CLICK, onClick);
            _canvas.alpha = 0;

            _ball = new Sprite();
            _ball.graphics.lineStyle();
            _ball.graphics.beginFill(0x0033FF);
            _ball.graphics.drawCircle(0, 0, 10);
            _ball.graphics.endFill();
            _ball.x = _canvasWidth/2;
            _ball.y = _canvasHeight/2;

            _cb1 = new ComboBox();
            _cb1.editable = false;
            _cb1.move(10, 10);
            _cb1.width = 90;
            _cb1.rowCount = 6;
            _cb1.addItem({label:"none"});
            _cb1.addItem({label:"linear"});
            _cb1.addItem({label:"easeIn"});
            _cb1.addItem({label:"easeOut"});
            _cb1.addItem({label:"easeInOut"});
            _cb1.addItem({label:"easeOutIn"});
            _cb1.addEventListener(Event.CHANGE, onComboBoxChange);

            _cb2 = new ComboBox();
            _cb2.editable = false;
            _cb2.move(110, 10);
            _cb2.width = 90;
            _cb2.rowCount = 12;
            _cb2.addItem({label:"none"});
            _cb2.addItem({label:"linear"});
            _cb2.addItem({label:"Sine"});
            _cb2.addItem({label:"Cubic"});
            _cb2.addItem({label:"Quint"});
            _cb2.addItem({label:"Circ"});
            _cb2.addItem({label:"Back"});
            _cb2.addItem({label:"Quad"});
            _cb2.addItem({label:"Quart"});
            _cb2.addItem({label:"Expo"});
            _cb2.addItem({label:"Elastic"});
            _cb2.addItem({label:"Bounce"});
            _cb2.addEventListener(Event.CHANGE, onComboBoxChange);

            _loader = new Loader();
            _loader.x = 352;
            _loader.y = -9;
            _loader.load(new URLRequest(_folder + _selectedTween + _ext));

            addChild(_loader);
            addChild(_border);
            addChild(_canvas);
            addChild(_ball);
            addChild(_cb1);
            addChild(_cb2);
        }

        private function animateToPos():void {
            Tweener.addTween(_ball, {x:mouseX, y:mouseY, transition:_selectedTween, delay:0, time:1, onComplete:tweenDone, onStart:tweenStart, onUpdate:tweenUpdate});
        }

        private function onClick(event:MouseEvent):void {
            if (_selectedTween == null || _selectedTween == "none") {
                _ball.x = mouseX;
                _ball.y = mouseY;
            } else {
                animateToPos();
            }
        }

        private function tweenStart():void {
            trace("tweenStart()");
        }

        private function tweenUpdate():void {
            trace("tweenUpdate()");
        }

        private function tweenDone():void {
            trace("tweenDone()");
        }

        private function onComboBoxChange(event:Event):void {
            if (_cb1.selectedLabel == "none" || _cb2.selectedLabel == "none") {
                _selectedTween = "none";
            } else if (_cb1.selectedLabel == "linear" || _cb2.selectedLabel == "linear") {
                _selectedTween = "linear";
            } else {
                _selectedTween = _cb1.selectedLabel+_cb2.selectedLabel;
            }
            _loader.load(new URLRequest(_folder + _selectedTween + _ext));
        }

    }
}

Download source

Posted in ActionScript 3.0, Sample Code, Tweening | No Comments »

Click to move Sprite AS3 example

February 12th, 2008 by Adrian Parr

Here is some AS3 code that moves a ball to the position of your mouse when you click. The CLICK event is triggered from a Sprite called ‘_canvas’ that is drawn through code. The ball is also a dynamically created Sprite called ‘_ball’. Create a blank FLA and set the Document Class to ‘Main’, then put this AS file next to the FLA and run Test Movie.

package {
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.events.MouseEvent;

    public class Main extends MovieClip {

        private var _canvas:Sprite;
        private var _canvasWidth:int;
        private var _canvasHeight:int;
        private var _iNum:int = 100;
        private var _ball:Sprite;

        public function Main():void {
            _canvas = new Sprite();
            addChild(_canvas);
            _canvas.graphics.beginFill(0xFFFFCC);
            _canvasWidth = 550;
            _canvasHeight = 400;
            _canvas.graphics.drawRect(0, 0, _canvasWidth, _canvasHeight);
            _canvas.graphics.endFill();
            _canvas.addEventListener(MouseEvent.CLICK, onClick);

            _ball = new Sprite();
            addChild(_ball);
            _ball.graphics.lineStyle();
            _ball.graphics.beginFill(0xFF0000);
            _ball.graphics.drawCircle(0, 0, 15);
            _ball.graphics.endFill();
            _ball.x = _canvasWidth/2;
            _ball.y = _canvasHeight/2;
        }

        private function movePos():void {
            _ball.x = mouseX;
            _ball.y = mouseY;
        }

        private function onClick(event:MouseEvent):void {
            trace("event.type: "+event.type);
            trace("event.bubbles: "+event.bubbles);
            trace("event.cancelable: "+event.cancelable);
            trace("event.eventPhase: "+event.eventPhase);
            trace("event.localX: "+event.localX);
            trace("event.localY: "+event.localY);
            trace("event.stageX: "+event.stageX);
            trace("event.stageY: "+event.stageY);
            trace("event.relatedObject: "+event.relatedObject);
            trace("event.ctrlKey: "+event.ctrlKey);
            trace("event.altKey: "+event.altKey);
            trace("event.shiftKey: "+event.shiftKey);
            trace("event.delta: "+event.delta);
            trace("----------------------------");

            movePos();
        }

    }
}

In the Output window you should see something like this …

event.type: click
event.bubbles: true
event.cancelable: false
event.eventPhase: 2
event.localX: 107
event.localY: 105
event.stageX: 107
event.stageY: 105
event.relatedObject: null
event.ctrlKey: false
event.altKey: false
event.shiftKey: false
event.delta: 0
----------------------------

Posted in ActionScript 3.0, Sample Code | 2 Comments »

Common ActionScript 3.0 Import Statements

February 12th, 2008 by Adrian Parr

If you find yourself trying to remember the various import statements for AS3.0 classes, here is a list of some of the most common ones. If you are using Flex Builder or FDT these are put in for you automatically, but the Flash IDE doesn’t.

import flash.display.MovieClip;
import flash.display.Shape;
import flash.display.SimpleButton;
import flash.display.Sprite;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.display.DisplayObject;

import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.TimerEvent;
import flash.events.MouseEvent;
import flash.events.ProgressEvent;
import flash.events.TextEvent;
import flash.events.IOErrorEvent;  

import flash.geom.Rectangle;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.geom.Point;  

import flash.utils.Timer;
import flash.utils.getTimer;  

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.NetConnection;
import flash.net.NetStream;  

import flash.filters.DropShadowFilter;
import flash.filters.BevelFilter;  

import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFieldType;  

import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundTransform;
import flash.media.Video;

Posted in ActionScript 3.0, Flash | No Comments »

Flash CS3 Document Class Example

February 11th, 2008 by Adrian Parr

If you are trying to get started with Flash CS3 and ActionScript 3.0 then a good place to start is by creating a simple Document Class.

  1. Open Flash CS3 and start a new Flash File (ActionScript 3.0).
  2. In the Properties panel enter ‘Test’ in the Document class text field.
  3. Save the FLA file.
  4. Start a new external AS file (File >> New… >> ActionScript File).
  5. Enter the code you see below.
  6. Save the AS file as ‘Test.as’ in the same folder as the FLA you created.
  7. Go back to the FLA and run Test Movie.
  8. You should see the word ‘Test’ traced to the output window.
  9. Congratulations, you have just created your first ActionScript 3.0 Document Class.

ActionScript 3.0 Code

package {
    import flash.display.MovieClip;

    public class Test extends MovieClip {

        public function Test():void {
            trace("Test");
        }
    }
}

Download Source

Posted in ActionScript 3.0, Flash, Sample Code | No Comments »

London Flash Platform User Group (LFPUG) meeting - Jan 2008

February 1st, 2008 by Adrian Parr

London Flash Platfor User Group

Last night was January’s London Flash Platform User Group meeting at the CosmoBar in Clerkenwell. The speakers were Paddy Keane talking about his experience of using PureMVC and Rob Bateman talking about the history of 3D on the web. The event was so popular that Tink had to send an email out to everybody warning that over 120 people had signed up to go, and that places would have to be on a first-come-first-served basis (normally we only get around 40 - 50 people). Anyway, here is a quick bullet point summary of what they covered.

PureMVC (19:00 - 20:00) - Paddy Keane

  • Why use a framework?
    • gives agility to the project and code
    • helps with risk management
    • good when features are changing
  • Based on Model, View, Controller but with additional Façade
    • gives code clarity
    • shows your coding intent
    • need to have good Development Process
    • start with a list of features
    • mock-up features and then test
  • The best way to get started with PureMVC is to read the Best Practices document and then read it again

The 3rd Way: Handling 3D on the Web ( 20:15 - 21:15 ) - Rob Bateman

Posted in ActionScript 3.0, Conferences and Events, Flash, LFPUG, Papervision 3D | No Comments »