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

Table of contents

• 1. Overview
• 2. Compatibility
• 3. Requirements
• 4. Installation and Usage
• 4.1. Installation
• 4.2. Installing a Major Update of JC Loader
• 4.3. Getting Started
• 4.4. Usage
• 5. JC Loader Patterns
• 5.1. JC Loader Patterns
• 5.2. Choosing a FlashEff2 Pattern
• 5.3. How FlashEff2 Patterns Work Together
• 6. Using the JC Loader Panel
• 6.1. Applying FlashEff2 Patterns
• 6.2. Previewing Your Work
• 6.3. Show Effects
• 6.4. Hide Effects
• 6.5. Customizing and Saving Effects
• 7. Notes

1. Overview

JC Loader is an Adobe Flash CS3/CS4 ActionScript 3.0 component created by JumpeyeComponents to provide an easy way for loading images (.jpg, .png, .gif) and flash animations, both external .swf files and movie clips from library, and for easily creating slide shows by applying transitions between images. The show/hide transitions are powered by the well-known FlashEff2 component that gives JC Loader a great variety of effects to choose from.

Since it has a similar workflow to the FlashEff2 component, you'll be able to set up effects in no time. The JC Loader component uses a configuration panel similar to the FlashEff2 Panel that enables you to quickly apply show/hide for the contents of component. Besides the configuration panel JC Loader also provides an API so it can also be set up by using ActionScript 3.0 code only.

Main features

• multiple scaling modes
• show/hide effects (powered by FlashEff 2.0)
• built-in preloader
• API for code manipulation
• FlashEff-like configuration panel utility

Note: The FlashEff 2.0 patterns used with JC Loader are built-in, therefore you don't need a separate FlashEff license to use this component.

2. Compatibility

ActionScript: 3.0
Flash IDE: Flash CS3, Flash CS4
FlashPlayer: FlashPlayer 9+

3. Requirements

1. JC Loader runs in Adobe Flash CS3 and CS4, AS3.0 only, on both Windows and Mac.

2. A permanent Internet connection and a JumpeyeComponents.com account are required to run the JC Loader Panel.

3. No coding skills are required unless you would like to use it in advanced/script mode; however, basic Flash CS3/CS4 knowledge is necessary.

4. Installation and Usage

JC Loader consists of two parts: the Component itself and the component’s Interface Panel.
The JC Loader Component (Window > Components) is the main part. It is the element that holds basic actions. Its role is to control and mediate between different objects and the FlashEff2 Patterns based upon the settings received from XML statements or directly from the JC Loader Panel.

The JC Loader Panel (Window > Other Panels > JCLoader Panel) is an online tool that loads within Flash CS3/CS4 itself (the Flash IDE). The JC Loader Panel is the interface you use to select, configure, and apply FlashEff2 effects to the loader's content. In other words, it’s the hands-on tool you’ll be using to create great Flash effects in your projects.

4.1. Installation

Installation requires Adobe Extension Manager Version 1.8 (Flash CS3) or Version 2 (Flash CS3 and Flash CS4). You can download it for free from the Adobe website at: http://www.adobe.com/exchange/em_download/.

Note: If you are installing a major update (i.e., you have been notified through the JC Loader Panel), please see Section 4.2.

1. Download the JC Loader package from your JumpeyeComponents.com account page, "My Downloads" menu.

2. Unzip/Unpack the files to a directory of your choice on your hard drive.

3. The .mxp installation file is located in the main directory of the unzipped files.

4. If you do not have Adobe Flash CS3 or CS4 opened, please open it.

5. Launch the Adobe Extension Manager from within the Adobe Flash IDE by selecting Help > Manage Extensions. If you have a prior version of JCLoader, uninstall that extension.


6. To install JCLoader, open the .mxp file using Adobe Extension Manager (click on the Install button or select the File > Install Extension menu item) and follow the prompts to complete the installation process.



