As a basis for our Flash CMS website we are going to use one of five templates (five blank patterns for website development that differ by structure) uncluded into the Moto CMS pack. Let’s take the 1st template for our website.

So, after we have installed Moto CMS to the server, edited config.xml (the website width, height), edited Style CSS (specified the background color), it’s time to create a preloader for our simple Flash website…

Creating a Preloader

1. Now we need to open moto.flp file in Adobe Flash CS3 (templates/template_01/moto.flp). There are two files in the Project panel: moto.fla and website.fla. We need to set moto.fla as default file and then click on the “Test Project” button to compile these two files.

2. Since we have taken one of the templates included in the package, the moto.fla file already contains a Movie Clip of the preloader. It’s placed on the appPreloader layer.

So, we just open the Movie Clip and create animation on 100 frames of timeline. We should also add the “stop();” code to the last (100th) frame of the “a” layer.

3. Then we will specify the website dimensions (minimal width and height) in the moto.fla file properties (Modify — Document):

4. As the last step, we will create animation of the preloader disappearance.

We should launch the website on the last frame and activate “showWebsite ( )”.

Now we should update the preloader (we need to open the website.fla file for that).

Setting Website Background

Let’s set a background for our website. For that we’ll open Media Library within the control panel and upload the image we wish to use for the website background by clicking on the “Add Media” button. Together with the background image, we will also upload other images that we are going to use when designing our website.

Now let’s come back to the control panel in order to insert the background image for the website. For that we need to click on the “Add New Image” button and select the image from the Media Library. Then we click on stage to insert the image and then center it.

In the “Placement” section of the horizontal tools panel we’ve selected “On The Entire Website”.

Creating Title

1. For our new website we are going to use a font we’ve selected beforehand for our design. In order to add it to the control panel, we go to Preferences — Fonts Manager.

With the help of Moto CMS Fonts Manager we can manage the website fonts in .swf format.

2. Our font hasn’t been converted to .swf format yet, so we are clicking on the “Create Font” button to open Online Font Creator. We are clicking on the “Add Font” button to select and add the font in .ttf format. Click on the “Create Font”  – the font compilation process will start.

3. After the font has been compiled to .swf, we need to upload it to the control panel. Let’s go back to the Fonts Manager and add the converted .swf file to the control panel:

4. It’s time to create a title for our Flash website: we are going to use the Text Tool for that. So, we have selected the newly added font “Klavika”, font size 36, 16, Normal Mode.

We have already touched the subject of the Fonts Embedding in our articles. For more detailed info please read Embedding Fonts into Moto CMS Website: Examples, Pitfalls and Best Practices.

Adding an Image to the Home Page

Let’s add an image to the home page. For that we need to click on the “Add New Image” button and select the image from the Media Library. Then we click on stage to insert the image and then center it.

Creating (Modifying) the Menu

1. There is a special menu widget within Moto CMS, but for our simple website we will create a simple menu (for example, the bottom one) in a very easy way — by means of the Shape Tool (we add a rectangle) and Text Tool (add menu buttons and place them on the rectangle). Due to the Links Editor that can be found in the Text Object menu, each text object of our simple menu may be linked to the necessary website page.

2. It is also possible to create a vertical menu within the control panel as well as submenu for it. You will find a detailed Tutorial on how to create a Vertical Menu and a Submenu to it on our Forum.

3. Now we’ll save all the changes and preview the modified simple website:

That’s it — our simple Flash CMS based website is ready. In our next posts we will make our simple website more advanced: we are going to create content holders, edit the image preloader, create animated elements for the website, and much more. Also, we will create the “About Page” for our website.

You have a great opportunity to evaluate the Moto CMS Standalone before the purchase by registering a 30 Day Free Trial and try to create a simple Flash website by yourself!

Moto CMS standalone version has been created for making Flash developers’ lives easier and turn the process of a Flash website creation into a pleasant, exciting and easily accomplished task.

The standalone version mainly aimed at experienced developers. It contains the set of components, utilities as well as several design samples that can be used in Flash CMS website development. There is no need to install additional software — all you need for the website development is already included into Moto Flash CMS.

In order to start a Moto CMS based website creation process, a developer will only need:

• Adobe Flash CS3 (or higher);
• Moto CMS (standalone version or free Trial);
• Website design in .PSD format (Adobe Photoshop is required).

MotoCMS grants an opportunity to try the standalone version free of charge during 30 days. The Trial Version has no limits and completely corresponds to the original product. So, you are not limited within the control panel, can freely create a complete CMS based Flash website, and then edit and manage it with no limits.

