My account
Shopping cart
Knowledge base
Support


JC Loader - ActionScript 3.0 usage


home » flash components » user interface » jc loader » jc loader - actionscript 3.0 usage »


Overview | Properties | Methods | Events | ActionScript 3.0 usage | User Manual

Use JC Loader by code

Here are the steps you need to follow in order to use the JC Loader component with ActionScript 3.0 code:

1. Create a new Flash ActionScript 3.0 file and set its frame rate to 30 fps. Open up the Components panel (Ctrl + F7 for Windows or Command + F7 for Mac), select the JC Loader and drag it over the Library panel. For this example we'll be using the FESBrightSquares FlashEff2 pattern so you'll need to drag the FESBrightSquares pattern from the JCLoader Patterns in the Components panel over the Library panel. Next, bring up the Actions panel (F9 for Windows or Option + F9 for Mac) and paste the following lines of code inside it.

2. Import the necessary classes for the JC Loader component, the JC Loader events class (JCLoaderEvent) and the pattern class for the FESBrightSquares:

import JCLoader;
import com.jumpeye.Events.JCLoaderEvent;
import com.jumpeye.flashEff2.symbol.brightSquares.FESBrightSquares;

3. Create and set up the FlashEff2 pattern:

var transitionEffect:FESBrightSquares = new FESBrightSquares();
transitionEffect.squareWidth = 30;
transitionEffect.squareHeight = 30;
transitionEffect.tweenDuration = 2;

4. Create and set up the JC Loader instance:

var myLoader:JCLoader = new JCLoader();
myLoader.x = 10;
myLoader.y = 10;
myLoader.width = 400;
myLoader.height = 300;

myLoader.scaleMode = "scaleCrop";
myLoader.alignMode = "centerMiddle";
myLoader.builtInPreloader = true;

addChild(myLoader);

5. Set the loader instance to automatically hide the content after 2 seconds:

myLoader.hideDelay = 2;
myLoader.hideAutoPlay = true;

6. Apply the FlashEff2 pattern instance to the JC Loader instance (the same pattern will be used for both the show and hide effects):

myLoader.showTransition = transitionEffect;
myLoader.hideTransition = transitionEffect;

7. Listen for events triggered by the component:

myLoader.addEventListener(JCLoaderEvent.TRANSITION_START, transitionStarted);
myLoader.addEventListener(JCLoaderEvent.TRANSITION_END, transitionEnd);

function transitionStarted(evt:JCLoaderEvent):void {
    trace(myLoader.currentTransitionType+" transition has started");
}

function transitionEnd(evt:JCLoaderEvent):void {
    trace(myLoader.currentTransitionType+" transition has ended");
}

8. Set the source property of the component. Once you set the source property the JC Loader component will start loading the content from the Library or from the external path you specify (in this case the image is named "image.jpg"):

myLoader.source = "image.jpg";

9. Compile the application by hitting Ctrl + Enter for Windows or Cmd + Enter for Mac.


Properties

Property Type
JC Loader Panel		 Description
alignMode String
yes		 The type of horizontal and vertical alignment used for the content. Possible values: topLeft, topMiddle, topRight, centerLeft, centerMiddle, centerRight, bottomLeft, bottomMiddle, bottomRight.

The default value is topLeft.

Example
Center the content inside the JC Loader component:

myJCLoader.alignMode = "centerMiddle";
builtInPreloader Boolean
yes		 Specifies whether the component's own preloader will be displayed.

Note: When testing the component on your local computer, it will not display the preloader if it is loading content from your local disk, since the loading process is very fast in this case. The preloader will only be displayed if the JC Loader component loads content from the Internet.

The default value is true.

Example
Hide the preloader while the content is loading:

myJCLoader.builtInPreloader = false;
content Object
no		 A reference to the content loaded into the component. If the content is an external file (image or flash clip), the property returns a reference to the Loader class instance. If the content is a Flash clip, the property returns a reference to the instance of the clip loaded from the library.
currentTransitionType String
no		 [read-only] Specifies the type of the transition currently applied on the content. Possible values are show and hide. Useful when a JCLoaderEvent.TRANSITION_END is dispatched and you want to find out the type of transition that has just finished. Possible values are show, hide and swap.

Example
Find out which type of transition starts or ends (show or hide):

import com.jumpeye.Events.JCLoaderEvent;