Please remember Adobe Flash must be closed for the installation to take effect. Once the component has been successfully installed, open Adobe Flash and you'll find the component and its patterns inside the Components Panel (Window > Components) and the JC Loader Panel on the Window menu (Window > Other Panels > JCLoader Panel). The Panel is what you’ll use to configure your effects.

4.2. Installing a Major Update of JC Loader

When major updates of JCLoader are released, the JCLoader Panel will notify and prompt you to download the new version. The Download now button will take you to the Downloads List in your JumpeyeComponents.com account. From there, download the package again, save it to your disc, and unpack it in a destination folder of your choice as before.

First, if you have Adobe Flash opened we recommend you to save all your opened files and then open Adobe Extension Manager exactly as specified in the installation steps described earlier. Then, select the older version of the JCLoader Component and uninstall it (press the remove extension button or File > Remove extension). Next, follow the installation steps from paragraph 4.1.

Finally, once installed, close the Adobe Extension Manager and also close and open Adobe Flash CS3/CS4 for the installation to take effect. With any file open on which you were previously working, select one of the JCLoader Component instances and bring up the JCLoader Panel. Select Menu > Update fla to update all the FlashEff2 Patterns and the JCLoader Component from the library with the newly installed version. Please be patient as this process may take several minutes, depending upon the complexity of your project.

Note: For non-English versions of Adobe Flash we recommend opening the Adobe Extension Manager directly from Adobe Flash: open Adobe Flash, from the Help menu select "Manage Extensions" and install the component using the install button or the File > Install extension menu item.

4.3. Getting Started

The JC Loader Component can be used to apply build-in and build-out effects on loaded data (external images or .swf files and objects from the Library). This is the only component that needs to be in the display list/stage when creating effects. The other components, the FlashEff2 Patterns, only have to be in the library of your project (these patterns are added automatically so you don't have to worry about placing them to your project's library); they don't need to be placed in the display list.

4.4. Usage

Let’s take a look at general usage and explanation of the patterns (Section 5) before we actually begin to work with the Component and Panel (Section 6). Using JC Loader for animation effects requires a few easy steps:

1. Open Adobe Flash CS3/CS4 and create a new AS3 file: select File > New > Flash File (ActionScript 3.0).


2. Open the Components panel (Window > Components or Ctrl + F7 for Windows/Cmd + F7 for Mac OS) and, from the JCLoader folder, select the JCLoader component. Then drag it and place it on the stage.


3. Next, specify the source image/clip that will be loaded into the JC Loader component and which of the FlashEff2 Patterns you want to apply for show/hide effects, through the JC Loader Panel. For this, make sure you have selected the JC Loader Component you just placed on the stage and open the JC Loader Panel (Window > Other panels > JCLoader Panel). Login to your JumpeyeComponents account if so prompted (requires permanent internet connection).


Note: You have to purchase the component in order to use the JC Loader Panel (which logs into your JumpeyeComponents.com account). If you do not have the component in the downloads list of your JumpeyeComponents.com account, a warning message will be displayed and the JC Loader Panel will not work.


4. If the JC Loader component instance is selected, the JC Loader Panel will display information for that particular instance. On the JC Loader Panel, set the source property and choose one of the patterns you would like to apply for the show/hide patterns from the corresponding lists. Once you select the pattern you like, the JC Loader Panel will import it automatically to the library.


Note: The patterns and presets are displayed as lists of icons. Each icon is actually a preview of the pattern/preset. To see the animation of a pattern or preset, simply roll your mouse over the icon.


Note: Some of the patterns will only work for Flash Player 10 and can be applied with Adobe Flash CS4.

5. Once you choose a pattern, you may customize it and test your file by hitting Ctrl + Enter for Windows or Cmd + Enter for Mac OS.


Note: From this point onward, to load more images/clips with show/hide effects, you can simply use multiple JC Loader instances on the stage. To do this, drag the JC Loader Component from your library over the stage; then, use the JC Loader Panel to configure your source image/clip and effects.

