Tag: flex

Google Indexes SWFs and external content | Fleximagically Searchable | Ryan Stewart's Flex SEO Contest

Posted on by Evan Mullins

Ryan has announced a contest to investigate how Google is actually crawling swfs. He introduced the term “fleximagically searchable” to be included in external content, which is then loaded into the Flex swf. Hoping that google will read the external source file through the swf. Also testing how this shows up in the search results. Even though I think there a lot more to SEO than just letting Google crawl your site, there’s the pagerank and everything that Google uses in it’s top secret algorithm to determine search result position ranks.

Here’s the official rules:

  • It has to be a Flex application
  • ‘Fleximagically Searchable’ must be dynamically loaded. It can’t be static text inside of your application. – But I don’t care how you load it, in fact that might make a difference in how Google ranks you.
  • The first link must be deep linked directly into where you load ‘Fleximagically Searchable’ into your application. Feel free to use any deep linking methods out there.
  • Nothing in your code can dynamically load the phrase automatically. It has to be the result of a user interaction.
  • You must provide source code and be willing to talk about exactly what you did.
  • Multiple entries are allowed if you want to try different things.

They seem to be a bit vague in places, but we’ll see if Ryan decides to clarify anything.

More information: I’ve found that’s helpful at Peter Elst’s post. And Ryan explains Google and Flash’s relationship development here. Here and here is what Google has officially said. Here is the official press release from Adobe about their new

I’ll have a couple entries I’m sure… and I’ll be sure to post about those as well.

StomperNet's Scrutinizer Update v1.0

Posted on by Evan Mullins

StomperNet‘s Scrutinizer has recieved some updates!

  • New help documentation
  • Keyboard Shortcut Functionality
    • saving a screenshot
    • bookmarking a page
    • toggling the visualization
    • toggle auto-zoom
  • Aesthetic improvements
  • Performance optimizations
  • Improved auto-update.

If you’re wondering what the heck StomperNet‘s Scrutinizer is:

What is it?

The Scrutinizer is a web browser, based upon the Adobe AIR toolkit and the WebKit browser, that offers a simulation of the human visual system. Specifically, it illustrates the distinction between foveal and peripheral vision in visual acuity and color perception. Using this simulation, you can get a better idea of how users interact with your site design. We explain this, and some of the succes we’ve had, in a 30 minute video called Click Fu. It’s also a great tool for observing users interacting with your pages. By slowing them down, the Scrutinizer makes it easier for you to figure out what information the user is consuming and what actions they are considering. Learn about other ways to use the tool at our Top Ten list.

How it Works

The Scrutinizer browser applies a visual filter to where the mouse is located, simulating foveal vision centered around the mouse. For parts of the screen far away from themouse, the display deteriorates into lower resolution, both in detail and color. You can use the browser to get a better understanding of the low level mechanics of how users interact with your site design. Attempting to accomplish a key task on your site using the Scrutinizer can be very enlightening. Watching a user unfamiliar with your site attempt a key task with the Scrutinizer is even better at revealing how your site design affects the way the user extracts meaning from your presentation. Learn more in the Click Fu video, covering practical examples of improved e-commerce, or the 52 second ” Your Vision is an Illusion“, presenting a dramatic illustration of foveal vision. Finally, check out using the Scrutinizer for a findability challenge on Amazon.com.

Top Ten Things You Can Do with the Scrutinizer

  1. Simulate eye tracking in a usability task
  2. Assess the ease of use of multi-step processes
  3. Give your designer a fresh pair of eyes
  4. Find out what “pops� in your design
  5. Conduct findability challenges
  6. Ask: does your visual grid work?
  7. Evaluate your site’s contrast levels
  8. Insure learnability in your template
  9. Avoid button gravity errors
  10. Tell the story of how your eyes work

Stomper Scrutinizer Browser AIR App

Posted on by Evan Mullins