myJCLoader.addEventListener( JCLoaderEvent.TRANSITION_START, transitionStartHandler);
myJCLoader.addEventListener( JCLoaderEvent.TRANSITION_END, transitionEndHandler);

function transitionStartHandler(evtObj: JCLoaderEvent):void {
    trace("The " + evtObj.target.currentTransitionType + " transition has started.");
}

function transitionEndHandler(evtObj: JCLoaderEvent):void {
    trace("The " + evtObj.target.currentTransitionType + " transition has ended.");
}
height Number
no		 Sets the height of the JC Loader instance. The content will be displayed depending on the size of the JC Loader component and the value of the scaleMode property.

Example
Resize the loader component:

myJCLoader.width = 400;
myJCLoader.height = 300;
hideAutoPLay Boolean
yes		 Specifies whether the content will hide automatically, using the hide transition, after being displayed for a time interval specified by the hideDelay property.

The default value is false.

Note: After the auto hide transition ends the content is unloaded from the loader.

Example
Make the currently loaded content hide automatically after being displayed for three seconds, without loading a new content.

myLoader.hideDelay = 3;
myLoader.autoHideDelay = true;
hideDelay Number
yes		 The time interval measured in seconds between the end of the show transition and the beginning of the hide transition. This is actually the time interval during which the content is displayed.

This value is taken into consideration only if hideAutoPlay is set to true.

The default value is 2.

Note: After the auto hide transition ends, the content is unloaded from the loader.

Example
Make the currently loaded content hide automatically after being displayed for three seconds, without loading a new content.

myLoader.hideDelay = 3;
myLoader.autoHideDelay = true;
hideTransition IFlashEffSymbol
no		 A reference to the instance of the pattern used for the hide transition. When used from code, this reference is created separately by using the pattern's constructor. Otherwise the hide pattern can be selected from JCLoader Panel -> Hide tab -> Pattern list.

Example
The next example applies a hide transition on the content loaded into the JC Loader component, based on the FESAlpha pattern.

import com.jumpeye.flashEff2.symbol.alpha. FESAlpha;

var myPattern:FESAlpha = new FESAlpha();
var myJCLoader:JCLoader = new JCLoader();

myJCLoader.hideTransition = myPattern;
myJCLoader.delay = 3;
this.addChild(myJCLoader);
myJCLoader.source = "myImage.jpg";
hideTransitionName String
no		 The full path and class name of the pattern used for the hide transition. This hide transition switches the content from a visible state to an invisible state, using an effect provided by the selected pattern. If you need to apply a hide transition on the loaded content, first you have to set that pattern to the JC Loader instance either by setting the hideTransitionName or the hideTransition property or by selecting a pattern in JCLoader Panel -> Hide tab -> Pattern list.

Example
The next example applies a hide transition on the content loaded into the JC Loader component, based on the FESAlpha pattern.

var myJCLoader: JCLoader = new JCLoader();
myJCLoader.hideTransitionName = "com.jumpeye.flashEff2.symbol.alpha. FESAlpha";
this.addChild(myJCLoader);
myJCLoader.source = "myImage.jpg";
initialContentHeight Number
no		 The original height of the content, before applying any scale modes on it. The value can be accessed after the content has loaded.
initialContentWidth Number
no		 The original width of the content, before applying any scale modes on it. The value can be accessed after the content has loaded.
isTargetVisibleAtEnd Boolean
no		 Controls the way the content looks after the effect applied on it has ended. If true, the content will be displayed in the original form (might slightly differ in position from the content with the effect applied on it). If false, the content will remain in the final state after the effect has ended. This final state is not necessarily the original content; it might by only a copy of it, on which the actual effect was applied.

If removeEffect() is called during the show on the JC Loader instance and the property is set to true after the transition stops and the object displayed will be the original content and not the BitmapData copy of it.

If the property is set to true, it is recommended that the x and y coordinates of the JC Loader instance are integer values, otherwise you may experience some position shifting after the transition has ended and the content is displayed in the initial state.

The default value is true.

Example
myJCLoader.isTargetVisibleAtEnd = true;
isTransitioning Boolean
no		 [read-only] Specifies whether there is a transition going on (true) or not (false).

Example
Load an image into the JC Loader instance with a show transition. During this time, check for each frame if the component is applying any transition or not:

import com.jumpeye.flashEff2.symbol.alpha. FESAlpha;

