Posts Tagged Flex

My game on a iPad, my pilgrimage

YEAHH! Pretty nice is the feeling you get when you see your game for the first time on the medium it is supposed to be. Yesterday I dwelled in the mysteriously complicated world of signing applications for the Apple App Store. 6 hours it took me to finally get my game on my tablet ( by the way I didn’t buy the iPad, I won it :) ). I would say that 2/3 of that I was stuck in Apple developer center where you have to do numerous steps and get many files in order to sign your app / game. The last third came from converting one certificate to something Flash can use to compile a .ipa file.

For that step you can either do it on OSX or on Windows differently and since I have both installed on my machine, I thought I would do it the easy way ( what I thought would be) on OSX, but for some reasons Keychain access didn’t seem to export me the right things. So I had to do everything using OpenSSL on Windows, which after a little tweak, worked like a charm. Follow these instructions from Adobe to do so: generate signing request, convert certificate to .p12.

So with that done, I was set to compile my Flash game into an iOs app. This proved also more complicated than what I thought. My game was built using FlashDevelop, but I have Flash CS5.5 so I thought it was just a matter of setting my main class as the document class of a new fla. Turns out the Flash compiler is different from the Flex compiler and it started throwing me a lot of weird errors. I have to admit my project is a bit weird too (I lost one fla, so I had to decompile one file but I couldn’t get the font out of it, so I have 2 swc that have symbols in common), but it should have worked. Anyway, you don’t need Flash to compile to iOs. I downloaded the new Flex SDK and the latest AIR SDK (4.6 and 3.1) and used those templates for FlashDevelop and it worked mighty fine. Funny thing, my game was already compiled using the Flex 4.5.1 SDK; not AIR  (I am not using anything special) and not the latest SDK, but I didn’t have to recompile it, I just packaged it and it worked fine. I wonder if I use the AIR compiler instead if it would run faster???

, , , , , , , ,

3 Comments


Facebook, the Open Graph and OAuth 2.0

So after playing with Twitter OAuth, I played with Yahoo!’s and now Facebook. So seems like OAuth is the new cool kid in town.

Using the OAuth AS3 library

When you are dealing with OAuth 1.0 (Twitter, Yahoo!), there is this pretty nifty library for ActionScript 3 simply called oauth-as3. There is not much documentation on how to use it but if found this pretty good example for using it in conjunction with AIR. The user flow is a bit different when you are integrating OAuth in a website so you have to tweak it a bit, but in the end it, does the heavy lifting for you. The things you have to consider for a website, is that the user has to go, in some way, to the website of the API you are going to be using to authenticate (input his user name and password) and to authorize(say that your application has the right to access the user’s data) your application. That is the part that always bugged me about OAuth, it kinda get the user out of your experience. I gave it a lot of thoughts and I really liked the Facebook Connect way (at some point in time) where it was using an iFrame pop-in. That was the neatest because you didn’t have to care about the Pop-Up blockers and it looked pretty good. The thing is, it kinda defeat the purpose of OAuth. Since in an iFrame pop-in you don’t see the url in a location bar (as opposed to a full fledged pop-up), you could basically reproduce graphically the interface of whatever service you are using and just steal the usernames and password. That is why you have to rely on Javascript and pop-ups. This part of the user flow is not covered in the oauth-as3 library because it is not ActionScript.

While playing with Yahoo!’s OAuth and Facebook’s, I kinda merged two ways of managing the Javascript part. Yahoo! provided code that was pretty good at creating the pop-up but it wasn’t that great at getting back the information from the service. So I edited it and I think I ended up with something that is pretty solid. Here is my Javascript file and my callback page.

OAuthScripts

Also, the oauth-as3 library is relying on the class mx.utils.UIDUtil to generate a unique identifier as a parameter for one of the request. As you can see from the mx prefix, this requires that you compile the Flex framework with your project. Which is kinda a bummer since it is the only dependency to Flex. I found this class on the RGBBlog that provide the same functionality but without requiring Flex. I had to tweak it a bit because it is not really made as a library (it doesn’t have a package and extends Sprite) and I have made it available for download here.

