SWiK
» tagged pages
» logout

sorted by: recent | see : popular
Content Tagged with front + Flash

Raise your glasses and voices! A Karaoke lyrics scroller in JavaScript

One of the things that fascinates me lately is the interaction of JavaScript and Flash and how you can make content available in HTML that normally would get buried deep inside a Flash movie. The most pressing matter to fix is how to caption online video in an accessible manner and we'll have a go at this at Scripting Enabled next week.

Meanwhile it is pretty cool to see in what roundabout ways people come up with really cool solutions that point very much in the right direction. Thai from Thailand (no, I did not make this up) has created a Karaoke lyrics scroller using Scott Schiller's SoundManager2 and lyrics in the StepMania format.

Get into the groove and try it out yourself.

Ajax: Ajaxian

Dojo Multifile Uploader with Flash

SitePen continues their work on Deft with a multi-file uploader:

The Dojo Toolkit now has support for multi-file uploads, thanks to the new Deft project. The dojox.form.FileUploader class embeds a hidden SWF file in the page which, when triggered, will open a system dialog that supports multiple file selection, and also file masks, which allows the user to filter their selection by file type.

Better yet, it’s fully degradable. If the user does not have version 9 or greater of the Flash Player installed it can, depending on the options you set, present the user with a standard HTML file input instead (or the option to install the latest Flash Player). The HTML form also supports multiple files, although due to browser restrictions, only one can be selected at a time. But they are all uploaded at once.

A major benefit to developers is the flexibility to supply your own styled upload button. For example, a paperclip icon toolbar button in an email application should not look like the standard file input with a text field followed by a “browse …” button. What inspired this design was working on projects where designers and clients would hand me a specification which would say, “the upload button looks like this“.

To use it? Fairly simple:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var uploader = new dojox.form.FileInputFlash({
  3.         uploadUrl:"http.localHost/FileUpload.php",
  4.         button:myButton,
  5.         uploadOnChange: false,
  6.         selectMultipleFiles: true,
  7.         fileMask: ["All Images", "*.jpg;*.jpeg;*.gif;*.png"],
  8.         degradable: true
  9. });
  10.  

Want to try it out?

This comes after the YouTube uploader that uses Gears.

Ajax: Ajaxian

Deft-fully using Dojo and Flex

Tom Trenka of SitePen has created a new top-level Dojo package called Deft which "focuses on ActionScript components created in support of the various projects within the Dojo Toolkit (mostly for DojoX). Deft source files are well organized based in part on the organization of other Dojo Toolkit projects, as well as the package structure required by the Flex compiler. Most Flex applications are based on the Flex AS3 Application class, which forces you to write at least one “controlling” MXML file in order compile your code. Instead of this, Deft components inherit primarily from the Sprite class — which allows you to write pure ActionScript code."

It contains a few goodies in it including the multi-image uploader, and pre-alpha quality support for dojox.gfx. Future plans include support for audio and video. "Hopefully Adobe will continue its current path towards being open source friendly, helping Deft flourish."

The article goes into detail on downloading the Flex SDK so you can build applications with it.

This is an interesting experiment in the melding of Flash and Ajax techniques. I would love to see the Flash player giving us more access via simple JavaScript, so we don't even need to create SWF bridges.

Ajax: Ajaxian

flXHR: Flash based XHR from flensed

Kyle Simpson has announced a new family of opensource projects called flensed and the first project being flXHR which "utilizes javascript+flash to create a complete, literal drop-in replacement (by being API identical) for the native browser XHR (Ajax) communication mechanism. However, flXHR uses Flash Player's security model to enable direct cross-domain communication, and also has a number of other very helpful extensions."

http://flxhr.flensed.com/code/tests/flxhr-4.html

There are a number of demos which illustrate how it easy it is to take the API-compatible flXHR and swap it to any of your favorite JS frameworks (Dojo, Prototype, YUI, ExtJS, etc) in place of its usage of native XHR... once the simple adapt/swap happens, everything else about the framework library communication works the same, because flXHR speaks the same familiar protocol and API, and so it really is what I like to call "set it and forget it" good.

Hasn't this been done before?

