I have an HTML page with a background image.
I now want to add a flash (swf) to the corner of the page (a paper-like fold that can be peeled). The thing is the the flash is a small piece of UI (fold) that later opens to a larger view that covers more of the HTML (2 states that switch when clicking). I'm using swfObject.js and embedSwf:
swfobject.embedSWF("fold.swf", "pageFold", "auto", "400px", "9.0.0");
And my HTML is:
<div id="pageFold"></div>
I did several different tries with the width and height parameters, including having them fixed, but my problem is that the swf keeps on covering the HTML's backgound image, even when the swf is in it's smaller state (the folded corner)
Ideally, I would like to have one of the two:
Have a transparent background to the swf, so that I'll always see the HTML background image.
Dynamically change the size of the embedded swf - when it in the smaller state (a folded corner), keep the embedded object small. When the swf is clicked and therefore the flash UI is enlarged, give the embedded object some more space in the HTML.
Is any of these possible?
Any other options or ideas?
Thanks.
swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn)
you need set parObj and attObj as "wmode=transparent" (maybe {wmode:"transparent"})
Also you may need use
stage.scaleMode=StageScaleMode.NO_SCALE in your swf
Where callbackFn is a JavaScript function that has an event object as a parameter:
function callbackFn(e) { ... }
Properties of this event object are:
success, Boolean to indicate whether the creation of a Flash plugin-in <object> DOM was successful or not
id, String indicating the ID used in swfobject.registerObject
ref, HTML object element reference (returns undefined when success=false)
Use id parameter in callback function to manipulate your flash object - move, resize, etc
Related
Initially I set the stage width 500 and height 400. After make a file, now I want it to be 700*500 and I want to show all content in stage. How can I achieve this?
Any help will be appreciated.
If it's a website you're creating you can programmatically control its size via call through a class called ExternalInterface which in turn calls JavaScript-functions. JavaScript can then be used to resize the embedded flash object.
You can find another post about this here: How can I resize a swf during runtime to have the browser create html scrollbars?
I've been Googling around a bit for an answer and haven't found a definitive one either way: is it possible to play a video using an HTML5 canvas, and also allow the user to draw on this video? The use case, for some context, is to play a video on infinite loop so the user can draw multiple boxes over specific areas to indicate regions of interest.
As a bonus (:P), if I can figure out how to do this on its own, any hints as to how this could be done within Drupal? I'm already looking at the Canvas Field module, but if you have any hints on this point too (though the first one is the priority), that'd be awesome!
You can draw html5 video elements onto a canvas. The drawImage method accepts a video element in the first parameter just like an image element. This will take the current "frame" of the video element and render it onto the canvas. To get fluid playback of the video you will need to draw the video to the canvas repeatedly.
You can then draw on the canvas normally, making sure you redraw everything after each update of the video frame.
Here is a demo of video on canvas
here is a in-depth look into video and the canvas
I recently received this request from a client to provide this feature, and it must be CMS-friendly. The technique involves three big ideas
a drawing function
repeatedly calling upon the same drawing function
using requestAnimationFrame to paint the next frame
Assuming you have a video element already, you'd take the following steps
Hide the video element
Create a canvas element whose height/width match the video element, store this somewhere
Get the context of the canvas element with `canvas.getContext('2d') and also store that somewhere
Create a drawing function
In that drawing function, you would use canvas.drawImage(src, x, y) where src is the edited version of the current frame of the video;
In that drawing function, use recursion to call itself again
I can give you two examples of this being done (and usable for content management systems)
The first is here: https://jsfiddle.net/yywL381w/19/
A company called SDL makes a tool called Media Manager that hosts videos. What you see is a jQuery plugin that takes its parameters from a data-* , makes a request from the Media Manager Rest API, creates a video, and adds effects based entirely on data* attributes. That plugin could easily be tweaked to work with videos called from other sources. You can look at the repo for it for more details on usage.
Another example is here: http://codepen.io/paceaux/pen/egLOeR
That is not a jQuery plugin; it's an ES6 class instead. You can create an image/video and apply a cropping effect with this:
let imageModule = new ImageCanvasModule(module);
imageModule.createCanvas();
imageModule.drawOnCanvas();
imageModule.hideOriginal();
You'll observe, in the ImageCanvasModule class, this method:
drawFrame () {
if (this.isVideo && this.media.paused) return false;
let x = 0;
let width = this.media.offsetWidth;
let y = 0;
this.imageFrames[this.module.dataset.imageFrame](this.backContext);
this.backContext.drawImage(this.media, x, y, width, this.canvas.height);
this.context.drawImage(this.backCanvas, 0, 0);
if (this.isVideo) {
window.requestAnimationFrame(()=>{
this.drawFrame();
});
}
}
The class has created a second canvas, to use for drawing. That canvas isn't visible, it's just their to save the browser some heartache.
The "manipulation" that is content manageable is this.imageFrames[this.module.dataset.imageFrame](this.backContext);
The "frame" is an attribute stored on the image/video (Which could be output by a template in the CMS). This gets the name of the imageFrame, and runs it as a matching function. It also sends in the context (so I can toggle between drawing on the back canvas or main canvas if needed)
then this.backContext.drawImage(this.media, x, y, width, this.canvas.height); draws the image on the back context.
Finally, this appears on the main canvas with this.context.drawImage(this.backCanvas, 0, 0); where I take the backcanvas, and draw it on to the main canvas. So the canvas that's visible has the least amount of manipulations possible.
And at the end, because this is a video, we want to draw a new frame. So we have the function call itself:
if (this.isVideo) {
window.requestAnimationFrame(()=>{
this.drawFrame();
});
This whole setup allows us to use the CMS to output data-* attributes containing the type of frame the user wants to be drawn around the image. the JavaScript then produces a canvasified version of that image or video. Sample markup might look like:
<video muted loop autoplay data-image-frame="wedgeTop">
I have been searching - am thinking what I want to do is not possible but thought I would check.
I have a few canvasses on an HTML page as follows: (these are IDs below)
canvasMain - this is going to display
a large version of an image
canvasThumbnail1 - this is going to
display a thumbnail image
canvasThumbnail2 - same as
above...etc
I have it working where I paint the canvasMain with the contents of the thumbnail. The problem is since the canvas is immediate it is copying the pixels as they are over to the canvasMain from canvasThumbnail. This is resulting in an enlarged pixelated image.
What I want to do is click on one of the canvasThumbnails and be able to grab the Image.src property as a string and then pull that into canvasMain instead of actually copying the pixels over from one canvas to another. Essentially just grab the address (local or say on Flickr) from where I can pull in the image. Pulling an image in to a canvas seems to scale it nicely.
From what I have seen I do not think that Image.src value is accessible through the 2d context. I enumerated through its properties and have only found nested objects or native code returns.
I figured that if I clicked on the canvasThumbnail, and then used (this) to get a reference to that canvas element and then grab the 2dcontext of that canvas I may be able to use a property of that context to get a string that represents the value of the Image.src.
Any ideas?
Thanks
Somehow you painted the image onto canvasThumbnail1, presumably from a (high resolution) Image element.
The canvasThumbnail1, or any canvas for that matter, has no memory on things painted on it. So if you paint a large Image onto a tiny canvasThumbnail, the high-resolution data does not exist on that tiny canvas. To get it you must use the original image again, or else you must paint to a larger canvas from the start.
In other words, instead of painting the thumbnail onto the main, you need to repaint Image element (that you used to make the thumbnail) onto the main.
The issue I'm having is that I have a main "wrapper" 100x100 (but it could be any size) - it's just there to hold and display whatever content, swf, gif, etc we may want to throw into it. As long as the loaded content doesn't have 3D animation like rotationY going on, it displays fine. But when it does, the 3D "anchor" properties (like projectionCenter) of the loaded swf inherit those of the main timeline (i.e. 100x100 (main) vs 728x90 (loaded)). If I change the dimension of the main "wrapper" in Flash IDE to match what's coming in - the 3D behaves fine, but I won't know what the dimensions of the content will be until it comes, so I need a way (if there is one) to dynamically alter the main "wrapper" or root display object through AS. Stuff like "this.width = loader.width" or "stage.width = loader.width" or "root.width = loader.width" etc doesn't work. Flex has the hBox and vBox - does AS have anything?
Use ExternalInterface to call a javascript function in the wrapper html, this will change the dimensions of the height/width of the enclosing div that wraps your .swf embd (Embed at width="100%" and height="100%") alternatively use swfobject to get a handle on the embedded object and change the height/width properties to match.
Then you can attach a Event.RESIZE listener and reposition your elements when the swf has been resized to fit the contents.
This is an example (Though just the height of the swf is changing) http://www.markgriffo.com/scrollTest/
Here's the situation - I've got a shell that loads an external .swf. Now, that .swf is 800x600, but it's an animation piece, and there are elements that extends off the stage. When I load the .swf into the shell and call its width attribute, it returns 1200 - because it's including the elements that break out of the stage.
This isn't what I want - ideally, there would be two properties, one to return the 'calculated width' and one to return the 'default width'. Do these properties exist, and if not, what's the best workaround?
The width and height of the loaded SWF as defined by the FLA it was created with can be found in the Loader object in which you've loaded the SWF into.
swfLoader.contentLoaderInfo.width
swfLoader.contentLoaderInfo.height
This will always show you the dimensions as defined in the FLA properties. It makes no difference if any images, MovieClips, or what have you extend off the stage.
The stage.stageWidth and stage.stageHeight properties will always return the width of the stage, the stage is always the top most SWF. In other words, it will always represent the dimensions of the shell's stage. There is only ever one stage in a Flash application.
Mark is very likely right that the content loader info object will contain the correct width and height. I've never checked myself so I can't guarantee it. The docs say 'nominal' and contrast it with 'actual' so it seems reasonable.
There are a couple of other options. You can mask the external swf. Create a mask that is the size of the stage and put all content underneath it. Another idea is to create a movieclip based on a rectangular shape set it's alpha to 0 place it at x:0, y:0 and match it's width and height to stage. Give it an instance name and then when it is loaded use that value for the size.