Flash MX +

This tutorial will show you how to include an external XML text file into Flash using external Cascading Style Sheet (CSS) to get crisp, clean and elegantly styled text within your text boxes. The latter serves two primary advantages over any other approach… (1) XML allows you to populate Flash content-driven applications with data from a simple text file. This is perfect for designing reusable application where’s nobody has to come into the Flash file again; all they have to do is add new entries to the XML file. (2) Cascading Style Sheets can be used to group style rules, which can be applied to XML elements allowing you to format all of your text boxes quickly and easily by editing just one single text file.

Not long ago, editing text in Flash left little to be desired. Any formatting and updating of the text boxes had to be done within the FLA file, so a Flash designer would have to be called on for even the slightest modification – you would have to reopen the source file, go through the whole movie editing text boxes one at a time, recompile the new SWF file, then maybe, if blessed with the worlds nicest client you might get lucky and not have to redo it over and over again. Not to mention Flash’s anti-aliasing feature, which tends to hinder rather than serve any purpose at all. This became further complicated and even more of chore when in the process fonts would come out of focus (because of positioning). I’ve seen people try all sorts of ways to get rid of that blurriness and end up ripping their hair out, because all they get is what you see bellow.

So before you go bold, refer back to this article and try some of this code. To write my XML, I generally use Notepad++, which it’s just a nicer version of the typical Notepad that comes with Windows; but you can use any text editor doesn’t have to be this one. Here’s the XML file we start with.

It looks like plain old HTML doesn’t it? Absolutely, XML is very similar in many ways to traditional HTML - the difference being is that you are no longer restricted by a predefined list of tags; you can actually makeup the tag names yourself. Nevertheless don’t get too carried away, there are certain rules to naming your tags, such as not including spaces in the names, keeping your names short, simple, descriptive and all lower case. And always remembering to close your tags, every opening tag must have a matching closing tag.

The above XML reads as follow - the first line in any XML file is this XML declaration, HTML also has something like this and it’s basically just saying that this is an XML document and it should be treated as such. This is generally required but technically Flash will work either way. The next line is the root element or parent node, node is just another word for element, again this is very similar to the html tag in HTML in that every other tag will have to be nested between these two tags.

I will explain about the stylesheet in a minute, for now lets save this as “rhymes.xml” and head on over to Flash and create the code and visual elements needed to read our XML document. Open a new movie (.fla) - add two layers an Actions layers and a Visuals layer. Highlight the first frame in the Visuals layer then selects the text tool in the tools bar and drag it along the stage to create your text filed. Finally, in the text Property inspector (Ctrl F3 to access), resize it to about 400*350 pixels and set the follow options:

1. Select “Dynamic Text” from the Text Type drop-down menu. 2. In the Instance Name text box of the Property inspector, give it an instance name of “content_txt”. 3. For Line Type, select “Multiline” to ensure the text wraps correctly. 4. Select “Render text as HTML” and “Selectable” from the Properties inspector

With that out of the way, select the first frame on your Actions layer and opening the Actions panel (F9 to access) paste this code.

What the hell? Right lets go over this. What we’ve done is, create an instance of the StyleSheet class, load our stylesheet using the ‘load’ method and then associate it with our text field. Also, load our XML into Flash using the XML object and call our loadXML function to determine if our XML file loaded successfully. It seems now is a good time, or as good time as any to write our loadXML function so, open the Actions panel again and enter the following.

That’s it! Make sure to save your .fla file in the same folder as the rhymes.xml file and press Ctrl+Enter to test your movie, if you’ve followed the instructions correctly you should see some thing like this.

By George, I think we’ve got it! Though the text still seems a little dull and out of focus. Lets cut to the chase, shall we? I’m hoping you know something about stylesheets already, hopefully from working with HTML and stylesheets (CSS). If not, it’s no biggie. CSS in ActionScript is somewhat limited. The properties listed bellow are all you have access to.

To make this a bit easier for you. I’ve already created the stylesheet for you. Feel free to use it or create your own.