There have been several other attempts at similar things before, including SWFHttpRequest, FlashXMLHttpRequest, Fjax, and F4A. However, all those fell short of the mark in different ways. On my site, there are comparison charts and detailed FAQ's which show how flXHR stands up to these predecessors, and exceeds them in very important and powerful ways. I believe flXHR has accomplished its goal, which was to be *the* complete solution for SWF-based Ajax calls as an identical API-compatible drop-in replacement for native XHR, not to mention many helpful improvements including robust error callback handling, timeouts, and convenience configuration functions, to name a few.

Ajax: Ajaxian

Acrobat.com: PDF and Flash sitting in a tree

Acrobat.com

Ever since Macromedia and Adobe merged, we have been waiting for a day where PDF and Flash played really nice together, and today is the day. Very symbolic for the folks from the companies before the merge.

As TechCrunch says:

At the same time Adobe is launching Acrobat.com, it is releasing Acrobat 9—a major upgrade to one of its anchor desktop apps. the big news here is that for the first time, Adobe’s PDF-creating desktop software will supports Flash. So people can now create documents with embedded Flash movies from YouTube, or developers can design entire new skins for electronic documents using Adobe’s Flex framework—the same programming tool they use to create Web applications.

PDF documents made with Acrobat 9 also support collaboration among multiple authors and reviewers over the Internet, making them connected documents. Best of all, they no longer take forever to load. The next step is for Adobe to make it easy to turn any PDF into a Web page, and vice versa.

Acrobat.com Services

This is the biggest news for me. Acrobat.com itself is a very nice integration of Buzzword, ConnectNow, PDF, and Share. It feels quite snappy (despite the "loading..."), and there are a lot of nice animations of course. A good showcase for Flex.

Ajax: Ajaxian

Porting Dojo Methods to Flash

Mike Wilcox has started a nice series of posts on porting Dojo methods to Flash as a homage for Open Screen (aside: I applaud Adobe's intentions, but need to see a non-assert of their IP before I can do anything with it.)

In part one of the series Mike ports dojo.hitch to ActionScript:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. _global.lang = {
  3.         hitch: function(scope, method){
  4.                 if(!method){
  5.                         method = scope;
  6.                         scope = _global;
  7.                 }
  8.                 var args;
  9.                 if(arguments.length>2){
  10.                         args = arguments;
  11.                         args.shift();
  12.                         args.shift();
  13.                 }
  14.                 if(typeof(method) == "string"){
  15.                         return  function(){ scope[method].apply(scope, args) };
  16.                 }
  17.                 return function(){ method.apply(scope, args) };
  18.         }
  19. }
  20.  

In part two he adds support for dojo.connect(), resulting in:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. _global.lang = {
  3.         __conListeners:{},
  4.         __id:0,
  5.         connect: function(source, event, target, callback){
  6.                 var hitched = this._hitch(target, callback);
  7.  
  8.                 var listener = new Object();
  9.                 listener[event] = function(args){
  10.                         hitched();
  11.                 }
  12.  
  13.                 if(!source.broadcasters) {
  14.                         source.broadcasters = {};
  15.                         AsBroadcaster.initialize(source)
  16.                 }
  17.  
  18.                 source.addListener(listener);
  19.  
  20.                 if(!source.broadcasters[event]){
  21.                         source[event] = function(){
  22.                                 source.broadcastMessage(event, arguments);
  23.                         }
  24.                         source.broadcasters[event] = true;
  25.                 }
  26.  
  27.                 var id = "connect_"+this.__id++;
  28.                 this.__conListeners[id] = {listener:listener, source:source};
  29.                 return id;
  30.         }
  31.  
  32.         disconnect: function(id){
  33.                 var con = this.__conListeners[id];
  34.                 if(con){
  35.                         con.source.removeListener(con.listener);
  36.                         con = null;
  37.                 }
  38.         }
  39. }
  40.  

Ajax: Ajaxian

FancyUpload: Swiff meets Ajax

FancyUpload

Harald Kirschner has created a new version of FancyUpload "a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar."

A good example is the Queued Photo Uploader which is coded by:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
  3.         'url': $('form-demo').action,
  4.         'fieldName': 'photoupload',
  5.         'path': '../../source/Swiff.Uploader.swf',
  6.         'onLoad': function() {
  7.                 $('demo-status').removeClass('hide');
  8.                 $('demo-fallback').destroy();
  9.         }
  10. });
  11.  
  12. /**
  13. * Various interactions
  14. */
  15. $('demo-browse-all').addEvent('click', function() {
  16.         swiffy.browse();
  17.         return false;
  18. });
  19.  
  20. $('demo-browse-images').addEvent('click', function() {
  21.         swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
  22.         return false;
  23. });
  24.  
  25. $('demo-clear').addEvent('click', function() {
  26.         swiffy.removeFile();
  27.         return false;
  28. });
  29.  
  30. $('demo-upload').addEvent('click', function() {
  31.         swiffy.upload();
  32.         return false;
  33. });
  34.  

