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

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.

64

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

January 31st 2008 - Entry Posted to: ActionScript 2

This is an ActionScript 2 version of the ActionScript 3 Accordion Menu.

This version is far far less feature complete than the ActionScript 3 version. This version was a “proof” of concept if you like of how I would approach making an Accordion Menu, which I then used as conceptual direction when making the ActionScript 3 version.

Nevertheless, it is an XML Accordion, but does not support function calls from the XML file. It is also not class based, and instead relies on two fairly simple sections of timeline actionScript to generate its functionality. The two .fla files have good comments and directions on what to edit to make changes to the ActionScript.

If there is demand, I can finish this menu to the level of the ActionScript 3 version.

View Example
Here is an example of the menu; http://www.noponies.com/dev/as2_accordion/

Source Files
Here are the source files; ActionScript 2 Accordion Menu Source

Dependencies
The menu uses Tweener. Its an old file, that I have not update to tweenLite.

16

January 30th 2008 - Entry Posted to: ActionScript 3

Simple class that repositions objects passed to it when a stage resize event occurs.

Class is designed to simplify creating flexible or liquid layouts in Flash CS3. For a project I had I needed to create a flexible layout, so rather than creating a set of functions etc that resized the various objects I wrote this class.

It is simple and probably not as optimised as it could be, but does support the features I needed it to well.

Class positions elements using proportions of the stage, rather than specific values. I felt it was simpler to specify a value of 100 for absolute bottom or right, or 50 for middle etc.

Read Class documentation for usage directions.

Class Features

• Ability to set a min Stage size at which point the layout manager will not reposition objects
• Layouts are proportionally based
• Use either clip reg point or clip natural center for positioning
• Public method for accommodating changes in content dimensions

View Example
Here is an example; http://www.noponies.com/dev/as3_stage_manager (Resize the browser window to see it work, click pink square!)

Source Files
Here are the source files; AS3 Stage Manager Source Files, v1.2

Dependencies
Flash CS3

48

January 29th 2008 - Entry Posted to: ActionScript 3

This file is a ActionScript 3 demo of a sliding images gallery, as used on my work site, http://www.thereformation.co.nz.

Basically images are loaded sequentially from an XML file into a Sprite, which is dynamically masked and then tweened. The gallery has support for text descriptions (via a support class) and also creates a dynamic image number navigation system which updates itself based off how many images you happen to load in.

This is a class based file, which relies on two helper support classes. One of which simply provides an array of images from an XML file. The other, the “TextNavigation” class provides a mechanism for dispatching events to the text navigation section of the gallery. Updating its status, so that it matches the currently displayed image. There is also an optional text descriptions class which will pull in descriptions from an XML file and display these along with the images.

Gallery Features

• Vertical or Horizontal Sliding
• External XML Images
• next, previous, play, pause public methods
• Supports multiple galleries
• Event Based Architecture
• Dynamic tweened mask, so that it supports different image sizes
• Either Manual or Automatic Image Progression
• Optional Text Navigation – supports embedded fonts
• Optional Text Comments – supports embedded fonts

Updates
July 08, 2008: A new rewrite of the class moving it to a more modular structure. I’ve decided to make this a donator file, after spending a solid day rewriting it. Download includes, source, example and documentation.
Jan, 12, 2009: API changes, new events, class now supports loading in new galleries, various bug fixes and documentation improvements. Class is now at Version 1.5

Updated 15 July, with a new method for autotweening text comments

View Example
Here is an example of the file; http://www.noponies.com/dev/as3_slideimages/

Source Files
Donator Only File

Dependencies
Files use TweenLite, available from here; http://www.tweenlite.com

79