Archive for the ‘Toufee Tips’ Category

Flash Builder: Working with Layers in your flash movie

Tuesday, January 31st, 2012

In this post, we’ll discuss about the concept of layers and how you could utilize layers to arrange the image and text items the way you want in your flash movie.  One may think Layers as stacks (or a pile of books), that lets you customize (arrange), flash movie items such as text and images. An item in the topmost layer has full visibility or is shown completely. Items that are lower in the Layer ordering may have other flash items displayed (partially or fully) over it.

Why need Layers?

Let’s take a simple example where you want to display a text item directly over an image in your flash movie. If you added the text item first and then the image, then in the normal case, the image would be placed directly over the image causing the text to be not viewable. To overcome the problem, you’d have to add the image first and then add the text item to your flash movie. This approach however may not be feasible when you have to work with a number of text or image items. This is where Layers are useful. With the Layers concept, you may re-arrange the layer order/stack order of the items such that one is shown over the other or vice-versa.

Where is the Layers Option in Flash Builder?

If you open the flash movie and go to the Timeline bar at the bottom you will notice that the images and text item labels will be listed. This is actually the ordering of the layers of the flash movie. To clarify, each item (text, button, image or video) that you place in your flash movie is created in its own layer. In the Timing bar where you see all the items listed vertically, you will notice a big horizontal bar over which you will find each item label (such as “Text1″ or “Image4″, or “Button1″).

This horizontal bar represents the layer, one for each item. To move the item’s layer, simply click on the empty area in the big horizontal bar of each item. Do not click over the item label or inside the item label area as this select the item…one has to click outside of the Item label text. Once you click it, the layer will be selected and you could then move the item layer up or down by drag it to move up or move down. So when you have images that take up the entire flash movie area and you wish to have text items show over or on the image, then you move the Text Items higher up the order in the Timeline and move down the image items below the text items.

Share

Working with Toufee Flash Movies: Points to Ponder

Wednesday, January 4th, 2012

First of all, wish all our Toufee customers and readers of this blog a very Happy and a Prosperous New Year 2012. As I start to think about the first blog entry for the new year, I decided to cover aspects of the Toufee Flash Builder as well as the Flash Apps that are often overlooked. The items discussed below are those that are frequently asked at the Support Desk but do not have any documentation elsewhere on the site. I hope this blog should add more clarity to customers for now.

Watch out for the filename

When saving your flash movie project, make sure you don’t use an existing project name to save a new project. Toufee simply overwrites any existing project file that exists by the same name without any warning.  This applies to Flash Builder-type projects as well as any of the other Flash Apps. This does look awkward and we’re fully aware of this glitch. The technical team is working on putting a warning note very soon.

Popup Blocker message keeps popping up

If you happen to use hyperlinks in your flash movie, then you may noticed that every time that you click on the link, Toufee opens a popup blocker warning window. This happens even if you had turned off the popup blocker setting for your browser. Weird? Well Toufee actually displays this warning regardless of your popup blocker setting, i.e. Toufee displays the warning all times. However, many customers have reported that it doesn’t look any good on their flash movies. We’re coming up with a fix to this very soon.

Clicked the SWF or YouTube download option but no effect

When using the SWF download option, you may have noticed that clicking the SWF icon in the Publish Project window results in nothing happening…you don’t seem to get the SWF download prompt. The same may hold true when using the YouTube download option…absolutely nothing. The gotcha here is that Toufee happens to open a new browser window (that initiates the SWF file download or YouTube video queued message) and this new window gets opened in the background, i.e. you may notice this visually when you have multiple browser tabs or windows opens. So the next time this happens, please do check all open browser windows for the SWF download prompt or the Video Queued message.

No option to delete Image, Audio or Video?

This might be a bomber. The reason that this option was turned off is due to the fact that when you add an image or an audio to your flash movie, Toufee only maintains a reference to the uploaded content and does not embed the image or audio unless to export the flash movie as a SWF file. When we did have the option to delete the uploaded content, users started to delete images that were still in use with other projects and some users deleted the image after adding it to a project thinking it would be saved along with the project file. This resulted in many customer movies going and we had to temporarily turn off the delete option to avoid data loss.