You will get the following set of components within the standalone version:

Components — the folder with the MXP component that runs on the basis of Adobe Extension Manager;

ControlPanel — a folder with all the control panel files;

Docs — the folder with the API documents;

Examples — the folder with complete Flash websites based on Moto CMS with all standard modules, widgets and tools embedded.

Templates — the folder that contains five web templates that can be used as a basis for your Flash website:

• Moto Template 01 – one layout with transitions between pages;
• Moto Template 02 – two layouts without returning to the first one, with transitions between pages of the second layout;
• Moto Template 03 – two layouts with returning to the first one, with transitions, between pages of the second layout;
• Moto Template 04 – two layouts with returning to the first one, with transitions between pages of the first and second layouts;
• Moto Template 05 – three layouts without returning to the first one, without transitions between  pages of the second, with returning from the third to the second and with transitions.

Readme.txt — the text document that describes the components that are in the box, the installation requirements and the process itself as well as the Help & Support links.

The Moto CMS package includes the set of advanced components that make the website development easy and comfortable. The system opens the widest opportunities for developers; they can create manageable Flash websites or components for them. Moreover, with Moto CMS it is possible to maintain already created Flash website.

In order to start working with Moto CMS, you need to download the files by registering the Trial or purchasing Moto CMS standalone, and launch on localhost the website template from the samples you have downloaded with other Moto CMS files, or you can use your own website design in .PSD format.

To install Moto CMS (a standalone version) either to the local or remote server or you should take the next steps:

1. Copy the «admin» folder together with the control panel to the server. Copy any website sample (for example, examples\websiteExample_04) into the same folder overwriting the existing files. Then go to http://yourwebsite.com/admin/ to access to your control panel (if you get the access for the first time, you will be asked to activate it).

2. Please, activate your product on http://accounts.cms-guide.com/ (Your account details will be sent to your e-mail after you have purchased Moto CMS), and refresh your browser page.

3. In order to start the website creation please install Moto Flash CMS components (MotoCMS.mxp).

4. Start your work with Moto CMS by trying to compile the suggested website samples from Flash IDE. Use moto.flp for simultaneous .fla files compilation.

Learn more about Moto CMS installation process on http://www.cms-guide.com/installation-manual/

If you are not an experienced developer, but would like to try create a Flash website without a professional’s help, we would recommend you to choose a Flash Template from the premium Moto CMS collection. A 30 day FREE Demo is available.

Please read the Part 2, Part 3, Part 4 and Part 5 of the tutorial.

To be continued…

In addition to the above mentioned services, Google has made a great present to the developers and created the Google Maps API, a widely used web application development interface that allows developers to integrate Google Maps into their websites. Due to this advanced application, it’s become possible to embed a map, a route planner or a business locator in any website.

MotoCMS always keeps abreast of the most advanced developments and tries to implement all the boldest ideas into own products. So, one of the features we have recently added to our Flash content management system is the Google Maps Widget created on the basis of the Google Maps API. Now all Moto CMS website owners have Google Maps within their Flash CMS websites.

It couldn’t be any easier to provide your Flash CMS website visitors with clickable interactive map! The only thing you have to do is to add the map widget on the stage and configure it according to your website requirements.

Let’s look inside the control panel and discover the opportunities of the advanced Google Maps Widget…

1. If you press on the map, you will be able to add a New Marker:

• You can set the icon for the marker from your Media Library:

• You can drag the marker to set the Latitude and Longtitude;
• You can add Title and Description for the marker that the visitors will see after clicking on the marker;
• You can add the unlimited number of markers:

2. Within the Google Maps Widget it is possible to…

• Specify the Default Map Type (Normal, Satellite, Hybrid or Physical);
• Set the position of Map Focus (First Point, Last Point or All Points);
• Set the zoom parameters;
• Specify the background settings: Background Fill Alpha and Background Fill Color;

• Set the Controls Positions (Location, Zoom, Scale, Map Overview, Map type);

• Set the Map Types (Normal, Satellite, Hybrid or Physical);

• Set the size parameters, rotation angle and alpha;

• Specify the «Blend Mode» parameters.

The widget is available for FREE with the purchase of Moto CMS standalone version or any of the premium Flash CMS templates from our collection.

Choose one of the Flash CMS templates and register a 30 day DEMO in order to try the Google Maps Widget in action!

This impressive whirling Flash CMS gallery created with Papervision 3D is highly functional and will perfectly work for any purpose portfolio: a photographer’s, artist’s, designer’s portfolios, online exhibitions, model agencies, creative groups, etc.

