ActionScript 3 Full Browser Background Content

ActionScript 3 Full Browser Background Content.

This is the second third iteration of this class. I decided to put the NpFSObjectResize Class to use within this demo, using that class as the superclass for here. As a result, this new version of this file is much more capable, supporting stage alignment modes along with a simple method for loading in new background images or swfs. You could use that feature to create a simple full browser slideshow, but be warned that I have not used the same bitmapData memory management techniques as I have within the Full Browser Cross Fading demo. So, your memory useage could get higher using this class as a slideshow (as you will be waiting on the garbage collector to do its thing).

This class has been completely rewritten, as of version 2. The api has changed, and many new methods and properties are present. The classes event model has been shifted into its own class, and a new class now wraps each display object, which is the foundation for more work on transitions other than a straight alpha fade. This version is not compatible with any older versions!

The demo file contains an example of using this class with an XML iterator, with various methods for creating slideshows etc. Along with this example, is a very simple implementation, commented out in the actionscript layer of the .fla.

Class Features

  • Stage Alignment Modes
  • Load New Bg Method
  • Specify Cross Fading Time
  • Specify Min Stage Scale points
  • Pass Through Mode, where scaling is disabled
  • Specify Max scale of content
  • Specify content only scales upwards

View Example
Here is an example. In this example, the first file (swf) is set to scale to only 70% of the stages size, and stay centered, the second file (bitmap) is set to scale to full browser dimensions. View example here: http://www.noponies.com/dev/as3_fullbrowser_bg/

Updates
04 August, 2008: Added in ability to load in swfs as content.
17 Oct, 2008: Method change, shift from using timer to crossfade to internal Adobe tween class.
06 Jan, 2009: Completely rewritten, new API, new classes, new event model.
08 July, 2009: Fixed the bug with short tween in times, and a small issue with garbage collection
13 July, 2009: Fixed a slight bug with the example files related to iterating in reverse over a collection

Source Files
Here is the relevant source file; Full Browser Content Files (3229)

I’ve been playing around with javascript libraries more and more recently, I converted this file into a lightweight jQuery plugin, which can be viewed here; http://www.noponies.com/dev/as3_fullbrowser_bg/resize.html. If there are no problems, I’ll release it. In many ways, the writing is kinda on the wall for Flash, javascript can do a lot of the presentation things I would normally do in Flash.

By downloading, you agree to the terms of use, outlined here: http://www.blog.noponies.com/terms-and-conditions

Dependencies
None.

ActionScript 3 Accordion Content

ActionScript 3 Vertical & Horizontal Accordion Menu with support for columns of content.

This example extends and supersedes an earlier version of this file I wrote about a year ago. I always wanted to make a horizontal version and extend the class, making it more flexible and useful to people.

As was the previous menu, this menu is a Class based ActionScript 3 Accordion Menu, with either a rollOver/RollOff activation scheme for a onRelease activation scheme. I also added in a better extended event class which allows you to control, or respond to all menu activity via events.

Class Features

  • Vertical or Horizontal Menu Orientation
  • Visible or invisible Menu Bar
  • Supports parsing functions passed to each menu item
  • Custom Menu Bar Assets
  • Option for persistent Menu Panels
  • Menu Spacing
  • Menu text position
  • MenuBar colour / RollOver/Off colour
  • Menu text format
  • Menu tween speed
  • Menu easing type
  • MenuBar width, height, visibility
  • Menu Click behaviour
  • Disable / Enable Menu
  • Open Particular Panels
  • Menu attributes are applicable on a per menu item basis
  • etc, etc.

View Example
http://noponies.com/dev/as3_accordion/

Source Files
Donator only file!
If you want a less capable version of this file, you can download this; http://www.blog.noponies.com/archives/39

Dependencies
TweenLite – http://www.tweenlite.com

ActionScript 3 FullScreen Object Resize Class

The NpFSObjectResize Class is a fairly simple ActionScript 3 class for displaying any DisplayObject at fullScreen (fullBrowser) screen dimensions. The class gives you the options of resizing to full the entire screen, or to resize to either width or height. You are also able to align your objects anywhere within the stages dimensions. This allows for you control where your objects scale from (via positioning) them. So, you can center your objects, or align them bottom right and so on.

Updates 1 August 2008: Updated with new stage alignment properties, adjustments to constructor.

Class Features

  • Min Stage Width – point at which scaling will turn off
  • Min Stage Height – point at which scaling will turn off
  • Use Stage Min – Controls whether or not objects scale or clip at a the MIN stage points
  • Scale Modes – “full”, “height”, “width”
  • Align Objects within stage dimensions
  • Position Objects within stage dimensions

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

Source Files
Here is the relevant source file: FullScreen Resize Object Files (2323) - 348.14 kB
By downloading, you agree to the terms of use, outlined here: http://www.blog.noponies.com/terms-and-conditions

Dependencies
None

Updates
03 October, 2008: Updated main resize code, as there was a slight bug when resizing

Dependencies
None!

Beta Version

I’ve created a new version of this class, that includes mouse panning for objects along with a panning to a point method

You can get the beta from here. NpFsObjectResize Beta (407) - 482.74 kB
Please let me know of any errors, or issues with the code.

ActionScript 3 Contextual Menu Manager Class

The NpContextMenu Class is a fairly simple ActionScript 3 class for creating and interacting with Contextual Menus.

The class simply redispatches the ContextMenuEvent.MENU_ITEM_SELECT event to any parties interested in responding to menu events outside of the actual class. This allows for a little more flexibility with how events are handled and how the menu itself is set up. By using this approach the menu can be a a little more dynamic.

Class Features

  • Public Methods
  • addMenuItem() – add menu item at run time
  • removeMenuItem() – remove menu item at run time
  • hideMenuItem() – hide menu item at run time
  • showMenuItem()_ – show menu item at run time
  • + a few getters

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

Source Files
Context Menu Class Source File (1109) - 96.02 kB

Dependencies
None

Simple ActionScript 3 Slideshow Engine

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

ActionScript 3 Full Browser Tiled Background

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 (2270) - 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/

ActionScript 3 Full Browser Background Video

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.

« Previous PageNext Page »