Ajax: Ajaxian

Adobe Photoshop Express Launches

The launch of Adobe Photoshop Express has been much anticipated. We are seeing the move of a large software company going from desktop to Web for a major application.

As Erick Schonfeld points out "Photoshop Express is by no means just Photoshop ported onto the web."

I am a big fan of Picnik and for awhile was using it quite regularly, so I wanted to see how they compared.

It seems like Photoshop Express is pretty limited and seems very much focused on taking images, putting them online, and doing little touch-ups. One of the things that I am always doing is taking a picture and adding text and shapes to it, and this isn't available, so I kinda don't know when I would use this other than for simple cropping and resizing.

The interface is sleek and Flash-y but somehow doesn't feel as nice as Picnik to me.... I don't know why.

View Source has some fun though:

PLAIN TEXT
HTML:
  1.  
  2. <!--
  3. Smart developers always View Source.
  5. This application was built using Adobe Flex, an open source framework
  6. for building rich Internet applications that get delivered via the
  7. Flash Player or to desktops via Adobe AIR.
  9. Learn more about Flex at http://flex.org
  10. // -->
  11.  

What do you think?

Adobe Photoshop Express

Ajax: Ajaxian

FaviconGrabber and Social Graph

Alistair Rutherford has written a nice looking Flex application that visualizes the Social Graph API:

Flex Graph API

Alistair told us about the application, and some of the fun features:

The initial version was a bit boring looking so I thought it would be nice to pull the 'favicons' for the sites returned in the results. I have detailed how I did this here

Because I could not fetch the icons directly using HTTPService I have used a cgi proxy script written in Python to fetch the target icons and convert them into a Base64 encoded string before returning the data to the Flex application.

The Flex application decodes the Base64 and then passes the data to a modifed version of the IconLoader class from the flexlib library.

The modifications to flexlib took the form of adding in support for 8bpp and 24bpp images.

The graph is implemented using the flexvizgraphlib visualisation component from here:

The application also uses a novel IFrame component which lets you
embed html pages directly into your Flex application.

Ajax: Ajaxian

Dojo Storage updated for 1.0

Brad Neuberg, a partner of crime on the Gears team, has released an update to Dojo Storage that has it cooking with gas on the new Dojo 1.x codebase:

Dojo Storage makes it possible to store large amounts of data (hundreds or megabytes of K) on the client-side, way beyond the 4K limit of cookies. Developers are given a simple key/value storage abstraction, similar to a hash table. What makes Dojo Storage unique is that it automatically determines the best way to achieve this. If Google Gears, a small open-source plug-in that teaches current browsers new tricks, is present then this will be used for storage; if the browser supports HTML 5 DOM Storage, such as Firefox 2, then this is used; and finally, if none of the others are available, then a hidden Flash applet is used to store the data permanently. There are even Adobe AIR storage providers (thanks to SitePen and Adobe) if you are running in an AIR environment!

Dojo Storage has been around for a few years. However, when Dojo made the big move to the Dojo 1.0 architecture, the Flash and HTML 5 storage providers broke; plus, new versions of Flash and new browsers made the old design inefficient. I have seriously re-factored the Flash storage system to be much faster and simpler and fixed bugs in the HTML 5 and Gears storage systems. There is now a new storage.js profile build that you can grab and include in your page to easily use Dojo Storage with the three main browser storage providers: Gears, HTML 5, and Flash. The new Dojo Storage will come out as part of the Dojo 1.1 release coming soon.