The portfolio is equipped with an interactive 3D gallery in the form of a circle that runs around when you mouse over the page. If you wish to stop the gallery, point the cursor over it. To open a big image preview, just click on its thumbnail.

You can create a great number of albums within the gallery and sort your images according to categories. For each gallery  its own circle sub-gallery is created. The “prev” and “next” interactive arrow buttons allow to easily navigate the sub-galleries. The interactive drop down menu is not only attractive visually – it offers the visitors an extremely comfortable way of the website navigation.

This template is a full-fledged Flash website that can be easily modified through Moto Flash CMS integrated. If you are not familiar with the opportunities of Moto CMS for Flash, you will be pretty excited with the system functionality, the widest opportunities it offers, and almost intuitive interface that allows to create Flash website with minimum efforts. It is possible to add elements and effects, create pages and pop-ups, integrate new modules and fonts, and much more. A really great component is Flash image editor that provides a rich editing toolset for modifying images: to zoom in and out images as well as scale them, rotate horizontally or vertically or change the angle, resize or crop your images, change image hue, saturation and color balance, adjust contrast and brightness, add effects to images, etc.

A really cool feature of this Flash CMS gallery is the ability to change the background. It can be achieved with the help of Background image slot integrated into the control panel. Moreover, you can customize your background image to your liking. There are such functions as full screen mode, alignment, rotation, alpha and blend mode. Also, you can easily add the effects: bevel, blur, color, glow or shadow.

Try the DEMO and appreciate the advantages of this amazing Flash CMS gallery from MotoCMS!

For those who are really interested in Papervision 3D and are in search of some interesting Flash gallery solutions, we recommend to visit our Moto Flash CMS templates – Papervision 3D templates.

]]> http://www.motocms.com/blog/project-news/new-flash-portfolio-whirling-papervision-3d-gallery/feed/ 7 http://www.motocms.com/blog/flash-software/useful-tips-and-tricks-on-how-to-improve-your-flash-cms-website/ http://www.motocms.com/blog/flash-software/useful-tips-and-tricks-on-how-to-improve-your-flash-cms-website/#comments Thu, 02 Sep 2010 06:41:25 +0000 Admin http://www.motocms.com/?p=3202 While you, dear users, are pending of the New Version release, we will share with you some useful tips and tricks that may improve your experience working with the current version of FlashMoto Control Panel. We hope these simple steps will help you to make your Flash CMS website even more functional and original.]]> Of course, our dear FlashMoto CMS users, you have already had time to appreciate the numerous advantages of the Flash content management system: its wide opportunities, the convenient almost intuitive interface, the simplicity of each option, etc. FlashMoto developers have tried hard to release the product of such a high functionality.

With the launch of the New Version 1.2 many great new features and improvements have been added to the Control Panel. But we never stop at what has been accomplished: the new version of FlashMoto CMS has almost been finished and is going to be released in the nearest future! So, follow our announcements in order to know about the new improvements that FlashMoto developers have prepared for you.

While you, dear users, are pending of the New Version release, we will share with you some useful tips and tricks that may improve your experience working with the current version of FlashMoto Control Panel. We hope these simple steps will help you to make your Flash CMS website even more functional and original.

1. Setting a favicon for your FlashMoto CMS website

FlashMoto Control Panel gives an opportunity to set a favicon (it can also be named as a website icon, url icon, bookmark icon or shortcut icon) for your Flash CMS website. It is a 16×16, 32×32 or 64×64 pixel square icon that is displayed in the browser’s address bar, next to the page’s title on the browser tab and next to the page’s name in the list of bookmarks.

You may add a favicon for your Flash website through the “Preferences” section in your Control Panel:

In the “Website Settings” sub-section click the “Select” button and choose the image from the media library you have uploaded for the favicon. As soon as the favicon image is uploaded, click the “Save” button.

2. Using the “Preload Items” function

FlashMoto Control Panel gives its users the ability to preload images. The images are loaded on the website loading stage what makes it possible to depict them instantly while browsing a website. For example, if you make a site logo as an image, then it is better to preload it, so that while viewing your web pages the logo would show immediately. You may also preload background image or other images of your gallery to improve user experience.

You can manage the option “Preload Item” through the Media Library:

3. Activating the “Under Construction” mode

The “Under Construction” mode is a special mode that is used in case you need to temporarily hide your website content from visitors (for example, if you haven’t finished your website yet or if it is in maintenance). If the mode is enabled, the “Under Construction” page will appear instead of your website home page.

