I have an image in Flex I want to change the image with actionscript to show some other image say every 3 seconds or so. I also want to make transition between the image and the next one for instance fade in/out. What is the best way to do so?
If you want to fade in the new image while at the same time fading out the old, use a Parallel object:
var p:Parallel = new Parallel();
var fadeOut:Fade = new Fade(image1);
fadeOut.alphaFrom = 1;
fadeOut.alphaTo = 0;
var fadeIn:Fade = new Fade(image2);
fadeIn.alphaFrom = 0;
fadeIn.alphaTo = 1;
p.addChild(fadeOut);
p.addChild(fadeIn);
p.duration = 1000; //time in ms
p.play();
Picking things up when you already have an image up:
Use the Fade effect on the first image. Make its alphaFrom="1.0" and its alphaTo="0.0". It willthen dispatch an EffectEnd event. In your handler for that event, switch the target image source and call another Fade effect, that switches the alphaFrom and alphaTo values and switches the image source. Then just use a timer or setTimeout (or setInterval) to stay on the image a certain length of time, then rinse and repeat. Look at the example in the link provided above. It's really not hard.
Use a timer to change the image source attribute in conjunction with Fade Effects.
The general gist is:
Timer Ends
Start Fade Out Effect
On Fade Out Effect complete, change image source
Start Fade In Effect
On Fade in Complete, restart timer
Related
I have a .gif that is animated to begin from the left of the screen to a few hundred pixels to the right. The animation lasts 5 seconds and I have set it so it doesn't return to its initial spot.
What I want is for the .gif to start once the CSS animation is finished. I realise that some forums give codes for a mouseover effect so that it changes from a .jpg source of the animation to the .gif. But I can't find anything that gives you a timer instead of mouseover.
It's been a few years since I've worked on websites and I've forgotten so much, so this has been a struggle.
Any help is appreciated. Cheers.
The way to change an <img> source via javascript is fairly simple, the syntax looks like img.src = "new/source.gif".
Having the change to a GIF match up with the end of your animation can be achieved a variety of ways, but I would do it by adding the animation to your element as a class at the same time you set a time out in your javascript.
HTML
<img id="image" src="path/to/static.jpg">
JAVASCRIPT
var img = document.getElementById("image");
function photoSwitch(){
// begin your CSS animation by applying class
img.setAttribute("class", "some-animation");
// have javascript wait 5s before switching the image source
setTimeout(function(){
img.src = "path/to/moving.gif";
},5000);
}
photoSwitch();
I'm using animate.css for doing some animations. If an error occurs, the element should bounce:
$target.addClass('animated bounce');
That's working well. But if the user is doing the same thing, there won't be a second animation, as the classes are already added.
So I try to remove the classes after the animation like this:
$target.addClass('animated bounce');
setTimeout(function(){
$target.removeClass('animated bounce');
}, 1000);
My question is, if this is how it should be done (I don't know how long the animation is exactly), or is there another solution for repeating animations?
You need to do this:
$('#target').removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
$('#target') is in this case the ID of your element, change this to your needs.
there is a shorter solution , you have to 'refresh' the animated element each time
function refreshElement(id){
var el = $(id);
el.before( el.clone(true) ).remove();
}
and that way you can run an animation on that element again
Run on mouse enter AND exit:
$target.stop().toggleClass('animated bounce');
the animation class is added & removed based on the mouse's hover (enter/exit) action. The class will not be left active after exiting the item.
The .stop() will stop the animation from repeating multiple times if someone hovers/exits many times before an animation is complete.
I am having an issue while using spine animation in cocos2dx. Here is the code
skeletonNode = new CCSkeletonAnimation("Snake.json", "Snake.atlas");
skeletonNode->setAnimation("Walk", true);
skeletonNode->setScale(1.0);
skeletonNode->setSlotsToSetupPose();
CCSize windowSize = CCDirector::sharedDirector()->getWinSize();
skeletonNode->setPosition(ccp(windowSize.width / 2, windowSize.height/2));
addChild(skeletonNode);
skeletonNode->release();
now when i change using add animation method, then for a second,it flickers while changing animation. I also tried clear animation before adding new animation but same problem.
this is how i change animation
skeletonNode->setSlotsToSetupPose();
skeletonNode->addAnimation("Sleep", true);
i can not understand why it flickers. Please help me.
When you add new animation to current frame it can't sync. with last frame.
so you should mix animation instead of add a new animation i.e.
skeletonAnimation->setMix("animation_1", "animation_2", duration);
Hi am making a small HTML5 canvas demo.
I initiated the canvas using modernizer from O'Reilly's HTML5 text.
This is for iPad so my canvas is 1024 by 768.
I then load in a background image in my DrawScreen function.
var backgroundImage = new Image();
backgroundImage.src = "images/background.jpg";
backgroundImage.onload = function(){
context.drawImage(backgroundImage,0,0);
}
I want to add text to this then. So I do:
function drawText(){
context.fillStyle ="gray";
context.font = "28px Helvetica";
context.fillText(message, 260, 700);
}
I then call both functions:
DrawScreen();
DrawText();
However my background image totally over writes my text. Or is on top of it. If I disable DrawScreen(); I can see the text. Changing the function order doesn't make a differnce...
How to do this? I feel so stupid that am stuck on something that seems so elementary.
Thanks
The problem is that your image is being drawn after -- and therefore on top of -- your text. This is because of the time it takes the image to load. Basically, what's happening is this:
You call your DrawScreen function
You start loading your background image by assigning the src attribute
You assign the onload() handler to fire once the image has finished loading.
DrawScreen exits, having completed all its work
You call DrawText, which immediately draws the text
At some point later, the image finishes loading, fires the onload() event, and you draw the background image.
I'd suggest restructuring your code so that all the drawing is kicked off by the successful loading of the image. That way, nothing asynchronous will be going on, and the image will be drawn, followed by the text.
Here's a quick example, on jsFiddle.
I have a custom viewstack that applies automatically a slide in/slide out effect when the view changes. Everything goes smoothly when the views are lightweight but becomes jumpy when the next view requires heavy rendering.
Here are the relevant parts of the code :
_showEffect = new Parallel();
_contentMove = new Move();
_imageMove = new Move();
_showEffect.addChild(_contentMove);
_showEffect.addChild(_imageMove);
_showEffect.addEventListener(EffectEvent.EFFECT_END, effectEndHandler);
I apply the parallel effect to the showEffect of every view :
vis.setStyle("showEffect", _showEffect);
I define the property of the moves depending on the direction of the animation, here to the left (where _views is my resident viewstack in the custom component) :
_contentMove.xFrom = _views.width;
_contentMove.xTo = 0;
_contentMove.yFrom = 0;
_contentMove.yTo = 0;
_imageMove.xFrom = 0;
_imageMove.xTo = -_views.width;
_imageMove.yFrom = 0;
_imageMove.yTo = 0;
_imageMove moves a screen image of the previous view which is set to visible when the animation starts and hidden when it ends.
I have tried some hacks like lengthening the duration of the animation when the next page has never been shown before but this is not quite generic as the required duration to have a smooth transition changes depending on the rendering requirements.
Isn't there any way like in other programming languages to force the layout/rendering process of the next page while it is still out of view ?
Thanks
Viewstack has a creationPolicy property. By default this is set to ContainerCreationPolicy.AUTO, which means the views are rendered as-needed. This explains why the view appears jumpy when switching to it. You can set the creationPolicy property to ContainerCreationPolicy.ALL and it will force the ViewStack to prerender all of its views before they are loaded.
This will solve your problem but note that it will increase overall initialization time of your application because it will now be forced to render everything ahead of time.