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.

61

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