var isTransitionHappening:Boolean;
var myPattern:FESAlpha = new FESAlpha();
var myJCLoader:JCLoader = new JCLoader();
myJCLoader.showTransition = myPattern;
this.addChild(myJCLoader);
myJCLoader.source = "myImage.jpg";
isTransitionHappening = true;

this.addEventListener(Event. ENTER_FRAME, loop);

function loop(event:Event):void {
    if (isTransitionHappening != myJCLoader.isTransitioning) {
        trace((myJCLoader. isTransitioning ? "transition in course" : "no transition at the moment"));
        isTransitionHappening = myJCLoader.isTransitioning;
    }
}

 In the Output panel the clip will trace the values of the isTransitioning property while the clip is running:

no transition at the moment
transition in course
no transition at the moment
loaderContext LoaderContext
no		 A LoaderContext object, which has properties that define the following:
  • whether or not to check for the existence of a policy file upon loading the object
  • the ApplicationDomain for the loaded object
  • the SecurityDomain for the loaded object

If the context parameter is not specified or refers to a null object, the loaded content remains in its own security domain.
scaleMode String
yes		 The type of scaling applied on the content. Possible values:
  • scaleCrop - scales the content so it fills in the entire size of the container and then crops the parts of the content that do not fit;
  • exactFit - resizes the content so that it takes the same size as the component - may distort the content if the JC Loader instance does not have the same scale ratio as the content;
  • maintainAspectRatio - scales the content so that it fits entirely inside the component - does not necessarily fill in the entire JC Loader instance;
  • noScale - keeps the content at its original size and resizes the component to that size (if it is the case);
  • crop - keeps the content at its original size and only displays a part of it, according to the component's size.

The default value is scaleCrop.

Example
Set the component to display the entire image in its original size:

myJCLoader.width = 400;
myJCLoader.height = 300;
myJCLoader.scaleMode = "noScale";
myJCLoader.source = "myImage.jpg";

In this case, the component will discard the size set previously using the width and height properties and will set its size to the same size the image has.
showTransition IFlashEffSymbol
no		 A reference to the instance of the pattern used for the show transition. This reference is created separately by using the pattern's constructor. Otherwise the show pattern can be selected from JCLoader Panel -> Show tab -> Pattern list.

Example
The next example applies a show transition on the content loaded into the JC Loader component, based on the FESAlpha pattern.

import com.jumpeye.flashEff2.symbol.alpha. FESAlpha;

var myPattern:FESAlpha = new FESAlpha();
var myJCLoader: JCLoader = new JCLoader();
myJCLoader.showTransition = myPattern;
this.addChild(myJCLoader);
myJCLoader.source = "myImage.jpg";
showTransitionName String
no		 The full path and class name of the pattern used for the show transition. This show transition switches the content from an invisible state to a visible state, using an effect provided by the selected pattern. If you need to apply a show transition to the loaded content, first you have to set that pattern to the JC Loader instance either by setting the showTransitionName or the showTransition property or by selecting a pattern in JCLoader Panel -> Show tab -> Pattern list.

Example
The next example applies a show transition on the content loaded into the JC Loader component, based on the FESAlpha pattern.

var myJCLoader: JCLoader = new JCLoader();
myJCLoader.showTransitionName = "com.jumpeye.flashEff2.symbol.alpha. FESAlpha";
this.addChild(myJCLoader);
myJCLoader.source = "myImage.jpg";
source String
yes		 The class name (linkage id) or the file path and name of the content that will be loaded by the JC Loader instance. The JC Loader is able to load display objects from the Library of your project or external images (.jpg, .png, .gif) and .swf files.

Example
Load an external image file into the component:

myJCLoader.source ="http://www.mysite.com/myImage.jpg";

 Load a movie clip from the Library into the component by specifying the class name (linkage id) of the clip from the Library:

myJCLoader.source = "MyMovieClip";
swapDelay Number
yes		 Used by the swap transition - the time interval, measured in seconds, from the start of the hide transition on the currently displayed content until the start of the next show transition on the newly loaded content.

In case of a swap delay of 0 seconds, the hide and show transitions will start at the same time.

The default value is 0.

Example
Start the next show transition 2 seconds after the hide transition has started:

myJCLoader.swapDelay = 2;

 Start the next show transition right after the hide transition ended. In this case the swapDelay value should be the same as the tweenDuration value of the hide transition, but first the hide transition must be checked if it is applied on the JC Loader instance:

if (myLoader.hideTransition != null)
    myLoader.swapDelay = myLoader.hideTransition.tweenDuration;
