May 06th 2008 - Entry Posted to: ActionScript 3

Simple ActionScript 3 Slideshow engine. This class file simply creates a slideshow that in its current setup, cross fades between each image. The class uses external images and is in fact, abstracted from sourcing any images. It is up to you to provide the class with an array of image URLs for it to use. This is a reworking of an earlier class, which has now been removed from this site.

Class currently uses tweenLite to handle the alpha transitions. However, this is simply replaced via a simple timer function. But I’ve left tweenLite in the class so that people can change the transitions to other types, like, blur, photoFlash etc easily by changing the tween type. If you just want an alpha fade and don’t use tweenLite elsewhere in your project, replace the tweenLite functionality with your own alpha fading transition. An example of which, is commented out in the class source code.

Class settings are instance based, which you access via getters/setters. So you can have muliple slideshow instances running at the same time

Class Features

• External Images
• Control over image cross fade time
• Control over image display time
• Linear or random image progression
• Automatic (timer) progression, or via mouse event
• Looping or play once
• Pause / Resume the slideshow in auto mode

Via setters, you can access and set the following properties for each slideshow instance..

xFadeTime: get/set – DataType:uint – Sets crossfade time or transition time between two slides in seconds
imageTime: get/set – DataType:uint – Sets total image display time, not including xFadeTime in seconds
slidesPlayRandom: get/set – DataType:Boolean – Sets the linear or random play order for slides. Set to true for random playback.
slidesLoop: get/set – DataType:Boolean – Sets whether the slideshow loops, or stops at end of images array. True = looping
slidesAutoPlay: get/set – DataType:Boolean – Sets whether the slides use the timer to auto progress, or whether a user must click on the slides to progress. True = autoPlay

Look in the demo .fla’s document class for examples of listening for the classes various events. You can listen for Open, Progress, Complete and SlideShowComplete events at the class instance level. You can also dispatch a pause and a resume event to the class. Which will pause / resume the class if it is in automatic mode.

View Example
http://www.noponies.com/dev/as3_xslideshow/

Source Files
http://www.blog.noponies.com/wp-content/uploads/as3_xslideshow_1_2.zip

Dependencies
tweenLite

41

April 20th 2008 - Entry Posted to: General, Illustration

My blog header image “Yawn” originally started life as a submission to the http://www.threadless.com t-shirt design contest.

Well, they actually seemed to like it, so its been printed. You can have a look at it here: http://www.threadless.com/product/1203/Yawn

3

April 20th 2008 - Entry Posted to: ActionScript 3, class

ActionScript 3 Tiled Background class.

Simple class for creating a tiled background for your projects. Takes 3 arguments,
the first is either a bitmapData object or URL to an image, a Boolean indicating if you want to multiply blend your image. Which is useful if you
want to overlay the tile over other display objects. And finally, a string representing the repeat mode of your tile. Class also supports repeat modes, in the same vein as what CSS allows for.

Class Features

• External Images or internal bitmap for tile
• Get/set tile blend mode (Multiply)
• CSS background repeat modes, ‘repeat’, ‘repeaty’, repeatx’, ‘norepeat’
• TileFast Mode – a performance tile setting

Class is an extension of this class; http://blog.efnx.com/?p=25

View Example
Here is an example; http://www.noponies.com/dev/as3_tiled_bg/

Source Files Here are the examples source files; Tiled Background Source Files (1596) - 121.47 KB
By downloading, you agree to the terms of use, outlined here: http://www.blog.noponies.com/terms-and-conditions

Dependencies None

Updates 05 July, 2008: Performance tuning.

Images courtesy http://www.lydiabradbury.com/

33

April 20th 2008 - Entry Posted to: ActionScript 3, Donator File, class

An Full Browser Background Video Demonstration

Supports either progressive or streaming video and audio (AAC) files (streaming tested using Red 5 and FMS). The demo consists of 3 classes, the main NpVideoProvider Class handles acquiring video, a NetConnect Class handles all netConnection duties, and an event class handles all the necessary events. Originally I wrote a class to handle testing BandWidth on streaming servers, but I didn’t think people would want that. If I’m wrong, I can add that functionality back in?

Class allows for loading in seperate files. So it would be pretty simple to turn this into a video slideshow. Class also, dispatches progress events along with events for each relevant netStatus event.

Class Features.