Save the stylesheet as “crisp_styles.css” in the same folder as your other files and, switch back to Flash to display the movie.

Not bad! But, how about adding a little more text between our XML tags to see what a real paragraph might look like. Heck, lets also add an image while we’re at it and amend the stylesheet by adding a class to give emphasis to special words within the paragraph then, we’ll return to the XML document and apply our new class to any word withing our tags as follows.

(1) Open the XML file and add this.

(2) Go to the stylesheet and paste this chunk of code.

(3) Return to the XML to apply our new class.

Needless to say you’ll need to make your own image, also I should point out that the Flash Player does not support progressive JPEG files. Now, if all is well the Flash should look like this.

That’s basically it-it might seem like a lot at first but it really isn’t all that difficult. If you still find this hard to understand, leave a reply.

Share This

This is an opportunity to share some tips with beginning to intermediate Flashers who want a quick, friendly way to get that Flash on. The code samples in here are actual working chunks of code. I assume you already know something about ActionScript and Flash (or Cut and Paste, if you know what I mean). If you don’t know what trace() is, point that cursor away before you hurt somebody. I’m not kidding. Right now!

10- Q: How can I make my Flash site display current time and date?

A: You can do it with the help of the Date() class available in Action Script. This class has all the necessary methods to retrieve full information about the current time. Before using these methods you need to create a date “object” in the class, this is because the methods are not static and they can only be applied to a single object. To create a Date object please, use the following syntax:

After that you can use different methods for this object getDate(), getDay(), getFullYear(), getHours(), getMilliseconds(), getMonth() and so on). Use Flash Help documentation to learn more about the Date() class and its methods.
For example:

Note: You can retrieve both your operating system time and universal time - UTC (known before as GMT Greenwich mean time). To display UTC time you should use the methods that have “UTC” in their names (getUTCDate(), getUTCDay(), getUTCFullYear(), getUTCHours(), getUTCMilliseconds(), getUTCMonth() and so on)

See also:

How to set up the current time and date demo movie

Here’s the code used in the demo movie:

9- Q: How do I edit images on Flash?

A: Open your source “FLA” file in Adobe Flash and press “F11″ to launch symbols library. To perform search of a needed image symbol will be easier if you sort them “by kind” simply by pressing “kind” tab at the top of symbols list. You’ll see that all bitmap symbols are grouped now at the top of the whole symbols library.

Browse these symbols to find symbol your want to substitute. You can see symbols preview at the top of symbols library. When you have found necessary bitmap symbol double click the icon on the left of it as to see the symbol properties window.

You’ll see image preview and options there. Check the image size. It looks like 284 x 423 pixels at 32 bits per pixel. To make your image fit the original effects and animation the best way your image must be exactly the same size as in the original image.

You can resize or crop your image using Adobe Photoshop. Open your image in it using “File/Open…” from the top menu. To resize or crop choose “Image/Image Size…” or “Image/Canvas Size…” accordingly. Then save image using “File/Save As…”, for using it in flash choose one of the following image formats: “JPEG”, “GIF” or “PNG”.

Press “Import” button on the left and browse to location of your image file.

At the bitmap symbols properties window you can change the image quality. Make it lower to reduce published file size.

Now you should publish your flash movie.

8- Q: Can you give me a step by step explanation on how to publish my Flash site?

A: You may want to modify the publish settings to reduce the download time or increase the image quality. To do so, please, choose “File/Publish Settings…” from top menu. In “Publish Settings” window choose “Flash” tab. The main options that have significantly influenced the published “SWF” movie file size are Jpeg Quality, Audio Stream and Audio Event.

To change jpeg image compression ratio move “Jpeg Quality” slider or type it in the input box at the right of it. Low quality (high compression) extremely reduces download time by flash looses its professional look. Try to experiment with quality to get optimal size/quality balance.

Another way to affect movie size is to change Audio Stream and Event options. Press “Set” button on the right to change music quality options.