GUID.as

Facebook and OAuth 2.0

So during April 2010, Facebook announced the Open Graph and with it a whole new API but also a new way to authenticate and authorize. It was to use OAuth 2.0, which is a version of OAuth that is still a draft. Well all we learned before (OAuth 1.0) kinda doesn’t work here anymore. But OAuth 2.0 is a bit simpler, supposedly requires less exchanges. This is all cool and all, but Facebook sticks to its guns and provide shitty documentation about the process; well half shitty, they provide good documentation for half of the process but for the other part it is as if the guy was tired of writing documentation and wrapped it up very quickly, leaving us without enough clear information to implement it.

Anyway, it all good, this guy, Jozef Chúťka, figured it all up. His code is pretty good and the example gives you everything you need to get started. The only part that I don’t like is how he manages the pop-up (he writes the Javascript inside of the ActionScript, I don’t know it doesn’t feel right, plus it doesn’t manage placement of the pop-up (x and y)), so I used the same as before. But his callback html page was pretty good. So basically when you have your access token you can call any of the Open Graph API urls and it will work. You have to be careful, for some of the urls that returns images, Facebook does a redirect, so you might have to deal with some cross domain issues. Here is how I resolved mine.

//This makes sure that the crossdomain policy is read and you can access the profile picture
Security.loadPolicyFile("http://profile.ak.fbcdn.net/crossdomain.xml");

Also know that if you add that line of code twice, you are going to crash the Flash Player. For this library to work your application in Facebook must absolutely be set as a desktop application.

So that pretty much sums up what I have been doing with OAuth.

, , , , , , , , , , , ,

1 Comment


Fonts are my bane; not anymore!

I hate managing fonts in Flash, I truly hate it. I don’t understand why it is not easier than this after all that time. How about underline; why can’t we still underline in the Flash IDE? That shouldn’t be voodoo magic, even Notepad has underline, ok, Notepad doesn’t have the underlining functionality, but Wordpad does.

Anyway, my biggest problem with fonts and Flash is not the underlining problem, but when you start using static and dynamic textfields with the same font family but with different font style. When you do that, your dynamic textfields will just not show and that is really annoying. A solution that works is if you put all textfields dynamic, but that’s even more annoying.

Now a really cool feature is that you can now embed fonts using the embed tag just like this:

[Embed(source="assets/fonts/GNL_____.PFB", fontName ="zedia GillSansLight", unicodeRange='U+0020-U+007A, U+00C0-U+00F6, U+2019', mimeType="application/x-font-truetype")]
private var GillSansLight2:Class;

Not sure that this will work when you compile using the Flash IDE, but when doing ActionScript projects or Flex projects this works just fine. This way you can embed ttf, otf and pfb fonts. I am not quite sure how to embed fonts on a Mac system, it will still work with those formats, but I know Macintosh has other formats. The thing that makes this work is that you can specify the font name. Be sure to specify a name that you know Flash wouldn’t specify. My coworker gave me the trick to add the name of the project in the font name that way it’s always going to be different than Flash. If you don’t make it different you will still run in the problem of your dynamic textfields not showing up.

Once you have embedded the font you need to register it in your application like this:

Font.registerFont(GillSansLight2);

This will make the font available anywhere in your application. All you need to do is create a TextFormat with that font and assign that TextFormat to your textfield:

var tf:TextFormat = new TextFormat("zedia GillSansLight");//this is what you put into fontName in the embed tag
myTextfield.embedFonts = true; //this line is also important
myTextfield.defaultTextFormat = tf; //always assign the default textformat before modifying the text property
myTextfiled.text = "lorem ipsum";

Now, using this technique you can choose exactly what character from the font you want to embed. In the previous example the unicodeRange represented those characters:

