This page will try to help Flash users to learn the MadButterfly programming. In each section, we will write a small flash program and list the corresponding MB code.

MovieClip

In the MadButterfly, the idea of MovieClip is spread into multiple classes. The most related class is the coord_t. In the inkscape, you can define as manay symbol as possible. Each symbol is actually a "MovieClip" or coord_t. You can move, resize, show, hide, transform or any other operation against it. In the following, we will show how to do these operations in both Flash and MB.

You will notice that we need to call rdman_coord_changed and rdman_redraw_changed to force the MB engine to redraw the object. This is not required in the Flash. Actually, Flash has no way to stop the refresh at all. MB is more flexible in this. However, the penalty is that we need to write mode codes to refresh the screen. If you find the behaviour is not as you expect, you might forget to call the rdman_coord_changed somewhere.

Move MovieClip

Flash verion

mc._x = 100;
mc._y = 100;

MB version

coord_x(mc) = 100;
coord_y(mc) = 100;
rdman_coord_changed(rdman, mc);
rdman_redraw_changed(rdman);

Resize MovieClip

Flash version

mc._xscale = 150;
mc._yscale = 120;

MB version

coord_scalex(mc) = CO_AIX(1.5);
coord_scaley(mc) = CO_AIX(1.2);
rdman_coord_changed(rdman, mc);
rdman_redraw_changed(rdman);

Show/Hide MovieClip

Flash version

mc._visible = true;
mc._visible = false;

MB version

coord_show(mc);
rdman_coord_changed(rdman,mc);
coord_hide(mc);
rdman_coord_changed(rdman,mc);

Text Field

The Flash text field can be one of static text, dynamic text or Input text. The MB has only dynamic text field now.

Font

Text Color

The color of Flash text can be adjusted by using

tobj.textColor = 0xffffffff;

In the MB, the color of the text is set by

sh_text_set_color(tobj,0xffffff);

The flash use setTextFormat to change the detailed style of the text.

format = new TextFormat();
format.color =0xffffff;
tobj.setTextFormat(0,10,format);

In the MB, it is very similiar

mb_textstyle_t style;
mb_textstyle_init(&style);
mb_textstyle_set_color(&style, 0xffffff);
sh_text_set_style(tobj,0,10,&style);

timer

jump between frames

The Flash use different frame to display different elements so that we can use it to define the UI flow. There is no "frame in the MB. However, the scenes is quite similar with this concept. We can use the scenes to emulate the frame in the Flash. The detail of the MB scene is documented at xxxx.

In the Flash, we can jump to another frame by

gotoAndStop(help);

In the MB, we can hide the current scenens, called current and then dislay the new scene help.

coord_hide(rdman,current);
coord_show(rdman,help);
coord_coord_changed(rdman,current);
coord_coord_changed(rdman,help);

For the MB, the scene name is nothing but a symbol as other movieclip.

Button

The Flash button has four frames inside it. The MB button has only three frames. We may extend it to be four as well in the future. The MB button can be constructed in the inkscape by using the "Convert to button option". A button has three groups inside it. Please remember that the frame is nothing but an group in the MB. This is different from the Flash. The frame in the Flash is just an authoring time property. You can not access the frame as an object in the Flash. However, you can do that in the MB. Therefore, you can modify frame at the runtime.

Let's check how to assign an callback function to the Button.

function callback() {
    trace('hello');
}

btn.onPress = callback;

The MB should looks like

void callback(void *arg)
{
    printf("Hello\n");
}
mb_button_add_onClik(btn, callback, NULL);

Event listener

Both Flash and MB provides functions to register handler for specific events. In the Flash, it is called event listener. In the MB, it is called subject observer. In the Flash, the events are registered to an object, which can be an MovieClip, Button or even the non-UI data. In the MB, the events are registered to "subject" which can be defined by some data sources, such as keyboard, mouse or graphic backend. There is no idea of focus yet in the MB. This might be a very big and important topic in the future.

In the Flash, we can register an event listener by using

listener = new Object();
listener.onMouseDown = function () {
    trace("click");
}
mc.addListener(listener);
mc.addEventListener("click",listener);

In the MB, it is

void listener(void *arg)
{
    printf("click\n");
}
subject = coord_get_mouse_event(mc);
obs = subject_add_observer(subject,listener,NULL);
obs = subject_add_event_observer(subject,"click", listener, NULL);

The MB has no default handler like the Flash. Therefore, you always need to use the subject_add_observer or subject_add_event_listener to add an new event handler.

In order to remove the event handler, in Flash, it is

delete mlistener.onMouseDown;
mc.removeListener(listener)

In MB, it is

subject_remove_observer(subject, obs);

Animation

Flash has the best of the kind animation editor. Art designer can create animation clip inside the same IDE as the programmer. MadButterfly just begin to implement the animation editor. However, in the programming level, the MadButterfly has the following action defined.

• coordinate shifter
• rotator
• color fade in/out

The following should be available soon.

• size shifter
• image fade in/out

PS. explain how to use program to create animation in Flash and MadButterfly

Add primitive graphics

The flash provides a set of primitive graphics tools inside the MovieClip. We can create an rectangle at parent like

var mc = parent.createEmptyMovieClip('bg', parent.getNextHighestDepth());
mc.beginFill(0xffffff,0);
mc.moveTo(0,0); mc.lineTo(100,0); mc.lineTo(100,100); mc.lineTo(0,100);mc.lineTo(0,0);
mc.endFill();

In the MadButterfly, the interface is quite low level. It can be done via

shape_t *mc = rdman_shape_path_new(rdman, "M 0 0 L 100 0 L 100 100 L 0 100 Z");
rdman_add_shape(rdman, mc, parent);
paint_t *fill = rdman_paint_color_new(rdman, 0.000000, 0.000000, 1.000000, 0.500000);
rdman_paint_fill(rdman, fill, mc);

We will add the following high level interface inside the MBAF.

mb_graphic_t *mc = mb_graphic_new(myApp);
MBG_beginFill(mc,0xffffff,0);
MBG_moveTo(mc,0,0); MBG_lineTo(mc,100,0); MBG_lineTo(mc,100,100); MBG_lineTo(mc,0,100); MBG_close(mc);
MBG_endFill(mc);

Please look at MadButterfly_Application_Framework for more details.

Component Library

The Flash authoring tool provides component library which allows developer provide cooked components for the programmer and UI designer to use. We should plan similar function in the future insid e the IDE. However, this will not happen soon. For now, the SVG file and the function library are not packed together. Programmer need to "import" components manually. In addition, there is no function to import components in the IDE.

BTW, unless the components is written in javascript completely, it may not be easy to implement this function in the future.