You may enable the “Under Construction” mode through Preferences -> Under Construction of the Control Panel. It is possible to choose a current theme: “Standard White” or “Standard Black” as well as type your own text that will be displayed on the “Under Construction” page.

And that is what you will have as a result:

4. Applying the “Do not index” and “Do not follow” functions

FlashMoto CMS provides an opportunity for their users to keep their website pages from being indexed and followed by search engines. You may apply the functions “Do not index” and “Do not follow” through the Control Panel for any page of your website, when needed. If you do not want a definite page to be indexed and added to the search results, just select the “Do not index” option. If you do not want page links to be followed by search engines, check the “Do not follow” option.

5. Making the text selectable and copyable

Sometimes when you visit a Flash website, you see that the text content is not selectable, and it is impossible to copy it. It is terribly irritating when you need to take the info from the website. It is strange, but only few Flash website owners take into account this fact. Of course, sometimes website owners just need to protect the content of their websites. But in most cases the website owners just don’t care.

So, you may easily make any text or text object on your website selectable and copyable through the Control Panel. For that you only need to check the box “Make selectable” for the object you would like this option to be applied.

6. Adding a unique font to your FlashMoto CMS website

With your FlashMoto CMS you are not limited with the set of built-in system fonts. In addition to the standard fonts already integrated into the Control Panel, you may easily enrich your Flash CMS website with any font you wish.

In order to make the text on your website unique and memorable, you only need to download it by means of the Fonts Manager which can be found in the “Preferences” section of the Control Panel.

But before downloading a new font to the Control Panel it is necessary to convert it from TTF or OTF to SWF format. You can easily do it by means of the FlashMoto Online Font Creator. This unique solution, which has no analogs, is extremely easy to use.

To open the Creator just click on the “Create font” button of the Fonts Manager. To add more fonts use the “Add fonts” button. Then press the “Create fonts” button to compile the added fonts.

You may also indicate the definite sets of symbols that should be included into the library. This will allow you to reduce the size of the downloaded font.

7. Optimizing images using ALT attribute

Optimizing images is becoming more and more important in SEO (Search Engine Optimization) for websites. The ALT attribute is a critical step that is often overlooked. Use the alt attribute to provide descriptive text for your images. With FlashMoto Control Panel it’s extremely easy:

To add title and alt for an image, you should go to Preferences -> Media Library.

The Media Library will open

To choose an image, just double click on it or click on the icon “image details” below the image. The image with its properties will open in a new window where you will be able to specify its title and alt.

8. Copying the effects of one object and applying them to another

Of course, you have already tried to apply some effects to your website objects within your FlashMoto Control Panel. Do you know that you may easily copy the effects of one object and apply them to another? There is nothing to it!

As an example, let’s copy the effects of the text object “TITLE” and transfer them to the text object “IMAGE”.

As you see, the text object has two effects “Shadow” and “Bevel”. To copy the object’s effects click on the button “Copy”:

After we copied the object’s “TITLE” effects, we select the “IMAGE” object and choose the tab “Effects”. Then click on the button “Paste”:

And that is what we will have as a result – the effects are identical:

There are many other great FlashMoto CMS options and useful tips that haven’t been mentioned in this post. Stay with us – we are going to keep you informed!

]]> http://www.motocms.com/blog/flash-software/useful-tips-and-tricks-on-how-to-improve-your-flash-cms-website/feed/ 2 http://www.motocms.com/blog/flash-software/flash-builder4flash-catalyst-beta-release-sensation-or-disappointment/ http://www.motocms.com/blog/flash-software/flash-builder4flash-catalyst-beta-release-sensation-or-disappointment/#comments Tue, 09 Jun 2009 14:37:34 +0000 Admin http://www.motocms.com/?p=697 On June 1 all Flash developers and designers finally got the so much anticipated Flash Builder 4/Flash Catalyst Beta release. In this post we are going to sort out why new Adobe products are already considered to be a sensation in the Flash world and whether beta versions proved their value in practice. ]]>

On June 1 all Flash developers and designers finally got the so much anticipated Flash Builder 4/Flash Catalyst Beta release. If you missed this event because of some reasons, go to downloads for Flash Catalyst and Flash Builder 4.

In this post we are going to sort out why new Adobe products are already considered to be a sensation in the Flash world and whether beta versions proved their value in practice.

Flash Builder is nothing else than a new name of Flex Builder “Gumbo” release. Though the name change caused mixed feelings among Flash developers, in fact it is intended to separate tools for creating Flash content and frameworks of other parts of the Flash Platform.