External Video files.
Either .flv, or .mp4 (h264), f4v, m4a (AAC), m4v, files.
Get / Set video looping.
Dispatches Progress events.
Get / Set a load point at which point video plays.
Get / Set video source files.
Play, Stop, Pause Methods.
Get / Set Seek Points.
Get / Set Sound volume.
Get / Set Sound Pan.
Get / Set Video Smoothing.
Get Video MetaData.
Get Video CuePoints.
Get Video XMP Data.
Get Video Image Data.
Get Video Text Data.
Definable Min scale size at which point the videos are clipped.
Supports FullScreen Events.

The demo contains two examples, one similar to what is online and one much more basic version. When I have time I’ll finish off a 3rd demo for using the NpVideoProvider Class as the base for a FLV player.

Updates11 Oct 2008: Renamed a property. Updated help files, updated demo files to more clearly show how to avoid stretching your video files.

08 December 2008: Added in support for f4v files, by adding in callback handlers for XMP, text and Image Data. The demos have been updated to demonstrate pulling in cover art from both a video and AAC audio source using the NpVideoProvider Class. The class is at Revision 1.1 now.

In this demo, I’m also using a tiled Background class, as a pattern overlay. This decreases performance notably. There is an option to turn this off in the demo.

View Example
Here is an example; http://www.noponies.com/dev/as3_fullscreen_bg_vid/

Source Files
Donate if you want these source files

Dependencies
None.

81

March 24th 2008 - Entry Posted to: ActionScript 3

This is a simple ActionScript 3 implementation of the class marching ants selection marquee you find in applications such as Photoshop.

The class is based off this ActionScript 2 example here;?Ǭ† http://www.nocircleno.com/experiments/selection_ants_proof/index.html, but adds in many more methods and is entirely self contained. Drawing the bitmaps for the marquee internally in the class.

Features

Either Fixed or user drawn marquee
Draggable or static fixed marque
Programatically changeable marquee colours
Programatically changeable marquee line thickness
Does not rely on library assets for marquee

View Example Here
http://www.noponies.com/dev/as3_marchingants/

Source Files
Actionscript 3 Marching Ants Marquee Version 1.0

Dependencies
None

14

February 14th 2008 - Entry Posted to: ActionScript 3

An ActionScript 3 implementation of my AS2 Full Browser XML Cross fading slideshow.

One of the main areas of concern for me when making this file is memory usage. It is pretty easy if no clean up routines are used to push the Flash player memory usage right up and over 100 megs due to the size of the images that are loaded in. To get around this I’ve used bitmap objects which I dispose of after every image cycle. This keeps memory usage to the bare minimum and frees up memory from Flash player instantly, rather than waiting around for the garbage collector to do its thing. If the bitmap approach is ditched and just a pure object deletion approach is used the garbage collector will keep the memory usage of this example down around 40-50 megs, with peaks up to 70 and lows of around 25. With the bitmap approach coupled with the object deletion memory peaks at around 30 (depending on image size) and drops down to lows of 15. Much better I think. This class attempts to keep memory usage down by creating bitmapdata objects from the loaded images. It then runs a routine to keep track of each bitmap loaded so that they can be removed when no longer needed. At most there are only ever two bitmaps in memory. As soon as a new slide is fully displayed, the old slide is removed and all vars pointing to it set to null. Memory usage stays fairly low using this approach, around 20 megs or so depending on the size of the images loaded in.

The slideshow supports a clean up routine, that deletes all objects and disposes of the current bitmap objects. The slideshow dispatches a Loaded, Beginning Load and progress event. Along with various other utility events related to changing slideshow settings.

Purpose and Intent
This class is designed for creating fullscreen background images that can be set to change or transition in the same manner as a traditional slideshow. It is however not really intended as a stand alone slideshow and as a result does not support text descriptions etc. The main idea is that this should be unobtrusive to the end user. The methods for manually loading new slides etc are primarily for developers and not really end user features. With that in mind, the slideshow does work fine if its methods are exposed to a user of your site.

Class Features

• Change image source Array at runtime
• Image Alignment within Stage
• Various Public Methods for loading, pausing, resuming slideshow
• Random or linear image progression
• Manual or automatic (timer) image shuffling
• Various Events
• Memory Management
• Looping or non looping
• Definable Image Time
• Definable Cross Fade Time
• Definable Min scale size at which point the images are clipped

This is a fairly complex class. Read the class documentation and look at the included document class for the .fla for examples of how to use the various methods and respond to the various events the class dispatches. If you encounter bugs, please post them here

