Posts Tagged Flash

PureMVC Skeleton for Flash Applications / Websites

I have done a couple of site using PureMVC and Flash and it seems that at the beginning of a project I’m always doing the same things, creating the ApplicationFacade, the folder structure, the main fla, etc. I thought it might be useful to slap together a generic skeleton for a PureMVC Flash application or website. You can download it here:

PureMVC Flash skeleton

All you have to do is in the src/com folder, rename the folder PROJECT_NAME to your project, and do a find and replace in files for PROJECT_NAME to replace it with what you changed the forlder name to. I didn’t include the PureMVC library in there because I suggest fetching the files from the official PureMVC website so that you always get the latest version. Once you get them, put them in the lib folder and you should be able to compile.

The rar file contains the following:

  • Main.fla, Preload.fla
  • Main.as
  • ApplicationFacade.as
  • StartupCommand.as
  • ApplicationDataProxy.as
  • ApplicationMediator.as
  • IMain.as (Interface so that the preloader can use the init function of Main.as)
  • the folder structure

This should help save half an hour every new PureMVC project.

, ,

4 Comments


Online Awards for Flash Websites

I compiled a small list of award websites at work and I tought it would be usefull to share it here too. I didn’t test any of those yet, so I don’t know which give the best results in term of traffic and visibility but here is what I have right now:

Favorite website awards (you have to pay) (25 words desc)
http://www.thefwa.com/

Dope awards (35 words desc)
http://www.dopeawards.com/

Design Licks
http://www.designlicks.com/

Best Web Gallery
http://bestwebgallery.com/category/flash/

Design Flavr (needs a screenshot of at least 523px)
http://www.designflavr.com/category/flash/

Design Snack (needs a screenshot 389 x 180px)
http://www.designsnack.com/

101 best websites (requires login)
http://101bestwebsites.com/category/flash

Inspiration Up
http://inspirationup.com

Website Design Awards
http://websitedesignawards.com/index.php/category/flash-gallery/

Spyline
http://spyline.de/section/flash

Creative Website Awards
http://www.creativewebsiteawards.com/

Mowsnet Web Awards
http://www.mows.sk/awards/index.php

iBlog
http://iblog.chubzz.com/

Another Bookmark
http://anotherbookmark.com/

Refresh links (nothing new since may 2008)
http://refreshlinks.org.uk/

Flash in the pan (seems outdated nov 2008)
http://www.flash-in-the-pan.org/

Flash Blasted (seems outdated nov 2008)
http://flashblasted.com/

Flash Galleria (seems outdated)
http://www.flashgalleria.com/

New Web Pick (requires a login and does not seem so relevant)
http://www.newwebpick.com/

I classified them by relevance from my first impression,  so as you go down the list, the less relevant and usefull becomes the link. This list will have to be updated as  I compile results from them.

, ,

1 Comment


It’s A Wonderful Life

It is with great pleasure that I present you the Twist Image holiday card : It’s a wonderful life:  The shameless product placement cut. This year’s version of the card is a video where we incorporated elements of our clients. You get to watch the video and at the end you guess how many insertion we did.

Unlike last year I didn’t get to work on the Twist Image card, because I was working on something else (can’t wait to show that), but I can say that this year card is pretty good. A lot of work as been put on the audio, video and the Flash and it paid off in the end. My only contribution on this project was some troubleshooting to include the SWFAddress library.

So here you go again:

It’s a wonderful life:  The shameless product placement cut.

Well stay tuned because I have a whole lot of other posts coming (I have been doing some cool stuff lately, probably have enough content for a post a day this week!). I’m off to rent the second season of Dexter.

, , , , ,

No Comments


Google Analytics For Flash; is it that usefull?

Not too long ago Google released Google Analytics for Flash. My first reaction was one of happiness; finally some attention would be put into Flash analytics. But after looking into it a bit more I found out that Google Analytics for Flash wasn’t such a big deal.

On Google Analytics side, nothing changed; no specific stats just for Flash,  just the good old interface we all know.  On the Flash side, nothing changed much there either; instead of doing this:

1
2
 
ExternalInterface.call("pageTracker._trackPageview('/somepage');");

You now do this:

1
2
tracker = new GATracker( this, "window.PageTracker", "Bridge", false );
tracker.trackPageview( "/somepage");

From the look of it, it’s actually more code than before.

The cool thing about GA for Flash is the ActionScript 3 mode. In that mode, you can call the tracker even if the JavaScript code wasn’t imported in the HTML page the Flash file is embedded. Now that is a possibility that we didn’t have before. So in a context where you do not have control over the HTML you flash will be embedded, this will enable you to do analytics just the same. I have also seen in the road map for the project that they want to implement it for Adobe AIR also; this will be very useful.

What will you be using Google Analytics for Flash for?

, ,

7 Comments


My article on Flash SEO on InsideRIA

Well I wanted to mention that one of my article was posted on InsideRIA. That was a great opportunity for me and I am already thinking about another article I could write for them. There is actually a good story (in my opinion) to tell about this.

I was at first writing a longuer article, about 6 pages or more long, on how Google was indexing Flash content. I was thinking that I could write it at the same pace that I write a post for my blog but I was wrong. I really wanted to write it in a professional way which is a bit different from this blog which I write in a more casual manner. I was putting a lot of pressure on myself and when I am pressured to do something I actually end up post-ponning it indefinitively. Well, in the mean time of all this post-ponning, Google changed its algorithm, so my artcile was good for garbage. That was my fault, because I had many occasions to finish my artcile and I just didn’t.

But there was a good side to this story too; if Google changed its algorithm, it means that I could write an article about it. That`s what I did but this time I wrote it in a more casual way and I didn`t care how long it would end up. So it gave: Google changes the way it indexes SWF content. As for now, I will start to try to write a longuer article and we will see where that ends up.

 In the mean time, enjoy my half-done redesign!

, , , ,

No Comments


Bookmarking in Flash: what can and can’t be done

I’m going to start this post by telling that you cannot bookmark a web page just by using Flash. You either have to use javascript or user interaction if you want to bookmark a page from within a swf movie. That being said, it is not the only show stopper. Believe it or not, the way you can bookmark a page is different for every browser. For once I think Internet Explorer did something better by allowing a javascript function to open up the bookmarking window of the browser. I don’t know why Firefox doesn’t have such a function because I don’t see any down side to it (there is a way you can kinda bookmark a page, but then it opens up in the sidebar which is not good at all). I have also read that there is a way of bookmarking in Opera but I have followed the instructions and was never able to make it work.

How to do it

First off, if we are going to support Internet Explorer and Firefox, we first have to tell Flash which broswer the user is using. The way we do this is by having a javascript function that detect the browser. This function sets a variable that is passed to the flash as a FlashVars telling it if the user is using IE or not. Here is an example of such a function.

Bookmarking in IE

Than if the user is using IE you can call a javascript function using ExternalInterface to make the bookmarking window pop-up. This is the simple part, but there is a catch to it; if the user is using the debug version of the Flash Player and lets the bookmarking window up for more than 15 seconds, the Flash Player will throw an error because it is waiting for the javascript function to finish executing and has a timeout of 15 seconds. The way to counter the erro window to pop up is by surrounding the ExternalInterface call in a try catch statement. Here is the ActionScript 3 code that I used:

1
2
3
4
5
6
try{
ExternalInterface.call('addToFavorites');
}
catch (error:Error) {
//this is just so that if you leave the add to favorite window open for more than 15 seconds it doesn't send an error
}

Here is the javascript part of the code:

1
2
3
4
5
function addToFavorites(){
  if(window.external && document.all) {//ie
    window.external.AddFavorite(location.href, "Home Depot Canada - Redefine Floors");
  }
}

Bookmarking in Firefox