Flex Gumbo is enriched with lots of new features and improvements focused around three main areas in mind:

• Designer/developer workflow: now designers and developers can better cooperate as it ties up Gumbo and Adobe’s creative tools, such as Flash professional and flash Catalyst. It’s enabled through the new FXP (FleX Project) format. It’s a way to easily transport Flex projects between Catalyst and Builder. The only thing which is not fully improved is compiler. Adobe team claims to have made lots of optimizations in this direction – well, waiting for final release!

• IDE productivity: The new features in this development section are totally mind blowing. Prior to Builder 4, it was sometimes challenging for developers to connect to different data intensive applications and manage the data within a Flex application. But a brand new approach to using data in Flex changed all that. Data Centric Development tool is simply awesome. Automatic getter/setter generation, event code generation, the new Package Explorer, and support for ASDoc tooltips – all these will save a great bunch of your time as well.

• Architecture changes: to help achieve a smoother workflow between designers and developers, the framework provides a clear separation of the visuals for a component and the rest of its behavior. You set skins by pointing your component to MXML skin files. Drawing rich graphics using MXML tags will make your MXML files quite wordy. Though all is nicely separated so it should still be easy to work with.

New Adobe products were initially announced as powerful Flash development tools with design in mind. And Flash Catalyst as a new professional interaction design tool comes as the main engine for this collaboration.

However, what we see from Flash Catalyst beta is that the bridge between design and code for developers needs some more work over it. So far, it looks like a one-way workflow that allows designers to easily make prototypes of data driven flash website. For now Catalyst appears to be a tool for designers mostly. This is what developers should remember so far. Basically this Flash application enables designers to create the interface using animated working interactions and then hand it off to developers who will implement the database interaction. Amazing thing is that no special ActionScript or Flex skills are required. This is a godsend for non-coding web designers.

Its interface will be familiar to Adobe products users as it offers panels for layers, project library, components and timeline.

Introduction to Adobe Flash Catalyst Beta 1 presented by Mark Szulc from Adobe Australia is available for viewing below.

And here are some features you are able to experience in Beta version of Flash Catalyst:

1. Empowering interactive design: you can add interactivity based on states and events instead of timelines, do interaction design without coding, all your designs will work exactly as you create them, nothing will lose in translation.

2. Fast design: Turn static graphics into dynamic content by selecting objects and specifying actions from menus. Easily move between application states. Converted artwork can be combined into a custom component.

3. Smooth cut-paste workflow between Adobe Creative Suite and Flash Catalyst while maintaining your work.

4. As you create your project in design view, Flash Catalyst is representing the design as well-formed MXML code behind the scenes. In this release you can’t share your project with Flash Builder 4, but this is being worked on for future versions.

5. It comes with a set of simple looking Wireframing controls, it will help create mock-ups which will be more understandable for clients. With this controls instead of standard Flex ones, a client will easier understand that they are seeing just a prototype, not the finished application.

Flash Catalyst still has a few raw sides which we expect will be fixed in the future releases:

- designers will need to learn how to fit their Illustrator and Photoshop design comps to Catalyst, it’s not so obvious at the beginning.

- another kind of timeline which is provided by Catalyst also needs some examination.

- developers can’t switch from Design to Code mode and edit projects there. Of course, items can be added via the Catalyst UI, but doing it directly in the code would be much more efficient.

Despite of everything, Flash Catalyst in tandem with Flash Builder 4 are going to make life so much easier! These products arouse super lively interest in Flash developers and designers. As a result, you can already download free themes which can be used in Flash Catalyst and Flash Builder 4. Of course, Beta version reveals some rough edges with ability to use flash builder, but the number of new empowering features is quite impressive. This is just a first take of a complex task. And we have no doubts that this revolutionary software focused on interaction and collaboration enables to increase creative productivity and has all chances to bring Flash development on the new level.

We are closely watching all Adobe events concerning Flash products to deliver first-hand information to you . Check out FlashMoto Flash CMS blog not to miss a thing!

I’d like to share with you an inspiring software for 3D developers. Unity3D new reality, the future of online game industry!
You could ask what’s so AWESOME in Unity3D? Let me explain or simply show you.
First of all you should install Unity3D player which is only 3Mb, after that you could play unity3D projects. Now we could check the samples.

Dungeonz – Control the Green Ogre around the maze. Simple but really cool animation. What I really like is load time!

Hordes of Orcs – the best online browser Tower Defense game based on Warcraft World. TERRIFIC!

