I have a Flash-based SWFUpload upload button in a HTML page.
I am trying to style that button. SWFUpload provides a Javascript setup interface to the Flash button's settings. I don't have Flash myself, so I have to work with the pre-compiled SWF file.
.....
button_width: "100",
button_height: "20",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">Upload</span>',
button_text_style: ".theFont { font-size: 18; font-family: Verdana; color: #FFFFFF; }",
button_text_left_padding
....
Now, I want the button to fit in with the background colour of the HTML element it resides on. I don't care whether I achieve this by transparency, or by giving the flash button a colour. But SWFUpload 2.20 doesn't have a setting to specify the background colour any more, and I don't want to use a background image with a specified colour.
I tried
button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
this gives me a transparent button, but it does not react to click events any more. Not even when I click the tiny white pixels of the text.
I tried giving it a transparent background image:
button_image_url : "$swfupload_widget_webroot/images/transparent.png", // 1x1 Pixel
button_image_width: 100,
button_image_height: 20,
but to no avail.
Does anybody have an idea what to do?
Why won't the movie handle clicks any more when set to transparent?
I'm testing on Firefox 3.5 on Windows 7.
Window modes like transparent and opaque are notorious for the odd input bugs they inflict. It is definitely a good idea to stay away from it when you can.
I haven't used SWFUpload, so I'm not entirely sure how it goes about embedding the SWF file. But regardless of the specifics, in the end I'm sure it's using embed/object tags, and for those, there's the bgcolor parameter that overrides the background color specified inside the SWF file. I would suggest taking a look at this parameter (scroll down).
SWFObject is a common way to dynamically embed SWF files using javascript. In case that's what SWFUpload uses, you should be able to apply the following principle to set the bgcolor parameter:
var params = {
bgcolor: #ffcc00,
};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
"expressInstall.swf", {}, params, {});
As I said, I'm not sure what the SWFUpload interface looks like, but the key is to find a way to specify the embed parameters. Hopefully that will at least nudge you in the right direction!
I noticed that with mode=transparent or mode=opaque the flash was seeing the mouse just not the click. So in the flash file I changed the button action from
on (release) {
to
on (rollOver) {
and wouldn't you know, it works. It's a little quirky since people will click on it anyway and will have to move the mouse off the button to "click" it again. But it's better than having to redesign the whole homepage menu because a client wants a flash banner on there.
Naturally, if you don't have the ability to edit the flash file itself then unfortunately this won't help.
Related
I have an animated gif in an img tag that I start by rewriting the src attribute. The gif was created, though, to loop and I only want it to play once. Is there a way, with Javascript or jQuery, to stop an animated gif from playing more than once?
I was having the same problem with an animated gif. The solution is rather simple.
Open the Animated gif in Photoshop.
Go to the Window tab and select timeline(if the timeline is not already open).
At the bottom of the timeline panel, you will find an option, which says "Forever".
Change that to "Once".
Go to File> Export> Export for Web and save it as a gif.
That should do it.
can you find out how long the gif takes to loop once?
if so then you can stop the image like this:
pseudocode:
wait until the end of the image (when it is about to loop)
create a canvas element that has a static version of the gif as currently displayed drawn on it
hide gif
display canvas element in a way that makes it look like the gif froze
javascript:
var c = $("canvas")[0];
var w = c.width;
var h = c.height;
var img = $("img")[0];
setTimeout(function () {
c.getContext('2d').drawImage(img, 0, 0, w, h);
$(img).hide();
$(c).show();
},10000);
jsfiddle
edit:
I forgot to add reference to the original answer that I took this from, sorry
Stopping GIF Animation Programmatically
that one doesn't address the time factor you need for only one loop
Also, it has been mentioned that this approach is problamatic in certain cases (It actually didn't work when I try it in firefox right now...). so here are a few alternatives:
mentioned by Mark: edit the gif itself to avoid looping. this is the best option if you can.
but I've run into cases where it was not an option (like automated generation of images by a third party)
instead of rendering the static image with canvas, keep a static image version and switch to stop looping . this probablyhas most of the problems as the canvas thing
Based on this answer, it's kinda expensive, but it works. Let's say a single loop takes 2 seconds. At a setTimeout after 2 seconds kick in a setInterval, that would reset image source every millisecond:
setTimeout(function() {
setInterval(function() {
$('#img1').attr('src',$('#img1').attr('src'))
},1)
}, 2000)
again, probably just a proof of concept, but here's demo: http://jsfiddle.net/MEaWP/2/
Actually it is possible to make a gif to stop after just one iteration or any specific number of iterations, see an example below (if it is not already stopped), or in jsfiddle.
To do that the gif must be created with number of iterations specified. This could be done using Screen to Gif, it allows to open a gif or a bunch of images and edit it frame by frame.
This solution also allows you to reset the animation by imgElem.src = imgElem.src; but this does not work in MS IE/Edge.
Jurijs Kovzels's answer works in some condition but not in all.
This is browser-dependent.
It works well with Firefox. But In Google Chrome and Safari, it does not work if the gif is on the same server. The example he provided works because the gif is on the external server.
To restart gifs stored on the internal server, using Google Chrome and Safari, you need extra steps to make it work.
const img = document.getElementById("gif");
img.style = "display: none;";
img.style = "display: block;";
setTimeout(() => {
img.src = img.src;
}, 0);
This is inspired by this answer.
Not sure if this is the best way to respond to everyone and have it appear after all the previous answers and comments, but it seems to work.
I don't have much control over the gif. People post whatever gif they want as the "thankyou.gif in their account directory and then the ThankYou code runs whatever they've put there when a comment is submitted to a form they've posted. So some may loop, some may not, some may be short, some may be long. The solution I've come to is to tell people to make them 5 seconds, because that's when I'm going to fade them out, and I don't care if they loop or not.
Thanks for all the ideas.
I know I am pretty late here but..here it is...
I don't know if you would go to this length but let me share a trick.
Open the GIF in Macromedia Flash 8(it has deprecated since then), Export the GIF as Animated GIF. You will have to choose the file location. After that you would receive a dialog box with settings. In that, add the number of times you want the animation to happen. Click OK. Problem solved.
I have made a flash as3 project in adobe flash pro with the dimensions 20px x 150px.
i would like to ceep it this size, but the problem is that my application needs to ask for the MICROPHONE premissions
( like in the image )
but this only happens if the flash object is big enough.
are there any workarounds with maybe the "overflow = visible" method or something ?
thx for any help
Here are a couple of options:
Temporarily increase the dimensions of the SWF in HTML. I've never done this, but I imagine it would work and is the most simplest solution.
Use wmode="transparent" or wmode="opaque" in your embed code. In both of these modes you can layer HTML on top of or underneath the Flash object. The SWF should be sized so that it is big enough to display the dialog. When the dialog is not visible, you can hide portions of the Flash app by covering them with HTML.
I've used the 2nd option successfully, not for this purpose, but for showing some HTML elements (arrow images and text) to guide the user through these "allow" camera/microphone dialogs.
For both of these options to work, you need to be able to detect when the user has closed the dialog. Though there is no official Flash API for doing this, however, there are some good work arounds for doing that.
So, I'm pretty much a beginner in Flash and Actionscript (using AS3, as I said in the title), and I'm trying to make a basic escape the room game. I haven't gotten far, and right now that's because every time I test my game (or publish preview it) the graphics get this annoying outline. Here it is when tested: http://i305.photobucket.com/albums/nn228/chokingondrama/flash.png
Every outline corresponds to some object present in the game, most of which have an alpha component of 0 since they're on different sides of the room. This didn't happen before, but once I added the code that allowed the player to change their view with the arrow (each viewpoint/wall is a different frame) these appeared.
It's a little different when published to HTML, basically it just gives each image a white background: http://i305.photobucket.com/albums/nn228/chokingondrama/html.png
Also, it would be nice if somebody could give me advice on how to make sure importing to flash won't result in lower quality.
Thanks in advance. If needed, I'll post any part of the code.
Some tips:
Don't set alpha to 0, instead use the visible property, setting movieclip.visible = false will make it a lot more efficient.
As for the importing and quality, after you import to stage or library, bring up the library (ctrl + l), and right click on the file you imported, go to properties. If it's an image, set compression to lossless, and allow smoothing.
For audio, go to file-> publish settings, and change audio stream and audio event (whichever you might use) to 128kbps.
As for your main question, I need more info, if you want you can post your source. It might be because of how you are placing your graphics on the stage.
For each of your MovieClips in question:
Try disabling button mode and see if the rectangles go away.
movieClipName.buttonMode = false;
If that doesn't help, or you really want button mode, try setting
movieClipName.tabEnabled = false;
There's a chance that since you added keyboard interaction each of your MovieClips are now expecting to be selected by the user when they press the tab key, much like any normal web form.
tabEnabled in the docs
You could also try
movieClipName.focusRect = false;
focusRect in the docs
I am quite new to AS3 and I have never worked with classes, so I am encountering a couple of problems.
I'd like to center a movieclip, have it so that it doesn't scale. And then I'd like to add a background color that stays there no matter how I scale the browser.
Can someone please explain me this in babysteps? Since I don't know how to implement a class and make it work with my fla.
Thank you so much!
J.
If I've followed you correctly, you want to have your swf file in the centre of a webpage, to change the background colour, and to stop the swf from stretching if you drag the boundaries of the web browser around?
If so, your question is a more HTML related, as none of that can be accomplished through ActionScript. If what you want to do is position your swf inside an HTML file correctly, you can make Flash export the HTML file for you (assuming you're using the Flash IDE).
Here's a link that'll guide you through the process of doing that, it's very clearly written: http://www.w3schools.com/flash/flash_inhtml.asp
To change your web page's background colour, see this site: http://www.tizag.com/htmlT/bgcolor.php
Once you've got that HTML file exported from Flash, you can check how it will align your Flash swf to the rest of the webpage. Somewhere in the code should be something like align="left", and you can change that to centre, right, etc.
Hope that helps,
debu
to center it you can do:
var toCenterMc:MovieClip = new MovieClip();
toCenterMc.x = stage.stageWidth/2 - toCenterMc.width/2;
toCenterMc.y = stage.stageHeight/2 - toCenterMc.height/2;
backgroundcolor you can add with this tag (it has to be above the class header, that means the code line that says public class example extends exampleparent):
[SWF(backgroundColor="0xec9900")]
Is there any way, in HTML, to include an animated GIF in an <img> tag, but automatically tell the GIF to not animate? I realize that the user can stop animation by pressing ESC or clicking Stop, but I want the GIFs not to animate at all.
I only want to do this on one specific page, and making separate non-animated versions of the (1500+) GIFs is not feasible. I simply want the GIFs to not animate.
You could use Giffer.
Just include the library in your page:
<script type="text/javascript" src="gifffer.min.js"></script>
Instead of setting src attribute on your image use data-gifffer.
<img data-gifffer="image.gif" />
At the end, call Gifffer() whenever you want. For example:
window.onload = function() {
Gifffer();
}
If you don't want the GIF to move at all you can always edit the .js file to remove the play button.
Not with plain HTML but using PHP with imagecreatefromgif might help you
I don't think calling window.stop() will be a good solution. This would need to be called for every image that is loaded to prevent it from running half way through and stopping. The best solution is to use a library such as GD to create images featuring just the first frame of the animated GIF.
Use ImageMagik, and you can readily convert all 1500 images.
You could use window.stop() in javascript, which should be the equivalent of pressing ESC/clicking stop. However, I'm pretty sure it won't work in all browsers (i.e. IE).