I've created a screen cast demoing the different storage providers in action:


Ajax: Ajaxian

Adobe extending Flash platform: Run C, C++, Java and more

Paul Krill picked up on Kevin Lynch saying "It's basically a way to take other languages and make them run on top of Flash Player" as he answered a question from the audience at Engage the other night.

Expanding on the project, Ted Patrick, Adobe technical evangelist, said the technology would allow for cross-compiling existing code from C, C++, Java, Python, and Ruby to ActionScript. This would enable components written in those languages to be integrated into a larger project, Patrick said. "That code becomes perfectly portable into our application platform," he said.

For example, an alternative PDF renderer providing a lighter version of PDF could be cross-compiled, and the Flash Player could read it and display PDFs.

"Right now, everything has to be written in ActionScript or our lower level byte code languages," said Patrick.

In Flash Player, everything has to compile down to SWF byte code, Patrick said. The byte code language inside SWF is called ActionScript byte code.

Of course, this has been talked about quite some time ago. As Tamarin grows up and becomes a solid VM, we are likely to see the polyglot come to being in full force.

Ajax: Ajaxian

Adobe AIR v1.0 & Flex 3.0 Released; New Adobe Open Source Site Launched

Continuing their march into the RIA space, Adobe announced today the official release of AIR v1.0 and Flex 3.0.

Adobe has taken the beta off of the wrapper as their have released both AIR 1.0 and Flex 3.0.

As Ajax developers, Adobe is trying hard to get us developing applications, not just Flash folks. They have a place for us to start with AIR:

The new Adobe AIR runtime enables Ajax developers to build rich Internet applications (RIAs) that deploy on the desktop. AIR applications run across operating systems on the WebKit HTML engine and are easily delivered using a single installer file. With Adobe AIR, Ajax developers can use their existing skills and code to build responsive, highly engaging applications that combine the power of local resources and data with the reach of the web.

Adobe AIR

The AIR runtime and SDK has gone through an especially long beta cycle (since June 2007) to ensure that both security and compatibility with existing frameworks was achieved. Some key new and/or updated features include:

  • Enhanced Desktop Fucntionality: Drag and drop to the operating system, copy and paste between applications, launching of AIR applications from the desktop or the browser, and run in the background with notifications.
  • Data Access: Adobe AIR now provides both synchronous and asynchronous access to the local file system, as well as structured data within a local database. This database is implemented using the open source SQLite database.
  • JS Library Support: Most major Ajax frameworks can be used to build AIR applications. Supported frameworks include jQuery, Ext JS, Dojo, and Spry. Adobe AIR integrates JavaScript and ActionScript to allow cross-scripting between the two languages, and integrated rendering of Flash and HTML content.
  • Security: Applications built on Adobe AIR can only be installed through a trustworthy install process that verifies that the application is signed via industry standard certificates, providing users with information about the source and capabilities of the application.

Flex 3.0

Adobe's Flash-based RIA development platform, Flex, continues to mature and has been picking up steam in both the corporate space as well as sites such as blist and Scrapblog who have embraced Flex whole-heartedly. Some of the new features in Flex 3.0 include:

  • Intelligent coding, interactive step-through debugging, and visual design of user interface layout
  • New capabilities for creating RIAs and building applications on Adobe AIR
  • Integrates with Adobe Creative Suite® 3 making it easy for designers and developers to work together more efficiently.
  • New testing tools, including memory and performance profilers and integrated support for automated functional testing, speed up development and lead to higher performing RIAs.

One of the most compelling parts of the Flex announcement is the fact that Adobe has released the Flex SDK under the open source Mozilla Public License.

Adobe Open Source Site Launch

Finally, Adobe announced the launch of their new Adobe Open Source site which aims to "presents the definitive view into open source activities at Adobe, including details regarding projects that Adobe participates in and hosts."

The new...website is designed to keep you up to date on Adobe open source activities, within Adobe as well as with the larger world. It will also be the point of entry to our source code contributions, including Flex, BlazeDS and others. We'll post news items, tell you where to see us, and keep you in touch with some of our favorite bloggers.

Currently, the site houses the Flex SDK, BlazeDS and Tamarin projects, all of which have been open-sourced by Adobe.