Turret Wars – browser online multilayer game from Sector 3 Games. Choose from FOUR different gun turret types, each with slightly different weapon and armor or projectile features!

Avert Fate – fantastic 3D shooter. Install is so small that you would be amazed of the graphic.

Shadows Demo – web browse preview or the light and dark side of Unity 3D!

Tropical Paradase – Feel the sun on your skin – right inside your browser. Using streaming, this huge scene loads almost instantly.

Big Brains – nice logic game with awesome 3D graphic. If you have a kid give them a try.

I hope you’ve enjoyed Unity3D with me. Because it’s really worth your look.
Some cool news for an iPhone owners that you could play all these games at your iPhone.

“This downturn may also present some extraordinary opportunities for companies that have the cash to take advantage of it,” Jobs said.

In the past, the vast majority of Apple acquisitions have been software-related so we could expect it would happen again.

What will be the next Steve’s creation?

The victim is Adobe. I know that everyone is talking about some iPhone development companies but I trust experts. Earlier this year it was announced that Adobe begins work on Flash player for iPhone. This information was announced at Adobe Town Hall press-conference.
You may know that iPhone is the last smartphone that can’t play Flash content. Seems this problem will be solved in the nearest future because Apple is the third-largest mobile supplier in the word.

Though, there are some questions: What is the Apple’s next move? Will Steve Jobs buy a ready-made solution for his “baby” or the entire company?

So what we have now is: Apple+MacOS is one of the best platforms for developers (SUPERfast! 8-)), the best video editing software – Final Cut PRO, Unity 3D (only on Mac).
What should we expect in the nearest future?

Would Mac be the only choice for a developer?

Anyway I won’t take you long if you are interested in a 360|Flex reviews I suggest you to read this one:
Dave of Buzzword fame (2007 CON)
Doug McCune (2007 CON)
Our boy PolyGeek (2007 CON)
Straight to the point!

Here is some fantastic presentations that were contributed to Flex community by world leaders in Flex development.
1. Learning Flex from Scratch (LFFS) by Flater & Sheridan – presentation
description: Adam Flater & Scott Sheridan: The Learning Flex from Scratch series on Inside RIA focused on a non-programmers journey into the world of Flex.

2. Using Item Renderers in Flex by Mary Mcdonald – presentation
description: Discusses using item renderers and item editors in Flex to change the look of your data being displayed. This session has plenty of examples!

3. Creating Flex Components by Jeffry Houser – presentation
description: An introductory presentation on creating Flex Components.

4. Diving Deep w/ the Flex Component Lifecycle by Owen & Umbaug – presentation
description: RJ Owen & Brad Umbaugh: In this session, Senior Developers RJ Owen and Brad Umbaugh will explore in depth exactly what happens every time a component is created and rendered in Flex.

5. Diving in the Data Binding Waters with Michael Labriola – presentation
description: Just about everyone who uses Flex uses data binding. Now come learn what you are actually doing when you add those curly brackets to your application.

6. E4X by Marc Bir – presentation
description: What is E4X? How do I use it? Why would I use it? When should I use it?

7. Creating Reusable Components by Ben Clinkinbeard – presentation
description: This session will talk about what to keep in mind when creating components that go beyond a single use.

8. Flex and Acrobat by Joel Geraci – presentation
description: This session will make you rethink everything you know (or think you know) about PDF.

9. Data Visualization and Dashboards by Thomas Gonzalez – presentation
description: This session discusses approaches and techniques to implementing Data Visualization and Dashboards within Flex 3.

10. High Definition Video & Flex Hands On by Christopher Keeler – presentation
description: This session covers the tools and workflows you need to produce and stream great HD video in the Flash player and Flex.

In this tutorial we’ll try to build a Flash Gallery using Papervison 3D. First of all I’d like to mention that the main aim of this article is passing through all stages of flash application development. At the same time we would like to discuss all contradictory questions one may face while working with Papervision 3D. More likely this tutorial will consist of several parts. Together with Papervision 3D library we’ll use Tweener for a better smooth animation and BulkLoader for a better image preloading.

You’ll need this archive in order to through this tutorial. This archive includes all libraries and applications which are necessary for the final swf creation. Flash CS3 or Flex Builder to be exact. If you know what Flex SDK is and you work with its compiler this archive is really useful for you. There is a lot of information regarding Papervision 3d on the net. You can easily find tutorials which teach how to download and install Papervision 3d and other libraries, how to adjust classpaths, and etc. It’s beside our purpose. Simply download this archive. Note you can use its structure and libraries like a start point for the other projects.