If you would like to use a single JC Loader instance for your slide show and continually change the source property you need to use ActionScript 3.0 code (intermediate or advanced Flash/coding skills are required).

5. JC Loader Patterns

JC Loader uses scripts to generate all kinds of animations based upon the user's settings. These scripts are the same scripts used by FlashEff2 and are saved individually within the JC Loader framework as SWC files/components and are called "FlashEff2 Patterns."

For a FlashEff2 Pattern to work, it has to be imported into your library (the imported SWC resides in the Flash project's library and is not imported as a separate AS file). The JC Loader Panel imports the pattern automatically after you select it from the patterns list.

5.1. JC Loader Patterns

JC Loader currently uses only one of types of FlashEff2 Patterns - the symbol patterns (prefix: FES) - that are used for creating the show and hide effects. FES patterns are used for Symbol animations, meaning that they are used to create show and hide animations on the display objects loaded into the JC Loader component (images or movie clips).

5.2. Choosing a FlashEff2 Pattern

The FlashEff2 Patterns are grouped together based upon the type of actions they produce (show and hide). Depending upon the type of effect you want to apply, select one of the Show or Hide tabs. Each tab contains another set of tabs used for selecting and customizing the pattern.

The Effect tab contains the list of all the patterns included in that category. The patterns in the lists are displayed as icons, which are actually previews of the effects. Rolling your mouse over the respective icons activates the previews. To choose a FlashEff2 pattern for the currently selected JC Loader component, simply click it. This will open up the presets list for that pattern.


Once a preset has been selected or the effect parameters have been set, the current effect may then be previewed by clicking on the top-left viewing pane of the tab.

5.3. How FlashEff2 Patterns Work Together

You can apply a show and/or a hide transition on any JCLoader instance. Then, you can further enhance the component by using the FlashEff2 component over the entire JCLoader component (containing show/hide transitions) to apply FlashEff2 filter patterns.

Important! Due to individual characteristics of each pattern, we do not recommend the use of more than one type of FlashEff2 filter pattern on the same JCLoader instance. However, FlashEff2 allows this to occur, because in most cases blending different types of patterns on the same FlashEff2 instance actually works (i.e., the JCLoader Panel allows you to apply a maximum of 3 filters on the same target object - the JCLoader component in this case).

Now, let’s get to work and play!

6. Using the JC Loader Panel

6.1. Applying FlashEff2 Patterns

The easiest and most common way to apply show/hide transitions on the JCLoader's contents is by using the JCLoader Panel. From the panel you may select any patterns you want to apply to your JCLoader instance, easily customize them, and preview the result of your pattern configuration.

1. First, either select a JCLoader Component instance from the stage or drag an instance of the JCLoader Component to the stage.

2. Open the JCLoader Panel (Window > Other Panels > JCLoader Panel). If prompted, log in with your JumpeyeComponents.com account username and password.

3. Make sure the JCLoader Component is selected on the stage. In the JCLoader Panel, select the type of effect you want to apply (show or hide) from the appropriate tab.

4. The selected pattern has a number of existing presets from which you may choose.

5. To customize the selected pattern further, you may change the property values in the Edit Settings section of that pattern preset.


6. For each selected animation the FlashEff2 Pattern is automatically imported into the library.

Note: After experimenting with more patterns, you will notice they have all been imported into your project library. We recommend you to remove the unused patterns, using the Menu > Optimize fla option located on the top-right side of the panel.

If you accidentally remove patterns from the library and you’re not sure which patterns they were, you may use the Menu > Update fla option to let the JCLoader Panel scan your project. It will import the patterns that have been applied but are not found in the library.

Important! These operations are time consuming and use a lot of CPU power depending upon the number of JCLoader Component instances in your .fla file. Also, depending on the amount of JCLoader instances you've created, these operations may not import all the missing patterns or may not remove all the extra patterns, so it is always a good idea to check all the FlashEff2 patterns you used. If you get a "missing pattern" error, you can always drag the missing patterns manually from the Components window > JCLoader Paterns folder.

6.2. Previewing Your Work

The patterns and presets are displayed as lists of icons. Each icon is actually a preview of the pattern/preset. To view the animation of a pattern or preset, simply roll your mouse over the icon to see the example effect play.

To preview your selected pattern, along with any customization you may have made, each preset type has a preview pane area in the top-left corner of the corresponding tab. To preview your effects simply click on the viewing pane.

By selecting the Menu > Preview option, you may preview the entire effect applied on the target object - both, the show and hide effects, if they are set.

6.3. Show Effects

1. In the JC Loader Panel select the Show tab (remember that a JC Loader Component instance from the stage must be selected first) and then select the Effect tab, if it isn't already selected.

2. From the patterns list, select the pattern you wish to apply.

3. From the presets list, select the preset you want to apply.

4. To customize the animation use the settings from the Edit settings button or from the Tween tab.

5. If you test your Flash movie (press Ctrl + Enter for Windows or Cmd + Enter for Mac OS), JC Loader will apply your selected show effect after the content has loaded.

6. To remove a show effect from the JC Loader Component instance, deselect the preset or the pattern; return to the presets or patterns list and select the item None from that list.

6.4. Hide Effects

1. In the JC Loader Panel select the Hide tab (remember that a JC Loader Component instance from the stage must be selected first) and then select the Effect tab, if it isn't already selected.

2. From the patterns list, select the pattern you wish to apply.

3. From the presets list, select the preset you want to apply.

4. To customize the animation use the settings from the Edit settings button or from the Tween tab.

5. If you test your Flash movie (press Ctrl + Enter for Windows or Cmd + Enter for Mac OS), JC Loader will apply your selected hide effect after the content has loaded.

6. To remove a hide effect from the JC Loader Component instance, deselect the preset or the pattern; return to the presets or patterns list and select the item None from that list.

6.5. Customizing and Saving Effects

Once you select a pattern and the list of presets opens, you may choose a preset from the list. A preset is a pre-configured effect. The JC Loader Panel allows you to further customize the pattern by setting each of the pattern parameters as you wish.

Once you’ve finished tweaking the pattern settings, you may save those settings as your own custom preset. Click on the Save preset button, give it a name in the opening dialog, and click the OK button. The next time you select the same pattern and the presets list appears, your preset will be among the existing ones.


Other settings may be done in the Tween tab, available for the Show and Hide patterns. Here you can set the type of tween the effect will have and the duration of the effect.

6.6. Using the Same Settings for Multiple JC Loader Instances

In case you need multiple instance of the JC Loader component and you would like to use the same settings for all of the JC Loader instances, you don't have to redo the settings all over again, for each instance of the component. You can simply use the JC Loader Panel to make the desired settings for one JC Loader instance, use the Copy button (from the top-right menu of the panel) to copy the settings to the clipboard (in the form of XML data), select the next JC Loader instance you want to set up and then use the Paste button in the JC Loader Panel, for the rest of the component instances:

1. Select one of the JC Loader instances on the stage and bring up the JC Loader Panel to make the desired effect settings (Window > Other Panels > JCLoader Panel).

2. Once you set up the selected JC Loader instance, press the Copy button located on the top-right side of the panel to copy the settings to the clipboard.

3. Next, select any of the other JC Loader instances and inside the JC Loader Panel use the Paste button to copy the effect settings. You will be prompted to confirm which of the FlashEff2 patterns you want to apply, in case you have set up multiple patterns (on for the show effect and another one for the hide effect).

7. Notes

Due to the special loading process used by the component, the preloader will not be displayed when loading data from the local hard drive or when loading items from the Library (which usually is done almost instantly). When testing the component within the Adobe Flash IDE, the built-in preloader will only be displayed if JC Loader loads data from the Internet. Please note that in this case too, the preloader will no longer be displayed once the data has already been downloaded from the Internet to the local hard drive.

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