scrut_4
Software for viewing websites through a simulated fovea vision. Since not everyone could set-up, let alone afford a real eye-tracker. This software uses the mouse pointer as the user’s focal point, or foveal view. It blurs everything except where your focal point (the mouse) is. It is helpful because it forces you to re-think web design from an extreme usability standpoint. This browser software was built using AIR and Flex. Using this software as an eye-tracking simulation, you can get a better idea of how users interact with your site design.
scrut_2scrut_1scrut_3

I was responsible for programming and designing some key functionality of the app: the menu bar logic, bookmarking engine, capturing and saving of screenshots, and the loading bar which shows page load progress, and the overall browser chrome/skin.

Get Current URL and Query String Parameters to Flash | Tutorial

Posted on by Evan Mullins

Update: please see the newer tut talking about getting the current url, query string vars and more with as3

Overview

This tutorial / how to / example will show how to get the current url from the browser to flash, and even how to get the query string parameters from the url into actionscript using ExternalInterface.
It has been a dilemma for many people to get this information into flash across browsers and without having to rely on flashvars or javascript, but to just have it work.
I wrote a post on it earlier, although it seemed it wouldn’t play nice with Internet Explorer IE, I later realized that it was only because of the way my blog is configured to embed flash. The call ExternalInterface.call(“window.location.href.toString”); or even ExternalInterface.call(‘eval’, ‘window.location.href’); which basically do the same thing.
This can be taken even further and we can read the query string, which, if you don’t know what that is, is the data contained in the url. The data is sent as paired strings, the key and the value. So, for example I could have a url http://example.com/index.html?var1=one&var2=two&var3=three. The question mark separates the actual url path from the query string. So following the ‘?’ we see three variables: var1, var2 and var3, and their corresponding values: one, two and three. They are seperated as pairs with an ampersand (&) and then the key and value are seperated by an equals sign (=). So it goes url?key=value&key=value&key=value…
Once we pass the complete url into our swf, it’s pretty easy to parse the keys and corresponding values.

Steps

  1. Rather than use url with ExternalInterface.call(“window.location.href.toString”); implement the QueryString class make a new QueryString This will do most of the work for you: var myPath:QueryString = new QueryString();
    1. Upon creation of the QueryString object the class reads the parameters automatically by parsing the parameters after the ‘?’ and delimiting on the ‘&’. So you get var1=one and var2=two
    2. Set up each parameter (key) as a variable in the parameter object of the QueryString class assigning it’s value to that variable.
  2. Access your values as myPath.parameters.var1 and myPath.parameters.var2
  3. unescape() your values to make the usable, unless you need them to be encoded or course. Unescape decodes the string from URL-encoded format (converting all hexadecimal sequences to ASCII characters). If your parameter had been some funky encoded string like var4=this+stuff%3E%22%28%29%3F, after you unescape(myPath.parameters.var4) you get: this stuff>”()?.

Example

