Posts Tagged SWFObject

Transition to tile: third RIA for Home Depot

Yes this is the third installment of tools we did for the Home Depot and I can say that working on this one was just simple and easy, mostly because we used PureMVC on the previous one. As you can see, Transition to tile reuse a lot of components from Redefining floors, but the middle part is really different. Making the changes and adjusting what was already there really was a breeze and that is were you see the advantages of using a framework. The technologies we used were mostly the same as the one before but I am going to list them here again:

  1. TweenLite
  2. PureMVC
  3. SWFAddress
  4. SWFObject
  5. Alcon (for tracing SWFAddress stuff)
  6. Google Analytics for Flash

I hope you like the tools we are building for Home Depot because there is more in the pipeline.

, , , , , ,

1 Comment


This is not SPAM, VIAGRA.ca is live!

I have been working hard (that’s the last joke I make on this, I don’t event know if I am allowed) on this website for a long time, but it’s finally live!. Because of canadian regulation on advertising and pharmaceutical prescription drug, the process of making the canadian version of the VIAGRA website is unlike other; more steps are involved when you try to get content approved. So that’s why I have been working on this for a long time, but it’s finally out and I am really happy of the results.

What is funny when you work on a project for such a long time is the fact that you improve so much in the mean time, that you look back at your early code and you can’t believe you did that. During I was working on the VIAGRA website,  I switched animation package three time to end up with TweenLite, I started looking at SWFAddress now I kinda use it on every project, knew nothing about AS3 and so on. It was also the first project where I started using Object Oriented techniques to build it.

When I present a website I did, I like to list all the libraries I used, so here I go again. Well first it was all built in Actionscript 2.

Most of the 3D was done using 3D Studio Max exept for the button animations that where done using Maya.

Well that’s it, go and hang around the VIAGRA.ca clubhouse!

That conclude my week of posting everyday (well I didn’t post yesterday, but I posted twice today), see you in a month (just joking).

, , , , ,

2 Comments


My second Rich Internet Application

A month ago (October 15th 2008) was the release of Flash player 10, but it was also the week that my second rich internet application was set (a)live. I wanted to make a post about it for a long time but I had a lot going on and only just now have things slowed down. So I present you Home Depot – redefining floors. I am really proud of it and I really put a lot of energy in it. It is the legitimate big brother of the previous RIA I made Home Depot – think in colour. I had known for a little while that I would be doing a follow up application to the paint picker and I had started planning and building the application in my head. When the development began, I knew a lot of things that I would not be doing again. Some of the pitfalls that I had faced doing the first application would not show up this time; I was ready and awaiting this new challenge with the motivation to do something better.

In the first one I had jumped head first into the code because I didn’t see any reason why I would use a framework, it was ok at first, but when the codebase became more imposing, dispatching event also became very tedious. So this time around, I used the framework PureMVC and I can say it helped a lot; it helped with the events and it also helped with shaping my ideas into classes.

An other thing I did differently was that I made sure that my ActionScript classes wouldn’t have displayed text in it. I live in Montreal and we speak mostly French here but the rest of Canada speaks English. So if I start putting copy in my code, I will need to have a codebase for French and a codebase for English. That is what I had done for the first application and every time a modification had to be done I had a whole lot of files to touch. So this time around most of the text was located in an xml file which was something better.

All in all, it was a very nice project that I liked to do a lot and seeing how its little brother got rewarded last Friday (Home Depot – think in colour won a Bronze CMA award  in the retailing category on November 28th 2008) I foresee a bright future for this one too.

Here is a couple more libraries I have been using for this project:

  1. TweenLite
  2. PureMVC
  3. SWFAddress
  4. SWFObject
  5. Alcon (for tracing SWFAddress stuff)

I have a couple of new ideas how to improve my workflow and tools for my next RIA; can’t wait to get my hands dirty!

, , , , , , , , , ,

7 Comments


More on the Flex SEO contest

If you have been following this blog, you know that I entered the contest to get a Flex application on the top of Google for the words “Fleximagically Searchable”. The next logic step was for me to add deep-linking to my application, but it’s not what I am going to do. Why you could ask? Because even if the webpage for my application is appearing on Google, the content itself doesn’t seem to be included. So there is no meaning of implementing deep-linking if my content won’t be found.