Share

How to download your Toufee flash movie as SWF

Sunday, September 27th, 2009

In this article, I’ll quickly walk through the steps involved in downloading your Toufee flash movie as a standalone SWF flash file. Though the process is straightforward, let me show you the various ways you could download the flash movie as a SWF file. Let’s begin right away.

SWF download process

  1. To export your flash movie, select Publish -> Export to Flash (Standalone SWF) option from the main Toufee menu
  2. The Downloading SWF file dialog box should open.This will be followed by an Open dialog box that should prompt you the location to save the SWF file.  Browse the directory in your computer and click Save. That should complete the download process. However, if the Open dialog box does not appear then proceed to step 3.

  3. If for any reason you do not get the Open dialog box, click Save As button found in the Downloading SWF file dialog window (shown above). This will initiate the download of the SWF file as a zip file.
  4. You would now need to uncompress or unzip the zipped file. For this, you would require a free utility such as WinZip, WinRAR etc. If you have Windows XP or Vista, then there is a built-in feature that will extract zip files simply by right-clicking on it
  5. Upon successfully extracting the zip file, you should see the SWF file in the same folder (if you extracted by selecting Extract Here option) or in the target folder that you extracted the flash movie SWF file.

Manual download of Toufee Flash Movie SWF file

If clicking the Save As in step 3 did not intiate download of the zipped file, then you could follow the manual approach to saving the SWF file of your flash movie. Here is how:

  1. In the Downloading SWF File dialog window, click on Copy URL!. This will copy the URL of the SWF file in memory.
  2. Open Firefox, and enter the URL in the browser address bar and press Enter key. This will then open the SWF file of the flash movie in the browser window. Select Save Page As option to save the SWF file.

If using Internet Explorer, then you would have to do the following. After pasting the URL in Internet Explorer’s address bar, select Tools -> Internet Options

Under Temporary Internet files section, click on Settings button

In the Settings dialog box, click on View Files button

The Temporary Internet Files folder on your local computer should open. Search for the SWF file, right-click it and select Copy

Paste the SWF file into any folder and you now have the SWF file of your Toufee flash movie ready. You can publish the SWF file to your webpage. For the HTML code to use embed the flash movie SWF file in your webpage refer the following KB article:

http://www.toufee.com/support/index.php?page=kb_view&id=69

Hope this was useful. See you all again in my next post.

Share

Flash Movie Tip: Add “Paused at Start” option to Toufee flash movie SWF files

Thursday, May 7th, 2009

If you had used the Paused at Start option for your Toufee flash movies, and if you had tried to download this flash movie as SWF file to your PC and play it back, you’ll notice that the “Paused at Start” option does not work anymore – the SWF file of your flash movie would just start to play. Why is it so? This is by design. The reason being when you download a flash movie as SWF, then most often then not you would want to have the SWF play automatically. That makes perfect sense. But there are instances where you might want the “Paused at Start” option to stay with your SWF flash movies as well. Here is how you do it:

1) We’ll first create a copy of the original flash movie. We’ll be working with this newly created copy (and not the original project…nope!). Follow the below KB article to create a copy of a Toufee flash movie project:

http://www.toufee.com/support/index.php?page=kb_view&id=87

If you would like to rename the newly created movie project, then refer the following link:

http://www.toufee.com/support/index.php?page=kb_view&id=88

2) Alright, looks we’re ready to roll. Open the newly created flash movie project in Toufee. Before doing anything else, turn off Random Effects. Refer the following article for instructions:

http://www.toufee.com/support/index.php?page=kb_view&id=68

Toufee usually adds random flash effects to new flash movie objects. As we’ll be adding a flash button that will act as the Play button that will start the movie play, we do not want any kind of effect added to it by default.

