Breaking News
 |  |  | 

Bio General Info

Adobe Developer spotlight: Todd Williams

I know there are some really nice scroll components similar to this on the web, information pills here but I think this still has merit. It seems like every job comes with a different scroll bar design, the buttons and scroll bar can be any shape, size or configuration. While most Flash scroll bar components are easily skinned, this is kind of the opposite of skinning. You create the artwork, convert each item to a MovieClip, then apply the class. The code wraps the artwork instead of the artwork skinning the code.

This class started around 3 years ago and has been modified for many different projects and continued to evolve into what we have today. It is not perfect, but it can handle most jobs needing custom scroll bars.

Demo:

Some of the features include:
Auto On/Off – you may need a scrolling clip that could change in size as dynamic content is displayed or entered. When the scroll bar is not needed, it will turn itself off and back on when it is needed. Or you can manually turn it on and with your code.

Easing – Control the amount of ease or delay of the scrolling object.

Scroll Bar Resizing – To simulate the function of desktop applications, the scroll bar will automatically scale depending on the amount of scroll, This feature can be turned on or off.

Auto Resize – Say you have a project that needs multiple scroll bars. One 150 px tall, the other 500 px tall. With this class you can build one set of artwork and the class will automatically adjust the bottom button, scroll background, scrollbar scroll area to fit the needed size. Based on Mask size.

Down Button Flip – This will not change the world, but if you have an Up Button that is exactly like the bottom button just flipped vertically. The class will compensate for this, saving a few minutes of development time and a few kilobytes.

Scroll Background Hiding and resizing – Many scroll bars have a background track, you may want it visible when the scroll bars are disabled as a visual place holder. This feature can be turned on or off.

Works without a scroll bar or without up and down buttons.

Button Type Behaviors – Even though the buttons and scrollbars are made with movieClips, sample code and calls are provided to give them button type effects on rollOver, rollOut, press and release.

Usage may seem a little complex at first, but if you like designing and using custom scroll bars and buttons, it is totally worth it.

1. Create all your scroll objects, they should be converted to MovieClips.
(upButton, DownButton, ScrollBar, and ScrollBkg)

2. Place the up and down buttons, scroll bar, and scroll background into a new movieClip.
(ScrollObject)

3. Align the top button and scrollbar to it’s starting position.

4. Create the MovieClip to be scrolled, can include a TextField, graphics or both.
(ScrollMovieClip)

5. Create a mask and convert it to a MovieClip and mask the viewable area of the “ScrollMovieClip”.
(MaskMC)

5. Apply the class, this is the most complex part.

var scrollVert:HDScrollMC = HDScrollMC(ScrollObject, ScrollMovieClip, MaskMC, UpButton, DownButton, ScrollBar, ScrollBarResize, ScrollBkg, ScrollBkgHide, DownButtonFlip, ResizeScrollObjects, AutoOn, Ease);

This is where you assign all the MovieClips and enable any of the features. Other than the 7 MovieClips that the class points to, the other 6 arguments are features to enable or disable.

ScrollBarResize: Boolean (true/false)
ScrollBkgHide: Boolean (true/false)
DownButtonFlip: Boolean (true/false)
ResizeScrollObjects: Boolean (true/false)
AutoOn: Boolean (true/false)
Ease: Number (0-100) *(5 – 20) for best effect.

Once enabled, it can manage itself or you can manage it manually with a method like so:
scrollVert.ScrollStatus(true); or scrollVert.ScrollStatus(false);

