Create websites using Toufee flash movie maker

This is an Archived Article

This is an archived Blog Article referencing an earlier version of Toufee. These articles are maintained for the sake of posterierity. Information presented on these pages mat not apply to this new version of Toufee.

Hi Its been quite a while since I wrote for the Blog. While Toufee V2.0 is getting ready for launch, there is so much that you can do with v1 (the current Toufee that you see) - so in my next few posts, I'll showcase Toufee flash video editor's less known features that can be extended to come up with useful applications. In this post, I'll show you how you can use Toufee flash movie maker to create a simple website - yes, a website!. Before we go into the details of how its done, have a look at the website that I did using Toufee flash movie maker. http://flash-movies.toufee.com/mov/561187793785 I've used this example throughout this post for explaining the process. 1. First, let' start by creating a new flash movie using Toufee. Login to your account, and select Create A New Movie. This brings up the Add a New Project dialog box. If you notice closely, we've updated the options - Movie Size and Background Color. Since we've planned a website, I'll choose 640x480, but you can also go with 800x600 if you want a bigger page. From the Movie Size dropdown list, select Custom and enter the Width and Height values. 2. Creating a ButtonThe Toufee Movie Editor stage opens up with the first frame. In a typical website, we would have the navigation buttons on the left or top. Let's have them on the left for our flash movie. Now select Add Button button from the top. Open its properties window as shown in the above image. Enter the button text as Home and set the options for the button. Use the On Focus Body Color option if you want the button to change color when the mouse is moved over it (similar to Hover effect that you get in HTML) 3. Position the button so that its in left and towards the upper half. Repeat the same steps to create additional buttons like About Me, Photos, Guestbook, Contact - as such in a real website. Once you have your initial frame would look something like the one shown in the picture below 1st Frame If you notice the above image, I've added the Note control for the paragraph text. I've also used the Note control to create the left gray bar and the top banner to mimic a website layout effect. Once you have a layout similar to the one above, you can simply copy the frame and paste it to create new frames for the rest of the pages (About, Photos and Contact). 4. Advanced Frame PropertiesOnce the pages (i.e. frames) are ready, you have to link the frames. i.e. When a user clicks on About button, they should be taken to the About frame. For this, you need to do the following. Right click a frame, and from the popup menu select Edit Advanced Frame Properties. Select Advanced options and then select the radio button that says "When user clicks on a button...". Since we are trying to create a webpage effect, this option ensures our frame unloads only when a users clicks a button to go to a different frame (i.e. page). Repeat this step for all the frames in your flash movie. 5. Hyperlink button to FrameNow for the actual hype- linking process. In the first frame, select About button and open its Properties. In the Properties window, you'll find something Move to Frame dropdown under Button Action. From the dropdown list, Select the frame to be loaded when user clicks About button. Click Update to save the changes. Repeat the same process for remaining buttons in the frame. Also repeat this for all the buttons in the remaining frames. I've just taken a basic layout and some simple buttons to create the website effect. You can do more advanced effects and create a whole better website completely using Toufee flash movie editor. Hope this is useful. Let me know should you have any queries. Ganesh

  • 11 years ago
  • 3540 Views

Contact Us