get url params screenshot
Here’s a working example. This link has the parameters appended to it following the question mark ‘?’ and separated with an ampersand ‘&’ like all query string parameters. I have one for myName (Circlecube) another for myText (Jo Jo is a monkey) which are both pulled out and put into their own text box after they are unescaped, and then there are a couple more parameters just to show, the aNum (3013), anotherParam (more), and ref (https://circlecube.com/circlecube/…)

Special thanks to Abdul Qabiz example. I rewrote it for as2 so it would work with some flash projects I’m working on.

I use the new swf object 2 to embed the swf. Go get it here: swfobject

Actionscript:

The actionscript layer of the swf
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
import flash.external.*; //so we can use externalInterface
import QueryString.as; //so we can use the QueryString Class//make a new QueryString named myPath
var myPath:QueryString = new QueryString();
assignVariables();

//custom function to handle all the query string parameters
function assignVariables() {
//if myName parameter exists
if (myPath.parameters.myName) {
//assign it to the text of the myName text box
//unescape() will translate/unencode the url characters
myName.text = unescape(myPath.parameters.myName);
}
if (myPath.parameters.myText) {
myText.text = unescape(myPath.parameters.myText);
}
if (myPath.url) {
//get the complete url (including any parameters)
thisUrl.text = myPath.url;
}
recurseTrace(myPath.parameters, ” “);
}

//function to recursivly print objects in heirarchy as string
//so we get all parameters no matter what the key traced into
//the allParams text box.
function recurseTrace(info:Object, indent:String) {
for (var i in info) {
if (typeof info[i] == “object”) {
traceParams(indent + i + “:”);
recurseTrace(info[i], indent + ” “);
}
else {
traceParams(indent + i + “: ” + info[i] + “\n”);
}
}
}

function traceParams(traceMe:String) {
allParams.text += traceMe;
}
[/cc]

The QueryString.as class for as2
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
class QueryString {
//instance variables
var _queryString;
var _all;
var _params:Object;

public function QueryString() {
readQueryString();
}
public function get getQueryString():String {
return _queryString;
}
public function get url():String {
return _all;
}
public function get parameters():Object {
return _params;
}

private function readQueryString() {
_params = {};
try {
_all = ExternalInterface.call(“window.location.href.toString”);
_queryString = ExternalInterface.call(“window.location.search.substring”, 1);
if(_queryString) {
var allParams:Array = _queryString.split(‘&’);
//var length:uint = params.length;

for (var i = 0, index = -1; i < allParams.length; i++) {
var keyValuePair:String = allParams[i];
if((index = keyValuePair.indexOf(“=”)) > 0) {
var paramKey:String = keyValuePair.substring(0,index);
var paramValue:String = keyValuePair.substring(index+1);
_params[paramKey] = paramValue;
}
}
}
}
catch(e:Error) {
trace(“Some error occured. ExternalInterface doesn’t work in Standalone player.”);
}
}
}
[/cc]

Download

Here’s a zip file containing the sample files, the QueryString Class file, and even the swfobject javascript file.
getURLParams.zip

StomperNet Scrutinizer Update | Features include Bookmarking, Screenshots & Loader

Posted on by Evan Mullins

Scrutinizer is constantly being updated and enhanced and with the launch of Adobe AIR 1.0 is easier than ever to install!

It now supports bookmarking, capturing and saving screenshots and displays progress as pages load.
With even more to come soon!

Go check it out at StomperNet’s public site for free download!
Here’s some images to show off scrutinizer!

Watching the loader while my page loads:
scrutinizer loader

Scrutinizing this circlecube blog:
scrutinizer screenshot

Bookmarking my page for quick access:
scrutinizer bookmark

FLEX | 360 Atlanta | Day 3

Posted on by Evan Mullins

From the community…
people I saw quickly but didn’t get to attend their session: Renaun showed off his voip app Pacifica,  Zach from Yahoo showing some things available with Yahoo Maps AS3 API, Adam talking about Merapi where you can access Java from AIR apps and Joe showed us some awesome music app he’s working on, keep your ears open for noteflight(?)!

Brad Umbaugh- Practical 3-D: Immersive interfaces for regular people

Brad Umbaugh , Senior Developer @ effectiveui. In the discussion of 3D we pointed out that 3D is associated with the future. There have been many 3d success stories such as: games, CAD, sketchup, maya… But we decided that making good 3D interfaces is a lot different than making 3D interfaces- just because it’s 3D doesn’t mean it’s good.
Brad explained the steps in the 3d graphics rendering pipeline: place object in world coordinate system, illuminate models, transform world coords to viewing coords, perform clipping, project to screen and rasterize. Luckily there are 3d engines that will do all of this so we don’t have to think about it. It takes a lot of Linear Algebra Math. 3d apps are constantly performing lots of calculations, and thus can perform rather poorly.
Brad discussed the process of his Discover Earth Live project. They started project with papervision3d, but had problems with pinpoints and how they were wrapping around the globe as it spun. So, they tried Away3d and it fixed these problems “out of the box”. Another plus to Away3d they found is that it lets us do correct Z ordering.
We then talked about setting up the scene in away3d and making objects and he showed some 3D Globe examples: nike, mars.com, wii forecast, discovery earth live.

Ben Stucki – Reinventing Flex:

Ben an independent flex developer (nice soundtrack by the way), let’s talk about Flex, baby.
He started out giving everyone a pair of red/blue anaglyphic 3D glasses and showing us mr doob’s anaglyphic rendering tests. The 3d glasses work by filtering different colors to give your eyes two different views of the same image. Red filters out the red lines, cyan filters out the green/blue lines.
Ben has his own staging area for code that’s not yet released… lots of it is probably broken… but it is open source (benstucki.googlecode.com).
Ben then walked us through lots of openflux, his project that is rebuilding some built in componentes of flex with different proerties and capabilities in mind. Great job Ben!

Dave Hassoun – Flash Video tips (and tricks)

Dave from realeyes taught us about video codecs! Flash video gives us the compression options of sorenson, on2 VP6 and the famed H.264.
Sorenson is easy on cpu performance, but struggles with good color and quality. For the quality the file size is a bit high, but sorenson is a good standard.
on2 vp6 has high quality image, but lots of processing demand, plus it has transparency capabilities!
h.264 (& AAC/AAC+ audio is the newest with the most bells and whistles. As it’s new it’s only supported by flash player 9 (which is beginning to be less and less of an issue). It does support true HD video (1080p), multi-core support, many devices, and lots lots of metadata.
A general rule (equation) to help with encoding: frame height x frame width x frame rate) / compression = total bits/sec
Tools he mentioned to help with encoding: rools, riva, fmpeg, on2fix, sorenson squeeze, cs & adobe media encoder.
Dave pointed out that flex video integration was simple, but too simple, making it weak. There is only video display, which is very simple. AS3 is way better equipped to handle video.
h264 streaming requires a streaming media server, can stream or seek to any point (non-linear or random access), has quicker playback and is much more secure. H264 contains a lot of metadata: length, dimensions, codec, seek points, cover art, subtitles, audio book chapters, image tracks, and more!
Dave’s tips for video compression: quality in, quality out | use the right codec for the job | be creative | code reusability! write stuff to be reused | metadata is your friend, use it
He gave so many resources! I won’t copy them here, so go check his Presentation Notes and source. Here is one resource though, Tinic Uro‘s blog about the flash player and video.

Juan Sanchez – Degrafa

Juan (better known as scalenine) taught about his open source project Degrafa – Declarative Graphics Framework for Flex. Degrafa uses mxml to make graphics so you don’t have to use the AS3 drawing API! It makes drawing objects more intuitive and allows you to do it using less code! Plus, rather than creating graphics in photoshop and importing the static image (which takes more memory and then can’t be modified), we can bind properties to the graphic and make it dynamic in flex. So far Degrafa allows us to make surfaces, shapes, objects, fills, strokes, groups, geometry compositions, segments, graphic image, graphic text, and even use svg path data, with much much more in the works! Degrafa is a great way to add custom graphics to your app and it supports advanced css as well, so it is very simple to skin your app! Juan showed us many examples of what degrafa can do and promised there is much more soon to come. Thanks for this great library Juan and everyone else at degrafa, and thanks for the T-shirt as well!

Personally, I got the most out of Day 3 at the conferenc! It was awesome! I got to attend sessions about 3D, drawing graphics, and video! Thanks to all the speakers and Big Thanks to Tom and John, who are Flex360!

FLEX | 360 Atlanta | Day 2

Posted on by Evan Mullins

Johnny Boursiquot – AIR Infrastructure to manage licensing maintenance and monetization of AIR apps

This is important information as more and more apps ar looking at using AIR to make apps. Discussion on how he’s deployed for large corporations including Avaya, Honeywell, Seagate and others. We need to be thinking about how to license the apps we make!
He’s promised a version of his slide show here: Developers Pierinc

Renaun Erickson – QTIndexSwapper H.264

The flash player now supports H.264 format video files! This is great but one problem is the meta data is placed at the end of the file and therefore the video can’t be accessed until it is fully loaded to the end. The metadata (moov) needs to be loaded before the play knows how it’s indexed. Renaun showed a technique he’s been playing with. He has an AIR app that will move the meta data to the beginning of the file for viewing during progressive download! He also talked about other meta data, like album art, and stuff, he’s promised more links to be posted on his blog
So far, here’s the source at Renaun’s site
More info posted about H264 and Flash by Dave Hassoun at Adobe’s Developer Center

Andy Edmonds – Scrutinizer

Discussing the psychology of vision (fovea and peripheral). We discussed how better design relates to a sites efficiency. Andy showed a couple videos from stomperNet (which can be found at the Going Natural 2 page or stomperNet’s youTube channel) and showed a demo of the Scrutinizer AIR app which is available for free beta download at About.StomperNet.com . Scrutinizer is a browser which forces you to see the internet how your eyes see it, rather than how you brain puts together what your eyes see. It has a layer which blurs the rendered html page, and also a layer which desaturates the colors, which modifies the page as you are looking at it. The browser attempts to show you what you are looking at, but importantly it disconnects your vision from your eye, using instead the mouse so you can actually look at your peripheral vision. Like the “squint test”, where you squint your eyes to see the general overview of a page, this page is blurred to only show the most dominant designs. An interesting tool hat can be used to improve site designs and efficiency.

Doug McCune – Open source Flex community projects

A great discussion about projects and opensource communities. Doug loved to point out that you can take two open source libraries and mash them together to make your own thing.
A few places to find open source code: google, flexbox, ria forge, and a growing number of personal blogs
An example was FlexSpy (basically a debugger that runs live in your flex app) in which Doug added his own part to the existing open source code to monitor all event listeners in addition to all the debugging features already existing in flexSpy.
A highly recommended plugin for flex (eclipse) is subclipse, which adds svn repository, checkout source as flex library project, build swc, add to your build path…
List of open source libraries discussed: (I’ll try to add all the links later)
Big open source libraries for as3 and flex: flexLib (now including flexMDI), minimalComps, AsWing, openFlux
Graphics Libraries: Degrafa (declarative graphics framework – lets you write graphics in mxml tags), Singularity (Jim Armstrong’s math library), AlivePDF (create pdf in actionscript).
Physics engines: Actionscript Physics Engine (APE), Box2D and Motor 2 (both more of an as3 feel) (almost the same), FOAM (note that with physics engines there are differences between the particle based and rigid body based engines.)
3D: PaperVision 3D (most popular3d engine), Away3D (was a branch of papervision, but is now seperate), Sandy, wow (3D physics engine)
Flex specific uses: Alex Uhlmann’s Sandy distortion effects library, Tink’s PV3D transitions..
Tweening (moving an object property from a to b, set something with a transitional effect): Tweener, KitchenSink (MosesSuposes.com)

The Summarizing moral: Don’t reinvent anything, but don’t trust other peoples code blindly. Give credit where credit is due, and contribute back to the community.

James Echmalian – Enhancing Flex Presentations with Bitmap Technques

Bitmap data is just a 2D array of pixels with 4 channels (red, green, blue, and alpha).
Bitmaps are a view of a bitmapdata class, inheriting displayObject properties (height width, scaleX, scaleY, rotation, visible…) but bitmapData and bitmap are not the same thing.
Image – loader – loads an image out of an external file using loader, converts formatted data into display objects automatically.
Image – display – wraps a bitmap, is a flex component, has properties, styles controls…
Demo source to show bitmap editing will be on site ech.net/360flex2008 and ech.net/blog contains all source and annotated slides.

Special thanks goes out to all the Flex|360 Day Two Speakers!

FLEX | 360 Atlanta | Day 1

Posted on by Evan Mullins

flex atl 360

Matt Chotin – Keynote

Review: The big announcement! Air 1 and Flex 3 are here! And what more Flex has gone open source, well done!
And I can’t continue without mentioning Matt’s Flex Flex Behind the Scenes Video

John Mason – FlexUnit and Unit Testing

John talked about his FusionLink and TDD (test driven development).
Unit testing – is making test files that automatically tests your code for logical errors. We know the compiler will catch any syntax errors or things like that, but what about logic?
ASUnit – unit testing framework for actionscript
I will definately be looking into Unit Testing, I’ll probably go the ASUnit route, as I mostly code in actionscript.
We talked a bit about ANT, an automating Build processes which sounds very exciting for a few projects I’m working on.
Some key points I took away: some unit testing is better than none.
It is more work at first, but in the long run can and usually will save lots of time.
The computer can automate a lot of the heavy lifting. Another good ides is to include unitTesting classes in your svn repository.
Here’s the lecture notes:
source and slides @ labs.fusionlnk.com
video of presentation @ http://www.carehart.org/ugtv

Ben Forta – Flex and latest Cold Fusion

A lot of this went over my head, but I am not a cold fusion expert, like the majority of those who attended this section. But hey, now at least I’ve seen some cold fusion! I just had to go and hear Ben Forta!

Jeff Houser – Code reuse with Flex and AIR

Great presentation discussing reusing code in AIR and Flex. I should have taken better notes, a great side note is I am now a subscriber of The Flex Show!

(Jesse Warden) – Big And Famous

How to succeed as an independent developer (to which append ‘or designer’)
Great session, I realy like the open discussion we had. I’m guessing because Jesse wasn’t there (he’s actually in the hospital, get well soon Jesse). Doug Mccune and Juan Sanchez headed up the discussion. Doug had a slide show about branding yourself which I totally agree with.
1. Blog – I hands down agree with this. The blog is the new resume, and plus the new portfolio. I use it as a place to collect code I want to remember (I figure if I’m keeping it I mght as well share it and showcase it. Might as well document the work I do cause I am already doing the work)
2. Use your name (or alias) – Yes it is definately nice to have a presence, and without a name I don’t think it’s really possible. Doug felt strongly to use your name and face and be very personal, I think as a developer that is important, although there are imporant advantages to having an alias and logo rather than a name/face, as Juan is proof of with ScaleNine (who is more of a designer).
3. Use your face
4. Make a Logo
5. Make Business cards
6. Be social and active in the blogosphere. – This one is important. You gotta do it all the way. If you’re a blogger wanting to et better known, be involved in the blogosphere! Communicate with others and comment on what you’re reading from others as well.

Well that sums up the official first day of Flex 360 Atlanta!

StomperNet Scrutinizer

Posted on by Evan Mullins

StomperNet releases Scrutinizer, software for viewing websites through a simulated fovea vision. Since not everyone could set-up, let alone afford a real eye-tracker. This software uses the mouse pointer as the user’s focal point, or foveal view. It blurs everything except where your focal point (the mouse) is. It is helpful because it forces you to re-think web design from an extreme usability standpoint. This browser software was built in conjunction with Nitobi using Adobe AIR and Flex. I had the chance to do the skinning of the browser in flex! I really hope to have a good excuse to play more with flex.

Scrutinizer Thumbnail

Anyways, check out the free software (master-minded by Andy Edmonds), this ‘Click Fu’ video created to explain it, and the many uses of Scrutinizer.

[kml_flashembed movie=”http://www.stompernet.net/squambido/pagetest/squambido.swf” height=”338″ width=”450″ fvars=” playlistURL = http://www.stompernet.net/GoingNatural20/files/GoingNatural20Public.dhtml.xml ; autoplay = false ; awiz = 1126 ; playlistoffset = 4″ allowfullscreen=”true” fversion=”9″ useexpressinstall=”true” allowscriptaccess=”always” /]