3) Create a new frame by selecting Frames -> Add New Frame option. A blank frame would be added but we’ll need to move this frame to the beginning so that it is the first frame of the flash movie. To do this, select Frames -> Change Frame Order. Select the Frame that was newly added. Usually frames are numbered from Frame1 to FrameN, so most of the time, the newly created frame usually has the highest frame number. Select the appropriate frame and click Move Up. Do this until the new frame moves to the top of the list

4) Now here is an important step. What we’re now gonna do is mimic the original first frame of the flash movie. If you are using a common background for your flash movie, then the blank frame that you’ve just added will also take that background and no more action is required so you can directly jump to the next step. However, in scenarios where you are using flash movies where every individual frame is distinct (e.g. flash movie photo slides), then you need to create an exact replica of your second frame (the original first frame). To do this, select the second frame in your flash movie and select Publish -> Export Frame as JPG option. This will create a JPEG image of your frame which you can then upload to your Toufee account and add to the first frame thereby creating an exact replica.

5) Alright, what next. Two important things remain. We need to set the timing of the first frame to 1 second (yes no more than a second). To do this select the first frame, switch to the Advanced tab on the Left Panel, expand Timing (Experts Only) option. In the Frame Length field, enter 1 as the value. Also, make sure you enable the On Frame End Pause Movie option. This option is your workaround so don’t forget to enable it. Enabling this will cause your flash movie to Pause as soon as soon as the frame loads since we set the timing of the first frame to 1 second thereby creating a “Paused at Start” option effect.

6) Are we done? Nope, not yet. We paused the movie alright but show we not add the option to resume the movie. Well you could argue that you can use the Play control (just beneath your flash movie) to resume playback but generally, people do not prefer the flash movie player controls on the SWF so you wouldn’t find the Play button 9 out of 10 times. How do resume the playback then? Add a flash button and create a link to the second frame. Click on the Buttons option on the right panel, choose a flash button (I would prefer to choose one under the Glass category. We’ve found the “Glass” buttons go down nicely with most flash movies), and add it to the first frame. Double-click the button to change the text (to say “Play” or “Start” or whatever you feel like). While the button is still selected, switch to the Advanced tab on the Left Panel, expand Link To – Website / Email option. In the Link To dropdown list, select Frame as the value. in the Frame # field dropdown list, select the corresponding frame number of the second frame.

That is it. You can now download your flash movie as an SWF file and you would notice your SWF flash movie will pause when loaded. The flash movie automatically resumes when you click on the button in the first frame. Hope this was helpful. See you all in my next post.

Share

How to publish Toufee flash movies on SSL webpages (HTTPS)

Saturday, May 2nd, 2009

Not many customers might know that Toufee support publishing of its flash movies on websites that use SSL. When you try to publish a Toufee movie HTML code, you might encounter the following warning message:

Though clicking Yes would still allow the browser to stream the flash movie over HTTP from our servers, if security is paramount and you don’t wish to compromise, then worry not as you’ll see below you can turn your Toufee flash movie to be securely streamed by simply changing a few lines in the flash movie HTML code that you get from the Publish window. However please note that this feature is only available to Business customers.

Let’s look at an example of a normal flash movie code below:

<img style=”visibility:hidden;width:0px;height:0px;” border=0 width=0 height=0 src=”http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNDEyNDYxNzk5NjgmcHQ9MTI*MTI*NjE4MzI4MSZwPTEyMzcxJmQ9Jmc9MiZ*PSZvPTU3NjNkYjFiYjAzMDQ4MmJhY2VmOTdjMThhMGY5ODI3Jm9mPTA=.gif” />
<p style=”visibility:visible;”>
<object type=”application/x-shockwave-flash” data=”http://pro.toufee.com/cgi2/player.pl?userID=56&projID=promobanner” height=”280″ width=”200″ style=”width:200px;height:280px”>
<param name=”movie” value=”http://pro.toufee.com/cgi2/player.pl?userID=56&projID=promobanner” />
<param name=”quality” value=”high” />
<param name=”scale” value=”noscale” />
<param name=”salign” value=”lt” />
<param name=”wmode” value=”transparent”/>
<param name=”flashvars” value=”userID=56&projID=promobanner”/>
</object>
</p>

