I have a requirement where i need to show 4 contents of video playing parallely i achieved it through parallel element but here the main challange is that i want to show all the 4 videos in different panels and a common controlbar to play/pause the video.
When i am trying to add the mediaplayer as Uicomponent to hbox/vbox its throwing runtime exception.
Please help me.
protected function initPlayer():void
{
// Create a mediafactory instance
var leftcontainer:Panel = new Panel();
leftcontainer.percentHeight=50;
leftcontainer.percentWidth=50;
mediaFactory = new DefaultMediaFactory();
//Marker 1: Create a LayoutMetaData object stup up to even out the 2 parellel streams initially
var layoutData:LayoutMetadata = new LayoutMetadata();
layoutData.percentWidth = 50;
layoutData.percentHeight = 50;
layoutData.scaleMode = ScaleMode.LETTERBOX;
//Marker 2: Create the left side Media Element to play the LOGO_VID and apply the meta-data
var leftElement:MediaElement = mediaFactory.createMediaElement( new URLResource( LOGO_VID ) );
leftElement.metadata.addValue( LayoutMetadata.LAYOUT_NAMESPACE, layoutData );
//Marker 3: Create the right side Media Element to play the STREAMING_PATH and apply the meta-data
var rightElement:MediaElement = mediaFactory.createMediaElement( new URLResource( STREAMING_PATH ) );
rightElement.metadata.addValue( LayoutMetadata.LAYOUT_NAMESPACE, layoutData );
//Marker 4: Create the ParallelElement and add the left and right elements to it
var parallelElement:ParallelElement = new ParallelElement();
parallelElement.addChild( leftElement );
parallelElement.addChild( rightElement );
//Marker 5: Reinstantiate the layoutData to clear it out and set the layout data for the parallel element
layoutData = new LayoutMetadata();
layoutData.layoutMode = LayoutMode.HORIZONTAL;
layoutData.horizontalAlign = HorizontalAlign.CENTER;
layoutData.verticalAlign = VerticalAlign.MIDDLE;
layoutData.width = 800;
layoutData.height = 600;
parallelElement.metadata.addValue( LayoutMetadata.LAYOUT_NAMESPACE, layoutData );
//the simplified api controller for media
player = new MediaPlayer( parallelElement );
//the container (sprite) for managing display and layout
container = new MediaContainer();
container.addMediaElement( parallelElement );
//Adds the container to the stage
var ui:UIComponent = new UIComponent();
ui.addChild(container as DisplayObject);
leftcontainer.addElement(ui);
this.addChild(container);
}
You can download the OSMF trunk and there are samples folder in
which a project ExamplePlayer is there in which many different
way to playing video. The following code is extracted from there
var parallelElement:SynchronizedParallelElement = new SynchronizedParallelElement();
var layout:LayoutMetadata = new LayoutMetadata();
layout.horizontalAlign = HorizontalAlign.CENTER;
layout.verticalAlign = VerticalAlign.MIDDLE;
parallelElement.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
var mediaElement1:MediaElement = new VideoElement(new URLResource(REMOTE_PROGRESSIVE));
layout = new LayoutMetadata();
layout.left = 0;
layout.top = 0;
layout.percentWidth = 50;
layout.percentHeight = 50;
mediaElement1.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
parallelElement.addChild(mediaElement1);
var mediaElement2:MediaElement = new VideoElement(new URLResource(REMOTE_STREAM));
layout = new LayoutMetadata();
layout.left = 0;
layout.bottom = 0;
layout.percentWidth = 50;
layout.percentHeight = 50;
mediaElement2.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
parallelElement.addChild(mediaElement2);
var mediaElement3:MediaElement = new VideoElement(new URLResource(REMOTE_STREAM));
layout = new LayoutMetadata();
layout.right = 0;
layout.top = 0;
layout.percentWidth = 50;
layout.percentHeight = 50;
mediaElement3.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
parallelElement.addChild(mediaElement3);
var mediaElement4:MediaElement = new VideoElement(new URLResource(REMOTE_PROGRESSIVE2));
layout = new LayoutMetadata();
layout.right = 0;
layout.bottom = 0;
layout.percentWidth = 50;
layout.percentHeight = 50;
mediaElement4.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
parallelElement.addChild(mediaElement4);
return parallelElement;
Try this you will get the 4 video playing or download the sample and use the FlashBuilder to run the project.
Related
i have created wall using path in three js. I want change the color option buttion automatically need to change the color onclick event.
Below my color any one help me.
// wall 1 inside
item_count = 1;
var wall_x1 = 69;
var wall_y1 = 55;
var wall_x2 = 366;
var wall_y2 = 52;
var wall_z = 0;
var wall_width = 5;
var wall_height = default_height;
var wall_wall_width = 5;
if(!wall_wall_width) { wall_wall_width = 5; }
var wall_wall_elevation = planner_default_height;
if(!wall_wall_elevation) { wall_wall_elevation = default_height; }
var wall_top_filltype = 'texture';
var wall_top_fill = 'default_wall.jpg';
var wall_side_filltype = 'texture';
var wall_side_fill = 'wall5.jpg';
if ( item_count == 0 )
{
starting_x_value = wall_x1;
starting_y_value = wall_y1;
}
path = generate_path_byline(wall_x1,wall_y1,wall_x2,wall_y2,default_depth);
path_type ="wall";
x=starting_x_value-wall_x1; y=starting_y_value-wall_y1;
// z=default_height/2;
path_transform = transformSVGPath(path);
create_surface(1,1,path_type,path_transform,starting_x_value,starting_y_value,x,y,z,default_height,wall_wall_elevation,wall_top_filltype,wall_top_fill,wall_side_filltype,wall_side_fill);
I see no clear way of defining the material at your sample code, or at least the way three.js does it:
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
If you use as a material a texture with an image, you have many ways to change its color... one easy trick could be to change the light color that lightens the scene or this object.
I have a series of banners (standard sizes) which all need to load the same corresponding image for each slide. I can load them fine but I want the image to match the size of the container MC that the image is being loaded to, is that possible? Either that or to set the height/width manually...
Everything I have tried doesnt work, here is the code for the working state (where it just loads the image which stretches across the stage)
Code:
var myImage:String = dynamicContent.Profile[0].propImage.Url;
function myImageLoader(file:String, x:Number, y:Number):StudioLoader{
var myImageLoader:StudioLoader = new StudioLoader();
var request:URLRequest = new URLRequest(file);
myImageLoader.load(request);
myImageLoader.x = -52;
myImageLoader.y =-30;
return myImageLoader;
}
propImage1.addChild(loadImage(enabler.getUrl(myImage),-20,0));
You can resize your loaded image after the Event.COMPLETE on the LoaderInfo (contentLoaderInfo) of your URLLoader is fired, so you can do like this :
var request:URLRequest = new URLRequest('http://www.example.com/image.jpg');
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_loadComplete);
function on_loadComplete(e:Event):void {
var image:DisplayObject = loader.content;
image.x = 100;
image.y = 100;
image.width = 300;
image.height = 200;
addChild(image);
}
loader.load(request);
Edit :
load_image('http://www.example.com/image.jpg');
function load_image(url){
var request:URLRequest = new URLRequest(url);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_loadComplete);
function on_loadComplete(e:Event):void {
add_image(loader.content);
}
loader.load(request);
}
function add_image(image:DisplayObject, _x:int = 0, _y:int = 0, _width:int = 100, _height:int = 100){
image.x = _x;
image.y = _y;
image.width = _width;
image.height = _height;
addChild(image);
}
Hope that can help.
I am typing with very green fingers, so, please excuse the question. Learning from examples, I have been trying to load and display an image in ActionScript. This is from the original example that I am working on:
...
...
var bmd2:BitmapData = bmd.clone();
var infoBM:Bitmap = new Bitmap(bmd2);
var back:MovieClip = new MovieClip();
back.name = "back";
back.rotationX = -90;
var bSurface:MovieClip = new MovieClip();
bSurface.y = int(...
bSurface.z = int(...
bSurface.addChild(infoBM);
var overlay:Sprite = new Sprite();
overlay.graphics.beginFill(...);
overlay.graphics.drawRect(0, 0, bSurface.width, bSurface.height);
overlay.graphics.endFill();
bSurface.addChild(overlay);
back.addChild(bSurface);
var tf:TextField = new TextField();
tf...
tf...
tf...
bSurface.addChild(tf);
...
...
I am trying to place an image onto the bSurface instead of the text block, as above. So far, I've come up with:
var iSprite:Sprite = new Sprite();
var iMatrix:Matrix = new Matrix();
var bmData:BitmapData;
bmData = new BitmapData(surface.width, surface.height, true, 123);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("c:\pixlr.png"));
function onComplete (event:Event):void
{
bmData = Bitmap(LoaderInfo(event.target).content).bitmapData;
}
iMatrix.tx = 0;
iMatrix.ty = 0;
iSprite.graphics.beginBitmapFill(bmData, iMatrix, false, true);
iSprite.graphics.drawRect(0, 0, surface.width, surface.height);
iSprite.graphics.endFill();
surface.addChild(iSprite);
...and:
var bmData:BitmapData;
bmData = new BitmapData(surface.width, surface.height, true, 123);
var loader:Loader = new Loader();
var location:URLRequest = new URLRequest("c:\pixlr.png");
loader.load(location);
bmData = Bitmap(loader.content).bitmapData;
surface.addChild(bmData);
but to no success. I've been failing miserably for days now, and would greatly appreciate some help.
Thanking you in advance,
Sofia
You're making this more complicated than it needs to be. A Loader is a DisplayObject. So when you want to load an image you can simply do this:
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("c:\pixlr.png"));
addChild(loader);
You can use the onComplete event to handle any sizing or positioning, or fading in you might want to do.
My objective is to give bounce effect to dynamically created images within a for loop.
var sb = new Storyboard();
Storyboard.SetTarget(sb, imageTranslateTransform);
sb.RepeatBehavior = RepeatBehavior.Forever;
sb.AutoReverse = true;
var da = new DoubleAnimation();
Storyboard.SetTargetProperty(da, "Y");
da.From = 0;
da.To = 100;
da.Duration = TimeSpan.FromSeconds(1d);
da.EasingFunction = new QuadraticEase {EasingMode = EasingMode.EaseOut};
sb.Children.Add(da);
sb.Begin();
How can I make a similar script for custom marker with Google Maps 3? Just like this with v.2 :
var iconBlue = new GIcon();
iconBlue.image = 'images/cell1.png';
iconBlue.shadow = '';
iconBlue.iconSize = new GSize(32, 32);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(3, 16);
iconBlue.infoWindowAnchor = new GPoint(15, 15);
var iconRed = new GIcon();
iconRed.image = 'images/cell3.png';
iconRed.shadow = '';
iconRed.iconSize = new GSize(32, 32);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(15, 2);
iconRed.infoWindowAnchor = new GPoint(15, 15);
var iconGreen = new GIcon();
iconGreen.image = 'images/cell2.png';
iconGreen.shadow = '';
iconGreen.iconSize = new GSize(32, 32);
iconGreen.shadowSize = new GSize(22, 20);
iconGreen.iconAnchor = new GPoint(-9, 2);
iconGreen.infoWindowAnchor = new GPoint(20, 15);
var customIcons = [];
customIcons["60"] = iconBlue;
customIcons["240"] = iconRed;
customIcons["350"] = iconGreen;
I wrote the following in Version 3 and the marker is not shown.
var cellone = new google.maps.MarkerImage("images/cell1.png",
new google.maps.Size(20, 34), new google.maps.Point(0,0),
new google.maps.Point(3, 16));
var celltwo = new google.maps.MarkerImage("images/cell2.png",
new google.maps.Size(20, 34), new google.maps.Point(0,0),
new google.maps.Point(-9, 2));
var cellthree = new google.maps.MarkerImage("images/cell3.png",
new google.maps.Size(20, 34), new google.maps.Point(0,0),
new google.maps.Point(15, 2));
var customIcons = [];
customIcons["60"] = cellone;
customIcons["240"] = celltwo;
customIcons["350"] = cellthree;
I've recently just did this icon stuff myself. And I initially used the same type of code you used, but that didn't work. Apparently new GIcon() was not functioning properly.
There is a very simple way to change icon though and it doesn't use variables.
This is what I did.
Declare markerVariable as a global variable.
When you create new markers, one of the lines should say icon : ...
Here is a sample of my code. Of course, you will have to change certain lines to have it working for your program (and you can't use marker with labels unless you change certain functions).
Lastly, icon : ... can be a link or location on your computer.
var iconArray = [
["http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/purple-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/ltblue-dot.png"]
];
function getMarkers() {
for (i = 0; i < locations.length; i++) {
marker[i] = new MarkerWithLabel({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
draggable: false,
map: map,
icon: new google.maps.MarkerImage(iconArray[i]),
//icon: new google.maps.MarkerImage("http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png"),
//labelContent: locations[i][3],
labelAnchor: new google.maps.Point(30, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
}
}
function initialize() {
getMarkers();
}
Translated version of Mike Williams' v2 "category" example