U+0020-U+007A = SPACE!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz
U+00C0-U+00F6 = ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö
U+2019 = ’

This is a pretty safe set, but you can always change it and optimize it.

Here is a good resource to do Unicode conversion:
http://rishida.net/scripts/uniview/conversion.php

, , , , , , , ,

12 Comments


PureMVC Skeleton for ActionScript projects

I had previously done a PureMVC skeleton for Flash websites and applications, meaning that you would use the Flash IDE compiler to compile your project. Lately I have been doing more and more ActionScript projects (compiled using the Flex compiler but not using the Flex framework) because it permits the separation of big FLAs into smaller ones thus facilitating working in team. But I had no template/skeleton to start with until now.

So here it is:

PureMVC ActionScript Project Skeleton

It still uses an external preloader and I added a local Boolean so that the application knows your are testing locally and not on the sever (useful when making server call). One of the major change is the inclusion of the SharedAssetLibrary. Basically this emulate having one FLA with all graphics and MovieClip, but you actually can have multiple FLAs. When you want to add something to the SharedAssetLibrary you first add it to a FLA, set it to Export for ActionScript and then compile it to the swf folder. Then you can add it in the SharedAssetLibrary using the embed statment:

//BackgroundAsset being the name you gave it in the library
 
[Embed(source="../../../swf/Background.swf", symbol="BackgroundAssets")]
public var BackgroundAssets:Class;

Now if you want to use this in any of your views, first import SharedAssetLibrary and than you can use it like this:

var BackgroundAssets:Class = SharedAssetsLibrary.getInstance().getAsset("BackgroundAssets");
var assets:* = new BackgroundAssets();
addChild(Sprite(assets));

I included a FlashDevelop project file in there, but you can just delete it if you use Flash Builder.

Using a skeleton greatly reduce the setup time of a project, so I hope this will help you. I want to look into doing a skeleton for Flex Application, because I don’t like the skeleton that is available on the PureMVC website.

, , , ,

7 Comments


Using the Flex profiler with a Flash Website or Application

Ted Patrick posted on is blog a video of a presentation that was made at 360 Flex about the Flex Builder 3 Profiler by Jun Heider. It’s a pretty interesting talk about some unknown feature and tweaks of the profiler. One of the thing I learned that I am really happy to have found was the fact that you can use the profiler on a project that wasn’t made using the Flex Builder,  for example a project made in the Flash IDE. Here are the three simple steps you have to do.

In FLEX

  • Go to the Profiler view and in the Profile menu select “Profile External Application”
  • In the window that will prompt, select the radio button Launch the application manually outside Flex Builder

In Flash

  • All you have to do in Flash is to run the debug version of your movie (“Debug Movie” in the Debug menu)

That’s it, the Profiler will kick in for your Flash application.

Now I don’t see any reasons to use Flex anymore.

, , , ,

3 Comments


Flash and Flex SEO experiment part 2

I had previously made an SEO experiment to see what in Flash and in Flex was getting indexed by Google and I was able to get some results. Well, I decided to push the experiment further so I created seven new test cases both in Flash and in Flex. I have to warn you that I am more proficient in Flash than in Flex so my Flex test cases might be a bit off. Here are the new test cases (numbers start at 8 because I have already made 7 test cases):

Flash8.  Static texfield embedded in the HTML using SWFObject 2.0

Link :  http://www.fleximagically-searchable.com/fleximagically-searchable-v8/

Expected result: I really don’t know, some rumors say it gets indexed anyway, Google says it doesn’t; this will shed some light.

 9. Multiple static textfield on different frames

Link :  http://www.fleximagically-searchable.com/fleximagically-searchable-v9/

Expected result: From what I have seen before, Google will index the multiple texfields as if it was one text, so you could write a text with one word on each frame and it will appear as one.

10. Dynamic textfield prefilled with content after a preloader on the first frame