We’ll be doing a couple of changes to convert the above code so that it supports SSL hosting. Here is how:

  1. Remove the <IMG> tag from the code.
  2. Replace all occurrences of HTTP with HTTPS
    Replace the line http://pro. with https://www. Please note that you will have to do this at two places in the code

So the new code would be:

<p style=”visibility:visible;”>
<object type=”application/x-shockwave-flash” data=”https://www.toufee.com/cgi2/player.pl?userID=56&projID=promobanner” height=”280″ width=”200″ style=”width:200px;height:280px”>
<param name=”movie” value=”https://www.toufee.com/cgi2/player.pl?userID=56&projID=promobanner” />
<param name=”quality” value=”high” />
<param name=”scale” value=”noscale” />
<param name=”salign” value=”lt” />
<param name=”wmode” value=”transparent”/>
<param name=”flashvars” value=”userID=56&projID=promobanner”/>
</object>
</p>

If you are planning to host the Toufee flash movie SWF file on your own SSL website, then you don’t have to follow this process. The above steps are required only if you use the HTML code generated from Toufee in which case the flash movie that is streamed by default over HTTP from Toufee’s servers.

Share

Flash Movie Maker Update: Open hyperlinks in the same window

Friday, April 10th, 2009

It’s here finally…we’ve updated the Toufee flash movie maker so that you can set hyperlinks to open in the same window as the flash movie. The default behaviour of hyperlinks however will still remain – they open in a new browser window. However, you now have the option to change this to open hyperlinks in the same window.

Let me explain this with a test flash movie of mine (I know you’re complaining, its the same old promobanner flash movie that you might have been used to by now:) ). So here is a simple flash movie with a hyperlink button on it (Learn More). As is the default behavior, Toufee will open this hyperlink in a new window.

We’ll be now adding a few lines of code to the HTML code that Toufee generates so that hyperlinks open in the same window. The original HTML code of this movie is this:

<p style=”visibility:visible;”><object type=”application/x-shockwave-flash” data=”http://pro.toufee.com/cgi2/player.pl?userID=56&projID=promobanner” height=”280″ width=”200″ style=”width:200px;height:280px”><param name=”movie” value=”http://pro.toufee.com/cgi2/player.pl?userID=56&projID=promobanner” /><param name=”quality” value=”high” /><param name=”scale” value=”noscale” /><param name=”salign” value=”lt” /><param name=”wmode” value=”transparent”/> <param name=”flashvars” value=”userID=56&projID=promobanner”/></object></p>

Wherever it says userID=56&projID=promobanner we’ll be appending an additional parameter called target=_self such that it reads userID=56&projID=promobanner&target=_self (you’ll have to change it at three places in the code). Also, you would add this <param name=”allowscriptaccess” value=”always”/> just before the </object> tag. So the final code would be something like this (note I’ve highlighted the extra code)

<p style=”visibility:visible;”><object type=”application/x-shockwave-flash” data=”http://pro.toufee.com/cgi2/player.pl?userID=56&projID=promobanner&target=_self“height=”280″ width=”200″ style=”width:200px;height:280px”><param name=”movie” value=”http://pro.toufee.com/cgi2/player.pl?userID=56&projID=promobanner&target=_self” /><param name=”quality” value=”high” /><param name=”scale” value=”noscale” /><param name=”salign” value=”lt” /><param name=”wmode” value=”transparent”/> <param name=”flashvars” value=”userID=56&projID=promobanner&target=_self“/><param name=”allowscriptaccess” value=”always”/></object></p>

Here is the promobanner flash movie after the change

Hope this helps. I will keep you posted with more flash movie tips and flash movie creation tutorials shortly. Btw, happy Easter holidays to all!