[ad#content_banner]

When you are done with everything, you can strip all the code out by calling scrollVert.killScrollBar();

You can check the status of the scrollbar at anytime using
scrollVert.scrollStat; returns true or false.

import mx.utils.Delegate;
class com.hdi.util.HDScrollMC{
/*
HDScrollMC oringinally created 11/2005 by Todd Williams and HD Interactive.
©2005 - 2008 HD Interactive & Taterboy, Inc.
version: 2.2
Date: 3-3-09

Compatibility:  Action Script 2, Flash Player 7 and higher.
Purpose:
To Build a scrollbar class that is truly portable and can be applied to custom artwork
of any size and shape. This class wraps the graphics instead of graphics wrapping the code.
This gives the designer complete 	control over look and feel. One of the major features
needed was to have one set of scroll objects to be 	used in multiple instances and allow
them to automatically conform to different scrolling needs. One set of scroll objects can
control a scroll window that is 200 pixels tall or 600 pixels tall on the same stage at the
same time.

HDScrollMC handles Vertical Scrolling Only, for horizontal scrolling use HDScrollHorizontal.

Features:
1. Automatically arranges scroll objects so that one set scrollbar objects can be used in multiple
instances with different sized scrolling windows.
2. Resizing scroll bar similar to OS and desktop application scroll bar behavior.
3. Customizable Easing options for enhanced feel and response.
4. Code Wraps to custom artwork instead of skinning a preexisting component.
5. Auto on and off. The scroll bar is smart enough to know when it is needed or not.
6. Code provided to build button type behavior into MovieClip buttons and scrollbar.
7. Have multiple scrolling objects visible and functioning on the same stage at a time.


Preparation:
To prepare graphic objects for use with HDScrollMC, you will need to create 7 MovieClips.
MC 1. The MovieClip to be scrolled:
For scrolling text, create a TextField inside of a MovieClip, fill it with text manually,
or use dynamic text and the TextField.autoSize = true;

MC 2. Mask for MC 1 display area: This must be a MovieClip so that class can determine the size of the
masked area.

MC 3. Container for Scroll Objects: To make it possible to have multiple scrolling objects on the
stage at the same time, it is best to have at least the scrollbar and scroll button objects in a
container, the mask and MC to be scrolled can also be in this container if desired.

MC 4 & 5.  Scroll buttons UP and Down. These buttons are not required if a scrollbar only design is
needed. Scroll buttons can be MovieClips or buttons. Code for rollover and press events will be
sent to each MovieClip. If you want to use a MovieClip, disperse your button states on frames as you
would a button and add a stop action to the first frame. Also the down button and be a vertically
flipped instance if the top button if the design allows for this.

The scroll button MovieClips receive the following method calls from the class.
btnEvent(1); roll on
btnEvent(0); roll out
btnEvent(2); mouse down
btnEvent(1); mouse up

Use the sample method below for MovieClips with button type behavior.
**Super Simple Sample:
function btnEvent(val){
gotoAndStop(val+1);
}

Long-hand Sample:
function btnEvent(val){
if(val == 1){
//roll on / release
}
else if(val == 2){
//press
}
else{
//roll out
}
}

MC 6. Scroll Bar: Must be a MovieClip and like the buttons, code will be sent for rollover and press events.
A scrollbar is not required if a button only design is required. The scroll bar has a resize feature
with two modes. The scroll bar will resize based on the amount of scroll and the size of the scroll
area, similar to OS scroll bars.

Mode 1: (recommended) The scrollbar MovieClip resizes the whole Scroll Bar MovieClip. Some graphic distortion or stretching may occur.
You can set the scale9Grid to this MovieClip prior to enabling this class.

Mode 2: Three individual MovieClips within the Scroll Bar are used to represent the top, middle
and bottom of the scroll bar, the middle will be stretched the top and bottom MovieClips will retain
their graphic integrity. To use this option divide the Scrollbar into three horizontal slices. Create
MovieClip instances named scrollbBarTop, scrollBarBot, and scrollBarMid.
(this was implimented before scale9Grid capibilities (Flash Player 7))

The scrollbar receives the following method calls from the class.
barEvent(1); roll on
barEvent(0); roll out
barEvent(2); mouse down
barEvent(1); mouse up

Use the method below for MovieClips with button type Behavior.
**Super Simple Sample:
function btnEvent(val){
gotoAndStop(val+1);
}

Long-hand Sample:
function barEvent(val){
if(val == 1){
//roll on / release
}
else if(val == 2){
//press
}
else{
//roll out
}
}

MC 7. Scroll background, Must be a MovieClip,  will span the entire size of the scroll area
if the class is set to resize the objects. This MovieClip can be used to have a decorative
track for the scroll area and can be set to vanish or remain when the scrollbar is disabled
or enabled. This object is not required.

Usage:
Place the class folder in the working directory next to the fla you are using;
add import com.hdi.util.HDScrollMC; to the actions panel before the code below.

var vertScroll:HDScrollMC = new HDScrollMC(ScrollObject, ScrollMovieClip, MaskMC, UpButton,
DownButton, ScrollBar, ScrollBarResize, ScrollBkg, ScrollBkgHide, DownButtonFlip ResizeScrollObjects,
AutoOn, Ease);

**should be all one line.

I know there are a lot of arguments, and the descriptions/Usage are as follows:
1. ScrollObject - (required) target of scroll object container, MC 3 from the preparation list.
2. ScrollMovieClip - (required) target of MovieClip to be scrolled, MC 1 from preparation list.
3. MaskMC - (required) target to Mask for the scrolling MovieClip, MC 2 from preparation list.
4. UpButton - target or null, to Up Button MovieClip or Button. MC 4 & 5 from preparation list.
5. DownButton - target  or null, to Down Button MovieClip or Button. MC 4 & 5 from preparation list.
6. ScrollBar - target or null, to Scroll Bar MovieClip. MC 6 from preparation list.
7. ScrollBarResize - Boolean: true or false, To enable scroll bar resizing depending on scroll amount.
8. ScrollBkg - target or null, to resize scroll background graphic.
9. ScrollBkgHide - Boolean: true or false, default behavior is to hide scroll background and scroll objects
when scrollbar is disabled;
10. DownButtonFlip - Boolean: true or false, If the down button is an instance of the up button that is
vertically flipped.
11. ResizeScrollObjects - Boolean: true or false, when scroll bar loads, it calculates the size of the mask,
buttons, scrollbars and distributes them to the appropriate height and coordinates. This allows
different instances of a set of scroll objects to be used with different sized scrolling Objects.
12. AutoOn - Boolean: true or false, Turns control of turning the scroll bar objects on and off to the class.
If the scrolling MovieClip changes in size the class will automatically enable or disable the
scroll objects.
13. Ease - Number, changes the scrolling MovieClip's response to scroll events. set to 0 for no delay.


Other methods and properties:
You can use these properties and methods for external control and monitoring.

scrollStat:  property (Boolean) - tells if scrolling is enabled or disabled (read only).
setScrollStatus: Function (Boolean)- manually enables/disables scrolling - use with AutoOn set to false.
killScrollBar: Function - permanently disables the scrollbar and removes all listeners and events.

Tips:
1. For best performance, zero out  x and y coordinates to whole numbers on all MovieClips.
Also try to build artwork with artwork rounded to the nearest whole pixel. This stops a lot
of the little glitches 	that can appear when a user interacts with the scrolling objects.

2. If you do not want your scroll objects to flash on then off on load, set the scroll Object
Container's (MC 3) 	alpha property to 0. The class will automatically set it to 100 when enabled.

3. By default the class uses the scroll background  and/or the up button to align and distribute
the rest of the objects. You should align the top button and the top of the scroll background.
The top of the scrollbar should be aligned to the button of the top button. These coordinates
are used as starting points for all of 	the scroll objects and will used as return positions
when the scroll bar is reset.

*/
private var scrollObj:Object; //scroll MovieClip containing up button, down button, scrollbar, background.
private var tClip:Object; //MovieClip that holds the text clip.
private var tMask:Object; //Mask for the Text MovieClip, must be a MovieClip.
private var dwnBtn:Object; //Down button, should be movieClip or button.
private var upBtn:Object; //Down button, should be movieClip or button.
private var scrollBar:Object; //MovieClip to do the scrolling.
private var barAutoSize:Boolean; //Resizes the scroll bar to the scroll amount.
private var scrollBkg:Object; //Background behind scrollButtons and scrollBar.
private var scrollBkgHide:Boolean; //When scroll objects are not on, ScrollBkg is can be visible or not.
private var flipDwnButton:Boolean; // If you have flipped the upBtn to make the dwnBtn. Used for autoResize.
private var resizeObj:Boolean; // Resizes scroll objects to match the mask size and location.
private var autoOn:Boolean; //Let's the scroll object control if the scrollBar is on or off, depending on the size of the text box.
private var easeIn:Number; // Amount of delay for scrolling text to ease into possition.
private var scrollYPos:Number;
private var scrollStatus:Boolean; //Scrollbar is On or Off.
private var startParams:Boolean;
private var inc:Number;
private var resetAllSizes:Function;

public function get scrollStat(){
return(scrollStatus);
}
function HDScrollMC(targObj,tclip,tmask,upbtn,dwnbtn,sbar,barsize,sbkg,sbkgHide,flip,reSize,auto,ease){
scrollObj = targObj;
tClip = tclip;
tMask = tmask;
upBtn = upbtn;
dwnBtn = dwnbtn;
scrollBar = sbar;
barAutoSize = barsize;
scrollBkg = sbkg;
scrollBkgHide = sbkgHide;
flipDwnButton = flip;
resizeObj = reSize;
autoOn = auto;
easeIn = ease;
scrollYPos = tClip._y;
if(tMask._height >= tClip._height){
scrollStatus = false;
if(scrollBkgHide && scrollBkg){
scrollBkg._visible = false;
}

}
else{
scrollStatus = true;
}
var testConfig:Boolean = true;
if(scrollObj == null || scrollObj == undefined){
trace("ERROR: ScrollObject (arg 0) needs to be a valid MovieClip ");
testConfig = false;
}
if(tMask == null || tMask == undefined){
trace("ERROR: MaskMC (arg 2) needs to be a valid MovieClip - please mask the scrolling object with a named instance of a MovieClip");
testConfig = false;
}
if(easeIn == NaN || easeIn == undefined){
trace("ERROR: Ease (arg 12) needs to be a Number - 0 for no ease, 1 and higher to add ease/delay to the scrolling object");
testConfig = false;
}
if((scrollBar == null || scrollBar == undefined) && (upBtn == null || upBtn == undefined) && (dwnBtn == null || dwnBtn == undefined)){
trace("ERROR: Very funny, you need at least 1 control object (scrollBar, upBtn or dwnBtn) assigned to initiate scrolling");
testConfig = false;
}
if(testConfig){
init();
}
}
public function setScrollStatus(val){
scrollStatus = val;
scrollObj.stat = val;
scrollObj.yPos = scrollObj.starty;
tClip._y = scrollObj.starty;
scrollBar._y = scrollObj.bary;
setSizes();
if(val){
upBtn._visible = true;
dwnBtn._visible = true;
scrollBar._visible = true;
scrollBkg._visible = true;
}
else{
upBtn._visible = false;
dwnBtn._visible = false;
scrollBar._visible = false;
if(scrollBkgHide){
scrollBkg._visible = false;
}
}
}
public function killScrollBar(){
tClip._y = scrollObj.starty;
scrollBar._y = scrollObj.bary;
scrollObj.yPos = scrollObj.starty;
upBtn._visible = false;
dwnBtn._visible = false;
scrollBar._visible = false;
delete scrollObj.onEnterFrame;
delete scrollBar.onMouseUp;
delete scrollBar.onMouseDown;
delete scrollBar.onMouseMove;
delete upBtn.onMouseUp;
delete upBtn.onMouseDown;
delete dwnBtn.onMouseUp;
delete dwnBtn.onMouseDown;
delete upBtn.onRollOut;
delete upBtn.onRollOver;
delete dwnBtn.onRollOut;
delete dwnBtn.onRollOver;
delete scrollBar.onRollOut;
delete scrollBar.onRollOver;
clearInterval(inc);
/*//Enable MouseWheel - PC only and untested*/
//Mouse.removeListener(scrollObj.myWheel);
}
private function setSizes(){
scrollObj.maskh = tMask._height;
if(tClip._y < scrollObj.starty - (tClip._height - scrollObj.maskh)){
if(tClip._height  scrollObj.starty){
scrollObj.yPos = scrollObj.starty;
}

tClip._y = scrollObj.yPos;

if(barAutoSize == true){
//setup dynamic scrollbar height.
var sbHeight:Number;
if(tClip._height > scrollObj.maskh){
sbHeight = Math.floor((scrollObj.maskh / Math.ceil(tClip._height)) * scrollObj.bardist);
}
else{
//sbHeight =
}
if(sbHeight  0){
if(scrollObj.yPos < scrollObj.starty - scrollObj.yspeed){
scrollObj.yPos += Math.round(scrollObj.yspeed);
scrollBar._y = (((scrollObj.starty - scrollObj.yPos) / scrollObj.scrolldist) * scrollObj.barslack) + scrollObj.topy;
}
else{
scrollObj.yPos = scrollObj.starty;
scrollBar._y = scrollObj.topy;
}
}
else if(delta  scrollObj.starty - (scrollObj.scrolldist - scrollObj.yspeed)){
scrollObj.yPos -= Math.round(scrollObj.yspeed);
scrollBar._y = (((scrollObj.starty - scrollObj.yPos) / scrollObj.scrolldist) * scrollObj.barslack) + scrollObj.topy;
}
else{
scrollObj.yPos = scrollObj.starty - scrollObj.scrolldist;
scrollBar._y = scrollObj.boty - scrollObj.bht;
}
}
}
}
Mouse.addListener(scrollObj.myWheel);*/

if(resizeObj){
resetAllSizes = setCoors;//setSizes;
}

scrollBar.onMouseDown = function(){
if(this._visible == true){
if(this.hitTest(_root._xmouse, _root._ymouse, false)){
this.barEvent(2);
scrollParent.scrollchk = true;
this.startDrag(false,scrollParent.barx,scrollParent.topy,scrollParent.barx,scrollParent.boty - scrollParent.bht);
this.onMouseMove = function(){
if(scrollParent.scrollchk == true){
scrollParent.yPos = scrollParent.starty - (scrollParent.scrolldist * ((this._y - scrollParent.topy)  / scrollParent.barslack));
}

}
}
}
else{
}
}
scrollBar.onMouseUp = function(){
scrollParent.scrollchk = false;
if(this.hitTest(_root._xmouse, _root._ymouse, false)){
this.barEvent(1);
}
this.stopDrag();
}
scrollBar.onRollOut = function(){
this.barEvent(0);
}
scrollBar.onRollOver = function(){
this.barEvent(1);
}
upBtn.onMouseDown = function(){
if(this._visible == true){
if(this.hitTest(_root._xmouse, _root._ymouse, false)){
this.btnEvent(2);
scrollParent.upscroll = 1;
}
}
}
upBtn.onMouseUp = function(){
if(this.hitTest(_root._xmouse, _root._ymouse, false)){
this.btnEvent(1);
}
else{
this.btnEvent(0);
}
scrollParent.upscroll = 0;
}
upBtn.onRollOut = function(){
this.btnEvent(0);
}
upBtn.onRollOver = function(){
this.btnEvent(1);
}
dwnBtn.onMouseDown = function(){
if(this._visible == true){
if(this.hitTest(_root._xmouse, _root._ymouse, false)){
this.btnEvent(2);
scrollParent.dwnscroll = 1;
}
}
}
dwnBtn.onMouseUp = function(){
if(this.hitTest(_root._xmouse, _root._ymouse, false)){
this.btnEvent(1);
}
else{
this.btnEvent(0);
}
scrollParent.dwnscroll = 0;
}
dwnBtn.onRollOut = function(){
this.btnEvent(0);
}
dwnBtn.onRollOver = function(){
this.btnEvent(1);
}

inc = setInterval(Delegate.create(this, frameLoop),10);
}

private function frameLoop(){
if(scrollObj.upscroll == 1){
if(scrollObj.yPos  scrollObj.starty - (scrollObj.scrolldist - scrollObj.yspeed)){
scrollObj.yPos -= Math.round(scrollObj.yspeed);
scrollBar._y = (((scrollObj.starty - scrollObj.yPos) / scrollObj.scrolldist) * scrollObj.barslack) + scrollObj.topy;
}
else{
scrollObj.yPos = scrollObj.starty - scrollObj.scrolldist;
scrollBar._y = scrollObj.boty - scrollObj.bht;
}
}

if(scrollStatus){
var dirStat:Number = 0;
scrollObj.dwnscroll == 1 ? dirStat = -1:null;
scrollObj.upscroll == 1 ? dirStat = 1:null;
easeMainClip(tClip,scrollObj.yPos,easeIn,dirStat);
if(autoOn){
if(tClip._height <= tMask._height){
setScrollStatus(false);
}
var checkScrollDist:Number = Math.ceil(Math.ceil(tClip._height) - (scrollObj.maskh));// + 10;
if(scrollObj.scrolldist  checkScrollDist){
//reset size + ;
if(resetAllSizes && tMask._height != scrollObj.maskh){
resetAllSizes();
}
setSizes();
}
}

}
else{
if(autoOn){
if(tClip._height > tMask._height){
setScrollStatus(true);
}
resetAllSizes();
}
}
updateAfterEvent();
}
private function easeMainClip(obj,val,ease,dir){
if(ease > 0){
if(dir == 0){
if(Math.floor(obj._y) > val + 1){
dir = -1;
}
else if(Math.ceil(obj._y) < val - 1){
dir = 1;
}
}
if(dir == -1){
obj._y -= (obj._y - val)/ease;
}
else if(dir == 1){
obj._y += (val - obj._y)/ease;
}
else{
obj._y = val;
}
}
else{
obj._y = val;
}
}

}

