How to make flash animation responsive
You need to set the proper scaling mode for the flash object. (the scale
embed property) or stage.scaleMode
through AS3 code.
Here is a visual rundown of the options: (you will likely want exact fit or no border)
Let's say this is your document:
We have four boxes (one per corner), and some gray boxes that are off the stage.
Here are you options:
Show All:
Show all scales the content so the whole stage fits, but then you get a gutter if it's not the right size and objects off stage may be visible.
No Border:
This will scale it so the whole content will fill the bounds (keeping aspect), but then if it's not the exact size, you'll get cropping of the stage, see how the boxes are being cropped on the top bottom? You can change the way it aligns the cropped stage with the stageAlign
property.
Exact Fit
This will just make the whole stage fit in the area defined, but it will not honor your aspect ratio and things could looked squished/stretched.
No Scale
This won't scale the stage AT ALL. So if the defined area is smaller than the stage, it will crop it, if larger, you'll get gutters.
You probably want exact fit or no border - depending on if you need the aspect ratio to be fixed. You can also use no-scale and use code to align your contents the way you want.
You can align the content several ways too using the align
embed parameter.
You can adjust these in your embed code. There are also options in the FlashPro publish settings (when you click on the HTML Wrapper Format), or you can use an online tool like: http://embed-swf.org/embed-swf.php
Responsive flash?
You should be able to set the flashObject at 100% width and a static height in html. Any tiling would have to be done within flash itself. You'd probably have to make heavy use of events that relate to the size of the stage changing.
http://swffit.millermedeiros.com/ would be a good resource to go to as well. It does allow you to use 100% width and specify a max/min height. Unfortunately, the script is no longer in active development, and may have to be modified for modern browsers.
I agree with David's suggestion to go another route, but I know how clients can be sometimes...
Creating flash like animations with Canvas and HTML5
If the purpose of the exercise is to learn HTML5 and canvas then the following is probably not for you. If you need to create your teddy animation as quickly and easily as possible, and deliver it using standards based technologies, then I would suggest you download and explore the preview of Adobe Edge. It's a motion and interaction design tool similar to Flash (timeline and keyframes) which outputs a combination of HTML, CSS and JavaScript. I haven't played with the preview version but I'm pretty sure it will be capable of producing the sort of animation you're talking about.
Update:
You might also want to consider Zoë which can be used to export SWF animations directly to sprite sheets. It was created by the team which developed the Canvas
library easel.js and can export the accompanying frame data as either JSON or easel.js. It will allow you to create your animations in Flash (which, let's face it, is still the best web animation tool around) but render them using HTML.
How to make a button flash or blink?
I hope that will solve your problem.
buttonScan.alpha = 1.0
UIView.animate(withDuration: 1.0, delay: 1.0, options: UIView.AnimationOptions.curveEaseOut, animations: {
buttonScan.alpha = 0.0
}, completion: nil)
swiffy html embedded as responsive banner
Thanks for your assistance, though it is now solved. This is how:
HTML IS:
<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src="here i placed a blank image background"/>
<iframe src="this was the link to my swiffy converted html banner" frameborder="0"></iframe>
</div>
</div>
CSS is:
.wrapper {width:100%; max-height:400px; margin:123px auto 0 auto; background:#ad0017}
.h_iframe {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
Within the html of the swiffy converted file:
<div id="swiffycontainer" style="width: 100%; height:100%; max-height:400px!important;">
RESULT: A responsive html5 swiffy converted banner that scales down to mobile. As you expand the browser width it scales to a maximum height of 400px and then physically centres within the browser width. My animation had a red background so i matched the Document background colour of the flash animation to that red, so everything was seamless.
Related Topics
Half Circle with CSS (Border, Outline Only)
Creating a Sidebar Within a Flexbox with CSS
Is It a Bug? Margins of P Element Go Outside the Containig Div
CSS Two Columns of Lists - Responsive Merge into One Column
Why Does Negative Z-Index and Non-Static Position Disable My Checkbox in Most Browsers
Dropdown with a Form Inside with Twitter-Bootstrap
Why Is 100% Height Not 100% of the Browser Height
CSS - Hide Options from Select Menu on iPhone & Safari
Flexbox Layout Does Not Work in Internet Explorer 10
How to Start a New Line with a Particular Item with Flexbox
How to Achieve Curved Top Pointer
How to Make Nice Looking Matrix of Buttons with Bootstrap 3
Flexbox on Ie11: Image Stretched for No Reason
Is There a Disadvantage of Using 'Display:Table-Cell'On Divs