Archive for November, 2007

ActionScript 2 Drag Zoom XML Loaded Content

An example of creating a Drag and Zoom navigation system. Where content loads into one large movieClip that is scaled up and positioned with a mouse click. Also an example of using mouse listeners to provide mouse functionality in the parent movieClip without destroying any button events in loaded content.

I was interested in working multiple button event handling in AS2 as well as creating a drag and zoom navigation system for a website I am currently building. Content can be dragged around in both a scaled down and scaled up state. Content can either center in the screen or be positioned.

To navigate down from a scaled up state, you need to double click. The example also uses custom cursors to provide interface feedback when using mouseListeners, which do not trigger the built in cursor handling in Flash. Content is loaded in via XML and is laid out via either a crude grid making function or pulls in layout information from the XML file.

 There are many comments in the actionScript.

Update: 10 Jan, 2007. Major code work over, changed to using tweenLite as there was a subtle bug when using McTween and running two tweens on an object at the same time. I’ve also created a version that has a small floating navigation widget that acts as a meta view of loaded content. You can click this small widget to navigate the content.

Example
View an example here; http://www.noponies.com/dev/slidernav/

View an example with nav widget here; http://www.noponies.com/dev/slidernav/index2.html

Source Files
Here are the source files in CS3 and Flash 8 file formats; Drag Zoom Source Files

Dependencies
AS2 TweenLite class from http://www.tweenlite.com

ActionScript 3 ActionScript Drawing and Animating Diagonal Lines

An example using ActionScript 3 of creating and animating diagonal lines for “Op Art” type effects using ActionScript. This is my first AS3 class file, so is probably pretty rubbish. In this current version, the angle of the lines is fixed. Changing angles is something I intend to implement. You have control over line thickness, colour, tween direction and speed of tween. It is provided as a Flash CS3 demo and ActionScript 3 class file.

Example
View an example here; http://www.noponies.com/dev/animatedLines.

Source Files
Here are the relevant source files; source

Dependencies
Flash CS3 or ActionScript 3 editor and compiler.

Get Unique Colours From A Bitmap

This code snippet will traverse across a bitmap at a given point and return an array of unique colours in hex format. Useful for picking colours from a pallete image etc. I wrote this function to help a student pick random colours from a bitmap, rather than have them write out a long list of hex.

Here is the sample .fla; getfrombit_v8fla.zip

ActionScript 2 & PHP Text File Based Flash Shout Box

Source files and demonstration of a simple text file based PHP shoutbox implemented in Flash 8, using ActionScript 2. To use this you need to have PHP 5+ installed on your webserver.

Example
View example here; http://www.noponies.com/dev/shoutbox 

Source Files
And here are the source files; Shout Box Source Files

Dependencies
PHP 5.1 or greater
PHP write access to the text file that stores posts

ActionScript 2 Full Browser Image Cross Fading XML SlideShow

A demonstration and source code for a Full browser Smoothed Image cross fading XML based slideshow using ActionScript 2, in Flash 8.

Basically it is a Full Screen Random Background Image XML slideshow. It uses the bitmap data object to create a smoothed background image, crossfade between new images and has the ability to turn scaling off at a certain user defined size. I borrowed some code from fr-ode’s example (image resizing) and have added in the XML and cross fading element. The code is well commented, you should be able to figure it all out.

Updates
20 Jan, 2008. Moved to tweenlite for tweening images. Bug fix.

Example
View an example here; http://www.noponies.com/dev/fullscreen

Source Files
Here are the source files; Full Browser SlideShow XML Source

Dependencies
You need GreenStocks excellent AS2 tweenLite class for this demo!