Freelance Design in Leeds & Harrogate | Hello Tomorrow™
3D Visualisation, Animation, Motion Graphics and Web Design in Leeds
(info) Freelance Graphic Design
Gaia Flash Framework Demo Site
The main motivation for this little downloadable Flash demo site is simply that I wish there’d been something similar to this when I built my first Gaia based Flash site.
Hopefully, it will help other AS/Gaia novices get their head around a few things and give people a kick in the right direction.
View Demo
Here it is: http://www.tmrw.co.uk/demo/gaia-framework/
Source Files
Download it all here: http://dl.dropbox.com/u/438049/gaia-as3-demo.zip
Dependencies
You’ll need the Gaia Flash Framework extension installed, you can download that from here.
Notes about the demo
- This particular demo is built on Gaia v2.4.9 – the AS3 version
- The site this demo is based on (designbygrain.com) was my very first AS3 site, I’m not a programmer and I’m not promising my code is as organised or tidy as is should be, but hopefully someone out there will find it useful!
Background
The first site I had the opportunity to use the Gaia Flash Framework on was designbygrain.com. The framework made it easy for me, an ActionScript novice, to create what I hope is a high quality section/page based site.
Not only was Gaia useful, but the community on the forums was ace at helping out and suggesting solutions to any problems I had, and Steven Sacks deserves a lot of credit for all his work in getting the Gaia Framework to the solid, helpful Adobe Flash extension it is today.
What is the Gaia Framework for Adobe Flash?
For those of you who don’t know what the Gaia Framework for Adobe Flash is, best just take a look at the website (www.gaiaflashframework.com), but in brief author of it, Steven Sacks, describes it as…
Gaia is an open-source front-end Flash Framework for AS3 and AS2 designed to dramatically reduce development time.
- Revolutionary scaffolding engine builds fully functional Flash sites in less than 10 minutes!
- Simple API for Navigation, Transitions, Preloading, Asset Management makes development a snap!
- Deep Linking achieved through seamless integration with SWFAddress
- SEO Scaffolding makes Search Engine Optimization as easy as pressing a button
- Easy enough for novices
- Powerful enough for experts
38 Responses to “Gaia Flash Framework Demo Site”
Trackbacks/Pingbacks
-
[...] look at some of the sites featured in the gallery on the project’s home page as well as this demo website which offers a good example of to how build a site using the [...]
-
[...] found this air app Gaia Framework Site Creator, an as3 Gaia Demo Site and the Gaia Wiki. Updates are to come followed by my [...]
Hi,
I have a very critical issue that I’m not able to solve .
I had a multi language project ; I finish the English section and everything is working well.
When I begin the French section I found that the xml file isn’t parsing the French characters ,
I googled and surf the web for over 3 days , and I didn’t find anything to fix my problems.
Just If you could tell me or direct how can I use French characters such : éçéà because everytime I used in the xml (main site file , or dynamic driven text) , the character isn’t showing in the page
or <![CDATA[- To devéélop a unique shore line that
I will appreciate your help in this issue
Thanks in advance
You could try using the html character codes for each specific character that’s causing a problem. For example é would be é and ç would be ç. Take a look here http://www.ascii.cl/htmlcodes.htm for a full list. Good luck!
Hi there,
This demo is fantastic. Thanks for posting.
I was successfully able to customize most of it, but I can’t get rid of the title on the browser that says “Gaia Framework Demo (Fully Downloadable)”. That appears for just one second right before the actual title of the site that I entered in the site.xml. The rest of the pages are displaying the title correctly.
Is just for the first second right when the site loads, then it switches correctly to the right title.
Any idea where can I change that?
Thanks.
Hi Matt. If you want to change that “Gaia Framework Demo (Fully Downloadable)” title you’ll need to look at the
Hello everyone, I’m not a programmer, I have made a GAIA expansion pack installed, and also generated out. But I will not change ah, look at Lou Zhu doing so well, come to ask how to correct it. How to do, or not change is the background of GAIA’s what I do not know where to change the background which is what most students initialized.
Hi,
When I read your src code, I can’t find any defination of navButton class?
Is it the default class for gaia or ac3?
Thanks.
Hi Tony. If you look in NavPage.as you’ll see navButton referenced. the class ‘navButton’ is just the linkage identifier set in the nav.fla file on the movie clip that renders the buttons in the navigation. Open up nav.fla, take a look in the library at the menuItem MovieClip and you’ll see where it’s set.
Hi Rich.
I’ve been playing with your site demo (it’s fabulous). I tried experimenting with changing the site’s color to white and despite setting FFFFFF as the BG color of all Fla properties and checking the css file too, the site remains black.
Does anyone have experience with this? I’d love to know how to switch it up without creating a movie clip that scales if possible.
Thanks everyone and thanks again for the excellent demo Rich.
Hi Ewen. This demo site’s background colour setting is hiding in the file called ‘gaiademo.js’ I’ve created in the ‘js’ in ‘deploy’. Gaia uses SWFobject to embed the swf flash file in the html page, and just to keep things tidy I moved all the generated embed code into it’s own seperate js file. One of the paramaters you can pass to SWFObject is the background colour for the movie once it’s embedded in the html. So, have a look in ‘gaiademo.js’, look for the line that says ‘bgcolor: “#111111″‘ and chance it to whatever you want :)
Why do you not include your section .as files in the demo?
Hi Pat. I’m not sure what you mean? If you mean the class files for each page, they’re in \gaia-as3-demo\src\classes\com\tmrw\pages\ once you’ve extracted the zip file. Everything you need to get the site up and running is in that zip file, including all the AS and FLA files I used to create it, so there shouldn’t be anything missing. Hope that helps!
Hello there, could u help me or tell me some tips to customize the preloader bar just the same to the designbygrain site??
thank you so much in advance
JUSTO
When I get time mate I definitely will. Watch this space…
Thank you very much dude, Really nice. Anyone looking for more flash source check out http://www.brianwiltshire.net/lab.
I really like your site Rob, Keep up the good work, I will be following your site..
Nice one mate !
Cool!!! Thank you so much, I started to learn AS3 and your files come to help in a good time!!
Cheers mate!
Hey Rob –
I’m new to Gaia also, and I ran into the same problem. All you have to do to get the demo working is locate the site.xml file manually and move it into the location that Gaia is expecting.
So if you downloaded siteDemo to Desktop/GaiaTesting, open your GaiaTesting folder and browse through (or you could probably do a Search for site.xml from the Windows Vista start icon at the bottom left of your screen) till you find it.
Then open your Gaia panel, and look at the bottom of the Project tab. You’ll see something like bin/xml/site.xml – in this case, you’d simply drag the site.xml into the bin/xml folder that you have sitting on your Desktop/GaiaTesting folder.
Let me know if that works.
Does anyone encounter problems when trying to compile the home, about, contact, photoStrip, things? I have found out the problem is that when I compile the flash it’s looking for the null methods which is this bit:
var indexPage:IPageAsset = Gaia.api.getPage(“index”);
var indexPageContent:MovieClip = indexPage.content as MovieClip;
var navPage:IPageAsset = Gaia.api.getPage(“index/nav”);
var navPageContent:MovieClip = navPage.content as MovieClip;
it just returns as follow when compiled:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.tmrw.pages::ThingsPage()
Any solution to this, anyone? Thanks in advance.
Hi Rob,
Gaia “content” isn’t available for page’s until their transitionIn method. You don’t generally want to call code that references content before this, which may be the reason for your “null” references.
also you might want to look at this, which details issues with unloading content as well
http://www.gaiaflashframework.com/index.php/topic,290.0.html
If you need help, you can generally find me there, and the developer takes an active part too.
regards
j
Thanks for putting up this demo site. Unfortunately, I haven’t been able to get things imported into the gaia framework. I’m using Adobe CS4 on a Windows Vista 32 bit system.
I have Gaia and the Exchange update/patch installed, and I’m able to get most of the way through importing your demo site. Get note that Project updated to Gaia 3.15. But this is followed by a message that Gaia could not find site.xml. Then says: Enter valid site.xml path to Finish Import. Not really given anywhere to put this path; only option is to hit the ok button.
Am I doing something wrong? Or is it possible this demo doesn’t worked with the newly released version of Gaia. Any help would be appreciated.
Odd indeed Rob. I’ll look into it. I’ve not had a need to use Gaia for a while so I’ve not tried any of the new versions or updated any old sites, but when I get a chance I’ll see if I can find out what’s up. Cheers for pointing it out. Watch this space…
Oh sorry, i was mistaken, it was firebug that causing the problem. I have reinstalled firebug again, and it’s not causing the problem i had anymore, no matter which ever modes i open in firefox, the demo worked flawlessly now… so very weird.
hi thank you so much for this demo!
i discovered gaia long ago, but couldn’t figure it out and was hoping for a working demo with source code and finally here is one!!!
one thing i noticed though, when you change page it reloads assets everytime you hit it, no matter how many times you have visited it, is it normal? i was thinking that isn’t it supposed to be instantaneous if it has been loaded before, is there a solution for this?
Hi Ken. Glad you found the demo useful. I looked into that issuse and can’t replicate it though – it works as you say it should for me, i.e. a page I’ve been to before reloads instantly as all the images and swf’s are cached. I can’t think why it might not be working for you mate.
much appreciated!
Thanks for the reply Rich. I appreciate it. I’m seeing the future of Flash AS3 changing more towards Flex. Adobe is splitting Flash to designer and develoepr versions in CS5 I belive.
Hi there,
I just found out about the GAIA framework. This is really awosome. It will speed my work and create much more structured files for me.
I have a request if possible. I’m still using AS2 and would love to get a working demo of that. I need sometime to learn AS3 and so I would really appreciate an AS2 version. Thank you very much.
Hi E11World. I’d love to do an AS2 version as well, and I may get some time soon, but don’t hold you breath :) This demo was only really made possible as I’d built an AS3 site already and based the demo on that. If I ever do an AS2 site I’ll do the same and make and demo-ify it, but I’ve not got any AS2 sites in the pipeline. Sorry! I’ll let you know if I get round to doing one any time soon though…
Hi!
Thanks for sharing this project to new gaia users. I’m learning flash and AS3 for webdesign projects but I study alone just with books and tutorials. Since I’ve done some flash websites and still don’t know how to properly use classes to reuse my code, I found Gaia to be the perfect solution. Your demo site offered all the practical stuff I couldn’t get from gaia documentaion.
Thanks!
BTW, even the demo site design is very appealing, yet it’s simple to learn from
Cheers
Hi there!
Thank you so much for this – I’m the type who learn the best through an example, so this one will be such a great help for me!
This is brilliant, should help with the Gaia learning curve.
Thanks for posting this! im sure it will be very helpful!! Hope this site does not get used for a commercial purpose tho as the design seems to be incredibly close to Un-Titled’s site
You can use the source code for whatever you want mate, but it’s mainly intended as a demo for folks to look through the ActionScript to see how bits and pieces are set up. I had nothing to do with the design of it though :)
Thanks for the resources.
Its extremely helpful for folks like me, who are always afraid of flash.
I was wondering whether there is any alternatives for coding in flash.
I hope gaia will be help full
Thanks
thanks. really, a thousand times. Being able to see the source code of a completed site like this is like reading a hundred tutorials for me.
You’re welcome, I’m glad you found it useful!
Thanks for sharing. This will help me and others new at this.