With Adobe Animate CC - is there a way to control Symbols from a javascript file?
For example,
canvas = document.getElementById("canvas-octo");
exportRoot = new lib.octo();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
exportRoot.gotoAndStop(1);
This method does actually work, I just hadn't realised that the frames start at 0 instead of 1
Related
I have several images, which are Symbols (movieClip) with Alpha parameter.
And i'm creating dynamic textfield from AS3 to be able change text every few seconds.
Problem is that everything worked good till i converted images to MovieClips. But after that my textfields are not visible.
Here is the code:
textFormat = new TextFormat();
textfield = new TextField();
textFormat.font = new customFonts().fontName;
textFormat.size = 16;
textFormat.align = "center";
textFormat.color = 0xFFFFFF;
textfield.defaultTextFormat = textFormat;
textfield.embedFonts = true;
textfield.width = 480;
textfield.height = 95;
textfield.x = 185;
textfield.y = 22;
textfield.wordWrap = true;
addChild (textfield);
So the question is - how to bring this textfield to the top so it would be visible?
You're adding your Text field after the movie clips are being initiated. Think of it as a layer, the text field is at the bottom layer, hence they will not be seen.
I would look at the container class
The Container class is an abstract base class for components that controls the layout characteristics of child components. You do not create an instance of Container in an application. Instead, you create an instance of one of Container's subclasses, such as Canvas or HBox.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/Container.html
You should be able to change what is displayed.
EDIT:
Anytime you add a clip it is added on top by default.
You should also look into Z-Index.
If you are coding with Flash Develop then it can get tricky, whilst using Flash Adobe CC can make your life so much easier!
Sorry if it's not that much of an answer.
I have a scene with 2 renderers sized exactly the same and put on top of each other sharing the same Perspective Camera like this:
var renderer = new THREE.WebGLRenderer();
renderer.antialias = true;
renderer.setClearColor(0xFFFFFF, 1);
renderer.setSize(Params.win.w, Params.win.h);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';
renderer.domElement.style.zIndex = '-9999';
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(Params.win.w, Params.win.h);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = '0px';
cssRenderer.domElement.style.left = '0px';
cssRenderer.domElement.style.zIndex = '-9998';
document.body.appendChild(cssRenderer.domElement);
var cssScene = new THREE.Scene();
//animate loop
renderer.render(scene, camera);
cssRenderer.render(cssScene, camera);
CSS Objects can be placed directly over objects in the WebGL Scene simply by referencing their positions and setting the position of the CSS Objects.
However when I add this effect:
var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / (Params.win.w), 1 / (Params.win.h));
effectFXAA.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer);
composer.setSize(Params.win.w, Params.win.h);
composer.addPass(new THREE.RenderPass(scene, camera));
composer.addPass(effectFXAA);
And call the composer to render instead like this composer.render();
My CSS Objects are no longer placed correctly.
The perspective is off since zooming will slide the CSS Objects around while the WebGL Objects retain their positions.
Any idea why the extra shader passes might be changing the perspective in the WebGL rendering resulting in the CSS Objects not staying aligned properly and sliding around?
So I figured out that despite the fact that only the composer is calling render, the original renderer also needs to have it's size reset in whatever resize method you have.
The composer is based on the original renderer, and I had commented out the resizing of this object and only resized the composer.
This is something I must have overlooked, hope this helps others!
camera.aspect = Params.win.w / Params.win.h;
camera.updateProjectionMatrix();
//MUST ALSO UPDATE RENDERER SIZE
renderer.setSize(Params.win.w, Params.win.h);
cssRenderer.setSize(Params.win.w, Params.win.h);
//composer
effectFXAA.uniforms['resolution'].value.set(1 / Params.win.w, 1 / Params.win.h);
composer.setSize(Params.win.w, Params.win.h);
I have a canvas element (Width: 720, Height : 174). This canvas has 16 parts. I tried
Actions.moveToElement(we,(720/16)*3,1).click().perform();
I want it to click in part 3 of the canvas,
but it always clicks in the first part. Please help!
Try
Actions.moveToElement(we,0,0).moveByOffset((720/16)*3,1).click().build().perform();
For getting co-ordinates of the elements inside canvas tag use any online ruler
Actions clickAt = new Actions(d);
clickAt.moveToElement(d.findElement(By.xpath("your canvas id here")), 60, 30).click();
clickAt.moveToElement(d.findElement(By.xpath("your canvas id here")), 90, 30).click();
clickAt.build().perform();
Include the Sikuli library in your project.
Take a screenshot of that area where you want to click and save it in your system with name, perhaps "openButton" for the following example: (Better if small in area size)
Use the Pattern and Screen classes:
Screen obj = new Screen();
Pattern openButton = new Pattern(filepath + "OpenButton.PNG");
s.click(openButton);
See "How to use Sikuli with Selenium" for more information.
Is there any way to change the sc-waveform container background from #efefef without having to load the waveform.js library? I have enough libraries loading already and the conainer bg conflicts with our site background color
I am experiencing the same issue and have had this problem before ( Overlay visible areas of transparent black silhouette PNG with pattern using CSS3 or JS ).
Here is an example with your waveform: http://jsfiddle.net/eLmmA/3/
$(function() {
var canvas = document.createElement('canvas');
canvas.width = 1800; // must match
canvas.height = 280; // must match
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = 'WAVEFORM_IMAGE.EXT';
}
img.src = 'OVERLAY_IMAGE.EXT';
document.body.appendChild(canvas);
});
I think I understand what you mean. You want to change the color of the waveform background, the gray stuff around the waveform:
The problem here is that waveforms you get from SoundCloud API are represented as partly transparent PNG images, where waveform itself is transparent and the chrome around it is gray (#efefef) color.
So, unless the library you want to use for waveform customisation is using HTML5 canvas, you won't be able to use change the color of that chrome (so no, not possible with either HTML5 Widget API or Custom Player API). And you have to use waveform.js or the likes (or modify the waveform image on canvas yourself).
You could try to experiment with newest CSS filters (webkit only for now) and SVG filters, and possibly some MS IE filters for older IE versions, but I am not sure you'd manage to just change the color.
Any help with this would be much appreciated.
I am trying to build an app in Windows 8 using xaml and vb.
To test the process of adding a path dynamically to the UI I have created a class that draws a circle using a path (code below). The code fires when a button is tapped/clicked.
The circle then appears briefly near the centre of the screen but then disappears.
If I then count the children on the grid, the circle is counted. Its just not visible.
I'd like to understand what is happening and stop the circle from disappearing.
Dim path As New Windows.UI.Xaml.Shapes.Path
Dim rectG As New EllipseGeometry
rectG.Center = New Point(500, 500)
rectG.RadiusX = 100
rectG.RadiusY = 100
path.Data = rectG
path.Stroke = New SolidColorBrush(Windows.UI.Colors.LightGreen)
path.StrokeThickness = 1
path.Fill = New SolidColorBrush(Windows.UI.Colors.LightGreen)
path.Name = "TestName"
_TargetGrid.Children.Add(path)
Finally figured it out. I needed to set the column and row span property.
On the test I did it using the code although in a proper app it would probably make sense to use some kind of predetermined styling.
However, here is the code I added:
path.SetValue(Grid.ColumnSpanProperty, 5)
path.SetValue(Grid.RowSpanProperty, 5)