FlashMoto Introductory Tutorial

Now when FlashMoto CMS pack (CMS + template) is released and there is so little time left till standalone CMS launches,  you can experience the real simplicity and usability of Flash website management. Lots of improvements and fixes were done since Beta version has been released and today we’re going to look under the hood of FlashMoto CMS and provide you with a guide to the workflow. Reading this tutorial you can learn how to handle system features, tools, apply effects to the objects, create new pages and content elements etc.

As you already know FlashMoto enables both to edit any active Flash website and create a site from scratch. For this article we used a default FlashMoto template to give you an idea of how our Flash CMS works. Using template as a base we can build a full-functional dynamic Flash website by adding new pages and editing default content elements.

Before start editing your FlashMoto website you should install your copy of FlashMoto CMS to your hosting. This Installation Manual with step by step instructions helps you install your FlashMoto website easily.

1. Choosing “Content Management Wizard” section in start menu, we can create a website from template using step-by-step guide.

2.  Content Management Wizard offers you a few options of website editing and leads you to the necessary admin area. We chose the page “News and Events” of existing template to be the ground of our editing process. To access this page, go to Content Management Wizard > Edit Website Content > Edit pages > News&Events Page (here you can also choose “Add new page” and create both page with sample content and blank page) .

You can quickly edit page name, title and URL right in the sidebar (see the screenshot above) and click “Edit Page” to put the page on the scene and make more changes. In our example, we changed page name and title to “Latest News”.

Page is now opened in the main editing area of the CMS. Page settings can be edited within element properties editor placed in the right sidebar. The editor activates when you click on any content element of the website.

3. Now let’s work with some content elements. What about changing website logo? There’s nothing easier! Click on the text area to select the logo. The properties of the text object will appear at the right side bar. You can easily change text size, color and alignment using WYSIWYG editor. You can also rotate it and apply various effects, such as Shadow, Blur, Bevel etc. We changed the color of the loge text from to yellow and inserted a new text element using “Text” button in the left tool bar. We need a new element to be able to rotate one of the letters of the word “Certex” separately from others.

To rotate an object, hover the cursor near the selection until you see a circled arrow (highlighted in red in the picture below), then press the arrow and rotate. In tab “Properties” of the Text Object Settings side bar we set orange color and the upper case for the new text element. Switching to the “Effects” tab, we apply “Glow” effect to this item.

4. We are currently staying at “Latest News” page, so you might wonder whether changed logo will be displayed on other pages. It will, if you select “On all website” in the field “Visiblity” placed on the upper tool panel.

Don’t forget to press “Save current section” each time you make changes to save all updates. See how updated website looks like clicking on “Preview website” button.

5. Page background can be easily modified as any other content element of the website. Just click on the page’s empty space and set necessary properties in the right sidebar. You can even enable click actions for the page background and link it to any web page, pop-up or external URL.

6. Now let’s experiment with website menu. Simply select menu area on any page where it’s visible (in our case this is “Latest News”). In the right sidebar you can set menu properties and add some effects. To edit menu item or add new one, click on “Edit module” button down the sidebar or double click on the menu area on the scene. In the opened window (screenshot below) you can set menu item name and color, and also link it to certain page. To change item’s position in the menu list, simply drag it to necessary place.

So, we slightly changed menu items’ colors and applied “Bevel” effect to the website menu using “Effects” tab in the right sidebar.

7. We are modifying news page, so what about adding some news? Double click on news area displayed on the scene. In the opened window, you can edit existing news items, add new ones and remove elements. You can set news title, icon and descriptions, with usable text editor you can simply add news item and modify its settings.

Since we’ve change page background color, it will be reasonable to make scrollbar match it. Pick the colors you want using appropriate fields in object’s properties tab.

8. Let’s now change a picture in the “Upcoming event” section. Click on the image to browse available properties options in the right sidebar. Clicking on the browse button of the “Image” field, you enter FlashMoto Media Library where you can upload and story different media files. Add a new image by pressing “Upload media” button in the upper left corner of the window. Or select one from existing collection and click “Select” button down the page. New image will replace default one. You can apply effects to it and make it clickable. Press “Save current section” to save updates.

Here is our modified news page:

9. Our Flash CMS gives a possibility to change website background as well. It can be a photo or wallpaper or any other image that will make you Flash website more personal and unique.

Press “Image” button in the left tool menu and you will be switched to the media library. Click on “Upload Media” and add any image you like. Click “Select” and then drop the image to the necessary position on the page. To bring it behind all existing page layouts, press “Send to Back” button on the admin tool panel. Website background should appear on all website pages and pop-ups, so set “On All Website” in filed “Visibility”. You can change image height and width using the right sidebar.

Here is the resulting website background:

As you see, FlashMoto CMS allows you to edit any content element practically in one click. Right sidebar reveals object’s properties settings, while using the upper admin tool panel you can manage the overall page layout. Left tool menu helps quickly add content elements and modules.

10. Back to website editing, let’s link some text on our “Latest News” page with single “read more” page. To do this, we need to create a new page first.

Click on “Add New Page” button on the admin panel. Choose the type of section you want to create – page or pop-up. We will create a new page for this example. Then choose page type you would like to create – blank one or default page with sample content. As we are using default template as a base for our website, let’s pick default page. It will look like this:

Then set page name, title and parent page properties. Our page name is “Flash Catalyst Beta Release”.

Let’s put our news into a rich content block which will allows us to add a scrollbar and with this, avoid page layout settings editing. Go down the left tool menu, press “Module” and select “Rich Content Block” in the drop-down menu. Then click on the scene to insert the module. As always, properties of the object will be displayed in the right sidebar. Just double click on rich content block area to enter its editing mode and fill it with text and other objects.

12. Now we need to link it with some text on the “Latest News” page. Select “Latest News” page in the “Current selection” category on the admin panel. All pages and popu-ups in this box have thumbnails, which makes it even easier to find the necessary one.

Select the text that will be an anchor for our link. Press “Insert link” button in the right sidebar. Set necessary parameters in the opened links editor – choose the page the text will be linked to. You can set the color for the link as well. Now clicking on text “Flash Builder4/Flash Catalyst Beta Release” in the “Upcoming event” section, we will go to the page “Flash Catalyst Beta Release”.

13. Another great capability of FlashMoto CMS is Font Manager. Use our Online Font Creator to add an unlimited amount of fonts to your website. You can also make your website multilingual and with this, make it accessible for greater number of visitors from all over the world.

For many years Flash  platform was blamed in being not SEO-friendly. With FlashMoto you will see that Flash website with fine architecture and deep linking structure can be well indexed by all major search engines. Set website meta data pressing “Website Preferences” button on the admin panel. You can even set up Google analytics for your website and manage your project more effectively.

We’re absolutely sure you will be excited with all advantages FlashMoto gives right after the first log in. It’s developed the way to be your magic wand which will help implement your most daring ideas. In order to provide you with the most comfortable Flash website management experience and easy workflow, we are developing a huge knowledge base which will contain tutorials, useful tips and hints, FAQ section and other educational documentary. So keep abreast of FlashMoto Project News – read our blog and subscribe to RSS.