Aptana has coordinated the release of their AIR plugin that includes support for Jaxer which allows you to write AIR apps that run on the desktop that include server-side code, written in JS, that can run on your backend server.

Adobe also put together a list of featured applications that you can check out.

Hitting a "1.0" release is a big deal (as is a 1.0.1 ;), so congratulations to the entire Air team. Adobe is working hard to raise the bar in the RIA space by giving developers more tools with great functionality. 2008 is panning out to be an interesting year in web development.

Ben and I are at Adobe Engage today, and hope to find out more about Adobes plans in the coming year. We are live twittering using the #engage hash tag.

To end with something a little fun, and since it was the Oscars tonight:

Lisa Awards Most Overloaded Product Name

NOTE: Rey and I both wrote a post on this big release. This post is a conjoining of both posts into one

Ajax: Ajaxian

MooTools Swiff: Communicate with Flash

MooTools core team member Michelle Steigerwalt has a writeup about the MooTools 1.2 Swiff object which allows communication between Flash movie (.swf) files and a page's JavaScript. The Swiff object makes it substantially easier to interact with ActionScript allowing you to pass values or manipulate the Flash movie using JavaScript and MooTools:

Unless you're a diehard fan of the embedded Quicktime movie, you might see the benefit in a Flash video player to provide smooth playback of videos to your users, while still yearning for full control over the action using JavaScript and MooTools.

It's not even necessary for the Swiff object to be visible in order to benefit from its use. Using Swiff, you can utilize all of Flash's functionality, including its video, sound, file streaming, and clipboard accessing features, and lots more.

You get all the flashiness of Flash, while still being able to manipulate and display your content using the DOM and MooTools.

Instantiating a Swiff object instantly provides access to the referenced Flash movie and any exposed methods:

PLAIN TEXT
LANGUAGE:
//(JavaScript)
var obj = new Swiff('mySwf.swf', {
    width:  1,
    height: 1,
    container: $('swiffContainer'),
    events: {
        onLoad: function() {
            alert("Flash is loaded!")
        }
    }
});

In addition to this, the Swiff object's remote() method provides the hook to make calls to actual ActionScript functions:

PLAIN TEXT
LANGUAGE:
//(JavaScript)
var obj = new Swiff('mySwf.swf', {
    //[...]
    events: {
        onLoad: function() {
            Swiff.remote(obj, 'echoText', 'Hello Flash, meet Swiff.');
        }
    }
});

The Swiff object is currently available in MooTools 1.2 beta

Ajax: Ajaxian

Yahoo! Released ASTRA Flash and Flex components

The Flash-y folks at Yahoo! have released a slew of Flash and Flex components in their ASTRA suite:

New Flash components:

  • AlertManager — a user interface component that creates alert windows and manages their queue.
  • AudioPlayback — a set of controls for audio playback.
  • MenuBar — a component that renders hierarchical data as a row of buttons with nested menus (using the Menu component)

On the Flex front, we have:

  • AutoCompleteManager is a component that manages a set of input controls, popping up suggestions when a user types into one of the fields. Instead of replacing TextInput fields with a specific AutoComplete control, you can simply point the manager to one or more TextInputs, and you’ll get a slick pop-up or auto-fill interaction.
  • Color Pickers:
    • ColorPlaneAndSliderPicker is a user interface component that allows the user to pick a color value. It combines a one-dimensional color slider with a two-dimensional color plane.
    • ColorSliderPicker is a user interface component for Flex that allows the user to pick a color value. It combines a set of sliders where each slider represents a component of a colorspace. For example, a ColorSliderPicker displaying an RGB color includes a red slider, a green slider, and a blue slider.
    • DropDownColorPicker is a user interface component for Flex that allows the user to pick a color value. Similar to the standard Flex ColorPicker control, the DropDownColorPicker also gives the developer the ability to completely change the dropdown control to give the user a variety of color views.
  • IPv4AddressInput is a user interface component for Flex that allows the user to input an Internet Protocol version 4 address. This control includes a field for each separate byte and full keyboard navigation.
  • TimeInput is a user interface component for Flex that allows the user to input a time value. This control include fields for hours, minutes, seconds, and AM/PM. Styling options allow the time to be presented in 12- or 24-hour formats.
  • TimeStepper is a user interface component for Flex that allows the user to input a time value. This control include fields for hours, minutes, seconds, and AM/PM. Styling options allow the time to be presented in 12- or 24-hour formats. Up and down buttons allow the user to increase or decrease the currently selected field.