Source Here

***** Some of the applications of this class may be better suited for HDSlide, a newer AS2 class to make things slide horizontally or vertically, without scroll bars using mouse movement.

Major Update and rewrite (2.0), Please download again to update your files

1. Multiple instances now work
2. Scrollbar background will be invisible if the text is not the correct size.
3. Added in code for resizing the text MC and mask to be more browser like. Not fully tested but does not seem to break other features.
4. Added code for scroll wheel support, but is it commented out. I have not tested it yet with multiple instances.

Horizontal version (2.2) is is available here.
Horizontal Scroll Source

UPDATE: 2.1

Source can be updated, using the links above.
added - clearInterval(inc); to the killScrollBar method.

UPDATE: 2.2

Source can be updated, using the links above.
1. Minor bug fixes adding reliability.
2. Scrollbars adjust if content is resized when autoOn and ResizeScrollObjects are set to true, like browser window functionality.
3. Horizontal scroll bar has been fully tested to work with vertical scroll bar on the same ScrollMovieClip. (browser type functionality)
4. Some of the documentation and usage in the class files has been clarified.
5. Both class files are included in each download above (horizontal and vertical).

Thanks for the input and testing.

Here is an AS2 version of the SuperLoader. It works just like the AS3 version found in the Custom HTML Templates post.