Tutorial difficulty level: Basic-Intermediate. We suppose even those of you who are the beginners in Actionscript 3.0 will do this tutorial with awesome results.

If you still wish to download and install Papervision 3d by yourself these links may be useful for you: Papervision 3D Training Videos and PV3d 2.0 Tutorial List. Having followed these links you can find a lot of interesting tutorials on this application and learn the way it works.

One more thing to mention: in this tutorial we deal with the second version of Papervision 3d. Note this version of Papervision 3d hasn’t been released yet.

1. Initial configuration

So, at the very beginning you should download papervision gallery source the archive which includes an initial project. Having unpacked the archive you should see the next file structure:

src – all necessary “as” files such as Papervision3d, Tweener and BulkLoader will be stored here. These are the libraries we’ll use in order to create the gallery. All the files we create will be added here as well. Gallery Project is a basic class which is used as Document Class in Flash CS3 and it’s being compiled while creating swf file. So I’ve put it into root. The other files we create for this project will be stored here com/flashmoto/gallery.

fla – this folder will include fla files. It already includes GalleryProject.fla with changed settings: the folder ../src is added to classpath, Document Class is GalleryProject.as

bin – the application called GalleryProject.swf is stored here. All xml files and images that make an application work are kept here as well. Saving your time I’ve already created an xml file with images data. All images are stores in images folder.

For the beginning let’s start compiling the application. As I’ve already mentioned there are two ways of compilation: using Flash CS3 and on your own (means using Flex SDK compiler). As a rule experienced users apply Flex SDK compiler while creating Flash movies. They definitely know what one should do with the source code in order to get a working swf. So I’ll describe how you can compile movie in Flash CS3. To do so I should run GalleryProject.fla from the fla folder and compile the movie having clicked Ctrl+Enter. In the flash output panel you should see something like this – Welcome to our 3D gallery!

2. Problem Description

Let’s build a gallery by following our step-by -step guide. First of all we should decide what to do. So our main tasks are:

- Application Initialization
- Application Initialization
- Loading XML Data
- Loading Images
- 3D Engine Initialization
- 3D Objects Creation
- Adding Objects to the Stage
- Adding Interactivity

3. Application Initialization

Let’s open file named src/GalleryProject.as. If you’ve noticed it is set as the Document Class in publish settings of the fla file. So the code which is inside GalleryProject functon (constructor) runs after the application has been launched. As for the start let’s set some stage properties – align and scaleMode.

Now we should create another class that will be responsible for gallery creation. It’s the right approach if we want to use it for any of our future applications. Considering the fact that it’ll be an ordinary Sprite we can add it anywhere using addChild() method. We can also change different parameters for its positioning.

Let’s create class called Gallery.as in the src/com/flashmoto/gallery folder. At first it will look this way.

And we can now add the gallery to our application. To accomplish this we should add some lines to our main file called GalleryProject.as:

All changes are marked with bold type. I always dislike when tutorials which include source code write new lines or code changes separately from the whole class which requires these changes.) It’s always confusing and time taking process to deal with such code. I prefer using more traffic but seeing how the source code receives new functions and expressions with every step I make.

In order to use Gallery class we need to import it first. If you want to make sure that the code is working and the gallery has been really added you can write trace (‘This is your gallery’) into the gallery class constructor and you’ll see this message in the flash output panel.
Ok, let’s go to the next stage.

4. Loading XML Data

Now we should get information regarding images and where they should be taken from for download. Of course there is a simpler way to define them as constants directly in our code. Though, this way isn’t very flexible. So all information will be stored in XML file. (If you want to read more about this format you should read Wiki! ). At the fist stage all we need is an image file path. So XML file will look like this. (Finished file can be found here: xml/gallery.xml)

For xml file and images loading I’ll use BulkLoader. Let’s add a few function called loadImagesData() which will be called from the Gallery constructor. In this function we’ll initialize a new loader. Having added our xml file to this loader we’ll start to load images and listen for the loader’s progress, complete and error events. After you make the changes the class will look like this. As you’ve probably noticed a lot of new features and functions has appeared. I did my best to write the comprehensive comments for each feature and function, and in front of every line. So I don’t think it’s necessary to describe them in a more detailed way. Just have a look at the code we’ve created.

5. Loading Images

Now we have all image files paths. So we can load images. We have two variants to load images – loading all the images and then adding them to the stage or making the user tired showing a procedure of image load. For the beginning we’ll follow an easier way and choose the first variant. We’ll add several lines to the methods we already have. Now we should parse loaded xml, choose image file paths and upload the images. Loading status information can be received via onGalleryLoadingProgress method. At this very stage I’ve simply traced this information to the output panel.