Well, in Firefox you simply cannot initiate any procedure for bookmarking so the best you can do is tell the user to press the shortcut to bookmark this page. So when the user will press your “add to favorites” button in Flash, this will pop-in  a window (inside the swf)advising the user to press Ctrl + D if they want to bookmark the page. This sounds like it should work because, really, there is nothing we are actually doing and we tell the user to do everything for us. But no this doesn’t work, there is this weird problem with focus relation between Flash and the browser. If you are interacting with an swf loaded by a browser (like pressing the ‘bookmark’ button), the Flash Player will be intercepting the keyboard keys that are pushed by the user. This is why sometime when you are on a Flash website the browser will just not respond when you press Ctrl + T to make a new Tab or Ctrl + D to add the page to your favorites. The Flash Player has the focus so in order to make this work we have to give the focus to the html part of the site. You can do this by using the focus() method of a input field. You first have to add a form in your html with just one input field and set the display style to none so that it won’t show. When the user clicks on your bookmark button you pop-in your message saying that the user can press Ctrl + D to bookmark the page and at the same time you call a javascript function giving focus to the not showing input field. That way the ctrl and d keystrokes will be caught by the browser and not the Flash Player.

Here is my AS code for it:

1
2
//do your code here to show the pop-in message telling the user to press CTRL + D
ExternalInterface.call('setFocus');

Here is the javascript

1
2
3
4
function setFocus(){
  document.getElementById("inputForBookmark").focus();
  //inputForBookmark is the id I gave the input field in the HTML with style display:none
}

You would have thought by now that bookmarking would have been made easier, but no you still have to go trough all this to get it to work from within flash. My solution for the problem doesn’t work in all browser; it doesn’t work in Opera and probably not in Safari, but at least it works in the two most popular browsers. If anyone out there knows a better way, I’d be happy to hear about it.

, , , , ,

9 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


My intermediate Flash presentation

Where I work we have these kind of workshops that are given by the employees. I was mandated to give a presentation entitled Advanced Flash, but it is not really going to be advanced; more like intermediate. I am basically going to introduce ActionScript 3, Tweening using TweenLite, Events, Linking symbol to a class, using the document class, loading an image, loading an XML and maybe speak about setIntervals and setTimeout versus Timer. I thought I would make this blog post my actual presentation notes so that it would help also people reading my blog.

My objective after this workshop is that the people attending it will be able to open Flash files I did using ActionScript 3 and find what they are looking for and also understand mostly the mechanics in the project. I did the presentation on May 13th and it went well for the most part, the biggest trouble was because we where on a projector with a resolution of 1024×768 and I am used to have 2 22 inch monitors (I hate the way Flash CS3 handles its panels).

Difference between ActionScript 2 and 3

First I want to mention difference between ActionScript 2 and 3. Mostly in the properties of a MovieClip, there used to be properties called _x, _y, _rotation, _visible, _alpha, _width, _height. Now these properties have been renamed to x, y, rotation, visible, alpha, width, height. The alpha property now goes from 0 to 1 instead of 0 to 100. If you want an alpha of 60% you do this: alpha = 0.6. Last thing, you cannot put ActionScript on MovieClip anymore, only on a frame in the timeline or in a class (external AS file). This will help prevent searching for ActionScript code for hours.

I am used to MovieClip, but what are Sprites?

Sprites are just a toned down version of a MovieClip. Sprites don’t have timelines, so you can’t use function like gotoAndPlay() and stop(). Why use them? Well since they don’t have a timeline and the timeline associated functions they also take less memory, so they should always be used whenever you don’t need the timeline. More on Sprites later.

Making things move, TweenLite for everything

One of the biggest building block in all of my projects is TweenLite. Nearly every swf or external class I use will have TweenLite in it. Here is a tutorial on how to use TweenLite. If you run one of my swf files if something moves it has 90% chance that TweenLite is making it move. I also use it for fade in, fade out transitions, button rollovers and music fade out.

1
TweenLite.to(rectangle, 1.5, {x:300, y:300, alpha:50, tint:0x0000ff});

A simple button using Sprites

Here is how I would do a simple button using Sprites and TweenLite. First draw a rectangle on the stage. Then convert it to a symbol, click export for ActionScript, in the base class field put flash.display.Sprite instead of flash.display.MovieClip. That is how you can create Sprites using Flash CS3. Now give the newly created Sprite a variable name of rectangle. Put the following code on the first frame on your movie (you will have to have downloaded TweenLite before you can do this):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import gs.TweenLite;
 
rectangle.buttonMode = true;
rectangle.mouseChildren = false;
 
rectangle.addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
rectangle.addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
rectangle.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
 
function handleMouseOver(event:MouseEvent):void{
  TweenLite.to(rectangle, 0.5, {tint:0xFF0000});
}
 