Quick Use:
1. Add loaderbar.swf and mainLoader.swf to your current project directory.

2. In the html file for your current project, check replace the src and movie parameters to mainLoader.

3. Then add [, medical 'flashVars', this site 'swfURL=FlashProjectToLoad.swf'] to the load script.

Example for AC_RunActiveContent:

AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '472',
'height', '280',
'src', 'mainLoader',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'mainLoader',
'bgcolor', '#000000',
'name', 'mainLoader',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'mainLoader',
'salign', '',
'flashVars','swfURL=imgViewer.swf'
); //end AC code

[ad#content_banner]

Example for HTML Object/Embed:




	

4. If your frame rate is different then 30, you will need to update the frame rate in the mainLoader.fla file.

5. If you are using this loader inside of your Flash movie, you may also need to comment out the line that sets _root to the loading file [mainMC._lockroot = true;].

Demo:
[kml_flashembed movie="/blog/flash/SuperLoaderAS2/mainLoader.swf" height="280" width="472" fversion="9" /]

Source Here
Here is an AS2 version of the SuperLoader. It works just like the AS3 version found in the Custom HTML Templates post.

Quick Use:
1. Add loaderbar.swf and mainLoader.swf to your current project directory.

2. In the html file for your current project, shop replace the src and movie parameters to mainLoader.

3. Then add [, tadalafil 'flashVars', visit web 'swfURL=FlashProjectToLoad.swf'] to the load script.

Example for AC_RunActiveContent:

AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '472',
'height', '280',
'src', 'mainLoader',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'mainLoader',
'bgcolor', '#000000',
'name', 'mainLoader',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'mainLoader',
'salign', '',
'flashVars','swfURL=imgViewer.swf'
); //end AC code