Quick Tip! Actually, you can publish your movie directly from “Publish Settings” window, see “Publish” button at the bottom. Or you can publish it from every point of Adobe Flash by pressing “SHIFT+F12″ hotkey.

Published “SWF” file will appear in the folder were corresponding “FLA” file is located.

Replace old “SWF” file in “yourwebsite.com/flash” folder with a new one. Now it’s time to check modifications you’ve made. Go to the page on your website were you have embedded the movie and launch it to see the changes.

7- Q: How can I add a flash page to Favorites?

A: You should use the following Java script to bookmark the page:

You can apply this script to any button (text, image). It should work.

6- Q: How can I can make a certain number of images display randomly?

A: In Flash (as well as in JavaScript) you can use the Math.random() function which generates pseudo-random numbers. This function can help you in making a slideshow when you need to use a large amount of images. You only have to store these images in the Flash library, convert them to slideshows, and give them names (that include the various numbers assigned to each slide). After that apply a code similar to the one shown in the following demonstration: How to make images display randomly demo movie

5- Q: How do I link a button to an Adobe PDF document?

A: In Flash MX as well as flash MX 2004 and Flash 8, a hyperlink is created through the getURL() command. The getURL() command provides a means for the browser to jump from one page to the other. The getURL() command can also be used to open an executable application like a PDF document. Click “Window” and choose “Actions” or press “F9″ on your keyboard to access the Actions panel. You should type the following action script provided below into the white space to open up an executable PDF file:

Now test your movie by pressing “CTRL+ENTER“.

4- Q: I would like to open new windows with just the images in them and certain options like no scrollbars, no toolbars, specific height and width, etc. Please, advise.

A: You can use Java script to do this.

In flash it should be assigned to the button (image, text etc.)

In index.html that relates to this flash you should write in the following java script, like this (don’t change anything):

Put it between tags in index.html. Then add the following part to < embed> tag:

It will work.

3- Q: How do I duplicate symbols?

A: Duplicating a symbol lets you use an existing symbol as a starting point for creating a symbol. Open your source “FLA” file in Adobe Flash and press “F11″ to launch symbols library. From library, what we need to do is right-click (Windows) or Control-click (Macintosh) the symbol, select Duplicate Symbol and give the duplicate symbol it’s name.

Next, drag the symbol unto the stage and give it an instance name. Note an instance name and a symbol name are tow totally different things. Meaning, that while there may be two or more instances of the same symbol with the same name “symbol 1”, each instance must have assigned a unique identifier (e.g. instance name) for all ActionScrip reference purposes.

To edit the symbol, you simply double click the symbol to access it in the Main Area. Then double click the text area and enter your own slogan. Once you edit a symbol, Flash updates all the instances of that symbol in your document. You can customize all other Flash elements by repeating these simple steps.

2- Q: Does Google index sites that use Adobe Flash and How do I use SEO for my flash website?

A: Yes, Google indexes pages that use Adobe Flash. However, their crawlers may experience problems indexing Flash pages. If you’re concerned that Flash content on your pages may be inhibiting Google’s ability to crawl your site, you may want to consider using a text browser such as Lynx to examine your site. If features such as Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.

You may want to consider creating HTML copies of these Flash pages for the crawler. If you create HTML copies, please be sure to include a robots.txt file that disallows the Flash pages in order to ensure that their crawler doesn’t recognize these pages as duplicate content. A hybrid site such as this, works especially well, if your navigation uses traditional HTML links. You can use cascading style sheets to give the appearance of flash text links. This type of hybrid site will always rank better than an all Flash site - all other factors being equal. It’s also important to have your HTML page title correct, regardless of anything else. Several search engines look at meta titles first. In addition to the page title, you can add meta tags to the head of the file.

Outside of the actual HTML page, off page factors are important. One-way links (sometimes called inbound link) pointing to your site from highly relevant and high ranking pages will increase your page rank. In addition links from prominent directories, such as Yahoo and Business.com, placed in the most relevant categories will help. One-way inbound links from relevant sites is still the best way to increase your ranking with or without Flash.

