CODEWITHSUNDEEP
actionscript-3flash-cs5
RedDragon
RedDragon

Reputation: 2138

How to split a movieclip in two parts and assign different colors to each one?

As per title, using Flash CS5 and Actionscript 3, how can I programmatically split a movieclip in two parts and assign a different color to each part?

I need to get a dynamic movieclip (one time can be a bird, another a figurine, another yet a ball and so on) and split it in two parts, painting one part with one color and the rest with a different color. The use case is to convert any existing movieclip in a progress bar, making progress bars with different shapes dynamically.

Upvotes: 0

Views: 1177

Answers (2)

Joshua Honig
Joshua Honig

Reputation: 13215

A simple way would be to define a couple of fill layers (one for background, one for "progress" fill) and then a mask layer where you add your movie clip that defines the shape. Here's an implementation that can take any type of fill for the background and progress fills, and any DisplayObject for the shape mask. It redraws the progress fill rather than scaling a rectangle so that bitmap and gradient fills are not distorted.

Here's how you would create it with just simple solid color fills (black bar on white background):

var pBar:MorphProgressBar = new MorphProgressBar(
    new GraphicsSolidFill(0xFFFFFF), new GraphicsSolidFill(0), myMc);
addChild(pBar);
pBar.progress = 0.3;  // 30 %

Here's the code for MorphProgressBar. This version is tested and works:

import flash.display.IGraphicsFill;
import flash.display.Sprite;
import flash.geom.Rectangle;
import flash.display.Shape;
import flash.display.IGraphicsData;
import flash.display.DisplayObject;

public class MorphProgressBar extends Sprite {
    private var _progressFill:IGraphicsFill;
    private var _bounds:Rectangle;
    private var _progress:Number;
    private var _fillSprite:Sprite = new Sprite();
    private var _bg:Shape = new Shape();
    private var _bar:Shape = new Shape();
    private var _maskSprite:Sprite = new Sprite();

    public function MorphProgressBar( 
            baseFill:IGraphicsFill,  
            progressFill:IGraphicsFill,  
            shapeSource:DisplayObject) {
        _progressFill = progressFill;
        _bounds = new Rectangle(0,0,shapeSource.width,shapeSource.height);
        _bg.graphics.drawGraphicsData(Vector.<IGraphicsData>([baseFill]));
        _bg.graphics.drawRect(0,0,_bounds.width, _bounds.height);
        _fillSprite.addChild(_bg);
        _fillSprite.addChild(_bar);
        _maskSprite.addChild(shapeSource);
        addChild(_fillSprite);
        addChild(_maskSprite);
        _fillSprite.mask = _maskSprite;
    }

    public function get progress():Number { return _progress; }
    public function set progress(value:Number):void {
        var newProgress:Number = Math.min(Math.max(value,0),1);
        if (newProgress != _progress) {
            _progress = newProgress;
            updateProgress();
        }
    }

    private function updateProgress():void {
        _bar.graphics.clear();
        _bar.graphics.drawGraphicsData(Vector.<IGraphicsData>([_progressFill]));
        _bar.graphics.drawRect(0,0,_bounds.width * progress, _bounds.height);
    }
}

Upvotes: 1

IAmMearl
IAmMearl

Reputation: 487

Convert movieclip to bitmap:

var bitmap:Bitmap = new Bitmap();
var data1:BitmapData = new BitmapData(mc.width, mc.height);
data.draw(mc);
bitmap.bitmapData = data;

addChild(bitmap);

Then click this link and learn how to split it all kinds of ways.

Actionscript 3: Slice a Bitmap into tiles

Upvotes: 0

Related Questions