flash
Flash / Canvas Comparison
With the canvas being a bit more prevalent and wanting to learn more about this HTML5 thing I decided to port Orion (one of my favorite projects) into JavaScript. I was curious to see the perfomance difference between the Flash Player and the (currently) fastest browser Google Chrome.
Now, I’m no JS expert so please let me know if there are any optimizations I could make but the logic is pretty sound in Flash. Keep in mind I don’t care how fast the page loads up, just how fast it performs afterward.
I also have it separated into two pages to keep the browsers from crashing or taking up too much memory. Also, to prevent crashing both demos auto throttle. As long as they can stay above 29fps they’ll add more particles. If not, it’ll throttle down and remove particles. This is checked every 3 seconds.
Below is the current test results I’ve experienced on my computer here at work. Just from what I’ve been able to experience, the Flash Player performs about 600% faster than Google Chrome. Which makes me wonder when HTML will be able to replace Flash in the interactive realm.
Also something to note, is the memory usage (which you can see in Chrome) is about the same in Canvas or Flash. Which leads me to believe that if people are complaining about performance in Flash now. Wait till people try to do the same thing in JavaScript. Same memory usage, same CPU usage, just slower.
| Browser | Particles | Particles Added Per Render |
|---|---|---|
| Canvas – Firefox 3.6.4 | 14,000 | 600 |
| Canvas – Chrome 6.0.427.0 | 50,000 | 2,100 |
| Canvas – Opera 10.60 Beta | 50,000 | 2,100 |
| Flash 10.0.45.2 | 260,000 | 11,000 |
| Flash 10.0.45.2 Debugger | 150,000 | 6,400 |
| Flash 10.1.53.64 | 270,000 | 11,500 |
| Flash 10.1.53.64 Debugger | 225,000 | 9,500 |
* All results tested with a minimum FPS of 29
Flash (Bitmap) Particle Speed Test
Update June 17
Here are the specs for my work computer as a reference:
MS Windows XP Professional 32-bit SP3
Intel Core 2 Duo E6550 @ 2.33GHz
2.0GB Dual-Channel DDR2 @ 332MHz
256MB ATI Radeon HD 2400 Pro (Dell)
78GB Western Digital WDC WD800ADFS-75SLR2 (IDE)
As you can see, nothing terribly impressive.
.whistler – An AIR Trace Viewer
- Compatibility: AIR 2.0 and later (ActionScript 3.0)
- File Size: About 440Kb
- Change Log
Download Now (1.0.2)
What’s New
- Added Open file directly via AIR 2.0
Description
.whistler is an Adobe AIR based utility. It is capable of displaying the trace and policy log generated by the Flash Debug Player. These log files are used by all browsers so this utility can be used with Internet Explorer, Safari or even Chrome all at the same time. What ever browser supports the Flash Debug Player, .whistler can display Flash traces from it.
I made this utility originally for AIR 1.0 but realized that the log files are locked when an AIR app is running. I eventually forgot aout this project until recently. When I learned that as of AIR 1.5.2, an AIR app can read the log files. So I finished this app up and got it out there. This will make it much easier to debug in other browsers besides Firefox. You also won’t need to have Firefox running just to watch traces anymore and best of all, it’s multi-platform to boot!
I know this will overlap with Flashbug, but it’s a great tool none-the-less. Use whichever works best for your workflow. Enjoy!
Features
- View Trace Log – View the trace log from any browser.
- View Policy Log – View the policy log from any browser.
- Filter – Filter the log with any keyword or use regular expressions.
- mm.cfg Creation/Configuration – mm.cfg will be created automatically if it doesn’t exist. You can then configure it directly from .whistler. Any changes you make to mm.cfg outside of .whistler are still reflected in the Options pane.
- Auto-update capability
Flashbug 1.5 Details
Just wanted to write about some of the new features coming in Flashbug 1.5. First off I’d like to say thanks for making Flashbug as popular as it is. It’s not even a public extension and it’s already gotten over 3,000 downloads! I know that’s not a lot compared to others, but that’s a milestone for me =) .
As for Flashbug 1.5, it’s pretty much feature complete at this point and just want to test it some more before putting it up on AMO. Some of the new features you can look forward to are:
Flashbug – An extension for Firebug
- Compatibility: Firebug 1.05 (Firefox 2), 1.3 (Firefox 3), 1.4 (Firefox 3.5), and 1.5 (Firefox 3.6)
- File Size: About 55Kb
- Change Log
BETA Channel Update – 1.6.4 RC2
- RC1
- Better error message when unable to clear log file
- Correctly Clear log file
- Fix mm.cfg location on setups where My Documents is placed different than default
- RC2
- Fixed mm.cfg location on Vista (regression)
- Fixed Ubuntu Trust File
- Updated Player Version display
What’s New
- Fixed SharedObject discovery bug
- Fixed Mac OSX mm.cfg location, for real this time
Description
This will display any traces from any .SWFs running currently (in Firefox or outside of Firefox). All the traces are displayed in a Flash Console tab in Firebug. You can search using the search box in Firebug to highlight any matches. Another added feature is line highlighting and icons for errors, warnings, and info traces. Finally, for any urls that appear in the traces, you can right-click on them to open them in a new tab.
Like FlashTracer, it is required to have the Flash Player Debugger installed or you will not see any traces. Flashbug will tell you the version of Player detected on your system. If you do not have the Debug version, it will give you a link to download it.
Unlike FlashTracer there is no need to configure the flashlog.txt or mm.cfg files. This is all handled in the background by Flashbug so you can just get straight to working.
You can now open either the Trace or Policy log directly from Flashbug. This is to help allow people who want to either export or copy the raw traces directly.
Also new is the Shared Object inspector. This works by listening to all the SWFs that are loaded for the page you are on. It then checks based on the domain against the Shared Objects stored on your computer. If it finds any, it will list them in this panel.
Each row will list a Shared Object found, which you can expand to see the data stored within. You can also right click to open the file directly, if you have an editor installed. Or you can copy the path to the file, or even open the containing folder.
Finally, there is AMF decoding added to the Net Panel of Firebug. This is available only for Firebug 1.4+. If you visit a site that relies on remoting for data transfer you can now inspect the AMF Request being sent to the server. To do this, find the row in the Net Panel that is the AMF Request, and expand it. Once expanded you will see an AMF tab, clicking this will display the AMF message in it’s entirety for you to inspect.
Features
- Utilizes Firebug’s built in search feature – When you search for any words in the logs, the words will be highlighted in real-time.
- Displays Trace logs – Displays the traces emitted from all Flash instances playing in any browser.
- Displays Policy logs – Displays the policy log traces emitted from the Flash Player. These traces usually occur when using cross-domain policies or loading assets from a different domain.
- Automatically setup Debug Player for logging – In FlashTracer you were required to manually configure the log file location. This is now handled automatically by the extension.
- Configure Debug Player settings – The Flash Player itself can be configured to trace out data differently. Those options are available in the preferences window.
- Trace filters – There are a few builtin filters to display your traces differently. If you want to trae an error, it will be traced out in red with an error icon. If you want to trace XML, using the xml keyword, Flashbug will format the xml in a readable and colored format. Below is the list of keywords currently built into Flashbug. In the future I plan on making this customizable.
- @@XML@@ : Formats it into ‘pretty’ XML with coloring
- @@HTML@@ : Same as XML
- @@INFO@@ : Displays a blue information icon to the left
- @@WARNING@@ : Background is a teal with an warning icon to the left
- @@ERROR@@ : Background is a light red with an error icon to the left - Built-in Links – Any URLs that are detected in the traces will be dot underlined. You can then right-click on them to open that URL in a new tab or copy the location to the clipboard.
- Read SharedObject – Read any Shared Objects associated with a page. You can inspect them just like object in Firebug.
- (For Firebug 1.4+) Read AMF/Remoting Request/Response Data – View AMF data sent to and from the page to the server.