I'm working on HTML5 canvas in Adobe Animate CC. Before embedding video I've created click actions and added links and since the video has been added (by Components > Video) all clickable objets stoped to work. Video is playing and slides and all animation is happening except interactive elements. I am feeling that the video is somehow embedded above everything (I have video layer at the very bottom).
Would you be able to help me please? Any advice appreciated
Video isn't part of the canvas, it's DOM element and it's over HTML5 canvas by default. If you'll view Animate's generated HTML code you can see it (video tag in "dom_overlay_container" div).
You need to rearrange your project and keep in mind that you have other DOM elements too in addition to the canvas.
Related
recently when I was looking to find some tool regarding some rf bits operation I found this, it was not a website nor a gif it's extension was .svg it is displaying moving objects and when we are hovering it is changing its animation like this
So, my question is that how we can create this type of svg animation with hover-events?
I am in the process of converting some animated GIF animated spinners to animated SVG for better/sharper display on Hi-DPI screens.
One issue I've run into is that when a user starts navigating to another page, an animated GIF continues animating but an animated SVG freezes. So if I want to have an animation that shows the next page loading, I can't find a way to get away from using GIFs.
Is there a way to have SVG animations continue animating during page navigation?
(I am specifically using Chrome for this, because if it doesn't work in Chrome I can't use it.)
EDIT: The SVG uses SMIL to do the animation.
UPDATE
After receiving no responses on this, I can't find a way to keep SVG animations animating during navigation, so I have adopted a different approach, which is to use CSS animations.
CSS animations continue animating even after navigation starts. They are a little harder to deal with, as far as inserting into a page and integrating with other elements, but they do the trick.
I have a window displaying a video stream with a twitter feed as an overlay.
When a new tweet is displayed, the current tweet animates out using a rotate animation and the next tweet is rotated into view. The animations are performed using a RotateTransition.
The app also switches between different cameras to display different streams. To give an indication of when the app switches to the next camera, I have a progressbar that fills using a Timeline object.
This works well, until I resize the window. The rotate animations start to flicker, along with the progressbars as they gradually fill.
As a test, I disabled the video stream, to see what's happening. The 'artifact' doesn't occur then and I can resize as much as I want. If I play the stream and don't resize, everything works well.
The video player is based on VLCJ, but the actual pixels are drawn on a WritableImage in an Imageview.
See the following images that illustrate the problem.
At the bottom right you can see 2 different progress bars (a ProgresBar and a ProgressIndicator).
A part of the flickering result is still visible below the second image. It somehow stays visible, probably because the area doesn't get redrawn.
Any idea what makes the flickering happen? Is there anything I can do to fix or avoid this?
I tried some VM options in IntelliJ: -Dsun.java2d.d3d=true -Dprism.forceGPU=true to somehow enable hardware acceleration, but that doesn't seem to help.
Disabling the progressbar fill animation doesn't help either.
I had a similar problem with some arcs and shapes that would flicker when its attributes / sizes were changed.
The solution to my problem was to make sure that the methods used to change the shapes were called from inside the JavaFX thread.
Platform.runLater(() -> {
arc.setStartAngle(30);
arc.setLength(45);
}
Have just completed an implementation for brightcove on the following site: www.disney.com.au.
We have a brightcove player running for some of the items in the main header slidershow. We're using the smart api and when viewed in on desktop(flash) I noticed that some controls in the player are a little blurry. It looks vert similar to an old flash issue where certain items we're blurry if they weren't positioned on a full pixel x,y value.
We cannot use the 'flat' brightcove theme and would prefer not to have to create a custom skin if avoidable. Any idea how to fix this issue ?
Cheers
Is there a good way to detect if SVG animation is available, and then adjust the DOM appropriately?
I'm using animateMotion to animate the motion of a g containing images. This only works in Mozilla; even worse, having the animateMotion unstarted leaves the images in a different position in both Mozilla and WebKit (but not the same place in each!).
It seems I need a way to adjust the properties on the g and images to deal with each scenario, and to add the animateMotion tag only if it would work. Any suggestions?
Modernizr detects only high level feature existence and trusts the browser not to lie. Desktop Safari, for example, has a big "Yes" for SMIL from Modernizr. But SMIL is only partly implemented in pretty much every browser (even Firefox 4!), and you have to test each individual attribute animation to figure out exactly which one is working or not.
For example, you can't animate the startOffset for text on a path animation in Desktop Safari using SMIL. There is no library that detects feature existence for things like this.
IMHO, where they exist you should use CSS transforms/animations for general purpose animation on everything other than IE. For IE, use Javascript (or Canvas) animations.
(BTW, animateTransform on Chrome is broken - it miscalculates the translations)
I just had this issue with a Samsung phone running Android 4.2.2. It would report true for all three of these: Modernizr.svg, Modernizr.svgclippaths, Modernizr.smil but no animation and the clip-paths where messed up. It looked like only one element could have a clip-path. Anyway, we ended with this not-so-great resolution:
isAndroid = /Android/.test( navigator.userAgent );
Sorry, android users, you'll only see the backup image. This is a horrible fix but it was only for a simple logo animation so...
Modernizr detects support for SVG animation (SMIL).
Without the complete example it's impossible to say for sure what's causing the differences.