The download includes a .fla, a document class for that .fla, the main slideShow class and a couple of utility classes, one for parsing XML, one for creating a FullScreen Contextual menu and one for flexibly laying out the button on the stage. Along with the font used and the images used

Feel free to hit that donate button, this was a fair bit of work! Enjoy!

Updates
27 Feb, 2008: Initial Release.
01 Aug, 2008: New methods, clean up of properties, documentation, moved to using NpFSObjectResize class for scaling of images.
24 July, 2009 Fixed tween timing issues, moved events into seperate class, new names for some methods, cleaned up documentation, some refactoring of code.

In this demo, the slides are displayed for 25 secs, cross fade time of 2 secs. Slideshow is in automode and fullscreen is enabled in the host swf.

View Example
Here is an example; http://www.noponies.com/dev/as3_fullbrowser_slide/

Source Files Here are the examples source files; http://www.blog.noponies.com/wp-content/uploads/npfullbrowserxfade.zip

Dependencies
This class uses the NpFSObjectResize Class (via composition) to handle stage alignments and scaling etc.

63

February 10th 2008 - Entry Posted to: ActionScript 3

ActionScript 3 version of the Actionscript 2 Drag, Pan Zoom example.

Loaded content can be either bitmap, swf or whatver. SWF’s retain their full interactivity. Simply specify what content you want in the XML file. Loaded content pulls an ID parameter from the XML file which is used for sending messages to particular content instances via custom non mouseEvent events. This is demoed as a commented out line as a means of scaling up the content and shuffling a particular instance of content into the center of the screen.

This is a class based implementation of the AS2 timeline implementation. With that in mind, there are 4 core classes in total, with two supporting classes.

Class Breakdown
LayOut.as
This class does the lions work of this demo. It requires two parameters, an XML file, which is provided by the LoadXML class and an integer to specify how many columns to lay the content out into. This class also acts as a mediator in the event dispatch process between content and draggable area. Class handles panning and zooming of loaded content, along with dragging and laying content out in a grid. Within this class are a number of variables that control how the zooming behaves. This class dispatches two other events to indicate loading of content, and content has all loaded. Currently these events do no have listeners, but the framework is there to hook into, should you want to. Loading Started Event dispatchEvent(new Event(LayOut.STARTED_LOADING)); Loading Finished Event dispatchEvent(new Event(LayOut.FINISHED_LOADING));.

ZoomContent.as
This class dispatches events back to the layout class which handles all zooming and panning. eg; dispatchEvent(new Event(ZoomContent.ACTIVE_CONTENT,true));
This class also handles enabling and disabling mouseChildren for loaded content. I didn’t want interactive content to able to recieve mouseEvents when it is scaled down. This is handled by a simple rollOver function which checks the scale of the parentSprite (pass in via the constructor). Class also dispatches events to custom cursor class.”dispatchEvent(new Event(CustomCursor.MOUSE_SHOW, true));” Generally speaking, this class is simply a container class for loaded in content.

CustomCursor.as
Loads in cursor.swf, which is the cursor asset file, with various cursor states. Only the zoom state is used in this demo. You of course can add access the other three states (finger, drag open hand, drag closed hand), if need be.

ContentEvent.as
Use for passing arguments with your custom events. In this instance it passes one parameter, an String, which represents the ID value of a target content instance. This class is used primarily for dispatching events to particular content instances. For instance, this class can be used to create a menu that shuffles and zooms content around independently of mouse Interactivity.

All classes support a method for killing listeners, each class method is fired when a REMOVED_FROM_STAGE event occurs. This of course can be changed for custom listener removal.

Updates 15 Feb, 2008: Adjusted the grid layout function and made the demo more flexible in terms of media it can load.
22 Feb, 2008: Fix for a double click tweening bug.
12 March, 2008: Better fix for double click bug! & Rounding Math Error.

Example Supports

Mulitple Galleries or content
Draggable content
Click Content to scale up
Double Click to Scale back down
Scale back to defined point, or point before a scale up operation
Auto or XML defined Layout
User defined scale factor
Custom Cursor

Example
Here is an example. http://www.noponies.com/dev/as3_pan_zoom/ (Click content to zoom, double click to scale back)

Source Files
Here are the various support files; ActionScript 3 Drag Zoom XML Loaded Content V1.5

Dependencies
Demo uses http://www.tweenlite.com for scaling, panning and zooming.

35