[ad#content_banner]

Example for HTML Object/Embed:




	

4. If your frame rate is different then 30, you will need to update the frame rate in the mainLoader.fla file.

5. If you are using this loader inside of your Flash movie, you may also need to comment out the line that sets _root to the loading file [mainMC._lockroot = true;].

Demo:
[kml_flashembed movie="/blog/flash/SuperLoaderAS2/mainLoader.swf" height="280" width="472" fversion="9" /]

Source Here

UPDATE: 1.1

1. Added usage information, the class could be used as a simple loader monitor if needed.
2. Moved class path from com.hdi.util.HDLoader to com.hdi.as2.HDLoader.

See just the loader class below.

/**********************************************************
HDLoader is a simple loader monitor that can attach to your custom loading bar
version 1.1
date: 1-9-10

How To Use:
1. Have something that needs loading

2. Create a function to handle the loading monitor updates. Should look something like this.
function loaderUpdate(perc:Number){
// perc is the percent loaded in non decimal form. 0 - 100.
// you can make a loading bar move or scale like so
loaderBar._xscale = perc/100;

// you can display text of the loading status.
loaderText.text = "LOADING: " + perc + "%";
}

3. Create a funciton to handle when loading is complete
function loadComplete(){
// hiding the loader after loading is always a good thing.
loaderBar._visible = false;

// do what ever you want here, your crap is now loaded.
}

4. import HDLoader.
import com.hdi.as2.HDLoader;

5. Start the loader, placing the correct target references in the correct argument positions.
arg 1: the MovieClip doing the laoding.
arg 2: the loader update function created in step 2.
arg 3: the loader complete function created in step 3.

// we are assuming you have just started loading something (mc.loadMovie("someSWF.swf");
var loaderMon:HDLoader = new HDLoader(mc,loaderUpdate,loadComplete);

Author: Todd Williams
website: www.taterboy.com
website: hdinteractive.com
***********************************************************/

class com.hdi.as2.HDLoader{
var targMC:Object;
var monFunc:Function;
var finFunc:Function;
public function HDLoader(targ,mfunc,func){
init(targ,mfunc,func);
}
private function init(targ,mfunc,func){
var lbytes,tbytes,perc;
var frameParent:Object = targ._parent;
var cnt:Number = 3;
var frameObj:MovieClip = frameParent.createEmptyMovieClip("frameLdr",frameParent.getNextHighestDepth());
frameObj.onEnterFrame = function(){
lbytes = targ.getBytesLoaded();
tbytes = targ.getBytesTotal();
perc = Math.round((lbytes/tbytes)*100);
if (lbytes  200){
if(cnt == 0){
if(func != undefined){
func();
}
delete frameObj.onEnterFrame;
}
cnt --;
if(mfunc != null){
mfunc(100);
}
}
}
}
}

SWFObject is the standard for embedding swfs into your webpages. In Flash CS4 the javascript embed code and plug-in detection has been combined into one file. This is easier then keeping track of extra javascript files, search but not an easy way to transfer all that embed code to your web site. SWFObject has provided a great AIR app for producing the embed code, viagra order it is very handy and the easiest way to produce the required embed code. I wanted to make this process even easier, viagra so I created a couple template files that will embed your swf with swfobject directly from Flash or FLex. This is an update to a previous post, Exporting SWF Files With Custom HTML Templates. Remember to download the latest version of swfobject from their Google code site. These templates include more settings that are included in the Default Flash HTML templates so it is easy to update wmode, scale, salign and adding flashvars if needed. Flash Template: Name the file what ever you like and place in the following directory. The new option will show up in Template options under the HTML configuration tab of Publish Settings. Mac: ~User/Library/Application Support/Adobe/Flash CS4/language/Configuration/HTML/ PC: C:Documents and Settings user Local SettingsApplication DataAdobeFlash CS4 language ConfigurationHTML
$TTSWFObject
$DXDefaultDetection.html
$DS
Display Adobe Flash Movies with SWFObject. NOTE: You Must add swfobject.js and expressInstall.swf in the same directory as your swf.
$DF



$TI
$CS


var flashvars = {};

var params = {};
params.menu = "$ME";
params.quality = "$QU";
params.scale = "$SC";
params.salign = "$SA";
params.wmode = "$WM";
params.bgcolor = "$BG";
params.allowfullscreen = "false";
params.allowscriptaccess = "sameDomain";
var attributes = {};
attributes.id = "$TI";
attributes.name = "$TI";
attributes.align = "$HA";
swfobject.embedSWF("$TI.swf", "$TIDiv", "$WI", "$HE", "$FV,$JR,$NR", "expressInstall.swf", flashvars, params, attributes);










[ad#content_banner]

Flex Template: Name the file "index.template.html" and place in the html-template folder of your Flex Project. There is a direcotry of html templates in Adobe Flex Builder 3/sdks/ version /templates/ but have not figured out how to change the template source for each project.











${title}





function loadEventHandler() {
BrowserHistory.flexApplication = swfobject.getObjectById("${application}");
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
var MMdoctitle = document.title;
}
var flashvars = {};

var params = {};
params.menu = "false";
params.quality = "high";
params.scale = "showall";
params.salign = "tl";
params.wmode = "window";
params.bgcolor = "${bgcolor}";
params.allowfullscreen = "false";
params.allowscriptaccess = "sameDomain";
var attributes = {};
attributes.id = "${application}";
attributes.name = "${application}";
attributes.align = "middle";
swfobject.embedSWF("${swf}.swf", "${application}Div", "${width}", "${height}", "${version_minor}", "expressInstall.swf", flashvars, params, attributes);
swfobject.addLoadEvent(loadEventHandler);




body
{
margin: 0px;
background-color:${bgcolor};
}









Update:

Ran across this blog post today and liked the way the history and deep linking was included into the javascript. The Flex Template has been updated.
http://olegflex.blogspot.com/2008/06/swfobject-2-flex-template.html

Are you sick of trying to design around the existing Adobe AIR badge templates. In most cases they are way too large or have a look and feel that does not really match your design. A few companies have their own custom solutions with AIR badges that are nicely integrated into their sites. I wanted that for the updated ChessJam site, buy information pills but instead of building one badge for each size, visit this I wanted a completely flexible (one size fits all) solution from one swf.

The HDBadge Features:
1. One Size Fits All - The size of the badge is determined by the size you use in the object/embed code of the swf. The swf does not stretch, so you could have a badge that is 40x20 and 800x600 from the same swf, depending on your needs.

2. Smaller Footprint - One of the reasons the current badges are so large is they display AIR/App install error messages. This version hides the button after clicking revealing a console type area behind it. The error text conforms to the size of the swf.

Note: The button should be large enough to accommodate the longest message at 10pt which is "In order to run this application, this installer will also set up Adobe® AIR™."

[ad#content_banner]

3. Complete Design Control - You get to design the main button which is just a png or jpg, the background of the "console" after the button animates up and the color of the text in the console. All this plus the size are configured in the html object/embed code using flashVars.

4. Completely Non-Flash/Flex solution - Just make your images, update the flashVars and params of the object/embed code.

The HDBadge is a modification to AIRBadge by David Tucker
http://www.adobe.com/devnet/air/articles/air_badge_install.html

Sample Code using swfObject:


var flashvars = {};
//original variables
flashvars.appname = "Name of the Application";
flashvars.appurl = "url to application";
flashvars.airversion = "AIR version number";
flashvars.imgURL = "url to button png or jpg";
//modified HDBadge variables
flashvars.textColor = "color of status text (ffffff), just hex value without # or 0x";
flashvars.bkgURL = "url to the background png or jpg (console)"

var params = {};
params.menu = "false";
params.quality = "high";
params.scale = "noScale"; //*** makes badge width and height flexible
params.salign = "TL"; //*** keeps top corner pinned
params.wmode = "window";
params.bgcolor = "#ffffff";
params.allowfullscreen = "false";
params.allowscriptaccess = "sameDomain";
var attributes = {};
attributes.id = "HDBadge";
attributes.name = "HDBadge";
attributes.align = "middle";

swfobject.embedSWF("HDBadge.swf", "HDBadgeDiv", "any width", "any height", "9,0,0", "expressInstall.swf", flashvars, params, attributes);



Sample Of ChessJam Badge

Note: If you already have ChessJam installed or do not wish to install ChessJam at this time, just click CANCEL on the install dialog that pops up.

Download Files Here Complete Source Included, if you make modifications, please share them with us.

UPDATE:

From Adobe AIR Documentation on Installing and running AIR applications from a webpage:
Note: For the HTML embed tag that loads the badge.swf file, do not set the wmode attribute; leave it set to the default setting ("window"). Other wmode settings will prevent installation on some systems. Also, using other wmode settings produces an error: “Error #2044: Unhandled ErrorEvent:. text=Error #2074: The stage is too small to fit the download ui.”

The wmode has been changed to "window" in all source files. Bummer :(

Wow! Spotlighted by Adobe, viagra approved this is really awesome! I couldn't want to let the month go by without acknowledging how cool it is to have my pretty mug share the Adobe Devnet homepage with those of Kevin Lynch and Ben Forta. It is a great honor to have Adobe notice the work we are doing over here in Tampa. Thank You!

The Thank You Speech:
I would first like to thank.... (music starts playing) .. and It is an honor.... (Large suited men are closing in) ... the world would be a much better place if ... (being dragged off stage still clinging to the microphone, order dragging the podium behind us) .. and in closing I would like to say....

BTW:
My mom now has a print out of the Adobe Devnet homepage on her fridge, as well as bumper sticker on the back of her car saying "My son is Student of the month at Adobe.com/devnet".

The Links:
http://www.adobe.com/devnet/
http://www.adobe.com/devnet/spotlight/spotlight_twilliams.html

P.S. New Tour de Flex samples, as well as a few development tips are currently in the works. Client work and crazy hours has aside, I Hope to be posting them soon.

adobe-developer-spotlight-todd-williams

ABOUT THE AUTHOR

POST YOUR COMMENTS