There have been rumors around the fact the Google would not reference website that use javascript to embed the flash file. Peter Elst seems to think the contrary but I think it is worth a try. I was previously using SWFObject to embed my swf because I had in mind to use SWFAddress for the deep-linking, but now if you do a view source of my Fleximagically Searchable application you will see that I am using the good old Object and Embed tags. Let’s see what Google think of the new page.

, , , , ,

No Comments


Update on the SEO contest

I have set my self up for Flex application development and thanks to this post about how to use Flash Develop and Flex, I was able to do so quickly.

Yesterday I had simply created the HTML pages that would hold my application, today I created the application itself. It is quite a simple application and it is clearly a Flex one because of the skin of the components ( a button and a textarea). This will serve as a base for what is to come. The next step is to create the deep-linking. It has already some kind of deep-linking in the sense that you can go directly to this Fleximagically Searchable page. This page loads exactly the same swf than the page at the root of the domain, but I pass it a variable using SWFObject to tell it to load the content. If Google find any searchable content in any of those two pages, it means it comes from the dynamically loaded content because I removed everything in the HTML code except for the title of the page.

From what I did yesterday I am already getting some results, the new domain name I bought is scoring a ten (it is the tenth page for the term Fleximagically Searchable) and all the pages before it are blog posts (including one from this blog) that will not count in the contest so I guess I have my chances. Let’s see how it all evolves.

, , ,

5 Comments


SEO and Flash part 2

In the previous article I said my tutorial about search engine optimization was going to be in 2 parts, well it’s going to be in 3 parts. In this part, I’ll explain the brute force way of making what we did the last time even better and I’ll explain the motivation behind it.

Remember that in part 1 I said that one of the most important factor in search engine optimization was what is inside the title tag. Well the easy way of making you flash website be present in search engines didn’t really optimize that factor; we used it a bit but not to its full potential. Also there is something else I didn’t speak about; the description meta tag. This tag is not a factor to be well ranked in search engine, but it can definitely be a reason why the user will click on your link on the Google page or any search engine’s page. The description meta tag define the paragraph of text that will be displayed below the link in the search engine search result page. Having a good and precise description can really help get users to your website. Lastly, if somebody searched for an expression that is present in your flash website but it is really far in and not that easy to find, in our previous method, the user will have to search trough your site to find it and might leave before even finding it.

Ok, so the previous method was that we dumped all the text present in the swf file in the html page embedding it. This was fine, but not really optimal as I have explained. Going from there, what the brute force is all about is dividing all the content we dumped in the first method into different html pages. For each section in the flash website, we make a page for it in Html and we embed the same swf in all pages. There are 3 particularities you have to add to make this work.

First, in the embedding method using SWFObject, you have to pass a variable the swf file telling it what page it is on. You can do it in this way:

<script type=“text/javascript” src=“swfobject.js”></script>
<script type=“text/javascript”>
    var flashvars = {
	page : "WRITEYOURPAGEHERE"
    };
    swfobject.embedSWF(“myContent.swf”, “myContent”, “300″, “120″, “9.0.0″, "expressInstall.swf", flashvars);

</script>

So now the swf files knows what page it is on, but it has to do something with it. When the flash loads it has to check in ActionScript for the variable that was passed to it in our case _root.page and display the good content section according to it.

The last thing you have to do is in the alternative content, make a link menu that links all html pages you created. This menu has to be in every html page of your site. You have to do this so that search engines spiders can access all your pages and index them.

What we did with this method is create multiples entry pages to your flash website instead of just one. Also this enables us to give a different title and description to each page which optimize those factors. With all this said, I can now explain why I call this the brute force method; this is not yet the best method to optimize your website for search engines. It will give you the same results as the next method, but will require more time as is harder to maintain since when you make a change in content in the flash file, you also have to do the same modification in the html page. The good point is that this method doesn’t require any server side scripting like php or asp.

, , ,

1 Comment


Finally something about SEO and Flash

I have been postponing this for a while but I think this is a good time for it now. This article will be the first part of a two part tutorial about how to optimize your website in flash for search engines. This tutorial is about the straight forward way of doing it involving no server side scripting. It is not the ultimate way to do it, but it sure is way better than doing nothing.