Quick Tip! You might also want to consider creating and submitting a detailed site map of your pages using Sitemaps. Sitemaps are an easy way for you to submit all your URLs to the Google index and get detailed reports about the visibility of your pages on Google. With Sitemaps, you can automatically keep them informed of all of your current pages and of any updates you make to those pages.

To learn more about Google and how to optimize Flash for higher ranking, got to http://www.google.com/webmasters/

1 - Q: Does anyone know a free, easy way to create Flash for my website or to create a flash website?

A: Flash animation is a very attractive element of your website. You can easily created using Flash templates.

A Flash template is a complete site design that can be opened with Adobe Flash, filled with content and edited to suit particular needs. Flash templates will give your website a professional look with a minimal time and money expense.

Quick Tip! Most quality template shops will provide you with a free flash template so you can evaluate the quality of the product and try your skills before you buy.

How to create a Flash form to send email without any knowledge of ASP, PHP or any other programing languages?

A: If you have been searching around trying to figure out what is the easiest way to make a Flash contact form work, check out this post.

If you guys find these answers useful please make sure to give it a digg by clicking the digg button…. we really appreciate it! Also let us know what other questions you might have or any tutorials you think might be useful. Basically, help us help you.

Share This

So you want to spice up your website, add a splash page perhaps, maybe some video. Maybe you’ve thought about outsourcing the flash to someone else. Here are 10 things you’ll want to consider before you hire a Flash designer.

10. Flash requires quite a lot of bandwidth - Flash files, especially if they use sounds or embedded movies, will take a long time to load, and the visitor may not have the best connection and, obviously, the patience to wait.

9. You could be at the mercy of the Flash developers FOREVER! - if you use 3rd party Flash developers, they might code the project so that you won’t be able to make any changes and have to hire them again, and again even for the smallest modification.

8. The “Back” button is usually disabled - if the Flash designer has used some trick such as meta refresh in order to disable the browser’s Back button, it is highly probable that the visitors might get frustrated and not want to start browsing your site over and over again. So they will leave. Besides that, Google’s AdWords doesn’t approve pages that have the Back button disabled. So, beware of this if you intend to promote your web site by using a PPC campaign.

7. Flash doesn’t care about your visitors’ needs –silly Flash intros and dumb sounds that you cannot turn off will drive your visitors away. Moreover Splash Pages don’t favor your visibility - they lack the text that contains the keywords identified as pertinent to your services / products; they only include one outgoing link and, most of the times, no back-link from another page; they often include re-directions, and most of the search engines will not include re-directions in their page index.

6. SWiSH is a heck of a lot less expensive than Adobe’s software. SWiSH is basically Flash for those without the wish/need/time and or finances to buy the actual software. And with all of its built in preset effects you’ll never need to understand concepts like frames, libraries, symbols etc.

5. Users recognize and are much more accustomed to using HTML form elements than they are of Flash form components hence less likely to understand how to use them. Seriously, how many different ways does there need to be to submit a form. Stop making me think already!

4. Whereas Adobe might have you believe that the obstacles for users with disabilities are derived from A. issues with the design or B. issues with the assistive technologies and not Flash, the truth is that this propaganda serves only to guide the spotlight away from major cross-browser accessibility issues encompassing Flash. The uses of wmode parameter for example, prevent assistive technologies from receiving information from a SWF. Meaning that a SWF will essentially be hidden from a screen reader. Yes, I know, this is not an issue in Internet Explorer, settle down, however true web accessibility can be best described as the ability of any user, regardless of disability and or web browser, to access the same content and information. The correct acronym for that is HTML.

3. Most search engines don’t like and don’t index Flash -not all the search engines can crawl and index the content of Flash, and if they do, it’s not free of errors. What is more they won’t be able to direct the visitors to the proper page. The truth is that without some type of clunky workaround, like creating HTML copies of all your Flash pages, Google wont index these pages.

