I want set visibility to shape on the following manner
var shape = new cjs.Shape();
shape.graphics.beginFill("#0000FF").drawRect(0, 0, 100, 100);
movieClip.addTween(
createjs.Tween.get(shape)
.to({visible: true}, 50)
.to({visible: false}, 50)
);
But is doesn't work? How I can do it?
Setting visible does work, but it probably doesn't work how you think. What is happening in your code is this:
Add "shape" to the movieClip at frame 0
Tween to {visible:true} in 50 frames. Non-numeric properties can not tween, so they are just set immediately at the end of the tween. This means the shape goes from visible at the start, to still visible at frame 50.
Tween to {visible:false} in 50 more frames. The shape will be visible until the very end of the second tween.
Loop. MovieClips will loop their timelines unless told otherwise. CreateJS tweens store initial properties when created, and will reset to those values when going to frame 0. This makes tweens deterministic, so you can set the position to anywhere in the timline, and it will look how you expect.
This means it is visible for the whole timeline, with maybe 1 frame at the end where it is invisible, but then it resets and plays again.
Here is a quick sample where it tweens to visible, then invisible, then visible again: http://jsfiddle.net/99bxn6j5/1/
mc.timeline.addTween(
createjs.Tween.get(shape)
.to({x: 100, visible:false}, 40)
.to({x: 200, visible:true}, 40)
.to({x: 300, visible:false}, 40)
);
I am not sure what your desired result is, but you will probably need to change the approach to get it working.
Related
Trying to set the height along with setting the rotation on a Paragraph object results in the following error:
ERROR c.i.layout.renderer.BlockRenderer - Rotation was not correctly processed for ParagraphRenderer
Also, the height is sent to infinity resulting in an apparently empty page which I'm not sure if it's the expected behavior or not.
If I don't set the height, the text shows up rotated (which is what I want). But my task is to place the text at certain coordinates with certain dimensions and rotation. The placement is fine, but not being able to set the height results in assigning the rotation points to the wrong values and in turn displacing the final position of the text.
Paragraph paragraph = new Paragraph(text);
paragraph.setHeight(height);
paragraph.setMargins(0, 0, 0, 0);
paragraph.setProperty(ROTATION_POINT_X, x);
paragraph.setProperty(ROTATION_POINT_Y, y);
paragraph.setProperty(ROTATION_ANGLE, asFloat(toRadians(rotation))));
document.add(paragraph);
Setting the margins to 0 doesn't seem to have any influence either. The text looks to keep some sort of margin anyway.
So is there a way to control what the dimensions of the object displayed are? I could also settle for a way to make the rotation pivot from the center of the object.
You should set both width and height at the same time for rotated objects.
Here is an example code:
Paragraph paragraph = new Paragraph("Hello world");
paragraph.setWidth(200);
paragraph.setHeight(20);
paragraph.setBackgroundColor(ColorConstants.RED);
paragraph.setMargins(0, 0, 0, 100);
paragraph.setProperty(ROTATION_POINT_X, paragraph.getWidth().getValue() / 2);
paragraph.setProperty(ROTATION_POINT_Y, paragraph.getHeight().getValue() / 2);
paragraph.setRotationAngle(Math.PI / 180 * 45);
document.add(paragraph);
Visual result:
My very first question to stackoverflow, so please be kind.
I have two shapes on a createjs stage. The first one background covers the whole stage and has a listener on click defined. I want to put another shape on this one and this one should not trigger the click-listener defined on the background.
In the following example a click on the red circle triggers the listener of background.
var stage = new createjs.Stage('c');
var rect = new createjs.Shape();
rect.graphics.beginFill('#0000ff').drawRect(0, 0, 50, 50);
var background = new createjs.Shape();
background.graphics.beginFill('#000000').drawRect(0, 0, 500, 500);
background.alpha = 0.7;
background.on('click', function () {
circle.visible = !circle.visible;
stage.update();
});
var circle = new createjs.Shape();
circle.graphics.beginFill('#ff0000').drawCircle(225, 225, 50);
// circle.on('click', function () {});
stage.addChild(rect);
stage.addChild(background);
stage.addChild(circle);
stage.update();
https://codepen.io/anon/pen/rKmPOY
I found, that if I put an empty click listener on the circle, I have what I want, but this feels awkward.
What is the right approach here? This shouldn't be a bubbling issue since background and circle are siblings. Or am I getting this completly wrong?
If something doesn't have a click listener, it will not be evaluated when the mouse is clicked. This is definitely a desired behaviour (it is much more annoying to have things you don't want blocking clicks).
Your workaround adding an empty listener is fine, and pretty typical.
The only other option I can think of is to check what is under the mouse on click, and filter it manually, which is way more work.
Cheers,
I have a coloranimation in a UWP application to animate the background of a TextBox:
animation = new ColorAnimation();
animation.Duration = TimeSpan.FromMilliseconds(600);
animation.From = Colors.White;
animation.To = Color.FromArgb(255, 40, 40, 40);
animation.RepeatBehavior = new RepeatBehavior(2);
flashStoryBoard = new Storyboard();
flashStoryBoard.Children.Add(animation);
Storyboard.SetTarget(animation, MyBox);
Storyboard.SetTargetProperty(animation, "(Panel.Background).(SolidColorBrush.Color)");
When I run the animation above, the animation ends in the TextBox having a white background color instead of the expected default (which is the dark 40, 40 ,40 color..). When I remove the repeatbehavior the animation runs just fine but of course only once. There are no easing functions applied. When I set the fillbehavior to stop, I get a flickering effect at the end of the animation.
Any ideas?
When I run the animation above, the animation ends in the TextBox having a white background color instead of the expected default (which is the dark 40, 40 ,40 color..).
I'm not able to reproduce this problem, by my side it ends with the color "FF404040". Maybe you can create a new blank project and try your posted code again. Or you can share your sample with us.
When I set the fillbehavior to stop, I get a flickering effect at the end of the animation.
I think you are trying to make the TextBox's background changed from white to dark gray twice when the TextBox is loaded, but when set RepeatBehavior equals or over two times, it will flicker one more time very quickly in the end.
I found a workaround for this scenario, it makes the animation ending with the color "FF404040" and will not flicker in the end:
Storyboard flashStoryBoard = new Storyboard();
ColorAnimation animation = new ColorAnimation();
animation.Duration = TimeSpan.FromMilliseconds(600);
animation.To = Colors.White;
animation.From = Color.FromArgb(255, 40, 40, 40);
animation.RepeatBehavior = new RepeatBehavior(2);
animation.AutoReverse = true;
flashStoryBoard.Children.Add(animation);
Storyboard.SetTarget(animation, MyBox);
Storyboard.SetTargetProperty(animation, "(Panel.Background).(SolidColorBrush.Color)");
flashStoryBoard.Begin();
As you can see in my code, I swap the animation.To and the animation.From, and set the AutoReverse property to true. Since your animation's Duration is only 0.6s, I think this method will not effect the user experience and can solve the flickering problem.
I have added a TimeLineMax to a scene that I am working on. The functionality is working great but I am having trouble with a few details.
I would like my scene to pin like this site http://www.google.com/inbox/#bundles . By this I want multiple pins within one scene so that a user can't scroll through my animations without viewing them.
Here is a demo site of my work so far : https://so-staging.herokuapp.com/users/sign_in#publisher-demo-container
You can see my progress if you scroll down. Three steps will pop up and then animate away. I also have adjusted the background position of #publisher-demo-steps based on scroll.
However this isn't the desired goal. I would like this:
1. Pin #publisher-demo
2. Fire step 1 animated background-position on scroll.
3. Fire step 2
4. Fire step 3
I would like each step to be pinned so that a user can't go to the next step until the animation is complete.
I know this is confusing and I have been staring at it way too long. Thanks for the help. Here is my scrollmagic and GSAP code.
var controller = new ScrollMagic();
var tween = new TimelineMax()
.add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"}))
.add(TweenMax.to(".blue-circle", 1, {display: "block"}))
.add(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
.add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "22% 52%"}))
.add(TweenMax.to(".red-circle", 1, {display: "block"}))
.add(TweenMax.to(".red-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
.add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "76% 50%"}))
.add(TweenMax.to(".green-circle", 1, {display: "block"}))
.add(TweenMax.to(".green-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}));
var scene = new ScrollScene({triggerElement: "#publisher-demo", duration: 4000, triggerHook: -100})
.setPin("#publisher-demo")
.setTween(tween)
.addTo(controller);
If I understand you correctly you would like to trigger the animations to play unbound from scroll progress.
The way you do this is by not linking the scene that does the pin.
As soon as a scene has a duration it will link animation progress to scroll progress.
Then you just add a scene for each animation trigger point.
i.e. like this:
new ScrollScene({triggerElement: "#trigger-element", duration: 4000, triggerHook: 0})
.setPin("#publisher-demo")
.addTo(controller);
new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0})
.setTween(new TimelineMax()
.to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"})
.to(".blue-circle", 1, {display: "block"})
)
.addTo(controller);
new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0, offset: 300)
.setTween(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
.addTo(controller);
General notes:
As you see I used a trigger element that is different from the pinned element. It should be positioned absolute and located at the same position as the pinned element. the reason I do this is, because the pinned element moves and would supply a wrong start position for the other scenes.
A triggerHook of -100 doesn't make any sense. The value can by definition only be between 0 and 1.
instead of TimelineMax().add(TweenMax.to()) you can use the shorthand TimelineMax().to() (see http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/)
Note, that ScrollMagic 2 has been released for a while now. The syntax is very similar so you should consider upgrading.
I am building a 2D game where the user is a circle(:P) and the enemies are rectangles coming at him. However, my problem is that when I placed a very nice picture of space I found on the internet, the screen draws whatever it has to underneath this image. Everything works,I can still see my lives going down when something collides into me - except the fact it is all covered up by this picture.
In a nutshell, my question is: How Do I Draw everything ON Top of this - (I tried using the 'Send To Back' Command)
EDIT: The form draws everything through a timer, and the user controls his character through keys. This probably won't help - but if it does it's here.
Sorry folks didn't think you'd need the code. Here it is:
In the mybase.load procedure:
PicBackGround.Dock = DockStyle.Fill
PicBackGround is the picture box with the image.
In the paint procedure:
e.Graphics.Clear(Color.Black)
e.Graphics.FillEllipse(Brushes.Orange, Player)
'Projectiles
Dim i As Integer = 0
Do
If Current_Projectile(i).IsEmpty = False Then e.Graphics.FillRectangle(Brushes.Red, Current_Projectile(i))
i += 1
Loop Until i = UBound(Current_Projectile)
'Objects
i = 0
Do
If Objects(i).IsEmpty = False Then e.Graphics.FillRectangle(Brushes.Blue, Objects(i))
i += 1
Loop Until i = UBound(Objects)
Okay: Player is a rectangle declared right at the top, Dim Player As New Rectangle(0, 0, 50, 50);
There is then the array Objects, which stores all the data about the enemies coming at the player, Current_Projectiles is simply an array to store data about rectangles(bullets) that the player fires.
Anything else you want to know just let me know.
Yes, a control overlaps anything you draw on the form. A simple solution is to use the form's BackgroundImage property instead. Or draw the image yourself.