Share

Use text-to-speech to add narrations to your Toufee flash movies

Wednesday, March 25th, 2009

One of the most powerful features of Toufee flash moviemaker application but relatively less used is the built-in text-to-speech option. With the help of Toufee’s text-to-speech engine you can add voice narrations to your flash movies without any additional burden of needing to have a “audio” file for the voiceover. Consider having to add speech to your flash videos manually by recording your own – this not only requires additional software/hardware to record the voice but also requires lots of effort to synchronize the timing of the flash movie with that of background audio. Toufee flash moviemaker saves you all the hassles so you can concentrate in creating your flash movie. To have your text read out, simply double click the text object in your flash movie to bring up the Text Editor as shown below:

Click on the dropdown list as shown in the screenshot. This is where you select the Text-to-Speech character for your text. Note that Toufee offers six different characters to choose from. Each character has a different pitch and a pause so preview the voices well when you create your flash movie. Please note that you can change the character any time from the Text Editor window.

Toufee’s Text-to-Speech feature can be a powerful asset for your flash movies. This feature is extremely useful when if you are planning to develop flash video tutorials, personal biographies, or flash movies that narrate a story or incident etc, as adding voice narrations would create a much better impact that can really enhance a flash movie.

Hope this is useful. If you have something to share, please do leave us a comment.

Share

Working with flash movie Timelines and advanced object timing

Sunday, March 15th, 2009

Timing is an advanced feature of Toufee flash movies and an important feature which could deliver amazing results if used effectively. Just to give a background, timing is the lifeline of a Toufee flash movie, i.e. every flash movie object has a timing value that has start and end points associated with it. All flash objects (i.e. your text, images, etc.) in a Toufee flash movie are relative to each other and any inconsistent timing value might affect other objects in your flash movie leading to deviation from your desired result. Before we go into the nitty-gritty of Toufee movie timing and timelines I would recommend that you please take a moment to go through my earlier article Working with Frame Timing which introduces the basic concepts of frame timing and how to use them.

What’s in a timing?

Timing is everything in a Toufee flash movie – it determines the sequence and flow of your flash movie. To control the timing of an object, select the object and expand the Timing (Experts Only) option under the Advanced tab on the Left Panel.

The three important timing settings associated with an object are as follows:

Show It: The number of seconds after which the object should show

After: Show the object after this event, for example, after Frame1 shows

Then Hide It: Hide the object after this event, for example when Frame1 ends.  The Hide It takes more values, i.e. you can also specify the number of seconds after which the object should be unloaded. To enter a custom value, one would have to select Custom from the from the Then Hide It dropdown list. Why would you want to select a custom value? Well, there might be instances where you would want to show the text (maybe a tagline) or your company logo throughout the flash movie. I have written a separate blog article on this which you might want to have a look at.

Timelines – that extra push!

Well, you had Timing options which are great when you want to adjust the timing of your flash movie. Isn’t that all one would need? To answer the question, yes, you should be fine with the Timing options in most of the cases, however, there are some instances when you might need more than what the Timing options has to offer. For example, you might in the future run into a situation where you change the Then Hide It value of an object (say an image) to unload along with the frame in which case you would use “when Frame2 ends” (assuming Frame2 is the current frame). You go then ahead and press the Save button but only to find that the changes are not saved? Why wouldn’t it save – the reason as I mentioned earlier is the relativity of the Toufee movie objects, i.e. the timing of every flash movie object is relative to one another. So if Toufee finds an inconsistency in timing, it will not save the changes and hence the problem. So how do you rectify this? Timeline is the answer!

Where is the Timeline?

When you select a Toufee object, you’ll immediately notice a timing slider just beneath the Toufee MovieMaker stage. This is the timeline.

When you select an object, you’ll notice two arrows (triange-shaped) marking the Start and the End timing of the object relative to the frame in which it is present.