swapType String
yes		 The way consecutive contents will be displayed. Possible values are JCLoader.SWAP_TYPE_SHOW, JCLoader.SWAP_TYPE_HIDE and JCLoader.SWAP_TYPE_HIDE_AND_SHOW
  • JCLoader.SWAP_TYPE_SHOW or "show" - leaves the current content in place, without hiding it and executes only a show transition on the next content;
  • JCLoader.SWAP_TYPE_HIDE or "hide" - executes only a hide transition on the current content and the next content is made visible (if it was invisible prior to the operation) without any transition effects;
  • FlashEff2.SWAP_TYPE_HIDE_AND_SHOW or "hideAndShow" - executes a hide transition on the current content and a show transition on the next content.

The swap transition (hide/show/hideAndShow) only takes place if the source property is set to a new value (a new content is loaded). The show transition will always take place on the first loaded content but only of the show transition pattern is defined. When setting the swapType property, please make sure that the appropriate transitions are defined: a show transition pattern if swapType is "show", a hide transition pattern if swapType is "hide" or both show and hide transition patterns if swapType is "hideAndShow".

The default value is hideAndShow.
width Number
no		 Sets the width of the JC Loader instance. The content will be displayed depending on the size of the JC Loader component and the value of the scaleMode property.

Example
Resize the loader component:

myJCLoader.width = 400;
myJCLoader.height = 300;
xmlPath String
no		 The path and name of the .xml file used to set up the current JC Loader instance. If such a file is defined and set to the component instance, then when the component initializes, the settings from the .xml file will override any other settings done through the JC Loader Panel or through ActionScript code (if those were made before setting the xmlPath property).

Example
Set up the JC Loader instance by using an external XML file:

myJCLoader.xmlPath = "http://www.mySite/myXML.xml";


Methods

Method Description
hide Starts the hide transition if there is a hide transition set on the target JC Loader component instance. By calling the hide method, the content is unloaded after the transition ends.
removeAll Removes all the show/hide effects added to the JCLoader component instance, canceling any functionality provided by them. This method will not remove the JCLoader instance. To remove the JCLoader instance too, you'll need to remove it from the display list.
removeEffect Stops and removes an effect applied to the target JC Loader instance, while that effect is still playing. This function will not have any effect if it's applied before the effect starts or after the effect has finished (except when isTargetVisibleAtEnd is set to true and the transition type was hide). Depending on the value of the internalCall argument, it can trigger a JCLoaderEvent.TRANSITION_END event or not. If the method was called from within an internal class or a pattern object, this parameter should be true and the event will not trigger. If the method was called from outside the JCLoader class or outside the patterns, then the parameter's value should be false (the default value) and the JCLoader.TRANSITION_END event will be triggered.

This also has the possibility to remove a specific show/hide pattern from the JC Loader instance, by specifying a second argument. If that pattern argument is not specified, the method removes the current show/hide pattern that is being applied (while the transition is going on).

In the case of a hide transition the target object will be rendered invisible in the end, by the transition. If removeEffect() is called after the transition has finished, the target object will be displayed only if the isTargetVisibleAtEnd is set to true, otherwise the target object will remain hidden (the method has no effect).

Parameters
internalCall : Boolean (default = false) - [optional] Instructs the method to dispatch a FLASHEFFEvents.TRANSITION_END event, if the value is false, that is if the method is not called from inside a pattern object.
pattern : IFlashEffSymbolText (default = null) - The show/hide pattern that should be removed from the list of patterns applied to the JC Loader instance.
removeHideTransition Removes the current pattern used for the hide transition.
removeShowTransition Removes the current pattern used for the show transition.
setXML Allows setting up the component according to xml data passed as parameter. The xml data is the same as the one obtained through the Copy button from within the JC Loader Panel.

Note: When setting a new XML object, the already existing settings and show/hide patterns will be overwritten.

Parameters
xml : * - The XML object that contains setup information for the JC Loader component instance. It can be either of type XML, a XML object created by code, or of type String, the same xml data passed as String argument.
unload Unloads the content from the JC Loader instance. The unload process does not apply the hide transition but simply removes the content.

Note: If the content is a Flash clip that loads streams, those streams will not be unloaded and the content will not be cleared from the memory.


Events

Event Description
JCLoaderEvent.TRANSITION_START Dispatched by the JC Loader component when a show, hide or a swap transition has started. You can get the type of transition from the currentTransitionType property.