Ajax: Ajaxian

Dominos: Changing the feedback model

I don't know about you, but the idea of ordering food online has had promise, but often falls flat. When I lived in Boulder I would order from The Sink, but they would call you back and confirm the order, which kinda defeated the point.

If you don't get a call back though, then you wonder... "hmm is someone on the other end of this web site thing? Are they REALLY going to bring my food!"

Dominos has done the right thing. They give you feedback, but not in the annoying way. After you put in an order online you can watch the entire process, so you feel like you know exactly what is happening without talking to a person until the doorbell rings:

Online Dominos

Ajax: Ajaxian

as3Query: jQuery port to ActionScript

First we see the new jQuery 1.2.2 release, and now "nitoyon" has ported jQuery to ActionScript 3.0 creating as3Query.

This port has everything bar the Ajax features, and it comes with a set of demos:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function animate(f:Boolean):void {
  3.         // Select 'RoundRect' elements using CSS selector
  4.         $("RoundRect:" + (f ? "odd" : "even"))
  5.                 .addTween({
  6.                         rotation: 90,
  7.                         scaleX: 0.5,
  8.                         scaleY: 0.5,
  9.                         time: 0.6,
  10.                         delay: 0.3,
  11.                         transition: "easeOutCubic"
  12.                 })
  13.                 .addTween({
  14.                         scaleX: 1,
  15.                         scaleY: 1,
  16.                         time: 0.5,
  17.                         delay: 0.9,
  18.                         transition: "easeOutElastic",
  19.                         onComplete: function():void {
  20.                                 // restore the rotation and call again.
  21.                                 this.rotation = 0;
  22.                                 animate(!f);
  23.                         }
  24.                 });
  25. }
  26.  

as3Query Demo

Ajax: Ajaxian

XSS: Flash and Rails

A couple of good articles on XSS and security came out at the same time. One talks about XSS in Flash, and the other on Rails:

XSS Vulnerabilities in Common Shockwave Flash Files

Rich Cannings has written an article explaining the issue of XSS wrt Flash:

Critical vulnerabilities exist in a large number of widely used web authoring tools that automatically generate Shockwave Flash (SWF) files, such as Adobe (r) Dreamweaver (r), Adobe Acrobat (r) Connect (tm) (formerly Macromedia Breeze), InfoSoft FusionCharts, and Techsmith Camtasia. The flaws render websites that host these generated SWF files vulnerable to Cross-Site Scripting (XSS).

This problem is not limited to authoring tools. Autodemo, a popular service provider, used a vulnerable controller SWF in many of their projects.

Simple Google hacking queries reveal that hundreds of thousands of SWFs are vulnerable on the Internet, and a considerable percentage of major Internet sites are affected. We are only reporting XSS vulnerabilities that have been fixed by the vendors.

He talks through tools that cause the issue, and then solutions on how to keep yourself safe.

Is your Rails site XSS safe?

Stu Halloway of Relevance has written about SafeErb and how he got it working on a Rails 2.0 application. He kept notes as he went through the experience, allowing us to learn from his acts.

What is SafeErb?

Safe ERB lets you make sure that the string written by "<%= %>" in your rhtml template is escaped correctly. If you try to show the attributes in the ActiveRecord instance read from the database or the parameters received from the request without escaping them using "h" method, an exception will be raised. This will significantly reduce the possibility of putting cross-site scripting vulnerability into your web application.

The check is done using "tainted?" method in Object class which is a standard feature provided by Ruby - the string is "tainted" when it is read from IO. When ERB::Util#h method is called, this plugin "untaints" the string, and when "<%= %>" is called in your rhtml template, it raises an exception if the string you are trying to show is tainted.

Ajax: Ajaxian

Tastebook: Rails Ajax Cookbook App

I was at the PCWorld innovative product awards at CES last night, and ran into Tastebook, a site that allows y