For example, let’s say you have a text control named TControl71. Click on the text control and you’ll immediately notice the Timing bar (below the stage) and the Start and End arrows. Simply drag the End arrow to the end of the timing bar – this makes the object TControl71 to unload along with the frame). Please note that the timing bar of TControl71 is relative to the Frame and not to the Movie. If you want to delay showing (say by 2 seconds) of the TControl71, then you would simply move the Start arrow in the slider as in the image below.

When you run into instances where you could not set an object to unload witht the frame (i.e. when you cannot select When Frame ends option as the value for Then Hide It field), then simply use the Timeline and set the End arrow to the end of the timing bar.

Hope this helps. Until the next time, God bless!

Share

How to use HTTPS URLs in your Toufee flash movies

Wednesday, February 18th, 2009

In this brief article, we’ll be looking at how to use HTTPS URLs in your Toufee flash movies. Though Toufee flash movies support HTTP and HTTPS URLs, some users run into issues when using hyperlinks in their flash videos. To overcome this problem, we’ll be using a free service called TinyURL, that takes an URL as an input (generally, a lengthy URL, for example, something like http://www.toufee.com/moviemaker/how-to-show-flash-movie-objects-through-a-flash-video/) and converts this into a tiny URL of the form say http://tinyurl.com/dkzsbz (just as the name suggests!).

Before I run you through how to get this working, for those who do not know how to add hyperlinks, I would suggest that you please refer the following KB article that shows how to add hyperlinks when you create a flash video.

http://www.toufee.com/support/index.php?page=kb_view&id=89

Assuming that you are now familiar with adding hyerlinks to your Toufee flash movies, here is how you shorten your URL using TinyURL

  1. Go to http://www.tinyurl.com
  2. In the very first page (i.e. the Homepage), you’ll see a textbox that says Enter a long URL to make tiny:
  3. Enter your URL into the textbox and click on Make TinyURL! button
  4. You’ll see a new page open with your newly created TinyURL. Copy the new TInyURL
  5. Switch over to Toufee, select the object for which you wish to add hyperlink, switch to the Advanced tab on the Left Panel, expand Link To – Website / Email option. In the Link To dropdown list, select Website and enter the newly created TinyURL in the URL textbox.

If you ever have problems with using hyperlinks in your flash movies, then try using TinyURL. This feature is also very useful when you want to add HTTPS or very long URLs.

Hope this helps. See you all in my next post!

Ganesh

Share

How to show flash movie objects through the flash video

Monday, February 16th, 2009

Today, we will look at a handy tip that might probably be useful when creating presentation-type flash movies, i.e. for flash videos primarly used for business presentations. We will look at how to show a flash movie object, for example, a text or an image (your company logo perhaps) throughout the entire playing time of the flash movie. Why would you want it that way? Assume you create a flash video about your product and you want your “product logo” or a product tagline to show through the movie. This is also useful when doing a business presentation where you want to have the topic or the “title” to show across all the slides.

While there is no direct way to place a flash movie object on all frames (yes, you can place the same object on all the frames but this increases the movie size), but there is a workaround. For example, if your movie plays for 220 seconds, then set the timing of the text object to 220 seconds and voila, your text will show the entire 220 seconds and that way, we create the effect as though the object was present in all the frames.

Enough said, let’s look at an example. Assuming we have a text object in our movie which we want to show for 220 seconds (i.e. the movie playing time is also assumed to be 220 seconds), then here is what to do

  1. Select the text, and from the Left Panel (click on the Star icon on the left of your screen if you do not see the Left Panel), select Advanced tab
  2. Expand Timing (Experts Only) option.
  3. In the Then Hide it field, select Custom… from the dropdown list box
  4. Enter the number of seconds (playing time of your movie) in the Hide After: field (see screenshot below)
  5. Click Save button on the top right to save the changes

That’s it. Your text should now show throughout your flash movie play. It’s just a matter of extending the timing of the object.

Hope this was useful. As always, please forward all your queries, suggestions and concerns to help@toufee.com.

Till next time, God bless!

Ganesh

Share