Link :  http://www.fleximagically-searchable.com/fleximagically-searchable-v10/

Expected result: I did this to see if the preloader would prevent the content from being indexed. Since Google is able to index Flex content with the default preloader, I think this test case will get indexed.

11.  Dynamic textfield outside the viewing area

Link :  http://www.fleximagically-searchable.com/fleximagically-searchable-v11/

Expected result: I read that this was working, but with the new special player it shouldn’t. Let see what happens.

Flex

12.  Simple custom MXML component

Link:  http://www.fleximagically-searchable.com/fleximagically-searchable-v12/

Expected result: I saved a Text component in its own MXML file and used that file in my main application. I think this will work because logically it’s like writing the second file(custom component) in the first one (application).

13.  Using States

Link :  http://www.fleximagically-searchable.com/fleximagically-searchable-v13/

Expected result: I don’t think any of the content from this swf will be indexed because states use the words addChild in its mxml and I think(logically) this gets translated into the addChild function in AS3 and content added using addChild doesn’t get indexed.

14. Using the ViewStack component

Link :  http://www.fleximagically-searchable.com/fleximagically-searchable-v14/

Expected result: I think this has more chances to work than states but since this is a more complex component than the Text one I cannot say for sure.

Now that everything is set up, we just have to wait for Google to crawl those pages. The results and a general recap of the experiment will be posted in an article on InsideRIA.

, , , ,

1 Comment


Google is not indexing your dynamic content in Flex or Flash

It’s a pretty shocking title with all the fuss about the new flash player for Google and Yahoo, but I will try to explain why I came to this conclusion. I suggest you read about the seven test cases I did because that’s mostly what my reasoning is built on. I am going to explain point by point what happened in the experiment.

My first test case was simply to put static text right on the first frame of the swf file. That’s all this flash file contained. If you search in Google for the unique expression contained in that static text, you will find the specific html embedding the swf, meaning that the content was indexed.

The second test case was similar to the first one except that instead of being a static textfield on the stage, it’s a prefilled dynamic textfield (meaning the text in the textfield was added using the Flash IDE not ActionScript). Again for this case if you search the unique expression, the good html page will come up (As for the first case, you see in the description in Google for that link the extract of text containing the expression furthermore proving that the content was indexed).

The third test case was also a dynamic textfield, but the text in it was added using ActionScript. The page is indexed in Google (do a search for ‘site:www.fleximagically-searchable.com “fleximagically searchable”‘ and click “repeat the search with the omitted results included” at the bottom of the page to see all test case indexed) but the content doesn’t show in the description of the link. Also if you did a search for the unique expression nothing relevant would come up.

The fourth test case, the last done in Flash, was a static textfield inside a Sprite added to the stage using ActionScript. Again for this case the html page is indexed, but none of the Flash content is.

The fifth test case, as all of the next test cases, was done in Flex, it’s a TextArea component in mxml filled with the text attribute in the mxml, so no ActionScript involved. In this case, if you search for the unique expression you will see that the content inside the swf is indexed, proof that some content in Flex can be indexed.

The sixth test case is a Label component in mxml filled with the text attribute int the mxml. In this case, the content didn’t show up on Google, so I guess not all components are indexable.

Lastly, the seventh test case is a Text component in mxml filled with content using the text attribute in the mxml. I think this case is really similar to the second test case; a dynamic textfield in Flash prefilled with content. In this case, the content showed up on Google, so the swf was indexed.

My conclusion

From this SEO experiment, we see that static textfields on the timeline, prefilled dynamic textfields and some basic Flex components (TextArea, Text) in mxml are indexed by Google. It seems to me that as soon as there is ActionScript involved to change the content, that content will not be indexed. If you look back a bit, you kinda see that Google doesn’t use any new Flash player to index swf files, it does what it always was doing; nothing new. If somebody has a proof of dynamic content being indexed by the new player I’d be glad to see it, but for now I am assuming that Google is not using the new player given by Adobe.

