:shhh: I'm always up early Laurence :)
Besides that, in Holland we're an hour ahead of England so that makes a little difference :D
Printable View
:shhh: I'm always up early Laurence :)
Besides that, in Holland we're an hour ahead of England so that makes a little difference :D
Here's a small example of interaction between two components.
http://www.waterlijn.info/km/as3/Com...teraction.html
What you see is two components. The top one is a slideshow, the bottom one a media player. As you can see, in KM7 the slideshow functionality is integrated in the media player component so you can choose any media player skin for your slideshow. The media player component on the bottom is playing the audio but has no volume control. The slideshow on top has a volume control but isn't playing anything. So I just connected them. All it took was the following codeCode:slideshow1.slVolume.addEventListener('drag', volumeChange);
function volumeChange(e:Event):void {
mediaplayer1.soundTransform = slideshow1.soundTransform;
}
Hehehe....I love this stuff. Nice one Wilbert (like the tune too!)!.
addEventListener
Get used to that one folks...you'll be writing it a lot with AS3 :)
That makes you a man ahead of time! wow:)Quote:
Originally Posted by w.brants
Can someone explain how the following script could be used in KM to create the desired effect?
ColorPickerExample.as
This example demonstrates how to change the color of a Shape instance by listening to events from a ColorPicker.
1. Drag three ColorPicker instances and one ComboBox instance to the stage.
2. Name the ColorPicker instances cp1 , cp2 , and cp3 .
3. Name the ComboBox cb .
4. Save this code as ColorPickerExample.as in the same directory as your FLA.
5. Set the DocumentClass in the FLA to ColorPickerExample.
package
{
import flash.display.Sprite;
import flash.display.Shape;
import flash.display.BlendMode;
import flash.events.*;
import fl.controls.ColorPicker;
import fl.controls.ComboBox;
public class ColorPickerExample extends Sprite
{
var circle1:Shape;
var circle2:Shape;
var circle3:Shape;
public function ColorPickerExample():void {
setupCircles();
setupComboBox();
cp1.addEventListener(Event.RENDER,colorChange);
cp2.addEventListener(Event.RENDER,colorChange);
cp3.addEventListener(Event.RENDER,colorChange);
}
private function colorChange(e:Event):void {
var cp:ColorPicker = e.target as ColorPicker
switch (cp) {
case cp1:
colorCircle(circle1,cp.selectedColor);
break;
case cp2:
colorCircle(circle2,cp.selectedColor);
break;
case cp3:
colorCircle(circle3,cp.selectedColor);
break;
default:
break;
}
}
private function setupComboBox():void {
cb.setSize(150,24);
cb.addItem( { label: "Select BlendMode:", data:BlendMode.NORMAL } );
cb.addItem( { label: "ADD", data:BlendMode.ADD } );
cb.addItem( { label: "ALPHA", data:BlendMode.ALPHA } );
cb.addItem( { label: "DARKEN", data:BlendMode.DARKEN } );
cb.addItem( { label: "DIFFERENCE", data:BlendMode.DIFFERENCE } );
cb.addItem( { label: "ERASE", data:BlendMode.ERASE } );
cb.addItem( { label: "HARDLIGHT", data:BlendMode.HARDLIGHT } );
cb.addItem( { label: "INVERT", data:BlendMode.INVERT } );
cb.addItem( { label: "LAYER", data:BlendMode.LAYER } );
cb.addItem( { label: "LIGHTEN", data:BlendMode.LIGHTEN } );
cb.addItem( { label: "MULTIPLY", data:BlendMode.MULTIPLY } );
cb.addItem( { label: "OVERLAY", data:BlendMode.OVERLAY } );
cb.addItem( { label: "SCREEN", data:BlendMode.SCREEN } );
cb.addItem( { label: "SUBTRACT", data:BlendMode.SUBTRACT } );
cb.addEventListener(Event.CHANGE,blendChange);
}
private function blendChange(e:Event):void {
var newBlend:String = cb.selectedItem.data;
if(newBlend) {
circle1.blendMode = newBlend;
circle2.blendMode = newBlend;
circle3.blendMode = newBlend;
}
}
private function setupCircles():void {
circle1 = new Shape();
circle2 = new Shape();
circle3 = new Shape();
circle1.x = 127;
circle1.y = 64;
circle2.x = 87;
circle2.y = 130;
circle3.x = 164;
circle3.y = 130;
colorCircle(circle1,0xFF0000);
colorCircle(circle2,0xFF0000);
colorCircle(circle3,0xFF0000);
addChild(circle1);
addChild(circle2);
addChild(circle3);
}
private function colorCircle(circle:Shape,newColor:uint):void {
circle.graphics.clear();
circle.graphics.beginFill(newColor,1);
circle.graphics.drawCircle(0,0,50);
circle.graphics.endFill();
}
}
}
I don't think you can use fl.controls unless you have flash
You know how crazy that sounds? Unless you have flash?Quote:
Originally Posted by blanius
That doesn't sound crazy at all. In fact Bret is absolutely right.Quote:
Originally Posted by Phil1615
All classes inside a flash.* package are embedded in the player. All classes inside a fl.* are code classes copyrighted by Adobe that are not in the player but compiled into the swf and therefore can't be used by any third party application.
I suppose I should have said unless you have the flash development enviroment from Adobe, but that seemed sort of long winded and I figured you know what I mean.
You can probably do something like this just fine with the colorChooser that will come with KM7
KM7 doesn't handle things quite the same way as Adobe Flash when creating instances of some components that on face value may seem similar (or be named similar like the combobox).
What you are trying to class into Flash can be classed into KM7, it just needs to be handled a bit differently.
A rough idea of what I mean is :
http://krazyaboutpizza.co.uk/philo.html
Granted it's a quickie port of what you posted and would need to be tweaked but it's basically what your class above would accomplish. I'm still wrapping my head around the way we skin components when created from within classes and what are the minimal lines of script that are needed to create an instance of a skinned component (a combobox for instance) not to mention what exactly are the differences between AS3 in KM and AS3 in Flex/Flash (which I learn as I go) so this class is rough at best.
The created class is named Phil1615.as and saved in the km.components folder.
The example above is a single frame, completely empty 250x330 KM movie with this script:
var f:Phil1615=new Phil1615();
addChild(f);
I didn't create the pickers and comboboxes in the GUI like your original example. The class handles it all :)
If I'm in the ballpark, I'll post the class.
Well done Chris :thumbsup:
You are right the KM components don't handle things exactly the same as the Adobe Flash equivalents.
Some remarks that may shed some light on things ...
If you want to know how to script a skin, the easiest way probably is to study the existing skins the gui can use.
You could also have placed the Phil1615.as script in the same directory as the .fun file and extend Sprite instead of UIComponent.
For the blendChange function, you could have used the same approach as the original. Just like the Flash combobox component, data can be any object. It doesn't have to be a string.
To activate tool tips (I noticed you added a tip), add this linesomewhere in your code.Code:addChild(new ToolTip());
Thanks guys.
@Bret, I did think that is what you meant when you said flash, I just let my frustration respond for me. Maybe its best that I did because Wilbert and Chris really brought the point home.
@Chris, I would be interested in studying the class if you post it.
@Wilbert, thanks for giving me a plan. I will look closer at the KM GUIs.
updated :)
PHP Code:package km.components {
import km.core.*;
import km.skins.*;
import flash.display.*;
import flash.events.*;
import flash.filters.*;
public class Phil1615 extends Sprite {
private var cbModes:ComboBox;
private var pckColor1:ColorPicker;
private var pckColor2:ColorPicker;
private var pckColor3:ColorPicker;
private var aItems:Array;
private var circle1:Shape;
private var circle2:Shape;
private var circle3:Shape;
public function Phil1615():void {
aItems= new Array();
aItems.push( { label: "NORMAL", data:BlendMode.NORMAL } );
aItems.push( { label: "ADD", data:BlendMode.ADD } );
aItems.push( { label: "ALPHA", data:BlendMode.ALPHA } );
aItems.push( { label: "DARKEN", data:BlendMode.DARKEN } );
aItems.push( { label: "DIFFERENCE", data:BlendMode.DIFFERENCE } );
aItems.push( { label: "ERASE", data:BlendMode.ERASE } );
aItems.push( { label: "HARDLIGHT", data:BlendMode.HARDLIGHT } );
aItems.push( { label: "INVERT", data:BlendMode.INVERT } );
aItems.push( { label: "LAYER", data:BlendMode.LAYER } );
aItems.push( { label: "LIGHTEN", data:BlendMode.LIGHTEN } );
aItems.push( { label: "MULTIPLY", data:BlendMode.MULTIPLY } );
aItems.push( { label: "OVERLAY", data:BlendMode.OVERLAY } );
aItems.push( { label: "SCREEN", data:BlendMode.SCREEN } );
aItems.push( { label: "SUBTRACT", data:BlendMode.SUBTRACT } );
cbModes = new ComboBox();
cbModes.setSize(162,100);
cbModes.move(12,2);
pckColor1 = new ColorPicker();
pckColor2 = new ColorPicker();
pckColor3 = new ColorPicker();
pckColor1.move(182,2);
pckColor2.move(202,2);
pckColor3.move(222,2);
ScriptedSkin.applyTo( cbModes, pckColor1, pckColor2, pckColor3);
pckColor1.addEventListener(Event.CHANGE,colorChange);
pckColor2.addEventListener(Event.CHANGE,colorChange);
pckColor3.addEventListener(Event.CHANGE,colorChange);
cbModes.addEventListener(Event.CHANGE,blendChange);
cbModes.list.setItemArray(aItems);
addChild( cbModes);
cbModes.list.selectedIndex=0;
addChild(pckColor1);
addChild(pckColor2);
addChild(pckColor3);
pckColor1.selectedColor=0x909090;
pckColor2.selectedColor=0x609FCF;
pckColor3.selectedColor=0xFFFF60;
circle1 = new Shape();
circle2 = new Shape();
circle3 = new Shape();
circle1.x = 127;
circle1.y = 204;
circle2.x = 87;
circle2.y = 270;
circle3.x = 164;
circle3.y = 270;
colorCircle(circle1,pckColor1.selectedColor);
colorCircle(circle2,pckColor2.selectedColor);
colorCircle(circle3,pckColor3.selectedColor);
addChild(circle1);
addChild(circle2);
addChild(circle3);
}
private function blendChange(e:Event):void {
circle1.blendMode = cbModes.list.selectedItem.data;
circle2.blendMode = cbModes.list.selectedItem.data;
circle3.blendMode = cbModes.list.selectedItem.data;
}
private function colorChange(e:Event):void {
var cp:ColorPicker = e.target as ColorPicker
switch (cp) {
case pckColor1:
colorCircle(circle1,cp.selectedColor);
break;
case pckColor2:
colorCircle(circle2,cp.selectedColor);
break;
case pckColor3:
colorCircle(circle3,cp.selectedColor);
break;
default:
break;
}
}
private function colorCircle(circle:Shape,newColor:uint):void {
circle.graphics.clear();
circle.graphics.beginFill(newColor,1);
circle.graphics.drawCircle(0,0,50);
circle.graphics.endFill();
}
}
}
For those who are used to the current KM AS1 scripting, don't be scared of the way AS3 code looks. The var keyword is required but strong typing isn't. Also you can still add your scripts to a frame as you are used to. The normal AS3 way for component event handling is adding listeners. This is supported by the KM AS3 components but since not all KM users aren't experienced scripters, in a lot of cases you can also use the way you were used to. Supported for the KM AS3 components are : onClick [LabelButton], onChange [CheckBox, ColorPicker, ComboBox, DateChooser, Knob, List, RadioGroup], onScroll [ScrollBar] .
Here's the same code Chris created (I hope you don't mind I post it Chris) but in this case added to the first frame of the movie and rewritten a bit more like what AS1 looks like (it still is AS3).Code:var aItems = new Array();
aItems.push({label:"NORMAL", data:BlendMode.NORMAL});
aItems.push({label:"ADD", data:BlendMode.ADD});
aItems.push({label:"ALPHA", data:BlendMode.ALPHA});
aItems.push({label:"DARKEN", data:BlendMode.DARKEN});
aItems.push({label:"DIFFERENCE", data:BlendMode.DIFFERENCE});
aItems.push({label:"ERASE", data:BlendMode.ERASE});
aItems.push({label:"HARDLIGHT", data:BlendMode.HARDLIGHT});
aItems.push({label:"INVERT", data:BlendMode.INVERT});
aItems.push({label:"LAYER", data:BlendMode.LAYER});
aItems.push({label:"LIGHTEN", data:BlendMode.LIGHTEN});
aItems.push({label:"MULTIPLY", data:BlendMode.MULTIPLY});
aItems.push({label:"OVERLAY", data:BlendMode.OVERLAY});
aItems.push({label:"SCREEN", data:BlendMode.SCREEN});
aItems.push({label:"SUBTRACT", data:BlendMode.SUBTRACT});
var cbModes = new ComboBox();
var pckColor1 = new ColorPicker();
var pckColor2 = new ColorPicker();
var pckColor3 = new ColorPicker();
ScriptedSkin.applyTo(cbModes, pckColor1, pckColor2, pckColor3);
cbModes.setSize(162, 100);
cbModes.move(2, 2);
cbModes.list.setItemArray(aItems);
cbModes.list.selectedIndex = 0;
cbModes.onChange = blendChange;
pckColor1.move(172, 2);
pckColor2.move(192, 2);
pckColor3.move(212, 2);
pckColor1.onChange = colorChange;
pckColor2.onChange = colorChange;
pckColor3.onChange = colorChange;
addChild(cbModes);
addChild(pckColor1);
addChild(pckColor2);
addChild(pckColor3);
pckColor1.selectedColor = 0x909090;
pckColor2.selectedColor = 0x609FCF;
pckColor3.selectedColor = 0xFFFF60;
var circle1 = new Shape();
var circle2 = new Shape();
var circle3 = new Shape();
circle1.x = 127;
circle1.y = 204;
circle2.x = 87;
circle2.y = 270;
circle3.x = 164;
circle3.y = 270;
colorCircle(circle1, pckColor1.selectedColor);
colorCircle(circle2, pckColor2.selectedColor);
colorCircle(circle3, pckColor3.selectedColor);
addChild(circle1);
addChild(circle2);
addChild(circle3);
function blendChange() {
var newBlend = cbModes.list.selectedItem.data;
circle1.blendMode = newBlend;
circle2.blendMode = newBlend;
circle3.blendMode = newBlend;
}
function colorChange() {
colorCircle(circle1, pckColor1.selectedColor);
colorCircle(circle2, pckColor2.selectedColor);
colorCircle(circle3, pckColor3.selectedColor);
}
function colorCircle(circle, newColor) {
circle.graphics.clear();
circle.graphics.beginFill(newColor, 1);
circle.graphics.drawCircle(0, 0, 50);
circle.graphics.endFill();
}
yep, it was there :(
I used the RichTextEditor class to scarf from and it got left behind. It helped me learn the difference because until I found this line:
Code:ScriptedSkin.applyTo( xxx );
something like a simple:
would not fly :)Code:cbModes = new ComboBox();
cbModes.setSize(162,100);
cbModes.move(12,2);
addChild(cbModes);
:) I know Chris, the KM components always need to be skinned otherwise you won't see anything. But because I realized there are users like you who prefer to script things, I added a static class called ScriptedSkin that applies a very basic skin to the components you specify. You can also style it a little bit (not much) like this ...Code:ScriptedSkin.setStyle(0x000020, 0xf0f0ff, 1, 45);
ScriptedSkin.applyTo(cbModes, pckColor1, pckColor2, pckColor3);
appreciate the pointers Wilbert. That was .fun :)
Man I'm falling behind really quick. I've been too busy to be much of a beta tester lately. I've already forgotten as much AS3 as I had learned before KM7 was even in beta.... LOL
Time to catch up again..
Good. I was afraid bret had started on the eggnog a little soon.:eek:Quote:
Originally Posted by Phil1615
I didn't understand either and never knew that about fl.*
I suspected that Bret meant Adobe Flash environment because the original AS3 instructions made reference to these two items:Quote:
Originally Posted by tmoore935
- Save this code as ColorPickerExample.as in the same directory as your FLA
- Set the DocumentClass in the FLA to ColorPickerExample.
However, being the sometimes obstinate individual that I am, I knew it had to be possible (otherwise why create a color picker GUI for KM7?) and wanted more info. This discussion also wised me up to the fact why there could often be conflicts when obtaining AS3 code from Flash CS4 Pro FLAs that Laurence mentions.