1	CREATING WEBSITES WITH FLASH Eric Ressler Senior Developer
2	AGENDA - Discuss how to: Create a set of core classes that can be reused for any website. Defining a file structure Load management Dealing with page transitions Using XML to drive your site content Make your websites unique and avoid the cookie-cutter approach Extend your core classes, don’t start from scratch Deal with those custom designs and transitions Tips and Tricks Take advantage of intrinsic classes Use Express Install to help your users quickly update to the correct version of the flash player. Make your browser back and next buttons work within your flash website.
3
4	DEFINING YOUR FILE STRUCTURE – Make it modular Separate your site pages out into individual SWF files. Use a single “base” class (or model if you prefer the MVC approach) to manage the pages of your site. Let the individual content sections handle their own details. Don’t micro-manage. Use XML files to setup your site content.
5	DEFINING YOUR FILE STRUCTURE – Basic example:
6	CLASS STRUCTURE – decide how you want to organize your code What functionality do you use in every site you create? How will you populate your site with content? How will you handle page transitions and loading schemes? Can you define a common API between your pages and your page manager?
7	CLASS STRUCTURE – Now you can create your core class framework Base – page manager, triggers transitions and page loads. Loader – handles the load process when a new page needs to be displayed. XML Parser – takes the XML data and provides it in a format that is easy to read and from which to retrieve data. Content Base – a class that each page extends. Contains the main API and common functionality that all page modules share.
8	COMMUNICATION IS KEY – Defining your page API
9	LOAD MANAGEMENT Keep each page, or each separate “module” of your pages in separate SWF files. Helps keep your site structure clean Makes it easier to update individual sections Load each page on demand to help reduce initial load time. Use a load manager class to control your loading scheme. Setup a loader queue to help maintain control over how files are loaded. Display a realistic load progress bar even when loading multiple files. Example: nintendogs.com
10	LOAD MANAGEMENT – Managing the pages of your site
11	LOAD MANAGEMENT – Managing the pages of your site
12	DEALING WITH PAGE TRANSITIONS
13	DEALING WITH PAGE TRANSITIONS
14	USING XML TO POPULATE YOUR SITE CONTENT XML is a useful format for setting up your website. Maintain data, text, and URL’s outside of your source files. Just say no to hard-coding. Gets rid of the necessity to republish your source files every time data changes. Makes it easier to migrate your site structure to different locations.
15	XML – Configuring your page setup. Separate your page modules out into two sections Core modules that appear on every page Page specific modules Each page can consist of as many modules as you want. <files> <core> <file target=“sitenav_mc” src=“global/sitenav.swf” level=“100” x=“0” y=“0” feed=“data/sitenav.xml” /> </core> <page id=“home”> <file target=“home_mc” src=“modules/home.swf” x=“25” y=“130” level=“4” /> </page> </files>
16	XML – Populating your site content Use a separate XML file for each module or page. This XML file acts as a “feed” for that module. Example for a photo slideshow: <photos> <item> <image>media/photos/photo1.jpg</image> <copy><![CDATA[Image copy]]></copy> </item> <item> <image>media/photos/photo2.jpg</image> <copy><![CDATA]Image 2 copy]]></copy> </item> </photos>
17	PART 2 - REUSING YOUR FRAMEWORK Don’t modify your core classes directly! Extend them, and then overwrite any functions that need to change. Example: Pokemon Mystery Dungeon Core Base class Extended Base class This will allow you to keep your core framework intact. Copy it from project to project: “plug and play” in a way. Already tested, less likely-hood of bugs popping up. Don’t stop adding to or improving upon your core framework. Now… let’s see this stuff in action.
18	TIPS AND TRICKS – Intrinsic classes What are intrinsic classes? From the Flash documentation: Intrinsic classes allow compile-time type checking of previously defined classes. The keyword indicates to the compiler that no function implementation is required, and that no bytecode should be generated for it. So how can this be useful? Let’s take a look…
19	INTRINSIC CLASSES – what can I use them for? Intrinsic classes can be extremely useful under certain circumstances, but are not always necessary. When you have multiple SWF’s that contain references to the same class that lives in a different SWF file. Allows you to access the class properties and methods without including the entire class in every SWF that references it. This can help cut down on file size a bit You only have to republish one SWF file if that class changes. When you have an AS 1 class that you want to treat as an AS 2 class. You can create an intrinsic class for that AS 1 class Allows you to declare private and public functions and properties Allows you to type your class properties
20	INTRINSIC CLASSES – Save on file size
21	INTRINSIC CLASSES – What it looks like for AS 2 classes Normal AS 2 class: class MyClass extends MovieClip { public var radius:Number; private var length:Number; public function setPosition (x:Number, y:Number):Void { // do something } private function calculateAngle ():Number { // do something else } }
22	INTRINSIC CLASSES – What it looks like for AS 2 classes Intrinsic Version of the same class: intrinsic class MyClass extends MovieClip { public var radius:Number; private var length:Number; public function setPosition (x:Number, y:Number):Void; private function calculateAngle (Void):Number; }
23	INTRINSIC CLASSES – What it looks like for AS 1 classes Normal AS 1 class: MyClass = function () { this.x = 0; this.y = 0; this.title = ""; } MyClass.prototype = new Object(); MyClass.prototype.setTitle = function (title) { this.title = title; } MyClass.prototype.setPos = function (x, y) { this.x = x; this.y = y; }
24	INTRINSIC CLASSES – What it looks like for AS 1 classes Intrinsic version of the same class: intrinsic class MyClass { public var x:Number; public var y:Number; public function setTitle (title:String):Void; public function setSize (x:Number, y:Number):Void; }
25	TIPS AND TRICKS – Express Install Allows you to push the user to upgrade their flash player directly within your Flash movie. Allows you to customize the look of the upgrade screen they see. Upgrades the users Flash player without redirecting them away from your website. Automatically sends the user back to the site and content that initiated the installation process. Only works in Flash Player 6r65 or later. You can download the Flash Detection kit that includes the Express Install code and directions from: http://www.adobe.com/products/flashplayer/download/detection_kit/
26	TIPS AND TRICKS – Express Install How does it work? Uses JavaScript to determine which of three scenarios to display: User has correct Flash version: Display the content. User has Flash 6r65 or later, but wrong version: Display the install SWF. User does not have Flash or older than 6r65: Display HTML text with a link to the Flash player update page. The downloaded kit provides an example FLA with a movieclip that handles the Express Install. Copy the movieclip to your installation FLA. Setup the FLA with a look and feel that you want. Test it to see how it works. Let’s look at an example!
27	TIPS AND TRICKS – Utilizing the Back/Next Buttons When is this useful? When you have a website or application with multiple pages or states, this provides “normal” browser navigation. When you want to allow users to bookmark specific pages within your website. What do I need? A hidden frame in your HTML that contains a hidden SWF file. Use LocalConnection to communicate between your main SWF and the hidden SWF. A little bit of Javascript. How does it work? Let’s take a look…
28	TIPS AND TRICKS – Utilizing the Back/Next Buttons Let’s look at the user flow:
29	The End. Thank You! Eric Ressler ericr@smashingideas.com www.smashingideas.com