Is anyone else having problems using Swiffy to create swf files into HTML5? Everytime we use it - the images and text gets blurry.
The original flash file is not blurry - but already the images are compressed.
Does anyone know how the swiffy automatic compression works? It seems random
I've tried using vector vs raster, tried making the overall file size under 50KB (should be plenty as upload is usually 100Kb max).
Its happened on variety of sizes - seemingly without rhyme or reason.
Ie. sometimes leaderboards are fine, but mrecs get blurry. Sometimes leaderboards come out crisper than the mrecs!?
I've seen another answer on here saying someone else has the problem with vector objects - and the feedback was to make sure it sits on an actual pixel. Ie. 130px Y axis instead of 130.5 Y axis. But this is not making a difference for me.
Any other suggestions?
--
Additionally - what do people think is the best program to do html5 display banners? Adobe Edge, Google WebDesigner, etc? Seems there's complications with each.
Attached is an example: Swiffy vs Flash Swf Screenshot
Thanks in advance!! Any tips appreciated
Related
I'll start with the pictures:
Comparison Of Different Publishing Methods From Flash CC
It seems like there is a huge difference between what's published by through Flash CC HTML5 with CreateJS and what's actually created on the program although they are exact copies (I'm not talking about the pose of the character)
The shapes making up the body parts are all triangles with a solid fill and no stroke.
However, in the HTML5 published versions it looks like all those shapes now have a thin transparent stroke around them in between each other.
Any explanation or official support is greatly appreciated!
UPDATE:
The accepted answer definitely improved some of the problem but unfortunately not enough.
Since it's a platform limitation, I decided to work around it by doubling up all the assets of every layer and minutely overlapping them as best as I can.
Here's a link of the work around being implemented if you wanted an update:
link
This is an unfortunate issue with Canvas. The SWF format actually draws lines with fills on both sides, which enables the SWF (and Flash/Animate IDE) to create seamless edges when drawing shapes with edges that line up. Canvas can not do that, so the antialiasing causes the effect you are seeing.
A possible approach would be to cache it at a larger size, and scale it down.
var bounds = character.nominalBounds; // Added by Flash export
character.cache(bounds.x, bounds.y, bounds.width, bounds.height, 2);
The last parameter is the cache scale factor (in this case it doubles the cache size). It will still draw at the expected scale though.
I made a quick sample to show the difference, and it does help. Note that caching is also a good way to get rid of aliasing on edges. You can download the sample here. Uses Adobe Animate 2016.
Plain shapes exported from Adobe Animate
Cached the shape container
Doubled the cache size
You also might want to consider dropping in a shape behind it that is closer to the color of the shapes, so if the edges show through, it is not the dark grey background.
So here's a fun one for you guys. Is there a limit on the number of images that can be imported into Flash or Flash Builder?
The answer, I would initially think, is no, however my current project is telling me otherwise. It started in Flash Builder. I was embedding images and etc like normal, using the standard "" code, when I noticed that when I exported the release build, some of the images would be missing. I went through all the links, everything was fine. I looked at all the images, they were all there. Eventually, I began shifting positions to see about layering issues, and I found something odd. Images that were being loaded first were also being removed after a certain number of images had been loaded. This interesting dilemma was also not tied to any specific image. Changing visible properties for different images would always cause the same results: the newest visible image would be added in, but the background image would be removed. There are a total of 65 images that may or may not need to be onscreen at any point in time. There are also 29 buttons, but they don't seem to affect anything when they're marked as visible or not. 22 images seems to be the safe number. When at 23 and 24, it seems to occasionally throw graphical errors when hovering over a button, in that all the area around the button seems to disappear to black. Upon reaching 25, the entire background image goes missing and there are more graphical errors when hovering over or clicking buttons. And for clarity's sake, these screens are not from the actual project. There copyright issues or US trade secrets or something that I could probably get fired for for showing. Either way, these images were put through FB and are exactly how they showed when I ran it.
How it should be:
https://forums.adobe.com/servlet/JiveServlet/downloadImage/2-6434400-644532/450-365/howitshouldlook.png
What it turned into:
https://forums.adobe.com/servlet/JiveServlet/downloadImage/2-6434400-644531/450-369/howitreallylooks.png
Note that there are 31 images in this example, including the gray/grey background. So yeah. Either I'm doing something wrong with how these are put into this project, or Flash Builder and Flash don't like it when you've imported over 22 images into them. I'm including Flash in this because a co-worker suggested I build it in Flash instead and do some wonky coding as a work around. Once I dragged the 20-somethingth png file in, things started to disappear. Then, when doing a ctrl-enter test, nothing is visible but a few of the upper layers, and yes, I've checked to make sure things weren't turned off/on.
I cannot give you code better than I've already stated, because that is literally all that is in the file. The Flash Builder SDK being used is 4.1, Flash version is CS 5.5. I have also fixed my .ini file so that it gets max memory without the extra crashing.
Thanks in advance guys :D
The issue is not the number of images, but the number of transparent pixels to render. It is a compositing optimization that has been in Flash Player since at least Flash Player 4 (though it was 8 instead of 23 at the time). As a side effect, it used to be a hacky way of creating interactive masks back when masks could only be layers in Flash Pro.
It doesn't even have to be images. If you make a movie clip and set its alpha to below 100% (but above 0%) and stack 23, whatever you put under it won't render. The number of compositing layers before giving up is ties to the SWF version you are targeting as well (for backwards compatibility).
(this was one of the first things I asked the Flash Player architect about when I worked on that team)
I'm using haxe and openfl to create an html5 application. I tested the app in multiple browsers and devices, all work fine except in Chrome on iOS 7 only. The images used are not appearing seemingly randomly. Every time I re load different images appear and others disappear with exception to a couple that are always there. Here is what I tried:
I tried setting the z-index on the canvas that is used for one of the missing images, as well as a bigger width and height.
I know that the images are being loaded, I used Charles to take a look. There are no errors in the console log and changing the time and place where the images are being added to the display list in haxe changes nothing.
I swapped out one of the images that are always there for an image that is never there and it still didn't load.
The file names had a couple dashes and spaces in them so I changed that as well with no effect.
It's a very strange problem that I can't seem to diagnose. nor can I really find anyone with a similar problem.
The main issue is the fact that I can't see what haxe is building that might be causing this issue.
This is hard to answer without code samples. My advise is to look at what's different about the pictures that stay versus the ones that don't, both in how you're coding and the pictures themselves. I've had problems with images displaying correctly on ios only to find the problem was embedded somewhere in the metadata of an image. Hope this helps.
I am working on a "Flash banner ads" project and i want some help on it. The guideline is to restrict the total size of the swf to 45 kbs.
I am using TweenNano from greesock so my animations are not that much heavier.
But there are lots of images in the fla. Still i have managed to do the animations and included the images and the file size is within 45 kbs range.
My problem is that the quality of the images is not good. Is there any way we can improve the image quality by as3 or is there any other technique i should use ?? If u want more details i can provide them.... or suggest some image compression technique without reducing the quality...
Thanks
If your target is limiting the SWF's size to 45kb, you don't have much options to increase image quality. First, you may make some vector graphics instead of raster and display that. And second, you can load the images from elsewhere via URLLoader class, for this, make sure to add security context for non-local images, and make sure your ad displayer won't frown upon this.
Alright here's what i did with the final project. (And let me mention you that i was able to decrease the file size upto 40kbs)
I had a total of 11 images (each with 300dpi resolution) and i have to make a flash banner ad within 45kbs of file size.
First thing first... i used TweenNano by GreenSock for the animations
kept the resolution of the images to 300 and decrease their size (height/width) according to my needs in Photoshop and then used "Save for web"
I used png-8 format and in some cases png-24
Import the images to flash and go to properties of the images -> use png (loss-less) compression (Now u may think it will increase the file size... but that was fine because i wanted to maintain some quality too)
I have converted all text to vectors
Used movieclips
In the publish settings too U can compress the swf file.
There is a check box saying "Include xmp metadata" -> i unchecked it and it also helped me to save some kbs
That was it... if in case this information might help someone.. they can use it. :)
I'm experiencing a strange PNG issue in my as3 flash project. I am loading a bunch of PNG's into flash which have gradient transparencies.
In early slides, these are displaying correctly, later on in the project, the gradient transparency is showing as a solid black background.
Is this a memory issue? I've been pretty hot about memory clean up. All the images are loaded in using exactly the same scripts, and I can swap the images around with the identical results. It just seems like after a while flash stops showing the transparency right.
Images of my problem can been seen below.
Working:
http://s331209305.websitehome.co.uk/board/working.jpg
and then after the first level has played:
broken:
broken.jpg (same url as above with broken.jpg at the end (apparently as I am a new user here I can't have more than one url in a post))
I've been search Google for literally hours but can't find anyone experiencing a similar issue.
Any advice very much appreciated.
T
Ok, I know this is an old post but I too searched for a long time on google and only found this reference to the problem I was having as well.
Anyways, long story short, I fixed my issue.
The problem was I had set the alpha way to high. I set it to 5 and it did something similar to yours. I had to make sure the alpha was always clamped between 0 and 1.
Hope that was your issue as well.
I'm curious if you are loading them on top of each other, and you start seeing buildup.
it's hard to tell what exactly is going on without seeing any code, but here are some ideas
make sure that the BitmapData has
alpha enabled (this is usually done
through the constructor)
if this is a
memory issue (though this doesn't
seem like it is) try using object
pools. the HYPE framework has one,
but there are others too.
Check how they are loaded. I use the casa lib for loading, which makes the handling of the images easier, I load pngs through it and haven't had any issues like this.
post a simplified version of the problem. I've solved a problem countless times where I tried to post the problem, but would simplify it to the bare essentials and end up seeing the cause.