This brings us to the Flex Seo contest, where my Fleximagically Searchable entry is performing well, but my content is not indexed. My take is that this contest will be pretty hard to win. There might still be possibilities to make this work but I think they are a bit too far fetched. Here is what I think might still have some chances: I did all my experiments with ActionScript 3 and I believe from the results that you cannot win using ActionScript 3. Where there could still be some opportunities would be if the swf generated would be using ActionScript 2 (which would use the flash player virtual machine 1), so in order to win the contest, you would have to build your Flex application in Flex 1.5 or even before. This would mean that the new special flash player for Google would only work for Flash 8 and below. I really hope it is not the case and that it is just that Google is not using the special player yet.

Another way to win would be that Google roll out the new player before September which is the ending date of the contest. Let’s hope they do so!

, , , , ,

8 Comments


Converting this contest into a SEO experiment

From previous posts you know that I am participating in the Flex SEO contest. I got my page pretty high on Google, but it still doesn’t seem to be finding my content. There are still a lot of unknown about this new SEO technology that Adobe, Google and Yahoo worked on and I think that to make a Flex application that load the content dynamically is to go a bit too fast.

So with that in mind I made simpler swf files. I even made some using Flash to see what would get indexed and how. In each of my experiments I have included a unique search expression basically formed from Fleximagically Searchable plus another word. If you search Google with that expression and one of my experiment shows up, it means Google indexed the content. Here are my experiments:

Flash:

We don’t even know what type of swf is or is not indexed by Google so I sat down down and I made the simplest ones. Since Flex is pretty complex, I made some files using Flash.

The first one is only a static textfield right on the timeline. we know Google used to index those files, let’s see how it does it.

http://www.fleximagically-searchable.com/fleximagically-searchable-v1/

The second one is still in Flash using a prefilled dynamic textfield.

http://www.fleximagically-searchable.com/fleximagically-searchable-v2/

The third one is using a dynamic textfield again filled using ActionScript.

http://www.fleximagically-searchable.com/fleximagically-searchable-v3/

The fourth one is using a static textfield added to the stage using ActionScript.

http://www.fleximagically-searchable.com/fleximagically-searchable-v4/

Flex:

Since we don’t know if Flex files get indexed at all, I made three simple experiments using basic components: TextArea, Label, Text. In those experiments the content is filled using the text attribute in the MXML file.

Flex file using TextArea.

http://www.fleximagically-searchable.com/fleximagically-searchable-v5/

Flex file using Label.

http://www.fleximagically-searchable.com/fleximagically-searchable-v6/

Flex file using Text.

http://www.fleximagically-searchable.com/fleximagically-searchable-v7/

Now let’s wait for Google to crawl these pages and then we will be able to better understand how this all works.

, , , , ,

6 Comments


Flex problems again

Seems like every time I want to use Flex there is something that prohibits me from doing it. Today I was trying  to make a website using papervision3D; what I want to do is use a grid of video planes. So each of my plane has a MovieMaterial Movie has a FLV embedded in it. Well the thing is that you cannot import FLV files in Flex. So it makes it just more complicated in this case to use Flex and Flash together instead of just using Flash. Oh well, no profiler for me this time either.

, , ,

No Comments


Using Flex with Flash problems

I am really trying to integrate Flex into my work but I keep bumping into problems. I am working on a game that uses movieClips for my Sprites (Monsters). The thing is the when you embed a movieClip from Flash it loses all its ActionScript. I know that you can use a method that addScriptAtFrame but it seems to be complicated for nothing. Also what happens if I have a movieClip with a movieClip inside it? I really want to use Flex, I think it’s a great tool, the profiler is really something I wanted and it works great, but why is it so complicated to make it work (Flex)…

, ,

No Comments



Parse error: syntax error, unexpected ';' in /homepages/25/d169645162/htdocs/wp-content/themes/fusion/footer.php on line 13