function handleMouseOut(event:MouseEvent):void{
  TweenLite.to(rectangle, 0.5, {tint:0x0000FF});
}
 
function handleMouseDown(event:MouseEvent):void{
  trace ("this is the mouse down event");
}

This method works fine in most cases but when you have multiple buttons, you have to copy and paste all 14 previous line of code and that makes a lot of overhead. That is exactly why we use classes.

Taking that simple button and make it a class

The following code is exactly like the code we put on the timeline before but written as a class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package net.zedia{
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  import gs.TweenLite;
 
  public class MySimpleButton extends Sprite{
    public function MySimpleButton(){
      buttonMode = true;
      mouseChildren = false;
      addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
      addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
    }
 
    private function handleMouseOver(event:MouseEvent):void{
      TweenLite.to(this, 0.5, {tint:0xFF0000});
    }
 
    private function handleMouseOut(event:MouseEvent):void{
      TweenLite.to(this, 0.5, {tint:0x0000FF});
    }
  }
}

Here is how you would then use this class :

1
2
3
4
5
6
7
8
9
import net.zedia.MySimpleButton;
 
var mySimpleButton1:MySimpleButton = new MySimpleButton();
var mySimpleButton2:MySimpleButton = new MySimpleButton();
 
mySimpleButton2.y = 100;
 
addChild(mySimpleButton1);
addChild(mySimpleButton2);

In this example both buttons will have rollOvers and rollOut implemented.

Document class where is it?

1
2
3
4
5
6
7
package {
  import flash.display.Sprite;
  public class Main extends Sprite {
    public function Main(){
    }
  }
}

Loading an image

Loading an image is quite simple, you have to use a class named Loader which is a DisplayObject. Just as for the button, you have to add a listener to the object to know when the file as totally loaded. Loader are special in the way that you don’t attach the listener directly to the Object. You do it like this: myLoader.contentLoaderInfo.addEventListener. The Loader is the only class that behaves this way.

1
2
3
4
5
6
7
8
9
10
11
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
 
var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleInit);
myLoader.load(new URLRequest("slide1.png"));
 
function handleInit(e:Event):void{
  addChild(myLoader.content);
}

Loading a XML

Loading an XML is similar to loading an image except that you use the URLLoader class instead of the Loader class. The URLLoader class doesn’t have the weird event behavior so you attach the listener directly to the object.

1
2
3
4
5
6
7
8
9
10
11
12
13
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
 
var XMLLoader:URLLoader;
 
XMLLoader = new URLLoader(new URLRequest("myXML.xml"));
XMLLoader.addEventListener(Event.COMPLETE, handleLoadedXml);
 
function handleLoadedXml(event:Event):void{
  var xml:XML = new XML(event.target.data); // or var xml:XML = new XML(XMLLoader.data)
  trace (xml.rooms.room[0]);
}

Preloading

Preloading a swf file or an image is exactly the same thing. I always make my preloader external to the file I am loading. There is another way of doing this by doing the preloader in the first 2 frames of a swf file. The advantage of doing an external preloader is that it will start at zero if you exported symbols in the library for ActionScript. Basically we take the code we had for loading an image and we add the listener and the handler function for the PROGRESS event.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import flash.display.Loader;
import flash.display.Event;
 
var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleInit);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, handleProgress);
myLoader.load(new URLRequest("main.swf"));
 
function handleProgress(event:ProgressEvent):void{
  var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100)
  trace (percent);
}
 
function handleInit(e:Event):void{
  addChild(myLoader.content);
}

setIntervals and setTimeout VS Timer or TweenLite.delayedCall

In ActionScript 3 it is not good practice to use setIntervals and setTimeouts but they are still available if you really need them. It is better to use the Timer class, but I never really use it, instead I use TweenLite to make stuff move, ENTER_FRAME for setIntervals and TweenLite.delayedCall for setTimeouts. Here is an example of how to use TweenLite.delayedCall:

1
2
3
4
5
6
7
8
9
import gs.TweenLite;
 
TweenLite.delayedCall(3, startAnim);
 
function startAnim():void{
  trace ("animation started");
}
 
TweenLite.killDelayedCallsTo(startAnim);

, , ,

2 Comments