Archive for the ‘Tutorials’ category

I stumbled onto a new problem that switching to Actionscript 3 has caused me. The basics of it are trying to control timelines or movieclips of swfs I loaded into another movie. In the past with actionscript 2 the way I’d work things was create a base flash file and from there load the bits and pieces (other swfs) that made up the flash site. There are a few reasons behind this thought: On one hand your base file stayed pretty small in file size and loaded quickly; on another the visitor only downloads the portions of the site need (instead of downloading the whole shebang). Think modular like legos. No need for the whole bucket of parts when 5 to 6 pieces complete the space cruiser.

Anyway, the old method in AS2 was easy you simple targeted the movieclip you loaded the swf file into and then could easily control the timeline or have the objects to do whatever you wanted them to (_root.holder_mc.some_mc.play()). In AS3 it’s not the same.

I’ve created a simple file of how I’ve figured out how to do it. The short and easy of it is you have to create an object that’s defined by the loader that you create to load your swf file into. Once you look at the sample files it’ll make more sense.

The ZIP contains 3 flash movies “the_base.swf”, “soundfx.swf”, and “buttons.swf.” The “the_base.swf” basically loads the other two files and contains all the actionscript that controls the other two movies.

base_mc_controls_loaded_swfs.zip

As I’ve been making the transition to Flash Actionscript 3 (AS3) I’ve discovered that there are somethings that used to be so easy in Actionscript (AS2) that have become a major choir to figure out in AS3. So in an effort to help anyone else who might be making the transition from AS2 to AS3 here’s another group of source files that detail how to get FlashVars working in AS3.

A basic understanding of FlashVars is it was a simple way to import values into a flash movie. For example I often would create a flash movie and set up some variables that changed via the FlashVars (like a movie clip color, url, or text). To make a change to the project rather than opening the flash file, editing the file, then re-export the code, I could simply update a short line of flashvars in the html code and the changes were reflected the next time the flash movie was run. Actionscript 3 seems to have done away with FlashVars, but this doesn’t mean you can’t store your variables elsewhere and import them.

My example that I’ve linked to at the bottom of this post is a classic example. The main movie (text_file_variables.fla) contains three buttons each linking to a website. The convenient part is the website urls are defined in the text file (variables.txt). Change the text file and the buttons redirect you to the newly changed url. The flash file is pretty well documented with what’s been done. I hope it saves someone time trying to figure it out.

Download the source files.

UPDATE

Spending a couple days in flash you learn a ton. I figured out a way to create the same file without having to have more than one frame in the timeline. Basically everything that was on frame 2 (anything that was determined by the variables in the text file) is inside the function that gets triggered after the text file is loaded (after addEventListener(Event.COMPLETE, dataOK)). I’ve updated the file below to reflect the one frame code version.

Download the UPDATED source files here.

I recommend Flash CS3 Professional Advanced by Russell Chun. I bought a previous version of this book a couple years back to learn Flash and felt a little like a Flash newbie walking out of Barnes and Noble with it again, but with Actionscript 3 it’s seriously like starting all over with coding in Flash. This book has been great. I also picked up the Actionscript 3 Cookbook and it’s pretty good too, but to be noted the code in this book has been written from the standpoint that you’re using Flex (not flash) to author swfs (who does that?). It’s still been helpful but I was slightly disappointed it’s targeted more towards Flex users.

Since being introduced to tweening a couple years back it’s been a must have on every project. Unfortunately, the previous method of tweening (in AS2 I used LacoTweens) does not work in Actionscript 3 projects. Flash does have a built in tweener that can get ugly to use, but among my many google searches I stumbled across an Actionscript 3 tween engine. This site blog.greensock.com/tweenliteas3 has a Tweening engine that does everything the old lacoTweens would do, and the author wrote the engine with the objective of cutting the overall size of the exported swf file. It’s worth checking out. blog.greensock.com/tweenliteas3.

The biggest concern I have had with moving to Actionscript 3 was being able to use flash to fill the whole browser (often called full browser flash). Since this is the basis of almost all my flash sites figuring this out was essential. You’d think it’d be a piece of cake but not so. It took me several hours and looking for help on the intertubes proved to be very little help. The problem lies in the change that’s happened with the Stage in Actionscript 3. Gone are the good old days of using the Stage and the Stage properties to position movieclips (movie_mc._y=Stage.height-100). After a lot of tweaking and googling I’ve come up with an alternative and have uploaded a sample file that anyone who is interested can download and view the source code. I’ve made some notes in the code to help explain what’s going on. It’s not the prettiest but it’s just an example. Click here to download the source files and click here to see the file in action.

This is a heads-up to all you flashers out there. In the past I’ve worked on a couple projects that involve flash and secure websites. One of the biggest thorns in my side was whenever I viewed the secure flash login/site (https) in internet explorer I’d get this warning saying that the page “contained both secure and nonsecure items”. If I chose to not display the nonsecure items the website looked and behaved completely the same as with those “nonsecure” items. Well today I figured out the answer and the fix. You can read all about the fix on Adobe’s site, but basically you just need to change the EMBED tag that points to “http://download.Macromedia…” to “https://download.Macromedia…”. Now you know and knowing is half the battle.

At work I’ve been working with a search engine optimization company—when they return my phone calls that is (it’s been three weeks). What’s interesting is search engine optimizers don’t really care what your website looks like. In-fact they want to change all my work with lots of links and repeated key phrases (how many times can you say alarm without boring a visitor?). Their theory is the more text and links you have on the front and subsequent pages the higher in the search engine ranks you get. The problem with that is it turns any website into an ugly monster.

Here is a link to one of their clients. She sells beads and if you type beads into google it’s the first site to come up. Take a look at the site and you’ll quickly see why I’m terrified at what they’re going to do to the two sites I maintain at my day job. They also told me that anything created in flash needs to go (I don’t think so).

As a web designer and particularly a flash designer this brings up some serious concerns. A website completely executed in flash is pretty much invisible to the google search bots. Sometimes they can pull out links to other sites or web pages, but text fields and most content in a flash site is overlooked.

Since I’m half way through the re-design of the AvantGuard website and planning on creating it all in flash I needed to figure out a way to improve search rankings and not sacrifice design or flash. So I went to work on marcfolio.

MARFOLIO SEARCH ENHANCED

The first thing I changed was the title of the index.html file. Search engines actually use the title of a web page as the number one search criteria. Ok, the second part is where I fool google. I figured google’s bots can’t possible have javascript enabled and I just so happen to use a lot of javscript. The scripts on marcfolio have a couple purposes; to check for the flash player plugin, and embed the flash movie as a full browser movie. I took all the text and content contained inside my swf file and placed it on the html page, but because the flash movie fills up the browser window it pushes all the additional content out of view. To give the bots the idea that this is a traditional html site I then copied the index.html file and renamed it contact.html, area.html, portfolio.html… changing the html text to reflect the respective areas. NOTE: each html file has the same flash file embedded. Even if your search pulls up clients.html it will launch the same flash movie.

The results have been AMAZING. I went from being able to only type in marcfolio to pull up my site in a google search to number one if you search for interactive boutique studio. AND number 3 if you search from salt lake interactive design studio. There are several other searches that pull up marcfolio on the first page or at least within the first three pages of results.
I’m not too worried about the search optimizers anymore. They can do their worse and I’ll just push it out of view.