Feathers UI
  • Docs
  • API
  • Showcase
  • Blog
  • Community

›UI Components

Introduction

  • Getting Started
  • Installation
  • Create a new project in…

    • Command line terminal
    • HaxeDevelop
    • Moonshine IDE
    • Visual Studio Code

    Build a project targeting…

    • Android
    • Electron
    • HashLink VM
    • iOS
    • Linux
    • macOS
    • Neko VM
    • Web
    • Windows
  • Introduction to OpenFL

UI Components

  • Intro to UI components
  • Alert
  • Application
  • AssetLoader
  • Button
  • ButtonBar
  • Callout
  • Check
  • ComboBox
  • DatePicker
  • HDividedBox / VDividedBox
  • Drawer
  • Form / FormItem
  • GridView
  • GroupListView
  • Header
  • HierarchicalItemRenderer
  • ItemRenderer
  • Label
  • LayoutGroup
  • LayoutGroupItemRenderer
  • ListView
  • NumericStepper
  • PageIndicator
  • PageNavigator
  • Panel
  • PopUpDatePicker
  • PopUpListView
  • HProgressBar / VProgressBar
  • Radio
  • RouterNavigator
  • HScrollBar / VScrollBar
  • ScrollContainer
  • HSlider / VSlider
  • StackNavigator
  • TabBar
  • TabNavigator
  • TextArea
  • TextCallout
  • TextInput
  • ToggleButton
  • ToggleSwitch
  • TreeGridView
  • TreeView

Layouts

  • Intro to Layouts
  • AnchorLayout
  • FlowRowsLayout
  • HorizontalLayout
  • HorizontalListLayout
  • HorizontalDistributedLayout
  • ResponsiveGridLayout
  • TiledRowsLayout
  • TiledRowsListLayout
  • PagedTiledRowsListLayout
  • VerticalLayout
  • VerticalListFixedRowLayout
  • VerticalListLayout
  • VerticalDistributedLayout
  • Layout Data
  • Custom layouts

Styles and Skins

  • Intro to skins
  • Common shape skins
  • Custom programmatic skins
  • Intro to themes
  • Create a custom theme

Animation

  • Navigator animated transitions
  • Custom navigator transitions

Custom UI Components

  • Custom UI components
  • Component lifecycle
  • Custom item renderers
  • Class-based item renderers

Miscellaneous

  • CLI commands
  • Collections
  • Focus management
  • haxedef options
  • Displaying pop-ups
  • Semantic versioning
  • Tool-tips
  • Cookbook
  • Install Prerelease Builds
Edit

How to use the AssetLoader component

The AssetLoader class loads and displays visual assets, such as images or SWF library symbols.

Live preview of the AssetLoader component

The Basics

Create an AssetLoader control and add it to the display list.

var loader = new AssetLoader();
addChild(loader);

Two different types of assets may be loaded.

  • Assets defined in the OpenFL project.xml file of type IMAGE or MOVIE_CLIP.
  • A URL loaded from the web in any format supported by openfl.display.Loader.

To load an asset defined in project.xml, set the source property to the name of the asset.

loader.source = "my-asset-id";

Alternatively, to load an asset from the web, set the source property to the asset's URL.

loader.source = "https://example.com/img/asset.png";

Events

Add an event listener for Event.COMPLETE to perform an action when the image finishes loading.

loader.addEventListener(Event.COMPLETE, loader_completeHandler);

Listeners for Event.COMPLETE have the following function signature.

function loader_completeHandler(event:Event):Void {
    var loader = cast(event.currentTarget, AssetLoader);
    trace("asset loaded: " + loader.source);
}

Add an event listener for IOErrorEvent.IO_ERROR and SecurityErrorEvent.SECURITY_ERROR to perform an action if the asset fails to load.

loader.addEventListener(IOErrorEvent.IO_ERROR, loader_ioErrorHandler);
loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, loader_securityErrorHandler);

These listeners should have the following function signatures.

function loader_ioErrorHandler(event:IOErrorEvent):Void {
    var loader = cast(event.currentTarget, AssetLoader);
    trace("asset i/o error: " + loader.source + " => " + event.text);
}

function loader_securityErrorHandler(event:SecurityErrorEvent):Void {
    var loader = cast(event.currentTarget, AssetLoader);
    trace("asset security error: " + loader.source + " => " + event.text);
}

Related Links

  • feathers.controls.AssetLoader API Documentation
Last updated on 2/1/2022
← ApplicationButton →
  • The Basics
    • Events
  • Related Links
Feathers UI
Feathers UI
  • Downloads
  • Showcase
  • Testimonials
  • Premium Support
Documentation
  • Getting Started
  • API Reference
  • Samples
    Github
  • Source Code
  • Issue Tracker
Community
  • Forum
  • Discord
  • Stack Overflow
News & Updates
  • Blog (RSS, Atom)
  • Twitter
Make a Donation
  • Join Github Sponsors
  • Donate with PayPal
  • Buy a T-Shirt
Copyright © 2022 Bowler Hat LLC — Illustrations by unDraw.