So we are close to Papervision3d. Let’s start…

6. 3D Engine Initialization

In order to use Papervision3d while moving objects in 3d space we should initialize 3D engine first and create all necessary flash components such as viewport, camera, scene and renderer. Let’s write a new function called init3DEngine(). We’ll write a new function named init3DEngine() which will be called in onGalleryLoaded() method after the download has been finished.

As you can see some new features including two constants such as VIEWPORT_WIDTH and VIEWPORT_HEIGHT have been added. These constants define render area. Seems it would be better to define them while creating Gallery object. I think we’ll correct it a bit later. The case is that at this stage we have the other tasks. The same relates to other engine configurations such as camera zoom and focus, viewport scaling and interactivity. It would be better to change them dynamically from an external text file. I think we’ll do it for sure.

7. 3D Objects Creation

Now we should create objects in order to add them to the stage. Of course we could add them at once. It would make the code simpler but we’ll not go this way. One should understand that the application gains its flexibility thanks to dynamic object placement. So I recommend separating these two actions from the very beginning. At first we’ll create objects and then set their positions. For this we should update our class a little bit:

As you see a method called createGalleryDisplayObject() creates a 3D object and this objects isn’t for sure a Plane. It can be any object. So in a case we wish to draw spheres instead of planes we’ll basically have to rewrite this method.

8. Adding Objects to the Stage

As I’ve already mentioned I comment the code without explaining what should be done and how to do it because our code already goes with comprehensive comments. Almost every code line has its own description. So read the code attentively and comment this tutorial in a case you have any questions. I’ll be more than happy to answer your questions.

So we have a collection of 3D objects which can be added to the stage and placed in a way we wish. In the future I plan to update this example in order to develop several image placement strategies. So we could dynamically change the gallery appearance. At the first stage you can see the first variant: I’ve placed images one by one. Let’s add new method called addGalleryImages()

9. Adding Interactivity

The last thing that should be added is interactivity. Seems it should be described in detail.

The first thing you should do to see the objects that have been added to the stage is rendering the stage. In Papervision3d you can do it with this code

as you see all 3D engine elements are activated in this code. Having executed this code you’ll see what is added to your stage. However you should remember one thing – without calling this method you won’t see such changes as:

- changing object location or object properties;
- changing camera position or rotation;
- refreshing something.

Basically it’s called on every onEnterFrame event, but it’s sometimes difficult for browser to accomplish this. Especially if you have a lot of objects and refining or you need fast rendering and good quality graphics.) So Flash developers find various ways to optimize the application. Having analyzed different requirements they define if a stage should be rendered at the moment or not. If to speak about our example the stage should be rendered every moment because our main aim is camera and mouse interaction. So we should continually refresh the image. In the future I’ll add a requirement to avoid such rendering. For instance in a case we’ve clicked the first image and it has been enlarged.

Papervision uses InteractiveScene3DEvent in order to respond to such mouse events as hitting, pointing and tracking. Note if you want these events work the object material and viewpoint should be interactive.

Material has an interactive feature to accomplish this

Viewport has this feature as well. We set its value while creating – the 4th parameter = true

Of course adding interactivity isn’t limited to listening for the mouse events only. It also includes response to these events. This is the way logic is added to the code. Note logic is an inseparable part of the application.

It’s time for the most interesting part which can be difficult for an ordinary animator. So this part is usually done by a Flash programmer. Considering the fact that our tutorial relates to Papervision 3d I suggest you to explore application logic by yourself. Note all application logic is described in event listener handlers such as onPlanePress(), onPlaneOver(), onPlaneOut(). Camera moving logic is described in render() method.

Here is the final code. Let’s try to compile it. You should succeed!

Please let me know if you have any questions regarding this tutorial. I’ll be pleased to answer them.

10. Conclusion

So we’ve finished a first pass through creating an interactive Papervision Flash Gallery. If you are the beginner I advise you to download the source project and follow it step-by-step. Though, in a case you are an experienced user you can download the complete sources for the gallery.

This tutorial we’ll be of a great help for us in the future. It’ll help us explore the other 3D engine features. Also, I’d like to explore some ways to optimize Papervison3d applications and make them work faster. I plan to learn different ways of image positioning, navigation, dynamic gallery appearance and logic changing, creating reflections, mouse wheel navigation, and etc. New tutorials are waiting for you in the nearest future.