Member Avatar for Member #334542

I have already created a video player in AS3.0. The Client wants to convert it to a component. I need some good to follow tutorials on creating own components. I had know the concepts of creating components and utilizing that as a SWC. I need to create the component with the interface already designed at flash authoring time and have to give the provision to change the button styles which has to be edit by the client itself.

Experts! please come forward and help me!

  • 2 Contributors
  • 2 Replies
  • 109 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

Short checklist and a simple pattern to meet the brief (author-time UI + client-editable button styles).

Three practical options

  • Ship a code-only SWC (logic only) and provide a separate, editable "skin" FLA the client can edit visually. This keeps code safe and lets the client change graphics freely.
  • Build the whole component as a symbol in the client FLA (no SWC). Easiest for designers but harder to maintain across projects.
  • Hybrid: SWC contains a default skin, but the component exposes a public skin property or skinLinkage string so a client FLA can override visuals at authoring time.

Recommended simple pattern (works well in Flash CS/AS3)

  • Make a MovieClip component class that exposes a skin slot: a public setSkin(skin:MovieClip) method and an [Inspectable] skinLinkage property so the component inspector can accept a library linkage name.
  • At init, if skinLinkage is set try getDefinitionByName(skinLinkage) to instantiate the client-provided symbol; otherwise use the bundled default skin.
  • Design skin MovieClips so child instances have consistent instance names (e.g. btnPlay, btnPause). The component hooks those names and adds listeners. That lets the client change button artwork without touching code.

Minimal skeleton (illustrates metadata + runtime skin swap)

package {
  import flash.display.MovieClip;
  import flash.events.*;
  import flash.utils.getDefinitionByName;

  [Event(name="ready", type="flash.events.Event")]
  public class VideoPlayerComponent extends MovieClip {
    [Inspectable(name="skinLinkage", type="String", defaultValue="")]
    public var skinLinkage:String = "";

    public function VideoPlayerComponent() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event = null):void {
      removeEventListener(Event.ADDED_TO_STAGE, init);
      if (skinLinkage) {
        try {
          var SkinClass:Class = getDefinitionByName(skinLinkage) as Class;
          setSkin(new SkinClass() as MovieClip);
        } catch (err:Error) {
          // fallback to internal skin
        }
      }
    }

    public function setSkin(skin:MovieClip):void {
      addChild(skin);
      if (skin["btnPlay"]) skin["btnPlay"].addEventListener(MouseEvent.CLICK, onPlay);
    }

    private function onPlay(e:MouseEvent):void { /* play logic */ }
  }
}

Packaging and practical tips

  • For client-editable skins instruct them to create symbols in their FLA, enable “Export for ActionScript” with the linkage name matching skinLinkage, or drag an instance onto the stage and assign it via the inspector if the component is placed as a symbol.
  • Always provide a default embedded skin inside the SWC and a separate editable skin FLA that demonstrates instance-name conventions.
  • Use [Inspectable] to expose booleans, strings and color fields in the Component Inspector, and [Event] metadata to document events.
  • If the Adobe DevNet tutorial (noted by ) feels heavy, this pattern gives a simpler, designer-friendly workflow and avoids forcing clients to edit SWC internals (a point raised).

Recommended Answers

All 2 Replies

Member Avatar for JasonHippy

I have already created a video player in AS3.0. The Client wants to convert it to a component. I need some good to follow tutorials on creating own components. I had know the concepts of creating components and utilizing that as a SWC. I need to create the component with the interface already designed at flash authoring time and have to give the provision to change the button styles which has to be edit by the client itself.

Experts! please come forward and help me!

Hmm, I used to work with flash components from time to time at my previous job, (both creating and customising components) but those were all AS1 and AS2 components. And although I work pretty much exclusively with AS3 nowadays when tinkering with flash at home, I haven't done anything with components in a really long time (over 2 years) and it was never in AS3!

If I get a chance I'll try to take a look at what differences there are between creating components in AS2 and AS3 and I'll try to get back to you. Actually, it's been so long, I'm probably gonna have to get up to speed with component creation from scratch.

Heh heh, but who knows; it might even be the perferct excuse for me to meet up with some of my former colleagues for a beer or three!

In the meantime, this looks like a good tutorial to take a look at for starters..
http://www.adobe.com/devnet/flash/articles/creating_as3_components.html

If I get a chance, I might even have a go at running through it this evening to get myself back up to speed with component creation!
Cheers for now,
Jas.

Edited by JasonHippy because: n/a
Member Avatar for Member #334542

Yes Jason, I am going thru that tutorial already, and its tough for me to follow. thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.