Example
Listen for the start and end of a show, hide or a swap transition:

import com.jumpeye.Events.JCLoaderEvent;

myLoader.addEventListener(JCLoaderEvent. TRANSITION_START, transitionStarted);
myLoader.addEventListener(JCLoaderEvent. TRANSITION_END, transitionEnd);

function transitionStarted(evt:JCLoaderEvent): void {
    trace(myLoader.currentTransitionType + " transition has started");
}

function transitionEnd(evt:JCLoaderEvent): void {
    trace(myLoader.currentTransitionType + " transition has endded");
}
JCLoaderEvent.TRANSITION_END Dispatched by the JC Loader component when a show, hide or a swap transition has ended. You can get the type of transition from the currentTransitionType property.

Example
Listen for the start and end of a show, hide or a swap transition:

import com.jumpeye.Events.JCLoaderEvent;

myLoader.addEventListener(JCLoaderEvent. TRANSITION_START, transitionStarted);
myLoader.addEventListener(JCLoaderEvent. TRANSITION_END, transitionEnd);

function transitionStarted(evt:JCLoaderEvent): void {
    trace(myLoader.currentTransitionType + " transition has started");
}

function transitionEnd(evt:JCLoaderEvent): void {
    trace(myLoader.currentTransitionType + " transition has endded");
}
Event.OPEN Dispatched by the JC Loader component at the moment it starts loading the specified content.

Example
myLoader.addEventListener(Event.OPEN, loadingStarted);

function loadingStarted(evt:Event):void {
    trace("Loading just started...");
}
Event.COMPLETE Dispatched by the JC Loader component after it has completely loaded the specified content.

Example
myLoader.addEventListener(Event. COMPLETE, loadingComplete);

function loadingComplete(evt:Event):void {
    trace("Loading has completed...");
}
ProgressEvent.PROGRESS Dispatched by the JC Loader component during the loading process of the content. This can be used to find out how much of the total content has loaded. This information (the amount of loaded data) and the total size of the data is given in bytes.

Properties
bytesLoaded : uint - the number of bytes loaded so far.
bytesTotal : uint - the total number of bytes that will be loaded.

Example
import flash.events.ProgressEvent;

myLoader.addEventListener(ProgressEvent. PROGRESS, loadProgress);

function loadProgress(evt:ProgressEvent):void {
    var percent:Number = Math.round(evt.bytesLoaded / evt.bytesTotal * 100);
    trace(percent+" % loaded of "+evt.bytesTotal+" total bytes");
}
IOErrorEvent.IO_ERROR Dispatched when the JC Loader component instance encounters an error while the external content is being loaded.

Properties
text : String - the text to be displayed as an error message.

Example
import flash.events.IOErrorEvent;

myLoader.addEventListener(IOErrorEvent. IO_ERROR, errorLoading);

function errorLoading(evt:IOErrorEvent): void {
    trace("The image could not be loaded: "+evt.text);
}
SecurityErrorEvent.SECURITY_ERROR Dispatched by the JC Loader component if the content cannot be accessed/loaded due to security issues - mainly because the location is not in exactly the same domain as the calling SWF, and the requested domain has not authorized cross-domain access by way of a cross-domain policy file.

Properties
text : String - the text to be displayed as an error message.

Example
import flash.events.SecurityErrorEvent;

myLoader.addEventListener( SecurityErrorEvent.SECURITY_ERROR, securityError);

function securityError(evt:SecurityErrorEvent): void {
    trace("There is a security issue: "+evt.text);
}


Overview | Properties | Methods | Events | ActionScript 3.0 usage | User Manual

Image and flash loader component with transition effects based on FlashEff 2.0. The pack contains the .mxp install file, the documentation files and the sample files.
Multiple scaling modes
1000+ show/hide effects (based on 52 FlashEff 2.0 patterns)
Built-in preloader
API for code manipulation
FlashEff-like configuration panel utility

Best selling

FlashEff 2.0 Premium Plus
FlashEff 2.0 Premium Plus

3000+ text animation effects, transition effects filters, interactive buttons

View more | Free version


SlideshowBox 2.0
SlideshowBox 2.0

The best Flash photo galleries. Create custom Flash XML slideshows

View more | Free version


SliderWall
SliderWall

The best jQuery slider for all types of sliders, from dynamic feeds to image sliders

View more | Free version


We accept PayPal and
Amazon Payments

We accept PayPal, Google Checkout and Amazon Payments