2. Why even hire a flash designer? You can get a Flash template for less than sixty bucks- each Flash template is unique and completely customizable right out of the box. What is more, most quality template shops will provide you with a free sample template so you can evaluate the quality of the product and try your skills before you buy.

1. Don’t assume that everyone has the latest version of the Adobe Flash Player installed. While 90% of people do have the Flash plug-in installed, not everyone has the Flash 9 Player or even the Flash 5 Player installed. Should a user visit your site using an older, incompatible version of the Flash player, you could end up inconveniencing the viewer to the extent that she’ll never returns to your site again!

My point is – I don’t want anyone to tell you that Flash is the next best thing since sliced bread, and if you do decide to use it, do it in moderation everything in moderation, even moderation.

Share This

As it gets harder and harder to attract new customers and keep their interest. More and more designers and clients alike turn to Flash website templates in attempt to deal with the incursion of the short attention span generation. With bandwidth no longer an issue and armed with a powerful arsenal of rich media many say Flash is already perched and ready to become the industries weapon of choice.

Even so, those of us who may be closer to finding our inner geek (you know who your are) will be more familiar with the technical issues that surround Flash hence we may appear a little less (pardon the pun) “animated” by all that fancy schmancy. Granted, for every obstacle, and every shortcoming Flash may have had, still has, whatever the case may be, Flash still possess and promises to continue to bring some really amazing virtues to the table. But, there is no justifiable reason that dazzling special effect should ever take the place of good clean HTML content on a website, notwithstanding the majority of Flash antagonist become so, due to the many inaccuracies and misconceptions floating around all over the Net concerning Flash.

Misconception number one - ( The Flash SEO scandal )
The most widely spread misconception is search engine optimization (SEO) or search engine visibility as it pertains to Flash website templates. Sorry to burst your bubble but getting your site indexed on any search engine isn’t easy whatever the underlining technology; search engines are primarily design to index static pages while on the contrary Flash is inherently dynamic. The question then arises. Is the use of Flash website templates then present an insurmountable obstacles or irremediable technical issue to bar proper indexing of these pages. And, if so how is the use of other programming techniques such as dynamically driven database sites and complex URLs (a common practice also facing similar challenges) become such common place or differ when it all comes down to search engine ranking? The answer to these questions must necessarily come from the search engines themselves and the information they provide concerning dynamic Flash sites and complex URLs. See Google Webmaster Help Center answers to Does Google index sites that use Macromedia Flash? - Does Google index dynamic pages?

What are Complex URLs?
Generally complex URLs read as follows http://foamers.net/sample.php?type=flash&details=gallery. Pages or links used to access this kind of URLs are dynamic, meaning that the content of the page can vary based on the value of the data being passed to the script (script in this case refers to sample.php) creating the page. Notice the parameters (also called a query string) being passed as name=value pairs to this script beginning at the question mark (?) each pair is also separated by an ampersands (&). The script then parses these values to determined which content (or page) it should serve; if on the other hand the topic parameter were to change one could expect to see an entirely different page. As you might imagine these types of URLs could confuse or even momentarily trap the spider by looking as if there were an infinite number of pages within just the one site. Needless to say, me Google crawler no like.

Notwithstanding dynamic pages such as these are simply too useful to avoid. Moreover there are many simple ways to amend the dynamic URLs potential issue, such as through the use of https rewrites and the like… Likewise Flash interactivity is simply too functional to ignore, and any thing else you need to do to make your Flash website template more amicable for the search engine bots to traverse is well worth the extra effort. Why? Well, for starters Flash is capable of utilizing sever-side scripts, it can also be used to assure client-side data validation, make interactive games, embed movies, music and lots of other cool stuff… Listen, it’s perfectly natural to feel a little uncomfortable and even afraid around anything you may not easy get right away; but that’s no reason to call it evil. Case in point Google uses Flash to display users video search results, better still; the popular YouTube website which uses Flash to play movies uploaded by users.

Share This