The first thing anyone interested in optimizing their site for search engines should do is read this article on seomoz.org on the topic. It is about how to optimize in html but a lot of thing that applies to html still applies in flash, read on to know why.

So if you read the article you will know that one of the most important factor is title of the Html page. The title in html is the text you see appearing in the blue bar at the top of your browser. That’s nice because with a flash based website, the title is still the html title, so you should give a lot of attention to it. And also it is really easy thing to modify. You should really think about the words you put in your title because you only have a limited number of words. Some say 60, some say more, I have a tendency to put more and let the search engines crop the end of them. Keeping that in mind put the most important key words first. Don’t just dump keywords, try to make sentences and slogans, search engines have been around for a while now, they know when you are trying to fool them.

Next thing you have to optimize is your text content. Google, and other search engines, cannot see in your Flash files (well I think now it can, but it sure cannot see dynamic text) so we have to find a way to make your text content accessible to them. It all happens in the html integration of your site. First, don’t use the default html page that flash, even flash CS3, creates for you. It’s just not good enough and there is a lot of bugs related to it. The best way to integrate a Flash is to use SWFObject. It’s so good that Adobe is even speaking with the makers of it to put it in the next version of Flash. Go read about it and check the examples, it is very well explained. The basic of SWFObject is that it will replace a div (or a td) using javascript by the proper Html to embed a swf. All the magic for us happens in the replacing of the div. Here is a sample code of how to embed using SWFObject:

<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript">
    swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>
</head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>
  </body>

So you see, everything that is in the div with id myContent will be replaced by your swf file. You can also see the text Alternative content in there, this is where you are going to put all the text that is in your swf file. Think of it as a tune down version of an html page. So don’t just cut and paste your text in there; use p tags around paragraphs and most importantly h1 tags around your titles. In the article from seomoz, you can read that text inside h1 tags is also really good for search engines. So use it to put your titles and important text. Another good point of using this technique is that screen readers for blind peoples just as search engines will be able to read your alternative content. Well that is it for part 1 of this article, part 2 will be about creating more than one entry point to your site using either brute force or server side scripting.

, ,

7 Comments


SWFObject and SWFAddress again

Well this is just to tell you that SWFObject released the version 6 of their beta. I really hope they put the finishing to their code soon, my project which will rely on SWFObject and SWFAddress has to go live in January. Speaking of SWFAddress, they said that they were going to release version 2 November 16th. I don’t know how they can release it before SWFObject which it is based on, but maybe they have some inside information saying that SWFObject won’t change much until release. Anyway, we will see.

,

No Comments


I was a bit wrong about SWFAddress

Yesterday I was granted a comment by one of the developers of SWFAddress, pointing the fact that I was not using the latest version of SWFAddress and that was indeed true. So I started the day, thinking that my problem would be solved. So I got the latest version and tried it. Well it did not work either. But don’t let go so easily so I put some time into it.

First at SWFAddress they are using SWFObject 2 beta 3, I was using beta 4. But in beta 4, SWFObject is used as a static method. I think that will mean a lot of changes for the guys at Asual. Anyway, I downgraded my version to beta 3(which is not very logic) and tried once more. It didn’t work again. I tried with Explorer, Firefox, Opera, nothing worked. I then decided to mess with the code. I did calls from the externalInterface in flash to a javascript alert function. With all that I found that the SWFAddress.value was never initialized and it did a check for that before executing the setValue function. If I removed the check, I could now use the back button, which is half what I want to use it for.

I don’t know if it is my setup, I always have an external preloader; the SWF that includes SWFAddress ActionScript, is loaded in the preloader. Maybe this is what disrupts it from working, I don’t know. My point for all this is, yes I was wrong, SWFAddress will work with SWFObject; eventually.

,

1 Comment


SWFObject and SWFAdress will not work anymore together

I have tried the beta of the new SWFObject (SWFFix renamed) and it works quite well. I don’t have the mouse wheel problems I had previously. On the website that I am currently working on, I wanted to use SWFObject, but also to use SWFAdress. But since SWFObject changed considerably from version 1.5, SWFAddress won’t work with it, we will have to wait for another version or tweak it to make it work. It was nice that SWFAddress worked with SWFObject, it reduced the overhead, but the drawback is that if SWFObject changes, SWFAddress has to change too.

,

1 Comment